Page 1 of 1
How to stretch the image of ImageGadget() and change to another image after the click event
Posted: Mon Sep 23, 2024 2:24 pm
by hdt888
My window has 2 OptionGadget() and 1 ImageGadget().
Code: Select all
#Image1 = "D:\photos\img1.png"
#Image2 = "D:\photos\img2.png"
How to stretch the image of ImageGadget() ?
Then display 2 different images after click event on each of these OptionGadget.
Thank you for help !
Re: How to stretch the image of ImageGadget() and change to another image after the click event
Posted: Mon Sep 23, 2024 4:36 pm
by spikey
The ImageGadget automatically resizes depending on the dimensions of the displayed image. You'll need to make sure your images are all the same size before you display them, if you want consistency. You can change the displayed image with
SetGadgetState(). You can resize an image using
ResizeImage().
The OptionGadget creates a #PB_Event_Gadget when it is clicked, you can alter the image something like this:
Code: Select all
Enumeration Gadgets
#Option1
#Option2
#Image
EndEnumeration
Enumeration Images
#Picture1
#Picture2
EndEnumeration
CreateImage(#Picture1, 100, 100, 24, #Blue)
StartDrawing(ImageOutput(#Picture1))
DrawText(30, 30, "1", #White)
StopDrawing()
CreateImage(#Picture2, 100, 100, 24, #Red)
StartDrawing(ImageOutput(#Picture2))
DrawText(30, 30, "2", #White)
StopDrawing()
If OpenWindow(0, 0, 0, 160, 210, "OptionGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
OptionGadget(#Option1, 30, 20, 80, 20, "Option 1")
OptionGadget(#Option2, 30, 45, 80, 20, "Option 2")
SetGadgetState(#Option1, 1)
ImageGadget(#Image, 10, 100, 100, 100, ImageID(#Picture1))
Repeat
Event = WaitWindowEvent()
If Event = #PB_Event_Gadget
If EventGadget() = #Option1
SetGadgetState(#Image, ImageID(#Picture1))
ElseIf EventGadget() = #Option2
SetGadgetState(#Image, ImageID(#Picture2))
EndIf
EndIf
Until Event = #PB_Event_CloseWindow
EndIf
Re: How to stretch the image of ImageGadget() and change to another image after the click event
Posted: Mon Sep 23, 2024 4:52 pm
by Axolotl
As always, there are many ways to program something .....
E.g. Draw the selected image in the required size ....
Code: Select all
LoadImage(0, #PB_Compiler_Home + "examples/sources/Data/Map.bmp")
LoadImage(1, #PB_Compiler_Home + "examples/sources/Data/Geebee2.bmp")
Procedure UpateImage(Gadget, CurrentImage)
Protected img
img = CreateImage(#PB_Any, GadgetWidth(Gadget), GadgetHeight(Gadget))
If img <> 0
StartDrawing(ImageOutput(img))
DrawImage(ImageID(CurrentImage), 0, 0, GadgetWidth(Gadget), GadgetHeight(Gadget))
StopDrawing()
SetGadgetState(Gadget, ImageID(img))
FreeImage(img)
EndIf
EndProcedure
Procedure main()
Protected currImage
If OpenWindow(0, 0, 0, 400, 200, "ImageGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered| #PB_Window_SizeGadget)
ImageGadget(0, 80, 10, 310, 180, 0)
OptionGadget(2, 4, 4, 64, 20, "Image 1")
OptionGadget(3, 4, 24, 64, 20, "Image 2")
SetGadgetState(2, 1)
currImage = 0
UpateImage(0, currImage)
Repeat
Select WaitWindowEvent()
Case #PB_Event_CloseWindow
Break
Case #PB_Event_SizeWindow
;
ResizeGadget(0, #PB_Ignore, #PB_Ignore, WindowWidth(0)-90, WindowHeight(0)-20)
UpateImage(0, currImage)
Case #PB_Event_Gadget
Select EventGadget()
Case 2
currImage = 0
UpateImage(0, currImage)
Case 3
currImage = 1
UpateImage(0, currImage)
EndSelect
EndSelect
ForEver
EndIf
ProcedureReturn 0
EndProcedure
End main()
Re: How to stretch the image of ImageGadget() and change to another image after the click event
Posted: Mon Sep 23, 2024 6:08 pm
by TI-994A
hdt888 wrote: Mon Sep 23, 2024 2:24 pmHow to stretch the image of ImageGadget() ?
This example
displays the selected image to fit the image viewer while maintaining its aspect ratio:
Code: Select all
UseJPEGImageDecoder()
; size of the image viewer
#imageDisplayWidth = 300
#imageDisplayHeight = 300
Enumeration
#image1
#image2
#image3
#resizedImage
EndEnumeration
CompilerIf #PB_Compiler_Version < 600
InitNetwork()
CompilerEndIf
; downloading an 800 x 600 pixel image from dropbox (if not previously downloaded)
If FileSize(GetTemporaryDirectory() + "space.jpg") < 1
ReceiveHTTPFile("https://www.dropbox.com/scl/fi/ygcu8g4hy34tj8rd5al3p/space.jpg?" +
"rlkey=ovoqtapghabvykwh1jet6v7kd&st=jc0hgduh&dl=1",
GetTemporaryDirectory() + "space.jpg")
EndIf
LoadImage(#image1, GetTemporaryDirectory() + "space.jpg")
LoadImage(#image2, #PB_Compiler_Home + "examples/sources/Data/Geebee2.bmp")
LoadImage(#image3, #PB_Compiler_Home + "examples/sources/Data/PureBasic.bmp")
CopyImage(#image3, #resizedImage)
Procedure displayImage(img)
Shared imgViewer
CopyImage(img, #resizedImage)
imgWidth.f = ImageWidth(img)
imgHeight.f = ImageHeight(img)
If imgWidth > imgHeight
imgWidth = #imageDisplayWidth
imgHeight = imgHeight * (#imageDisplayWidth / ImageWidth(img))
Else
imgHeight = #imageDisplayHeight
imgWidth = imgWidth * (#imageDisplayHeight / ImageHeight(img))
EndIf
ResizeImage(#resizedImage, imgWidth, imgHeight)
SetGadgetState(imgViewer, ImageID(#resizedImage))
EndProcedure
OpenWindow(0, 0, 0, 340, 390, "Scale-to-fit Images",
#PB_Window_SystemMenu | #PB_Window_ScreenCentered)
OptionGadget(0, 20, 20, 100, 25, "Image 1")
OptionGadget(1, 130, 20, 100, 25, "Image 2")
OptionGadget(2, 240, 20, 100, 25, "Image 3")
imgViewer = ImageGadget(#PB_Any, 20, 60, 300, 300, 0, #PB_Image_Border)
Repeat
event = WaitWindowEvent()
Select event
Case #PB_Event_CloseWindow
appQuit = #True
Case #PB_Event_Gadget
Select EventGadget()
Case 0
displayImage(#image1)
Case 1
displayImage(#image2)
Case 2
displayImage(#image3)
EndSelect
EndSelect
Until appQuit
Re: How to stretch the image of ImageGadget() and change to another image after the click event
Posted: Thu Sep 26, 2024 1:30 pm
by hdt888
The code runs as expected.
many thank to spikey, axolotl, ti-994a.