• Post comments:0 Comments
  • Reading time:3 mins read

If this is your first time using clarkwise Arduino touch screen, this is the right place to go.

By the end of this tutorial, you will make something like this:

Final result after this Arduino Touch Screen 101 tutorial

We gonna achieve:

  • Two buttons and a switch button, and all the buttons send data back to Arduino Nano and then nano print some text accordingly.

Steps of this tutorial:

  1. Create the resource file.
  2. Create the Arduino Code.
  3. Connect them together to work.

Step 1: Design the UI for clarkwise Arduino touch screen using ATFC UI Tool

Get the ATFC UI Tool

Download the ATFC UI Tool from the download page:

The download page with ATFC UI Tool download link.

Unzip it, you can find the folder structure like this:

Folder structure of ATFC UI Tool

Run the exe file.

Creating the resource file

We create a new resource file in the dialog. Since we are using ATFC0701024600, we choose the options like this:

New resource file dialog of ATFC UI Tool

Right click the configuared interface (GUI), and then Click the “New GUI” in the pop up menu.

Creating new GUI in ATFC UI Tool

We can name the GUI whatever we want. For example, “boot”.

Import resources

Now we import the basic resource to the resource file.

There are several different types of resources in the ATFC UI Tool. Like the font file, BMP file, JPG file, PNG file, and the General Control file (Keypad, Numpad)

We have prepared all the pictures, and you can download them from our Github repo. Also, you can find the fonts/Keypad/Numpad file inside the ATFC UI Tool folder.

Now click the “P” Button to import PNG files, the “A” Button to import the font file.

Fonts/PNG File/Control files import button of ATFC UI Tool

Setup GUI

Now, this is very important for the rookie user. Always set up the backlight first, otherwise, the clarkwise touch screen will remain dark until you set up the backlight.

clarkwise Arduino touch screen using GUI to define each page, and using “Controls (GUI Ctrl)” and “Display Commands (GUI Dis)” to describe what to appear on the screen and how. The documentation gives a full yet very detailed explanation of all of them.

Double click the GUI we just added(boot), and then click this “Set Backlight” button to make this. We set it to 500 (max).

Set Backlight button of ATFC UI Tool

Then we set up the background color to RGB(239, 243, 247)

Define the background color first

Actually, this is a GUI Display command, it means to define the “Paint color”. So, no matter what kind of shape we draw after this command will be filled with define color.

Now we click the “Clr Screen” button. Now the background is fully filled with the light gray color we just defined. Actually, the Clr Screen is to draw a rectangle with the same size of the screen.

Clr Screen button

Creating controls

After setting up the GUI, we can add controls to it.

First, we create the button, click “Set Bitmap Button Control”, and then click and draw where you want to put the button. After that, the BitmapButton Ctrl Config dialog pops up. We create 3 buttons, one is Blue, one is Green and the third one is the toggle button. Set them as below:

Set BItmapButton Ctrl
BitmapButton Ctrl Config dialog of ATFC UI Tool
Set the blue button like this
BitmapButton Ctrl Config
And then the green button too
Setting for the toggle button on ATFC UI Tool
Then the toggle button

For the rest, you’d better check it out in the video 😀

close

Updates

Tips

Coupons

We don’t spam! Read our privacy policy for more info.

Leave a Reply