Здравствуйте, уважаемые пользователи LPgenerator!

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

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

2. Обязательно укажите алфавит, то есть набор символов.

Если лендинг русскоязычный, то выберите латинский (Latin ) и кириллический (Cyrillic ):

3. Выберите понравившийся шрифт (или шрифты) и нажмите "+":

4. Перейдите в коллекцию добавленных шрифтов. Для этого кликните по черной панели внизу:

5. В открывшемся окне в первом пункте отображаются выбранные ранее шрифты.

Помните: использование большого количества различных шрифтов Google Fonts может замедлить загрузку вашей целевой страницы. Показатель влияния выбранных стилей на скорость загрузки страницы отображается справа.

6. Если набор и внешний вид добавленных шрифтов устраивает, перейдите в раздел "EMBED" и полностью скопируйте содержимое поля "STANDART":

Не закрывайте вкладку Google Fonts, она нам еще понадобится.

Откройте необходимую целевую страницу в редакторе LPgenerator и нажмите инструмент «Скрипты» :

• в открывшемся окне нажмите «Добавить новый скрипт» ;
• пропишите название скрипта;
• выберете положение скрипта «Внутри тега HEAD» ;
• вставьте скопированный код;
• не забудьте сохранить изменения.

7. Вернитесь во вкладку Google Fonts.

Скопируйте код CSS , который генерируется для использования подгруженных шрифтов.

Для каждого шрифта используется свой CSS .

Например, для шрифта Lobster код выглядит так: font-family: "Lobster", cursive;

8. Вернитесь в редактор LPgenerator и кликните по элементу (текст или кнопка), к которому нужно применить загруженный шрифт.

Есть особенности применения стилей для разных элементов лендинга.

CTA-элементы

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

Текстовые блоки целевой страницы

Для того чтобы применить внешний шрифт для текстового блока, для которого вы уже меняли шрифт, недостаточно просто прописать стиль в его расширенных свойствах. Необходимо также сбросить текущее форматирование. Для этого выделите текст и нажмите кнопку «Убрать форматирование» в блоке редактирования текста.

Внимание: при этом будут сброшены все изменения, внесенные в размер, стиль шрифта, выравнивание и т. д.

После этого можно будет снова указать размер, выравнивание и другие атрибуты.

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

9. Сохраняем изменения и любуемся результатом.

Обратите внимание: в редакторе LPgenerator шрифт останется прежним, дополнительные шрифты отображаются только в предпросмотре и при посещении опубликованного лендинга.

Наконец доехали из поднебесной матричные модули. Каждый модуль состоит из микросхемы MAX7219 (), светодиодной матрицы, в обвязке стоят один конденсатор и один резистор.

Управляется MAX7219 по интерфейсу SPI.

Микросхемы в кластере соединены последовательно. Читал в интернете, что максимально возможное последовательное подключение допускает всего 8 штук MAX7219. Не верьте. 16 модулей соединил, и все прекрасно работает.

Модули, представленные на Али, бывают в нескольких вариантах исполнения. Наибольшей популярностью пользуются 2 вида: с микросхемой в DIP и в SOIC корпусах. Модуль с DIP-микросхемой большего размера и не так удобен при соединении в кластер. Соединять придется кучей проводов.

Модули с микросхемой в SOIC-корпусе имеют размер светодиодной матрицы и соединяются пайкой или джамперами. Получается красиво и аккуратно.

Наиболее известными библиотеками для работы с матрицами и кластерами являются MAX72xx Panel от Марка Райса и Parola от MajicDesigns : первая библиотека проще в использовании, вторая посложнее с бОльшими возможностями. Распишу подробнее.

MAX72xx Panel

При использовании MAX72xx Panel обязательна установка библиотеки Adafruit GFX .

Для русификации текста необходимо будет скачать ЭТОТ ФАЙЛ и заменить стандартный файл glcdfont.c в каталоге Arduino/Libraries/Adafruit-GFX-Library-master. Также в этом файле описаны, кроме нужных букв и цифр, куча всяких символов. Далеко не все они могут пригодиться. Картинка ниже поясняет как формируются символы.

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

Итак, библиотеки MAX72xx Panel и Adafruit GFX установлены, файл glcdfont.c заменен. Запускаем Arduino IDE, открываем ФАЙЛ . В скетче есть функция utf8rus. Она обеспечивает перекодировку таблицы символов для русского языка. Она нужна только для нормального вывода из программы, то есть в программе нужный текст пишется на русском. Если текст вводится через СОМ-порт, то коррекция кодов символа происходит в функции Serial_Read. В IDE и в консоли разработчики использовали разные кодировки.

В начале файла присутствуют строки необходимые для работы библиотеки.

int numberOfHorizontalDisplays = 1;

int numberOfVerticalDisplays = 16;

У меня модули с микросхемой в SOIC-корпусе. У них есть небольшая особенность. Матрица у модулей установлена повернутой на 90 градусов. Это плата за удобство соединения. Если запустить скетчи, идущие в комплекте с библиотеками, они будут выводить текст снизу вверх в каждом модуле. Текст будет выводится зигзагами. Для лечения этого недуга библиотеке надо "сказать", что вертикальных дисплеев 16 (физически они расположены горизонтально). И потом в void Setup указать библиотеке строку

matrix.setRotation(matrix.getRotation() + 1);

Она программно перевернет каждую матрицу. И отображаться все будет нормально.

У модулей с DIP-корпусом микросхем такого нет. Там все красиво, кроме кучи проводов.

Библиотека MAX72xx Panel довольно скромная. Визуальных эффектов вывода нет. Кластер воспринимается как одно целое. Намного лучше дела обстоят с MD Parola.

Parola от MajicDesigns.

Обладатели модулей с микросхемой в SOIC-корпусе также столкнутся с проблемой ориентации модулей в кластере. Только выглядит это немного по-другому нежели в MAX72xx. Здесь модули окажутся как бы не в своей очереди.

Скетч HelloWorld из образцов в комплекте с библиотекой.

Программно в скетче мне не удалось вылечить этот недуг. Я вылечил его по-другому. В файле Adruino/libraries/MD_MAX72xx_lib.h в конце нужно найти строки как на картинке.

И исправить в выделенной строке выделенную 1 на 0. Сохранить файл. Arduino IDE можно не перезагружать. Заливаем, смотрим.

Теперь можно использовать 24 эффекта анимации. Анимация запускается командой P.displayText(«Текст для вывода», «выравнивание текста», скорость, задержка показа, эффект появления, эффект исчезновения). Как видите, настроек достаточно много.

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

Как вы уже догадываетесь проблема с кириллическими буквами. Она тоже решаема. Рядом с предыдущим файлом в той же директории лежит файлик MD_MAX72xx_font.cpp. Это файл шрифта. Символы в нем сформированы аналогично файлу шрифта GFX библиотеки. Есть небольшое отличие. Здесь размер символа может быть меньше 5 точек. В библиотеке Adafruit GFX восклицательный знак, например, занимает также 5 точек шириной, как и любой другой символ, только используется один ряд точек. Остальные не светятся, но используются под символ. В Parola тот же восклицательный знак занимает также один ряд точек, только рядом не пустые точки, а могут стоять соседние символы. Понятнее будет разобраться по картинке.

Дополнить файл кириллическими символами аналогично файлу из первой рассмотренной библиотеки пока времени нет. Если кто-нибудь это сделает и пришлет мне файл, я добавлю его к этой статье, и Вам будут благодарны и я, и гости моего сайта.

Итог. Библиотека MAX72xx Panel от Марка Райса проста в использовании и понимании, но с бедным функционалом.

Библиотека Parola от MajicDesigns посложнее и ее возможностей хватит практически для любого применения.

13 января 2017 в 18:15

Русификация библиотеки openGLCD для Arduino

• Электроника для начинающих

Написание русскоязычного текста на графических дисплеях с контролером ks0108 или его аналогами все еще представляет существенные трудности. Библиотека openGLCD, которую рекомендуют официальные сайты Arduino, в оригинальной комплектации последней на данный момент версии не содержит никаких кириллических шрифтов, кроме шрифта cp437font8x8. На практике он малопригоден, потому что в русскоязычной части поддерживает кодировку Win-1251 . Следовательно, чтобы выводить символы таким шрифтом, их нужно либо вставлять в текст восьмеричными или шестнадцатеричными кодами (и при этом остаются неясности со строчной буквой «я», как указывает в комментарии сам создатель шрифта), либо все равно писать отдельную функцию перекодировки, как это сделал arduinec для библиотеки Adafruit-GFX.

Кроме всего прочего, cp437font8x8 крупноват для экранчиков 128х64 точки. Оптимальным размером шрифта для вспомогательных надписей на таком дисплее остается System5x7. Мы здесь сосредоточимся на русификации именно системного шрифта, хотя читатель может по этому образцу самостоятельно русифицировать и любой другой шрифт (особенно, если у него экран побольше).

А в чем проблема?

Для начала давайте вникнем в корни проблемы. Среда Arduino IDE - это обычный текстовый редактор Windows, который работает в универсальной кодировке UTF-8 , как любой другой в современных версиях Windows (Блокнот, например). UTF-8 представляет собой экономичную версию многобайтовой кодировки UNICODE. В UTF-8 англоязычные символы, цифры, точки-запятые-скобки и всякие прочие значки представлены одним байтом, совпадающим со стандартной кодировкой ASCII . Поэтому их представление в коде скетча не представляет никаких трудностей: строка англоязычных символов после компиляции передается в загружаемый hex-файл без изменений и оказывается понятна 8-разрядному контролеру, как говорится, «без перевода».

В процессе этого преобразования каждый символ, как и в любой программе на любом языке программирования, представляется непосредственно в виде его кода, то есть порядкового номера в таблице шрифта, из которой программа извлекает графическое начертание соответствующего символа. В файле шрифта System5x7.h библиотеки openGLCD количество символов представлено переменной font_Char_Count типа uint8_t , то есть не может превышать величины одного байта. Поэтому кириллические символы, которые в UTF-8 занимают два байта , не могут быть переданы контроллеру обычным образом.

Предыдущие попытки решения

Заметим, что это было не всегда так. Версии Arduino 1.0.x (и, по слухам, 1.6.0) усекали двухбайтовый код до однобайтового, банально отбрасывая старший байт (который для кириллицы, как следует из таблицы UTF-8 по ссылке выше, равен либо 0xD0, либо 0xD1). Потому для доработки шрифта в этих версиях среды годится старая библиотека GLCD v3 , в которой массив шрифта просто дополнялся символами кириллических букв так, чтобы их позиции совпадали с младшим байтом кодировки UTF-8 (байты с 0x80 по 0xBF). Более подробно такая модернизация описана в статье автора «Работа с текстом на графическом дисплее» . Повторяю - для нее нужна одна из версий Arduino IDE 1.0.x в совокупности с библиотекой GLCD v3, а не их более современные варианты.

В новых версиях Arduino IDE стало все сложнее. Библиотека решительно отказывается понимать двухбайтовые номера символов, выводя вместо них пустое место, потому простой переделкой шрифта тут не обойдешься. Приходится дополнить его функцией перекодировки двухбайтовых символов в однобайтовые.

Решение

Автор не стал лезть в недра библиотечных функций, а написал для openGLCD надстройку в виде функции outstr() , которая перебирает все элементы входной строки, пропуская их через оператор выбора Switch . Он вылавливает из строки кириллические символы и заменяет их однобайтовыми кодами, соответствующими модернизированному файлу шрифта System5x7R.h .

Например, для заглавной русской буквы «Ф» строка замены будет такой:

