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

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

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:

 https://tinyurl.com/ycyj3yhz

How big is our map?

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

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

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

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

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

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

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

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

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)

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

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

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.

6 Comments

Alejandro Tejada Capellan

In this lesson, imported image has a dimension
of 1171 x 795.

Which is the largest dimension of images
that could be imported to Rev?

Ben Beaumont

Hi Alejandro. Thanks for your question.

On Windows and Linux then answer depends on the computer and OS you are using. For modern systems this would be 'very big'. In a test I was able to create an image that was 16000 by 16000 pixels. The memory in use increased by 1.3Gb. This of course means that the computer running my application has to have the resources to cope with this.

On Mac OS there is a fixed limit of 4096x4096.

I hope this helps.

LuisHP

What if i want to make the image dragable and not using buttons nor scrollbars at all?. Is it possible?

Elanor Buchanan

Hi Luis

Yes you can handle the mouseDown, mouseMove and mouseUp messages to track how the mouse is moved while held down on the image, you can then set the location of the image as it is dragged.

If you are using iOS you can use an iosScroller.

I hope that helps.

Elanor

Marilyn

Elanor,

I have a text box (with a scroll bar). I would like to remove the scroll bar and drag the text up and down (with the mouse or my finger) so I can read all the text. This is much easier and faster. My ultimate purpose is to deploy to an Android Tablet.

Could you give an example of the mouseDown, mouseMove, mouseUp (etc.) messages so that I could do this?

Thank You
Marilyn

Hanson Schmidt-Cornelius

Hi Marilyn,

the following lesson implements a scrolling group that contains both images and text fields:

http://lessons.runrev.com/s/lessons/m/4071/l/44421-how-to-create-a-scrolling-group-using-the-improved-graphics-architecture

This allows you to move the group around the screen without scroll bars. A link to a sample stack is also included, allowing you to run the demo on the desktop and an Android device.

Hope this helps.

Kind Regards,

Hanson

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.