Создание интерфейса Умного Дома EasyHome - «Умный Дом и решения» » Умный Дом и решения
Создание интерфейса Умного Дома EasyHome - «Умный Дом и решения»

Новинки / Производитель / Бренд / СТАТЬИ

Создание интерфейса Умного Дома EasyHome - «Умный Дом и решения»

  • Аграфена
  • 11-ноя-2019, 20:32
  • 0 комментариев
  • 2 431 просмотров

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

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

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

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

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

Создание интерфейса Умного Дома EasyHome - «Умный Дом и решения»

config.xml

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

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

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

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

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

main_config.xml

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

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

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

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

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

Фон

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

heat_config.xml

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

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

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

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

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

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

alarm.xml

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

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

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

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

service.xml

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

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

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

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

Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.
Многих, по моим ощущениям, сильно пугает возможность делать любой интерфейс EasyHome по своему желанию. Люди привыкли к стандартным интерфейсам приложений, в которых можно добавлять и убирать какие-то пункты, но нельзя создавать интерфейс полностью. EasyHome позволяет делать любые интерфейсы свободно: менять фоны, расположение значков, надписи, иконки, цвета. Можно почитать статью «Красивые интерфейсы EasyHome», чтобы понять разнообразие вариантов. Сейчас я покажу, как можно сделать интерфейс управления для квартиры. В моём примере задачи решаются такие: управления радиаторами в 5 комнатах, охранная сигнализация на базе датчиков открывания окон и дверей, один датчик дыма. Всё достаточно просто. Я буду создавать для наглядности интерфейс с нуля. Но буду делать его через редактирование файлов xml, так удобнее и быстрее, на мой взгляд. Скачаем с сайта разработчика инженерный интерфейс, который нужен для настройки. Он выглядит так: В папке с дистрибутивом EasyHome на Windows я создаю новую папку example.ehp, в неё перемещаю из инженерного интерфейса картинки (папка img) и основной файл настроек программы config.xml. Получаю такое содержимое папки: config.xml Заходим в config.xml — это основной файл настроек программы. Нас тут интересуют два момента: ip адрес контроллера и настройки экрана. ipaddress и ipaddress2 — два ip адреса, по которым программа пытается подключиться к контроллера. Сначала пробует по первому, потом, если по первому не получилось, по второму. Первым обычно выставляется локальный адрес, вторым глобальный при наличии статического ip и проброса портов. ipport — порт подключения, по умолчанию он 502, можно поменять в настройках контроллера на любой другой, как и ip адрес. Замечено, что многие роутеры Huawei не умеют пробрасывать порт с номером ниже 1024, в этом случае делаем любой порт с большим номером. В конце файла настройки, отвечающие за масштабирование элементов. В width и height выставляем значения, соответствующие разрешению экрана устройства, на которое будем ставить программу. Если на устройстве с высоким разрешением значки будут слишком мелкими, то в файле можно цифры уменьшить, сохраняя соотношение сторон, тогда все значки станут крупнее. Зависит от количества элементов на экране. Далее мы будем создавать файлы и переносить элементы и разделы прямо строчками кода из инженерного интерфейса в наш новый интерфейс. Есть ещё обратный вариант — скопировать полностью инженерный интерфейс и прямо из программы удалять из него всё лишнее, тут выбор способа зависит от того, сколько элементов вам нужно в пользовательском интерфейсе. Если совсем мало (как в нашей задаче), то проще копировать нужное, чем удалять ненужное. main_config.xml В файле main_config.xml описана главная страница приложения. Уберём оттуда всё лишнее, то есть, вообще всё, кроме первой служебной строчки и открывающего и закрывающего тэга subsystems. В тэге прописаны название страницы и фоновая картинка. У меня в качестве фоновой картинки сейчас маленький файл png, залитый ровным тёмно-синим цветом. Сделаем на главной странице три иконки ссылок на разные разделы приложения: управление радиаторами, охрана и настройки. В настройки поместим всё, что не должно бросаться лишний раз в глаза, но может потребоваться. Может, вынесем на главную страницу позднее ещё какие-то элементы. В файл вставляю три строчки ссылок на три разных файла xml, в которых будет прописано содержимое соответствующих разделов. Можно добавлять эти ссылки и через приложение. Для климата имя файла писать не надо (как и не надо было бы для света), так как в программе прописано, что за климат отвечает файл heat_config.xml, а за свет light_config.xml. Остальные названия используем свободно. Запускаем программу и получаем картинку: Вот три наших ссылки, которые пока никуда не ведут. За их содержание будут отвечать соответствующие файлы heat_config.xml, alarm.xml и service.xml. Фон Красивый визуальный фон для управления климатом и сигнализации делаем из плана мебели квартиры. Нам нужно получить картинку в формате PNG с прозрачным фоном. План мебели из PDF я копирую в буфер обмена просто скриншотом и вставляю в мой любимый Photo Filtre. Далее инструментом «волшебная палочка» выделяю всё белое вокруг плана квартиры и удаляю его, чтобы там была прозрачность. heat_config.xml Я взял файл полностью из инженерного интерфейса. Выглядит он так: Затем из него я удаляю всё ненужное в моей задаче. Можно по очереди нажимать на Удалить элемент и на элемент, а можно просто удалять ненужное из файла, строчками кода. Я удалил вообще всё, кроме пункта Настройки. Статистику по воздуху переместил в Настройки. Фон поменял на стандартный синий, изменил название окна на Радиаторы. Если бы зон отопления было больше, а отопление включало в себя не только 5 групп радиаторов, но и полы, кондиционеры и вентиляцию, то многие пункты можно было бы оставить. Но в моём примере система простая. Из Настроек я также удалил всё связанное с кондиционерами и вентиляцией. Сохраняю фон окна в PNG и вставляю его на фон страницы управления радиаторами в файле heat_config.xml. Следующий шаг: располагаю на плане термостаты для управления температурой в комнатах. В настройках термостатов выставляю номер, соответствующий номеру зоны, также покрупнее шрифт. Для удобства управления выношу на этот экран кнопки выставления температуры во всех зонах сразу из настроек. Кнопка Климат переключает режим из ЭКО в обычный. alarm.xml Для системы охраны я взял из инженерного интерфейса этаж Охранная сигнализация из раздела Подсистемы. Будем его приспосабливать под нашу задачу. Там есть сразу и все нужные настройки, и ссылки. По аналогии с радиаторами, ставлю на фон экрана план квартиры, далее располагаю на этом экране все датчики и кнопки настроек. В настройках охраны следующее: По ссылке «Пароль» — ввод пароля охраны. service.xml В общих настройках по ссылке с главной страницы вынесено всё, что не попало в другие категории настроек. Наконец, вид главной страницы: Здесь основные показатели и ссылки на подсистемы. Вот так на простом примере мы сделали интерфейс приложения. Разумеется, средняя система на базе EasyHomePLC имеет гораздо больше возможностей и, следовательно, окон программы.


Комментарии (0)
img
Эфирные радиостанции теперь доступны всем пользователям умных устройств от Сбера - «Умный Дом и решения»

Эфирные радиостанции теперь доступны всем пользователям умных устройств от Сбера Москва, 27 января 2021. Компании SberDevices, СберЗвук и ассоциация

Категории сайта
Разное

Производитель и новинки производства

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

       89a39215
img
Производитель / Новинки / Умные Решения
SwitchBot выпустила клавиатуру для умного замка с распознаванием ладони - «Умный Дом и решения»

Компания SwitchBot представила новую умную панель Keypad Vision Pro с распознаванием пальца и ладони по рисунку вен. Основные характеристики

img
Производитель / Новинки / Умные Решения
Roborock показала робот-пылесос, который умеет подниматься по лестнице - «Умный Дом и решения»

На выставке CES 2026 компания Roborock представила новую модель робота-пылесоса Saros Rover. Это устройство с уникальной конструкцией для подъема по

img
Умный Дом и решения / Производитель / Смарт.ТВ / Новинки / Умные Решения
IKEA добавила поддержку Matter в обновлённую коллекцию умных устройств Varmblixt - «Умный Дом и решения»

Компания IKEA расширила свою коллекцию освещения Varmblixt, добавив в неё умные модели с поддержкой стандарта Matter. Лампа в форме пончика с

  • Dunce
  • 11-01-2026, 16:30
  • 45
img
Aqara / Производитель / Новинки / Умные Решения
Aqara представила пять новых гаджетов для умного дома на выставке CES 2026 - «Умный Дом и решения»

Компания Aqara анонсировала пять новых продуктов для умного дома с поддержкой Matter. Это позволяет интегрировать гаджеты в популярные платформы

img
Новинки / Умный Дом и решения / Смарт.ТВ / Умные Решения
TCL показала два умных замка для дома с поддержкой Matter over Thread - «Умный Дом и решения»

TCL на выставке CES 2026 представила две новые модели умных замков: TCL D2 Pro и TCL D2L. Обе модели поддерживают Matter over Thread и имеют

img
Умный Дом и решения / Новинки / Zigbee / Смарт.ТВ / Бренд / Умные Решения
С Новым 2026 годом, умные дома и их ещё более умные хозяева! - «Умный Дом и решения»

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

Top.Mail.Ru