Розробка графічного сенсорного інтерфейсу

Розробка графічного сенсорного інтерфейсу

Короткий опис і призначення графічного сенсорного інтерфейсу

Ідеї ​​по розробці даної системи прийшли в голову ще при попередніх розробках різних систем управління в складі дослідних і навчальних стендів. Кожна наступна така система передбачала в своєму складі інтерфейс введення-виведення даних. При кожній наступній роботі було бажання ускладнити дані інтерфейс, зробити щось нове і досконале.

Починаючи з найпростіших семи сегментних індикаторів, з часом мої системи стали включати в себе рідкокристалічні символьні дисплеї з різним розширенням за кількістю рядків і символів, на яких реалізовувалося нескладне термінове меню. Пізніше також був реалізований свій програмний драйвер для швидкого створення меню користувача з різною кількістю пунктів і підпунктів для термінових дисплеїв з різноманітним розширенням.

Після цього було розпочато використання графічних дисплеїв - спочатку монохромних, а потім і кольорових з різноманітним розширенням. На таких дисплеях вже реалізовувалося не тільки термінове меню, але і різні варіанти графічного меню з іконками або комбінованого варіанту. Також в даному типі дисплеїв стало можливим виводити повідомлення вже в вигляді різних графічних зображень, наприклад повідомлення про помилку, зауваження, питання і т.д. Також часто потрібно реалізувати можливість перегляду тексту потрібного розміру, а також відображення різних зображень, заставок, графіків і т.п.

Також завжди хотілося вдосконалювати систему введення даних, починаючи від просто підключених одиничних кнопок. Згодом почав використовувати матричний підключення клавіатур, дистанційне керування через інфрачервоні приймачі, а також сенсорні кнопки, що реагують на дотик пальців.

Наступне завдання, яке захотілося реалізувати і в повній мірі розібратися в її технології - це використання сенсорного інтерфейсу в складі графічних рідкокристалічних дисплеїв з сенсорним екраном, що дало б можливість розробляти більш гнучкі і компактні системи, що включали б систему введення-виведення в одному елементі.

На сьогоднішній час є готові рішення для реалізації даного завдання, багато фірм випускають різноманітні налагоджувальні плати, що включають в себе графічний сенсорний дисплей з відповідною підтримкою програмним забезпеченням. Також доступні окремі GUI (Graphical User Interface) бібліотеки для різних контролерів, що реалізують поставлену задачу.

Після огляду деяких з готових рішень, з огляду на те, що використовувати якусь готову систему або програму не знаючи як вона реалізована - не завжди доцільно, для реалізації даного завдання було вирішено розробити повністю свій новий драйвер.

Задуманий програмний драйвер повинен передбачати такі можливості:

Можливість швидкого інтегрування його в нову програму;

Простим викликом заздалегідь відомого набору функцій створювати різноманітні графічні елементи введення-виведення інформації з завданням для кожного з них функції обробника подій;

Утримувати досить широкий набір різноманітних графічних елементів введення-виведення, таких як кнопки, повзунки, індикатори (цифрові і стрілочні), графіки і т.д .;

Можливість створення потрібної кількості сторінок або робочих столів зі своїм набором графічних елементів введення-виведення;

Можливість виведення текстових повідомлень завданням розміру і кольору шрифту.

Реалізована система графічного сенсорного інтерфейсу (далі інтерфейс) включає в себе всі вищеописані можливості, зображена на малюнку 1.

Розробка графічного сенсорного інтерфейсу

Малюнок 1. Система графічного сенсорного інтерфейсу

Опис конструкції і електричної частини плати управління сенсорного дисплея

Для реалізації даного інтерфейсу була використана отладочная плата STM32F4DISCOVERY, в основі якої лежить контролер STM32F407VGT6 від фірми STMicroelectronics. Дисплей моделі S95160 на основі контролера SSD1289. Контролер сенсорного екрану - XPT2046.

На несучої платі даного дисплея, з боку протилежної від останнього, також присутній сокета для SD карти, контакти якого підключені до загального джамперу на платі (малюнок 2).

Розробка графічного сенсорного інтерфейсу

Малюнок 2. Підключення сокети для SD карти

Максимальна споживана потужність даного дисплея становить 350 mW.

Короткий опис програмного забезпечення графічного сенсорного дисплея

Для розподілу завдань між програмою користувача і програмою-драйвером інтерфейсу використано операційну систему FreeRTOS. Дана операційна система реального часу дозволяє створювати потрібну кількість завдань в робочій програмі, задавати пріоритет виконання кожного завдання, створювати черги, тимчасові таймери, мютекси, семафори, проводити обмін даними між окремими завданнями. Її також можна використовувати на різних контролерах з різною архітектурою.

У зв'язку з наявністю сокети SD карти, в розроблену бібліотеку також був включений FAT драйвер. Останній дає можливість в повній мірі здійснювати різноманітні функції роботи з SD картою, такі як зчитування, створення і запис текстових файлів, прописування атрибутів для файлів, зчитування зображень і т.д.

Нижче наведено програмний приклад створення однієї сторінки інтерфейсу.

Приклад коду сторінки інтерфейсу

