In this project, I am going to control LEDs with the help of this STONE HMI with Arduino. Here Arduino will receive the data from the STONE HMI display, according to a button press, and will also see the data in the AI-Thinker tool to verify it.
Table of Contents
[1] Description
[2] Component List
[3] Software/ Tools Installation
[4] GUI Designing & Uploading
[5] Working & Arduino Coding
1. STONE HMI Description
STONE Technologies is a professional Manufacturer of HMI Intelligent TFT LCD modules. Depending on the application the STONE Technologies offers Intelligent TFT LCD modules available in different modul
2. Component List
[ 1] STONE HMI Display [STWI056WT/N-01]
[2] Arduino
[3] TTL to USB converter
[4] 9v- 12v Power Supply
[5] USB cables
[6] LEDs
3. STONE Designer（GUI Designer Software） Installation
Before proceeding further we have to install STONE Designer and the Driver for USB so let’s see how to install this software. Below Drive link is given from that you can download the Designer tool and USB driver software.
Step1 : Go to this Drive you will get a window as given below in the image and download this software and then install them in your computer.
Drive ink : https:/drive.google.com/drive/folders/1SbTuj9sqHLb9zV7pmEXOIyxWa9PAdOPH?usp=sharing
From here you have to download the 1st and 3rd file because the first one is for GUI- Designer software and 3rd is for USB
driver. So download this software and let’s go for GUI design.
4. GUI Designing & Uploading
Let’s start first with interface designing. After installed, go to STONE-Designer icon and click on that after that designer software will open and you will get this type of interface as shown in the image.
After opened you have to create a new project for this select ‘Project’ from the top and from that select ‘new’ and you will ask for the same details as shown in the below figure, now give the name of the project and select screen size as per your display size, here I’m using 640X480 size display, and select project path also after done with filling all the details click on ‘Create’.
After done with the above part select the background image for the project for this follow the steps as shown in the figure.
Now here we need to add buttons and a bar controller as per the background image. For that you just need o to add a switch gadget here and give a name as “1” if you want you can give any name. Similarly, do for the same second button and give the “2” as name. You can see these two buttons in the below image.
Now go for that Brightness bar for this you have to select text– selector from gadgets. And select scale from 0- 10 so you can control the LED brightness of a LED, then you can select size and other parameters of this gadget. And it is going to be look like this.
Now as per the project GUI design is ready now you have to compile the project by clicking on compile button which is given at top and then you have to click on the Download button and then select the download path as shown in the below image.
Now next step is, to upload the GUI–Design to the display. For this first, connect the display with a power supply
of 9- 12 volt through the power port. And then connect USB to USB to your PC with Display. It will look like this.
After connecting the display now first we have to download the ‘Default’ folder through GUI-Tool. For this go to Debug and click on Download then select the location where you want to download it.
Now we have the Default folder in our local machine that will upload in the Display memory, for this first connect the HMI display as mentioned above in the image through USB to USB communication with your PC. You will get a storage device in your PC there you have to delete the first previous Default folder as mentioned in the below image.
After that you can paste that folder here which we have copied from GUI design. As you can see in the below mage.
After pasting the default folder in display storage, just remove USB from the Display and also remove the power
supply, and after 2-3 sec just connect the power supply again to the display. Then you will get like this GUI which we have designed.
Now we have done with GUI design and uploading part , so its time to go through code and its working.
5. Working & STONE HMI with Arduino Coding
Let’s understand how the code is working.
Arduino Code
unsigned char Buffer[20];
#define LED1 2 /*Pin for LED- 1*/
#define LED2 3 / *PWM Pin for Brigh ness Controller LED-2 */
#define LED3 4 /*Pin for LED-3*/
void setup()
{
Serial.begin(115200);
pinMode(LED1,OUTPUT);
pinMode(LED2,OUTPUT);
pinMode(LED3,OUTPUT);
}
void loop()
{
if(Serial.available())
{
/* This loop will store whole frame in buffer array */
for(int i=0;i<=19;i++)
{
Buffer[i]= Serial.read();
}
/* Checking first index of the frame as it is 0X53 */
if(Buffer[0]==0X53)
{
/* Checking condition for LED- 1 [ON] at frame index 13 with value 0X97 */
if(Buffer[ 13]==0X97)
{
Serial.println("LED1_ON");
digitalWrite(LED1, HIGH);
}
/* Checking condition for LED- 1 [OFF] at frame index 13 with value 0X96 */
else if(Buffer[ 13]==0X96)
{
Serial.println("LED1_OFF");
digitalWrite(LED1, LOW);
}
/* Checking condition for LED-2 [ON] at frame index 13 with value 0XD3 */
else if(Buffer[ 13]==0XD3)
{
Serial.println("LED3_ON");
digitalWrite(LED3, HIGH);
}
/* Checking condition for LED-2 [OFF] at frame index 13 with value 0XD2 */
else if(Buffer[ 13]==0XD2)
{
Serial.println("LED3_OFF");
digitalWrite(LED3, LOW);
}
/* Store the value for brighness from the Frame at index 11 for LED-2*/
else if(Buffer[ 12]==0X3E)
{
int x=Buffer[ 11];
int Brightness=map(x,0,10,0,255);
Serial.print("LED2 Brightness :- ");
Serial.println(Brightness);
analogWrite(LED2,Brightness);
}
}
}
delay(10);
}
As you can see in code we are storing 20 Bytes of data into a buffer the purpose of this is to store the data frame which is coming from display side and according to frame we are checking the condition here in code as per the data frame places we are getting different values .
These value you can check in the Ai-thinker tool to get the every response value for each button. So with this you can create your own code just by replacing these if else checking values in the code .It may be same but you can check in once in the Ai- thinker tool.
Let’s see the circuit so you can make connection easily.
So as per the circuit you have to make your connection if you want to use same pins fro LEDs. Here you ca see HMI display is connected with the help of a TTL converter which you will get with the display mostly. And this you have to connect Tx & Rx with your Arduino to make it communicate with the Display.
So with this you will be completed with this project, you can refer video also of this project (STONE HMI with Arduino) which is make on this.