Використання Базове графічне керування на послідовному екрані STONE ви можете малювати лінії, трикутники, багатокутники, прямокутники, квадрати, кола, дуги, кольори заливки, вирізати та вставляти тощо.
Конструкція машини для раннього навчання з використанням послідовного сенсорного екрану STVI056WT-01, щоб розпізнавати форми, дивлячись на зображення, розпізнавати слова за кольорами та розробляти формат розваг для визначення правильних помилок, оцінки або проходження рівня, щоб діти могли навчитися розпізнавати кольори, розуміти основні форми та вивчати відповідні слова у невимушеній та ігровій формі.
Офіційна відеопрезентація не дає реального ефекту від базового графічного керування, тому ця демонстрація доповнить його. Інструкції для малювання передаються через зв'язок між плата управління arduino і КАМЕНІ серійні осипиn.
Крім того, ця примітка не включає повний функціональний вміст елемента керування Basic graphics, лише функції, які використовуються під час використання розробки, записані тестуються на машині OK, ви можете безпосередньо завантажити демонстраційний запуск.
Апаратне середовище для демонстрації показано на рисунку 1, малюнку 2 і малюнку 3.
STONE офіційно поставляється з 2 платами, серед яких квадратна - це плата для завантаження USB, а довга - плата зв'язку USB до послідовного зв'язку (і блок живлення DC12V для послідовного екрана).
(Малюнок 1: Підключення та підключення до живлення послідовного екрана STONE) (Малюнок 2: Схема підключення для завантаження файлів керування Basic Graphics з екрана STONE)
(Малюнок 3: З'єднання TX, RX, GND між платою зв'язку з послідовним екраном STONE і платою розробника arduino)
(Малюнок 4: Основна графічна керуюча область малювання, змінна адреса та інші параметри)
Після вибору елемента керування Basicgraphics у меню STONE TOOLBox (програмне забезпечення GUI Design) Конфігурація змінної (D) та встановлення параметрів області малювання та змінної адреси, інструкція 0x82 використовується для запису до встановленої адреси змінної пам’яті (тут встановлюється 0x1000). Після встановлення параметрів області малювання та змінної адреси інструкція 0x82 використовується для запису CMD + Data_pack_Num_Max + Data до встановленої адреси змінної пам’яті (у цьому випадку 0x1000) для завершення реалізації функцій малювання. Конкретний код функції показаний на малюнку 6, де є інструкція малювання лінії 0x0002, використовуючи наступний приклад.
(Малюнок 5: Формат команди базових даних керування графікою)
(Малюнок 6: Ілюстрація команд малювання лінії та прямокутника для базового графічного керування)
Інструкція малювання лінії 0x0002, приклад використання.
Щоб з’єднати чорну лінію від координат (340, 200) до координат (585, 200), інструкція:
A5 5A 11 82 10 00 00 02 00 01 00 00 01 54 00 C8 02 49 00 C8
Намалюйте три чорні лінії, замкнені в трикутник з трьома вершинами в координатах (200, 200), (300, 200), (250, 100), і інструкція виглядає так:
A5 5A 19 82 10 00 00 02 00 03 00 00 00 00 C8 00 C8 01 2C 00 C8 00 FA 00 64 00 C8 00 C8
Вище 0x1000 – це змінна адреса базового графічного керування, 0x0002 – код інструкції, 0x0001 та 0x0003 – 1 рядок і 3 рядки відповідно, 0x0000 – це колірний код, значення 0000 – чорне, а значення ffff – яскраво-біле. Інші миттєві координати XY кожної точки.
Приклад малювання прямокутника.
Координати верхньої лівої вершини прямокутника (340, 237), координати нижньої правої вершини (585, 340) чорний колір, команда:
A5 5A 11 82 10 00 00 03 00 01 01 54 00 ED 02 49 01 54 00 00
Намалюйте одночасно два прямокутники (340, 237) – (585, 340), (324, 221) – (601, 356), команда:
A5 5A 1B 82 10 00 00 03 00 02 01 54 00 ED 02 49 01 54 00 00 01 44 00 DD 02 59 01 64 FF FF
Вище 0x1000 — це змінна адреса базового графічного керування, 0x0003 — код команди прямокутника, 0x0001, 0x0002 — 1 прямокутник, 2 прямокутника, 0x0000, 0xffff — колірний код, значення 0000 — яскраве значення fff — чорний, білий. Інші — координати XY верхньої лівої вершини та нижньої правої вершини кожного прямокутника.
(Малюнок 7: Команди заповнення прямокутника та малювання кола для базового керування графікою)
Приклад заливки прямокутника.
Команда заливки чорним прямокутником (470, 200) ~ (550, 255)
A5 5A 11 82 10 00 00 04 00 01 01 D6 00 C8 02 26 00 FF 00 00 00
Приклад малювання кола.
Центр кола (470, 200), R = 50 чорний, інструкція є
A5 5A 0F 82 10 00 00 05 00 01 01 D6 00 C8 00 32 00 00
Щоб намалювати два кола одночасно, центр A (470, 200) R=50 і центр B (256, 200) R=80, обидва чорними, команда:
A5 5A 17 82 10 00 00 05 00 02 01 D6 00 C8 00 32 00 00 01 00 00 C8 00 50 00 00
(Малюнок 8: Команда Arc для базового керування графікою)
Роздільна здатність дуги становить 0.5 градуса, 360 градусів відповідає 720, а 0 градусів – у вертикальному напрямку вгору.
Приклад дуги.
Верхня дуга 315 градусів до початку – 45 градусів до кінця, центр кола (300, 200) R = 80, чорний, команда
A5 5A 13 82 10 00 00 0B 00 01 00 00 01 2C 00 C8 00 50 02 76 00 5A
Щодо кольорів.
0x0000 чорний 0xffff білий 0x00ff синій 0xf000 червоний 0xfd60 помаранчевий
0xff60 жовтий, 0x2f60 зелений
(Малюнок 9: Параметри та адреси креслярської плати інтерфейсу форми базового графічного керування)
(Малюнок 10: Параметри креслярської дошки та адреси колірного інтерфейсу базового графічного керування)
Відповідно до адреси змінної, команда для заповнення зеленим кольором для (10, 80) ~ (630, 400) є
A5 5A 11 82 60 00 00 04 00 01 00 0A 00 50 02 76 01 90 2f 60
Інші схожості дивіться в коді програми для отримання детальнішої інформації.
Код, показаний у відео, виглядає наступним чином.
/*
frank10
STONE і arduino COMM, базова графіка відтворюється в програмі..
Вмикає світлодіод на одну секунду, а потім вимикає на одну секунду кілька разів. Світлодіод повідомляє нам, що м’який працює нормально!
Зразок має дві сторінки. Сторінка1 — це форма, сторінка2 — колір!
Цей приклад коду знаходиться у файлі frank. 20210625
*/
// Штифт 13 має світлодіод, підключений на більшості плат Arduino.
// дайте йому назву:
int led = 13;
int iYePian = 0; //0x0020 для числа YePian!
//int iGongLu = 0; //0x0180 для The GongLu!
//int iLiuLiang = 0; //0x0160 для The Now LiuLiang!
int iJiao = 0; // 0x0260 для The JieJuJiao!
int iGongLuWater = 0; //0x0280 для The Water GongLu! значення 0-50000!
int iLed = 1; //Час затримки num.
int iLed2 = 1; //Час затримки num. 50 мс роблять точку.
int iLed3 = 0; //Час затримки num. 50 мс роблять точку.
int iLed4 = 0; //Час затримки num. 50 мс роблять точку.
int iCurve0 = 0; //Значення кривої0. 50 мс роблять точку.
int iCurve1 = 0; //Значення кривої1,. 50 мс роблять точку.
int iFlag0 = 1; // Прапор кривої0 + або -; .1 вгору, 0 – вниз.
int iFlag1 = 1; // Прапор кривої1 + або -; .1 вгору, 0 – вниз.
int iNum = 0 ; //читати в char num.
int iNum2 = 0; //прочитати в char num2 для ShuiDianZhan!
//int iPower = 2; //Статуя ключа 0x0009
//int iMode = 2; //Статуя ключа 0x000A
int iPowerWater = 2; //Статуя ключа 0x0039
// процедура налаштування запускається один раз, коли ви натискаєте reset:
void setup () {
// ініціалізуємо цифровий штифт як вихід.
pinMode (світлодіод, OUTPUT);
Serial.begin(115200); // Відкрийте функцію послідовного зв'язку та дочекайтеся відкриття послідовного порту
while (!Serial) {
; // дочекатися підключення послідовного порту. Потрібний лише Леонардо
}
}
// циклова процедура виконується знову і знову назавжди:
void loop () {
int inChar;
/*———————————————————————————*/
якщо (iLed == 800) {
//——- прочитати значення 0x0039———-
Serial.write(0xA5); //”A5″ дорівнює 165
Serial.write(0x5A); //”5A” дорівнює 90
Serial.write(0x04); //довжина
Serial.write(0x83); // читай!
Serial.write(0x00); // адреса ключа живлення ShuiDianZhan!
Serial.write(0x39); // адреса ключа живлення ShuiDianZhan!
Serial.write(0x01); // 0x0039 (клавіша живлення)
//———Повернутим значенням STONE буде «A5 5A 06 83 00 39 01 00 01»——
}
// Читаємо інформацію, надіслану через послідовний порт:
if (Serial.available() > 0) { inChar = Serial.read(); }
/*
зберегти бак.
тому що може мати ключ читання та мати роботу ключа.
Програма являє собою HMI, ключ введення якого виконує певну роботу.
*/
//—————————————————————————————
//—————————-0x0039 початок читання ключа—————————————
if (inChar == 0x39) { iNum2 = 1 ; }
if ((inChar == 0x01)&&(iNum2 == 1)) { iNum2 = 2 ; }
if ((inChar == 0x00)&&(iNum2 == 2)) { iNum2 = 3 ; }
якщо ((inChar == 0x01)&&(iNum2 == 3)) {
iNum2 = 0;
if(iPowerWater != 1){
iPowerWater = 1; // Увімкніть живлення!
iJiao = 0;
iGongLuWater = 0;
}
}
якщо ((inChar == 0x02)&&(iNum2 == 3)) {
iNum2 = 0;
iPowerWater = 2; // живлення ВИМКНЕНО!
}
//——————0x0039 ключ читання нормально! iPowerWater добре!——————————
//—————————————————————————————
delay (1);
iLed += 1;
iLed2 += 1; // 50 мс робить точку.
//————————————————————————————————
//———————————50 мс починається точка——————————————
якщо (iLed2 == 50) {
iLed2 = 1;
iLed4 += 1; // 50 мс робить точку.
if(iFlag0 == 1){
iCurve0 += 1; // 50 мс робить точку.
if(iCurve0 >= 150){
iFlag0 = 0; // Поворот iCurve0!.
}
}
if(iFlag0 == 0){
iCurve0 -= 1; // 50 мс робить точку.
if(iCurve0 <= 1){
iFlag0 = 1; // З'являється iCurve0!.
}
}
if(iFlag1 == 1){
if(iLed4 >= 3){
iCurve1 += 1; // 50 мс робить точку.
iLed4 = 0;
}
if(iCurve1 >= 50){
iFlag1 = 0; // Поворот iCurve1!.
}
}
if(iFlag1 == 0){
if(iLed4 >= 3){
iLed4 = 0;
iCurve1 -= 1; // 50 мс робить точку.
}
if(iCurve1 <= 1){
iFlag1 = 1; // З'являється iCurve1!.
}
}
Serial.write(0xA5); //”A5″ дорівнює 165
Serial.write(0x5A); //”5A” дорівнює 90
Serial.write(0x06);
Serial.write(0x84); //записати до кривої!
Serial.write(0x03); // Шлях кривої,
Serial.write(iCurve0); // N=1,
Serial.write(0x00);
Serial.write(iCurve1);
Serial.write(0x00);
}
//———————————50 мс до кінця——————————————
//————————————————————————————————
якщо (iLed == 500) {
digitalWrite(LED, HIGH); // увімкнути світлодіод (ВИСОКИЙ - це рівень напруги)
//затримка(500); // зачекайте секунду, діапазон: 200-2000
}
якщо (iLed >= 1000) {
digitalWrite(LED, LOW); // вимкнути світлодіод, зробивши напругу НИЗЬКИМ
//затримка(500); // зачекайте секунду, діапазон: 200-2000
iLed = 1;
if( iNum <= 6 ) iNum += 1; //поворот форми!
if( iNum == 6 ) iNum = 0; //поворот форми!
//————————————————————————————————————————————————
if( iNum == 1){ // трикутник! і червоний!
Serial.write(0xA5); //”A5″ дорівнює 165
Serial.write(0x5A); //”5A” дорівнює 90
Serial.write(0x19);
Serial.write(0x82);
Serial.write(0x10); // адреса H базової графіки
Serial.write(0x00); // адреса базової графіки
Serial.write(0x00); // Робимо рядок CMD
Serial.write(0x02); // Робимо рядок CMD
Serial.write(0x00); // номер рядка
Serial.write(0x03); // Номер рядка.
Serial.write(0x00); //колірH чорний
Serial.write(0x00); //colorL
Serial.write(0x00); // точка X1H
Serial.write(0xc8); // точка X1L
Serial.write(0x00); // точка Y1H
Serial.write(0xc8); // точка Y1L
Serial.write(0x01); // точка X2H
Serial.write(0x2C); // точка X2L.
Serial.write(0x00); // точка Y2H
Serial.write(0xC8); // точка Y2L
Serial.write(0x00); // точка X3H
Serial.write(0xFA); // точка X3L
Serial.write(0x00); // точка Y3H
Serial.write(0x64); // точка Y3L
Serial.write(0x00); // точка X1H
Serial.write(0xc8); // точка X1L
Serial.write(0x00); // точка Y1H
Serial.write(0xc8); // точка Y1L
//заповнити—–
Serial.write(0xA5); //”A5″ дорівнює 165
Serial.write(0x5A); //”5A” дорівнює 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x60); // адреса H базової графічної сторінки2
Serial.write(0x00); // addressL базової графіки pabe2
Serial.write(0x00); // Заливка прямокутника CMD
Serial.write(0x04); // Заливка прямокутника CMD
Serial.write(0x00); // номер прямокутника
Serial.write(0x01); // Номер прямокутника
Serial.write(0x00); // точка X1H
Serial.write(0x0A); // точка X1L
Serial.write(0x00); // точка Y1H
Serial.write(0x50); // точка Y1L
Serial.write(0x02); // точка X2H
Serial.write(0x76); // точка X2L.
Serial.write(0x01); // точка Y2H
Serial.write(0x90); // точка Y2L
Serial.write(0xF0); // Червоний колірH
Serial.write(0x00); // Червоний колірЛ
}
//——————————————Червоний кінець———————————————
//—————————————— Жовтий і дуга починають———————————————
if( iNum == 2){ // дуга! і жовтий!
Serial.write(0xA5); //”A5″ дорівнює 165
Serial.write(0x5A); //”5A” дорівнює 90
Serial.write(0x13);
Serial.write(0x82);
Serial.write(0x10); // адреса H базової графічної сторінки1
Serial.write(0x00); // addressL базової графіки pabe1
Serial.write(0x00); // Зробити дугу CMD
Serial.write(0x0B); // Зробити дугу CMD
Serial.write(0x00); // номер дуги
Serial.write(0x01); // Номер дуги.
Serial.write(0x00); // колірH чорний
Serial.write(0x00); // colorL blank
Serial.write(0x01); // центр кола XH
Serial.write(0x2c); // центр кола XL
Serial.write(0x00); // центр кола YH
Serial.write(0xc8); // центр кола YL
Serial.write(0x00); // RH
Serial.write(0x50); // RL.
Serial.write(0x02); // Кут1H
Serial.write(0x76); // Кут1L
Serial.write(0x00); // Кут2H
Serial.write(0x5A); // Кут2L
//заповнити—–
Serial.write(0xA5); //”A5″ дорівнює 165
Serial.write(0x5A); //”5A” дорівнює 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x60); // адреса H базової графічної сторінки2
Serial.write(0x00); // addressL базової графіки pabe2
Serial.write(0x00); // Заливка прямокутника CMD
Serial.write(0x04); // Заливка прямокутника CMD
Serial.write(0x00); // номер прямокутника
Serial.write(0x01); // Номер прямокутника
Serial.write(0x00); // точка X1H
Serial.write(0x0A); // точка X1L
Serial.write(0x00); // точка Y1H
Serial.write(0x50); // точка Y1L
Serial.write(0x02); // точка X2H
Serial.write(0x76); // точка X2L.
Serial.write(0x01); // точка Y2H
Serial.write(0x90); // точка Y2L
Serial.write(0xFF); // Жовтий колірH
Serial.write(0x60); // Жовтий колірЛ
}
//—————————————— Жовтий і дуга кінець——————————————
//—————————————— Зелений і прямокутник починаються———————————————
if( iNum == 3){ // прямокутник! і зелений!
Serial.write(0xA5); //”A5″ дорівнює 165
Serial.write(0x5A); //”5A” дорівнює 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x10); // адреса H базової графічної сторінки1
Serial.write(0x00); // addressL базової графіки pabe1
Serial.write(0x00); // Робимо прямокутник CMD
Serial.write(0x03); // Робимо прямокутник CMD
Serial.write(0x00); // номер прямокутника
Serial.write(0x01); // Номер прямокутника
Serial.write(0x01); // точка X1H
Serial.write(0x54); // точка X1L
Serial.write(0x00); // точка Y1H
Serial.write(0xED); // точка Y1L
Serial.write(0x02); // точка X2H
Serial.write(0x49); // точка X2L.
Serial.write(0x01); // точка Y2H
Serial.write(0x54); // точка Y2L
Serial.write(0x00); // колірH чорний
Serial.write(0x00); // colorL blank
//заповнити—–
Serial.write(0xA5); //”A5″ дорівнює 165
Serial.write(0x5A); //”5A” дорівнює 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x60); // адреса H базової графічної сторінки2
Serial.write(0x00); // addressL базової графіки pabe2
Serial.write(0x00); // Заливка прямокутника CMD
Serial.write(0x04); // Заливка прямокутника CMD
Serial.write(0x00); // номер прямокутника
Serial.write(0x01); // Номер прямокутника
Serial.write(0x00); // точка X1H
Serial.write(0x0A); // точка X1L
Serial.write(0x00); // точка Y1H
Serial.write(0x50); // точка Y1L
Serial.write(0x02); // точка X2H
Serial.write(0x76); // точка X2L.
Serial.write(0x01); // точка Y2H
Serial.write(0x90); // точка Y2L
Serial.write(0x2F); // Зелений колірH
Serial.write(0x60); // Зелений колірЛ
}
//—————————————— Зелений і прямокутник — кінець——————————————
//—————————————— Апельсин і квадрат починаються——————————————
if( iNum == 4){ // квадрат! і апельсин!
Serial.write(0xA5); //”A5″ дорівнює 165
Serial.write(0x5A); //”5A” дорівнює 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x10); // адреса H базової графічної сторінки1
Serial.write(0x00); // addressL базової графіки pabe1
Serial.write(0x00); // Робимо прямокутник CMD
Serial.write(0x03); // Робимо прямокутник CMD
Serial.write(0x00); // номер прямокутника
Serial.write(0x01); // Номер прямокутника
Serial.write(0x01); // точка X1H
Serial.write(0x54); // точка X1L
Serial.write(0x00); // точка Y1H
Serial.write(0x91); // точка Y1L
Serial.write(0x02); // точка X2H
Serial.write(0x49); // точка X2L.
Serial.write(0x01); // точка Y2H
Serial.write(0x86); // точка Y2L
Serial.write(0x00); // колірH чорний
Serial.write(0x00); // colorL blank
//заповнити—–
Serial.write(0xA5); //”A5″ дорівнює 165
Serial.write(0x5A); //”5A” дорівнює 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x60); // адреса H базової графічної сторінки2
Serial.write(0x00); // addressL базової графіки pabe2
Serial.write(0x00); // Заливка прямокутника CMD
Serial.write(0x04); // Заливка прямокутника CMD
Serial.write(0x00); // номер прямокутника
Serial.write(0x01); // Номер прямокутника
Serial.write(0x00); // точка X1H
Serial.write(0x0A); // точка X1L
Serial.write(0x00); // точка Y1H
Serial.write(0x50); // точка Y1L
Serial.write(0x02); // точка X2H
Serial.write(0x76); // точка X2L.
Serial.write(0x01); // точка Y2H
Serial.write(0x90); // точка Y2L
Serial.write(0xFD); // оранжевий колірH
Serial.write(0x60); // оранжевий колірL
}
//——————————————Апельсин і квадрат кінець——————————————
//——————————————Синій колір і коло починається——————————————
if( iNum == 5){ // коло! і синій!
Serial.write(0xA5); //”A5″ дорівнює 165
Serial.write(0x5A); //”5A” дорівнює 90
Serial.write(0x0F);
Serial.write(0x82);
Serial.write(0x10); // адреса H базової графічної сторінки1
Serial.write(0x00); // addressL базової графіки pabe1
Serial.write(0x00); // Робимо коло CMD
Serial.write(0x05); // Робимо коло CMD
Serial.write(0x00); // номер кола
Serial.write(0x01); // Номер кола
Serial.write(0x01); // центр кола XH
Serial.write(0xD6); // центр кола XL
Serial.write(0x00); // центр кола YH
Serial.write(0xc8); // центр кола YL
Serial.write(0x00); // RH
Serial.write(0x32); // RL.
Serial.write(0x00); // колірH чорний
Serial.write(0x00); // colorL blank
//заповнити—–
Serial.write(0xA5); //”A5″ дорівнює 165
Serial.write(0x5A); //”5A” дорівнює 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x60); // адреса H базової графічної сторінки2
Serial.write(0x00); // addressL базової графіки pabe2
Serial.write(0x00); // Заливка прямокутника CMD
Serial.write(0x04); // Заливка прямокутника CMD
Serial.write(0x00); // номер прямокутника
Serial.write(0x01); // Номер прямокутника
Serial.write(0x00); // точка X1H
Serial.write(0x0A); // точка X1L
Serial.write(0x00); // точка Y1H
Serial.write(0x50); // точка Y1L
Serial.write(0x02); // точка X2H
Serial.write(0x76); // точка X2L.
Serial.write(0x01); // точка Y2H
Serial.write(0x90); // точка Y2L
Serial.write(0x00); // синій колірH
Serial.write(0xFF); // синій колірL
}
//——————————————Синій колір і коло кінець——————————————
Нарешті, онлайн-налагодження.
STONE TOOLBox (програмне забезпечення GUI Design) редагує завантаження файлу екрана, завантажує файл коду arduino, підключає джерело живлення, зв’язок, увімкне живлення, щоб спостерігати за малюнком зображення та зміною кольору, щоб досягти бажаного ефекту.
Код, показаний у відео, виглядає наступним чином.
(спроби онлайн-налаштувань)
Джерело: Інформація про дані Платона