Facebook Pixel

AN-00069 ViSi Displaying Images from the uSD Card - WYSIWYG FAT16

Description This application note explains how to create image and video objects in the WYSIWYG screen, how to insert the generated object codes into the main program, and how to display the objects using simple 4DGL commands. For video objects, this tutorial shows how video frames are displayed either one at a time or continuously.
Supported Processor PICASO, DIABLO16
Supported Environment ViSi
Difficulty Medium

 

File Downloads
Files

  Description

This application note shows how to add image and video objects in ViSi. 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. The display module used in this application note is the uLCD-32PTU, which is a Picaso display. This application note is applicable to Diablo16 display modules as well.

for non-gen4 displays(uLCD-xxx)

for gen4 displays (gen4-uLCD-xxx)

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

ViSi allows the user to place a widget (an image object for example) on the WYSIWYG (What-You-See-is-What-You-Get) screen and paste the corresponding 4DGL code to the code area. Worksop 4 then automatically generates the graphics files in the background and copies them to the uSD card. The 4DGL code is compiled and downloaded to the display module. When the program runs, it accesses the graphics files on the uSD card and displays the desired object on the screen.

This application note explains how to create image and video objects in the WYSIWYG screen, how to insert the generated object codes into the main program, and how to display the objects using simple 4DGL commands. For video objects, this tutorial shows how video frames are displayed either one at a time or continuously.

  Setup Procedure

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

ViSi Getting Started - First Project for Picaso and Diablo16

Create a New Project

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

ViSi Getting Started - First Project for Picaso and Diablo16

 

  Design the Project

Uncomment the uSD Card Initialization Routine

Remove the block comment symbols as shown below.

 

The code screen will be updated accordingly, showing the block as an actual part of the code for compilation.

 

Leave lines 28 and 29 as they are, since they are not needed in this application.

 

The function file_LoadImageControl(fname1,fname2,mode) in line 30 creates an image control list. It requires two files – fname1 and fname2, the .dat file and .gci file, respectively. These files are created by Workshop. The GCI file contains all the graphics for the images and/or videos created by Workshop. The DAT file contains one line for each image or video, that names the object and gives its starting offset within the GCI and its initial X/Y position. The function returns a handle (pointer to the memory allocation) to the image control list that has been created. This handle will be used to access and display objects, as will be shown later.

Image Object

Add an Image Object to the WYSIWYG Screen

Go to the Widgets menu, select the System/Media pane, and click on the Image icon.

Once the Image icon is selected, click on the WYSIWYG screen to place it. A standard Open window appears. Browse for the desired file and click Open. The WYSIWYG screen is updated.

 

The user can drag the object to any desired location in the WYSIWYG screen. It is also possible to resize the image by dragging the borders. Further editing of other properties can be done using the Object Inspector. The user may want to limit the image size (length and width) so as to give room for a video object later on in this application note.

 

Insert the Image Object Code

Go to the code area and place the cursor just after the handle assignment statement (line 32 in this example).

Having selected the image object, go to the Object Inspector and click on the Paste Code button.

 

The program code will be updated accordingly.

 

A new line for the image object is generated, along with a comment. The command

simply displays the image that has been created. Note that iImage1 is an image index for the object created.

 

Video Object

Add a Video Object to the WYSIWYG Screen

Go to the Widgets menu, select the System/Media pane, and click on the Video icon.

 

Once the Video icon is selected, click on the WYSIWYG screen to place it. A standard Open window appears and displays the files that can be opened. Browse for the desired file and click Open. The WYSIWYG screen is updated.

 

The user can drag the object to any desired location in the WYSIWYG screen. It is also possible to resize the object by dragging the borders. Further editing of other properties can be done using the Object Inspector.

Video Frames

It is possible for the user to know the number frames inside a video. In the Object Inspector click on the symbolbeside Frames.

The properties under Frames will be displayed.

 

The video added in this application note has the frame properties shown above. Total number of frames is 605 – from 0 (First) to 604 (Last). The user has the option of choosing what frames to include in the GCI file by changing the First and Last frame properties. For example,

The user can view the actual frames by clicking on the Video property line and clicking on the symbol .

 

The Image + Video Converter window now appears. Refer to ViSi-Genie Play Video for detailed information on how to use the Image + Converter window. FrameDelay is the delay between each frame. The unit is in milliseconds. The reciprocal of FrameDelay is the frame rate of the video. For example, the video used in this application note has a frame rate of 1/.033 = 30 frames per second.

 

Insert the Video Object Code

Go to the code area and place the cursor after the handle assignment statement (line 37 after the img_Show() command in this example).

 

Having selected the video object, go to the Object Inspector and click on the Paste Code button.

 

The program code will be updated accordingly.

 

A new block for the video object is generated, along with a comment. The command

is used to set which frame of the movie is to be displayed. The user can replace the fourth argument, frame, with a frame value. For instance, set the program to display frame 0 of the object Video1 by writing the statement

 

After having set the frame to be shown, display the frame with the command

 

To display three frames in succession, the user can use the code below.

 

Note that for the fourth argument, frame, the range of possible values depends on how many frames the video object has - 0 to 604 for the video used in this application note. If the user is doing pure codes in the Designer environment, is also possible to get the number of frames by using the function

img_GetWord(hndl, iVideo1, IMAGE_FRAMES) ;

An Example

To play an entire video, the user can use a loop with an incrementing counter. To illustrate:

 

Or

 

Note that the delay used is 33 milliseconds, which is equal to the FrameDelay property of the video file. This enables the program to play the video at its original frame rate.

This application note comes with a ViSi file, VIDIMAGEtutorial, which contains a code for playing an entire video. It also contains the codes shown in the previous sections of this tutorial.

 

  Run the Program

For instructions on how to save a ViSi project, how to connect the target display to the PC, how to select the program destination (this option is not available for Goldelox displays), and how to compile and download a program, please refer to the section “Run the Program” of the application note

ViSi Getting Started - First Project for Picaso and Diablo16

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

Workshop Sample Programs

Workshop comes with many sample programs, one of which is entitled VIDIMAGE. This program is almost identical to VIDIMAGEtutorial. To open it, click on the File menu tab.

 

Near the bottom of the drop down menu, you can find the Samples button, click on it.

 

The samples window now appears. Select Picaso ViSi.

 

Select the file VIDIMAGE then click on Open.

 

The program now opens.

Share: