Подключение OLED дисплея SSD1306 к Wemos D1

Wemos D1 OLED 128x64

Сегодня мы научимся подключать популярный OLED дисплей на контроллере SSD1306 с разрешением 128x64 пикселей и диагональю 0.96 дюйма. В продаже существует несколько вариантов таких дисплеев с возможностью подключения по шинам SPI и I2C. Я использую вариант с I2C, как наиболее простой.

Соединим дисплей с нашей платой Wemos D1 следующим способом: VCC -> 3V3, GND -> GND, SCL -> D1, SDA -> D2.

Настройка IDE и первое включение

Теперь, необходимо добавить библиотеку для работы с этим дисплеем. В Arduino IDE открываем «Менеджер библиотек», «Скетч - Подключить библиотеку - Управлять библиотеками…».

Находим в списке библиотеку «ESP8266 Oled Driver for SSD1306 display» и устанавливаем её.

Давайте что-нибудь нарисуем на нашем дисплее. Откройте пример SSD1306SimpleDemo из меню «Файл - Примеры - ESP8266 and ESP32 Oled Draver for SSD1306 display».

Найдите в коде строчку инициализации дисплея, впишите I2C пины, к которым он подключён, в нашем случае это D2 и D1, и запустите пример.

Если всё сделано правильно, то вы увидите примерно следующую картину.

Это, конечно, всё очень здорово, но мы же хотим выводить на экран свой текст и картинки.

Кастомные шрифт и изображения

Создайте новый проект и добавьте в него две вкладки font.h и image.h, как вы наверно уже догадались, в них мы будем хранить изображение и шрифт.

Перейдите по ссылке http://oleddisplay.squix.ch/ и выберите какой-нибудь шрифт, у меня это будет Chewy, и нажмите кнопку «Create». Скопируйте код шрифта в файл font.h.

Теперь возьмите любую черно-белую картинку размером меньше 128х64 пикселей, и загрузите её в конвертер https://www.online-utility.org/image/convert/to/XBM, в результате он создаст текстовый файл, содержимое которого необходимо скопировать в файл image.h.

Основной код программы у нас будет таким:

#include "SSD1306.h"

#include "font.h"   // Файл с шрифтом
#include "image.h"  // Файл с картинкой

// Инициализируем дисплей подключенный к пинам D2 и D1
SSD1306  display(0x3c, D2, D1);

void setup() {
  // Первоначальные настройки дисплея
  display.init();
  display.flipScreenVertically();
  display.setFont(ArialMT_Plain_10);
}

void loop() {
  // create more fonts at http://oleddisplay.squix.ch/
  display.clear();                             // Очищаем экран от предыдущих данных
  display.setTextAlignment(TEXT_ALIGN_CENTER); // Выравниваем текст по центру
  display.setFont(Chewy_24);                   // Подключаем созданный нами шрифт
  display.drawString(64, 8, "ARDULOGIC");      // Первая строка в координаты 64 по оси X и 8 по оси Y
  display.drawString(64, 32, "2017");          // Вторая строка
  display.display();                           // Выводим все на экран
  delay(2000);

  // see http://blog.squix.org/2015/05/esp8266-nodemcu-how-to-create-xbm.html
  display.clear();
  display.drawXbm(26, 0, Volk_width, Volk_height, Volk_bits);  // Рисуем нашу картинку
  display.display();
  delay(2000);

  display.clear();
  display.setTextAlignment(TEXT_ALIGN_CENTER);
  display.setFont(ArialMT_Plain_24);            // Стандартный шрифт из библиотеки
  display.drawString(64, 8, "GT-VOLK");
  display.drawString(64, 32, "DRIVE2");
  display.display();
  delay(2000);
}

Запускаем скетч и любуемся результатом!

Скачать полную версию скетча: SSD1306Hello.zip