1. Home
  2. Docs
  3. ATFC UI Tool
  4. 6. Add Display Commands

6. Add Display Commands

1. Setting backlight and clear the screen

Normally for the booting GUI, it is necessary to execute some basic commands like set the backlight and clear the screen.

Switching to the booting screen (normally the GUI with Index 0)

Click on the Set backlight button on Toolbar, a dialog will pop up as below:

Backlight setting dialog
Backlight setting dialog

In the dialog, you can drag the progress bar to set the brightness of the backlight, click “OK” to finish adding a backlight setting command for the GUI. You can see a backlight setting command in the GUI Dis tab.

Backlight setting command in the GUI Dis tab
Backlight setting command in the GUI Dis tab

After setting the backlight, you can now clear the screen.

First, you need to set the paint color to perform the clear command.

Click on the “Set paint color” button on the toolbar.

Set Paint Line Width & Color
Set Paint Line Width & Color

In the dialog, you can select the drawing line width, but the drawing line width only works for drawing lines and rectangular boxes, so you can ignore it for now.

Users can click on the area to the right of “Set Paint Color” and a color selection dialog box will open to select the color. Here, blue is selected as the drawing color.

When the settings are complete, click the “OK” button, and the commands in the list of “GUI Dis” tab are as follows.

GUI Dis tab after set paint color
GUI Dis tab after set paint color

Clicking the Clr Screen button in the toolbar will clear the preview area with the previously set paint color and add the command to clear the screen in the preview area (which is actually implemented by the command to draw a solid rectangle), as shown in the following figure.

Clear the screen with blue color
Clear the screen with blue color
2. Drawing line

Before drawing a line or a solid rectangle or other drawing operations, you need to determine the paint color and paint line width. In the previous section, the paint color has been set once, but the setting is to achieve the clear screen operation, here if you want to draw a line or other drawing operations with other colors, you need to set the paint color again before the drawing operation.

Now we are trying to draw a 3-pixel wide red line. Click the Set paint color button in the toolbar. And set the line width to 3 and color to red in the popup dialog.

Now the “GUI Dis” tab should look like this:

After setting the new paint color and line width, we can now click the Draw line button in the toolbar and make it to drawing line status. Now you can click on the previewing area to draw lines:

3. GUI Display commands operation

Besides of the regular copy/paste/delete commands, there is one special thing you need to know that:

When a certain GUI is loaded, it will be executed in the order of the “GUI Dis” list, and the command with the smallest number will be executed first. For example, each paint color setting determines the paint color and paint line width for the following drawing operation until the next paint color setting command executed. The font settings and other commands are also similar to this principle.

Also, double click the commands popup the setting dialogs to modify the commands.

One more thing, you can also modify Lines or other drawing commands by selecting the command then click the “Adjustment position” button in the toolbar to go into the adjustment mode. The shape will become draggable again (also is able to be adjusted by arrow buttons on the keyboard).

4. Image display

Click the “BMP Dis” button, then you can choose which loaded image to be displayed on the GUI, and also where to display it.

Picture Selection (BMP Dis) dialog
Picture Selection (BMP Dis) dialog

After choosing the picture, you can set up the position to display

5. String Display

The string display command requires the user to set the font library and font color first. Click the “Set Fontlib Color” button in the toolbar. Inside the dialog, you can select the loaded font library and also set the color. About the font library, please refer to this section.

Now you can see the “Fontlib Sel” command inside the GUI Dis tab:

After setting up the font, you can click the “String dis” state setting button in the toolbar to put the tool in the string display operation state, now, you can use the drag and drop of the left mouse button in the preview area to determine the area to display the string, as shown in the following figure.

And then release the left button. The input dialog popups out, asking you to input the words, also you can set the alignment inside.

After that, you can see the string displayed in the preview area. It can be modified or adjusted the position similar to lines or other drawings.

String Display command and the result in the preview area
String Display command and the result in the preview area
6. General controls settings

Users have to load the NIR or SIR resource before using the Numeric Input Control or String Input Control. Learn more about NIR and SIR.

Click the or to load the NIR or SIR control. The operations are about the same. Select the loaded resource file, and then set up the font and font color.

7. Save the resource file

After editing the resource file (.ers file), you need to save it to the ATFC module so that it could be used witht the module.

Power off the ATFC module, switching to USB mode, and plug the USB cable to your PC. Copy the saved .ers file to the flash memory. Unplug the USB cable, switching to Production mode, and then power the ATFC Module on, you can now see the the resource file loaded.

Please make sure that, there is one and only one resource file (.ers) in the ATFC module flash memory.

Was this article helpful to you? Yes No

How can we help?

Leave a Reply