Facebook Pixel

AN-00061 ViSi Displaying Images from the uSD Card – WYSIWYG RAW

 

Description This application note is dedicated to illustrating how to display an image on a Goldelox module using the ViSi environment in Worskhop 4. 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 Goldelox display module. When the program runs, it accesses the graphics files on the uSD card and displays the desired object on the screen.
Supported Processor GOLDELOX
Supported Environment ViSi
Difficulty

Medium

 

File Downloads
Files

 Description

This application note is dedicated to illustrating how an image is displayed on a Goldelox module using the ViSi environment in Worskhop 4. 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 Goldelox display module. When the program runs, it accesses the graphics files on the uSD card and displays the desired object on the screen.

 

In order to carry out this application, the following items are required:

  • Any of the following 4D Goldelox display modules:

uOLED-96-G2

uOLED-128-G2

uOLED-160-G2

uLCD-144-G2

uTOLED-20-G2

or any superseded module that supports the ViSi environment

  • 4D Programming Cable or µUSB-PA5
  • micro-SD (µSD) memory card
  • Workshop 4 IDE (installed according to the installation document)
  • 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

Displaying an image on a 4D screen is one of the most quintessential applications. This application note will walk through the steps involved in decoding an image into 4D format; the procedure required to place this onto an external µSD card; the 4DGL code required for displaying the image; and a brief insight into the various image control functions available that can manipulate the visual appearance.

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 Goldelox

 

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 Goldelox

 

Design the Project

Adding an Image Object

Go to “Widgets” tab in the program window, select the System/Media tab, and select the image widget icon.

Now click on the WYSIWYG screen to place the image object.

 

A dialogue box will open up .Browse for and select the image, then click open.

Now, adjust the properties of the image to your requirements by dragging on the read border lines.

The object inspector lists the properties of the newly added image object. The values of the properties can be set using the object inspector. The object has the name “Image1”.

 

uSD Card Initialization Routine

For this project a uSD card will be needed. Before its contents can be accessed, a uSD card needs to be initialized first. There is a uSD card initialization routine included in the default code of a ViSi project. Uncomment it by removing the block comment symbols, as shown below.

The routine should now be a part of the code.

 

Paste the Code for the Image Object

Now, put your cursor just after the uSD card initialization routine.

 

Click on the “Paste Code” button of the Object Inspector for the object as shown below.

 

 

The code area should be updated accordingly.

Run the Program

For instructions on how to save a ViSi project, how to connect the target display to the PC, 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 Goldelox

 

Editing the Code

The user can change the x, y location of the image by simply changing the x, y arguments in the following command,

 

If the user wishes to change the width, height, and other properties or replace the image with another image, he needs to remove the relevant piece of code, which in this case would be,

 

Then, change the properties of the image and “Paste Code” again. Please note, once the code is pasted, the changes in the Properties do not reflect on to the code i.e. all the properties need to be set prior to pasting the code.

 

The arguments “iImage1H” and “iImage1L” of the function “media_SetAdd()” are the high word and low word  of the address of the location of the object Image1 in the uSD card. These are actually constants the values of which are automatically generated by Worskhop. Before any object can be displayed, its location or address in the uSD cad needs to be specified by using the above function. To know the exact value of the constants, follow the steps below.

 

  1. Save and compile the project.
  2. Go to the beginning part of the code where the header files are listed. Workshop automatically generates a header file the name of which is derived from that of the project. For our working project with the filename “Image_96”, the header file with which we are interested is “Image_96Const.inc”.

   3. Put the cursor anywhere on the filename text and click on the right mouse button. A drop-down menu appears.Select the first         option “Open file at Cursor”.

   4. The header file should now open.

      Every time that an object is added to the project and the project is compiled, this header file is regenerated to include the              addresses of the new objects

Share: