Facebook Pixel

AN-00016 ViSi-Genie Starter Kit Demos Part 1

Description This application note is dedicated to illustrating how to create an application that contains a simple music player, a video player, and an image viewer. Some of the input and output objects used in the ViSi Genie environment are also shown.
Supported Processor PICASO
Supported Environment
ViSi-Genie
Difficulty Medium

 

File Downloads
Files

Description

This application note is dedicated to illustrating how to create an application that contains a simple music player, a video player, and an image viewer. Some of the input and output objects used in the ViSi Genie environment are also shown. In order to get 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. The display module used in this application note is the uLCD-32PTU, which is a Picaso/diablo16 display. This application note is applicable to Diablo16 display modules as well.

 

Each object can have properties edited at the click of a button, all relevant code is produced in the user program.

There are nine different projects combined in this application. Each project uses one or more forms, which are in turn linked together by customised buttons. The user can choose a project from the menu screen, and can navigate from the project screen back to the menu screen using buttons.

 

 

 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

Everything is now ready to start designing the project.

Workshop 4 displays an empty screen, called Form0.

A form is like a page on the screen. The form includes objects, like sliders, displays or keyboards. Below is an empty form.

Create the Splash Screen

Add a Background Image

In the Object Inspector, click on the  symbol of the Image property.

The standard Open file window appears and asks for an image. Browse for any background image file desired. The 4D splash screen image is found here:  …\StarterKitDemos.ImgData\.

Upon clicking Open, the Image-Video Converter appears and provides all the parameters for the image.

The left side of the window shows the original input image and its properties; the right side, the output image and its properties. The pixel dimensions of the 4D splash screen image file exactly fit the pixel dimension of the display LCD (in this example, 240 by 320 pixels). To know the pixel dimensions of your screen, kindly refer to the specification sheet.

The original input image will be automatically scaled and resized to fit the target screen.

 Click OK then under the Object Inspector, click on the  symbol of the Bgtype property.

A dropdown menu appears. Choose Image. The background image should now be displayed.

 

Create a Button

 To add a button, go to the Buttons pane then click on the button icon.

Click on the WYSIWYG screen to place the button.

The button can be dragged to any desired location.  

The Object Inspector on the right part of the screen displays all the properties of the new button object, Winbutton0.

Feel free to experiment with the different properties. To know more about buttons, refer to ViSi-Genie Advanced-Buttons.

Now set the following properties for Winbutton0:

Create the Menu Screen

Create a New Form

A new form is needed for the menu screen. To add a new form, go to the System/Media pane, and click on the form icon.

 

Upon clicking on the Form icon, a new form with a default black background is displayed on the WYSIWYG screen. Also note that the Object Inspector now shows a new form name, Form1.

To go back to Form0 (the splash screen), click on    and choose Form0.

Form0 should now be displayed on the screen. Do this to navigate between forms.

Add a Background Image

Follow the procedure described in page 7 (Create the Splash Screen – Add a Background Image) to add a background image for the menu screen.

The 4D menu background image is found here:  …\StarterKitDemos.ImgData\.

 

Create the Menu Buttons

To add a button, go to the Buttons pane then click on the button icon.

Click on the WYSIWYG screen to place the button. The new button is now displayed on the screen.

The Object Inspector displays the properties of the new button. Note that the name for the new button is Winbutton1. This property cannot be edited.  By default, button caption is the same as button name.

To change the caption, go to the Object Inspector and edit the Caption property. Change “Winbutton1” to “Music player”.

To change the button color, click on the  symbol of the Color line.

A color picker window shall now appear.

Choose Maroon then click OK. Winbutton1 should be updated accordingly.

Repeat the same procedure to create the other buttons.

The buttons in the 4D menu screen have the following properties:

Add a Static Text Object

To add a static text object, go to the Labels pane then click on the static text icon.

 Click on the WYSIWYG screen to place the text object.

The object Statictext0 now appears on the screen. It can be dragged to any desired location. The Object Inspector displays the properties of the object. Change the caption from “Statictext0” to “Menu”.

To change the font properties, click on the  symbol of the Font property.

A font editor window will now appear. Choose the desired font properties then click OK.

The menu screen is now complete.

Linking Forms

Now there are two form objects, Form0 (the splash screen) and Form1 (the menu screen). Upon power up, the module will display the splash screen, then the user will press the “click-to-continue…” button (Winbutton0 in this example) to go to the menu screen. To do this, we associate Winbutton0 to the act of opening Form1 (menu screen).

Go back to Form0 by clicking on the    symbol and choosing Form0 in the Object Inspector.

Form0 should now be displayed on the WYSIWYG screen.

Click on Winbutton0 to highlight it.

When Winbutton0 is highlighted, its properties are displayed in the Object Inspector.

Now click on the Events pane.

Winbutton0 generates the event onChanged when pressed.  We will associate this to Form1. Click on the  symbol in the onChanged line.

An On event selection window appears. Choose Form1Activate then click OK.

At this point you might want to test your program. Jump to Build and Upload the Project to do this. The module should display the splash screen (Form0) upon power up. When the “click-to-continue…” button is pressed and released, the menu screen (Form1) should be displayed. To know more about linking forms to buttons, refer to ViSi-Genie Advanced-Buttons ( Button-Based Menu).

Create a Music Player

Create a New Form with a Background Image

Now add a new form for the music player. In this example, this is Form2.

Add a background image to the form. The 4D music player background image is found here: …\StarterKitDemos.ImgData\.

The background image is now displayed.

Add a Sounds Object

Go to the System/Media pane and click on the Sounds icon.

There is no need to click on the WYSIWYG screen to place it as the Sounds object is a hidden object. Also, note that the WYSISWYG screen automatically displays Form0. The Sounds object is always under Form0. Only one Sounds object can be added, but it can contain multiple tracks.

The Object Inspector now shows the newly added Sounds0 object. It is empty and contains no tracks to play.

 

Add Tracks to the Sounds Object

Click on the WavFiles property and click on .

A WAV files window appears and shows all the tracks available.

The list is empty. To add a track, click on the Add button,  .

The standard Open file window appears.

Browse for any desired WAV file, and click Open. The track list will be updated. In this example, four WAV files are added. The wav files used in this example are found here: …\StarterKitDemos.ImgData\.

Add Customized Track Buttons to Control the Sounds Object

Go back to Form2 (the music player screen) and add a button object.

Change the Caption property value from “Winbutton5” to “Track 1”.

A button can display an icon. Click on  in the Picture property field.

The standard Open file window asks for an image. Browse for any desired image file. The image file used in this example is located here: …\StarterKitDemos.ImgData\. Winbutton5 now is displayed below.

To make Winbutton5 look nicer, input the following property values.

The customized button will now look like as shown below.

Add another button below the Track 1 button, but this time use another image file as an icon. The image file used in this example is found here: …\StarterKitDemos.ImgData\.

Repeat this procedure to come up with four track buttons, as shown below. Change the captions accordingly.

Add Customized Play, Pause, and Stop Buttons to Control the Sounds Object

Now add another button to the music player screen. This will be the Play button. In the Object inspector, click on  in the Picture property field.

The standard Open file window asks for an image. Browse for any desired image file to be used as a play button icon. The image file used in this example is located here: …\StarterKitDemos.ImgData\. Winbutton9 is now displayed below.

Now apply the following property values to the Play button.

The final appearance of the play button is shown below.

Add two more button objects – the Pause and Stop buttons.

The image files used as play, pause, and stop icons in this example are located in a single folder. The Play, Pause, and Stop buttons have the same properties, only the icon image files are different.

When finished, the music player screen will look like as shown below.

Control the Sounds Object Using the Track Buttons

Now we will associate each of the four track buttons to the corresponding WAV file in the track list.

Click on Winbutton5 or the Track 1 button. In the Object Inspector, go to the Events pane and click on the  symbol.

An On event selection window now appears. Choose Sounds0Tune0 then click OK.

The Events pane is updated.

When the Track 1 button is pressed and released, the onChanged event is raised and sends the command Sounds0Tune0. The command Sounds0Tune0 stands for Tell the Sounds0 object to play the first song in the track list.

Now select the Track 2 button. In the Object Inspector, go to the Events pane and click on the  symbol to open the On event selection window. This time choose Sounds0Tune1 and click OK.

When the Track 2 button is pressed and released, the onChanged event is raised and sends the command Sounds0Tune1. The command Sounds0Tune1 stands for Tell the Sounds0 object to play the 2nd song in the track list. The table below shows the association of the buttons to the wav files.

Using the table above as a guide, continue associating the two remaining buttons.

Control the Sounds Object Using the Play, Pause, and Stop Buttons

When the Track 1 button is pressed and released, the first song in the track list will be played. To add more control over the Sounds object, a pause button can be added. On the WYSIWYG screen, click on the Pause button.

In the Object Inspector, go to the Events pane and click on the  symbol to open the On event selection window.

The On event selection window opens.


 

Select Sounds0Pause then click OK. The command Sounds0Pause stands for Tell the Sounds0 object to pause playing the track.

To resume playing the track, we will use the Play button. Click on the Play button on the WYSIWYG screen to configure it.

 

In the Object Inspector, go to the Events pane and click on the  symbol to open the On event selection window. Select Sounds0Play then click OK.

The command Sounds0Play stands for Tell the Sounds0 object to resume playing the track being currently paused.

To stop playing the track, the Stop button can be configured to send the command Sounds0Stop when pressed and released. Follow the steps taken when configuring the Pause and Play buttons. This time, select Sounds0Stop when the On event selection window appears.

The command Sounds0Stop stands for Tell the Sounds0 object to stop playing the track.

Control the Volume Using a Slider Object

It is also possible to control the volume of the Sounds object. A Slider object can be used to accomplish this. Go the Inputs pane and click on the slider icon.

When the Slider icon is highlighted, click on the WYSIWYG screen to place a slider object. Drag the object to any desired location. Minimum volume is 0 and maximum is 100, so the properties of the slider object should be defined properly in the Object Inspector.

The slider object in the 4D music player screen has the following additional properties:

The updated WYSIWYG screen is now shown below.

 

 Go to the Events pane of the Slider object and click on the  symbol in the OnChanging line.

Go to the Events pane of the Slider object and click on the  symbol in the OnChanging line.

The Events pane is now updated.

The command Sounds0Volume stands for Tell the Sounds0 object to set volume to the value sent.

Add a LED Digits Object to Display the Volume Level

The LED digits object will display the volume level when the slider object is moved. To add a LED digits object, go to the Digits pane and select the first icon.

Click on the WYSIWYG screen to place it.

Go to the Object inspector and set the following property values.

The updated appearance of the LED digits object is shown below.

Now we associate the Slider object to the LED digits object. First, select the Slider object. Go to the Object Inspector and go to the Events pane. Click on the  symbol in the OnChanged line.

 When the On event selection window appears, choose Leddigits0Set under Form2 (the music player screen) and click OK

The command Leddigits0Set stands for Tell the Leddigits0 object to display the value sent.

Add Static Text Objects

We will now add the texts “Playlist” and “volume”.

Click on the WYSIWYG screen to place a text object.

The object Statictext1 now appears on the screen. It can be dragged to any desired location. The Object Inspector displays the properties of the object.

Change the caption from “Statictext1” to “Playlist”. Edit the other properties as desired.

Add another text object (volume) to the WYSWYG screen by following the same procedure. This time change the caption from “Statictext2” to “volume”. When finished, the screen should look similar to the one shown below.

Link the Music Player to the Menu Screen

Jump back to Form1 (the menu screen) by choosing Form1 in the Object Inspector.

The menu screen should now be displayed. Select the Music player button.

In the Object Inspector, go to the Events pane and click on the  symbol.

The On event selection window appears. Select Form2Activate then click OK.

When the Music player button is pressed and released, the screen will display the music player screen. Now we need to add a Home button to allow the user to navigate back to the menu screen.

Go to Form2 (the menu screen) by choosing Form2 in the Object Inspector.

When Form2 is displayed, click on any of the Play, Pause, and Stop buttons. In this example, the Stop button is selected.

Press Ctrl + C to copy, and Ctrl + V to paste. A copy of the Stop button is placed on the screen.

 

Drag the button to the lower right part of the screen or to any desired location. Go to the Object Inspector and remove the existing caption property value (leave it as blank). Replace the icon image file. The 4D Home button icon image file is found here: …\StarterKitDemos.ImgData\. Go to the Events pane and click on the  symbol to change the existing command.

On the On event selection window, choose Form1Activate instead, and then click OK.

When the Home button is pressed and released, the menu screen will be displayed. The complete music player screen is now shown below.

Now is a good time to test your program. Go to Build and Upload the Project section of this application note to do this. The display module used in this example has a resolution of 240x320 pixels. For screens with a resolution other than 240x320 pixels, the location of the objects on the screen may need to be adjusted. To know the resolution of your screen, refer to the specification sheet

To know more about the Sounds object, refer to ViSi-Genie Play Sound. To know more about input objects such as the Slider, refer to ViSi-Genie Inputs. To know more about the Button object, refer to ViSi-Genie Advanced-Buttons.

 

Create a Video Player

Create a New Form with a Background Image

The video player in this example has three forms – Form3, Form4, and Form5. Each form displays a video – Video0, Video1, and Video2.

 

Now create the first form for the video player, Form3. Go to the System/Media pane and click on the form icon.

A new form will be displayed. Add a background image to the form. The 4D video player background image is located here: …\StarterKitDemos.ImgData\.

 

The WYSIWYG screen is updated accordingly.

Add a Video Object

In the System/Media pane, select the video icon. Click on the WYSIWYG screen to place it.

A standard Open file window appears. Browse for any desired video file. The video file used in this application is found here: …\StarterKitDemos.ImgData\. The new video object, Video0, is now placed on the screen.

The video object can be resized and dragged to any location. Its properties can also be edited in the Object Inspector. Feel free to experiment with the values. Video0 in this example has the following properties:

Now go to the Object Inspector and click on the  symbol in the Video property line.

The Image + Video Converter window appears.

The left side shows information about the original input video; the right side shows information about the output video. Properties of the video object can also be edited here.

Below the input video, there is a slider for selecting a frame. Drag the slider horizontally and note how the frame shown and the frame number are updated accordingly.

Form3 plays a sequence of the video file - frames 0 to 242 only. This is possible by editing the Start and End Frame values in the Image + Video Converter window (right side).

Frames 0 to 242 can be viewed using the frame slider. Also, note that the value for Frame Delay is 33, the unit of which is in milliseconds.  Frame delay defines how fast the frames are displayed.  Click OK to close the Image + Video Converter window.

Refer to ViSi-Genie Play Video for a more detailed discussion of the parameters in the Image + Converter window and to know more about playing a video object in ViSi Genie in general.

Add a Timer Object

A timer object is needed to play the video. Go to the System/Media pane and select the timer icon.

Note that the WYSISWYG screen displays Form0. The timer object is always under Form0, just like the Sounds object. The timer object raises an event at a given pace, for example every 1000 milliseconds.

 

Now change the value of Interval from 1000 to 33 (milliseconds). Every 33 ms, Timer0 raises the event called OnTimer.

The OnTimer event can be configured to send the command Video0NextFrame to Video0.

The command VideoNextFrame stands for Tell the Video0 object to show the next frame.

Every 33 ms, a new frame will be displayed. As a video is a succession of still images or frames, changing the frames quickly enough creates the impression of a movie.

It is also important to note that the value of Frame Delay (Video0) is equal to the value of Interval (Timer0).

Add Play, Pause, and Back Buttons to Control the Video Object

