🛠 День 1: Заметка 2: Прототип устройства для управления RGB панелью

Давно думал о том, чтобы по тренироваться в программировании Arduino.

👉 Хорошо бы набить руку, чтобы в случае необходимости, можно было оперативно сделать прототип нужного устройства.

Думал, какой бы проект подобрать, чтобы был интересным, полезным и как-то мог пригодиться.
В итоге остановился на таком проекте: Управление RGB Led панелью с помощью Arduino Mega 2560.

Первая задача была:
💰 купить комлектующие:
- Arduino Mega 2560
- RGB полноцветный светодиодный модуль
- Набор проводов "папа-папа"
- Блок питания
- Сетевой двухжильный шнур

🛠 собрать все по инструкции, то есть подключить шлейф от RGB матрицы к Arduino, также к матрице подключить блок питания:
- статья от Амперки, которую брал за основу для изучения данной темы
- хорошая статья

👨‍💻 написать код для проверки работы панели
- прежде чем начинать программировать необходимо будет в менеджере библиотек Arduino IDE подключить необходимые зависимости для работы RGB матрицей RGBmatrixPanel, Adafruit_BusIO, Adafruit GFX.

🚀 В итоге на фото/видео (в следующем сообщении) представлен собранный прототип устройства.
А в качестве первой программы решил собрать вместе два примера работы:
- отображается текст Code Every Day, при этом буквы во фразе Every Day подсвечиваются разными цветами;
- периодически фраза сменяется анимацией летающих шариков по панели.

#Arduino
#RGBMatrix

День 5: Заметка 1: Таймер обратного отсчета на Arduino с выводом на RGB панель

🤚 Всем привет!

Давайте сегодня посмотрим, как можно создать счетчик обратного отсчета в Arduino с выводом на RBG панель.

👨‍💻 Для этого напишем небольшую программу, мы рассмотрим методы для работы с текстом экземпляра RGBmatrixPanel

👉 Пусть у нас перменная для хранения экземляра RGBmatrixPanel называется matrix.

Как мы разобрали в прошлом уроке:
👉 matrix.Color333(int r, int g, int b) - это функция, которая описывает цвет в формате RGB, она нам сегодня пригодиться, так как мы будем подкрашивать цифры счетчика в нужный нам цвет.

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

👉 matrix.setTextColor(matrix.Color333(r, g, b)); - указываем, какого цвета будет текст
👉 matrix.setCursor(int x, int y); - указывается начальная координата текста (верхний левый угол)
👉 matrix.print(string text); - выводим текст
👉 matrix.setTextSize(int size); - указывает размер текста, size изменяется [1, 8], причем символ размером 1 занимает 8 на 5 пикселей на матрице.

Вцелом этого будет достаточно.

В методе setup() подготавливаем матрицу

void setup() {
matrix.begin();
}

Заводим переменную, которая будет хранить текущее состояние счетчика

int count = 10;

В методе loop() уменьшаем значение на единицу с задержкой в 1 секунду

void loop() {
count = count - 1;
delay(1000);
}

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

void loop() {
//очистка экрана от текста, который был показан ранее
matrix.fillScreen(0);

//вывод на экран состояния счетчика
matrix.setTextColor(matrix.Color333(7, 0, 0));
matrix.setCursor(27, 13);
matrix.print(counter);
matrix.swapBuffers(false);

//уменьшение счетчика на единицу
count = count - 1;
delay(1000);
}

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


void loop() {


//уменьшение счетчка на единицу
if (count > 0) {
count = count - 1;
}
delay(1000);
}

Можно немного улучшить код, выделив логику смены состояния счетчика и работы с текстом в отдельные методы:

void changeState() {
if (count > 0) {
count = count - 1;
}
}


void printCounter() {
printText(String(count));
}

void printText(string value) {
//очистка экрана от текста, который был показан ранее
matrix.fillScreen(0);

//вывод на экран состояния счетчика
matrix.setTextColor(matrix.Color333(7, 0, 0));
matrix.setCursor(27, 13);
matrix.print(value);
}

В итоге метод loop():

void loop() {
printCounter();
changeState();
}

📷 Пример работы на видео (в следующем сообщении)
📷 Также пример написания кода в отдельном видео(в следующем сообщении), в конце я забыл добавить метод matrix.swapBuffers(false), просто поторопился =).
В приложеном файле программы с видео он есть.

#Arduino
#RGBMatrix
#LifeCoding

День 5: Заметка 5: сколько символов можно вывести на RGB панели

🎯Решил посмотреть, а сколько вообще символов можно разместить на RGB панели p4 32x64 256мм x128мм 1/16S

