All the controls are added in the same way.
- 1. Entering GUI edit mode (double-click the GUI item in Project tab)
- 2. Click the control button in the toolbar, make it in setting state
- 3. Drag in the preview area, then release
- 4. Setup in the popup dialog to finish
1. Touch area control
- Ctrl ID: Unique. Generated automatically by ATFC UI Tool. Starting from 100
- GUI BackMsg Enable: This decides if the control can send messages through the serial port. The default state is checked, that is, the control will send the message through the serial port when triggered. If unchecked, the control will not send messages
- Long key set:
- Not supported long key: Means as it says
- Respond only to Gui internal: Only to send internal messages but not through the serial port.
- Continuous message send: If the GUI BackMsg Enabled is checked, the control will not only send internal messages continuously but also send through the serial port.
- Ctrl Response Type: If the GUI BackMsg Enabled is checked, this option decides when to trigger the message sending through the serial port to the MCU.
- Response Push: Trigger when the area is touched.
- Response Release: Trigger when the finger leaves the area.
- Response Push & Release: Trigger twice. Both when the area is touched and released.
- Ctrl Display Type: This means what the control looks like when it is triggered.
- No display response: Like it says.
- Frame inversion width 1-8: Create a rectangle frame with a width of 1-8 pixels, and the color is the inverted color. And then indents for X pixels decided by the option “Frame Indent”.
- Area inversion: When triggered, the whole area turns into inverted color.
- Ctrl Redraw Type: This means what the control looks like when it is NOT triggered.
- No ReDraw: Looks like it is hidden.
- Frame width 1-8: Draw a frame with a width of 1-8. The color is determined by the option “Ctrl Redraw Frame Line Color”. Pretty straight forward.
- Area Fill Color: The area fills with color but without any frame. The color is determined by the option “Ctrl Redraw Area Fill Color”. Also, the “Alpha” option can decide the transparency.
- 3D Button Shadow 1-5: The area fills with color, and with a frame, also a shadow wide from 1 to 5 pixels to create a 3D effect.
- Alpha: Set the transparency of the area color. The smaller number the more transparent the color is.
- String font set: Set the display string and its font and font color. The Cn Font Lib means the Font Library for the Chinese characters.
2. Control message settings
To add a control message in the ATFC UI Tool, first select the control in the preview area or in the GUI Ctrl tab tree list. Then click the “Set Ctrl Msg” button in the toolbar. Then the Ctrl Msg Config dialog pops up.
- Msg of Ctrl ID: This means where the message comes from. One control can send multi messages.
- Msg Matching conditions: Different controls have different trigger options.
- Msg: This means where the destination of the message goes to. It could be control or GUI based on the Response Action.
- Response Action:
- Switch to target GUI: Switch to the GUI which is set in the Msg option.
- Target Ctrl Clr Val: Clear the data/value of target control which is set in the Msg option.
- Target Ctrl Add Val: Add a certain value to the target control set in the Msg option. The value is determined by the “Action Parameters” option. If the target control is a String control, it will first turn the “Action Parameters” into an ASCII character and then append it to the target String control.
- Target Ctrl Dec Val: Decrease a certain value to the target control set in the Msg option. The value is determined by the “Action Parameters” option. If the target control is a String control, it will remove the last character of the target String control and then refresh the control.
- Return previous GUI: Switch back to the previous GUI.
- Enable Tar Ctrl: If the target control is disabled and cleared, then it will enable it and make it display.
- Disable Tar Ctrl: Make the target disabled. Target control will not respond to touch nor refresh itself but keep displaying.
- Disable & Clr Display Tar Ctrl: Make the target control disabled and disappeared.
- Setting system RTC with target Ctrl: Use the target control (Timer display control and Date display control only, with the control type of “Used to set system RTC Time”) to set the system RTC.
- Action Parameters: The action parameters are configured differently for different target control types depending on the response action.
3. Bitmap button control
For the other controls, we will only explain the different configurations other than the Touch Area Control.
- BMP Button type:
- Toggle switch: Set the button as a state button. Two states available, 0 or 1. The state of the Toggle Switch button could be set by other controls or by MCU.
- Toggle switch(Radio): Similar to the Toggle switch. Just only allow the state changes from 0 to 1 but not 1 to 0.
- Default State: Only available for the Toggle switch and the Toggle switch(Radio).
- BMP Button Display type:
- Pic switch: When pressed, switch to “Button Push Pic”
- Area screenshot Switch: Similar to Pic switch. Instead of using a picture as a button, use part of a picture as a button. Normally used when the pictures are full-screen size.
- Button Normal Pic: Required.
- Button Push Pic: Required when “BMP Button Display type” is “Pic switch” or “BMP Button type” is “Toggle switch”. Must in the same size as Button Normal Pic.
- Button Disable Pic: Not required. It has to be the same size as Button Normal Pic.
- Control Data Sync: Set the control ID to sync the data with.
About Data Syncing between controls
Data Sync is not limited to 2 controls, it can be more. e.g. Control A is syncing data with Control B, and B is syncing with C, C is syncing with D, D is syncing with E, and E is syncing with C. This means all the A/B/C/D/E five controls are syncing data with each other. Any of them is changed, the others will be changed too.
Data syncing between GUIs is allowed. Also, data syncing between different controls is allowed too (like Number Control with Progress Bar).
4. Number Edit Control
Number Edit Control is a control that can enter values or display values. It has a variety of properties and can achieve a variety of display and response effects; it does not support control message but allows other controls to control it.
The numeric input function of the numeric control requires the user to first load the Numeric Input Resource(NIR) and set it up at the GUI command
- NumberEdit Ctrl Type: Data type.
- Font Align: Number Position.
- Font Set: Choose the font library which is loaded.
- Font Color: As it says.
- Min/Max: Minimum and Maximum number of the control allows to input.
- Floating point number: Number of digits after decimal point if the “NumberEdit Ctrl Type” is set to any kind of float. Also, when the “NumberEdit Ctrl Type” is set to “unsigned int specified len”, this is the place to set the length (how many digits to display)
5. String Edit Control
Like the Number Edit Control, the String Edit control is also a control that can enter strings or display strings. It has a variety of properties and can achieve a variety of display and response effects; it does not support control message but allows other controls to control it.
The string input function of the String Edit control requires the user to first load the String Input Resource(SIR) and set it up at the GUI command
- StringInputCtrl Type: The data type allowed.
- String Max Len Set: Max string characters are allowed to input.
6. Combo box control
The ComboBox control (Combox_Ctrl) can be selected by touch or message. Up to 50 items can be preset, and each item can be described by a string of up to 25 bytes.
- ComBOx Ctrl Display type:
- No response(Dis Only): Means the control won’t respond to screen touch nor message. It can only display the selected item, or controlled by the MCU command.
- Pop Win Color Set: This is the place you can set the colors of the drop-down menu.
- Big input box on the right: This is the place you can enter the items. Each line represents an item of the ComboBox. Each item is a string up to 25 bytes. To enter a new line, press Ctrl+Enter.
7. Progress Bar Control
The progressbar control is only used for display.
- Progress Ctrl Type: The direction of the progress bar
- Progress Ctrl ReDraw Type:
- Frame width 1-8: The control will draw the border with a line width of 1 to 8 pixels and with the “Ctrl Redraw Frame Line Color”.
- Area Fill Color: Fill the area with “Ctrl ReDraw ARea Fill Color”. Means no border.
- Background Layer: This means transparent background and no border.
- Redraw Bmp partial screenshot: Using part of the “Progress Ctrl background bitmap” as the background and part of the “Progress Ctrl bar Bitmap” as the bar. Normally using the bitmap with the same size of the screen.
- Redraw Bmp: Pretty straight forward. Using “Progress Ctrl background bitmap” as the background and the “Progress Ctrl bar Bitmap” as the bar. The two pictures have to in the same size.
- Bar Horizontal/Vertical offset: This means the bar offset of the control area. Like padding. Data type: Int. Can’t smaller than 1.
- Number Range: Set the max number. If the actual number is greater than the max, the progress bar will remain fully filled.
- Overlay Display Control ID:
- The progress bar control allows you to set a control to be displayed on top of it. The allowed control types are numeric or string controls. When the overlay is set, only the font library, font color, and font alignment configurations are valid for the control displayed on top of the progress bar. The control area of the overlay numeric or string control is required to be completed within the area of the progress bar control.
- The stacked numeric or string controls will not be available for touch input, and when the progress bar control is hidden, the stacked controls will be hidden as well.
8. Waveform Control
Waveform Control is a display only control. Display user data by using waves.
Up to four lines can be updated and drawn in the same waveform control. Each line can have its own line color.
- Waveform Ctrl Type: The direction of waves move. If it is set to “Wave Line From Left to Right Move”, it means the new data line is generating from the left border. And vice versa.
- WaveForm Ctrl ReDraw Type:
- Immediately Redraw: Indicates that the waveform control will automatically refresh the waveform instantly after receiving new data from the user
- User Control ReDraw: Indicates that the waveform control will not automatically refresh the waveform display after receiving new data from the user, but will store the data into the buffer and wait until the user sends the waveform redraw command to refresh.
- Grid Line Interval: The space in Pixels between grid lines. If it set under 5, the grid lines will be hidden.
- Grid Line Color Set: Set the Grid Line color. The width of the grid line is always 1 pixel.
- Waveline Number Set: the total qty of wave lines for this control.
- The width of the wave line is 2 pixels. The painting area dimensions are actually the sizes of the control.
- X step pixel of waveform: The distance between each data point on X-axis. It is 1 pixel by default. This means the data point is 1 pixel away from the next one on X-axis.
9. Picture animation control (Gif Control)
The Gif control is not actually displaying a GIF format picture. Actually it automatically plays a series of loaded pictures in a certain interval. This control is not touchable, but it supports message.
- Gif Ctrl Type:
- Automatic animation: When set to this, there are two states of this control: Stopping or Playing. When it is stopped, it will display the first picture. When it is playing, it will automatically display the pictures from the top index to the bottom index.
- Static and dynamic: This is basically like the “Automatic animation” but not playing the first picture (which is used as the Static picture)
- User Control Mode: When the control is set to this type, the state of the control indicates the number of bitmaps to be displayed, the size of which is determined by the number of bitmaps between the “Start Bitmap Index” and the “End Bitmap Index”. Users can set the state of the control by the command to switch the picture.
- External Mode: Like the “User Control Mode”, allowed to send command 0XFF to start the animation.
- Update timer: Interval between each picture when playing as animation. Range 100-2000 ms.
- Default state: Please refer to “GIF Ctrl Type”.
- Number of GIF cycles: Available when the “GIF Ctrl Type” is set to “Automatic animation”. Set it 0 or 255 to keep the animation playing infinitely. When the playing cycles reaching the set value, the control will send a command message (like switching GUI). If “GUI BackMsg Enable” is checked, it will also send a message through the serial port to the MCU.
10. Timer Display Control
TimeDisCtrl is a control that displays the module’s built-in RTC clock or set time to RTC.
- Timer Display Ctrl Type:
- Display System RTC Time: Read the system RTC Clock. Not able to write to the RTC.
- Display user specified Time: Display user-specified time from MCU.
- Used to set system RTC Time: The control can accept messages for data modification and can update the modified time to the module’s built-in RTC clock (requires command messages for triggering).
11. Date Display Control
Date Display Control (DateDisCtrl) works almost exactly the same as Time Display Control.
12. Dashboard Control
The dashboard display control is a control based on the dial background image and rotates the pointer clockwise along the center point to indicate the value. The dial background image is a bitmap resource and the dial pointer can be set to draw in a straight line or rotate the bitmap and can achieve various effects.
- Dashboard Ctrl Type:
- GUI Draw Pointer: Draw a line as the pointer. The line is defined by the options below.
- Source Pic Pointer: Using bitmap as the pointer. The picture can be set by “Source Pic pointer Settings”
- Dashboard BK Pic: Select the dashboard background image. For now, it only supports the BMP format.
- Setting Pointer’s Center of rotation int BK Pic: Define the rotation center on the background image by inputting the X/Y position or simply click the “Setting” button next to this, and click the point on the image.
- Value 0/Max angle settings: You can input the number directly or click the “Setting” button next to it and then drag on the image.
- Numerical range: Set a number to define the max pointing value.
e.g. Value 0 angle = 10 degree, and Value Max angle = 170 degree. The range is set to 100. That means, each degree representing 100/160 = 0.625. Pointing to 10 degrees equals 0, pointing to 170 degrees means 100, and pointing to 130 degrees equals 75.
13. Slider bar control
SliderCtrl provides a simple and fast value setting control that supports horizontal or vertical sliding, and can be drawn by the system or by a bitmap resource set by the user; the slider control allows the user to tap and touch the control area to set the value (or position), or to press and hold the slider to set the value
- Slider Ctrl Type: Define the direction
- Slider Ctrl ReDraw Type:
- System GUI Draw: All the slider components are defined by the options below. Including the colors and sizes.
- Source Pic Draw: All the slider components are using bitmaps. For now, only the BMP format is supported.
IMPORTANT: While redrawing this control, the system will pick up the colors of the 4 corners. If they are the same, the system will consider this color as the background color and will keep this color as transparent.
- System GUI Draw settings are pretty straight forward.
- Slider Ctrl Back Pic is the zero position picture.
- Slider Ctrl Progress Pic is the max position picture. And it has to be in the same sizes as “Slider Ctrl Back Pic”.
- Slider Ctrl Bar Pic better not be too small. Otherwise, it is hard to be dragged.
Here are the examples:
As you can see, all the background colors are removed, because the system recognized the color of the 4 corners.
14. QR Code Display Ctrl
QRCoderDisCtrl is a display control that converts user preset or MCU sent strings into QR code images. When the strings are converted into QR code images, the control will automatically select the appropriate version and error correction level.
The generated QR code image will be automatically resized according to the size of the display area configured by the control.
- Ctrl blank area display settings:
- Fill with config color: This means to fill the blank area AROUND the QR code.
- Do not draw (show background): Not to fill the blank area around the QR code. The color in between the black dots remains.
- Data sharing option: This basically means if the string comes from another control or not. If checked, the QR Code will be generated from the string from “Data Sharing Ctrl ID”.