How do I scroll a card that is taller or wider than the window?
Occasionally you might want to display more information on a card than can be seen all at once due to the window size. This is not a problem in LiveCode, in this lesson we will see how to use a group to scroll content.
Stack url: https://tinyurl.com/y7mbfmfr
Images url: https://tinyurl.com/ycyj3yhz
Create your stack
As an example we are going to create a stack for viewing a map of Edinburgh. The map is larger than our viewing stack so we need to be able to scroll the map to view different parts. First we create our stack, by going to File-> New Stack. Open the stack Property Inspector from the Object menu(1) and name it "Map Viewer". Go to the Position tab, resize it (2) and turn off the ability to resize the stack(3).
Import the map
Now we import our map using Import as Control from the File menu. This imports the image on to our stack ready to be used. You can get all the images we used in this lesson here:
How big is our map?
Now that we have imported the map we can see that it is much bigger than our stack. If we check the property inspector we can see that it is actually 1171 x 795, compared to our stack which is only 300 x 300.
Make the map scrollable
If we want to be able to see different parts of our map we need to be able to scroll it. As we can't make an image scroll we will put our map into a group. It may seem a little unnecessary to group a single object but in this case we do it because when you scroll a group the contents scroll so we can use this to show us different parts of our map.
Firstly we want to position the map so that it's top left corner is in the top left corner of the stack, our scrolling will then be relative from that point. We can do this in the property inspector of the map image, we just set the left (1) and top (2) co-ordinates of the image to 0.
Group the map
We select our map image and then use the Group button in the toolbar(1) to create a group containing our map, we will call this group map display (2)
Resize and position the group
We now need to make our map scroll, firstly we make the map display group the same size as our stack and lock it's size and position. This means when the group is scrolled the displayed contents scroll but the group itself stays in the same position on the card. This allows us to see different parts of the map. After setting these options you might need to set the topLeft of the map display group back to 0,0.
Make the map scrollable
Now to make the map scroll all we need to do is to add horizontal and vertical scrollbars to the map display group. Go to the Basic tab of the group Property Inspector (1), and check Horizontal and Vertical scrollbars (2).
Scroll the map
You can now switch to Run mode and use the scrollbars to show you Thistle Street, the home of LiveCode.
Improving the look of the stack
Having 2 scrollbars on your stack certainly works but maybe the stack would look nicer without them? I think so. Instead of the scrollbars lets add some arrow buttons to allow us to navigate around our map.
Firstly lets remove the scrollbars and add our buttons up, down, left and right. Drag four buttons from the tools palette, and name them in the basic tab of the Property Inspector.
Import button graphics
Now lets add icons to our buttons so they look a little nicer. Add a new card to store the button icons, in the Object menu (1) choose New Card (2) and name it graphics (3). Import the graphics you want to use as button icons (4) in the same way we imported the map image in the second step.
Add button icons
Go back to the main card using the View menu -> go prev, and select the up button. We are going to add the up arrow as an icon so we need to turn off the opaque, show name, 3-D and Show border properties in Basic Properties.
Add button icons (2)
Now go to Icons and Borders, turn off Hilite Border (1), and use the Icon picker (2) to select the up arrow graphic we just imported (3). Note: since the icon is white on transparent, it may be hard to see...
Repeat this for the other buttons, then play around with the size and position of them until you are happy with how it looks.
Scripting the down button
Now that we have our buttons in place it's time to make them do something. What we want our buttons to do is to mimic using the scrollbar to scroll the contents of the group. To do this we set the vScroll and hScroll properties of the group. The vScroll is the amount in pixels the object has been scrolled down, the hScroll is the amount in pixels that the object has been scroll right. If the vScroll or hScroll is zero, the object has not been scrolled.
Lets start with the down button. Select the button and open the Code editor from the toolbar. Enter:
on mouseUp local tCurrentScroll put the vScroll of group "map display" into tCurrentScroll add 10 to tCurrentScroll set the vScroll of group "map display" to tCurrentScroll end mouseUp
Click apply, and switch to run mode to test. Every time the down button is clicked we add 10 to the vScroll of the map display group so the map will scroll down by 10 pixels.
Scripting the other buttons
Now all we need to do is script the other 3 buttons in the same way. The up button also uses vScroll but right and left use hScroll as we want the map to scroll horizontally when using those buttons. To move up and left, use -10 instead of 10.
Now we can navigate around our map until we can see Thistle Street again.