Интерфейс EasyHome с нуля

Автор: | Ноябрь 11, 2019
0

Многих, по моим ощущениям, сильно пугает возможность делать любой интерфейс EasyHome по своему желанию. Люди привыкли к стандартным интерфейсам приложений, в которых можно добавлять и убирать какие-то пункты, но нельзя создавать интерфейс полностью.

EasyHome позволяет делать любые интерфейсы свободно: менять фоны, расположение значков, надписи, иконки, цвета. Можно почитать статью «Красивые интерфейсы EasyHome», чтобы понять разнообразие вариантов.

Сейчас я покажу, как можно сделать интерфейс управления для квартиры. В моём примере задачи решаются такие: управления радиаторами в 5 комнатах, охранная сигнализация на базе датчиков открывания окон и дверей, один датчик дыма. Всё достаточно просто.

Интерфейс EasyHome с нуля

Я буду создавать для наглядности интерфейс с нуля. Но буду делать его через редактирование файлов xml, так удобнее и быстрее, на мой взгляд. Скачаем с сайта разработчика инженерный интерфейс, который нужен для настройки. Он выглядит так:

В папке с дистрибутивом EasyHome на Windows я создаю новую папку example.ehp, в неё перемещаю из инженерного интерфейса картинки (папка img) и основной файл настроек программы config.xml. Получаю такое содержимое папки:

Интерфейс EasyHome с нуля

config.xml

Заходим в config.xml — это основной файл настроек программы. Нас тут интересуют два момента: ip адрес контроллера и настройки экрана.

Интерфейс EasyHome с нуля

ipaddress и ipaddress2 — два ip адреса, по которым программа пытается подключиться к контроллера. Сначала пробует по первому, потом, если по первому не получилось, по второму. Первым обычно выставляется локальный адрес, вторым глобальный при наличии статического ip и проброса портов. ipport — порт подключения, по умолчанию он 502, можно поменять в настройках контроллера на любой другой, как и ip адрес. Замечено, что многие роутеры Huawei не умеют пробрасывать порт с номером ниже 1024, в этом случае делаем любой порт с большим номером.

В конце файла настройки, отвечающие за масштабирование элементов.

Интерфейс EasyHome с нуля

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

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

main_config.xml

В файле main_config.xml описана главная страница приложения. Уберём оттуда всё лишнее, то есть, вообще всё, кроме первой служебной строчки и открывающего и закрывающего тэга subsystems. В тэге прописаны название страницы и фоновая картинка. У меня в качестве фоновой картинки сейчас маленький файл png, залитый ровным тёмно-синим цветом.

Интерфейс EasyHome с нуля

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

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

Интерфейс EasyHome с нуля

Для климата имя файла писать не надо (как и не надо было бы для света), так как в программе прописано, что за климат отвечает файл heat_config.xml, а за свет light_config.xml. Остальные названия используем свободно. Запускаем программу и получаем картинку:

Интерфейс EasyHome с нуля

Вот три наших ссылки, которые пока никуда не ведут. За их содержание будут отвечать соответствующие файлы heat_config.xml, alarm.xml и service.xml.

Фон

Красивый визуальный фон для управления климатом и сигнализации делаем из плана мебели квартиры. Нам нужно получить картинку в формате PNG с прозрачным фоном. План мебели из PDF я копирую в буфер обмена просто скриншотом и вставляю в мой любимый Photo Filtre. Далее инструментом «волшебная палочка» выделяю всё белое вокруг плана квартиры и удаляю его, чтобы там была прозрачность.

Интерфейс EasyHome с нуля

heat_config.xml

Я взял файл полностью из инженерного интерфейса. Выглядит он так:

Интерфейс EasyHome с нуля

Затем из него я удаляю всё ненужное в моей задаче. Можно по очереди нажимать на Удалить элемент и на элемент, а можно просто удалять ненужное из файла, строчками кода.

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

Сохраняю фон окна в PNG и вставляю его на фон страницы управления радиаторами в файле heat_config.xml.

Интерфейс EasyHome с нуля

Следующий шаг: располагаю на плане термостаты для управления температурой в комнатах. В настройках термостатов выставляю номер, соответствующий номеру зоны, также покрупнее шрифт.

Интерфейс EasyHome с нуля

Для удобства управления выношу на этот экран кнопки выставления температуры во всех зонах сразу из настроек. Кнопка Климат переключает режим из ЭКО в обычный.

Интерфейс EasyHome с нуля

alarm.xml

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

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

Интерфейс EasyHome с нуля

В настройках охраны следующее:

Интерфейс EasyHome с нуля

По ссылке «Пароль» — ввод пароля охраны.

Интерфейс EasyHome с нуля

service.xml

В общих настройках по ссылке с главной страницы вынесено всё, что не попало в другие категории настроек.

Интерфейс EasyHome с нуля

Наконец, вид главной страницы:

Интерфейс EasyHome с нуля

Здесь основные показатели и ссылки на подсистемы.

Вот так на простом примере мы сделали интерфейс приложения. Разумеется, средняя система на базе EasyHomePLC имеет гораздо больше возможностей и, следовательно, окон программы.

103 просмотров всего, 2 просмотров сегодня

0

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

Ваш e-mail не будет опубликован.