WS4's Visi Genie Environment: Buttons and LEDs

This tutorial provides a simple sample as a starting point in making your first Workshop 4 Visi-Genie Project. Visi-Genie Environment is very easy to use. You can make your own working Graphical User Images without coding. It has drag and drop widgets which can be modified using the object inspector. Each objects and widgets can be linked together and perform different functions using the Events section.

In this application note, Buttons and LEDs widgets will be used. The objective of this application is to demonstrate the touch capabilities of gen4-HMI display modules and Diablo16 processor. This will also demonstrate how a button object can send an “on” or “off” signal to the LED widget.

WHAT YOU NEED

  • Any gen4-HMI Display module
  • gen4-PA and uUSB Cable
  • gen4-IB and Mini USB Cable
  • Workshop 4 (PRO) IDE

 

GETTING STARTED

Launch your Workshop 4 (PRO) IDE

Click “New” or “Create a new 4D Systems Project”

 

Choose the display you are using among the list. And then select the Visi-Genie Environment.

Everything is now ready to make your first project. An empty form of display is provided by the Workshop 4, on which you can design and include widgets/objects. This is called Form 0.

 

CREATING GUI

Step 1: Add Widgets

  1. To add a winbutton, go to the Buttons pane and click on the winbutton Click on the empty form to add your first widget.

  1. To add a userLED, go to the Digits pane and click on the userLED Click on the form you are working to add the userLED

Step 2: Edit Widgets

  1. Using the Object Inspector, you can edit the properties of these widgets.

  1. Click winbutton and go to to its object inspector. Change the momentary property from “yes” to “NO”. This will later on enable the winbutton to toggle between on and off state.

  1. You can explore the capabilities of the object inspector to modify your GUI according to your preferences. The background can also be modified in this step. Just click on the black background and go to the object inspector. You can use different color or an image.

Step 3: Events

  1. Everything is now ready to be linked on each other to perform a function. We will use the Events
  2. Click on the Winbutton and go to its Events properties. On the on changing event, select UserLed0Set as it’s evet handler. Click OK. This will enable the Winbutton to send an on and off command to the userLED.

 

  1. Click on the UserLed and go to its event properties. Select Report Message as its event handler during its on changed This will monitor the userLEDs action if it acknowledged the command or not, using the GTX.

 

Step 4: Save Visi Genie Project

  1. Save your Visi Genie Project

LOADING CODE

Step 1: Set up

  1. Set up your gen4 HMI display module by connecting it to gen4-PA or gen4-IB through 30-way FFC Cable.
  2. Connect this to the PC using a micro USB cable or a mini USB cable (depending on what’s available on your table)

Step 2: Build

  1. Click on the “Build Copy/Load” button.

Note: This step could be skipped. However, compiling is essential for debugging purposes.

Step 3: Load the Code

  1. Make sure that you are connected to the right port. Red Button indicates that the device is not connected, Blue Button indicates that the device is connected to the right port.

  1. Now click on the “(Build) Copy/Load” button.

Workshop 4 will prompt you to select a drive to copy the image files to a uSD Card. After selecting the correct drive, click OK.

Step 4: Mount uSD Card

  • The module will prompt you to insert the uSD card.
  • Unmount the uSD Card properly from the PC and insert it to the uSD Card slot of the display module.
  • After inserting your uSD card to the gen4 display, the graphics will be immediately loaded.

 

DEMONSTRATION

After loading the code to your display, you can now test the functionality of the winbutton and userLED. You can use this application note for your projects and expand your graphical user images. The other application note will teach you on how to send command to external components and received data from them.

Subscribe to Newsletter

Get the latest projects delivered to your e-mail inbox.

Subscribe to 4D Makers Newsletter and get the latest projects, promotions and news & events in your e-mail inbox.

Archives

Comments

Please log in or sign up to post a comment.

MAKE, SHARE and CONNECT