iPhone на стене в качестве панели управления домом

09/03/2023 22:44:15

В течение последних 10-15 лет в области мобильных устройств, особенно смартфонов, наблюдается стремительный прогресс. Производительность и функциональные возможности выросли даже не в разы, а на порядки. Самые простые и бюджетные мобильные устройства сегодня способны в той или иной степени заменить компьютер, фотоаппарат, телефон, телевизор, медиаплеер и многое другое. Что уж говорить о флагманских моделях. Но у подобного прогресса есть и обратная сторона - быстрое моральное устаревание абсолютно исправных устройств. Иногда поводом для апгрейда служит даже не потребность в какой-то новой функции, а отсутствие поддержки и обновлений со стороны операционной системы. Разумеется, как только это происходит, цена смартфона резко падает. Мощный, функциональный, полностью исправный телефон с хорошим дисплеем не то, чтобы превращается в известный всем овощ, но продать его где-нибудь на авито возможно только за 2-5 тыс рублей. Притом с каждым днем стоимость таких устройств неуклонно снижается, не смотря ни на какие колебания курсов. И вот после распаковки очередного новогоднего подарка старая техника в самом расцвете сил отправляется на отдых в пыльную тумбочку. Вроде и не нужна больше, а отдавать за бесценок жалко. Пусть полежит.

В то же время прогрессивные слои населения, ну типа нас с вами, все чаще стали задумываться над проблемой повторного использования устаревших вещей, в том числе электроники. Тут смешались и экологическая повестка и проблема мусора и вопросы бережного использования ресурсов планеты и даже, в какой-то степени, известные всем ограничения на экспорт в Россию условных стиральных машин. Ведь в них чипы. А что, если использовать старые смартфоны в домашней автоматизации? Идея всем очевидная и далеко не новая, но как это может выглядеть на практике? Я расскажу про свой опыт, а заодно опишу некоторые новшества прошивки контроллера MegaD-2561.

Так случилось, что когда-то давно я подсел на технику Apple. Грешен, каюсь, обещаю исправиться. И спустя некоторое количество времени, я обнаружил в шкафу целую пирамидку морально устаревших айфонов различных версий, начиная с культовой 4-ки. Были тут и относительно современные iPhone 7 с экраном 4,7" разных цветов. Их было особенно жалко, так как на момент написания статьи семерки оставались еще вполне боевыми аппаратами. Только iOS 16 по доброй воле этого Тима Кука на них уже не вставала. Тут то и возродилась с новой силой давнишняя мысль использовать списанные телефоны в качестве этаких стационарных пультов управления и индикации Умного Дома. Но в этот раз я все-таки решил ее реализовать.

Вопроса было два:
1. Как это дело покультурнее приколхозить к стене?
2. Какое программное обеспечение использовать и каким именно образом?
Постараюсь ответить на эти вопросы по порядку.

Вешаем iPhone на стену или "как не испортить интерьер" 2.0

Пять лет назад я уже решал схожую проблему с отображением температуры на улице, описав свой опыт в статье "OLED дисплей SSD1306 в интерьере". Кстати, данное решение у меня по-прежнему используется. Только дисплей я заменил где-то через 3 года эксплуатации, так как при работе в режиме 24 на 7 дисплеи типа OLED имеют свойство "выгорать". Правда и цена у них копеечная.

OLED-дисплей SSD1306 с интерфейсом I2C в корпусе DSen-Box

При всех достоинствах, подобная реализация сегодня выглядит немного архаично. Особенно учитывая залежи весьма продвинутых, но совершенно безработных смартфонов. Дело за малым - прикрутить любой понравившийся телефон к стене и... Но, стоп! Нужно же обеспечить девайсу питание. При этом я бы не хотел, чтобы были видны какие-то провода, идущие к смартфону снизу, к разъему зарядки. Какой пустяк. Надо просто купить в Интернете какую-нибудь специальную рамку. Наверняка их миллион. Все уже придумано до нас. Ведь тема то не новая. Не тут то было... Сколько раз забрасывал я невод в пучину Интернета, сколько времени листал выдачу "волшебного" поиска алиэкспресса. Крокодил упорно не ловился. Единственное подходящее решение, которое я нашел, было у ребят из Smart Things, располагающихся в пригороде Мюнхена. Но "а" - цена вопроса (от 121 до 162 евро!), "б" - ну, вы сами понимаете...

sDock Nano - the sleekest (что означает самый гладкий) Smartphone Wall Mount

Что ж, если нельзя купить, значит надо сделать. Своими руками, конечно же. Из металла при отсутствии специального оборудования и опыта сделать приличную рамку, как у баварцев, практически невозможно. Пластик? Ну при таком тираже только 3D-печать. Да, это, как говорится, модно, стильно, молодежно, но нужен станок, 3D-модель и большое количество свободного времени. Такие штуки с первого захода не получаются. Но не это главное. Хотелось какой-то изюминки, чего-то особенного. Пластика вокруг и так с каждым годом становится все больше. К счастью есть альтернатива - старая, добрая, теплая, винтажная, экологичная деревяшка. Сосна, ель для этих целей не годится. Слишком мягкая. А вот дуб, бук, ясень или даже береза - вполне. Подходящий обрезок можно достать почти бесплатно. Я зашел в ближайшую столярку, и они мне за символическую сумму в 200 руб отгрузили с десяток обрезков от дубовых мебельных щитов. Какие-то были цельноламельные, а какие-то сращенные. Круто, нужно всего лишь вырезать в деревяшке отверстие под айфон. Звучит просто, но все оказалось чуть-чуть сложнее.

Эти вот цельноламельные. Красивое! Но если дело не выгорит, прекрасно займется в камине...

В стене, на котором у меня висит OLED-дисплей SSD1306 с фотографии выше, предусмотрительно заложен провод. Это обычная витая пара. До щитка метров 8 этого кабеля. У смартфона основной интерфейс для данных - беспроводный Wi-Fi. А вот питание придется подводить по проводам. Не заряжать же телефон каждый день. Можно было бы по витой паре пустить сразу 5В. Но я решил, что надежнее подвести 12В, а 5В делать каким-нибудь миниатюрным преобразователем на месте. Я нашел такие устройства на Алиэкспрессе. Размер 25 на 16 мм при высоте всего 9 мм. Толщина айфона 7 мм, а значит в рамку, сделанную из мебельного щита с общей толщиной 20 мм все это вполне поместится.

3А ЗУ для айфона своими руками за 99 руб. Легко!

В том же всенародно любимом магазине я прикупил Lightning разъемов по рупь за кило. Сначала я хотел использовать готовые Г-образные кабели Lightning-USB, поэтому выбрал DC-DC преобразователь с USB-выходом. Я даже приобрел один такой проводок. Но оказалось, что подобные кабели все же довольно громоздкие, толстые и имеют минимальную длину в 1 метр. Чисто теоретически упихать можно, но выборку под разъем Lightning в деревяшке пришлось бы делать довольно глубокой. В этом месте рамка получилась бы слишком тонкой - всего миллиметр. Поэтому решено было изготовить свой кабель питания нужной длины и без изоляции вокруг разъема. Тестирование показало, что в момент зарядки DC-DC преобразователь ощутимо греется, но когда зарядка завершена, его температура не сильно превышает комнатную. Но я все равно запланировал приклеить его на термоскотч к крепежной пластине. Кстати, со стороны 12В, iPhone 7 в режиме зарядки потребляет до 0.9А. Это стоит учитывать при подключении к блоку питания 230В->12В, если к нему подключена какая-то другая автоматика.

Крепление самой деревянной рамки я решил сделать так. В Леруа Мерлен, пока бобик еще жив, я нашел крепежную пластину размером 180х65х1.8. Ее я буду крепить к стене, а рамку уже к пластине. Как? С помощью неодимовых магнитов, под которые в рамке будут предусмотрены пропилы. Да и под саму пластину в рамке нужно сделать выборку, потому что иначе ее было бы видно сбоку, а я хотел, чтобы все выглядело кошерно.

Как-то так

Отдельный вопрос - как все эти выборки и пропилы сделать. Особенная сложность заключалась в том, что у семерке бока не прямоугольные, а скругленные. Я же мечтал, чтобы плоскость экрана была фактически в одном уровне с плоскостью рамки. А для этого требуется повторить внутри рамки профиль корпуса смартфона. У ребят из Smart Things алюминий. Он и сам по себе тонкий и прочностью достаточная. С деревом, даже дубом, возникли вопросы. Насколько внутренние кромки рамки, выведенные в ноль, будут надежны? Все это постепенно привело меня к мысли, что лобзиком, стамеской и напильником тут явно не обойтись.

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

Таким образом, ожидания были следующие. Красивая деревянная рамка из дуба, в которую как в кроватку укладывается и фиксируется держателями телефон. Сама рамка легкосъемная. При необходимости какого-то обслуживания, замены или использования телефона, мы просто снимаем ее со стены, преодолевая только усилие пары магнитов. Отключаем кабель питания и телефон в руках. Пара секунд. Сборка аналогичная. А теперь реальность.

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

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

"Heavy is good. Heavy is reliable. If it doesn't work, you can always hit him with it." (Boris "the Blade")

С обратной стороны рамка выглядит так. Крепежная пластина четко помещается в отфрезерованную для нее нишу и удерживается двумя магнитами 40x4x1 мм. Таким образом, когда рамка висит на стене, крепежную пластину не видно. А снять или установить рамку очень легко.

А вот, что мы увидим, сняв крепежную пластину. iPhone удерживается специально изготовленными фиксаторами из прочного текстолита. С лицевой стороны на экран можно совершенно спокойно нажимать, не опасаясь, что смартфон провалится внутрь. Магниты размещены сверху и снизу и под них в дереве также выбраны специальные пазы. Сами магниты приклеены цианоакрилатом (моментальным клеем). Разъем Lightning без внешней изоляции, так как в противном случае дерево нужно было бы фрезеровать глубже и в этом месте оно бы получилось слишком тонким. На фотографии припаяно только 2 провода. Это неправильно. Чтобы iPhone заряжался, потребовалось припаять все 4. DC-DC преобразователь планируется крепить к крепежной пластине двухсторонним термоскотчем. Так он не будет болтаться внутри рамки, а тепло при повышенной нагрузке будет отлично рассеиваться через толстый металл. Есть тут и еще один секретик. Обратите внимание на выемки в рамке слева и справа от покусанного яблока. Это углубления под кнопки. Дело в том, что если их не сделать, все боковые кнопки на корпусе телефона непременно будут нажаты при установке смартфона, что сделает невозможным его использование.

На мой вкус дубовые рамки для телефонов и планшетов выглядят не столько дорого-богато, сколько свежо, современно и я бы даже сказал по-хипстерски. Удивительно, но теплое дерево, кажется, отлично сочетается со всякими модными гаджетами из стекла и алюминия. Этакий симбиоз высоких технологий и чего-то натурального, брутального, настоящего. Кроме того, для лучшего соответствия интерьеру, дерево можно дополнительно покрыть цветным маслом. Например, цвета "саванна", "венге" или там "тропикано". Но все это лирика. А между тем, у подобного решения есть и свои недостатки. И главный - это горючесть дерева. Риск возгорания тут, пожалуй, минимальный, даже микроскопический, в сравнении с тем, как большинство людей используют мобильные устройства, заряжая их под подушкой, оставляя на мягкой мебели, забывая в груде тряпья. И все же он присутствует. Для снижения подобных рисков внутренние поверхности рамки можно на всякий пжарный обработать антипиренами, которые продаются в строительных магазинах.

Update от 24.04.2024. Печать крепления на 3D-принтере

Изготовление держателя смартфона из дерева оказалось довольно непростым делом. Для себя в штучных количествах сделать можно, но предложить готовое изделие со стабильным качеством другим пользователям сложнее. Время, затрачиваемое на фрезерование дуба с последующими ручными доработками, делало стоимость конечного продукта слишком высокой для идеи переиспользования старой техники с максимальной эффективностью и экономией. Поэтому я все-таки попробовал изготовить что-то подобное с помощью 3D-печати. Для этого я нашел готовый проект и существенно переработал его. Я изменил размеры для установки iPhone 7 (не плюс), сделал крупный вырез под ввод кабеля, так как в реальности из стены он может выходить не строго по центру, немного изменил внутренний профиль, чтобы разъем питания никуда не упирался, добавил упор снизу, сделал отверстия под саморезы, скруглил края у лицевой крышки (в оригинале они прямоугольные, что в реальности смотрится не очень), оформил отверстие под камеру и динамик (камера нужна, чтобы телефон мог автоматически подстраивать яркость экрана).

Пластик PETG (ПЭТ) черного цвета. При необходимости крепление можно окрасить в любой другой цвет аэрозольным балончиком. На ПЭТ такие краски держатся достаточно хорошо и без грунта. А можно и оставить как есть. Конечно, не так дорого и богато, как с дубом, но не менее функционально. К тому же такое крепление меньше и тоньше.

Места вокруг разъема мало, но уложить тонкий провод это не мешает. Я хотел сделать рамки вокруг экрана минимальными. А вот установить DC-DC преобразователь с USB выходом, о котором идет речь выше, в рамке под телефоном не получится. Мешает сам USB разъем. Выходов несколько. Во-первых, можно выпаять USB-разъем и припаять провода, идущие к Lightning напрямую. В этом случае преобразователь помещается между стеной и телефоном. Но на всякий случай необходимо будет проложить между преобразователем и корпусом телефона тонкую изолирующую прокладку, чтобы элементы преобразователя его не касались. Во-вторых, можно сделать небольшое углубление в самой стене. Преобразователь имеет размеры всего 25х16х9 мм. Третье решение - подводить к смартфону сразу 5В, а их готовить где-то в специальном шкафу или щитке. Если расстояние не слишком большое, это тоже в теории может работать, но тут уже нужно учитывать сечение жил питающего кабеля. Такой способ подключения следует предварительно протестировать.

По-моему, тоже неплохо. Кстати, подобное крепление для iPhone 7 (не Plus) доступно для заказа в нашем магазине.
В теории такое крепление тоже можно оформить и "под дерево" с помощью печати Wood-филаментом (PLA-пластик с добавлением частичек древесины). Но красивую структуру волокон натурального дерева такая технология, конечно, изобразить не сможет.

ПО для смартфона в качестве панели управления домашней автоматизации

С телефоном на стене все понятно. Не бог весть какая сложность. А что с софтом? Как выводить информацию, какую программу запускать, и что с этим вообще делать? Если говорить обобщенно, в системах домашней автоматизации есть два подхода, два различных сценария. Первый сценарий - у вас есть сервер. При наличии сервера, на котором установлено соответствующее ПО, проблема решается почти автоматически. У каждого уважающего себя программного продукта для Умного Дома есть и адаптированный к мобильным устройства Web-интерфейс и специализированные мобильные приложения для разных платформ.

Примеры мобильных приложений openHAB, Home Assistant, intraHouse

Как правило, в таких приложениях есть много всякой всячины. Сюда можно завести и управление освещением, в том числе диммерами и RGB-подсветкой, и контроль показателей различных датчиков с графиками, и работу с различными групповыми сценариями, и прочий цирк с конями. Конечно, серверное ПО еще нужно как следует настроить, а это далеко не всегда просто. Обилие конфигов, плагинов, виджетов, пресетов и интеграций может запутать даже хорошо подготовленного пользователя. Но в принципе, все доступно, а зачастую и абсолютно бесплатно, если вы умеете "open source" готовить. Ну а нет - помогут интеграторы и инсталляторы, съевшие на этом не одного померанского шпица.

Помимо полноценных систем, существуют варианты попроще. Например, можно интегрировать контроллеры MegaD-2561 в стандартное приложение "Дом" от Apple через специальные программные шлюзы. Например так, как я описывал в статье про Apple HomeKit. Похожим образом можно привязать управление любой автоматикой к умным колонкам типа Яндекс Алисы. Но для всего этого тоже нужен сервер. Ведь программам-шлюзам нужно где-то запускаться и работать.

Отдельная тема - собственное серверное программное обеспечение. Ну, знаете, апач, мускуль, пхп... тяп-ляп и в продакшн. Благо среди юзеров и тестировщиков - теща и кошки, на которых можно потренироваться. При всех сложностях, данное направление, традиционно игнорируемое большинством пользователей, предоставляет максимальную свободу действий. Здесь возможно вообще все. Я лично применяю именно этот подход, благодаря которому мне не приходится тратить время на углубленное изучение документации по настройкам ПО, если мне нужная какая-то новая функция или разбираться, почему вот эта кнопка перестала работать после апгрейда на новую версию. Я просто беру и делаю. Недостаток такого подхода заключается в том, что нужны некоторые базовые знания в области программирования. Требуется в общих чертах знать HTML, уметь в ванильный Javascript. Но даже если веб-разработка у вас вообще-то хорошая, но почему-то хромает, то, как говорится, stackoverflow и ChatGPT в помощь (пока все еще без VPN). Ахиллесова пята данного метода - уникальность. Случись чего, не каждый сможет или станет разбираться во всем этом ...коде.

Второй сценарий - сервера нет вообще. Временно нет или, как это часто бывает, планировался, но все руки не доходят. Возможно кто-нибудь из читателей решит, что таких пользователей мало. Однако правда заключается в том, что "бессерверные" инсталляции есть, и их большое количество. Контроллер MegaD-2561 довольно много умеет и самостоятельно. Реализация и поддержка Program, Cron, виртуальных портов, раздельных сценариев для разных событий, автономное управление диммерами, программные термостаты и масса всего другого позволяет в ряде случаев обходится и без сервера. Причем совершенно осознанно. Но у MegaD-2561 в таких системах есть слабое место - интерфейс взаимодействия с конечным пользователем и визуализация. Встроенный Web-интерфейс предназначен для настройки контроллера, но никак не для домохозяек, привыкших к тиктокам и вайберам. И на iPhone в красивом дубовом чехле, о котором идет речь в первой части статьи, его тоже запускать как-то не в тему.

Тогда я решил, что контроллеру нужен некий альтернативный Web-интерфейс, на который можно было вывести какие-то основные функции или информацию. Это может быть только отображение наружной температуры крупным шрифтом, как в примере с дисплеем SSD1306, а может показ целого ряда параметров, включая влажность, атмосферное давление, освещенность или уровень углекислого газа. Это могут быть кнопки управления сценариями освещения, приводом гаражных ворот или режимом сигнализации. Или комбинация того и другого. Словом, интерфейс должен в каком-то более-менее понятном обычному пользователю виде отображать показатели подключенных устройств и давать возможность управлять ими. Пусть не всех, но хотя бы основных. Так родилась идея функции, которую я назвал "Screens" (экраны).

Функция Screens в MegaD-2561 V3

Вот пример того, как специальный интерфейс MegaD-2561 (доступно только для версий V3 с прошивкой 4.59b9 и выше) может отображаться на экране мобильного устройства.

Здесь я вывел данные с датчика BME280, несколько кнопок управления освещением, а также большую кнопку отключения всех выходов. Набор блоков, их размеры, содержимое, иконки, расположение, количество экранов - все это настраивается самим пользователем! Как вам такое? Но стоит сразу оговориться, количество элементов, которые возможно настроить в рамках данного интерфейса ограничено. Таким образом, пользователь может самостоятельно сконфигурировать интерфейс для доступа к наиболее востребованным функциям или информации для вывода на экран настенного пульта или своего персонального телефона. А теперь расскажу, как это работает.

В настройках контроллера появилась новая ссылка "Screens".

Нажав на ссылку мы проваливаемся в этакий конструктор интерфейса.

В конструкторе можно увидеть два раздела: Screens (собственно, экраны) и Elements (элементы, визуальные блоки).
Всего в контроллере можно настроить 16 визуальных элементов (0-15) и 5 экранов (0-4). Один и тот же элемент можно вывести на разных экранах. Например, наружную температуру. Экранов несколько вот по какой причине. Допустим, в доме две-три настенных панели управления (смартфона). На разные пульты можно вынести различную информацию или кнопки. Другой вариант, когда на главный экран размещается основные элементы, не требуется прокрутка вниз, а второстепенные элементы вынесены на другие экраны, на которые можно при необходимости переключиться через меню.

Элементы типа Info

Коротко описание полей:

• Title - наименование элемента
• Type - тип элемента: Info (информационный блок) или Button (кнопка). Набор полей отличается. В данном случае рассматривается Info
• Icon - HTML-код иконки (в примере HTML-код термометра)
• Port - порт, который ассоциирован с информационным элементом
• Refresh - периодичность обновления информации в секундах
• Units - единицы измерения, которые выводятся рядом со значением (например, градусы, %, мм.рт.ст, ppm и т.д.)
• Look - размер элемента: Large (крупный на всю ширину), Medium (половина ширины), Small (четверь ширины и половина высоты)
• Font - коррекция размера шрифтов (например, -5 или +5)
• URL - строка GET-параметров, которые используются для запроса данных

Чуть подробнее. Как вы уже поняли, поддерживается кириллица. Русские буквы можно писать в полях Title, Icon, Units.
Icon и Units - поля текстовые. Но в них можно указать код HTML-символов. В микроконтроллере ресурсы ограничены, массив иконок хранить не сликшом целесообразно, тогда как все современные браузеры умеют отображать так называемые HTML-символы и HTML-сущности. Таких иконок, символов, пиктограмм поддерживается очень много, почти на все случаи жизни. В Интернете можно найти большое количество сайтов, содержащих обширные таблицы с кодами таких символов. А можно просто спросить в Гугле.

Идея в том, что таким образом можно здорово сэкономить на ресурсах, но при этом повысить визуальную привлекательность и информативность Web-интерфейса. Достаточно указать в соответствующее поле код символа. Иконка для справки будет отображаться рядом с полем. Плюсов у такого решения много. Среди них возможность менять размер иконки с помощью поля Font. Но есть и минусы. Дело в том, что нет никакого общего стандарта, как эти иконки должны выглядеть. В разных браузерах и в разных операционных системах они отображаются абсолютно по-разному. Изображение иконок меняется даже в зависимости от версии iOS.

Еще один нюанс касается поля Units (единицы измерения). Символ градуса Цельсия или "%" логично указывать рядом со значением. А вот что-нибудь вроде "мм.рт.ст" тем же шрифтом визуально будут перевешивать отображаемое значение. Конструкция будет выглядеть громоздко. Поэтому при вводе единицы измерения в поле Units можно вначале добавить символ подчеркивания: "_мм.рт.ст". В таком случае контроллер отобразит эту надпись ниже и мелким шрифтом.

Поля Port и URL необходимы для запроса и отображения внутри элемента требуемой информации. Разберем на примере. К порту P34 контроллера подключен датчик температуры DS18B20 (режим Dsen/1W). В этом случае можно указать в поле Port: 34 (номер порта), а поле URL оставить пустым. При такой конфигурации браузер отправит контроллеру стандартный запрос типа:

http://192.168.0.14/sec/?pt=34&cmd=get

То есть, в пользовательском интерфейсе будет отображаться информация, которую контроллер возвращает по запросу "cmd=get" для указанного порта. Но что, если к порту подключен датчик, который отдает несколько значений. Как, например, BME280 (температура, атмосферное давление, влажность) или комбинированный MegaD-WallMount-Sensor-CO2, состоящий из нескольких датчиков: HTU21D, MAX44009, T6703. В случае с BME280 по запросу cmd=get мы получим все три значения в формате: "temp:25.00/press:752.38/hum:21.488", что визуально поломает интерфейс. Для решения этой проблемы предусмотрено поле URL, в котором можно указать параметры для запроса конкретного значения. Для получения температуры от BME280, который подключен к SDA (P31), SCL (P30) я использовал следующую строку:

pt=31&scl=30&i2c_dev=bmx280&i2c_par=1

Описание подобных параметров для всех датчиков, которые поддерживаются контроллером MegaD-2561, можно найти в документации.

Следующее важное поле - Refresh. Периодичность обновления данных. Для каждого элемента интерфейса можно указать свою периодичность в диапазоне от 1 до 65535 секунд. Да, можно обновлять данные очень часто, раз в секунду, но следует помнить, что это создаст дополнительную нагрузку на контроллер. Особенно если речь идет о "медленных" датчиках. Поэтому для климатических и погодных сенсоров вполне подойдет обновление с частотой раз в 2-5 минут (значение в диапазоне 120-300). Все зависит от конкретной задачи.

Последнее поле, которое требует пояснения - Font. По умолчанию в прошивке контроллера заложены некоторые базовые пропорции в части размера шрифтов. Но пользователю может потребоваться отображать какой-то элемент покрупнее или помельче. В этом случае можно скорректировать размер шрифта в px (пикселях) в ту или иную сторону (-10 или 20). Пропорционально будет увеличиваться или уменьшаться все содержимое элемента: наименование, единицы измерения, иконка.

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

Вот, как отображается интерфейс с одинаковыми настройками в браузерах Safari (iOS) и Chrome (Android). Различий не мало.

Safari (iOS) слева, Chrome (Android) справа

Элементы типа Button

У кнопок (Type: Button) набор полей и их назначение практически идентично. Отличие в том, что нет поля Units, но зато есть поле Act.
Act - сценарий, который выполняется по клику на элемент. Само собой разумеется, что здесь поддерживаются все стандартные команды для внешних сценариев. Сценарий считается внешним, так как фактически его запускает браузер устройства. Здесь можно управлять группами, портами расширителей, использовать паузы (с известными ограничениями). Поэтому кнопка может не быть жестко связана с каким-то конкретно портом, а запускать совершенно произвольный сценарий. Но визуальное состояние кнопки, а на скринах это фон (желтый - включено, белый - выключено), синхронизируется с состоянием конкретного порта, который указан через поле Port или URL. Таким образом состояние можно синхронизировать и с портами модулей-расширителей, так как для них доступны команды типа: pt=31&ext=0&cmd=get.

Экран

В верхней части настроек "Экрана" присутствует ссылка "Screen 0". По клику на эту ссылку в новом окне браузера и будет открываться, собственно, сам интерфейс экрана #0. Таким образом, изначально попасть в пользовательский интерфейс можно либо через настройки контроллера, либо указав URL напрямую вида: http://192.168.0.14/sec/?screen=0
где в качестве параметра "screen" указывается номер экрана. О том, как сохранить ссылку в виде иконки приложения (WebApp), описано ниже.

• Title - наименование. Если экран один, это поле можно оставить пустым, тогда оно не будет отображаться в интерфейсе.
• Theme - тема (Auto, Light, Dark)

Поле Theme работает так. Если выбраны опции Light или Dark, то тема интерфейса будет светлой (темный шрифт на белом фоне) или темной (светлный шрифт на черном фоне). Но если выбрано Auto, интерфейс будет автоматически переключаться на тему, которая установлена в смартфоне. Например, iPhone может самостоятельно в вечернее и ночное время переходить на темную тему. Она же автоматически включится и при отображении экранов Web-интерфейса. Перезагружать страницу для этого не нужно! Это очень важная и интересная фича в особенности, когда смартфон установлен на стену в качестве индикатора или панели управления. Как мне кажется, днем комфортнее воспринимать информацию на светлом фоне, но вот ночью подсветка белого фона экрана будет работать не хуже ночника и может мешать, поэтому автоматический переход в темную тему - штука полезная.

Вот, как будет выглядеть тот же набор элементов в темной теме на iPhone.

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

Возвращаясь к настройкам экрана, следует еще уточнить по поводу раздела Element selector. Здесь можно выбрать те преднастроенные элементы, которые будут отображаться на текущем экране. Повторю, все 16 элементов доступны для любого экрана. Это позволяет использовать одни и те же элементы на разных экранах. Конечно, количество элементов не так много, как хотелось бы. Но, как я уже говорил, это связано с ограниченными ресурсами энергонезависимой памяти контроллера. А выносить в подобные пользовательские интерфейсы все порты и устройства, которые подключены к контроллеру, чаще всего и не нужно.

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

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

Подобный стиль отображения доступен только для элементов типа Info и не доступен для Button (кнопок).

Если контроллер работает в автономном режиме и использует функцию термостатов, то уставку термостата можно менять с помощью "Screens".
Вот, как это может выглядеть.

Пример настроек элемента, с которыми выводится дополнительная плашка управления термостатом.

Для этого в настройках блока должен быть прописан порт, который настроен как DSen/1W.
Чтобы появилась плашка управления уставкой термостата, необходимо изменить тип блока с Info на Button (как на скрине выше).
Поле URL в данном случае используется не для запроса данных с датчика (для этого используется поле Port), а для указания дополнительных параметров: step и mem

"step" - шаг изменения уставки термостата. По умолчанию "0.1"
"mem" - запись изменения уставки в EEPROM. По умолчанию изменения не записываются в энергонезависимую память.

Особенность. В данный момент плашка управления термостатом отображается на всю ширину экрана. То есть, блок с температурой должен быть задан как Look: Large. Связано это с тем, что в размерах Medium и Small использовать плашку нормально практически невозможно.

Связанные с данной темой параметры для управления уставкой с сервера.
http://192.168.0.14/sec/?pt=34&misc=+&step=0.5&mem=1
Поле "misc" принимает следующие значения:
конкретное значение уставки. Например: 24.5
символ "+" для увеличение уставки на шаг, заданный параметром "step". По умолчанию 0.1
символ "-" для уменьшения уставки на шаг, заданный параметром "step". По умолчанию 0.1
"get" для запроса текущего значения уставки (без дополнительных параметров)

 

Следующий вопрос - быстрый доступ к пользовательскому интерфейсу. С тех пор, как наши "западные партнеры" из цивилизованного мира стали ограничивать доступ к магазинам приложений, в моду резко вошли так называемые веб-версии программ. Особенно активно этим стали пользоваться банки, попавшие под санкции. Web App по сути своей сохраненная ссылка на сайт, которая открывается в браузере устройства. Этой технологией воспользуемся и мы. В iOS нужно просто нажать кнопку "Поделиться" и выбрать опцию "На экран Домой". Название иконки можно сделать любым. Вот, как это выглядит на iPhone. Иконка для веб-приложения хранится в прошивке контроллера.

На телефонах под управлением Android это работает аналогичным образом.

Добавлю еще, что если ссылка на пользовательский интерфейс оформлена на экране Домой как веб-приложение, то после запуска на iPhone панель инструментов (строка URL) отображаться не будет. Это немного увеличит полезную площадь экрана. Адресная строка не будет все время маячить перед глазами, если телефон висит на стене. К сожалению в iOS пока нельзя убрать верхний статус бар, где отображаются часы, уровень заряда и прочая информация. Специально исследовал этот вопрос. Скрыть (замаскировать белой заливкой) его можно только для светлой темы. В темном оформлении он все равно будет виден.

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

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

 

Автор: Andrey_B
Любое использование материалов сайта возможно только с разрешения автора и с обязательным указанием источника.

---

Добавить комментарий:

Имя

Е-mail(необязательно, не отображается на сайте)

Комментарий

---

Сортировка комментариев: Последние сверху | Первые сверху

2025-05-04 09:28:59 | sergt78
"Неужели у вас нет полнофункционального серверного ПО?"
Есть конечно, но для резерва было бы полезно иметь локальное управление напрямую. Пробовал сохранить элемент кнопка и указать ссылку на нулевой экран другой меги, не работает, пробовал ссылку на нулевой экран другой меги с внешним адресом другой меги, при сохранении ссылка сама правится за главную страницу меги, стоит защита от таких ссылок.
Прошу рассмотреть и добавить переходы по ссылкам на экраны 0, 1 и т.д. с указанием адреса другой меги типа "ip/sec/?screen=х", не хранить же на экране телефона 2-4 ярлыка для разных мег

2023-10-16 22:40:57 | Сергей
Спасибо, Андрей и за оперативные ответы-пояснения, и за новую прошивку! Реально приятно пользоваться таким продуктом! Некоторые моменты (такой как этот), если не "варишься" в этом регулярно, осознаешь только ретроспективно)

2023-10-16 21:57:47 | Andrey_B
Сергей, в статье упоминается, что поле URL - это "строка GET-параметров, которые используются для запроса данных", а не полный URL и приведен конкретный пример такой строки. В поле URL указывается все, что после пароля.

2023-10-16 16:28:21 | Сергей
Решил поэкспериментировать, и ввел следующие "ссылки"
без адреса в сети вида: sec/?pt=30&cmd=get&addr=1aa981e3af3c
и даже без пароля: вида: ?pt=30&cmd=get&addr=1aa981e3af3c
В обоих случаях функционирует))

2023-10-16 16:22:34 | Сергей
Обновил прошивку, только вот такой момент, сразу не заметил(хотя еще при прошлой попытке настроить промелькивало, но не обратил внимания) Видимо длина поля URL ограничена? целиком не дает ввести адрес, при сохранении обрезается, и выдается значение -0.06. Прямая ссылка отображает температуру верно!

2023-10-15 18:27:17 | Andrey_B
Сергей, обновите прошивку до версии 4.61b8. Добавил возможость указать для команды "get" адрес. Пример: 192.168.0.14/sec/?pt=34&cmd=get&addr=bab8690d0000

2023-10-15 01:59:06 | Сергей
Андрей, спасибо за подробные инструкции! Но вот не разобрался, как можно отобразить температуру с датчиков подключенных по 1WBUS, или это в принципе средствами Screens не возможно сделать? Если просто порт указать , то отображается Device List.

2023-05-11 07:59:19 | Алексей
Крууутоо! А я вот тооолько настроил на андроиде приложение для отправки GET запросов, а тут такая красотища подъехала!
Походу снова не высплюсь.(
Спасибо!

2023-04-23 16:05:06 | Andrey_B
Stanislav, данная функциональность поддерживается только для контроллеров V3, поскольку в них установлена дополнительная энергонезависимая память.

2023-04-23 12:05:38 | Stanislav
Здравствуйте Andrey_B, а как быть нам со старыми мегами, просто тоже охота такой функционал.

2023-04-08 09:53:45 | Andrey_B
arsken, скрипт скачивает прошивки с сайта. Чтобы скрипт загружал последние версии прошивок, необходимо использовать ключ -b. Подробнее в инструкции.

2023-04-07 15:48:15 | arsken
Скрипт /ab-log.ru/files/File/megad-cfg/megad-cfg-2561.zip возвращает версию 4.59b8
Планируете поменять на 4.59b9 ?

2023-03-20 13:54:02 | sergt78
Я к тому чтобы сделать в настройках сделать поле/поля для ввода IP и в интерфейсе ссылку на другую/другие Мегу/Меги, а там браузер сам перебросит на другую страничку уже со своими настройками интерфейса.
Вроде дополнений не много, а удобство , чтобы перейти на интерфейс другой Меги не придется сворачивать страницу и открывать другой ярлык.

2023-03-13 21:21:34 | Andrey_B
sergt78, понимаю желание иметь такие штуки. Но думаю и вы понимаете, что Мега изо всех сил старается взять на себя функции полноценного сервера, не являясь им. Все же контроллер - это умный, высоконадежный исполнитель с широкими возможностями автономной работы. Но по части пользовательского интерфейса есть ограничения. Я подумаю, что тут можно сделать, но задача на первый взгляд не такая простая, как кажется. Настройки конструктора интерфейса и так заняли приличный объем внешней энергонезависимой памяти. Неужели у вас нет полнофункционального серверного ПО?

2023-03-13 06:31:22 | sergt78
Андрей, давайте подумаем по интеграции в интерфейс кнопок перехода на страницы других Мег, чтобы было все в одном интерфейсе. Конечно кто то скажет что достаточно будет сделать несколько web ссылок на требуемое количество Мег. Но мне кажется что будет более удобным реализовать все как на одной странице, но с относительными ссылками. Ну и вишенка на тортик, это использование ссылок типа /192.168.0.ХХ/sec/?pt=31&scl=30&i2c_dev=bmx280&i2c_par=1 с использованием нескольких Мег, так как думается что у большинства их не одна в УД, так как аппетит приходит во время еды.

2023-03-11 10:43:35 | Andrey_B
Спасибо, друзья!
Alido, что касается постоянного подключения к питанию. Я поискал различные мнения и опыт людей в Интернете. Сделал вывод, что в этом нет никакой проблемы. Контроллер заряда в смартфоне должен обеспечить нормальную и безопасную работу. Что касается аккумулятора, то тут еще вопрос, что для него хуже, быть высаженным в ноль в процессе хранения или постоянно находиться в состоянии 100% заряда. Ну и все же по первоначальной задумке на стену должны попадать смартфоны с уже уставшим аккумулятором. Не жалко.
А что не так с подчеркиванием в Units? Если оно идет вначале, это равнозначно переносу на следующую строку. В чем проблема с этой фичей?
Конечно, настроек в конструкторе интерфейса можно было бы предусмотреть множество, но тут главным образом все упирается в ресурсы микроконтроллера. Хотя предложенные идеи интересные.

2023-03-11 02:24:00 | Alido
Как всегда -- просто шикарное развитие проекта! Спасибо &128591;

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

Экраны, даже как пробный вариант сейчас — просто шикарны! Из интереса глянул даже ваш код страниц — очень даже неплохо, реализовано элегантно и аккуратно (тем более имея такие ресурсы, как в Меге). Немного всякого попробовал. Работают метки, кнопки. Не сработала у меня только фича с подчеркиванием в untis (просто переносит на новую строку) — хотя вроде бы все верно указывал.
Из хотелок, наверное, хотелось бы немного украшательств в плане индикации инфо блоков: например, возможность задать hex цвета для каждого блока (скорее всего отдельно для темной/светлой темы). Ну а предел мечтаний: интервальные расцветки значений (достаточно указания диапазона для числовых величин) — ниже опред. интервала, внутри интервала и выше: так будет легко и быстро считываться информация о нештатных ситуациях (по факту достаточно 2 поля для интервала и 3 цвета, могут быть даже неизменяемые, типа черный/белый, красный, зеленый, желтый). Не знаю, насколько реальны такие запросы — все же контроллер не резиновый :)
В целом -- очень хорошо, особенно авто-тема (проверено -- работает!).

2023-03-10 21:24:14 | Ruslan
Спасибо за статью и новый функционал! Как всегда получил огромное удовольствие от чтения. За иронию и юмор отдельная благодарность. Пусть многое из новшеств носит экспериментальный характер и, вероятно, будет со временем дорабатываться, уверен, что все это обязательно будет востребовано у пользователей. Хотя бы в качестве простейшего интерфейса УД. А там, глядишь, и до сервера дойдет...

2023-03-10 17:36:31 | коля
Андрей Вы молодец. Читаю в захлёб.... Так хотел такую фунцию. И вот она появилась. Горю желанием попробовать как будет минута! Что касаемо рамок для телефонов планшетов и тп - тоже потратил уйму времени и бестолку. Спасибо что все время что то дополняете.