The size adjustment control:

Uses can change the height and width for the selected widgets. The numbers represent the pixel counts.

The righ-hand side button is to lock the aspect ratio of the selected widget. This button allows widget to expand or shink while maintaining the aspect ratio.

Setting the location for the widgets:

The two numbers are the X and Y coordinates for the widget location. The top left corner of the design panel is designated to be (0,0). The coordiates represent the top-left corner of each widget.

The right-hand side button is to lock the location for the selected widget for preventing unnecessary relocation of the widget.

There are buttons in this category:

These buttons are used to adjust the sizes of the widgets and the space between widgets.

Make Same Sizes

The left-hand side two buttons are used to make the widgets same height or width:

Make selected widgets (more than two widgets) to have same height or same width. The target height or width is chosen based on the larger or largest height/width of the selected widgets.

Make Same Spaces

The right-hand side two buttons are used to create same spacing between widgets:

More than three widgets are selected in order to activate these two buttons. The two buttons take the average of the gaps between widgets horizontally or vertically and use this average number for the space between widgets.

These buttons are for the alignment purpose:

Horizontal Alignment

There are three buttons in this group:

They represent “alin to left”, “align to center”, and “align to right” functions.

Vertical Alignment

There are three button in this group:

They represent “alin to top”, “align to center” and “align to bottom” functions.

These six buttons are only functional when two or more widgets are selected. Otherwise, these six buttons are invalid:

Align to Center

This perticular alignment function is to align to a center of circle:

This button is to align the centers of circle for two and more widgets that have the center of circle (for example, circular gauge and rotation image). Users can group two or more widgets that have the attribute of center of circle and align these centers to a same center of circle automatically.

 Note: ADE will align widgets to the first widget that is dragged to the design area.

For example, there are two widgets (circular scale and rotation image) in the HMI design panel:

First, let’s select these two widgets and thn press “Align to Center” button, then the centers of circle of these two widgets will align at a same point. This button is to prevent the mis-alignment caused by manual adjustment:

 Note: Please refer to Edit Design Panel on how to select widgets in the design panel.

There are three buttons in this category:

The left-hand side button is to zooom out where as the right-hand button is to zoom in. The center button is to return back to the original size.

These three buttons are Copy, Cut and Paste. The functions, as the names suggest, are very similator to those of any other editors. However, these three functions can only be used in the HMI design.

There are three buttons in XTOOLS:

Register Table Editor

The left-hand side button is to call out the register table editor:

If clicked, the register table editor pops up:

In this register editor, all the regsiters used in this HMI project are shown. These registers include the built-in system registers, and user-defined registers. The user-defined registers are listed below the system registers. Regisers are critical in ADE. In order to use ADE to design HMIs, users must be familiar with the concept and usage of regiser binding. Please refer to Register for more details.

Any registerw with “Send to host” option checked, any change of this regiser’s value during the HMI execution triggers a communication via UART for sending this register’s updated value to an external system (eg. Arduino). The default communication protocol is described in IOT Protocol.

Please note that “HMI execution” is referred to either running on Simulator or executing on Ubique Panel.

Clicking Validation invokes Blockly editor.

Clicking Validation button will pop up Blockly editor. We can use a Blockly program to vailidate the value of the register before updating the register. If the incoming value is validated, then the register is updated with that value. If the incoming value is rejected, the content of the register remains unchanged.

A Validation example：

Whenever there is a change for the register’s content, the validation funciton, input_value, checks if the incoming change meets the requirement, the length of the value must be longer than or equal to 4. If the length meets the requirement, return valid is returned; otherwise, return invalid is returned.

• input_value: Values about to be written into a register
• return valid: Write input_value into the register
• return invalid: The content of the register remains unchaged

The length of the data must be larger than or equal to four; otherwise the data is rejected

Global Function Blockly Editor

The middle button of XTOOLS is to call out the Global Function Blockly Editor:

The Editor window pops up after the button is pressed:

In this editor window, users can write Blockly programs that is valid globally in a HMI project. In other words, these Blockly programs are visible everywhere throughout the HMI project, unlike the individual widget’s Blockly function, which is only valid for the widget.

Blockly is a visual programming language and it’s an open-source languae. Users can find more information in the following website:

https://developers.google.com/blockly

System Ready Callback Function Blockly Editor

The right hand-side button of XTOOLS is for System Ready Callback Function program editor:

Once users press this button, a Blockly Editor window pops up. Users can enter Blockly programs for the system ready callback purpose.

The system ready callback function is to be executed right away once the HMI system is ready after powering up.

Download

This button downloads the HMI design to Ubique Panel’s control board:

Please use a USB cable to connect to the control board and then press this button, the design can be downloaded into the board.

When download is successful, a pop-up window will show up:

This pop-up window informs the user that the HMI is successfully downloaded to Ubique Panel. The download time varies according to the sizes of the images. If any error occurs during the download process, the error message will be shown and the download will be stopped immediately.

Launch Simulator

The middle button is to launch ADE’s built-in Simulator:

