Help with scrolling image + buttons

Lykaestria · Post by **Lykaestria** » Tue Dec 09, 2008 12:51 pm

I'd like to be able to make a simple application where a large picture is able to be scrolled in a window, with buttons on one side for changing the picture that appears in the scrolling window. I think I understand button gadgets well enough to be able to send instructions to change picture, but I don't have the foggiest idea on how to make large picture appear in a scrollable window... can anyone please help me out?

srod · Post by **srod** » Tue Dec 09, 2008 12:58 pm

Quickest way would be to use an image gadget to host the image and then place the image gadget within a scrollarea gadget.

I'm sure there are examples of doing this in the forums.

Kaeru Gaman · Post by **Kaeru Gaman** » Tue Dec 09, 2008 1:01 pm

agree, that would be quickest and easiest.

a more gamelike way would be to use buttons for step-scrolling and use a smaller Imagegadget to draw the bigger image into.

Kaeru Gaman · Post by **Kaeru Gaman** » Tue Dec 09, 2008 1:35 pm

lil' demo:

Code: Select all

; *** Image-Scroll Demo
; *** Kaeru Gaman, Dec.9 2008
; *** PB 4.20

EnableExplicit

#Window1 = 0

Enumeration 
  #Button_Up
  #Button_Right
  #Button_Down
  #Button_Left
  #Image_Area
EndEnumeration

#Image_Big  = 0
#Image_Show = 1

Define n.l , t.l , Color.l

Define EvID.l ,  EvGD.l, EvScrl.l, EXIT.l

Define AreaX.l, AreaY.l

CreateImage( #Image_Show, 256, 256 )

CreateImage( #Image_Big, 2048, 2048 )

StartDrawing( ImageOutput( #Image_Big ) )
  DrawingMode( #PB_2DDrawing_Transparent )
  For t=0 To 31
    For n=0 To 31
      Color = Random( $FFFFFF )
      Box( n*64, t*64, 64, 64, Color )
      DrawText( n*64 + 8, t*64 + 16, Str(n)+","+Str(t), Color ! $FFFFFF )
    Next
  Next
StopDrawing()

StartDrawing( ImageOutput( #Image_Show ) )
  DrawImage( ImageID( #Image_Big ), -AreaX, -AreaY )
StopDrawing()

OpenWindow( 0, #PB_Ignore, #PB_Ignore, 352, 352, "Image Scroller" )
CreateGadgetList(WindowID(0))
  ButtonGadget( #Button_Up    ,  48,  16, 256,  24, "^" )
  ButtonGadget( #Button_Right , 312,  48,  24, 256, ">" )
  ButtonGadget( #Button_Down  ,  48, 312, 256,  24, "v" )
  ButtonGadget( #Button_Left  ,  16,  48,  24, 256, "<" )

  ImageGadget( #Image_Area    ,  48,  48, 256, 256, ImageID( #Image_Show ) )


Repeat
  EvID   = WaitWindowEvent()
  EvGD   = EventGadget()
  EvScrl = 0

  Select EvID
    Case #PB_Event_Gadget
      Select EvGD
        Case #Button_Up
          EvScrl = 1
          AreaY - 16
          If AreaY < 0
            AreaY = 0
          EndIf
        Case #Button_Right
          EvScrl = 1
          AreaX + 16
          If AreaX > 1792   ; 2048-256
            AreaX = 1792
          EndIf
        Case #Button_Down
          EvScrl = 1
          AreaY + 16
          If AreaY > 1792   ; 2048-256
            AreaY = 1792
          EndIf
        Case #Button_Left
          EvScrl = 1
          AreaX - 16
          If AreaX < 0
            AreaX = 0
          EndIf
      EndSelect

    Case #PB_Event_CloseWindow
      EXIT = 1
  EndSelect

  If EvScrl 
    EvScrl = 0
    StartDrawing( ImageOutput( #Image_Show ) )
      DrawImage( ImageID( #Image_Big ), -AreaX, -AreaY )
    StopDrawing()
    SetGadgetState( #Image_Area, ImageID( #Image_Show ) )
  EndIf

Until EXIT

srod · Post by **srod** » Tue Dec 09, 2008 1:43 pm

Same demo, but with a ScrollArea gadget :

Code: Select all

; *** Image-Scroll Demo 
; *** Kaeru Gaman, Dec.9 2008 
; *** PB 4.20 

EnableExplicit 

#Window1 = 0 

Enumeration 
  #ScrollArea
  #Image_Area 
EndEnumeration 

#Image_Big  = 0 

Define n.l , t.l , Color.l 

Define EvID.l ,  EvGD.l, EvScrl.l, EXIT.l 

Define AreaX.l, AreaY.l 

CreateImage( #Image_Big, 2048, 2048 ) 

StartDrawing( ImageOutput( #Image_Big ) ) 
  DrawingMode( #PB_2DDrawing_Transparent ) 
  For t=0 To 31 
    For n=0 To 31 
      Color = Random( $FFFFFF ) 
      Box( n*64, t*64, 64, 64, Color ) 
      DrawText( n*64 + 8, t*64 + 16, Str(n)+","+Str(t), Color ! $FFFFFF ) 
    Next 
  Next 
StopDrawing() 

OpenWindow( 0, #PB_Ignore, #PB_Ignore, 352, 352, "Image Scroller" ) 
CreateGadgetList(WindowID(0)) 
  ScrollAreaGadget(#ScrollArea, 0, 0, 352, 352, ImageWidth(#Image_Big), ImageHeight(#Image_Big), 10)
    ImageGadget(#Image_Area, 0, 0, ImageWidth(#Image_Big), ImageHeight(#Image_Big), ImageID( #Image_Big ) ) 
  CloseGadgetList()

Repeat 
  EvID   = WaitWindowEvent() 
  EvGD   = EventGadget() 
  EvScrl = 0 

  Select EvID 
    Case #PB_Event_CloseWindow 
      EXIT = 1 
  EndSelect 


Until EXIT

Kaeru Gaman · Post by **Kaeru Gaman** » Tue Dec 09, 2008 1:53 pm

please alter the header...

srod · Post by **srod** » Tue Dec 09, 2008 1:56 pm

Kaeru Gaman wrote:please alter the header...

Still your demo Kaeru. I didn't have time to create the whole code so I just pinched yours!

Kaeru Gaman · Post by **Kaeru Gaman** » Tue Dec 09, 2008 1:58 pm

well.. ok

Lykaestria · Post by **Lykaestria** » Tue Dec 09, 2008 2:37 pm

Thanks guys, I'll see what I can come with using those 2 examples as a starting point