Hardware User Interface Mockup Kit

Отрицание.

После того как я в очередной раз не смог объяснить в беседе идею управления своим устройством — мне засела в голову мысль что неплохо было бы иметь какой-то инструмент для упрощения этой задачи и одновременно с этим уменьшения времени затраченного на цикл "сборка — тестирование — осознание неудобства — выкидывание прототипа в мусор — депрессия - придумывание новой концепции управления©".

Гнев.

Бомбардирование поисковиков бесчисленными вариантами фраз содержащих "hardware mockup" не привело абсолютно ни к чему. Если для дизайна самой панели управления и было что-то более-менее работоспособное (но тем не менее сильно уступающее по удобству тому же SolidWork), то для прототипирования логики управления найдено было абсолютное ничего. А это значит...

Принятие.

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

Я тесно связан с веб-технологиями, так что выбор языка для программирования был очевиден, JavaScript, а для упрощения кода и изучения чего-то нового я выбрал фреймворк Svelte. Эта связка позволит очень быстро писать логику, тестировать её на лету, инкапсулировать код компонентов, и упростит (в моих мечтах конечно) применение моего инструмента (huimk, см. название статьи) до уровня классической салфетки с почеркушками. Интерактивной салфетки с почеркушками.

HUIMK

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

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

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

Для начала определимся с тем что наш код разбит на два раздела, "верстка" и "логика". В "верстке" мы составляем из компонентов наш интерфейс, на почти обычном HTML. В "логике" мы на JavaScript описываем логику работы. Чтобы понять как и почему всё работает именно так — я советую познакомиться со Svelte, благо его туториал (интерактивный!) проходится примерно за час.

Итак, из UI у нас на модуле есть:
8 светодиодов
8 светодиодных индикаторов
8 кнопок

Чтобы к ним обращаться из секции логики, давайте обозначим их обьекты и создадим их в цикле:

Светодиодные индикаторы мы не создаем в цикле, так как компонент семисегментного индикатора инкапсулирует весь дисплей за нас, см ниже.

Как будет выглядеть верстка для всего этого великолепия? Довольно просто:

Мы создаем панель на которой в цикле создаем наши светодиоды, их свойство active зависит от соответствующего свойства объекта.

Затем на отдельной панели мы создаем светодиодный дисплей с восемью символами (ledCount="8"). Конструкция bind:this={ledDisplay} указывает что в переменной ledDisplay хранится ссылка на именно этот объект дисплея.

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

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

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

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

Теперь в обработчике нажатия кнопки будем выводить фразы на дисплей исходя из id нажатой кнопки:

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

Давайте попробуем что-то посложнее.

Фиджет

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

Код логики будет занимать чуть больше чем удобно показать картинками, так что вот ссылка. Код отрисовки куба взят из примера для ардуино написанном на С++, с мелкими правками синтаксиса.

Что у нас получилось:

Но вот проблема, мне кажется что пиксель дисплея какой-то мелкий, плюс я бы хотел посмотреть как это всё выглядит на черно-белом OLED дисплее. Меняю у компонента дисплея два параметра:

scale=2
pixelFormat={pixelFormatEnum.bw}

При этом мы не трогали остальной код.

Признаю честно, я скрыл некоторые моменты относящиеся к служебным, такие как импортирование компонентов, стиль приложения (пока что он настраивается только через CSS) и функцию которая обеспечивает вызовы mainInit и mainLoop, но это буквально 20-30 строк несложного кода.

Ссылки и послесловие

Если кто-то хочет пощупать как оно всё работает на практике:

Разработка на основе текущего слепка github'a прямо в браузере (REPL).

Или классически: установить Node.js.

git clone https://github.com/DrZlo13/huimk.git
cd huimk
npm install
npm run dev

И в браузере открыть http://localhost:5000/. Запустится демо объединяющее в себе всё что я описал выше.

Так же очень советую пролистать туториал Svelte.

Повторю ещё раз, инструмент разрабатываемый мной находится на стадии прототипа, и в дальнейшем будет дорабатываться и меняться. Ближайшие планы — полностью уйти от необходимости использования CSS, доработать графическую систему дисплея, сделать "верстку" панели с использованием реальных систем измерения (будет удобно даже просто накидать интерфейс без логики) и добавить новые компоненты. Для отслеживания я веду доску в Trello с трекингом разработки.

Есть идеи что улучшить? Что обсудить? Создайте issue на Github или напишите прямо мне, в Telegram, @Dr_Zlo13.