Now create the Play, Pause and Back buttons. These are similar to the Play, Pause, and Stop buttons previously created in the Music Player. Follow the procedure described in Create a Music Player - Add Customized Play, Pause, and Stop Buttons to Control the Sounds Object to create the buttons for the video player. The icon image file used for the Back button is found here: …\StarterKitDemos.ImgData\.

When finished, the screen will look similar to the one shown below.

 

Select the Play button, Winbutton13 in this example. In the Object Inspector, go to the Events pane. Click on the  symbol to open the On event selection window.

 

Select Timer0Play then click OK.

The command Timer0Play stands for Tell the Timer0 object to start the timer and raise an event every defined delay.

The logic is that the play button controls the timer, which in turn controls the video. Therefore, the play button controls the video indirectly through the timer.

Again, the video frame delay must be equal to the timer interval.

Now configure the Pause button as shown below.

The command Timer0Stop stands for Tell the Timer0 object to stop the timer and no longer raise events.

Similarly, the logic is that the pause button controls the timer, which in turn controls the video. Therefore, the pause button controls the video indirectly through the timer.

To resume after pause, press the Play button again.

The Back button is used here to show the first frame of the video object. Configure the Back button as shown below.

The command Video0Previous stands for Tell the Video0 object to show the first frame. The Back button controls the Video0 object directly in this case, without the use of the Timer0 object.

Create the 2nd and 3rd Forms for the Video Player

Follow the procedure for creating the first form of the video player (Form3) in creating the second and third forms, Form4 and Form5. Three different video files can be played, using three different timer objects.

Each timer object corresponds to a video object, so be careful in configuring the control buttons in each form.

The video player in this application uses a single video file for all the three forms. The first form shows the beginning part of the video, the second form shows the middle part, and the third form shows the last part.

This is possible by configuring the First and Last Frame values of each video object in the Object Inspector.

Create the Navigation Buttons

After having created the three similar forms for the video player, we will now create the navigation buttons. See the final appearance of the video player below.

Pressing and releasing each of the form navigation buttons (video 1, video 2, and video 3) displays the corresponding form (Form3, Form4, and Form5). The home button is used to navigate back to the menu screen.

The form navigation buttons used in this application have the following properties.

The image file used as icon for the video navigation buttons is found here:

…\StarterKitDemos.ImgData\.

Now create the two remaining video navigation buttons as well as the home button. The home button is identical to the music player home button. Do the same for the second and third forms. Linking of the navigation buttons to the corresponding forms is left as an exercise for the reader.

Link the Video Player to the Menu Screen

The final step, before testing your program, is to link the first form of the video player (Form3 in this example) to the menu screen. Go to the menu screen and configure the video player button as shown below.

Refer to ViSi-Genie Play Video to know more about playing a video object in ViSi Genie.


Now you can test your program. Jump to Build and Upload the Project for the procedure. Check if the control and navigation buttons are working properly.

Create an Image Viewer

The image viewer in this application is composed of four forms, each displaying an image and containing navigation buttons. Each page has next, back, and home buttons.

Create the First Form

Add a new form to the image viewer.

Add a background image for the new form, Form6 in this example. This will be the first image shown. The image file used in this application is found here: …\StarterKitDemos.ImgData\.

The WYSIWYG screen is updated accordingly.

 

Create the Navigation Buttons

Now add the navigation buttons shown below.

The image files used as icons are found here: …\StarterKitDemos.ImgData\. Now link the Home button to the menu screen (Form1).

Create the 2nd, 3rd, and 4th Forms

Follow the procedure for creating the first form to create the three remaining forms of the image viewer. Use any image file desired. The image files used as background images in this example are found here: …\StarterKitDemos.ImgData\. Also, do not forget to configure the navigation buttons in each form properly. The Next button will allow the user to navigate to the next form which shows another image. The Back button will allow the user to navigate back to the previous form.

Link the Image Viewer to the Menu Screen

Go back to the Menu screen and select the Image Viewer button.

Configure it as shown below.

Form6 here is the first form of the image player. When the Image Viewer button in the menu screen is pressed and released, the first form of the Image Viewer will be displayed. To test your program, go to Build and Upload the project section of this application note. Check if the navigation buttons for the image viewer are working properly.

Input and Output Objects: Trackbar – Meter and LED Digits

The three remaining forms in this application show the reader some of the different input and output objects used in ViSi Genie and the basic ways of using them. For a more detailed discussion of input, output, and combined objects, refer to ViSi-Genie-User-Guide.

Shown below is the complete appearance of the Trackbar – Meter and LED Digits form (Form10 in this example).

The user vertically drags the slider of the Trackbar object, which is the input. The needle of the Meter object points to the corresponding value in response to the movement of the Trackbar slider in real time. The LED Digits object will then display the value when the user is done moving the Trackbar slider. The Meter and LED Digits objects are the output. The Next, Back, and Home buttons are added for navigational purposes.

Create a New Form with a Background Image

A new form will be displayed. Add a background image to the form. The 4D input - output background image is located here: …\StarterKitDemos.ImgData\.

The WYSIWYG screen is updated accordingly.

Add a Trackbar Object

Go to the Inputs pane and click on the Trackbar icon.

Click on the WYSIWYG screen to place it.

The object can be dragged and resized as desired. Feel free to experiment with the properties in the Object Inspector. The Trackbar object in this application has the following properties.

The customised Trackbar object (Trackbar0) is updated in the WYSIWYG screen.

Create a Meter Object

Go to the Gauges pane and select the Meter icon.

Click on the WYSIWYG screen to place it.

 

The object can be dragged and resized as desired. Feel free to experiment with the properties in the Object Inspector. The Meter object in this application has the following properties.

The customised Trackbar object (Trackbar0) is updated.

Create a LED Digits Object

Go to the Digits pane and click on the LED Digits icon.

Click on the WYSIWYG screen to place it. The LED Digits object in this example has the following properties.

The WYSIWYG screen is updated.

Add Static Text Objects

Text objects will be added to label the different parts of the form, as shown below.

We will now add the text “Input”.

Click on the WYSIWYG screen to place a text object.

The object Statictext3 now appears on the screen. It can be dragged to any desired location. The Object Inspector displays the properties of the object. Change the caption from “Statictext3” to “Input”. Edit the other properties as desired. Do the same for all the remaining text labels.

Link the Input and Output Objects

Now, the objects need to be linked – moving the trackbar updates the meter and the LED digit display.

Select Trackbar0 and go to the Events pane of the Object inspector. Click on the  symbol in the OnChanging line to open the On selection window.

Select Meter0Set and click OK.

Note that Meter0Set is under Form10. When working with multiple forms and objects, things may get mixed up.

The Events pane for Trackbar0 is now updated accordingly.

Moving Trackbar0 raises the OnChanging event. When the OnChanging event arises, a message is sent to Meter0 with the value.

Moving Trackbar0 raises the OnChanging event. When the OnChanging event arises, a message is sent to Meter0 with the value.

Select Meter0 and configure it as shown below.

When Meter0 receives and displays a new value, it raises the OnChanged event. When the OnChanged event arises, a message is sent to Leddigits1 with the value.

In summary:

For more information on OnChanged and OnChanging events, refer to ViSi-Genie onChanging and onChanged Events.

Add the Navigation Buttons

The navigation buttons are similar to those created in the image viewer. Creating and configuring these buttons are left as an exercise for the reader. The image files used as button icons in this form are found here: …\StarterKitDemos.ImgData\. When finished the final form should look similar to the one shown below.

Link the Trackbar – Meter and LED Digits Form to the Menu Screen

Before testing your program, go to the menu screen and configure the Input/Output button as shown below.

Go to Build and Upload the Project for the procedure on how to build and upload your project.

Please proceed to ViSi-Genie Starter Kit Demos Part 2 for the continuation of this discussion.

 

Share: