AN-00151 ViSi-Genie Magic Slide to Unlock

Description When designing GUIs (Graphic User Interfaces), it is often desirable to have a slide-to-unlock feature. This feature is commonly found in smart phones. In the standard version of Workshop 4, a stand-alone application having a slide-to-unlock feature is not possible. A host would be needed to decide when the “unlock” action is triggered, which will occur only when the slider knob is moved to the right. The new objects under the Genie Magic pane in Workshop 4 give the user more control of the program. In this application note for example, the user will learn how to create a stand-alone ViSi-Genie application with a slide-to-unlock feature in Workshop Pro.

This application note shows how to use the Magic Event object to implement a slide-to-unlock functionality. The Magic Event object is under the Genie Magic pane in Workshop 4 Pro. It contains a 4DGL code and it can be linked to standard Genie objects such as a winbutton, such that any time that the button is touched, the Magic Event object is called (or the 4DGL code is executed).
Supported Processor PICASO, DIABLO16
Supported Environment ViSi-Genie
Difficulty Medium

 

File Downloads
Files

Description

This application note shows how to use the Magic Event object. The Magic Event object is under the Genie Magic pane in Workshop 4 Pro. It contains a 4DGL code and it can be linked to standard Genie objects such as a winbutton, such that any time that the button is touched, the Magic Event object is called (or the 4DGL code is executed). Below are screenshot images of the two forms of the project for this document.

 

 

Note 1: The ViSi-Genie project for this application is found in Worskhop. Go to the File menu -> Samples -> ViSi Genie Magic (Picaso/Diablo16) -> SlideToUnlock.4DGenie.

Note 2: Worskhop Pro is needed for this application.

Before getting started, the following are required:

and other superseded modules which support the ViSi Genie environment

Visit www.4dsystems.com.au/products to see the latest display module products that use the Diablo16 processor.

When downloading an application note, a list of recommended application notes is shown. It is assumed that the user has read or has a working knowledge of the topics presented in these recommended application notes.

 

Application Overview

When designing GUIs (Graphic User Interfaces), it is often desirable to have a slide-to-unlock feature. This feature is commonly found in smart phones. In the standard version of Workshop 4, a stand-alone application having a slide-to-unlock feature is not possible. A host would be needed to decide when the “unlock” action is triggered, which will occur only when the slider knob is moved to the right. The new objects under the Genie Magic pane in Workshop 4 give the user more control of the program.  In this application note for example, the user will learn how to create a stand-alone ViSi-Genie application with a slide-to-unlock feature in Workshop Pro.

 

Setup Procedure

For instructions on how to launch Workshop 4, how to open a ViSi-Genie project, and how to change the target display, kindly refer to the section “Setup Procedure” of the application note:

ViSi Genie Getting Started – First Project for Picaso Displays (for Picaso)

or

ViSi Genie Getting Started – First Project for Diablo16 Displays (for Diablo16).

 

Create a New Project

Create a New Project

For instructions on how to create a new ViSi-Genie project, please refer to the section “Create a New Project” of the application note

ViSi Genie Getting Started – First Project for Picaso Displays (for Picaso)

or

ViSi Genie Getting Started – First Project for Diablo16 Displays (for Diablo16).

 

Design the Project

A uLCD-32PTU (portrait orientation) will be used for this application note.

Add a Slider Object to Form0

The slider object is found under the Inputs pane.

 

Select the Slider Object Icon

 

Place the Slider Object on the WYSIWYG Screen

Click on the WYSIWYG screen to place the slider object. This is Slider0.

 

 

Change the Orientation of Slider0 to Horizontal

In the Object Inspector, look for the property “Orientation”. Change the value from “vertical” (default) to “horizontal”.

 

Experiment with the other properties of the slider. The appearance of the slider can be modified by changing several of the property values. Below is the final appearance of Slider0.

 

 

Add a Label to Form0

The static text object under the Labels pane can be used to create labels.

 

Select the Static Text Icon

 

Place the Static Text Object on the WYSIWYG Screen

Click on the WYSIWYG screen to place the static text object. This is Statictext0.

 

Change the Caption for Statictext0

Type the caption “Slide to Unlock” for Statictext0.

 

Change the Font for Statictext0

Click on the ellipsis icon of the property “Font”.

 

The Font window will appear. Experiment with the different fonts properties. Further below is the final appearance of Statictext0.

 

Add a New Form – Form1

The form object is under the System/Media pane.

 

 

Add a Winbutton Object to Form1

The winbutton object is under the buttons pane.

 

Select the Winbutton Icon

 

Place the Winbutton Object on the WYSIWYG Screen

Click on the WYSIWYG screen to place the winbutton object. This is Winbutton0.

 

Change the Caption for Winbutton0

 

Experiment with the other properties of the winbutton object. The final appearance of Winbutton0 is shown below.

 

Note that another static text object is added to Form1. This is Statictext1.

 

Configure the OnChanged Event Property of Winbutton0

In the Object Inspector, go to the Events tab and click on the ellipsis icon for the OnChanged property.

 

The on event selection window appears. Select Form0Activate and click OK.

 

Add a Magic Event Object to Form0

The Magic Event object is under the Magic Pane.

 

Navigate Back to Form0

 

Select the Magic Event Icon

 

Clicking on the Magic Event icon will automatically cause Workshop to create a magic event object on the current form. Shown below is MagicEvent0.

 

Link MagicEvent0 to Slider0

In the Object Inspector, go to the Events tab and set the OnChanged property of Slider0 to “MagicEvent0”.

 

This means that every time a touch-and-release action on Slider0 is detected, the routine inside MagicEven0 is executed.

 

Write the Code for MagicEvent0

In the Object Inspector, click on the ellipsis symbol.

 

The code for MagicEvent0 appears.

 

The code for MagicEvent0 is shown below.

 

The screenshot image was cropped to fit this column. See the SlideToUnlock demo in Worskhop for the full code.

 

Check for the Frame Value of Slider0

During runtime, the program navigates to Form1 if the slider knob is dragged to and released on the right-most part. Otherwise, the slider knob is moved back to the left-most part and the program stays on Form0. To ensure that the slider knob is on the right-most part, we write:

 

The function

 

returns the current frame of Slider0. If you happen to have released the slider knob halfway, then this function will return the value “50”.

 

The function

 

returns the number of frames (minus 1) of Slider0. Slider0 has 101 frames, since the minimum and values are 0 and 100, respectively.

 

For more information on the 4DGL function “img_GetWord(…)”, see the section “2.18 Image Control Functions” of the Picaso or Diablo16 Internal Functions Reference Manual.

 

Activate Form1

To activate Form1, use its index as a parameter in the function

 

For more information, see the section “5.1 Genie Magic callable Functions” of the ViSi-Genie Reference Manual.

 

Write a Value to Slider0

To make the knob of Slider0 return to the left, we write:

 

For more information, see the section “5.1 Genie Magic callable Functions” of the ViSi-Genie Reference Manual.

 

Build and Upload the Project

For instructions on how to build and upload a ViSi-Genie project to the target display, please refer to the section “Build and Upload the Project” of the application note

ViSi Genie Getting Started – First Project for Picaso Displays (for Picaso)

or

ViSi Genie Getting Started – First Project for Diablo16 Displays (for Diablo16).

 

The uLCD-32PTU and/or the uLCD-35DT display modules are commonly used as examples, but the procedure is the same for other displays.

 

 

 

 

 

 

Share: