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:
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:
- Create the resource file.
- Create the Arduino Code.
- 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:
Unzip it, you can find the folder structure like this:
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:
Right click the configuared interface (GUI), and then Click the “New GUI” in the pop up menu.
We can name the GUI whatever we want. For example, “boot”.
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.
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).
Then we set up the background color to RGB(239, 243, 247)
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.
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:
For the rest, you’d better check it out in the video 😀