580

Свой текст для OLED 128x64

В очередном своём проекте я решил использовать китайский OLED дисплей разрешением 128х64 точки с интерфейсом подключения I2C.

Свой текст для OLED 128x64 Arduino, OLED, Шрифт, Своими руками, Длиннопост

Но после курения весьма немногочисленных и однотипных гайдов по работе с такими экранами я понял, что круче руководств как подключить его к дуньке (4 провода, смех) и вывода на него стандартного примера, ничего во всеобъемлющем интернете толком то и нет... Да и ещё у него есть такой недостаток как скудность стандартных шрифтов – в стандартной библиотеке их всего 5, два из которых буквенные и три циферные, причём самый большой циферный выполнен в каком-то псевдоготическом стиле.

Свой текст для OLED 128x64 Arduino, OLED, Шрифт, Своими руками, Длиннопост

В общем ни один из стандартных шрифтов мне не подходил категорически. Ну чтож, подумал я, значит надо сделать свой шрифт с блекджеком и шлюхами. Дело за малым – найти гайд и бабахнуть. Но тут всплыла ещё одна проблема – гайдов по этому делу нет, только ссылки на мёртвые сайты, хождения вокруг да около, троллинг, закольцованные комментарии. Ныть на форумах я не собирался, ожидая что кто-то сделает всю работу за меня, поэтому принял решение расковырять библиотеку, а конкретнее файл DefaultFonts.c, лежащий в её папке. Итак, открываем его и видим портянку из шестнадцатеричного кода с комментами.

Свой текст для OLED 128x64 Arduino, OLED, Шрифт, Своими руками, Длиннопост

Ну думаю круто, сейчас возьму фотошоп, нарисую в монохроме шрифт, загоню его в прогу конвертер картинок в хекс-код, забью в наш DefaultFonts.c и дело в шляпе. Ок, рисую шрифт 20х40:

Свой текст для OLED 128x64 Arduino, OLED, Шрифт, Своими руками, Длиннопост

Сохраняю в картинку каждый символ, перегоняю его в хекс с помощью DotFactory (скрин наспех, делал уже потом, для данного поста, восьмёрка кривая, как видно по визуализатору, не исправлял настройки программы):

Свой текст для OLED 128x64 Arduino, OLED, Шрифт, Своими руками, Длиннопост

Вставляю в файл шрифта, в скопированный блок с новообозванным шрифтом. Затем загружаю в ардуино тестовый скетч и получаю сраку на дисплее (фото не делал, там просто россыпь хаотичных пикселей, как будто гном чихнул).

Значит не так всё просто как кажется… В конечном итоге разобрался и опишу процесс пошагово на примере одного символа.

Начну пожалуй с того, что каждый шрифт в файле DefaultFonts.c представляет собой блок с заголовком в виде:

Свой текст для OLED 128x64 Arduino, OLED, Шрифт, Своими руками, Длиннопост

Где MediumNumbers - имя шрифта, а набор из четырёх байтов - параметры. Итак по порядку:

0x0c - ширина шрифта, в данном случае 12 пикселей

0x10 - высота шрифта, тут равна 16ти пикселям

0x2d - порядковый номер первого символа согласно таблице ASCII

0x0d - общее количество символов в шрифте (блоке)

Теперь постараюсь ещё подробнее, чтобы не извращаться с дорисовкой ноликов, ширину принимаем кратной 4ке, то есть 4, 8, 12, 16 и тд. С высотой попроще, позже объясню как правильно её корректировать. Количество символов наверное можно не объяснять, в данном примере она равна 13ти и можно тупо посчитать строки - их ровно 13, справа даже комментарии есть какой символ зашифрован. По поводу кода символа согласно ASCII - ниже таблица, например если нужно чтобы шрифт начинался с двойки - пишем 0x32 (50 номер в десятичной), если например с буквы Q - пишем 0x51 (81 в десятичной).

Свой текст для OLED 128x64 Arduino, OLED, Шрифт, Своими руками, Длиннопост

В данном примере сделаем шрифт из одного символа, с размерами 24х32, который будет печататься на экран вместо цифры "0". Так как все делают метеостанции и умные дома, то решил нарисовать наспех такой символ:

Свой текст для OLED 128x64 Arduino, OLED, Шрифт, Своими руками, Длиннопост

Заметьте, картинка 24х30 пикселей, нестандартная высота для примера, цвет неважен. Хоть сине-зелёную сделайте.

Дальше валим её набок вправо, затем делим её справа налево на колонки по 8 пикселей, открываем любой текстовый редактор (или тетрадку). Я предпочитаю обычный Microsoft Word, где делаю таблицу из двух колонок - в первой у нас будут двоичные числа, во второй - перевод в 16тиричную. В принципе всё видно на картинках ниже:

Свой текст для OLED 128x64 Arduino, OLED, Шрифт, Своими руками, Длиннопост

Забиваем в таблицу числа в виде ХХХХХХХХ (8 бит или 1 байт) согласно заполненности цветом, у меня белый - 0, чёрный - 1. Занятие муторное, но нормальных программ для этого дела я не нашёл, наверное плохо искал.

В итоге получаем 4 блока, нумерация идёт справа налево, повторюсь. В фотошопе прекрасно видно - фон как раз таки состоит из клеток 8х8 пикселей.

Вы наверное заметили, что получилось 3 блока по 8 пикселей и последний на 6 пикселей. Как быть с последним? Просто допишем нули в начало:

Свой текст для OLED 128x64 Arduino, OLED, Шрифт, Своими руками, Длиннопост

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

Не забываем отделять все числа запятыми!

Свой текст для OLED 128x64 Arduino, OLED, Шрифт, Своими руками, Длиннопост

Когда мучения закончатся - вставляем полученное содержимое в файл DefaultFonts.c в новый свеженький блок:

Свой текст для OLED 128x64 Arduino, OLED, Шрифт, Своими руками, Длиннопост

Обзовём шрифт Symbol, параметры будут "0x18, 0x20, 0x30, 0x01," что равнозначно 24х32 пикселя, 48 стартовый номер (цифра "0") и всего 1 символ в шрифте.

Далее осталось дело за малым - накидать скетч и залить в ардуино:

Свой текст для OLED 128x64 Arduino, OLED, Шрифт, Своими руками, Длиннопост

В итоге получаем это:

Свой текст для OLED 128x64 Arduino, OLED, Шрифт, Своими руками, Длиннопост

Толком сфокусироваться не смог, дисплей слишком контрастный, да и поздно было) Но в принципе видно что всё у нас вышло.

Как обычно замечу что на гениальность не претендую, возможно есть способы быстрее и продуктивнее. Но этот пост позволит разобраться в принципах формирования шрифта в этой библиотеке. Гайд не исчерпывающий и для меня остались некоторые пробелы - почему например нельзя сделать шрифт произвольного размера, допустим 37х21. Если ответ на этот вопрос появится в комментариях - буду рад. Так же если имеются дополнения и вопросы - пишите, не стесняйтесь.

Найдены дубликаты

+21

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

Иллюстрация к комментарию
раскрыть ветку 1
+8

эх, не спорю) но может кому пригодится - я вот вообще никаких гайдов не нашёл по созданию своего шрифта, везде либо ссылка на русифицированный, либо на тупо подключение дисплея по и2с

+34

Лично для меня пост не несет абсолютно никакой пользы, однако я просто хотел сказать, что ты крутой, ТС! Разобрался сам, написал неплохой гайд, который даже я, среднестатистический пользователь с минимальным пониманием программирования, более-менее понял. Спасибо тебе и продолжай быть таким же классным.:3

раскрыть ветку 1
+7

спасибо)

+5

русский шрифт для оледа 128х64 гуглится за минуту. В своё время пользовался этим гайдом, там и либа есть https://lesson.iarduino.ru/page/urok-8-russkiy-yazyk-na-oled...

Но такой подробный гайд крут, +

раскрыть ветку 1
+5

дело не в русском шрифте, я знаю что он есть

+3

Будьте любезны, ссылку на индикатор.

раскрыть ветку 2
раскрыть ветку 1
+1
взял в закладки. Мерси.
+1

Спасибо, дружище, за полезную инфу!

Особенно за расшифровку параметров шрифта! Запилил свой шрифт в библиотеку OLED I2C, все отлично работает)

+1

Класс!
спасибо за пост

Помогло)

+1

Ну вы прям ваще=))))

http://www.rinkydinkelectronics.com/t_make_font_file_mono.php

Рисуем в паенте вставляем конвертируем сохраняем фаил в папке с библиотекой и всё.

Все символы должны быть кратными 8 по высоте.

Как вы так гуглите что ничего не находите?

http://s020.radikal.ru/i713/1702/bc/936e24f3b1dd.jpg

Часы с моим шрифтом цифровым(крупный) перерисовал со шрифта "Терминатор", мелкие это стандартные цифры они температуру показывают.

Есть и полный шрифт "Терминатор" с анг и рус буквами и цифрами и тд.

Сейчас ещё шрифт цифрово символьный рисую как в фильме "Хищник"

раскрыть ветку 3
0

ну так, лёгких путей не ищем) сейчас вот нашёл прогу которой быстро перегонять в хекс можно, быстрее процесс пошёл) шрифт хищника это круто) у меня есть несколько идей по этому поводу, но руки не доходят

раскрыть ветку 2
0

Только шрифты "хищник" везде разные. Для винды одни, для приложения андроида другие, а по оригиналу как то мало сведений. Я пока с винды перерисовал для пробы=)

Если бы OLED дисплеи ещё бы красные продавались, идеально для такого шрифта было бы.

   

раскрыть ветку 1
+1

спасибо за вдохновение! эта крутая штука)

+1
Хочу напомнить, возможно и не открою Америку, что олед дисплеи довольно быстро выгорают при постоянном использовании. Через год постоянно светящиеся пиксели уже практически не будет видно. Нужно либо тушить дисплей, либо уменьшать яркость свечения, когда он не используется.
раскрыть ветку 2
0

Речь о дешевых китайских оледах, фирменные пашут долго, но стоят неадекватно.

Проще и дешевле старый телефон с андроидом + нс-01 + фронтэнд.

0

ну на постоянку включать не собираюсь) спасибо за ценную инфу, не думал об этом

+1
Чувак, ты пишешь на С и делаешь вручную работу, которую можно автоматизировать за 30 минут максимум.
раскрыть ветку 4
+1

тоже немного удивился, когда увидел калькулятор :/

0

не пишу я на С, учусь только) и как автоматизировать - не знаю :(

раскрыть ветку 2
+1
Питон в зубы и вперёд. Ну или С если хочется.
0
Тоже самое, что ты делал вручную должна делать программа, только и всего. Библиотек для разбора картинок - вагон; считал, обработал, дальше записал в файл.
+1

Вот это гемор!

А ведь можно было просто погуглить - https://github.com/olikraus/u8g2/wiki

раскрыть ветку 4
0
Пользуюсь этой либой, работает хорошо, но i2c медленно очень. Динамическую индикацию на таком экране не сделать.
раскрыть ветку 3
0
на spi вполне шустро. задержка визуально не определяется.
раскрыть ветку 2
+1
Может ща и не в тему, но чем-то напомнило судоку.
+1

Хорошая статья. Многим думаю поможет.

Давно разбирался с этой проблемой, но чуть шире и для китайского экрана nokia5110: надо было кроме текста ещё картинки из EEPROM'а выводить. И всё это на atmega8. Нарыл такие проги, сильно мне помогшие (ссылки на скачку гуглятся просто)

LCDAssistant - конвертирует BMP в массивы байт

AsciiConverter - конвертер русских шрифтов в ASCII

IHexViewer - для ручной правки прошивки для EEPROM

и ещё какой-то редактор шрифтов. Уже не помню названия.

раскрыть ветку 2
0

LCD Assistant хорошая вещь, но он чисто для картинок. Я первым делом его заюзал)

раскрыть ветку 1
0

Собственно любой графический интерфейс - последовательность картинок )))

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

+1

Когда ковырял этот дисплей - гайдов полно было, и тулзы попадались конвертации ттфа в нужный формат и русские шрифты тоже были. Надо просто лучше гуглить :)

А так молодец - лишней экспы хапнул :)

раскрыть ветку 8
0
На той неделе ковырялся с oled weh002004 и чётко усвоил последовательность работы с китайским железом: первое - курим мануал до дыр, пытаемся завести по мануалу, если не получается, курим форумы заводим, как пишут там, лезем опять в мануал, вбиваем костыли и все работает. Накидал библиотеку под stm32f303 пока полет нормальный. Самоё милое было что во вшитых шрифтах есть русский, но он не соответствует аски, а некоторые буквы которые совпадают с латиницей вообще не забиты. Да и таблица кодов для символов с опечатками. Кстати для некоторых бывает открытием, что мануал надо искать не на дисплей, а на контроллер дисплея
раскрыть ветку 3
+1

Я давно на это забил, только время тратить.   Обычно находится готовое решение. А писать дрова и библиотеки это потеря времени. Конечно если это не самоцель.

раскрыть ветку 2
0

да внятных программ нет, почему то... хотя вот сразу после написания этого гайда вспомнил про Java приложение в библиотеке openGLCD, она конвертит bmp как раз в хекс, лежит в openGLCD\bitmaps\utils\Java\, называется glcdMakeBitmap.jar, вроде верно конвертит, буду делать следующий шрифт - проверю

раскрыть ветку 3
раскрыть ветку 2
0

а как картинку загрузить?. а дисплей можно оторвать от платы? он ток шлейфом соединен?

0
Это и есть чих гнома? Не знаешь как с таким бороться?
Иллюстрация к комментарию
раскрыть ветку 3
0

из-за чего такая ерунда? со стандартным скетчем из примеров работает? библиотека стоит? есть другой дисплей чтобы проверить? другая дунька?

раскрыть ветку 2
0
Оказалось я использовал библиотеку от ssd1306, а надо sh1106
раскрыть ветку 1
0

Искал покрупнее шрифт, наткнулся на эту статью. Решил сам сделать и пока читал коменты про то как надо было писать все самому и все есть уже готовое, пришла идея переделать библиотеку. Добавить увеличение шрифта автоматически. Это оказалось проще всего и для моих нужд хватает.


Спасибо за статью, не почитав её искал бы дальше.

0

Мои шрифты может кому то помогут)

https://drive.google.com/drive/folders/0B1yUlquOvz3ZeGZtbDRNY2M1R00?usp=sharing

0
Хех, я себе такой прихватил в угаре заказа горы всякой мелочи для квадрокоптера. Видел на форуме, как его к мозгам подключают и чо-то полезное смотрят в полевых условиях. Ну, 90р не деньги, из любопытства взял, так и валяется теперь, ибо думать надо раньше чем заказывать, и не слушать всяких гиков. Там и без экранчика есть с чем поебстись вволю)
Всё давно написано под андроид с OTG, в поле подключился и хоть прошивку заливай.
А экранчик теперь хз куда бы приспособить)
Говорят, из ардуины чего не паяй - метеостанция получается)
раскрыть ветку 1
0

"пи*дят, товарищ генерал") можно много чего спаять)

0

Покупаем Esp8266 цепляем те же датчики, делаем страницу на бутстрапе + js парсер данных, заливаем страницу на есп, делаем функцию по которой есп будет запрашивать температуру и выдавать ее на странице.

Профит

красиво, быстро, удобно, функционально, дешевле экрана

раскрыть ветку 3
0

на какой странице?

где страница отображается?

эта штука дешевле оледки за 0,3 рубля?

раскрыть ветку 2
0

Микроконтроллер с вафляем в одном (SoC)

Беглый поиск по али $1.88

Страница в отображается вебе

Иллюстрация к комментарию
раскрыть ветку 1
0

Ни названия библиотеки, ни индикатора. В сторону формата xbm смотреть не пробовали?)

раскрыть ветку 4
0

А вот подскажите классный редактор XBM. Сколько не искал, нашёл только IconLover и некую онлайн-утилиту. Пока что обхожусь ими, но хочется инструменты поудобнее и более насыщенные фичами, чтобы свои значки рисовать быстро и без проблем.

раскрыть ветку 1
0

К сожалению не подскажу - я 100 лет не писал под что-нибудь у чего есть графический интерфейс.

0

экран гуглится по "oled 128x64", библиотека по "oled 128x64 arduino", библиотека стандартная под него, вернее попсовая, так что все, кто имел с такими экранами опыт, поняли) на xbm не глядел, даже не знал о его существовании

раскрыть ветку 1
0
u8g2 поддерживает XBM из коробки.
0
На самом деле все намного проще, гуглишь "oled 128x64 datasheet" и "ssd1306 datasheet", находишь даташит и пишешь библиотеку с нуля
Вот для oled 128x64 https://www.google.com.ua/url?sa=t&source=web&rct=j&url=http://www.buydisplay.com/download/manual/ER-OLED0.96_Series_Datasheet.pdf&ved=0ahUKEwi72KiN543SAhXGJ5oKHc6aDnMQFgggMAA&usg=AFQjCNEGrCzqiIFwmE75U2Ak8jYEhmZ6bg&sig2=lglRY0dWiycvzQP1zOnwKA
Для i2c не уверен что ssd1306 нужен, надо смотреть
раскрыть ветку 6
+1

я не настолько прошарен, чтобы самостоятельно писать библиотеки)) но я обязательно научусь) спасибо)

раскрыть ветку 2
+3
Это я к тому как "сделать шрифт произвольного размера, допустим 37х21"
раскрыть ветку 1
-1
Зачем писать библиотеку, если их уже полно есть? Какой в этом смысл? Вы никогда сторонними любами не пользуетесь, все всегда пишите с нуля?
С нуля писать или переписывать нужно уж очень в специфичных случаях. У меня был один такой: не хватало ресурсов у выбранного мной под проект камня (msp430), пришлось переписывать либу по работе с дисплеем. Но опять же, не с нуля, а с оглядкой на существующую либо.
раскрыть ветку 2
+2
Если есть библиотека которая мне подходит - то я её использую, но ТС хотел шрифт произвольного размера и не смог разобраться как это сделать в чужой библиотеке, а в этом случае выход только один - писать с нуля.
Сейчас перечитал свой первый комментарий - слишком не точно выразился, каюсь.
раскрыть ветку 1
-1
Зачем, если есть готовые конверторы шрифтов и графики прямо в исходник на си?
раскрыть ветку 2
0

ну я как бы искал, но ничего внятного не нашёл, видимо плохо искал

раскрыть ветку 1
-1

GIMP - растровый редактор, главный FREE конкурент фотошопа, с встроенным преобразователем в хекс-код.

-5

Пиздец, в ворд догадался вставить, а подумать, что можно напедалить формулу для Excel в такой же таблице (раз уж кодить не умеешь в приниципе) - не догадался.
Зачем вообще тогда заниматься техникой, любой, если сидишь вручную конфертишь пачки значений? Вот это извращение, дух старой школы (на самом деле нет).

раскрыть ветку 2
0

спасибо, Ваше мнение очень важно для нас

раскрыть ветку 1
0

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

ещё комментарии
Похожие посты
Возможно, вас заинтересуют другие посты по тегам: