Arduino-tex.ru

Визуальное создание интерфейсов для OLED дисплеев на базе GyverOLED от Arduino-tex.ru.

Любой ардуинщик, хоть раз создававший интерфейс для OLED дисплея, знает эту боль. Вы пишете oled.setCursor(10, 20), загружаете прошивку, смотрите на экран — криво. Меняете на (12, 20), снова компилируете, снова загружаете. Это бесконечный процесс подбора координат, который убивает творчество и тратит драгоценное время.

Решение этой проблемы найдено командой Arduino-tex.ru. Мы представляем бесплатный визуальный редактор (OLED редактор), который позволяет нарисовать интерфейс мышкой и получить готовый, оптимизированный C++ код.

Решение этой проблемы найдено командой Arduino-tex.ru. Мы представляем бесплатный визуальный редактор (OLED редактор)

Фундаментом для проекта послужила библиотека GyverOLED от Алекса Гайвера. Она выбрана не случайно: это одна из самых легких библиотек, обладающая отличной поддержкой кириллицы и гибкой работой с буфером дисплея.


Где скачать?

Программа является бесплатной и распространяется по принципу "как есть". Автор редактора не несет ответственности за возможные сбои, а все права на используемую библиотеку GyverOLED принадлежат Алексу Гайверу.

Скачать OLED Редактор на «Бусти».

Подготовка к работе: Библиотека и Железо.

Прежде чем запускать редактор, необходимо подготовить среду Arduino IDE.

Библиотека GyverOLED.

Редактор генерирует код, заточенный именно под эту библиотеку. Она работает напрямую с буфером экрана, что позволяет создавать плавную анимацию и сложные графические примитивы без мерцания.

Установка:

  1. Откройте Arduino IDE.
  2. Перейдите в Скетч -> Подключить библиотеку -> Управлять библиотеками.
  3. Введите в поиске GyverOLED.
  4. Нажмите Установить.

Библиотека GyverOLED.

Схемы подключения (I2C).

Программа поддерживает самые популярные микроконтроллеры. Подключение дисплеев SSD1306 или SSH1106 обычно осуществляется по шине I2C (всего 4 провода):

  • Arduino UNO / NANO:
    • SDA -> Pin A4
    • SCL -> Pin A5
    • VCC -> 5V
    • GND -> GNDArduino UNO / NANO
  • ESP8266 (NodeMCU / Wemos):
    • По умолчанию: SDA -> D2 (GPIO4), SCL -> D1 (GPIO5).ESP8266 (NodeMCU / Wemos)
  • ESP32:
    • По умолчанию: SDA -> GPIO 21, SCL -> GPIO 22ESP32

Важно! Можно использовать дисплей с spi интерфейсом. Для этого вручную настройте в коде работу с данным интерфейсом. Подробнее читайте в описании библиотеки GyverOLED.


Интерфейс OLED редактора: Рисуем, а не пишем код.

Интерфейс OLED редактора: Рисуем, а не пишем код.

Рабочая область:

  1. Слева: Панель инструментов и выбор компонентов.
  2. Центр: Виртуальный дисплей (эмуляция реального OLED экрана с увеличением x6 для точности).
  3. Справа: Свойства выбранного элемента (координаты, размеры, радиусы).

Инструментарий.

Инструментарий.

Вам доступны базовые примитивы, из которых строится дизайн:

  • Геометрия: Линии, прямоугольники (обычные и скругленные), круги.
  • Кривые Безье: Мощный инструмент для создания нестандартных плавных графиков и волн.
  • Текст: Полная поддержка русского языка. Текст в редакторе рендерится тем же пиксельным шрифтом, что и в библиотеке GyverOLED.
    Важно: При использовании инверсии текста или заливке экрана, библиотека GyverOLED имеет особенность: текст может выводиться с небольшими черными полосами сверху и снизу. Учитывайте это при дизайне черного текста на белом фоне.

Работа с изображениями.

Это одна из самых сильных сторон редактора. Вам больше не нужны сторонние сервисы для конвертации картинок в hex-коды.

Это одна из самых сильных сторон редактора. Вам больше не нужны сторонние сервисы для конвертации картинок в hex-коды.

  1. Встроенные иконки: В программу уже "вшиты" популярные наборы иконок 7x7 и 8x8 пикселей (батарейка, Wi-Fi, уведомления и т.д.). Вы просто выбираете их из списка.Встроенные иконки: В программу уже "вшиты" популярные наборы иконок 7x7 и 8x8 пикселей
  2. Конвертер изображений: Вы можете загрузить свою картинку (PNG/JPG). Встроенный алгоритм поможет настроить пороговое значение (threshold) для превращения цветной картинки в черно-белый битовый массив. Редактор автоматически сгенерирует массив PROGMEM и добавит его в код.

Конвертер изображений: Вы можете загрузить свою картинку (PNG/JPG)

Настройка проекта.

Перед началом работы или экспортом в правой панели или вкладке "Настройки" можно задать параметры целевой системы:

Настройка проекта.

  • Контроллер: Arduino UNO/Nano, ESP8266 или ESP32 (это влияет на комментарии к пинам в коде).
  • Модель дисплея: 128x64 или 128x32. Размер виртуального холста изменится автоматически.
  • Заливка экрана: Опция позволяет начать проект с полностью "закрашенного" белого экрана (инвертированный интерфейс).
    Напоминание: Используйте осторожно, учитывая особенности вывода текста на сплошном фоне.
  • Сохранение: Проект можно сохранить в файл .json, чтобы вернуться к редактированию позже.

Сохранение: Проект можно сохранить в файл .json, чтобы вернуться к редактированию позже.

Экспорт и Структура полученного кода.

После того как макет готов, нажмите кнопку Экспорт кода (.ino).

После того как макет готов, нажмите кнопку "Экспорт кода (.ino)". Программа сгенерирует готовый скетч. 

/* OLED редактор от Arduino-tex.ru */
/* Установите библиотеку GyverOLED, через менеджер библиотек */
#include <GyverOLED.h>
//#include "icons_7x7.h" //Раскоментируйте если использует иконик из стандартного набора 7x7
#include "icons_8x8.h"  //Раскоментируйте если использует иконик из стандартного набора 8x8

// --- Custom Bitmaps ---
const uint8_t custom_icon[] PROGMEM = {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xfe,0xfe,0x06,0x06,0xc6,0xc6,0x06,0x06,0xfe,0xfe,0xc6,0xc6,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xff,0xff,0x00,0x00,0xff,0xff,0x00,0x00,0xff,0xff,0x18,0x18,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xfc,0xfe,0x07,0x03,0x01,0xf0,0xf8,0xff,0xff,0xf8,0xf0,0x01,0x03,0x07,0xfe,0xfc,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x03,0x0f,0x1c,0x18,0x30,0x31,0x61,0x63,0x63,0x61,0x31,0x30,0x18,0x1c,0x0f,0x03,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00};
GyverOLED<SSD1306_128x64, OLED_BUFFER> oled;

void setup() {
  Serial.begin(115200);
  // ESP32: Default Pins (21 SDA, 22 SCL)
  // ESP8266: D1(SCL), D2(SDA)
  oled.init();
  oled.clear();
  delay(500);
  drawInterface();  // Функция отрисовки интерфейса
}

// --- Функция отрисовки интерфейса ---
void drawInterface() {
  oled.clear();
  oled.invertText(false);
  oled.setScale(2);
  oled.setCursorXY(4, 2);
  oled.print("12:36");
  oled.invertText(false);
  oled.setScale(2);
  oled.setCursorXY(87, 4);
  oled.print("30");
  oled.invertText(false);
  oled.setScale(4);
  oled.setCursorXY(13, 29);
  oled.print("30");
  oled.drawBitmap(65, 27, icons_8x8[86], 8, 8);
  oled.drawBitmap(67, 2, icons_8x8[5], 8, 8);
  oled.invertText(false);
  oled.setScale(2);
  oled.setCursorXY(88, 25);
  oled.print("59");
  oled.invertText(false);
  oled.setScale(2);
  oled.setCursorXY(87, 46);
  oled.print("39");
  oled.line(81, 1, 81, 61, 1);
  oled.drawBitmap(114, 1, icons_8x8[42], 8, 8);
  oled.drawBitmap(114, 21, icons_8x8[42], 8, 8);
  oled.drawBitmap(114, 40, icons_8x8[42], 8, 8);
  oled.drawBitmap(114, 11, icons_8x8[5], 8, 8);
  oled.drawBitmap(115, 31, icons_8x8[5], 8, 8);
  oled.drawBitmap(114, 53, icons_8x8[87], 8, 8);
  oled.update();
  Serial.println("OLED start");
}
// --- Конец функции отрисовки ---

void loop() {
  delay(50);  // Основной цикл пустой, сделаем небольшую задержку
}

Что внутри сгенерированного файла:

  1. Подключение библиотек: Автоматически добавляется #include <GyverOLED.h>.
  2. Массивы графики: Все ваши кастомные иконки конвертируются в массивы байтов const uint8_t ... PROGMEM.
  3. Setup: Инициализация дисплея (oled.init(), oled.clear()).
  4. Функция void drawInterface(): Это ядро, созданное редактором. Внутри этой функции собраны все команды отрисовки (oled.line, oled.rect, oled.print, oled.drawBitmap), которые воссоздают ваш статический дизайн.

Функция void drawInterface(): Это ядро, созданное редактором.

Как оживить интерфейс? (Важно!)

Редактор создает дизайн (каркас) интерфейса. Он не знает, какая переменная у вас отвечает за температуру датчика, а какая за заряд батареи.

Как объединить дизайн и логику:

  1. Вызывайте функцию drawInterface() в setup() для отрисовки статических элементов (рамок, подписей, логотипов).
  2. В цикле loop() (или по таймеру) вы должны дописать вывод динамических данных поверх дизайна.

Пример: 

/* OLED редактор от Arduino-tex.ru */
/* Установите библиотеку GyverOLED, через менеджер библиотек */
#include <GyverOLED.h>
//#include "icons_7x7.h" //Раскоментируйте если использует иконик из стандартного набора 7x7
#include "icons_8x8.h"  //Раскоментируйте если использует иконик из стандартного набора 8x8

// Глобальные переменные
uint8_t set_temperatur = 20;  // Уставка температуры

// --- Custom Bitmaps ---
GyverOLED<SSD1306_128x64, OLED_BUFFER> oled;

void setup() {
  Serial.begin(115200);
  
  // Инициализация дисплея
  // ESP32: Default Pins (21 SDA, 22 SCL)
  // ESP8266: D1(SCL), D2(SDA)
  // Arduino Uno/Nano: A4(SDA), A5(SCL)
  oled.init();
  oled.clear();
  delay(500);
  drawInterface();  // Функция отрисовки интерфейса
}


// --- Функция отрисовки интерфейса (статические элементы) ---
void drawInterface() {
  oled.clear(); // Очищаем буфер полностью
  
  // Заголовок
  oled.invertText(false);
  oled.setScale(2);
  oled.setCursorXY(5, 2);
  oled.print("Меню Темп.");
  
  // Время (пример)
  oled.setCursorXY(3, 24);
  oled.print("12:36");
  
  // Значение 1
  oled.setCursorXY(4, 45);
  oled.print("30");
  // Текущая уставка (начальное значение)
  oled.setCursorXY(92, 24);
  oled.print(set_temperatur);
  // Значение 2
  oled.setCursorXY(92, 45);
  oled.print("39");
  
  // Иконки и линии
  oled.drawBitmap(117, 23, icons_8x8[86], 8, 8);
  oled.line(3, 18, 123, 18, 1);
  oled.drawBitmap(63, 23, icons_8x8[5], 8, 8);
  
  // Значение 3
  oled.setCursorXY(46, 45);
  oled.print("59");

  // Иконки и линии
  oled.line(85, 23, 85, 60, 1);
  oled.drawBitmap(28, 43, icons_8x8[42], 8, 8);
  oled.drawBitmap(70, 43, icons_8x8[42], 8, 8);
  oled.drawBitmap(116, 43, icons_8x8[42], 8, 8);
  
  oled.update(); // Выводим все нарисованное на экран
  Serial.println("OLED start");
}
// --- Конец функции отрисовки ---

void loop() {
  static uint32_t time_loop; // Переменная для таймера

  if (millis() - time_loop > 1000) {  // Ждем 1 сек. 

    // Логика изменения температуры
    if (set_temperatur < 99)
      set_temperatur++;
    else
      set_temperatur = 10;

    // Рисуем новое значение
    oled.invertText(false);
    oled.setScale(2);
    oled.setCursorXY(92, 24);
    oled.print(set_temperatur);
    // обновим на дисплее
    oled.update();

    time_loop = millis();  // Сбрасываем таймер
  }
}

Редактор также помогает определить с каким элементов мы работает.

Редактор также помогает определить с каким элементов мы работает.

Таким образом, редактор берет на себя 90% рутинной работы по верстке, оставляя вам только логику программы.

Таким образом, редактор берет на себя 90% рутинной работы по верстке, оставляя вам только логику программы.

Преимущества использования связки "Редактор + GyverOLED".

  1. Скорость: То, на что раньше уходил час подбора координат, делается за 5 минут мышкой.
  2. Чистый код: На выходе вы получаете не "спагетти", а структурированный файл с выделенными ресурсами памяти.
  3. Графика: Легкая вставка логотипов и сложных кривых без ручного пересчета байтов.
  4. Русский язык: Никаких проблем с кодировками ("кракозябрами"), текст отображается корректно сразу.

Инструмент от Arduino-tex.ru значительно снижает порог вхождения для новичков в работе с дисплеями и экономит часы времени для профессионалов. Вы рисуете — программа пишет код.

Где скачать?

Программа является бесплатной и распространяется по принципу "как есть". Автор редактора не несет ответственности за возможные сбои, а все права на используемую библиотеку GyverOLED принадлежат Алексу Гайверу.

Скачать OLED Редактор на «Бусти».

Создавайте красивые интерфейсы быстро!

Создавайте красивые интерфейсы быстро!


Понравилась статья Визуальное создание интерфейсов для OLED дисплеев на базе GyverOLED? Не забудь поделиться с друзьями в соц. сетях.

А также подписаться на наш канал на VK Видео, вступить в группу Вконтакте.

Спасибо за внимание!

Технологии начинаются с простого!

Фотографии к статье

Визуальный Редактор: Революция в Создании OLED Интерфейсов для Arduino
Прощайте, Координаты! Новый OLED Редактор от Arduino-tex.ru
GyverOLED + Визуальный Редактор: Идеальная Пара для OLED Интерфейсов
Рисуй и Программируй: Легкое Создание OLED Интерфейсов с Arduino
OLED Интерфейсы Стали Проще: Бесплатный Визуальный Редактор
От Идеи до Кода: Визуальный OLED Редактор для Arduino
10x Быстрее: Создание OLED Интерфейсов с Помощью Arduino-tex.ru
GyverOLED: Как Визуальный Редактор Ускоряет Работу с Дисплеями
Создавайте Сложные OLED Интерфейсы Без Боли и Страданий
Ваш OLED Дизайн Теперь Рисуется Мышкой: Представляем OLED Редактор
Arduino Hack: Ускоряем Разработку OLED Интерфейсов

Файлы для скачивания

Пример 1 - для программы Пример 1 - для программы.json12 Kb 29 Скачать
Пример 2 - для программы Пример 2 - для программы.json4 Kb 25 Скачать
Пример 2 - для программы Пример 2 - для программы.json5 Kb 30 Скачать
Пример кода 1: для arduino, ESP8266, ESP32 Пример кода 1: для arduino, ESP8266, ESP32.ino4 Kb 27 Скачать
Пример кода 2: для arduino, ESP8266, ESP32 Пример кода 2: для arduino, ESP8266, ESP32.ino2 Kb 22 Скачать
Пример кода 2 с счетчиком и изменением числа на дисплее Пример кода 2 с счетчиком и изменением числа на дисплее.ino3 Kb 24 Скачать

Комментарии

Ваше Имя*


.Визуальное создание интерфейсов для OLED дисплеев на базе GyverOLED от Arduino-tex.ru.

Статьи про Arduino
20 декабря , 2025
Комментариев:0
Файлов для скачивания:6
Фото:11
Понравилась статья? Нажми


Читайте также

Подсветка на ws2812, Arduino, Nextion.

Подсветка на ws2812, Arduino, Nextion.

Урок 2. Переменные. Изучаем Ардуино без Arduino.

Урок 2. Переменные. Изучаем Ардуино без Arduino.

Обновленная версия программы Easy HMI v0.0.6 и Easy HMI v0.0.6_1.

Обновленная версия программы Easy HMI v0.0.6 и Easy HMI v0.0.6_1.

Мы в соц сетях

Подпишись на канал Telegram
Разработка проектов
EasyHMI
Умный Дом