Jump to content

Самоучитель: Дисплей STONE HMI и arduino для создания зарядной станции EV


 Share

Recommended Posts

Опубликовано с разрешения администрации форума

В этой статье не рассматривается процесс зарядного оборудования и зарядной кучи, а также не представлено детальное внедрение мобильного приложения, апплета и облачного сервера. Данная статья посвящена реализации зарядного свайпа Great Wall на новой платформе разработки последовательного порта TFT экрана STWI056WT-01, такой как: Создание St файла, добавление страницы интерфейса, параметры кнопки, параметры компонента изображения, параметры часов реального времени и инструкции по настройке, назначение ярлыка, два метода загрузки новой платформы разработки и т.д.

Структура повествования такова:

1. Введение в человеко-машинный интерфейс

2. Создание виджета интерфейса

3. Загрузка интерфейса

4. Обучение человеко-компьютерному взаимодействию

5. Программирование связи между MCU и сенсорным экраном STONE

 

1. Введение в человеко-машинный интерфейс

Интерфейс режима ожидания зарядной сваи показан на рисунке (1). С помощью авторизации входа по QR-коду мобильного приложения и сканирующего интерфейса апплета идентифицируйте и активируйте оборудование зарядной сваи Great Wall. После сбора информации о клиенте убедитесь, что интерфейс зарядки транспортного средства подключен правильно, и перейдите на страницу мониторинга параметров зарядки в режиме реального времени, как показано на рисунке (2). Имя пользователя, ID и номерной знак отображаются на странице отображения параметров зарядки, чтобы облегчить пользователю проверку. Страница мониторинга также собирает напряжение в реальном времени, загруженное модулем зарядки. Ток (ток будет контролироваться на разных этапах и скоростях зарядки) также будет накапливать время зарядки и отображаться динамически. В процессе зарядки стоимость также будет отображаться на экране и динамически изменяться. Когда зарядка будет завершена (после быстрой зарядки будет произведено пополнение заряда, что является внутренней работой модуля зарядки, который не участвует в человеко-машинном программировании здесь), или вручную нажмите кнопку полного изменения / кнопку окончания, чтобы войти на страницу благодарности, как показано на рисунке (3). На странице благодарности, но датчик модуля зарядки распознает, что зарядный пистолет сброшен, интерфейс может автоматически перейти к интерфейсу ожидания зарядной кучи - рисунок (1). Если вы отсканируете код, вы также можете снова войти в систему, чтобы попасть на страницу контроля параметров зарядки в реальном времени - рисунок (2).

1468142505_1.png.f6a62eb811bcaf6b7992e276f46ab522.png

Рисунок (1) интерфейс режима ожидания зарядной сваи

679759133_2.png.f48f908da7f853470d27bb98a29eed2b.png

Рисунок (2) страница мониторинга параметров зарядки в реальном времени

204043758_3.png.0cf56eaf3f864a295bef0d3af2e05013.png

Рисунок (3) страница благодарности

 

2. Создание виджета интерфейса

Сначала создайте новый проект в платформе STONE designer, заполните имя проекта, разрешение выбранного экрана последовательного порта 640*480, путь к проекту и т.д. Заполненное здесь имя проекта будет использоваться в последующей отладочной загрузке для создания скомпилированных файлов (имя peoject используется как имя папки компиляции). См. рисунок (4)

47315050_4.png.be6c9abf3e69ffe925f4cf534533bb09.png

рисунок(4)   создание интерфейса нового проекта

 

Работа включает в себя:

1) Добавить окно

2) Импортировать изображение

3) Вставить цифровые часы

4) Кнопка переключения производственного интерфейса

5) Параметры отображения макета этикетки

6) График аддитивного GIF

 

 

Ниже приведены подробные сведения по порядку.

 

1) Окно добавления

В части настройки проекта в верхней левой части проекта щелкните правой кнопкой мыши по названию проекта. В это время во всплывающем меню выберите новое окно, чтобы добавить по очереди окна Window1, Window2, а также автоматически создаваемую при создании нового проекта домашнюю страницу_ Page - стартовую страницу. Когда вы щелкаете правой кнопкой мыши на windows1, во всплывающем меню можно выбрать Копировать, Удалить и Установить как домашнюю. Выберите Установить как домашнюю, чтобы заменить начальную страницу. Дважды щелкните windows1, чтобы развернуть или сохранить виджеты в windows1.

 

2) Импорт изображения

Этот проект начинается с дома на трех страницах_ Импортируйте фоновые изображения в страницу, окна1 и окна2. Этот шаг должен быть выполнен первым, потому что это фон! Перед импортом фонового изображения, все сделанные виджеты будут "заблокированы" фоном. Если это кнопка, то вы обнаружите, что они не могут реализовать функцию дизайна. Поэтому не забывайте сначала импортировать фон, а затем создавать другие виджеты.

Нажмите и удерживайте значок изображения в строке меню списка деталей и перетащите его на интерфейс. Фоновое изображение, конечно же, имеет размер 640 * 480 пикселей. Нет необходимости использовать мышь для наведения, а работа с клавиатурой быстрее и точнее. Как показано на рисунке (5), заполните X, y, W и h в верхней правой части параметров. Кроме того, в нижней части рисунка (5) можно выбрать фоновое изображение. Перед выбором необходимо добавить фоновое изображение на платформу. Способ добавления - нажать "+" во вкладке изображения внизу слева и выбрать по очереди картинки UI, сделанные художником, в соответствии с руководством (о копировании этих картинок в память дисплея будет сказано при загрузке интерфейса позже).

137058869_5.png.73a64a0a553ea79856fac7f79129909c.png

Рисунок (5) координаты начальной точки и позиционирование высоты ширины

 

3) Поместите цифровые часы

Нажмите и удерживайте значок цифровых часов в строке меню списка деталей и перетащите его на место проектирования в интерфейсе. Обратитесь к рисунку (6), чтобы установить цвет текста, размер шрифта и формат для атрибутов цифровых часов. Обратите внимание, что библиотека шрифтов для ПК не обязательно совпадает с библиотекой шрифтов для дисплея. Эффект, отображаемый на интерфейсе ПК, будет отличаться от эффекта, отображаемого на экране дисплея последовательного порта. Время и дата здесь отображаются в двух виджетах, как показано на рисунке (1), рисунке (2) и рисунке (3). Если место позволяет отображать их вместе, установите формат y-mm-dd HH: mm: SS. Если вы не хотите отображать секунды, можно использовать формат: HH: mm можно использовать.

689548374_6.png.7b36f4ccc2c7bcf93f64c84b430443c6.png876056237_7.png.3d6e04128a48bb5452090d68405acb20.png

Рисунок (6) атрибуты цифровых часов


4) Кнопка переключения производственного интерфейса

На странице мониторинга параметров зарядки windows1, как показано на рисунке (2), внизу справа есть кнопка full changed / end. При нажатии на нее происходит переключение на страницу благодарности windows2. Аналогично, нажмите и удерживайте значок кнопки в строке меню списка деталей и перетащите его в проектное место в интерфейсе. Ее свойства показаны на рисунке (7). Чтобы переключить страницу на window2, нужно выбрать open window для user define, а затем выбрать window2 для target name Убедитесь, что положение кнопки на рисунке и на фоне не совпадают. Кроме того, ширина дома, заднее окно, установленное значение и другие опции доступны в пользовательском определении.

730573407_8.png.34c9674053b16b9ef6d8e8cdafecccea.png

рисунок(7)

 

5) Параметры отображения макета этикетки

Аналогично, нажмите и удерживайте значок этикетки в строке меню списка деталей и перетащите его на место проектирования в интерфейсе. Установите цвет текста и размер шрифта в разделе атрибутов этикетки, отрегулируйте положение и размер шрифта в соответствии с отображаемым в реальном времени напряжением (этикетка7), током (этикетка8), временем зарядки (час -- этикетка10, минута -- этикетка11, секунда -- этикетка12), стоимостью (этикетка9) и другим фоном. Здесь важным моментом является название. Названия каждого модуля должны быть разными. Данные, загружаемые из модуля зарядки, должны располагаться в соответствии с названием. Не будьте самонадеянными.

 

6) Аддитивный график GIF

На рисунке (2) значок батареи справа - это динамическая GIF-диаграмма, показывающая текущее состояние заряжаемой батареи. Аналогично, нажмите и удерживайте значок GIF в строке меню списка деталей и перетащите его в проектное место в интерфейсе. Импорт Gif-изображений аналогичен импорту изображений. Аналогично, добавьте GIF-изображение с помощью "+" под ярлыком изображения слева. Затем выберите изображение GIF в разделе "Изображение" раздела "Свойства".

3. Загрузка интерфейса

Существует два метода: A и B.

A. Копирование через флэш-диск USB;

B. Копирование через USB-кабель.

 

Метод a:

Выполните следующие действия:

1. Сохраните файл проекта человеко-машинного интерфейса;

2. Нажмите debug - "download" в главном меню, выберите целевую папку, и в выбранной папке будет создана вложенная папка с тем же именем, что и проект;

3. Скопируйте папку "default" во вложенной папке shell в каталог STONE на флэш-диске USB;

4. Отключите питание экрана дисплея и поверните переключатель на задней панели экрана дисплея в положение "host";

5. Вставьте флэш-диск USB в интерфейс USB экрана дисплея, отключите другие ненужные соединения и включите питание;

6. После стабильного запуска нажмите кнопку сброса на задней панели экрана дисплея. После того как индикатор снова станет стабильным, выключите питание и верните переключатель в положение "устройство", указанное выше;

7. Проверьте, успешно ли прошла загрузка. В противном случае повторите шаги 4, 5 и 6 выше до успешного завершения.

 

Метод B:

Нажмите отладка -- "скачать" в главном меню, выберите целевую папку, и выбранный файл будет отображен

В папке будет создана подпапка с тем же именем, что и проект; Используйте автономный кабель связи USB для прямого соединения компьютера и интерфейса USB экрана дисплея (интерфейс USB USB накопителя в методе a), и скопируйте папку raw / default / в подпапке с тем же именем проекта в папку "default" каталога хранения экрана дисплея! Обратите внимание, что сначала можно удалить остальные семь папок, кроме папки с изображениями в папке "по умолчанию". Папка изображений может быть занята системой при включении аппарата, и при записи будет выдана ошибка. Вы можете видеть, что папка image содержит стандартные изображения этикеток. Если добавляются новые этикетки и картинки, вы можете вручную скопировать их после сравнения файлов папки image / XX. Этот метод похож на отладку реальной машины, что более удобно и быстро!

 

4. Инструкция взаимодействия человека и компьютера

Используются следующие инструкции STONE:

A. Настройка цифровых часов

B. Обновление значения метки

C. Преобразование страницы

 

A. Настройка цифровых часов

Часто бывает необходимо установить часы при первом включении. В трех интерфейсах этого проекта есть шесть виджетов цифровых часов с разными именами. При включении питания достаточно сбросить часы clock1, и остальные будут синхронизированы автоматически. Обратите внимание, что формат атрибута цифровых часов установлен на y-mm-dd HH: mm: SS, который может быть изменен в зависимости от фактической ситуации на дисплее. Если вы не хотите отображать секунды, выберите формат: HH: mm. Инструкции по настройке унифицированы следующим образом:

ST<{"cmd_code":"set_date","type":"digit_clock","widget":"clock1","date":"2022-03-24 12:23:46"}>ET

 

B. Tag value update

Напряжение (метка7), ток (метка8), время зарядки (час -- метка10, минута -- метка11, секунда -- метка12) и стоимость (метка9), отображаемые на странице Window1, являются компонентами меток, которые передаются модулем зарядки, а MCU посылает их на сенсорный экран последовательного порта через инструкции, связанные с метками. Инструкции, связанные с метками:

set_ text Установить текст, отображаемый меткой

set_ value Установить значение, отображаемое этикеткой

get_ text Получить текст, отображаемый меткой

get_ value Получить значение, отображаемое меткой (float)

привести пример:

Set text:

ST<{"cmd_code":"set_text","type":"label","widget":"label4","text":"Frank"}>ET

ST<{"cmd_code":"set_text","type":"label","widget":"label5","text":"123456"}>ET

Set value:

St < {"cmd_code": "set_value", "type": "label", "widget": "label9", "value": 1.23, "format": "%. 2F"} > et set fee 1.23

ST<{"cmd_code":"set_value","type":"label","widget":"label8","value":25,"format":"%02d"}>ET

Set current 25 A

Get text:

ST<{"cmd_code":"get_text","type":"label","widget":"label6"}>ET

Format values: %d,%02d,%03d,%04d,%05d,%06d,%f,%.1f,%.2f,%.3f,%.4f,%.5f,%.6f

 

C. Преобразование страницы

Окна, связанные с командой:

open_ win Открыть любое окно (Windows, работающие в фоновом режиме, также могут быть открыты с помощью этой команды, рекомендуется)

close_ win Закрыть любое окно (не рекомендуется, используйте с осторожностью)

back_ win Вернуться в верхнее окно и закрыть текущее окно (не кэшировать данные текущего последовательного порта)

back_ win_ to Вернуться в любое окно верхнего уровня, при этом другие открытые окна работают в фоновом режиме

back_ home Вернуться в главное окно, не закрывать ранее открытое окно, а другие окна запускать в фоновом режиме;

привести пример:

Открыть окно Window1

 

ST<{"cmd_code":"open_win","type":"window","widget":"window1"}>ET

Закрыть окно label_ Value

ST<{"cmd_code":"close_win","type":"window","widget":"label_value"}>ET

Вернитесь к верхнему окну:

ST<{"cmd_code":"back_win","type":"window"}>ET

Имя возвращаемого верхнего уровня - окно label_ Value, которое закрывает все окна над ним. Обычно применяется к многоуровневым окнам

ST<{"cmd_code":"back_win_to","type":"window","widget":"label_value"}>ET

Return to label_ Value window

ST<{"cmd_code":"back_win_to","type":"window","widget":"home_page"}>ET

Вернуться в главное окно

Вернуться в главное окно

ST<{"cmd_code":"back_home","type":"window"}>ET

PS: главное окно не может быть закрыто


1. Программирование связи между MCU и сенсорным экраном STONE


Программирование в среде Arduino, метод ввода baidu выгружается, чтобы реализовать нормальный английский ввод. Кроме того, вышеприведенные инструкции должны быть изменены в среде Arduino. Как показано ниже:

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"));

Себестоимость является переменной с плавающей точкой, а метод передачи - последовательный Print (price, 2), с резервированием 2 десятичных знаков. Последовательный. Write (price) может передавать только 0-9, одиночные цифры. А поскольку это переменная, ее нужно передавать отдельно. Смотрите программный код ниже.

Программный код видеоэффекта выглядит следующим образом:

/*



frank13



STONE and arduino COMM



Turns 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 open



while (!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\":"); //sec

Serial. print(time_1s); // Serial. write(time_1s); . The write value is specified as single byte only out 0-9,

Serial. println(",\"format\":\"%02d\"}>ET"); // sec

delay(100);

Serial. print("ST<{\"cmd_code\":\"set_value\",\"type\":\"label\",\"widget\":\"label11\",\"value\":"); //min

Serial. print(time_1m); // Serial. write(time_1s); only out 0-9,

Serial. println(",\"format\":\"%02d\"}>ET"); // min

Serial. print("ST<{\"cmd_code\":\"set_value\",\"type\":\"label\",\"widget\":\"label10\",\"value\":"); //hour

Serial. print(time_1h); // Serial. write(time_1s); only out 0-9,

Serial. println(",\"format\":\"%d\"}>ET"); // hour

delay(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 places

Serial. 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

  

    

            

}

 

Edited by admin
Опубликовано с разрешения администрации форума
Link to comment
Share on other sites

Join the conversation

You are posting as a guest. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...