The built-in simulator allows users to simulate their HMI design in ADE. In this simulator, users can use mouse to interact with the HMI design. This simulator supports What-You-See-Is-What-You-Get. The resolution of the simulator meets that of the target Ubique Panel. However, the color of HMI in the simulator can not be 100% the same as that of Ubique Panel.

The built-in simulator cannot simulate the I/O functionalities like GPIO, PWM and ADC. On the other hand, the simulator supports the communcation protocol used by Ubique Panel.

Launch Messegner

The messager can be used to communicated with the connected Ubique Panel or with the built-in simulator.

After Launch Messenger button is pressed, “IOT Messenger” dialog box will appear:

In this dialog box, users can use PC’s serial port and network interface to connect to Ubique Panel or the built-in simulator. The communication protocol is based on IOT’s proprietary protocol and will be described in details later. The messenger emulates the communication between an external MCU and the Ubique Panel via a UART interface.

Messenger offers two communication methods: Network Socket and Serial Port.

If Network Socket is selected, IP addfress, Port number must be set; if Serial Port is used, Baudrate must be set.

• Command Type: Set Register is to write a value to a register; Get Register is to read the content of a register.
• Register ID: Set the ID of the reigster to which commands are performed.
• Data Type: Select the data type. This is valid only during Set Register operations.
• Data Length: Set the data length in bytes. This is valid only during Set Register operations.
• Data: The data itself. This is valid only during Set Register operations.
• Ack Test: Verifying the connection. Please refer to Ack Test.

The communication between the built-in simulator and Ubique Panel will be described in details:

Use Messenger to communicate with the built-in simulator

• First, please open a design in ADE.

  In IOConfig page, please make sure that UART is activated, Baudrate is accurate and UART Value Register is bound to a register.

  

• In the Register Table, please check Sent to host for those registers that will be used for communication.

  

• Launch Messegner and perform the following operations:

  

  1. Set Socket
  2. Click Connect. If the connection is ready, a pop-up message box tells users if the connection is valid or not.
  3. Click Ack Test then Messeenger will send out a connection verification command. If the simulator receives the command successfully, then a ACK command is sent back to the messenger.
  4. If the connection is ready, ACK will be recevied by the messenger after sending a command.
  5. For communication commands, please refer to IOT Protocol more more details.

     When Set Register is used, users have to enter the register ID and Data Type. The ID and the data type must match those of the registers set in ADE.

  6. Simulator takes the communication commands and change the corresponding registers’s value. Subsequently, the value change is reflected on the widgets in Simulator.

  

Communication between Messenger and Ubique Panel

• Please download the HMI design to Ubique Panel.
• Please use a USB-to-UART cable to connect PC’s USB port with Ubiqu Panel’s UART.
• Launch Messenger.

  

  1. Set the Serial Port. Users can use Scan for scanning the available serial ports. Then a correct baudrate must be set as well.
  2. Clik Ack Test for testing the connectivity.
  3. If connection is normal, ack message is received.
  4. Set up and send communication instructions. Please refer to IOT Protocol for more details.
• Then you can see the reaction in Ubique Panel.

  

Communication between Ubique Panel and MCU

• First, please prepare an ADE project and set the registers up properly. Please refer to our communication protocol IOT Protocol for writing the Arduino code. Then the data can be sent to the registers with designated IDs.
• Then, connect IOT’s control board with Aurdino. Make sure you connect RX, TX and GND.

  

• Please download ADE project to our control board and Arduino program to the Arduino board. Turn on the power, the commuication starts.

IOT’s UART Protocol

• Command Format

  Command	Lead Byte	Type Byte	Register ID Low Byte	Register ID High Byte	Tailing Bytes
  Set Register	0x11	0x00	0x00~0xFF	0x00~0xFF	Data Payload
  Get Register	0x11	0x01	0x00~0xFF	0x00~0xFF	N/A

• Data Payload Format

  Payload Type	ID Byte	Length Low Byte	Length High Byte	Tailing Bytes
  Boolean	0x00	0x01	0x00	Data Bytes
  String	0x01	0x01~0xFF	0x00~0xFF	Data Bytes
  Integer	0x02	0x01/02/04/08	0x00	Data Bytes
  Unsigned Integer	0x03	0x01/02/04/08	0x00	Data Bytes
  Floating Point	0x04	0x04/08	0x00	Data Bytes

• Data Bytes are of the Little-Endian Format

For IOT’s Arduino Library, please refer to IOT Binary Protocol for more details.

Ack Test

In order to ensure that the connection is established properly, users can click Ack Test. Once clicked, the system will send out 16. If ack is received, the the connection is in order; otherwise, the connection is not established yet.

• Use Network Socket

  If connection fails, it is recommended to check the IP address and the port number are correctly assigned. Once assigned, users need to click Connect to establish connection.

  If the connection is established property, Connection is OK message is prompted. Aferward, Connected is shown at the right-hand side of the Socket command row.

  

  

  If connection is not established, Connection FAILED message is prompted. Afterward, No Connection is show at the right-hand side of the Socket command row.

  

  

• Use Serial Port

  If the connection is not established, please check the serial port assignment and baudrate setting. Then press Set for establishing connection.

It is recommended to take a look at our educational video to learn how to use Tool Bar.

• Educational Video