ViSi

Description

This manual is dedicated to explaining the ViSi Software Tool, which is part of the Workshop5 IDE.

An overview of its basic functionality and uses will be explored. To use ViSi, the following items are required:

Any 4D Systems Display Module which uses a 4D Labs processor
- DIABLO16
- PICASO
- PIXXI44
- PIXXI28
4D Programming Cable or Adaptor
A micro-SD memory card
Workshop5 IDE

Note

Workshop5 ViSi is identical to Workshop4 ViSi and therefore some information from the Workshop4 ViSi User Manual is also applicable.

Application Overview

It is often difficult to design a graphical display without being able to see the immediate results of the application code. ViSi is the perfect software tool that allows the user to see the instant results of their desired graphical layout.

Additionally, there is a selection of inbuilt dials, gauges and meters that can simply be dragged and dropped onto the simulated module display. From here, each can have properties edited and at the click of a button, all relevant code is produced in the user program. Each feature of ViSi will be outlined with examples below.

app-overview

Setup Procedure

To install the Workshop5 IDE, follow the instruction on Workshop5 IDE User Manual

Development Roadmap

After having completed the setup procedure, we are now ready to create and develop a project.

This section discusses the overall development process including graphics design, writing code and uploading to the display module.

Launch Workshop5

There is an alias for 4D Workshop5 IDE on the desktop.

desktop

Launch 4D Workshop5 IDE by double-clicking on the icon.

icon

Create a New Project

At launch, Workshop5 IDE will display the Setup Window which defaults to Recent tab when there are recent projects available or to Create tab when there are no recent projects.

create-tab

If in the Recents view, click the CREATE button.

create-btn

Display Selection

There are two (2) options that can be use to select the target display.

Use the Search for products text box.
Use the slider or the mouse wheel.

select-display

Click the filter button and select the processor of the target display.

filter

After finding the target display, follow the steps below to proceed.

Select target display.
Click the display image to select the desired display orientation.
Click the Confirm.

display-selection

Select ViSi

The next page will ask the environment to develop the project. To select the ViSi environment click the ViSi and click confirm.

select-visi

The development environment is now displayed.

visi-envvironment

The Main Screen

Let's discuss the different areas of the ViSi environment. There are seven (7) different areas, from left to right, from top to bottom.

visi-areas

Menus
Ribbons with icons
Code Editor
Graphics Toolbar
Visual Editor
Object Properties
Message Window

Area 1: Menus

This menu includes standard Windows options. Each menu displays a specific ribbon.

menus

Area 2: Ribbons with Icons

Ribbons with icons are grouped with closely related commands in each menus.

The ribbons on the Home menu are grouped as project, code editor, bookmarks, find and replace, code folding and compile.

home-menu

Area 3: Code Editor

The code editor has two (2) open tab, Main and Generated.

The Main tab is where to write the 4DGL code. It has initial lines of codes which are necessary for the project.

main-code-editor

The Generated tab is a read-only 4DGL codes that are generated based on project contents and settings.

generated-code-editor

The graphics toolbar provides buttons for managing widgets.

graphics-toolbar

From left to right, the toolbar items are described in the table below.

Item	Description
Load Widget	Opens the Select Widget window.
Save Widget	Opens the Save Widget window.
Copy Widget	Copies the selected widget for pasting.
Cut Widget	Copies the selected widget for moving to another page.
Paste Widget	Pastes the recently copied widget.
Delete Widget	Deletes the selected widget.
Load Form	Opens the Load Form window.
Save Form	Opens the Save Form window.
Delete Form	Deletes the selected form.

Area 5: Visual Editor

The visual editor represents a What-You-See-Is-What-You-Get (WYSIWYG) area.

visual-editor

The active form is displayed and can be populated by objects from the object selection window.

Area 6: Object Properties

Object properties provides all the information of the selected object. Each object has their own properties that can be set on this area before pasting it on the code editor.

object-properties

You can use the paste code button to paste the code of the selected object.

paste-code-btn

Area 7: Message Window

The message window displays errors, warnings and notices after the project was compiled and build.

message-window

Designing a Graphical Interface

The Workshop5 IDE provides a simple method for creating graphical user interfaces for 4D Systems display modules. It provides easy-to-use visual editor with support for multiple types of widgets including buttons, sliders, knobs and gauges.

Object Selection

Below is the steps in selecting and putting the objects into the visual editor.

To begin, click on the Widgets tab and select the object to open the Widget Selection window.
The widget selection window is open.
Navigate to each widgets pane to select an object. (1) Once an object is selected, on the top left will show the object name and on the opposite side it will show the object type if it is GCI, Internal or Inherent widget. (2) Then click the Confirm button to put the object into the Visual Editor.

Note

Widgets are filtered according to the selected processor.
The object will be shown on the top left of the visual editor.

Object Properties Configuration

Once the object was added to the visual editor, use the object properties to configure the object. Set the position, dimension, appearrance and other properties that neeeded for the project.

obj-properties

To add more objects, just repeat the steps in Object Selection and Object Properties Configuration.

Changing Between Object Properties

If there are multiple graphical objects on the screen, it may be necessary to change between object properties. Do this by using the dropdown box located at the top of the Object Inspector. Alternatively, each object can be edited by clicking on the object in the module display area.

Writing the Code

Once done in designing the graphical interface, let's now go to the code editor to write the code that we want for our program.

Main Tab

In the code edior Main tab contains initial code for including files, libraries and initial setup for the display orientation.

ce-main

When using GCI or Inherent widgets, the line SetupMedia() function should be uncommented. This function is defined on the GeneratedConsts.inc file that is a helper function for the storage media.

Generated Tab

On the Generated tab, is a read-only file which is generated automatically during the designing of the user interface. This file defines all the widgets or object that is use on the graphical interface and functions needed on the main file.

cd-generated

This file GeneratedConsts.inc is automatically included into the main file.

Workshop5 is primarily designed for products powered by 4D graphics processors: PIXXI-44, PIXXI-28, DIABLO-16, and PICASO. It provides multiple environments for developers allowing different level of expertise, from no coding at all to writing code from scratch.

Workshop5's ViSi environment provides the most versatility by allowing users to write their own code while providing a graphics editor. Furthermore, it provides a simple utility that generates code for each widget or object used in the project with a click of a button.

Workshop5 ViSi environment provides a Paste Code utility that can be used to generate relevant code for the widgets.

paste-code-btn

This option generates code to update or show widgets at the current cursor position, or more appropriate location or multiple locations in the project.

The following is a list of code snippets Workshop5 generate for a target Workshop5 object.

Enabling touch - the function img_ClearAttributes() enable the widgets touch. This only needs to run once. This line s only available on widgets with touch capabilities.
Show widget initially - the function img_Show() will show widgets with its initial value.
Update widget value - the function img_SetWord() will update the value of the widget.
Show updated widget - the function img_Show() will be called again to show the updated value of the widget.

Here is an example of a single form project containing a slider and a gauge.

sample-ui-project

The generated code is as shown.

#platform "gen4-uLCD-32DT"

#inherit "4DGL_16bitColours.fnc"

#inherit "GeneratedConsts.inc"



func main()

    gfx_Set(SCREEN_MODE, DEFAULT_ORIENTATION);

    // Uncomment when using external storage (uSD/Flash)
    SetupMedia(); // autogenerated helper function used to mount storage media


    // put your setup code here, to run once:
    var state, n, x, y;
    var posn, value;

    // set to enable touch, only need to do this once
    img_ClearAttributes(hndl, iSliderA0, I_TOUCH_DISABLE);
    img_Show(hndl, iSliderA0); // show SliderA0, only do this once

    img_Show(hndl, iGaugeB0); // show GaugeB0, only do this once

    touch_Set(TOUCH_ENABLE);

    repeat
        // put your main code here, to run repeatedly:
        state := touch_Get(TOUCH_STATUS);
        n := img_Touched(hndl, -1);

        if (state == TOUCH_PRESSED)
            x := touch_Get(TOUCH_GETX);
            y := touch_Get(TOUCH_GETY);

        endif 

        if (state == TOUCH_RELEASED)
            x := touch_Get(TOUCH_GETX);
            y := touch_Get(TOUCH_GETY);

        endif 

        if (state == TOUCH_MOVING) 
            x := touch_Get(TOUCH_GETX);
            y := touch_Get(TOUCH_GETY);

            if (n == iSliderA0 )

                posn := gfx_XYlinToVal(x, y, 1, 3, 236, 0, 100);

                img_SetWord(hndl, iSliderA0, IMAGE_INDEX, posn);
                img_Show(hndl, iSliderA0); // where posn is 0 to 50

                img_SetWord(hndl, iGaugeB0, IMAGE_INDEX, posn);
                img_Show(hndl, iGaugeB0); // where value is 0 to 100

            endif
        endif
    forever
endfunc

To learn more about the functions use for the above project, please refer to Diablo16 Internal Functions Manual.

Programming the Display

After completing the necessary routine on the project by writing the code. It is now time to upload the project into the display.

Connecting the Module

To connect the target display, please refer to the Workshop5 User Manual - Hardware Setup.

Once the target display is connected, the user can now go to the Comms tab to check if the target display is connected. The Blue lights indicates that the display is properly connected.

comms-menu

Refer to the Workshop5 User Manual - Connect the Module for other light colors.

Compile and Upload

After verifying that the display is connected, go back to Home tab and click the Compile & Upload button.

compile-and-upload

MicroSD Card

When prompted to copy files to microSD card, proceed with the copy for the first load or when new GCI widgets or fonts are added to the project, as well as when GCI widgets are moved across the WYSIWYG editor.

For PICASO, PIXXI28, PIXX44, and DIABLO16, the microSD card shall be FAT16-formatted. Partition can't exceed 4 GB.

To connect the micro-SD card, either

Insert the micro-SD card into the USB adaptor and plug the USB adaptor into a USB port of the PC

Using micro-SD card with USB adaptor

Or

Insert the micro-SD card into a micro-SD to SD card converter and plug the SD card converter into the SD card slot of the PC.

Using micro-SD card with micro-SD to SD card converter

Check the micro-SD card is mounted, here as drive E:.

Check micro-SD is mounted

Debugging the Project

To debug a ViSi project, functions to write to Serial COM0 can be used to send messages to the PC. These messages can then be read by using the Terminal tool.

To launch the Terminal, select the Tools menu...

Select Tools menu

...and

Click ‘Terminal connect 9600’ to open the currently selected com port at 9600 baud in the Terminal program.
Click ‘Terminal connect 115200’ to open the currently selected com port at 115200 baud in the Terminal program.

A new screen appears:

New Terminal screen

To send the commands on hexadecimal format, press Send commands on hexadecimal format

The commands sent by the host and the messages sent by the screen are the same as with the Genie Test Executor debugger.

The white area on the right displays:

In green the messages sent to the screen;
And in red the messages received from the screen

Example sending command

Application Notes

For a more detailed presentation of the objects with examples, please refer to the Application Notes page.

Under “Environments” choose “ViSi”

Choose ViSi Under Environment

All ViSi-related application notes will now appear in the search results.