Case "Ф": GLCD.PutChar(0xA4); break;
Здесь 0xA4 - младший байт кодировки буквы «Ф» в UTF-8 (см. ссылку выше). В соответствии с этой кодировкой составлен новый файл шрифта System5x7R.h . В принципе при таком подходе в шрифте можно применять любую кодировку русских символов и любых других глифов, которые вздумается вставить в шрифт. Лишь бы их общее количество не превышало 128 штук: от начала таблицы до символа 0x7F (127 - последний символ стандартной таблицы ASCII) целесообразно оставить шрифт в неприкосновенности.

Правда, пару вольностей с таблицей ASCII я себе разрешил. Дело в том, что в оригинальном шрифте System5x7.h значок градуса вынесен в последнюю строку таблицы, занимая символ 0x80, который у нас уже относится к кириллице. Чтобы не нарушать порядок построения кириллической таблицы в соответствии с UTF-8, эта строка выброшена из файла. А значок градуса пристроен вместо символа ASCII «~» (номер 0x7E), который в шрифте все равно не использовался по назначению. Зато такая замена позволяет вводить значок градуса в тексте скетча прямо с клавиатуры в виде символа «~».

Еще одна вольность связана с тем, что автор на дух не переносит перечеркнутый ноль - архаику времен АЦПУ и монохромных текстовых дисплеев. Потому ноль в модернизированном шрифте заменен на глиф буквы «О». Те, кто придерживается пуристических принципов, могут просто удалить в файле шрифта System5x7R.h эту вставку (старый глиф перечеркнутого нуля там оставлен закомментированным, его код 0x30).

В модернизированной библиотеке openGLCD , которую вы можете скачать по ссылке в конце статьи, внесено еще одно исправление - изменен порядок подключения выводов для дисплеев с контроллером ks0108. Почему автором библиотеки выбран такой порядок (см. таблицу по ссылке на официальном сайте Arduino), неизвестно. В модернизированном варианте подключение дисплея (для примера выбран популярный MT-12864J) осуществляется согласно вот такой схеме:

Схема подключения MT-12864J

Переменный резистор R1 здесь подключается согласно рекомендации производителя , а резистор R2 служит для ограничения тока подсветки, если она подключена не к напряжению 5 В, а прямо ко входному источнику питания (вывод Vin Arduino) с более высоким напряжением.

Пример вывода на дисплей MT-12864J русского алфавита вперемешку с латинским, а также цифр и значка градуса, представлен на фото:

Текст скетча для этого примера:

Текст скетча с выводом русского алфавита

#include //подключим библиотеку #include //файл с функцией вывода русских букв #include //файл с кодами русских букв void setup() { GLCD.Init(); //инициализация GLCD.ClearScreen(); } void loop() { GLCD.SelectFont(System5x7R); //выбираем шрифт GLCD.CursorTo(0,0); //установим курсор в начальную позицию //выводим смешанные англо-русские строки: outstr("ABC АВГДЕЖЗИКЛМНОП\n"); outstr("PRQ РСТУФХЦЧШЩЪЫЬЭЮЯ\n"); outstr("nts абвгдежзийклмноп\n"); outstr("xyz рстуфхцчшщъыьэюя\n"); GLCD.println("1234567890"); GLCD.CursorTo(19,4); //установим курсор в предпоследнюю позицию 5-й строки GLCD.print("~C"); //градус С GLCD.println("@;/.,|<>()=-_{}\"""); GLCD.CursorTo(4,7); //установим курсор в поз 4 строки 8 GLCD.print("MT-12864J"); }

Так как файлы с функцией outstr.h и шрифтом System5x7R.h размещены в корневом каталоге модернизированной библиотеки, то на них надо размещать отдельные ссылки в начале скетча с помощью директивы #include . Для англоязычных надписей удобно по-прежнему пользоваться стандартными функциями println/print , а вот при необходимости перевода строки в русском тексте необходимо явно указывать символ «\n».

Подправленный вариант библиотеки вы можете скачать