The SmartDisplay UART protocol is a proprietary communication protocol developed by WINSTAR, designed to allow customers to easily control their HMI (Human-Machine Interface) screens through the UART interface. This innovative protocol combines Winstar's user-friendly GUI Builder, providing customers with an intuitive and powerful tool to customize and quickly build widgets that meet their needs. Through the GUI Builder, customers can easily design a variety of HMI object for interacting, ranging from simple buttons and text to complex Gauges and Keypads, catering to various application scenarios. This not only saves customers time and costs but also makes UI design more flexible and characteristics. By using WINSTAR's custom UART protocol commands, interaction and control with Smart Display can be easily achieved. We are committed to providing the best customer experience and continuously improving our GUI Builder to ensure it meets the evolving needs of our customers. Whether you are a professional designer or a beginner, we believe that the SmartDisplay UART protocol will be an ideal choice for creating excellent HMI interfaces. Let's explore this exciting innovative technology together and infuse more vitality and inspiration into your products.

Smart Display GUI Builder – UART Project Setting Instructions

The SmartDisplay GUI Builder provides you with an intuitive and user-friendly interface, allowing you to easily create your own HMI projects. Simply drag and drop various widgets onto the page using the GUI Builder, and you can effortlessly display and interact with them on your SmartDisplay device. With simple operation and flexible functionality, it can meet your various needs, making your work more efficient.

The following will introduce how to create an UART project using the Smart Display GUI Builder and explain how to control objects through UART.

■ Create UART protocol project

To create a UART project, enter the project name, select the SmartDisplay device type, and choose the SmartDisplay protocol (UART) under the protocol option based on your requirements.

■ Add a Gauge and Horizontal Slider widget to the main page

After adding a widget, each object has a unique Index ID. Each object also has its Page Index and Object ID settings. By knowing these two settings, the Host side can control this object through UART commands.

■ Simulate the interaction between UART and the widget

Click on the "Simulator With GUI" icon to launch the simulator.

After launching the simulator, you can drag the slider labeled GAUGE_0 at the bottom to simulate the Host sending data to GAUGE_0. Observe the changes in the simulator's Gauge and view the UART command log in the Message Log on the right. You can also interact with the Horizontal Slider on the simulator to simulate data being sent from the Device side.

■ Update the SmartDisplay device settings

After verifying the functionality through the simulator, if everything is working correctly, you can connect to the device and upload the project settings to the Smart Display device.

Wait for the upload and update process to complete.

■ Verify the interaction between the Device and the Widget

After uploading the project to the device, you can further validate the functionality on the Smart Display device side. Connect to the device with the GUI Builder, click on "Test Device" and you can then test the interaction between the Host and the Device.

■ Test Device Window

Through this testing interface, you can simulate the Host side modifying the value of the object. Drag the slider labeled GAUGE_0 at the bottom to simulate the Host sending the value of Object 0. Observe the changes in the Gauge on the device, and you can also view the variations in the Send command and Response command in the Message Log on the bottom. Additionally, interact with the Device's Horizontal Slider to confirm the Event command sent from the Device side.

Through the Test Device window described above, you can simulate the Host sending UART commands to control the SmartDisplay. View the result screen on the SmartDisplay and confirm the reception of Event command information on the Host side by operating the SmartDisplay through the Touch Panel.

SmartDisplay GUI Builder – Custom Widget

When the default widgets on the SmartDisplay do not meet with the design requirements, customers can design custom widget icons themselves. By updating the corresponding images, they can achieve a customized widget interface. For simple buttons or toggle buttons, changing the On/Off images can fulfill customization needs. However, for more complex widgets, besides image replacement, further parameter settings may be necessary to ensure the widget displays correctly.

■ Custom Gauge Explanation and Example

You can achieve a custom widget interface by sequentially changing the images and Gauge parameters.

■ Multi-Language Text

The SmartDisplay Text Widget supports Unicode, enabling the display of multi-language text. Customers can follow the steps below to set up the desired multi-language text for display.

1. Add Custom Font, select the desired font and size in order, and choose the Unicode text range to be displayed (you can refer to the website https://unicode-table.com/en/blocks/ to confirm the Unicode range of the text to be displayed). If the range of text to be displayed is too large (such as Chinese characters), which leads to insufficient Flash space, you can reduce the Flash space of the font by setting only those characters to be included in the Custom Characters section.

2. Set the font for displaying the Text Widget: Select which Text Widget settings to modify.

3. Add a Text Widget and verify in the simulator that the text display is correct

Custom CAN command Introduction

Next, we will explain the command protocol used for UART. Through these instructions, the Host side can easily control the SmartDisplay, including changing pages, adjusting backlight brightness, or making the buzzer sound.

The following are the default UART settings:
Default baud rate: 115200 (Can be modified through GUI Builder)
Parity Bit: None
Data Bit: 8
Stop Bit: 1

The main data format for UART is as follows:

Header Byte(1 Byte)	Length(1 Byte)	Payload(N Byte)	CRC(2 Byte)
Command Header	Value: 4 + Payload length Payload max size: 250	Payload data max size: 250	Modbus CRC16 (Calculate Modbus CRC16 https://www.modbustools.com/modbus_crc16.html)

The UART protocol mainly has three major types of commands: Send command, Response command, and Event Command, with the following formats in order.

(1) Send Command format
The Send command is used for the Host side to send commands to the SmartDisplay side.

Header Byte(1 Byte)	Length(1 Byte)	Payload(N byte)	CRC(2 Byte)
Start with 0x53 (S)	Value: 4 + Payload length Payload max size: 250	Command code: 1 byte Command parameter: 0 ~ N bytes	Modbus CRC16

(2) Response command format
The Response command is used for the SmartDisplay side to reply to the Host side with the results of the Send command.

Header Byte(1 Byte)	Length(1 Byte)	Payload(N byte)	CRC(2 Byte)
Start with 0x52 (R)	Value: 4 + Payload length Payload max size: 250	Command Code: 1 byte Error Code: 1 byte Response Data: 0 ~ N bytes	Modbus CRC16

(3) Event Command
When the SmartDisplay side needs to proactively report data, it will use this command, for example, when a Button is triggered.

Header Byte(1 Byte)	Length(1 Byte)	Payload(N byte)	CRC(2 Byte)
Start with 0x45 (E)	Value: 4 + Payload length Payload max size: 250	Event Command Code: 1 byte Event Data: 0 ~ N bytes	Modbus CRC16

* For detailed Send Command code and Event Command code, please refer to the SmartDisplay UART User Guide document.

■ Explanation and examples of the Send/Response Command protocol

The following sequentially outlines the data format and examples for each command payload.

● Set Object Value: 0x3

Send Command

Command Code	1 Byte	0x3
Parameter data	8 Byte	uint16 PageIndex; uint16 ObjectId; int32 value;

Response command

Command Code	1 Byte	0x3
Error Code	1 Byte	0: Success 1: Failed

Example: Set Object value

● Set Object Buffer Data: 0x5

Send Command

Command Code	1 Byte	0x5
Parameter data	N Byte	uint16 PageIndex; uint16 ObjectId; uint8 [] data (max 100 bytes) // Unicode String for Text // Clock setting for Digital Clock

Response command

Command Code	1 Byte	0x5
Error Code	1 Byte	0: Success 1: Failed

Example: Set Object Text: test

Example: Set Clock Widget date time: 2024/09/01 04:05:06

● Set Brightness: 0x6

Send Command

Command Code	1 Byte	0x6
Brightness	1 Byte	Brightness value

Response command

Command Code	1 Byte	0x6
Error Code	1 Byte	0: Success 1: Failed

Example: Set brightness to 90.

● Set Buzzer: 0x7

Send Command

Command Code	1 Byte	0x7
Cycle	1 Byte	Cycle value
High	1 Byte	High value (Unit: 10 ms)
Low	1 Byte	Low value (Unit: 10 ms)

Response command

Command Code	1 Byte	0x7
Error Code	1 Byte	0: Success 1: Failed

Example: Emitting buzzer: Cycle:1, High: 200 ms, Low: 0 ms

● Set Page Index: 0x8

Send Command

Command Code	1 Byte	0x8
Page Index	1 Byte	Page Index value

Response command

Command Code	1 Byte	0x8
Error Code	1 Byte	0: Success 1: Failed

Example: Switching Page Index to 1.
To switch pages, you need to first set the Device State to ConfigMode. Then, send the page change command. After completing the page change command, set the Device State Mode to Display Mode to finish the page change operation. The sequence of related commands is as follows:

● Set Device State: 0x20

Send Command

Command Code	1 Byte	0x20
Device State	1 Byte	0: ConfigMode 1: DisplayMode

 

Response command

Command Code	1 Byte	0x20
Error Code	1 Byte	0: Success 1: Failed

Example: Refer to the example of switching pages

■ Explanation and examples of the Event Command protocol

● Page change event: 0x1

Event Command

Event Code	1 Byte	0x01
Parameter data	2 Byte	Uint16 PageIndex

Example: SmartDisplay switches to Page 1.

● Object Text change event: 0x2

Event Command

Event Code	1 Byte	0x02
Parameter data	N +2 Byte	Uint16 ObjectId N byte Unicode Text

 

Example: Keypad widget sends the text "1234"

● Object Value change event: 0x3

Event Command

Event Code	1 Byte	0x03
Parameter data	6 Byte	Uint16 ObjectId int32 value

Example: Object value change event.

Customers can design UI by dragging and dropping widgets using the GUI Builder, achieving a WYSIWYG (What You See Is What You Get) effect, making UI design intuitive and efficient. Additionally, previewing the design results through the simulator allows customers to instantly view the UI presentation, providing an early understanding of the final effect, saving time and effort. Ultimately, through Winstar's custom UART protocol, customers can easily control the device. This end-to-end design process enables seamless integration of design and control for customers, enhancing operational convenience and accuracy. The application of the SmartDisplay UART protocol brings more operational possibilities and convenience to customers, expanding the scope of product development and applications. This comprehensive solution not only enhances customer work efficiency but also boosts product creativity and competitiveness. Excited? Quickly download the SmartDisplay GUI Builder. Before purchasing Smart Display you can try the simulator to confirm if SmartDisplay meets your needs! Contact Us