»
Добавить статью

Вывод картинки на дисплей 128x64

2018-07-13 в 11:03

Сегодня расскажу, как вывести любую картинку на дисплей на базе контроллера ST7920 с разрешением 128х64 пикселя с помощью контроллера Arduino. Ранее был проект по выводу различных данных на дисплей.
Для примера будем рисовать картинку логотипа нашего сайта.

Первым шагом, следует ее перевести в черно-белый формат, то есть сделать рисунок монохромным. Для этого воспользуемся сервисом https://www.imgonline.com.ua.

На выходе у нас должен получится черно-белый рисунок.

Теперь нужно убрать фон.
Чтобы это сделать, можно воспользоваться разными программами. Меня больше всего на данный момент устраивает LCD Vision, которая обычно идет в комплекте с Code Vision AVR. Она так же переводит картинку в код, но нам это не нужно.

Запускаем программу и делаем импорт нашего черно-белого изображения.

lcd vision

lcd vision st7920

Нажимаем кнопку "Convert image to monochrome".

Открывается окно, где выбираем "Threshold" и, если необходимо, с помощью ползунка выбираем более оптимальный вариант. А оставшиеся недочеты редактируем в Paint. После жмем Ок и сохраняем наше изображение "File" - "Save As".

сделать изображение монохромным

Теперь, как и говорил, открываем Paint и вставляем туда наше изображение. Тут рекомендую перейти во вкладку "Вид" и включить "Линии сетки". Так мы будем видеть картинку попиксельно.

paint arduino

Вспоминаем, что наш дисплей имеет разрешение 128 пикселей по ширине и 64 по высоте. Сейчас моя картинка имеет разрешение 256х100 пикселей. Необходимо уменьшить область рисунка. То есть уменьшить нашу область, сделать ее такого же размера, как и дисплей. Если картинка очевидно не влазит, сначала уменьшаем ее. Делается это просто. Используем инструмент "Выделить" и жмем "Выделить все". Далее выбираем "Изменить размер" и примерно прикидываем на сколько будем уменьшать. Я сделаю на 50 процентов.

Теперь уменьшаем наше поле под размер дисплея. Для этого в правом нижнем углу ловим белый квадратик и тянем до тех пор пока внизу не увидим 128х64 пкс. Можно корректировать отдельно правую и нижнюю границы, кому как удобнее.

Для удобства проведения следующей операции лучше максимально увеличить масштаб, чтобы видеть каждый пиксель.

Как видно, рисунок наш имеет немного неровную форму. Чтобы это исправить, берем карандаш и поправляем каждый пиксель по отдельности. Лишнее естественно убираем. После редактирования, получаем примерно следующее изображение.

картинка st7920

Опять вспоминаем размеры нашего дисплея. Не всегда картинка будет на весь размер дисплея. Давайте сейчас уменьшим размер картинки (того же поля) до границ самой картинки. У меня получилось 110x40 пикселей.

Осталось правильно сохранить изображение, иначе в следующем пункте возникнут проблемы. Сохраняем картинку обязательно в формате .BMP. И выбираем тип файла "Монохромный рисунок". Чтобы не запутаться назвал его tolcd.bmp. Будет ругаться, что ухудшится цветопередача и т.п.. Не обращаем внимания и сохраняем.

В итоге получаем следующее.

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

Запускаем Image2Code и просто перетаскиваем готовую картинку, которую я назвал tolcd.bmp. Если картинка сделана правильно, появятся настройки (как на изображении ниже) и нужно отметить в тех местах, которые указаны стрелкой.

image2lcd

После нажатия кнопки "Convert" откроется блокнот с необходимым нам кодом нашей картинки.

image2lcd arduino

Есть один момент, все фигурные скобки { } нужно будет удалить, как и последнюю запятую.

Запускаем Arduino IDE.
Так мы подключаем библиотеку для работы с дисплеем.

Код
#include "U8glib.h"

Указали, какой дисплей мы используем, и на каких пинах он подключен.

Код
U8GLIB_ST7920_128X64_1X u8g( 13, 11, 10);

Объявляем массив для помещения кода картинки в код программы. Помните, что в строках кода картинки не должно быть скобок. Так же массиву нужно дать название (например: tehnopageru).

Код
static unsigned char название_массива[] {код_картинки};

Размещаем картинку определенного размера в определенном месте. Где Х - место начала вывода картинки по оси х (ширине), Y - место начала вывода картинки по оси у (высоте) от верхнего левого угла. W - ширина картинки и H - высота картинки. Помните, в Paint мы ее обрезали по границам картинки, вот эти значения сюда и вписываем.

Код
u8g.drawXBM( X, Y, W, H, название_массива);

Вот что получилось у меня при при следующем коде.

Код
u8g.drawXBM( 0, 0, 110, 40, tehnopageru);

картинка на lcd дисплее

Как видно, картинка размещена в самом верхнем левом углу. Как же разместить ее по центру? Моя картинка имеет размера 110х40. От размера дисплея 128х64 отнимем соответственно 110х40 и получим 18 и 24. Теперь делим их пополам и вписываем в настройки размещения.

Код
u8g.drawXBM( 9, 12, 110, 40, tehnopageru);

lcd st7920

Немного поясню, как мы вывели картинку в центр. По ширине у нас осталось 18 точек (те же пиксели) и по высоте 24 точки. Мы эти значения поделили на 2, чтобы у нас по краям оставалось одинаковое количество точек, так же и по высоте. Благодаря этому и удалось разместить ее в центре.

А вот и код полностью.

Код

#include "U8glib.h"

U8GLIB_ST7920_128X64_1X u8g( 13, 11, 10);

static unsigned char tehnopageru[] {
0x00,0x00,0x03,0x06,0x0C,0x18,0x30,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x03,0x06,0x0C,0x18,0x30,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x80,0x07,0x0F,0x1E,0x3C,0x78,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x80,0x07,0x0F,0x1E,0x3C,0x78,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x80,0x07,0x0F,0x1E,0x3C,0x78,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x80,0x07,0x0F,0x1E,0x3C,0x78,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0xF8,0xFF,0xFF,0xFF,0xFF,0xFF,0x07,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0xFE,0xFF,0x9F,0xFF,0xFF,0xFF,0x1F,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0xFF,0xFF,0x9F,0xFF,0xFF,0xFF,0x3F,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0xFF,0xFF,0x9F,0xFF,0xFF,0xFF,0x3F,0x00,0x00,0x00,0x00,0x00,0x00,
0x80,0xFF,0xFF,0x9F,0xFF,0xFF,0xFF,0x7F,0x00,0x00,0x00,0x00,0x00,0x00,
0x80,0xCF,0xFF,0x9F,0xFF,0xFF,0xFF,0x7F,0x00,0x00,0x00,0x00,0x00,0x00,
0x80,0xCF,0xFF,0x9F,0xFF,0xFF,0xFF,0x7F,0x00,0x00,0x00,0x00,0x00,0x00,
0xBC,0xCF,0xFF,0x9F,0xFF,0xFF,0xFF,0x7F,0x0F,0x00,0x00,0x00,0x00,0x00,
0xBF,0xCF,0xFF,0x9F,0xFF,0xFF,0xFF,0x7F,0x3F,0x00,0x00,0x00,0x00,0x00,
0xBF,0x07,0x0F,0x9E,0xE0,0x82,0x0F,0x7C,0x3F,0x3F,0xF8,0xE0,0x07,0x1F,
0xBC,0x07,0x07,0x1C,0xE0,0x00,0x07,0x78,0x8F,0x7F,0xFC,0xF1,0x8F,0x3F,
0x80,0xCF,0xE7,0x9C,0xE7,0x3C,0xE7,0x79,0x80,0x61,0x8C,0x31,0x8C,0x31,
0x80,0xCF,0xE7,0x9C,0xE7,0x3C,0xE7,0x79,0x80,0x61,0x8C,0x31,0x8C,0x31,
0x80,0xCF,0xE7,0x9C,0xE7,0x3C,0xE7,0x79,0x80,0x61,0x80,0x31,0x8C,0x31,
0x80,0xCF,0xE7,0x9C,0xE7,0x3C,0xE7,0x79,0x80,0x61,0x80,0x31,0x8C,0x31,
0x80,0xCF,0x07,0x9C,0xE7,0x3C,0xE7,0x79,0x80,0x61,0xF8,0x31,0x8C,0x3F,
0xBC,0xCF,0x07,0x9C,0xE7,0x3C,0xE7,0x79,0x8F,0x61,0xFC,0x31,0x8C,0x3F,
0xBF,0xCF,0xE7,0x9F,0xE7,0x3C,0xE7,0x79,0xBF,0x61,0x8C,0x31,0x8C,0x01,
0xBF,0xCF,0xE7,0x9F,0xE7,0x3C,0xE7,0x79,0xBF,0x61,0x8C,0x31,0x8C,0x01,
0xBC,0xCF,0xE7,0x9C,0xE7,0x3C,0xE7,0x79,0x8F,0x61,0x8C,0x31,0x8C,0x31,
0x80,0xCF,0xE7,0x9C,0xE7,0x3C,0xE7,0x79,0x80,0x71,0x8C,0x31,0x8C,0x31,
0x80,0x0F,0x06,0x9C,0xE7,0x3C,0x07,0x78,0x80,0x3F,0xFC,0xF1,0x8F,0x3F,
0x80,0x1F,0x0F,0x9E,0xE7,0x3C,0x0F,0x7C,0x80,0x1F,0xF8,0xE0,0x0F,0x1F,
0x00,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0x3F,0x80,0x01,0x00,0x00,0x0C,0x00,
0x00,0xFE,0xFF,0xFF,0xFF,0xFF,0xFF,0x1F,0x80,0x01,0x00,0x30,0x0C,0x00,
0x00,0xF8,0xFF,0xFF,0xFF,0xFF,0xFF,0x07,0x80,0x01,0x00,0x30,0x0C,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x80,0x01,0x00,0xF0,0x0F,0x00,
0x00,0x80,0x07,0x0F,0x1E,0x3C,0x78,0x00,0x80,0x01,0x00,0xE0,0x07,0x00,
0x00,0x80,0x07,0x0F,0x1E,0x3C,0x78,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x80,0x07,0x0F,0x1E,0x3C,0x78,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x80,0x07,0x0F,0x1E,0x3C,0x78,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x03,0x06,0x0C,0x18,0x30,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x03,0x06,0x0C,0x18,0x30,0x00,0x00,0x00,0x00,0x00,0x00,0x00

};

void draw(void) {
  // graphic commands to redraw the complete screen should be placed here  
  u8g.drawXBM( 9, 12, 110, 40, tehnopageru);
}

void setup(void) {
}

void loop(void) {
  // picture loop
  u8g.firstPage();  
  do {
    draw();
  } while( u8g.nextPage() );
 
  // rebuild the picture after some delay
  delay(1000);
}

Остались вопросы? Задавайте в комментариях или на форум.

Вам понравился наш материал? Поделитесь с друзьями!

Оценка статьи: 5.0 из 5. Уже оценило 1 читатель
Метки: arduino, st7920, картинка на дисплей, image2lcd, lcdvision.
Вам может быть это интересно

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]