Page 1 of 1
Help with scrolling image + buttons
Posted: Tue Dec 09, 2008 12:51 pm
by Lykaestria
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?
Posted: Tue Dec 09, 2008 12:58 pm
by srod
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.
Posted: Tue Dec 09, 2008 1:01 pm
by Kaeru Gaman
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.
Posted: Tue Dec 09, 2008 1:35 pm
by Kaeru Gaman
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
Posted: Tue Dec 09, 2008 1:43 pm
by srod
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
Posted: Tue Dec 09, 2008 1:53 pm
by Kaeru Gaman
please alter the header...
Posted: Tue Dec 09, 2008 1:56 pm
by srod
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!
Posted: Tue Dec 09, 2008 1:58 pm
by Kaeru Gaman
well.. ok
Posted: Tue Dec 09, 2008 2:37 pm
by Lykaestria
Thanks guys, I'll see what I can come with using those 2 examples as a starting point