LiveCode LessonsHow To - Step-By-Step Guides To Tasks In LiveCode Using GraphicsHow to create a scrolling group using the improved graphics architecture

How to create a scrolling group using the improved graphics architecture

The 'scrolling' layerMode can be used to good effect to cache scrolling group content. If a group is completely unadorned (no border, no scrollbars), then the engine will take the bounds of the group to be that of its contained objects and clip the rendering of those objects to the rect. In particular, it will be the unclipped content that is cached - thus eliminating redraw overhead for scrolling.

Create your group content

Create your group content

Create a new mainstack and add the content you want your scrolling group to contain. In this example we have used 3 images and 3 text fields.

Group the controls together and call the group 'gallery'.

Resize the group

Resize the group

Set the size of your stack, for this example I have made a stack that is 480 x 640. Resize your group, set the lockLocation of the group to 'true'.

Set the layerMode of the group

The engine determines what to cache based on the per-object layerMode property. This is one of static, dynamic or scrolling.

Scrolling applies only to group and is used where the group contains contents that will be scrolled so is ideal in this example.

set the layerMode of group "gallery" to "scrolling"

Set the stack properties

To use the new 'accelerated rendering' feature we need to set some stack properties which control the accelerated rendering. The compositor properties are not persistent so they must be set in preOpenStack or preOpenCard.

on preOpenStack

if the platform is "iphone" then

set the compositorType of this stack to "opengl"

else

set the compositorType of this stack to "software"

end if

set the compositorTileSize of this stack to 32

set the compositorCacheLimit of this stack to (16 * 1024 * 1024)

end preOpenStack

 

Add script to allow scrolling

The group must handle scrolling by detecting touch gestures and setting the hScroll and vScroll properties of the group.

The basic method is

on mouseDown: record the scroll value of the group and postition of the touch

on mouseMove: calculate how far the gesture has moved horizontally and vertically, set the scroll values of the group

The contents of the group should be scrolled along with the gesture.

The "gallery" group script

local sScrolling

local sInitialMouseX, sInitialMouseY

local sInitialHScroll, sInitialVScroll

on mouseDown

## Allow the group to scroll

put true into sScrolling

 

## Record the initial touch position

put item 1 of the mouseLoc into sInitialMouseX

put item 2 of the mouseLoc into sInitialMouseY

 

## Record the initial hScroll and vScroll

put the vScroll of me into sInitialVScroll

put the hScroll of me into sInitialHScroll

end mouseDown

on mouseMove mouseX, mouseY

## If the screen is being touched then

if sScrolling then      

## Calculate how far the touch has moved since it started

put mouseY - sInitialMouseY into tVChange

put mouseX- sInitialMouseX into tHChange

     

## Reset the hScroll and vScroll to follow the touch

lock screen

set the vScroll of me to sInitialVScroll - tVChange

set the hScroll of me to sInitialHScroll - tHChange

unlock screen

end if

end mouseMove

on mouseRelease

mouseUp

end mouseRelease

on mouseUp

put false into sScrolling

end mouseUp

Toggle accelerated rendering on/off

To see the difference when accelerated rendering is used add a button to the stack that switches it on and off.

on mouseUp

## Switch graphics properties on and off

if the label of me is "Off" then

set the label of me to "On"

if the platform is "iphone" then

set the compositorType of this stack to "opengl"

else

set the compositorType of this stack to "software"

end if

set the compositorTileSize of this stack to 32

set the compositorCacheLimit of this stack to (16 * 1024 * 1024)

set the layerMode of group "gallery" to "scrolling"

else

set the label of me to "Off"

set the compositorType of this stack to "none"

end if

end mouseUp

Test scrolling

Test scrolling

Set up the standalone application settings to build for your desired platform and test the stack.

The Example Stack

You can download the example stack here.

7 Comments

Marilyn

Thank you for the script for scrolling. My field is now scrolling perfectly.

I have another question for you, that is not related to this teaching. I cannot seem to find a tutorial or teaching on how to create a splash screen. I would like to make my first card my splash screen. How can I set it to automatically advance to next page after X number of seconds?

Is there anyway I can add a new page in front of page 1, or move a new page to be the first page?

Thank you,
Marilyn

Hanson Schmidt-Cornelius

Hi Marilyn,

there are many resources out there that can help you with a variety of questions, including the ones you are asking here. Have a look at our forums: http://www.runrev.com/support/forum/ or contact support at: support@runrev.com.

But here is a short answer to your questions:

Question 1:
You can add a splash screen for iOS applications through the standalone application settings of LiveCode. Android does not support the concept of a splash screen, but you can include one if you have a private or educational license, through the standalone application settings. This is used as a backdrop to display the license type when someone opens the application.
If you would like a splash screen on Android, and you are using a commercial version of LiveCode, then you have to create it yourself.

Question 2:
If you want to automate moving through cards, then have a look at "wait" and "visual effect" in the LiveCode dictionary.

Question 3:
You can use the Application Browser to see the cards of your stack. Right click on a card in the Application Browser and select the Property Inspector. This allows you to change the order of the cards in a stack.

Kind Regards,

Hanson

Barry G. Sumpter

For a working example project of an Android splash sceen originally written by a long time supporting contributor Jaque, and updated by me, please look here:

Android Splash Screen - working project
http://forums.runrev.com/viewtopic.php?f=53&t=11547

Frédéric Najman

Thank you very much for this article. it's work perfect for me .

i have a question: i would like to create such effect as with native scroll on android or iphone component . i mean when you "swing" with your finger on a field the content continue scrolling few pixel depending the speed of your finger slide . (sorry for my poor english)

is there any possibility to use such " mobileControlSet " for a group "gallery" as per your example ?

thanks for your answer
fred

Phil England

First of all, this is a great tutorial, thank you for posting it!

I have noticed that when I do this, though, that the group will tend to scroll out of its boundaries sometimes. I did make sure the lockLoc is true. Any insight on this?

Thanks,
Phil

Hanson Schmidt-Cornelius

Hi Frédéric,

yes it is possible to implement scrolling behavior for mobile devices.
I would start looking in the dictionary at: mobileControlCreate "scroller" to create the scroller. Maybe some code like the following:

mobileControlCreate "scroller"
put the result into sScrollerId

You could create a group and add whatever you want to scroll into that group. Then add the code that allows you to add the group to the scroller. Maybe something like this:

mobileControlSet sScrollerId, "rectangle", the rect of group "scrollgroup"

where "scrollgroup" is the group you want to scroll.

You will have to add a lot more functionality, but this may be a starting point for you.

Kind Regards,

Hanson

Hanson Schmidt-Cornelius

Hi Phil,

yes, that would happen. You could solve the problem by adding if conditions to the mouseMove handler that control what movements are permitted.

Kind Regards,

Hanson

Add your comment

E-Mail me when someone replies to this comment