Facebook Pixel

AN-00085 Serial Displaying Images from the uSD Card RAW

Description In this application note, the user will learn how to add images to the WYSIWYG screen in the ViSi environment and how to copy the generated graphics file to a RAW-formatted uSD card. The uSD card is then mounted to the display, and the procedure for accessing and showing the images thru serial media commands is demonstrated.
Supported Processor GOLDELOX
Supported Environment Serial
Difficulty Medium

 

File Downloads
Files

  Description

This application note illustrates how to display images from the uSD card in RAW format. The uSD card is mounted to a 4D display, which is controlled serially by the Serial Commander.  In order to carry out this application note the following items are required:

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

Images and other objects are combined into a graphics file of a format readable by 4D graphics processors. This graphics file is copied to a uSD card either in RAW format or in FAT16 format. The Goldelox processor is capable of accessing RAW-formatted uSD cards only. The Picaso and Diablo16 processors, on the other hand, are capable of accessing RAW-formatted and FAT16-formatted uSD cards. In this application note, the user will learn how to add images to the WYSIWYG screen in the ViSi environment and how to copy the generated graphics file to a RAW-formatted uSD card. The uSD card is then mounted to the display, and the procedure for accessing and showing the images thru serial media commands is demonstrated.

  Setup Procedure

This application note, although written for Serial, requires the use of the ViSi environment to generate the necessary files which will be copied to the uSD card. The display module is then configured as a slave device by loading it with the SPE application. With the uSD card mounted onto the display, the host, which is the Serial Commander in this application note, will then be able to control the display and access the contents of the uSD card.

This application note starts with the creation of a basic ViSi project. Users who want to learn more about the ViSi environment may consult the application note

ViSi Getting Started - First Project for Goldelox

Topics discussed in that application note include instructions on how to launch Workshop 4, how to open a ViSi project, how to change the target display, how to create a new ViSi project, how to save a ViSi project, how to connect the target display to the PC, and how to compile and download a program.

 

  Generate the Graphics File

Launch Workshop 4

Open the Workshop 4 (WS4) IDE and click "Create a new project".

 

Choose a Goldelox display as the target device. For this example we select the uOLED-128-G2. Click Next.

 

Select the ViSi environment.

 

This will open the ViSi development environment window within the WS4 IDE as shown below.

 

Add an Image Object

The icon for the image object is found under the Systems/Media pane of the Widgets menu. Click on it.

 

Click on the WYSIWYG screen to place an image object.

 

Workshop will then ask for an image file. Here a PNG image for the digit zero is selected.

The WYSIWYG is updated accordingly with the image. This image object is Image1.

 

The 4DGL commands for displaying Image1 can be seen by pasting the code for it on the code area. Place the cursor on line 22 of the code area, as indicated below.

 

In the object inspector for Image1, click on the “Paste Code” button.

The code area is updated accordingly.

 

Take note of these commands as we are actually going to “mimic” their use thru the Serial Commander later on. Add another image object to the WYSIWYG screen. This object is Image2, the source of which is a PNG image of the digit “1”.

 

The corresponding code for this object is:

Save and Compile

To generate the graphics file, click on the “Compile” button under the Home menu.

 

Workshop will ask for a filename for the project. Enter a name then click on the Save button.

 

Workshop now builds the graphics file and copies it to the uSD card. The Copy Confirmation window appears. You will be prompted to choose the correct drive for the memory card. Choose the correct drive by clicking on the drop down arrow. Then click OK.

 

Depending on your PC User Account Control settings, Windows might ask for a confirmation to run the program RawCopy.exe. This program copies the graphics file to the µSD card in RAW format. Click Yes.

 

Another confirmation window appears. Click Yes only if you are ready to proceed.

 

Workshop now copies the graphics file to the μSD card. Properly unmount the uSD card from your PC then mount it to the display module.

 

Address of Images

The images are now a part of the graphics file which has been copied to the uSD card. When we access the uSD card to look for the images, we have to know where they are located. Workshop actually saves the addresses of objects as constants in an include file in the ViSi environment. This include file is automatically generated, and has a filename identical to that of the project. Include files are found at the start of a 4DGL code. Here the include file with which we are interested is “rawImagesConst.inc”. Put the cursor on the filename text and click on the right mouse button.

 

A menu appears. Choose “Open file at Cursor”.

 

Take note of the constant values as we are going to need them later.

 

Control the Display

The display must be configured as a slave device first before it can be controlled by a host. For instructions on how to launch Workshop 4, how to connect the display module to the PC, and how to configure the display as a slave device, kindly refer to the section “Setup Procedure” of the application note below.

Serial Goldelox Getting Started - The SPE Application

This application note also introduces the user to the Serial Protocol thru the use of the Serial Commander.

Clear the Screen

In the Gfx tab select gfx_Cls and press the Send button below.

 

This will clear the 4D display screen.

Initialize the uSD Card

Next click on the Media tab and select media_Init and press Send.

 

The bytes sent and received are:

 

Set an Image Address

In the Media tab, select media_Init. Input the media memory address location for Image1. The media memory address location is divided into two – the high word (upper two bytes) and the low word (lower two bytes).

 

The sent and received bytes are:

Show an Image

In the Media tab, select media_Image. Input the x and y coordinates for Image1.

 

The bytes sent and received are:

 

Image1 should now be shown on the screen.

 

Set another Image Address

Set the address for Image2.

 

The hexadecimal number “0x2000” is “8192” in decimal.

Show another Image

 

Image2 should now be shown on the display.

 

Share: