Catalog
- Description
- Component List
- Software/tool installation
- Raspberry Pi GUI Design and Upload
- Working and Raspberry Pi Coding
[1] Description
STONE Technologies is a specialized manufacturer of intelligent TFT LCD modules for HMI. Depending on the application, STONE Technologies offers industrial, advanced and residential smart TFT LCD modules in different sizes.
In this project, I will control LEDs with the help of STONE HMI display and Raspberry Pi GUI design. command data is sent to Raspberry-pi via Display, which is sent in frames, as Display sends data in frames and receives it in frames of HEX code. If you want to understand the data frames and how they work, I am using the STWI056WT-01 model in this project? You can download the datasheet from here.
[2] Component List
- STONE-HMI Display [ STWI056WT-01 ]
- Raspberry Pi
- TTL to USB Converter
- 9v-12v Power Supply
- USB Cable
- Light Emitting Diode
[3] Software / STONE Designer Installation
Before proceeding, we have to install STONE Designer and the USB driver, so let’s see how to install this software. Below is given the driver link from which you can download the Designer tool and the USB driver software.
Step 1: – Go to this driver, you will see the window as shown below and download this software and install them into your computer.
https://drive.google.com/drive/folders/1SbTuj9sqHLb9zV7pmEXOIyxWa9PAdOPH?usp=sharing
From here you have to download the first and the third file, because the first file is for the GUI-Designer tool and the third file is for the USB driver. So download this software and let’s go for GUI design.
[4] GUI Design and Upload
Let’s start with the interface design first. After installation, go to the STONE-Designer icon and click on it, then this designer software will open and you will get such interface as shown in the figure.
Once opened, you have to create a new project for this purpose, select “Project” from the top and then select “New”, you will be asked to provide the same details as shown below, now give the project name and select the screen size according to your display size, here I am using 640X480 size display and after filling all the details also select the project path and click “Create”.
After completing the above section, select the background image for the project as shown in the image.
Step 1: – Select “Image” from the resources to upload the image as background image, there are other images that we will use for button purpose in further processing, these images are given below, you can design your own if you want.
Step 2: – Add these images in the GUI tool by clicking the “+” button given in the figure below.
Step 3: – Now add the first background image by clicking on the blank screen and you will get more options on the right side as shown in the image. From this select the background image option and choose the image we added earlier as shown in the image below.
Step-4 :- Now add buttons for RGB one by one, you can see in the image one button is already added so first will apply changes in it and then similarly will do for other button.
Now select first button which we have added and go in properties of this which is in right side as given in image.
Step-5:- From that select the background image as a Red image because this Button is for Red LED. And similarly do other settings like text color and size, so now we have done with the first button, and you can follow the same procedure for other buttons also.
But After added all the buttons you have to note down their name, which is highlighted in the below image. So you have to note for each button and you can give the name in the sequence like button1,button2.. and so on. This thing will require in the coding part, so keep it in your mind.
In this end it will look like this with all the buttons. So now GUI-Design is ready now we can proceed further.
Step-6 :- This step is for, to upload the GUI-Design in the display.For this first connect the display with power supply of 9-12 volt through power port. And then connect USB to USB to your PC with Display. It will look like this.
After connected the display now first we have to download the ‘Default’ folder through GUI-Tool. For this go to at Debug and click on Download then select the location where you want to download it.
Now we have Default folder in our local machine will upload in the Display memory, for this first connect the 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 first previous Default folder as mentioned in below image.
After that you can paste that folder here which we have copied from GUI design. As you can see in the below image.
After pasted the default folder in display storage, just remove USB from 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 & Raspberry-Pi GUI Coding
Now first connect Raspberry-Pi through VNC server or you can connect directly through display as per your convenience. Then there are two codes which are given below. The first one is for testing the all buttons which we have created and second one the Whole code with I/O setup and it has logic.
Testing Code :
import serial
serialcomm = serial.Serial(‘/dev/ttyUSB0’, 115200) while True:
l=serialcomm.read(size=20) q=l[7:14]
Print(q)
Here the purpose of testing code is to check all buttons so for this you need to connect first USB-0 of Raspberry-Pi to you Display TTL connector and then copy this code in Thonny of Raspberry-Pi as given in below image and then click on run button to test it.
By click any button which is on display will get a particular button name which we have assigned in the starting as we discussed it earlier. You can see after pressing Button-1 on display we are getting output string as button1 because we have done the slicing of whole from which we are getting from display.
l=serialcomm.read(size=20) q=l[7:14]
Here as in testing code these line of code, here l is variable which is receiving the frame from display size of 20, and then q is storing the sliced value as per our requirement.
And accordingly in complete code we made the logic as per individual button. Below logic is given as button6 will press then it will ON the LED2 high and if button7 will press it will of the LED2 as Off. Similarly all logic are working for others LEDs.
elif(q==b’button6′):
GPIO.output(led2,GPIO.HIGH)
elif(q==b’button7′):
GPIO.output(led2,GPIO.LOW)
Raspberry Pi GUI Complete Code :
import RPi.GPIO as GPIO GPIO.setmode(GPIO.BCM) GPIO.setwarnings(False) led1 = 26
led2 = 19
red_led= 13
green_led= 6
blue_led= 5 status1=0 status2=0
GPIO.setup(red_led,GPIO.OUT) GPIO.setup(green_led,GPIO.OUT) GPIO.setup(blue_led,GPIO.OUT) GPIO.setup(led1,GPIO.OUT) GPIO.setup(led2,GPIO.OUT) GPIO.output(red_led,GPIO.LOW) GPIO.output(green_led,GPIO.LOW) GPIO.output(blue_led,GPIO.LOW) GPIO.output(led1,GPIO.LOW) GPIO.output(led2,GPIO.LOW) ######################
import serial
serialcomm = serial.Serial(‘/dev/ttyUSB0′, 115200)
while True: l=serialcomm.read(size=20) q=l[7:14]
if(q==b’button1′): print(q)
GPIO.output(red_led,GPIO.HIGH) GPIO.output(green_led,GPIO.LOW) GPIO.output(blue_led,GPIO.LOW)
elif(q==b’button2′): GPIO.output(green_led,GPIO.HIGH) GPIO.output(red_led,GPIO.LOW) GPIO.output(blue_led,GPIO.LOW)
elif(q==b’button3′): GPIO.output(blue_led,GPIO.HIGH) GPIO.output(red_led,GPIO.LOW) GPIO.output(green_led,GPIO.LOW)
elif(q==b’button4’): GPIO.output(led1,GPIO.HIGH)
elif(q==b’button5′): GPIO.output(led1,GPIO.LOW)
elif(q==b’button6′): GPIO.output(led2,GPIO.HIGH)
elif(q==b’button7′): GPIO.output(led2,GPIO.LOW)
Now that we have understood the logic behind the code, let’s run the second code in Raspberry-Pi, which is the complete code, but before making the circuit connections as shown in the circuit diagram below.
Circuit schematic：
Raspberry Pi GUI Output.
Now that we have completed the whole project, you can now test your project and the final setup will look like the below.