1. Home
  2. Docs
  3. ATFC UI Tool
  4. 2. User Interface

2. User Interface

ATFC UI Tool User Interface

Double-click “ATFC_UITool.exe” to open the New Resource File Configuration dialog, as shown in the following screen.

ATFC UI Tool New Resource File Configuration dialog
New Resource File Configuration dialog

ATFC UI Tool tool is a document-based software structure, so before opening the main body of the software, the software needs to correspond to a new or existing resource file. Right at this step, the user can configure new resource file options, including module type, resource file maximum capacity, display X and Y axis points, touch-type selection; these configurations need to be properly selected and configured by the user according to the module used.

*Please notice that, therer are other options inside are designed for OEM clients. For clarkwise users, please keep the following options:

  • Module type selection: C Series: ATF
  • Resource File Size: 128M bytes
  • Touch type selection: Capacitive Touch

After select the correct options and clicking “OK” button, you will see the main UI like below:

clarkwise ATFC UI Tool main interface
clarkwise ATFC UI Tool main interface

The main interface of the ATFC UI Tool contains four main sections, which are:

  • Menu area
  • Toolbar
  • Operation area
  • Preview area

1. Toolbar

ATFC UI Tool is a tool that integrates resource integration and interface editing. Users can load bitmaps, fonts, and other resources for the resource files of ATFC series modules, edit the interface for the modules, and set controls, and configure control messages for the interface. The toolbars basically cover all the possible resource loading and interface editing operations of users. The buttons are in the following groups:

  • File operation
  • Resources loading
  • Controls and display buttons:

  • Undo/Redo
  • Delete and preview zoom

The toolbar of the ATFC UI Tool and the resource operation area will provide different interfaces and functions in the different function screens.

1.1 Resource file loading tools
  • : Character library resource loading button. Load the ASCII character resource to the resource file.
  • : Chinese character library resource loading button.
  • : Bitmap loading button.
  • : Generic control resources loading button. Load numeric input box resource file (*.nir) or string input box resource file (*.sir).
  • : JPEG image resource loading button.
  • : PNG image resource loading button.
1.2 Controls and display command tools
  • : Backlight setting command button. If the backlight is not set, the ATFC modules will appear as a dark screen. Suggest setting the blacklight as the first step of the first GUI.
  • : The Clear Screen command button. This command will clear all the drawing commands performed before.
  • : Drawing color setting command button. Users can set drawing colors as well as the line width.
  • : Line drawing state command button. If the user presses the button, the button will be in the pressed state, which means that the user can draw a line in the preview area with the mouse; the line drawing state will remain until another drawing command button is pressed, which means that it will switch to another drawing operation state.
  • : Rectangle frame drawing state command button. It works like the “Line drawing state command button”.
  • : Solid rectangle drawing state command button. It works like the “Line drawing state command button”.
  • : Font library setting command button. Set the font library and the font color.
  • : String display button. While this button is pressed, users can click on the preview area to select a point to insert a string with align settings.
  • : Image display button. Open a dialog to select a loaded image resource file (BMP, JPEG, or PNG) to display.
  • : Numeric input box resource configuration button. Inside you can choose which NIR to be used and the font color.
  • : String input box resource configuration button. Inside you can choose which SIR to be used and the font library and the font color.
  • : String direct print mode configuration button. After pressing the button, users can select the printing area on the preview area. Then a dialog popup. Inside, users can set the font library and the font color.
  • : Area button control setting. After pressing, you can select an area on the preview area, and set it as a button. A button setup dialog will popup to set the button functions, responding as well as how it looks.
  • : Image button control setting. It works like the “Area button control”. But you can define the button states by using pictures.
  • : Number edit control. It can display numbers and also can be set by a NIR control.
  • : String Edit control. It can display strings from MCU as well as can be set by SIR control.
  • : Combo box control. It creates a Combo Box.
  • : Progress bar control. It creates a progress bar. The data can be set by MCU or can be set related to other controls.
  • : GIF control. It doesn’t actually display or load a GIF file. It actually turns a series of images (BMP, JPEG, or PNG) into an animation.
  • : Waveform control. Waveform control is designed to display the data from MCU.
  • : Time display control. It can display the system time from the built-in RTC clock.
  • : Date display control. It can display the system date from the built-in RTC clock.
  • : Dashboard display control. Support image background and image pointer.
  • : Slide bar control. Create a slide bar that can be dragged by users.
  • : QR Code display control.
  • : Controls message configuration. Config the messages of the selected control. Some controls don’t have the message function.
  • : Controls position adjustment. Turn the selected controls into position adjustment mode. You can drag it by mouse or adjust by keyboard arrows buttons in the preview area.
  • : Controls position modification. Instead of dragging or pressing arrows on the keyboard, this function allows you to set the precise position of control by number.
1.3 Control Alignment Tools
  • : Top Alignment.
  • : Bottom Alignment.
  • : Left Alignment.
  • : Right Alignment.
  • : Vertical center alignment.
  • : Horizontal center alignment.
  • : Equal-width adjustment.
  • : Equal-height adjustment.
  • : Horizontal equal spacing.
  • : Vertical equal spacing.
1.4 Other tools
  • : Delete button.
  • : Preview area zoom tools.

2. Operation Area

Operation area contains 4 tabs, they are:

  • Project: Display the overall information of the entire resource file project, the user can create, delete GUI.
  • GUI Ctrl: Display the control settings and control messages in the current editing GUI. Users can select, delete, copy and paste controls and control messages.
  • GUI Dis: Displays the display commands in the current editing GUI. Users can select, delete, copy and paste display commands.
  • Res List: Displays the loaded resource items in the current resource file.
2.1 Project tab

As shown in the figure below, the “Project” tab will display overall information about the entire resource file. There is a progress bar at the top to display the current size of the resource file.

clarkwise ATF UI Tool, Project tab
clarkwise ATF UI Tool, Project tab
Module Base Config

Double-clicking this entry will open a dialog box showing the basic information of the current resource file project, where you can configure the communication port (UART) baud rate, etc.

Basic configuration of modules
Basic configuration of modules

Inside:

  • UART baud rate is not applicabile for ATFC module. The UART baud rate is decided by the setting file inside flash memory.
  • Startup GUI Index: Setting this item can indicate that the module will start displaying from the interface with the specified index number after power-on; a value of 65535 indicates that the setting is invalid.
  • Module type selection: Keep it as “C Seriese: ATFC”
  • Touch type selection: Keep it as “Capacitive Touch”
  • String screen printing function: it is checked by default. It means the module allows String direct printing mode after power-on.
Configured interface (GUI)

The entry can be expanded to show the configured GUI situation, the sub-level sub-entry is the information of each interface, including GUI “index” number and the GUI name.

Click the GUI item is to make it selected. Double-click on the GUI item to enter the GUI editing.

Right click on configured interface(GUI) will pop the menu. As the figure shows below:

Right-Click menu of Configured interface(GUI)
Right-Click menu of Configured interface(GUI)

Right click on an existing GUI item will pop a different menu as below:

Right-Click menu of an existing GUI item.
Right-Click menu of an existing GUI item.

Inside the “Config GUI Switching effect” item, users can set up the Switching effect between GUIs, also config the switching messages sending.

Inside the “Config GUI Slide screen switching” item, users can enable the finger slide function. Please notice that you need to set up the “Module Base Config” first to make this item enabled.

2.2 GUI Ctrl tab
GUI Ctrl tab
GUI Ctrl tab

After entering GUI Edit mode (double click on GUI item in Project tab), users can check the GUI Ctrl list and modify all the controls of this GUI.

GUI Ctrl tab lists all the controls in the current editing GUI. Showing the controls ID, type, position, as well as its message (like “Switch GUI to:2 Conditions:1” item shown above).

Control messages: When a touch event or other configured event occurs on the control, the ATFC module will automatically follow the configured messages to perform autonomous actions, such as switching the interface, adding or subtracting values to other controls, etc.

Some operation tips:

  • Select controls or messages:
    Users can click the controls or messages on the tree list. Click while pressing “CTRL” can select multiple controls or messages.
  • Double-Click controls or messages:
    Open the controls/messages editing dialog.
  • “Set as reference object” on the right-click menu:
    Set the selected control as the reference when using Equal width/height
2.3 GUI Dis tab
GUI Dis tab
GUI Dis tab

After entering GUI Edit mode (double click on GUI item in Project tab), users can check the GUI commands and modify all the commands of this GUI.

GUI Dis tab lists all the commands inside the GUI. Inside the list, there is an “Index” for each command. ATFC module will execute every single command in order from Index 0 after this GUI is switched on.

2.4 Res List tab
Res List tab
Res List tab

Users can switch to this tab at any time to see the status of the loaded resource items in the current resource file.

In the resource list, users can double-click on a resource item, and then you can view the resource in the preview area. It should be noted that if you double-click on a resource item, it will exit the current editing interface.

Was this article helpful to you? Yes No

How can we help?

Leave a Reply

×
×

Cart