PageControl_TypeDef * Swich1 = CreateTwoStateSwich_Func (0. TWO_STATE_SWITCH_OFF. SWITCH_3_WIDTH. SWITCH_3_HEIGHT. SwitchOn_3. SwitchOff_3. Swich1_Click. TRUE. TRUE);

PageControl_TypeDef * Swich2 = CreateTwoStateSwich_Func (1. TWO_STATE_SWITCH_ON. SWITCH_3_WIDTH. SWITCH_3_HEIGHT. SwitchOn_3. SwitchOff_3. Swich2_Click. TRUE. TRUE);

PageControl_TypeDef * ArrowUp1 = CreateArrowUpDown_Func (2. CONTROL_TYPE_ARROW_UP. ArrowUp1_Click. TRUE. TRUE);

PageControl_TypeDef * ArrowDown1 = CreateArrowUpDown_Func (3. CONTROL_TYPE_ARROW_DOWN. ArrowDown1_Click. TRUE. TRUE);

PageControl_TypeDef * RButton1 = CreateRButton_Func (4. RBUTTON_UNCHECKED. "RadioButton1". LCD_BLACK. amp; Font8x12_Bold. RadioButton1_Click. 1. TRUE. TRUE);

PageControl_TypeDef * RButton2 = CreateRButton_Func (5. RBUTTON_CHECKED. "RadioButton2". LCD_BLACK. amp; Font8x12_Bold. RadioButton2_Click. 1. TRUE. TRUE);

PageControl_TypeDef * Label1 = CreateLabel_Func (6. "Counter: 50". LCD_BLACK. amp; Font8x12_Bold. TRUE. LCD_WHITE. TRUE);

PageControl_TypeDef * Button1 = CreateButton_Func (7. "NextPage". LCD_BLACK. amp; Font8x12_Bold. Button1_Click. TRUE. TRUE);

PageControl_TypeDef * Button2 = CreateButton_Func (8. "ShowGrph". LCD_BLACK. amp; Font8x12_Bold. Button2_Click. TRUE. TRUE);

PageControl_TypeDef * Termometer1 = CreateTermometer_Func (9. 198. 100. PressCounter. TRUE);

if (CreatePage_Func ( amp; Page1. "Page1". LCD_WHITE))

AddPageControl_Func (20. 10. Swich1. amp; Page1);

AddPageControl_Func (20. 45. Swich2. amp; Page1);

AddPageControl_Func (20. 195. ArrowUp1. amp; Page1);

AddPageControl_Func (20 + ARROW_UP_DOWN_WIDTH + 2. 195. ArrowDown1. amp; Page1);

AddPageControl_Func (20. 224. RButton1. amp; Page1);

AddPageControl_Func (20. 248. RButton2. amp; Page1);

AddPageControl_Func (72. 200. Label1. amp; Page1);

AddPageControl_Func (20. 275. Button1. amp; Page1);

AddPageControl_Func (110. 275. Button2. amp; Page1);

AddPageControl_Func (180. 20. Termometer1. amp; Page1);

Залежно від типу графічного елементу потрібно створити, кількість параметрів для його створення відрізняється. До загальних параметрів можна віднести ID елемента, константа-тип елемента, функція-обробник події дотику, можна задавати значення, відповідає за створення за замовчуванням пасивного або активного, а також відомого або невидимого елементу. Для текстових елементів додатково задається тип шрифту і колір.

На малюнках 3-4 показані приклади створення різних сторінок інтерфейсу, на малюнку 5 - відображення графіка з нанесенням двох кривих.

Розробка графічного сенсорного інтерфейсу

Малюнок 3. Приклад відображення сторінки графічного інтерфейсу

Розробка графічного сенсорного інтерфейсу

Малюнок 4. Приклад відображення сторінки графічного інтерфейсу

Розробка графічного сенсорного інтерфейсу

Малюнок 5. Відображення графіків

Для візуалізації натискання кнопки або зміни відображення будь-якого з перемикачів (стан включений / виключений) використовується два окремих графічних елемента, масиви кодів яких створюються окремо. Для візуалізації таких графічних елементів, як циферблати, повзунки, цифрові індикатори, ручки використовуються комбінований метод відображення по використанню, як готових графічних елементів елементів, так і тих геометричних елементів, створюваних динамічно, в залежності від потрібного положення.

Для генерації масиву для відображення графічних елементів раніше була розроблена спеціальна комп'ютерна програма, що дозволяє генерувати дані для відображення заданої картинки різноманітних монохромних і кольорових дисплеїв. На малюнках 6-7 показаний приклад генерації масиву кодів для зображення у форматі RGB.

Розробка графічного сенсорного інтерфейсу

Малюнок 6. Зовнішній вигляд комп'ютерної програми для генерації масиву кодів заданого зображення

Розробка графічного сенсорного інтерфейсу

Малюнок 7. Отриманий масив кодів заданого зображення

Застосування розробленої системи графічного сенсорного інтерфейсу

До моменту написання даної статті розроблена система графічного сенсорного інтерфейсу була застосована в складі закінчених пристроїв або лабораторних стендів.

Можливі сфери застосування - це різні прилади, стенди, потребують системі вводу-виводу інформації для управління різноманітними процесами, портативні пристрої або пульти управління і т.д.

Романов А.Ю. МІЕМ НДУ ВШЕ, НТУУ "КПІ".

Додаткова інформація по темі: