How to stretch the image of ImageGadget() and change to another image after the click event

[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 !

[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

[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() 

[TI-994A]

How 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 

[hdt888]

The code runs as expected.

many thank to spikey, axolotl, ti-994a.