MajorDoMo

Всем добра.
Итак сначала пред история.
Я не программист, и с HTML, CSS, JS до недавнего времени знаком не был от слова - СОВСЕМ.
PHP - для меня до сих пор темный лес.
Поэтому все что сделал, написал, нарисовал - не претендует на правильность и истину.
Возможно найдется кто то кто сможет, а самое главное, захочет и оптимизирует код что я начеркал.

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

Переходим к сути.
Путь обновления информации от свойств системы я выбрал следующий: если установлено соединение по WebSocet то тогда они работают, а если нет то обновление идет через запросы к системе (от стандартной функции "объект"."свойство" я решил отказаться, но не везде), при этом снижается скорость реакции на обратную связь, но думаю это не критично.
Как оказалось, что если вы подключаетесь к системе удаленно через VPNKi и при этом используете тоннели то WebSocet скорее все будут работать, но если у вас публикация URL или Проброс порта то WebSocet работать не будет. (на форуме VPNKi помочь не смогли)
Вот что получилось на данный момент, это главная сцена с которой будет осуществляться переход во все другие.

На главную сцену можно вывести 14 объектов комнат. По этажность не предусмотрена, дом у меня одноэтажный, а писал я под себя

Вот как это сейчас выглядит.
Будут заинтересованные продолжу.

Semendey писал(а): ↑

Вт мар 17, 2020 6:26 pm

Всем добра.
Итак сначала пред история.
Я не программист, и с HTML, CSS, JS до недавнего времени знаком не был от слова - СОВСЕМ.
PHP - для меня до сих пор темный лес.
Поэтому все что сделал, написал, нарисовал - не претендует на правильность и истину.
Возможно найдется кто то кто сможет, а самое главное, захочет и оптимизирует код что я начеркал.

Так а где ж само что может пригодится ???

Я пока не выкладываю исходники, так как до сих пор что то правлю.
Так например сейчас пока скрины с системы делал нашел ошибку.

Всем добра
Решил выложить на тест то что сейчас уже готово.

Главная сцена может отображать:
Время и системные статусы, для этого в системе должны быть свойства объектов: ThisComputer. Econom, ThisComputer. securityMode, ThisComputer.nobodyHome, ThisComputer. timeNow, Security.stateColor, System.stateColor, Communication.stateColor.

Погоду, используется дополнение YandexWeather и объект yw_mycity

План – используется стандартный модуль планы

Системный лог – Алисы

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

Значения Температуры и Влажности по каждому помещению, данные берутся из объектов Rooms - (Temperature, Humidity)

При нажатии на иконки погоды, будет озвучен прогноз

ВАЖНО !!! При нажатии на системные статусы откроется панель администратора системы, пока это сделано для отладки, но позже надо будет это удалить.


Для использования сцены нужно:

