ElectroGuide

Управління сервоприводом за допомогою HMI LCD екрана та STM32

В цій статті ми розглянемо процес створення графічного інтерфейсу для HMI дисплея STONE, який управляється за допомогою послідовного інтерфейсу (UART), що дозволяє суттєво заощадити час і сили при розробці користувацького інтерфейсу для вашого пристрою. По суті, ви швидше малюєте інтерфейс, а не пишете код.

Отже, наскільки простий цей екран у використанні? Давайте розробимо інтерфейс дисплея для управління кутом повороту сервоприводу.

Використовуване обладнання:

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

Рисунок 1. Зображення дисплея без взаємодії з кнопками (зліва) та ефект натискання без масштабування (справа)

Таким чином, при натисканні позицій «+» або «-» буде відображатися друге зображення у відповідній позиції.

А тепер давайте детально розглянемо процес створення проекту.

Створення нового проекту

Для початку, давайте завантажимо і встановимо безкоштовне програмне забезпечення для проектування графічного інтерфейсу для дисплеїв STONE: https://www.stoneitech.com/support/download

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

Рисунок 2. Створення нового проекту

Другий етап – додаємо зображення

Зображення, необхідні для проекту додаємо в папку «Picture file». Ім'я зображення повинно починатися з цифри, але ніяких особливих вимог до номера немає. Розмір зображення повинен відповідати роздільній здатності вашого екрану, інакше з'явиться повідомлення про помилку.

Я додав два зображення, за замовчуванням відображається зображення з номером 2, тому мені необхідно змінити налаштування екрану всередині заставки, що відображається відповідно до номера зображення (див. Рисунок 4).

Рисунок 3. Додавання зображень

Рисунок 4. Налаштування параметрів екрану

В-третіх, давайте додамо зображення значків

Якщо у вашому проекті є різні типи файлів зображень, нам потрібно створити кілька папок .ico для зберігання різних типів зображень значків.

Рисунок 5. Додавання значків

В-четвертих, додаємо область сенсорної кнопки

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

Рисунок 6. Додавання області натискання клавіш

Далі додаємо елемент управління повзунком

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

Є й інші властивості елемента управління повзунком, які необхідно змінити: збережене положення буде відповідати «+» і «-» в поточному стані, а мінімальний масштаб і максимальний масштаб відповідають шкалі внизу.

Рисунок 7. Додавання повзунка

Наступний крок – додавання області регулювання перетаскиванням

У розкриваючому меню панелі інструментів виберіть настройку перетаскивання, щоб розташувати область. Для встановлення відповідного розміру, змініть його властивості: адреса сховища все ще відповідає зазначеному вище, необхідно відрегулювати діапазон максимальних і мінімальних значень.

Рисунок 8. Додавання області перетаскивання

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

Рисунок 9. Готовий графічний інтерфейс

 

Написання коду для STM32

Я використовував STM32Cube для генерації проекту. Налаштовуємо ШІМ на виході каналу tim2 ch1, мінімальна регулювання складає 1 мкс, це для точності, регулювання сервоприводу складає 0-270°, що відповідає імпульсу 0.5-2.5 мс. Вихідна частота ШІМ складає 100 кГц.

Відкрийте USART1, тут я використав DMA, в основному тому, що мені так зручніше і звичніше. На рисунку 10 показані знімки екрана з інформацією про конфігурацію, після завершення налаштування генеруємо код проекту.

 

Рисунок 10. Налаштування генератора проекту STM32Cube

Після завершення налаштування ми повинні додати код. Усе, що нам потрібно зробити, це додати масив і прапор прийому даних по послідовному порту. 

Додаємо функції ініціалізації перед безкінечним циклом while(1):

HAL_TIM_PWM_Start(&htim2,TIM_CHANNEL_1);
HAL_UART_Receive_DMA(&huart1,buff,20);
__HAL_UART_ENABLE_IT(&huart1,UART_IT_IDLE);

Якщо прапор прийому даних виставляється, то обробляємо цю подію.

if(__HAL_UART_GET_FLAG(&huart1,UART_FLAG_IDLE)==SET)
{
	__HAL_UART_CLEAR_IDLEFLAG(&huart1);
	UART_CLEAR_IDLEFLAG(&huart1); HAL_UART_DMAStop(&huart1);
	//HAL_UART_Transmit_DMA(&huart1,rx_buff,temp);
	HAL_UART_Receive_DMA(&huart1,buff,20); //HAL_UART_Receive_DMA(&huart1,buff,20);
	USART1_RX_STA=1;//прапор завершення прийому
}

Ну і так як у нас досить проста задача, то вирішуємо її в лоб. Дивимося на прийнятий проект і виставляємо відповідно до нього скважність вихідного ШІМ сигналу.

if(USART1_RX_STA==1)
{
	USART1_RX_STA=0;
	if ((buff[0]==0xa5)&&(buff[1]==0x5a))
	{
		data=(uint16_t)(buff[7]<<8|buff[8])*15/2+500;  __HAL_TIM_SET_COMPARE(&htim2,TIM_CHANNEL_1,data);//Змінюємо ШІМ частоту.
	}
	memset(buff,0,20);
}

Тепер ми можемо скомпілювати проект і прошити екран. Слід зазначити, що моя плата безпосередньо підключена до порту вводу-виїзду, тут на екрані паяні з'єднання J17, які необхідно пропаяти.

Рисунок 11. Паяні з'єднання

Як тільки все буде підключено, ми зможемо все включити і нарешті спробувати протестувати роботу пристрою. Я зробив кілька фото, для демонстрації того, як все працює!

    

Рисунок 12. Демонстрація роботи пристрою

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

Top