Классные часы M5StickC с меню и регулировкой яркости: 8 шагов

2025 Автор: John Day | [email protected]. Последнее изменение: 2025-01-13 06:58

В этом руководстве мы узнаем, как запрограммировать ESP32 M5Stack StickC с Arduino IDE и Visuino для отображения времени на ЖК-дисплее, а также установить время и яркость с помощью меню и кнопок StickC.

Посмотрите демонстрационное видео.

Шаг 1. Что вам понадобится

M5StickC ESP32: вы можете получить его здесь

Программа Visuino: Скачать Visuino

Примечание. Ознакомьтесь с этим руководством по установке платы StickC ESP32.

Шаг 2. Запустите Visuino и выберите тип платы M5 Stack Stick C

Запустите Visuino, как показано на первом рисунке. Нажмите кнопку «Инструменты» на компоненте Arduino (рисунок 1) в Visuino. Когда появится диалоговое окно, выберите «M5 Stack Stick C», как показано на рисунке 2.

Шаг 3. В Visuino установите доску StickC

1. Нажмите на доску «M5 Stack Stick C», чтобы выбрать ее.
2. В окне «Свойства» выберите «Модули» и нажмите «+», чтобы развернуть,
3. Выберите «Display ST7735» и нажмите «+», чтобы развернуть его,
4. Установите "Ориентация" на "goRight"
5. Установите "Цвет фона" на "ClBlack"
6. Выберите «Элементы» и нажмите синюю кнопку с 3 точками…
7. В диалоговом окне "Элементы" отобразится
8. В диалоговом окне «Элементы» перетащите два раза «Текстовое поле» справа налево.
9. Щелкните «Текстовое поле1» слева, чтобы выбрать его, затем в «окне свойств» щелкните «Цвет» и установите для него значение «aclOrange», затем щелкните «Цвет заливки» и установите для него значение «aclBlack» (вы можете поиграть с цветами, если хотите) - также в окнах свойств установите X: 10 и Y: 20, здесь вы хотите отображать время на ЖК-дисплее. Размер набора: 3 (это размер шрифта времени)
10. Щелкните «Текстовое поле2» слева, чтобы выбрать его, затем в «окне свойств» щелкните «Цвет» и установите для него значение «aclAqua», затем щелкните «Цвет заливки» и установите для него значение «aclBlack».

(Вы можете поиграть с цветами, если хотите) -установите "Начальное значение" на: Установите ЧАС

-также в окнах свойств установите X: 10 и Y: 2, здесь вы хотите отображать меню на ЖК-дисплее -set size: 1 (это размер шрифта меню)

Закройте окно элементов

1. Нажмите на доску «M5 Stack Stick C», чтобы выбрать ее.
2. В окне «Свойства» выберите «Модули» и нажмите «+», чтобы развернуть,
3. Выберите «Отображать будильник в реальном времени (RTC)» и нажмите «+», чтобы развернуть его,
4. Выберите «Элементы» и нажмите синюю кнопку с 3 точками…
5. В диалоговом окне «Элементы» перетащите «Установить час» с правой стороны на левую и в окне свойств установите «Добавить значение» на: Истина и «Значение» на: 1
6. В диалоговом окне «Элементы» перетащите «Установить минуту» с правой стороны на левую и в окне свойств установите «Добавить значение» на: Истина и «Значение» на: 1
7. В диалоговом окне «Элементы» перетащите «Set Second» с правой стороны на левую и в окне свойств установите «Add Value» на: True и «Value» на: 1

Закройте окно элементов

Шаг 4: Добавьте компоненты в Visuino

1. Добавьте 2x компонента "Debounce Button"
2. Добавить компонент "Кнопка автоповтора"
3. Добавить компонент "Текстовый массив"
4. Добавить компонент "Аналоговый массив"
5. Добавьте 2x компонента "Счетчик"
6. Добавить компонент "Clock Demux (переключатель каналов с несколькими выходами)"
7. Добавить компонент "Декодировать (разделить) дату / время"
8. Добавить компонент "FormattedText1"

Шаг 5: Компоненты набора Visuino

1. Выберите компонент «FormattedText1» и в окне «Свойства» установите для параметра «Текст» значение:% 0:% 1:% 2
2. Дважды щелкните компонент «FormattedText1» и в диалоговом окне «Элементы» перетащите 3 раза «Текстовый элемент» влево.
3. Выберите "TextElement1" слева и в окне свойств установите "Fill Character" на: 0 и "Length" на: 2.
4. Выберите "TextElement2" слева и в окне свойств установите "Fill Character" на: 0 и "Length" на: 2.
5. Выберите "TextElement3" слева и в окне свойств установите "Fill Character" на: 0 и "Length" на: 2.
6. Выберите компонент "ClockDemmux1" и в окне свойств установите "Output Pins" на: 5
7. Выберите компонент «Счетчик1» и в окне свойств разверните «Макс» и установите «Значение» на: 4
8. Выберите компонент «Счетчик1» и в окне свойств разверните «Мин» и установите «Значение» на: 0
9. Выберите компонент «Counter2» и в окне свойств разверните «Max» и установите «Value» на: 6
10. Выберите компонент «Counter2» и в окне свойств разверните «Min» и установите «Value» на: 0 СОЗДАНИЕ МЕНЮ:
11. Выберите компонент «Array1» (Текстовый массив) и дважды щелкните по нему. - В окне элементов перетащите 4X «Значение» в левую сторону - С левой стороны выберите «Элемент [1]» и в окне свойств установите «Значение» чтобы: УСТАНОВИТЬ ЧАСЫ - С левой стороны выберите «Элемент [2]» и в окне свойств установите «Значение» на: УСТАНОВИТЬ МИНУТЫ - С левой стороны выберите «Элемент [3]» и в окне свойств установите «Значение» на: УСТАНОВИТЬ СЕКУНДЫ - С левой стороны выберите «Элемент [4]» и в окне свойств установите «Значение» на: УСТАНОВИТЬ ЯРКОСТЬS Закройте окно «Элементы». УСТАНОВКА ЗНАЧЕНИЙ ЯРКОСТИ:

12. Выберите компонент «Array2» (Аналоговый массив) и дважды щелкните по нему. - В окне элементов перетащите 6X «Значение» в левую сторону - С левой стороны выберите «Элемент [0]» и в окне свойств установите «Значение» кому: 1

    -Слева выберите «Элемент [1]» и в окне свойств установите «Значение» на: 0,9.

    -Слева выберите «Элемент [2]» и в окне свойств установите «Значение» на: 0,8 -Слева выберите «Элемент [3]» и в окне свойств установите «Значение» на: 0,7-Вкл. С левой стороны выберите «Элемент [4]» и в окне свойств установите «Значение» на: 0,6 - С левой стороны выберите «Элемент [5]» и в окне свойств установите «Значение» на: 0,55

Шаг 6. В компонентах Visuino Connect

1. Подключите контакт A (M5) «M5 Stack Stick C» к контакту «Button2» [In]
2. Подключите контакт «M5 Stack Stick C» [B] к контакту «Button1» [In]
3. Подключите контакт «Button2» [Out] к контакту «RepeatButton1» [In]
4. Подключите вывод «RepeatButton1» [Out] к выводу «ClockDemmux1» [In]
5. Подключите вывод «Button1» [Out] к выводу «Counter1» [In]
6. Подключите «M5 Stack Stick C»> контакт «Будильник реального времени (RTC)» [Out] к контакту «DecodeDateTime1» [In]
7. Подключите вывод «DecodeDateTime1» [Hour] к «FormattedText1»> «TextElement1» [In]
8. Подключите вывод «DecodeDateTime1» [минута] к выводу «FormattedText1»> «TextElement2» [In]
9. Подключите контакт «DecodeDateTime1» [Second] к контакту «FormattedText1»> «TextElement3» [In]
10. Подключите вывод «FormattedText1» [Out] к плате «M5 Stack Stick C»> «Display ST7735»> «Текстовое поле1» [In]
11. Подключите вывод «Counter1» [Out] к выводу «ClockDemmux1» [Select] и к выводу «Array1» [Index]
12. Подключите вывод «Counter2» [Out] к выводу «Array2» [Index]
13. Подключите вывод «Array1» [Out] к плате «M5 Stack Stick C»> «Display ST7735»> «Текстовое поле2» [In]
14. Подключите контакт «Array2» [Out] к плате «M5 Stack Stick C»> «Display ST7735»> контакт [Яркость]
15. Подключите контакт «ClockDemmux1» [1] к плате «M5 Stack Stick C»> «Будильник в реальном времени (RTC)»> «Установить час1» [Часы]
16. Подключите контакт «ClockDemmux1» [2] к плате «M5 Stack Stick C»> «Будильник в реальном времени (RTC)»> «Установить минуту1» [Clock]
17. Подключите контакт «ClockDemmux1» [3] к плате «M5 Stack Stick C»> «Будильник в реальном времени (RTC)»> «Set Second1» контакт [Clock]
18. Подключите контакт «ClockDemmux1» [4] к контакту «Counter2» [In]

Шаг 7: сгенерируйте, скомпилируйте и загрузите код Arduino

В Visuino внизу щелкните вкладку «Сборка», убедитесь, что выбран правильный порт, затем нажмите кнопку «Скомпилировать / построить и загрузить».

Шаг 8: Играйте

Если вы включите модуль M5Sticks, дисплей должен начать показывать время. Вы можете изменить время и яркость, используя кнопки «B» для отображения меню и переключения между (Установить часы, Установить минуты, Установить секунды, Установить яркость) и использовать кнопку «M5» для настройки.

Поздравляю! Вы завершили свой проект M5Sticks с Visuino. Также прилагается проект Visuino, который я создал для этого руководства, вы можете скачать его здесь. Вы можете скачать и открыть его в Visuino: