Привет, Хабр! Хочу рассказать историю создания своего пет-прожекта.

Lopaka — это редактор пиксельной графики и интерфейсов для проектов на Ардуине, ESP32 или STM. Мне было больно видеть как страдают эмбедед разработчики рисуя свои интерфейсы, и я решил упросить им всем жизнь.

Я с детства любил рисовать и компьютеры ????. Больше 10 лет занимаюсь веб-разработкой. Прошёл все стадии: дизайнер-любитель, программист-самоучка на PHP, фрилансер с сайтами "под ключ", фронтендер, тимлид.

Прототип

Всё началось с нашумевшего запуска Флиппер Зеро на кикстартере. Когда я получил устройство (спустя два года ожидания ????) то первым делом начал изучать его прошивку.

В качестве эксперимента я сделал приложение-таймер Помодоро и сильно пострадал в процессе отрисовки интерфейса.

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

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

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

Первые наброски редактора
Первые наброски редактора

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

Мне понравилось как быстро получилось набросать прототип и я продолжил добавлять новые инструменты и улучшать совместимость с API Флиппера.

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

Первая рабочая версия
Первая рабочая версия

Получил неплохой охват, лайки-репосты от фанатов Флиппера. Даже на хабре про меня кто-то написал и на каком-то сайте для хакеров(отсюда больше всего трафика). Ещё проект добавили в список софта для Флиппера.

И я успешно забыл о нём на несколько месяцев. За это время набралось около 50 звёзд на гитхабе. Ежедневно на страницу проекта ходили 10-20 юзеров. Не густо, в общем.

Поворотный момент

Копаясь в исходном коде Флиппера я узнал, что под капотом они используют очень популярную библиотеку u8g2. Это буквально стандарт для монохромных дисплеев.

Пазл начал складываться в картинку: с одной стороны есть разработчики электронных устройств. С другой стороны есть дизайнеры интерфейсов. И между ними, судя по всему, огромная пропасть. Очень сложно обеспечить "пиксель-пёрфект" в быстро развивающемся проекте. На написание отрисовки интерфейса вручную разработчики тратят уйму времени.

Для веб-разработки есть куча удобных инструментов. Из Фигмы можно экспортировать готовый код. Для мобильных устройств есть мощные системы с генерацией готового приложения. Что есть у инженеров-электронщиков? Линейка и калькулятор? Может я что-то упускаю?

Какие есть популярные инструменты для рисования графики под монохромные экраны?

Мой беглый анализ существующих решений не дал результатов: я нашел один единственный редактор близкий по функционалу (SquareLine) и он лет на десять отстаёт от жизни и работает только с LVGL. Всё остальное это убогие поделки на коленке, которые надо качать, настраивать, устанавливать - в общем знатно задолбаться. Для u8g2 нет вообще ничего подобного. Ладно, для богатой графики на линукс-ARM устройствах есть мощный QT. Но что делать Ардуинщикам?

Решено: теперь это универсальный редактор графики для встраиваемых экранов низкого разрешения!

Я добавил поддержку самой популярной библиотеки для монохромных дисплеев u8g2, создал новый репозиторий, завёл новый твиттер и купил красивый домен https://lopaka.app/

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

Договорился насчет репоста в дружествнном канале в телеге и твиттере, комьюнити флиппера тоже подключилось. Итог: 145 звёзд на Гитхабе и 85 фоловеров в твиттере. Уже лучше!

Тот самый твит:

https://twitter.com/i/status/1668248090313146371

Всё надеюсь что как-нибудь смогу удачно зайти в комьюнити Ардуино и получить от них лайк-репост.

Планы развития проекта

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

Я пообщался с командой Флиппера и несколькими ведущими инженерами других проектов. Узнал много нового про разработку хардварных продуктов и познакомился с интересными людьми.

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

Ещё есть тренд на переход от STM-ESP к современным ARM-чипам, с которыми уже можно собрать более дешёвые устройства с цветным дисплеем и низким энергопотреблением. И там уже есть куча подходящего софта (хотя ни один не предлагает облачные фичи и командную работу).

Сейчас в Лопаке можно:

  • рисовать базовые фигуры

  • писать текст разным шрифтом

  • вставлять картинки

  • генерировать готовый код для u8g2 и Flipper Zero

  • конвертировать изображения в XBMP

Мой план максимально расширить аудиторию, добавить Adafruit GFX и LVGL. Это уже будут цветные дисплеи и более сложный кодогенератор. Посмотрим как пойдёт.

Долгосрочная цель — сделать Фигму для эмбедед устройств. С синхронизацией проектов, прототипированием, командной работой, комментариями и кучей других штук. Доступ с любого устройства и ОС через веб-приложение, прототипирование и всё остальное, за что любят Фигму.

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

Кто хочет раньше всех попробовать — записывайтесь через форму: https://airtable.com/apps27BkejrUF0DWT/shrrfgmWJQnhM0dGY

Что внутри?

Это простое приложение на VueJS и чистом JavaScript. Для отрисовки используется канвас. Я не гонюсь за супер быстрым или качественным кодом. Мне важно чтобы приложение решало задачи пользователя.

Исходный код открытый: https://github.com/sbrin/lopaka

Основная сложность была именно в том, чтобы предоставить полный WYSIWYG пиксель-пёрфект эффект. Чтобы то, что мы видим в редакторе 1 в 2 совпадало с тем, что вы увидите на устройстве. Пришлось разбираться в формате шрифтов, которые используются в электронике, конвертировать их и выводить красиво в канвасе.

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

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

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

Знакомо? Да-да, глобальная область видимости и зоопарк из JS-файлов снова в моде. Верните мой 2007 ???? Докер? Ну хз, может быть.

Ладно, я понимаю что с ростом сложности, весь этот колхоз не получится удержать в рабочем состоянии. Так что в будущем наверняка придется всё переписать на ТайпСкрипт и обмазаться вебпаками.

Монетизация?

Проект открытый и бесплатный. Я использую CloudFlare Pages вместо хостинга статики. Потратился только на домен.

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

Доход сейчас нулевой. Можете стать моим спонсором на гитхабе.

Помощь в развитии проекта

Больше всего мне не хватает обратной связи. Непонятно нужен ли кому-то такой инструмент.

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

Если вы знаете кого-то с большим опытом разработки таких устройств, расскажите им про этот проект. Или помогите напроситься к ним на интервью ???? Может есть какие-то публичные персоны на ютубе или в твитере, кого я мог бы сам позвать на интервью (особенно англоязычные)? Напишите в коментах, пожалуйста.

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

Исходный код: https://github.com/sbrin/lopaka
Официальный твиттер проекта https://twitter.com/lopaka_app
Мой твиттер на английском https://twitter.com/ilin_pt
Мой телеграм-канал на русском https://t.me/woomoo

Комментарии (10)


  1. Indemsys
    12.07.2023 07:27
    +5

    Посмотрите мою статью.

    Все там упомянутые редакторы могут создавать экраны для небольших монохромных дисплеев.

    GuiX Studio бесплатен и может симулировать динамическую работу экранов на ПК из Visual Studio.
    Это очень важно, поскольку на реализацию взаимодействия с экранными виджетами уходит не меньше времени чем на прорисовку.

    Сам GuiX доступен в исходниках и даже может быть взят полностью со всем middleware включающим RTOS, FS, сетевые стеки.
    Причём эта GUI интегрирована в среду разработки STM32CubeMX и полностью адаптирована под STM32


    1. ohm Автор
      12.07.2023 07:27
      +1

      Огромное спасибо за детальный обзор. Статья огонь!

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

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

      Я хочу БРРРРР! Чтобы от идеи до реализации был один шаг.


      1. Indemsys
        12.07.2023 07:27

        И совсем не хочу тратить годы на изучение все видов комбинаций параметров, библиотек, архитектур и интерфейсов

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

        Или я что-то не понял?


        1. ohm Автор
          12.07.2023 07:27

          Я имел в виду "как пользователь"

          Как автор проекта, безусловно, я буду в этом всём копаться ????


          1. Indemsys
            12.07.2023 07:27
            +1

            Пользователю придётся копаться в библиотеке u8g2. Библиотека надо сказать не самая продвинутая, но отягощённая всяческими вспомогательными сорсами не имеющими понятного назначения. И практически недокументированная.
            Поскольку эту библиотеку разрабатываете не вы, то высок риск постоянных конфликтов редактора с библиотекой.
            Обычно разработчики редакторов сами разрабатывают библиотеки.

            Вы уверены, что интерфейс вашей программы для стольких платформ и недокументированной библиотеки будет проще настроек GuiX Studio, которые ограничиваются одним единственным окном?


            1. ohm Автор
              12.07.2023 07:27
              +1

              Поживем увидим :)

              Моя цель максимально избежать появления даже таких простых окон.

              Лично у меня буквально каждая строчка в этом визарде вызывает вопросы. Хочется скорее его закрыть и никогда не возвращаться ????


      1. NutsUnderline
        12.07.2023 07:27
        +1

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

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


  1. needsomedata
    12.07.2023 07:27

    Спасибо за решение! Как быстрый старт hello world будет идеально. Я обязательно попробую. Может быть для отрисовки игровых интерфейсов это будет полезно.

    Но, конечно, хочется какую-то интеграцию с редактором кода, плагином.


    1. ohm Автор
      12.07.2023 07:27
      +1

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

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


  1. Geek_and_Cat
    12.07.2023 07:27
    +1

    Спасибо, буквально то что нужно для моих будущих проектов!
    По функционалу могу предложить режим рисования с зажатой клавишей Shift (аналогичный есть в MS Paint), при котором линии рисуются либо под углом 0, 45 или 90 градусов, получаются квадраты вместо прямоугольников и круги вместо эллипсов.