Tutorial: STONE HMI display for EV charging infrastructure

With the growth of new energy vehicles over the years, The demand for HMI display for EV charging piles is increasing, and there is a strong demand for better and more convenient charging piles. The planning of the charging pile is a two-dimensional code mobile payment system designed according to the current demand. The system involves mobile app and applet scanning QR code, downloading and installing applications, registering a user name, assigned ID, registered license plate, mobile phone number, and other information, and realizing associated authentication and authorization.

Without recharging, fees can be automatically deducted from the user’s mobile wallet after charging.This processor-based GUI design helps speed time-to-market and helps customers design cost-effective human-machine interface (HMI) solutions, such as: charging infrastructure for electric vehicles (EV), and infrastructure for EV power supply equipment (EVSE).

This project shows the general idea of developing HMI and some functions of STONE Designer, software for designing graphics. STONE Designer is compatible with OS, Windows, and Linux systems with HMI screens to meet the needs of low-end to high-end applications.

This article does not cover the process of charging hardware and charging pile, nor does it introduce the implementation of the mobile app, applet, and cloud server in detail. This paper focuses on the implementation of charging pile on the new development platform of serial port TFT screen STWI056WT-01, such as St file creation, interface page addition, button parameters, image component parameters, real-time clock parameters and adjustment instructions, label assignment, two download methods of the new development platform, etc.

The Narrative Framework Is:

• Introduction to man-machine interface

• Interface widget making

• Interface download

• Human-computer interaction instruction

• Communication programming between MCU and STONE HMI display

1. Introduction To HMI Display For EV Charging

The charging pile standby interface is shown in figure (1).Through the QR code login authorization of the mobile app and applet scanning interface, identify and activate the Great Wall charging pile equipment. After collecting the customer information, judge that the vehicle charging interface is connected correctly, and turn to the charging real-time parameter monitoring page, as shown in figure (2).

The user name, ID, and license plate number are displayed on the charging parameter display page to facilitate the user to check. The monitoring page also collects the real-time voltage uploaded by the charging module The current (the current will be controlled at different stages and charging speeds) will also accumulate the charging time and display dynamically. With the charging process, the cost will also be displayed on the screen and change dynamically. When the charging is completed (trickle replenishment will be made after fast charging, which is the internal work of the charging module, which is not involved in man-machine programming here), manually press the full changed / the end button to enter the thanks page, as shown in figure (3).

On the thanks page, but the charging module sensor recognizes that the charging gun is reset, the interface can automatically jump to the charging pile standby interface – figure (1).

If you scan the code, you can also log in again to enter the charging real-time parameter monitoring page – figure (2).

Figure (1) charging pile standby interface

Figure (2) charging real-time parameter monitoring page

Figure (3) thank you page

2. HMI Display Interface Widget Makin

First, create a new project in the STONE designer platform, fill in the project name, the resolution of the selected serial port screen 640 * 480, project path, etc. The project name filled in here will be used in the following debug download to generate compiled files (the project name is used as the compilation folder name). See figure (4)

figure(4) create a New project interface

The work involved includes:

• Add window

• Import image

• Put in a digital clock

• Production interface switching button

• Label layout display parameters

• Additive GIF graph

The following are detailed one by one.

1) Add Window

In the project setting part on the upper left of the project, right-click on the project name. At this time, select a new window in the pop-up menu to add Window1, window2 in turn, and the home is automatically generated when creating a new project_ Page is the startup page. When you right-click on windows1, the pop-up menu can select Copy, delete and set as home. Select set as home to replace the startup page. Double click windows1 to expand or store widgets in windows1.

2) Import image

This project starts with home on three pages_ Import background pictures on-page, Window1, and window2. This step must be done first because it is the background! Before importing the image background, all the widgets made will be “blocked” by the background. If it is a button, you will find that they can’t realize the design function. Therefore, remember to import the background first and then make other widgets.

Press and hold the image icon in the menu bar of the parts list and drag it to the interface. The background image is of course 640 * 480 pixels. There is no need to use the mouse for homing, and the keyboard operation is faster and more accurate. As shown in figure (5), fill in X, y, W, and h in the upper right parameter part. In addition, the image at the bottom of the figure (5) can select the background image. You must add a background picture to the platform before selecting. The method of adding is to click “+” in the image tab at the bottom left and select the UI pictures made by the artist one by one according to the guidance (the copy of these pictures to the display memory will be mentioned when downloading the interface later).

Figure (5) starting point coordinates and width height positioning

3) Put in a digital clock

Press and hold the digital clock icon in the menu bar of the parts list and drag it to the design place in the interface. Refer to figure (6) to set text color, font size, and format for the attributes of a digital clock. Note that the PC font library is not necessarily the same as the display font library.

The effect displayed on the PC interface will be different from that displayed on the serial port display screen. The time and date here are displayed in two widgets, as shown in figure (1), figure (2), and figure (3). If space allows them to be displayed together, set the format to y-mm-dd HH: mm: SS. If you don’t want to display seconds, format: HH: mm can be used. HMI display for EV charging.

Figure (6) attributes of digital clock

4) Production interface switching button

On the charging parameter monitoring page of windows1, as shown in figure (2), there is a button full changed / the end at the bottom right. Clicking it will switch to the thanks page of windows2. Similarly, press and hold the button icon in the menu bar of the parts list and drag it to the design place in the interface. Its properties are shown in figure (7). To switch the page to window2, you need to select open window for user define, and then select window2 for target name Make sure that the position of the button in the picture and the background do not match the position of the button in the picture, and then make sure that the button is placed in the background. In addition, home width, back window, set value, and other options are available in the user definition. HMI display for EV charging.

figure（7）

5) Label layout display parameters

Similarly, press and hold the label icon in the menu bar of the parts list and drag it to the design place in the interface. Set the text color and font size in the label attribute section, and adjust the position and font size according to the displayed real-time voltage (label7), current (label8), charging time (hour — label10, minute — label11, second — label12), cost (label9) and another background. Here, the important thing is the name. The names of each unit should be distinguished. The data uploaded from the charging module should be in place according to the name. Don’t be arrogant.

6) Additive GIF graph

In figure (2), the battery icon on the right is a GIF dynamic diagram, showing the current state of the battery being charged. Similarly, press and hold the GIF icon in the menu bar of the parts list and drag it to the design place in the interface. Gif image import is similar to the image. Similarly, add a GIF image with “+” under the image label on the left. Then select the GIF image in the image of the Properties section. HMI display for EV charging

3. Interface Download

There are two methods: A and B.

• Copy through USB flash disk;

• Copy via USB cable.

Method A:

There are the following steps:

• Save the man-machine interface project file;

• Click debug – “download” under the main menu, select the target folder, and a subfolder with the same name as the project will be generated under the selected folder;

• Copy the “default” folder under the shell subfolder to the STONEdirectory of the USB flash disk;

• Disconnect the power supply of the display screen and turn the dial switch on the back of the display screen to the position “host”;

• Insert the USB flash disk into the USB interface of the display screen, disconnect other unnecessary connections, and power on;

• After the startup is stable, press the reset button on the back of the display screen. After the indicator light is stable again, power off and restore the dial switch to the “device” position above;

• Check whether the download is successful. Otherwise, repeat steps 4, 5, and 6 above until successful.

Method B:

Click debug — “download” under the main menu, select the target folder, and the selected file will be displayedA subfolder with the same name as the project is generated under the folder; Use the self-contained USB communication cable to directly connect the computer and the USB interface of the display screen (the USB interface of the USB drive in method a), and copy the raw / default/folder under the subfolder of the same name of the project to the “default” folder of the storage directory of the display screen! Note that you can delete the other seven folders except the image folder under the “default” folder first. The image folder may be occupied by the system when the machine is turned on, and an error will be prompted when writing. You can see that the image folder contains standard label pictures. If new labels and pictures are added, you can manually copy them after comparing the image / XX folder file. This method is similar to real machine debugging, which is more convenient and fast!

4.Human Machine Interface (HMI) For EV Charging Instruction

The STONE instructions used are:

• Digital clock adjustment

• Tag value update

• Page conversion

A. Digital clock adjustment

It is often necessary to set the clock for the first power on. There are six digital clock widgets in the three interfaces of this project, with different names. When powering is on, just reset clock1, and the others will be synchronized automatically. Note that the format of the digital clock attribute is set to y-mm-dd HH: mm: SS, which can be adjusted according to the actual display situation. If you don’t want to display seconds, format: HH: mm. The setting instructions are unified as follows:ST<{“cmd_code”:”set_date”, ”type”:”digit_clock”, ”widget”:”clock1″, ”date”:”2022-03-24 12:23:46″}>ET

B. Tag value update

The real-time voltage (label7), current (label8), charging time (hour — label10, minute — label11, second — label12) and cost (label9) displayed on the Window1 page are all label components, which are transmitted by the charging module, and MCU sends them to the serial port touch screen through label related instructions. Label related instructions:set_ text Set the text displayed by labelset_ value Set the value displayed by labelget_ text Get the text displayed by labelget_ value Get the value displayed by the label (float)give an example:Set text:ST<{“cmd_code”:”set_text”, ”type”:”label”, ”widget”:”label4″, ”text”:”Frank”}>ETST<{“cmd_code”:”set_text”, ”type”:”label”, ”widget”:”label5″, ”text”:”123456″}>ETSet value:St < {“cmd_code”: “set_value”, “type”: “label”, “widget”: “label9”, “value”: 1.23, “format”: “%. 2F”} > et set fee 1.23ST<{“cmd_code”:”set_value”, ”type”:”label”, ”widget”:”label8″, ”value”:25, ”format”:”%02d”}>ETSet current 25 AGet text:ST<{“cmd_code”:”get_text”, ”type”:”label”, ”widget”:”label6″}>ETFormat values: %d, %02d, %03d, %04d, %05d, %06d, %f, %.1f, %.2f, %.3f, %.4f, %.5f, %.6f

C. Page conversion

Window related in the command:open_ win Open any window (Windows running in the background can also be opened with this command, recommended)close_ win Close any window (not recommended, use with caution)back_ win Return to the upper window and close the current window (do not cache the data of the current serial port)back_ win_ to Return to any window in the upper layer, and other opened windows run in the backgroundback_ home Return to the main window, do not close the previously opened window, and other windows run in the background;give an example:Open the Window1 windowST<{“cmd_code”:”open_win”, ”type”:”window”, ”widget”:”window1″}>ETClose label_ Value windowST<{“cmd_code”:”close_win”, ”type”:”window”, ”widget”:”label_value”}>ETReturn to the upper window:ST<{“cmd_code”:”back_win”, ”type”:”window”}>ETThe name of the upper layer returned is label_ Value window, which closes all windows above the window. It is generally applicable to multi-level windowsST<{“cmd_code”:”back_win_to”, ”type”:”window”, ”widget”:”label_value”}>ETReturn to label_ Value windowST<{“cmd_code”:”back_win_to”, ”type”:”window”, ”widget”:”home_page”}>ETReturn to main windowReturn to main windowST<{“cmd_code”:”back_home”, ”type”:”window”}>ETPS: the main window cannot be closed

1. Communication programming between Arduino MCU and STONE HMI display

Programming in Arduino environment, baidu input method is unloaded to realize normal English input. In addition, the above instructions should be changed in Arduino environment. As follows:
St < {“cmd_code”: “set_value”, “type”: “label”, “widget”: “label9”, “value”: 1.23, “format”: “%. 2F”} > et the above setting fee is 1.23, which should be written in Arduino program as:
Serial. println(F(“ST<{\”cmd_code\”:\”set_value\”,\”type\”:\”label\”,\”widget\”:\”label9\”,\”value\”:1.23,\”format\”:\”%.2f\”}>ET”));
The cost price is a floating-point variable, and the transmission method is serial Print (price, 2), with 2 decimal places reserved. Serial. Write (price) can only transmit 0-9, single digits. And because it is a variable, it needs to be transmitted separately. See the program code below. HMI display for EV charging.
The program code of video effect is as follows:/*frank13STONE and arduino COMMTurns on an LED on for one second, then off for one second, repeatedly.This example code is in the file of frank.*/// Pin 13 has an LED connected on most Arduino boards.// give it a name:int led = 13;unsigned int count_ i=0;//------charged station use----------2022.03.23------unsigned int led1s=0;unsigned int time_ 1s=0;unsigned int time_ 1m=0;unsigned int time_ 1h=0;float price=0.001; // Expenses$// the setup routine runs once when you press reset:void setup() {// initialize the digital pin as an output.pinMode(led, OUTPUT);Serial. begin(115200); // Turn on the serial communication function and wait for the serial port to openwhile (!Serial) {; // wait for serial port to connect. Needed for Leonardo only}}// the loop routine runs over and over again forever:void loop() {//---Cumulative time + +------time_ 1s = time_ 1s + 1;if(time_1s >= 60){time_ 1s = 0;time_ 1m = time_ 1m + 1;if(time_1m >= 60){time_ 1m = 0;time_ 1h = time_ 1h + 1;}}//------time display -----Serial. print("ST<{\"cmd_code\":\"set_value\",\"type\":\"label\",\"widget\":\"label12\",\"value\":"); //secSerial. print(time_1s); // Serial. write(time_1s); . The write value is specified as single byte only out 0-9,Serial. println(",\"format\":\"%02d\"}>ET"); // secdelay(100);Serial. print("ST<{\"cmd_code\":\"set_value\",\"type\":\"label\",\"widget\":\"label11\",\"value\":"); //minSerial. print(time_1m); // Serial. write(time_1s); only out 0-9,Serial. println(",\"format\":\"%02d\"}>ET"); // minSerial. print("ST<{\"cmd_code\":\"set_value\",\"type\":\"label\",\"widget\":\"label10\",\"value\":"); //hourSerial. print(time_1h); // Serial. write(time_1s); only out 0-9,Serial. println(",\"format\":\"%d\"}>ET"); // hourdelay(100);price = (time_1h * 120) + (time_1m * 2) + (time_1s * 0.036); // Simple algorithm of charging cost//Here is the floating point charge price$Serial. print("ST<{\"cmd_code\":\"set_value\",\"type\":\"label\",\"widget\":\"label9\",\"value\":");Serial. print(price,2); // 1.2356 --- > 1.23 floating point number takes 2 decimal placesSerial. println(",\"format\":\"%.2f\"}>ET"); // price $   Serial.println(F("ST<{\"cmd_code\":\"set_value\",\"type\":\"label\",\"widget\":\"label8\",\"value\":20.11,\"format\":\"%.2f\"}>ET"));   digitalWrite(led, LOW);    // turn the LED off by making the voltage LOW           led1s = led1s + 1;   if(led1s >= 2){     led1s = 0;     digitalWrite(led, HIGH);   // turn the LED on (HIGH is the voltage level)     Serial.println(F("ST<{\"cmd_code\":\"set_value\",\"type\":\"label\",\"widget\":\"label8\",\"value\":20.26,\"format\":\"%.2f\"}>ET"));  //current out   }  delay(1000);               // wait for a second, range:200-2000            }

STONE HMI Display For Electric Vehicle Charging Infrastructure Project Video

https://www.stoneitech.com/stone-hmi-display-for-ev-charging-infrastructure-project/

https://youtu.be/PauvOCWFkw8