8 (800) 350-30-16

Подключение графического дисплея Nokia5110

Дата: / Категория: Дисплеи / Автор: DOC_tr

Сегодня мы разберем как подключается графический модуль Nokia5110 и научимся рисовать на нем всякие разные интересные фигуры. Если только вы умеете рисовать пиксель-арт, потому что в монохроме, да и на разрешении 84х48 пикселей, особо размахнуться негде.

Предупреждаю, под катом очень много кода. ОЧЕНЬ много. В основном место занимает описание пикселей на экране.

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

Первым делом подключаем наш экран по схеме на изображении:

Теперь выведем название сайта - https://ROBOM.ru

#include <Adafruit_GFX.h>
#include <Adafruit_PCD8544.h>

Adafruit_PCD8544 display = Adafruit_PCD8544(2, 3, 4, 5, 6);

void setup() {
Serial.begin(9600);
// Инициализируем наш дисплей
display.begin();
// Делаем его пустым
display.clearDisplay();
display.display();
// Устанавливаем контраст
display.setContrast(60);
}

void loop()
{
display.setCursor(0, 0);
// Устанавливаем размер текста
display.setTextSize(2);
// Выводим текст
display.write('h');
display.write('t');
display.write('t');
display.write('p');
display.write('s');
display.write(':');
display.write('/');
display.write('/');
display.write('R');
display.write('O');
display.write('B');
display.write('O');
display.write('M');
display.write('.');
display.write('r');
display.write('u');
display.display();
}

Или посимвольный вывод функции write (принимает char - 1 текстовый символ) можно заменить функцией print (принимает строку)

 display.print("http://ROBOM.ru");
display.display();

Выполнив данный код, мы получим следующее:

Отлично, теперь идем дальше. Планшет графический, так что на нем можно выводить не только текстовую информацию (в отличие от LCD1602 или LCD2004). Изображение можно рисовать с помощью функций

display.drawPixel(1, 1, BLACK);  // черный пиксель с координатами 1:1
display.drawPixel(2, 2, WHITE);  // белый пиксель с координатами 2:2

Но мы будем выводить с помощью массива байтов, в котором каждый бит будет отвечать за цвет пикселя (1 или 0).
В коде ниже мы рисуем изображение 40x20 и я представил байты в массиве именно в таком порядке. Так что, если присмотреться к нему, то цифры 1 и 0 сложатся в примерное изображение того, что мы увидим на экране (специально для вас я выделил их жирным, правда, я выделил жирным нули, а не единицы - просто нулей меньше, а делать монотонные движения мне очень лениво ;).

#include <Adafruit_GFX.h>
#include <Adafruit_PCD8544.h>

Adafruit_PCD8544 display = Adafruit_PCD8544(3, 4, 5, 6, 7);

const unsigned char PROGMEM logoBmp[] =
{
B11111111, B11111111, B11111111, B11111111, B11110000,
B11111111, B11111111, B00000111, B11111111, B11110000,
B11111111, B11111000, B00000011, B11111111, B11110000,
B11111111, B11110000, B00000001, B11111111, B11110000,
B11111111, B11111000, B00000000, B11111111, B11110000,
B11111111, B10011111, B11000000, B01111111, B11110000,
B11111111, B11000011, B11110000, B01111111, B11110000,
B11111111, B11000001, B11110000, B01111111, B11110000,
B11111111, B11100000, B11100000, B01111111, B11110000,
B11111111, B11100000, B00000000, B01111111, B11110000,
B11111111, B11100000, B00000000, B11111111, B11110000,
B11111111, B11100000, B00000001, B11111111, B11110000,
B11111111, B11100000, B00000000, B11111111, B11110000,
B11111111, B11100001, B11000000, B11111111, B11110000,
B11111111, B11100001, B11100000, B01111111, B11110000,
B11111111, B11000001, B11100000, B01111111, B11110000,
B11111111, B11000001, B11110000, B00111111, B11110000,
B11111111, B10000011, B11110000, B00111111, B11110000,
B11111111, B11111111, B11111000, B00011111, B11110000,
B11111111, B11111111, B11111000, B11111111, B11110000
};

void setup() {
Serial.begin(9600);
// Инициализируем наш дисплей
display.begin();
// Делаем его пустым
display.clearDisplay();
display.display();
// Устанавливаем контраст
display.setContrast(60);
}

void loop()
{
display.drawBitmap(0, 0, logoBmp, 40, 20, BLACK); // x, y, logo, w, h, color
display.display();
}

 

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

Вот он:

<?php

//В данном коде лучше всего использовать монохромные изображения во избежании путаницы с цветами.
$image = imagecreatefromjpeg('monohrome.jpg');
$x_dimension = imagesx($image);
$y_dimension = imagesy($image);
$new_image = imagecreatetruecolor($x_dimension, $y_dimension);

if ($operation_callback == 'contrast') {
    $average_luminance = $this->getAverageLuminance($image);
} else {
    $average_luminance = false;
}
// вначале создаем таблицу, чтобы показать, как это будет выглядеть на экране монитора.
echo '<table cellpadding = 0 cellspacing = 0><tr>';
for ($y = 0; $y < $y_dimension; $y++) {
    for ($x = 0; $x < $x_dimension; $x++) {
       echo imagecolorat($image, $x, $y) < 16077215 ? '<td style="width:3px;height:3px;background-color:black;"></td>' : '<td style="width:3px;height:3px;background-color:white"></td>';
    }
    echo '</tr><tr>';
}
echo '</tr></table>';
// теперь создаем
$count = 8;
for ($y = 0; $y < $y_dimension; $y++) {
    for ($x = 0; $x < $x_dimension; $x++) {
       if($count == 8){
          $count = 0;
          echo ', B';
       }
       $count ++;
//16077215 - это порог, который отличает белый от черного.
       echo imagecolorat($image, $x, $y) < 16077215 ? '0' : '1';
    }
    echo '<br>';
}

После чего наш логотип был переведен в монохром и уменьшен до размеров 48х48. Получилось более менее неплохо:

А теперь проверяем код и видим на экране:

Вначале отображаем то, что будет у нас на экране, чтобы можно было тестить на компьютере, а не заливать каждый раз на ардуинку, ну а после уже массив, который выведет наше изображение на экран.

PS

  • Копировать нужно без первой запятой.
  • После копирования в функции display.drawBitmap(0, 0, logoBmp, 40, 20, BLACK); замените 40 и 20 на ширину в пикселях и высоту вашего изображения.
  • Максимальная высота - 48px, максимальная ширина - 84px.

Вот пример кода, который я сгенерировал по уменьшенному логотипу сайта RobOM:

#include <Adafruit_GFX.h>
#include <Adafruit_PCD8544.h>

Adafruit_PCD8544 display = Adafruit_PCD8544(3, 4, 5, 6, 7);

const unsigned char PROGMEM logoBmp[] =
{
B11111111, B11111111, B11111111, B11111111, B11111111, B11111111
, B11111111, B11111111, B11111111, B11111111, B11111111, B11111111
, B11111111, B11111111, B00000000, B00111111, B11111111, B11111111
, B11111111, B11111100, B00000000, B00001111, B11111111, B11111111
, B11111111, B11110000, B00000000, B00000011, B00000111, B11111111
, B11111111, B11110000, B00000000, B00000001, B10000011, B11111111
, B11111111, B11100000, B00000000, B00000000, B11000011, B11111111
, B11111111, B11111111, B00000000, B00000000, B01000011, B11111111
, B11111111, B11111111, B11000000, B00000000, B01100111, B11111111
, B11111111, B11111111, B11101111, B10000000, B00100011, B11111111
, B11111111, B11111100, B11111000, B01000000, B00100001, B11111111
, B11111111, B11110000, B11100000, B01000000, B00100000, B10001111
, B11111111, B11000000, B01000000, B00100000, B00100000, B00000111
, B11111111, B11000000, B01000000, B11100000, B00100000, B00000011
, B11111111, B11000000, B01000001, B11100000, B00100000, B00000011
, B11111111, B11000000, B01000011, B11000000, B00110000, B00000011
, B11111111, B11100000, B01100011, B11000000, B00111000, B00000011
, B11111111, B11100000, B01100111, B10000000, B01111100, B00000111
, B11111111, B11100000, B01100111, B00000000, B01111100, B00011111
, B11111111, B01100000, B00101100, B00000000, B11111100, B00011111
, B11111100, B00100000, B00111000, B00000001, B11111100, B00011111
, B11111100, B00100000, B00000000, B00000001, B11111100, B00011111
, B11111100, B00100000, B00000000, B00000011, B11111100, B00001111
, B11111100, B00100000, B00000000, B00000011, B11111100, B00000011
, B11001000, B01100000, B00000000, B00000011, B11111000, B00000011
, B11000000, B11100000, B00000000, B00000011, B11111000, B00000011
, B10000001, B11100000, B00000110, B00000011, B11110000, B00000011
, B11000001, B11100000, B00011001, B00000001, B11100000, B00000011
, B11100011, B11100000, B00100001, B00000001, B10000000, B00000111
, B11100011, B11100000, B00100001, B00000001, B10000000, B11111111
, B11100011, B11100000, B00100000, B10000001, B10000001, B11111111
, B11000001, B11100000, B00100000, B10000000, B10000011, B11111111
, B11000001, B11100000, B00100000, B10000000, B10000001, B11111111
, B11000000, B11100000, B00100000, B10000000, B11000001, B11111111
, B11000000, B00100000, B00100000, B01000000, B11000001, B11111111
, B11111100, B01100000, B00111000, B01000000, B01000001, B11111111
, B11111110, B01000000, B00111100, B01000000, B01000011, B11111111
, B11111110, B01000000, B01111100, B01000000, B01111111, B11111111
, B11111110, B01000000, B01111100, B11100000, B01111111, B11111111
, B11111111, B11000000, B01111100, B01100000, B00111111, B11111111
, B11111111, B11000000, B01111000, B01100000, B00111111, B11111111
, B11111111, B11111111, B11000011, B11100000, B00111111, B11111111
, B11111111, B11111111, B10000011, B11100000, B00111111, B11111111
, B11111111, B11111111, B10111111, B11110000, B00011111, B11111111
, B11111111, B11111111, B11111111, B11110000, B01111111, B11111111
, B11111111, B11111111, B11111111, B11110001, B11111111, B11111111
, B11111111, B11111111, B11111111, B11111111, B11111111, B11111111
, B11111111, B11111111, B11111111, B11111111, B11111111, B11111111
};

void setup() {
Serial.begin(9600);
// Инициализируем наш дисплей
display.begin();
// Делаем его пустым
display.clearDisplay();
display.display();
// Устанавливаем контраст
display.setContrast(60);
}

void loop()
{
display.drawBitmap(0, 0, logoBmp, 48, 48, BLACK); // x, y, logo, w, h, color
display.display();
}

А вот и сам логотип (по-моему получился на ура):

А вот так это все выглядит со стороны:

 А теперь разберем некоторые функции библиотеки Adafruit_GFX:

Adafruit_GFX functions

  • display - отображение на экране. Вызывается после каждого изменения экрана. КАЖДОГО!
  • clearDisplay - очищает экран;
  • fillScreen(color) - закрашиваем весь дисплей в цвет color (константы BLACK или WHITE);
  • drawPixel(x, y, color) - рисует пиксель по координатам x, y с цветом color;
  • drawLine(x, y, x1, y1, color) - рисует линию с началом в координатах x, y и концом в координатах x1, y1 цветом color;
  • drawFastVLine(x, y, length, color) - рисует горизонтальную линию с началом в координатах x, y, длиной length и цветом color (быстрее чем drawLine);
  • drawFastHLine(x, y, length, color) - рисует вертикальную линию с началом в координатах x, y, длиной length и цветом color (быстрее чем drawLine);
  • drawRect(x, y, width, height, color) - рисует прямоугольник с началом в координатах x, y, высотой height, шириной width и цветом color;
  • fillRect(x, y, width, height, color) - рисует закрашенный прямоугольник с началом в координатах x, y, высотой height, шириной width и цветом color;
  • drawCircle(x, y, radius, color) - рисует круг с началом в координатах x, y, радиусом radius и цветом color;
  • fillCircle(x, y, radius, color) - рисует закрашенный круг с началом в координатах x, y, радиусом radius и цветом color;
  • drawTriangle(x, y, x1, y1, x2, y2, color) - рисует треугольник с углами в x, y; x1, y1; x2, y2 и цветом color;
  • fillTriangle(x, y, x1, y1, x2, y2, color) - рисует закрашенный треугольник с углами в x, y; x1, y1; x2, y2 и цветом color;
  • drawRoundRect(x, y, width, height, radius, color) - рисует прямоугольник с началом в координатах x, y, высотой height, шириной width, радиусом radius и цветом color;
  • fillRoundRect(x, y, width, height, radius, color) - рисует закрашенный прямоугольник с началом в координатах x, y, высотой height, шириной width, радиусом radius и цветом color;
  • drawBitmap - данная функция не такая уж и простая и применяется в нашем коде. Лучше ее изучать на примере (пример смотрите выше);
  • setCursor(x, y) - устанавливает курсор в позицию x, y;
  • setTextColor(color) - устанавливает цвет текста;
  • setTextSize(size) - устанавливает размер текста;
  • write(symbol) - выводит на экран символ symbol.

Вот краткое описание большинства полезных функций нашей библиотеки.

Надеюсь данная статья поможет вам разобраться с экраном  .

Видео версия данной статьи

Теги: #Arduino, #Nokia5110, #Adafruit_GFX

Ваша оценка:

Рейтинг: 10.0 (Оценок: 5)

Комментарий:

Copyright © RobOM.ru 2016 г. Все права защищены