Espruino:Примеры/Печать надписи «Hello World!» на LCD-дисплее с помощью Espruino Pico

Содержание

Резерв

Справочник по API

Модули

Примеры

Резерв

Резерв

Резерв

Резерв

Резерв

Перевод: Максим Кузьмин

Проверка/Оформление/Редактирование: Мякишев Е.А.

Печать надписи «Hello World!» на LCD-дисплее с помощью Espruino Pico

При написании кода многие тестируют его, печатая (в консоли, на дисплее и т.д.) фразу «Hello World!»

В случае с Espruino это делается очень просто – просто подключаемся к плате при помощи Web IDE и печатаем print("Hello World!"). Но что если вы хотите напечатать этот текст без использования компьютера.

В этом руководстве мы подключим к Espruino LCD-дисплей и напечатаем на нём «Hello World!».

Нам понадобятся

• Плата Espruino Pico
• LCD-дисплей Nokia 5110
• Макетная плата

Подсоединение

Подключение устройств друг к другу делается очень просто, потому что LCD-дисплей потребляет так мало электроэнергии, что его можно питать даже от GPIO-контактов Espruino.

• Поместите Espruino Pico на макетную плату так, чтобы USB-коннектор смотрел влево.
• Поместите LCD-дисплей прямо над Pico и выровняйте его контакты по самому правому контакту Pico – так, чтобы самый левый контакт Pico (тот, что ближе всего к USB-коннектору) остался свободен.

Пример подключения смотрите на фото выше.

Код

Для начала давайте возьмём код из статьи о LCD-дисплее Nokia 5110, но с некоторыми изменениями:

• Мы вручную зададим контакты для питания LCD-дисплея
• Поскольку контакты Pico для аппаратной шины SPI не соответствуют аналогичным контактам на LCD-дисплее, мы воспользуемся аппаратной шиной SPI (её можно реализовать на всех контактах).

A5.write(0); // контакт GND
A7.write(1); // контакт VCC

// Настраиваем SPI:
var spi = new SPI();
spi.setup({ sck:B1, mosi:B10 });
// Инициализируем LCD-дисплей:
var g = require("PCD8544").connect(spi,B13,B14,B15, function() {
  // После инициализации очищаем LCD-дисплей
  // и пишем на нём текст «Hello World!»:
  g.clear();
  g.drawString("Hello World!",0,0);
  // Отправляем графику на дисплей:
  g.flip();
});

Скопируйте этот код в правую часть Web IDE и нажмите на кнопку загрузки кода. На дисплее должна появиться надпись «Hello World!»

Но мы не закончили, потому что наша задача – сделать это всё без использования компьютера. Для этого инициализацию LCD-дисплея нужно выполнять при каждом включении платы.

Давайте добавим в код специальную функцию onInit(), которая будет вызываться при каждом запуске Espruino:

A5.write(0); // контакт GND
A7.write(1); // контакт VCC
A6.write(1); // контакт для включения подсветки

var g; // глобально задаём переменную «g»,
       // чтобы её можно было использовать для других функций

function onInit() {
  // Настраиваем SPI:
  var spi = new SPI();
  spi.setup({ sck:B1, mosi:B10 });
  // Инициализируем LCD-дисплей:
  g = require("PCD8544").connect(spi,B13,B14,B15, function() {
    // После инициализации очищаем дисплей
    // и пишем на нём текст «Hello World!»:
    g.clear();
    g.drawString("Hello World!",0,0);
    // Отправляем графику на дисплей:
    g.flip();
  });
}

Примечание: Если отправить этот код так, как мы делали это раньше, ничего не произойдёт, потому что мы не запустили функцию onInit().

Но эту функцию можно запустить вручную, напечатав onInit() в левой части Web IDE или вставив onInit() в нижнюю часть кода, отправляемого через правую часть Web IDE. Но в этот раз просто напишите save(). Ваш код будет сохранён в flash-память и перезагружен, после чего на LCD-дисплее снова появится надпись «Hello World!»

Теперь попробуйте отключить плату от USB и опять подключить – на дисплее снова появится текст «Hello World!»

Как улучшить этот код

Наш проект получился хоть и рабочим, но не очень интересным. Что если сделать так, чтобы слова, показываемые на дисплее, были немного разного размера?

По умолчанию в Espruino имеется векторный шрифт, доступ к которому можно получить при помощи функции g.setFontVector(size). Вернуться к оригинальному (маленькому) шрифту можно будет при помощи функции g.setFontBitmap().

A5.write(0); // контакт GND
A7.write(1); // контакт VCC

var g;

function onInit() {
  // Настраиваем SPI:
  var spi = new SPI();
  spi.setup({ sck:B1, mosi:B10 });
  // Инициализируем LCD-дисплей:
  g = require("PCD8544").connect(spi,B13,B14,B15, function() {
    // После инициализации очищаем его и рисуем текст:
    g.clear();
    // Рисуем текст векторным шрифтом
    // на координатах x:0, y:0
    g.setFontVector(12);
    g.drawString("Hello",0,0);
    // Рисуем чуть более крупный векторный текст
    // на координатах x:10, y:16
    g.setFontVector(20);
    g.drawString("World!",10,16);
    // Переключаемся обратно на маленький шрифт:
    g.setFontBitmap();
    g.drawString("a tiny font",25,40);
    // Отправляем графику на дисплей:
    g.flip();
  });
}

Наконец, мы можем заанимировать текст. Это можно сделать при помощи функции setInterval() – она поможет нам периодически вызывать код для обновления экрана.

A5.write(0); // контакт GND
A7.write(1); // контакт VCC

var g;
var pos = 0;

function draw() {
  g.clear();
  // Рисуем текст векторным шрифтом:
  g.setFontVector(12);
  g.drawString("Hello",0,0);
  // Рисуем текст, размер которого будет периодически меняться:
  pos += 0.5;
  g.setFontVector(18 + Math.sin(pos)*4);
  // Здесь мы центрируем текст, определяя его длину
  // при помощи функции g.stringWidth():
  g.drawString("World!",42-g.stringWidth("World!")/2,16);
  // Переключаемся обратно на маленький шрифт:
  g.setFontBitmap();
  g.drawString("a tiny font",25,40);
  // Отправляем графику на дисплей:
  g.flip();
}

function onInit() {
  // Настраиваем SPI:
  var spi = new SPI();
  spi.setup({ sck:B1, mosi:B10 });
  // Инициализируем LCD-дисплей:
  g = require("PCD8544").connect(spi,B13,B14,B15, function() {
    // После инициализации задаём скорость анимации
    // на 20 кадров в секунду (50 мс на кадр):
    setInterval(draw, 50);
  });
}