Получается, вот такая картина:
👉 при самом малом размере текста matrix.setTextSize(1); в строке всего помечается 10 символов
👉 всего панель может вместить 4 таких строки

Итого имеем 40 символов за раз можно вывести при самом малом шрифте.

Надо признать, что особо не разгуляешься, но жить можно с этим.

Библитека для работы с RGBmatrixPanel имеет метод matrix.setTextWrap(bool), который позволяет переносить текст на другую строку.

Пример программы, которая выводит результат как на фото

void setup() {
  matrix.begin();
}

String text = "1234567890abcdefghiklmnopqrstuvwxyz1234567890";

void loop() {
  matrix.fillScreen(0);

  matrix.setTextColor(matrix.Color333(7, 0, 0));
  matrix.setCursor(0, 0);
  matrix.setTextSize(1);
  matrix.setTextWrap(true);
  matrix.print(text);

  matrix.swapBuffers(false);
}

#Arduino
#RGBMatrix

День 6: Заметка 1: Эффект печати текста при выводе на RGB матрицу

Всем привет!

👉 Давайте сегодня рассмотрим код посимвольного вывода на матрицу текста,
будет выглядеть как эффект печати текста.

Фактически, все, что было разобрано в прошлых постах, будет переиспользовано здесь.
Мы будем также использовать функции RGBmatrixPanel:
👉 print(string text)
👉 swapBuffers(bool value)
Но уже для кажого символа строки в отдельности.
Символы будем перебирать в цикле for
Получилось так как на видео.

Попозже на канал Youtube и Rutube выложу life coding сессию.
Код проекта прикладываю в следующем сообщении.

#Arduino
#RGBMatrix

День 7: Заметка 1: Реализация работы инфо табло на Arduino

Всем привет!

Реализовал вывод информации как в инфо табло.

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

В качестве слова для вывода использовал K45P3R5KY, оно как раз подходило под вывод в рамках одной строки.

Алгоритм разработал простой:
👉 в каждой ячейке в случайном порядке подбирается символ
👉 каждый случайный символ отрисовывается с пониженной яркостью и насыщенностью
👉 считается количество циклов отрисовки
👉 после достижения определенного порога по циклам отрисовки на нужном месте появляются буквы из выводимой фразы, причем у каждой буквы свой порог появления
👉 когда слово/фраза целиком собрана, у ее символов меняем насыщенность и яркость, чтобы они выделялись красочно на общем табло
👉 после достижения последнего порога по циклам подкрашиваем фразу в брендированный цвет.

#Arduino
#RGBMatrix

День 8: Заметка 1: Выводим изображения на RDB матрицу с помощью Arduino

Всем привет!

Двигаемся дальше в работе с Arduino и RGB матрицей.

🎯 Давайте сегодня попробуем вывести на панели изображение.

🤔 На самом деле задача не совсем простая, при работе с другими SDK на любых языках зачастую у нас есть метод, которому на вход передаем файл изображения, всю логику по отображению делает sdk и методы отрисовки предусмотренные в ОС платформы.

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

👉 В библиотеке для работы с матрицей RGBmatrixPanel уже есть встроенный метод для вывода изображения как массива байтов, его и будем использовать:

drawRGBBitmap(0, 0, (const uint16_t *)<array name>, 64, 32);

В прошлом сообщении я рисовал прототипы для логотипа идеи лейблов для кружек Coffee To Code. Это было неслучайно, это была подготовка к сегодняшнему коду, то есть эти изображения я и буду выводить на RGB матрицу.
👉 Лучше всего будет если пропорции изображения будут совпадать с пропорциями панели.
👉 Кстати, массивы, описывающие изображения, имеют внушительный размер, чтобы не загромождать код, я их вынес в отдельный файл, который затем подключил к основному файлу программы.

📷 На видео собрал рабочий прототип (в следубщем сообщении).

#Arduino
#RGBMatrix

День 9: Заметка 1: Анимация загрузки на RGB матрице с Arduino

🤚Всем привет!

В прошлом сообщении я описал процесс работы с изображениями, соответственно, теперь можно легко делать различные анимации.

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

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

🤟 Получилось как и все на RGB матрице oldschool -но, но в этом есть свой шарм. Лично мне нравится.

Алгорим следующий:
👉 готовим графические изображения для анимации, конвертируем их в Си массивы данных;
👉 графические изображения должны собой представлять набор последовательно изменяющихся картинок, мы их будем отрисовывать друг за другом, чтобы визуально добавить некоторую динамику;
👉 в коде приложения для Arduino пишем метод, который будет в цикле пробегать по этому массиву изображений и выводить каждую из картинок на экран.

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

📷 Пример на видео (в следующем сообщении).

