In this tutorial I’ll cover how you can develop a a simple Slideshow app that will rotate over set of images.
This tutorial introduces:
The completed app will look like the following allowing you to create a slideshow rotating between selected images. It will contain a checkbox that when checked, will start the slideshow and when unchecked, will stop it. It will also include a slider allowing you to change the delay between slides.
We will be working toward the design shown in figure blow:
The figure below shows how the components are arranged in the design editor. It also shows you the non-visible component (Clock):
We define 2 global variables.
- listImages– a list variable to hold list of images for the slideshow
- index – a variable that holds the current slide indexes. We default it to 1; first image in the list
We now create a procedure that can be invoked when the app is started (initialized). The procedure is called “setCanvasImage” and as argument, it takes slideNumber. This procedure sets the background of the canvas to the slideNumber (index of the list). We also invoke this procedure from screen initialization so that first image is set into canvas background. Also, in our initialize block, we convert the initial value of Slider thumbPosition to millisecond by multiplying it by 1000.
Next, we implement ability to allow user to indicate start or stopping of the slideshow by use of a Checkbox. For this, we have created a procedure (resetTimer) that starts or stops a timer (Clock). The procedure takes accepts a boolean parameter that we use to start or stop our timer. Whenever the status of checkbox is changed, we pass the status ( checked (true) or unchecked (false) ) to our procedure.
When the timer is enabled, in the Timer event, we check to see if the last picture is shown. If so, we loop to first image. This is accomplished by adding 1 to our variable (index) and checking to see if it is greater than our list of image size. If so, we reset our index to 1. After our index check, we invoke setCanvasImage procedure (see above) to change the Canvas background to the new image.
Lastly, we have used a Slider component with following values of min=1, max=5, thumbPosition=3. We use these values for our slideshow delay (in seconds), allowing user to change delay by dragging the slider thumb. Since values are in seconds, we convert to Milliseconds and then change TimerInterval using below block.
You can use TinyDB component to store last image shown, slider position, image description text