Распаковать архив MyScene в папку templates_alt (в архиве есть и другие файлы наработок, но о них пока рано)
Создать новую сцену и добавить в нее объект с типом Html
Найти в папке Index файл main.html открыть его в любом редакторе и скопировать его в созданную сцену, в поле код
Создать в данной сцене объект «log» с типом Html в код которого поместить ссылку на Лог Алисы - [#module name="shoutbox" limit="10" reverse="1" mobile="1"#], поставить его отображение в невидимый: Условия отображения - расширенное - $display=0;
Создать в данной сцене объект «Plan» с типом Html в код которого поместить ссылку на созданный план – например [#module name="plans" id="8" width="100%" embed="1"#], а так же указать его номер в объектах настройки, см. ниже.
Из архива ShowRoom импортировать новый класс и объекты этого класса ShowScene.

Пояснения:
Все настройки отображения берутся из класса ShowScene объектов Room1, Room2 и т.д. , некоторые заполняться только в объекте Room1, некоторые в каждом объекте. К каждому свойству указан комментарий, так что не сложно будет догадаться зачем данное свойство.
Так же, если у вас нет значений например Влажности (Humidity) в объектах класса Rooms и вы не хотите его показывать на сцене, установите его значение в 0 и отображения не будет, изменения происходят только после перезагрузки страницы.

Так же в моей версии, в главной сцене на каждом объекте возможна выделения цветом значений температуры, при условии что для данного помещения включена опция: TermostatShow и задано имя RoomTermostatName, тогда будет следующее:
Если термостат выключен (свойство disabled) то цвет температуры будет отображаться серым
Если термостат включен (свойство disabled) то в зависимости от статуса реле термостата (relay_status) цвет значка температуры будет красным если реле сработало (relay_status=1) или белым если нет.

Внизу главной сцены подсмотрено 6 правый и 6 левых кнопок, на которые вы можете повесить выполнение любых методов которые указываться в советующих разделах объекта Room1.
Указать можно как метод: callMethod('объект.метод'), так и просто ссылку в формате: location.href = '/popup/scenes/24.html'.

Все иконки, картинки вы можете менять, просто надо добавить и назвать правильно файлы, одно НО, некоторые из них должны быть в формате svg.

Найти в папке CSS файл Main_style.css и отредактировать строку .element_271 согласно вашим значениям, например так: .element_271, .element_ХХХ, где ХХХ - это номер вашего элемента сцены в котором размещен весь основной код, он находиться ниже окна ввода html кода.

Так же надо отредактировать строку - #state_405, только в нее надо добавить CSS id элемента сцены Plan ( #state_405, #state_ХХХ)

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

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

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

Если какие то будут косяки, баги и так далее, пишите, буду разбираться, но скорости не обещаю.

Ссылка на архив:
https://yadi.sk/d/GARLAvNGpDtnIQ

Продолжение следует:
Следующий шаг, детальная вкладка по комнатам
Выглядеть она будет как то так:

Рекомендую Вам перенести тему в раздел дизайн. Удобно, когда все творческие оформления находятся в одном разделе, каждому будет проще найти то, что ему нужно.

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

Итак, для того что бы все работало, нужно создать новую сцену и скопировать в ее код содержание файла: Room.html
После чего сделать настройки в классе ShowScene объектов Room1, Room2 и т.д.

На сцене для каждого помещения из 14-ти можно скрыть или отобразить: Температуру, Влажность, Давление, Термостат с температурой уставки и фактической, для воздуха и пола (у меня установлены в доме термостаты "типа" BEOK, для их совместимости пришлось немного поменять класс термостата из простых устройств, в основном добавлены свойства, поэтому в архиве есть файл импорта его), устройство управления вентиляцией, управление до 5-ти источников света, управление объектом RGB подсветки.
Так же отобразить индикацию до 5-ти источников света, работу вентиляции (крутиться), сработку реле термостата, датчика движения (идет), датчика дыма, датчиков открытия до 2 окон (открываются), датчика открытия двери.
Так же можно поместить график изменения каких либо величин в каждое помещение, график делается стандартным модулем, а потом только прописывается в настройках комнат его номер, и все он должен выводиться для данного помещения.
Если что у кого не получиться спрашивайте подскажу, да чуть не забыл, так же как и в главной сцене нужно отредактировать файл room_style.css отредактировать строку .element_280 согласно вашим значениям, например так: .element_280, .element_ХХХ, где ХХХ - это номер вашего элемента сцены в котором размещен весь основной код, он находиться ниже окна ввода html кода.

Так же в архиве есть файл: klimat.html, это вкладка управления климатом, все тоже самое, создать новую сцену и скопировать код, внести исправления в klimat.css, в части .element ...
В архиве есть класс и объекты (SKlimat) который используется для управления основными элементами котельной, такими как в моем случае: электро котел, бойлер, вент. установка, солнечный коллектор, но в прицепе можно любые, но не более 4 + термостаты каждого помещения, в общем качайте, ставьте, задавайте вопросы.

https://yadi.sk/d/GARLAvNGpDtnIQ

Что еще дальше делать, я пока не решил.

Есть идеи ???