#Arduino
#RGBMatrix

День 10: Заметка 1: reveal circular анимация для RGB матрицы

🤟 Хай, Кодерс!

👉 Сегодня хотел показать пример реализации reveal circular анимации заливки.
Реализовать данный вид анимации не составляет труда.

👉 В основе реализации лежит использование метода отрисовки и заливки круга из библиотеки для работы с RGB матрицей RGBmatrixPanel drawCircle(int x, int y, int r, uint16_t color);.

По-моему, выглядит симпатично.

📷 Пример на видео.

#Arduino
#RGBMatrix

День 11: Заметка 1: Код примера reveal circular анимации

👨‍💻Код примера

// тип анимации
class Direction {
  public:
    static const int TYPE_OUT = 0;
    static const int TYPE_IN = 1;

    static bool isTypeIn(int value) {
      return value == Direction::TYPE_IN;
    }

    static bool isTypeOut(int value) {
      return value == Direction::TYPE_OUT;
    }
};

// логика анимации 
void revealCircular(
  int x, int y,  // координаты центар
  int r,         // радиус заливки круга
  int direction, // 0 - расширение, 1 - сужение
  uint16_t color
) {
  if (Direction::isTypeOut(direction)) {
    for (int i = 0; i < r; ++i) {
      drawCircle(x, y, i, color);
    }
  } else if (Direction::isTypeIn(direction)) {
    for (int i = r; i > 0; --i) {
      drawCircle(x, y, i, color);
    }
  }
}

// вывод на матрицу круга
void drawCircle(
  int x, int y,
  int r,
  uint16_t color
) {
  matrix->drawCircle(x, y, r, color);
  matrix->swapBuffers(true);
}

#Arduino
#RGBMatrix

День 11: Заметка 2: Перемещение объектов на RGB матрице, интерполяторы

🤟 Хай, Кодерс!

👉 Сегодня утром проснулся и подумал, что сегодня отличный день, чтобы рисовать точки.
😎 Сказано-сделано!

🎯 Для будущих проектов потребуется перемещать объекты на RGB панели, например, в играх. Нужно набросать прототип перемещения точек. Помимо этого для реалистичности движения решил реализовать интерполяторы, хотя бы самые распространные.

👉 LinearInterpolator
Описывается формулой x = t, t - время

👉 AccelerateInterpolator
Описывается формулой x = t^(2f), добавляет ускорение перемещению

👉 DecelerateInterpolator
Описывается формулой x = 1 – (1 – t)^(2f), добавляет замедление перемещению

👉 BounceInterpolator
Эмулирует скачки, как будто мяч скачет

Размера матрицы не хватило, чтобы наглядно продемонстрировать динамику изменения положения точек.

🤔 Поработаю еще над этим.

#Arduino
#RGBMatrix

День 12: Заметка 1: Пример кода интерполяторов

🤟Хай, Кодерс!

Сегодня приводил код, который отвечает за перемещение объектов на RGB матрице в порядок, чтобы было удобно с этим работать.

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

Сами интерполяторы выделелил в базовый класс, с возможностью переопределения методов рассчета координат:

class Interpolator {
  
  public:
    static const int TYPE_CONSTANT = 1;
    static const int TYPE_LINEAR = 2;
    static const int TYPE_ACCELERATE = 3;
    static const int TYPE_BOUNCE = 4;

  public:  
    int type = Interpolator::TYPE_CONSTANT;
    
    virtual int calculateX(double time) { return 1; }
    virtual int calculateY(double time) { return 1; }

};

class LinearInterpolator : public Interpolator {
  public: 
    int type = Interpolator::TYPE_LINEAR;

    virtual int calculateX(double time) { return time; }
};

class AccelerateInterpolator : public Interpolator {
  public:
    int type = Interpolator::TYPE_ACCELERATE;

    virtual int calculateX(double time) { 
      return (int) pow(time, 2 * 0.8); 
    }
};

class BounceInterpolator : public Interpolator {
  public:
    int type = Interpolator::TYPE_BOUNCE;

    virtual int calculateX(double time) {
      double result = 0;
      if (time < 0.31489) {
        result = 8 * pow(1.1226 * time, 2);
      } else if (0.31489 <= time && time < 0.65990) {
        result = 8 * pow(1.1226 * time - 0.54719, 2) + 0.7;
      } else if (0.65990 <= time && time < 0.85908) {
        result = 8 * pow(1.1226 * time - 0.85260, 2) + 0.9;
      } else if (0.85908 <= time) {
        result = 8 * pow(1.1226 * time - 1.04350, 2) + 0.95;
      }
      return (int) result;
    }
};

#Arduino
#RGBMatrix