ViSi-Genie: Show Image
Description
This Application Note explores the possibilities provided by ViSi-Genie for the Image object.
This application note requires:
- Workshop4 has been installed as discussed here;
- The user is familiar with the Workshop4 environment and with the fundamentals of ViSi-Genie, as described in Workshop4 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
Note
Two examples of ViSi-Genie projects are provided to help you along this application note.
Downloadable Resources
The following are the sample project files for DIABLO-16 and PICASO.
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 Workshop4, 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 with PICASO Displays
- ViSi-Genie: Getting Started with DIABLO-16 Displays
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 with PICASO Displays
- ViSi-Genie: Getting Started with DIABLO-16 Displays
The Image Object
You can load the example project files under the Downloadable Resources section or follow the procedures described hereafter.
Select the Home menu to display the objects:
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:
Notice that the image is square-shaped 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:
-
In the Object Inspector, set Left and Top properties 0 :
-
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:
-
In the Object Inspector, set Height and Width properties 240 and 320 respectively:
-
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:
A 
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 Image
The left side provides all the information about the input image:
Notice the red dots around the loaded image.
Cropping part the input image is possible by
-
Resizing the image moving the red dotted rectangle,
-
Editing Left, Top, Width and Height under Selection Window in Input by typing or clicking the up or down arrows
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 320x240, 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 target 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.
Change the Image
You can load the example project files under the Downloadable Resources section or follow the procedures described hereafter.
To load an image, click on 
The standard Open File window 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 and 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 with PICASO Displays
- ViSi-Genie: Getting Started with DIABLO-16 Displays
The uLCD-32PTU and/or the uLCD-35DT display modules are commonly used as examples, but the procedure is the same for other displays.