AN-00005 ViSi-Genie Show Image

Description This application note shows how to add an image object and how to customize it.
Supported Processor PICASO, Diablo16
Supported Environment ViSi-Genie
Difficulty Medium

 

File Downloads
Files

Description

This Application Note explores the possibilities provided by ViSi-Genie for the Image object.

This application note requires:

  • Workshop 4 has been installed according to the document Workshop 4 Installation;
  • The user is familiar with the Workshop 4 environment and with the fundamentals of ViSi-Genie, as described in Workshop 4 User Guide and ViSi-Genie User Guide;
  • 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 discussed in these recommended application notes.

Two examples of ViSi-Genie projects are provided to help you along this application note.

 

Application Overview

A graphical user interface is based on images and 4D Systems screens display them beautifully.

This application note describes how to add an Image object and how to customise it.

 

Setup Procedure

This application note comes with a zip file which contains two ViSi-Genie projects.

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

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).

 

The Image Object

You can load the ViSi-Genie project example…

Example:  4D-AN-00005 PICASO – Show Image1 or 4D-AN-00005 DIABLO16– Show Image1

The Image object is located on the System/Media pane:

Add an Image Object

Click first on the Image icon…

…and click on the WYSIWYG screen to place it.

 

The standard Windows Open file appears and asks for an image:

 

Select the folder, here French Alps, and the picture, here IMG_0480 with a lovely view of the Mont Blanc…

 

...and press Open to load the image:

 

The WYSIWYG screen now displays the image:

 

Note that the image is in a square in the middle of the screen and that the proportions are not consistent with the original ones.

The Object Inspector displays the properties of the Image object:

The Image object contains one single image.

 

Move the Image

To place the image on the top-left corner of the screen, first select the Image object by clicking on it; red dots appear around the image:

 

 

Then, two options:

  • Either use the keyboard and edit two properties on the Object Inspector, Left and Top :
    • Select the Left line, enter 0 and press Enter
    • Select the Top line, enter 0 and press Enter

Or use the mouse, click-and-drag the image on the top-left corner of the screen:

 

The WYSIWYG screen shows the new location of the image:

 

Resize the Image

To resize the image, first select the Image object by clicking on it; red dots appear around the image:

 

Because the screen used for this application note is 320 x 240, maximal height is 240 pixels and maximal width is 320 pixels. Those values may change depending on your specific screen. Please refer to the specification sheet of your screen.

Then, two options:

  • Use the keyboard and edit two properties on the Object Inspector, Height and Width :
    • Select the Height line, enter 0 and press Enter
    • Select the Width line, enter 0 and press Enter
  • Or use the mouse, click on the bottom-left red dots and resize the image to fill all the screen:

 

The WYSIWYG screen shows the new size of the image:

 

Edit the Image

To edit the image, click on the Image line in the Object Inspector:

 

 symbol appears. Click on it.

A new window Image – Video Converter appears and provides all the parameters for the image:

 

On the left side, the input image; on the right, the output image.

 

Crop the Input the Image

The left side provides all the information about the input image:

 

Note the red dots around the loaded image.

Cropping part the input image is possible by

  • Resizing the image moving the red dotted rectangle, 
  • Entering new values for Left, Top, Width and Height under Selection Window in Input:
  • Clicking on the up or down arrows  for the concerned value

 

Focusing on the Mont Blanc gives the following result:

 

Cropping the input image can also be done by changing the Height, Left, Top and Width properties under Source on the Object Inspector:

 

Resize the Output Image

Similarly, the right side displays the output image:

Because the screen used for this application note is 320 x 240, maximal height is 240 pixels and maximal width is 320 pixels. Those values may change depending on your specific screen. Please refer to the specification sheet of your screen.

 

Changing the size of the output image is possible by:

  • Resizing the image moving the red dotted rectangle,
  • Entering new values for Width and Height under Image | Actual Size | Output:
  • Clicking on the up or down arrows for the concerned value:
    • Note it is not possible to move the output image on the screen.

      The top-left position of the image is defined by the Top and Left properties on the Object Inspector. Please refer to the Move the Image section.

      It is important to keep the ratio of the output image consistent with the input. Is this example, output is only a fraction of the input, but the ratio width/ height should remain the same, at 1.3. So 163 is too high, a better value is 143.

The output image is resized with an estimated size:

 

Back to full screen for the output image increases the estimated size from 52 KB to 150 KB:

 

Change the Image

You can load the ViSi-Genie project example…

Example:  4D-AN-00005 PICASO – Show Image2 or 4D-AN-00005 DIABLO16– Show Image2

or follow the procedures described hereafter.

To load an image, click on

 

The standard Windows Open file appears and asks for an image:

 

 

Select the image, here IMG_0431 and click Open:

 

The Image – Video Converter shows the new image:

 

Confirm or Discard the Changes

When cropping, resizing are finished, click…

 

 

…to accept or…

 

…to discard the changes.

Click on OK to accept the new image.

The WYSIWYG screen now shows the flowers:

 

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: