Разработка Web-интерфейса. (модульная CMS)

Обсуждение статей, технологий домашней автоматизации, программных и аппаратных решений
GruNT
Сообщения: 281
Зарегистрирован: 27 авг 2014, 16:42

Разработка Web-интерфейса. (модульная CMS)

Сообщение GruNT » 18 сен 2016, 15:44

Хочется узнать кто и что использует в качестве Web-интерфейса своего сайта. Есть ли на форуме web - программисты?
После просмотра http://www.ab-log.ru/demo появилась идея написать CMS с виджетами. Каждый из них будет настраиваемый.
Конструктивно каждый виджет будет представлять собой маленький модуль (шаблон, css, функция, файл настройки). Функция будет работать через ядро самой CMS. В файле настройки будет указано как его отображать, опции разные, режимы, строки и т.д. Все виджеты будут храниться в одной папке (и каждый в своей папке). А в БД будет пара таблиц, где будут прописаны пути к виджетам и их имена (одна таблица), а другая таблица - где какой виджет отобразить))).
Плюсы:
- можно менять шаблон как угодно, от него ничего не зависит (их будет несколько: главная страница, таблицы, селекторы и т.д.). Полная свобода стилизации.)) Bootstrap в этом поможет (совместимость с мобильными платформами).
- удобно будет подключать новые виджеты.
- пользователи смогут создавать свои виджеты и мы сможем ими обмениваться и подключать в пару кликов))).
- пользователи смогут создавать свои шаблоны, которые тоже можно будет в будущем скачать.

P.S. Виджеты могут быть как отображающие так и управляющие... Для тех кто далек от программирования, буде полезно. Есть ли кого необходимость в этом, ресурсы, силы, время и желание?
Я когда то делал панель управления для megaD для браузера без php и тогда назрела идея в таком ПО.

P.P.S. За основу своей CMS брал вот эту панель http://webapplayers.com/homer_admin-v1.9.1/, т.к. самому лень CSS писать. Кое-что обрезать там лишнее и как говориться вперед.


foolhome
Сообщения: 164
Зарегистрирован: 18 окт 2014, 21:39
Откуда: Minsk

Re: Разработка Web-интерфейса. (модульная CMS)

Сообщение foolhome » 18 сен 2016, 17:29

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

GruNT
Сообщения: 281
Зарегистрирован: 27 авг 2014, 16:42

Re: Разработка Web-интерфейса. (модульная CMS)

Сообщение GruNT » 18 сен 2016, 17:54

Bluefox писал(а):https://iobroker.net:8080
Посмотрел... мда... мудреная вещь, но универсальная.
foolhome писал(а):Grunt, Вы вернулись, наверно только я играюсь с альтернативной прошивкой. По поводу отдельной управлялки - отоброжалки дело хорошее, а главное чтоб было просто - один виджет - один порт и один адрес, с возможностью подписать и иконку вставить.
Я был в тени )))). Собственно идея то и есть в том что виджет один - а работать может с любым портом. Ну к примеру:
Есть виджет управления портом))). Подключаем его к CMS... Внутри к примеру плагин у нас написанный на Jquery. Кодом типа

Код: Выделить всё

$(".ports").PortsPlag()
производим инициализацию. А настройки будут храниться так:

Код: Выделить всё

<div class="ports" data-device= "2" data-port= "3" data-type = "out" data-mode="SW" data-default="0"></div>
<div class="ports" data-device= "2" data-port= "5" data-type = "out" data-mode="PWM" data-default="100"></div>
<div class="ports" data-device= "1" data-port= "2" data-type = "in"></div>
прям в HTML разметке )))) И творите что хош. Плагин сам всю визуализацию и обращения организовывать будет.

А могут быть виджеты высокоуровневые работающие с массивами данных из БД (например полностью занимаются обработкой метеоданных, показаний датчиков температуры, визуализацией графиков) и низкоуровневые работающие с девайсом напрямую (кнопки те же).

P.S. И все работать будет через класс php осуществляющий перевод "машинных команд"

Код: Выделить всё

http://192.168.0.14/sec/?pt=1&cmd=get
в понятные фразы типа:

Код: Выделить всё

$api = new API(); // запускаем класс
$api -> setDevice("Podval"); // выбираем девайс
$postStatus = $api -> getPort(1);// возращает ассоциативный массив состояния порта
$arr = array("type"=>"out", "mode"=>"PWM", "default"=>"100"); // упаковываем настройки
$api -> setPortConf($arr, 5); // устанавливаем настройки для порта под номером 5
// или так
$arr2[] = array(
	array("port"="2","type"=>"out", "mode"=>"PWM", "default"=>"100"),
	array("port"="3","type"=>"out", "mode"=>"SW", "default"=>"0"),
);
$api -> setPortConf($arr2); // устанавливаем настройки портов указанных в массиве, т.к. номер аргумента порта не указан

GruNT
Сообщения: 281
Зарегистрирован: 27 авг 2014, 16:42

Re: Разработка Web-интерфейса. (модульная CMS)

Сообщение GruNT » 20 сен 2016, 15:54

Сделал альфа версию плагина для работы с портами девайса, но вот проблемка...
Для создания прямого запроса к устройству через ajax необходим Кросс-доменный ajax, а для этого девайс в хедере ответа должен возвращать "Access-Control-Allow-Origin:*", а не возвращает.
Так что пути решения 2: либо подправить прошивку (а памяти может и не хватить в megaD-328, но в MegaD-2561 это капля в море), что существенно все упрощает, либо делать ajax запрос через внутридоменный php - что сложнее для тех кто использовать его будет.... Попробую поддержу того и того сделать, как режим "megaD-328", и "MegaD-2561".
Вопрос к Андрею, возможно ли внести данные изменения в прошивку официально, чтоб потом каждый не собирал переделанный проект? А то работа стоит, и от этого зависит дальнее строение кода плагина))))

GruNT
Сообщения: 281
Зарегистрирован: 27 авг 2014, 16:42

Re: Разработка Web-интерфейса. (модульная CMS)

Сообщение GruNT » 21 сен 2016, 13:03

Собственно первый набросок Jquery плагина управления портами для самодельных web-сайтов к MegaD. В данный момент работает только с портами вывода и не поддерживает режим ШИМ. Для запуска требует минимум телодвижений))
Пробуйте.
P.S. Для режима ШИМ буду ждать ваших предложений по дизайну регулятора)))), так-же предложения по необходимому функционалу, настройкам и т.д.
Вложения
PortWidget_v1.0a.rar
Ver. 1.0 alfa
(67.93 КБ) 188 скачиваний

foolhome
Сообщения: 164
Зарегистрирован: 18 окт 2014, 21:39
Откуда: Minsk

Re: Разработка Web-интерфейса. (модульная CMS)

Сообщение foolhome » 21 сен 2016, 16:10

Я так понял, что все содержимое необходимо закинуть на что то типа денвера чтоб PHP крутился и работал, просто открыть HTML не достаточно??? тогда необходимо народу разжевать что и как делать, а то вопросов будет немерено. А по поводу шима, простого ползунка хватит

GruNT
Сообщения: 281
Зарегистрирован: 27 авг 2014, 16:42

Re: Разработка Web-интерфейса. (модульная CMS)

Сообщение GruNT » 21 сен 2016, 17:42

foolhome писал(а):Я так понял, что все содержимое необходимо закинуть на что то типа денвера чтоб PHP крутился и работал, просто открыть HTML не достаточно??? тогда необходимо народу разжевать что и как делать, а то вопросов будет немерено. А по поводу шима, простого ползунка хватит
Да, именно так. Я раньше писал про Access-Control-Allow-Origin:* в хефдере ответа контроллера. Если это реализовать в прошивке официально (чтоб не менять постоянно при обновлениях), то можно организовать опцию крос-доменного ajax. В этом случае не нужен будет php и все будет работать из браузера))).

foolhome, стиль ползунка есть на примете? Не охота тратить время на рисование...
Хотел что-то такое http://demo.tutorialzine.com/2011/11/pr ... s3-jquery/ или http://anthonyterrien.com/demo/knob/

foolhome
Сообщения: 164
Зарегистрирован: 18 окт 2014, 21:39
Откуда: Minsk

Re: Разработка Web-интерфейса. (модульная CMS)

Сообщение foolhome » 21 сен 2016, 21:13

есть только такая шляпа
Вложения
RangeBubble.zip
(2.34 КБ) 170 скачиваний


GruNT
Сообщения: 281
Зарегистрирован: 27 авг 2014, 16:42

Re: Разработка Web-интерфейса. (модульная CMS)

Сообщение GruNT » 21 сен 2016, 21:28

foolhome писал(а):есть только такая шляпа
О, я к своей прикручу. Почти сделал уже.

GruNT
Сообщения: 281
Зарегистрирован: 27 авг 2014, 16:42

Re: Разработка Web-интерфейса. (модульная CMS)

Сообщение GruNT » 22 сен 2016, 03:56

Собственно добавил ШИМ и отображение состояния порта IN и его счетчика.
Возможно теперь достаточно легко сделать интерфейс управления освещением или табличку состояния датчиков замыкания/размыкания.)))
Достоинства:
- минимум html;
- назначение свойств прямо в html;
- минимум операций для запуска;
- дизайн элементов на чистом CSS3 без JQuery.

P.S. Поддержи DSen - нет.
Вложения
2.png
Отображение элементов
2.png (5 КБ) 6937 просмотров
PortWidget_v1.0b.rar
Плагин
(68.64 КБ) 186 скачиваний

foolhome
Сообщения: 164
Зарегистрирован: 18 окт 2014, 21:39
Откуда: Minsk

Re: Разработка Web-интерфейса. (модульная CMS)

Сообщение foolhome » 23 сен 2016, 00:13

Запустил на денвере, вроде работает, не хватает авто обновления элементам. Теперь, еще одна хотелка появилась, есть отображение ADC 0-1023, возможно ли преобразовать отображение, например 0 - это минус 40 градусов, а 1023 - это плюс 40 градусов, а страница сама пересчитала и теперь образно говоря при нулевой температуре, мы бы видели на экране 0, а не загадочную цифру 512. А с Андреем напрямую не связывался, возможно ли прошивку для 328 подправить?

GruNT
Сообщения: 281
Зарегистрирован: 27 авг 2014, 16:42

Re: Разработка Web-интерфейса. (модульная CMS)

Сообщение GruNT » 23 сен 2016, 01:32

foolhome писал(а):Запустил на денвере, вроде работает, не хватает авто обновления элементам. Теперь, еще одна хотелка появилась, есть отображение ADC 0-1023, возможно ли преобразовать отображение, например 0 - это минус 40 градусов, а 1023 - это плюс 40 градусов, а страница сама пересчитала и теперь образно говоря при нулевой температуре, мы бы видели на экране 0, а не загадочную цифру 512. А с Андреем напрямую не связывался, возможно ли прошивку для 328 подправить?
С Вас дизайн, с меня код.))) В плагине это займет одну строчку кода, типа: -40+(80/1024*показание)
P.S. Датчики потом доделаю. Автообновление - сделаю и настройку промежутка времени для опроса добавлю.
А что вы используете в качестве Web-интерфейса?

foolhome
Сообщения: 164
Зарегистрирован: 18 окт 2014, 21:39
Откуда: Minsk

Re: Разработка Web-интерфейса. (модульная CMS)

Сообщение foolhome » 23 сен 2016, 09:33

За основу для навигации взято вот это:
http://www.templatemo.com/tm-378-dragonfly

немного переделал, что-то дорисовал, получается примерно так:
Вложения
Безымянный1.jpg
Безымянный1.jpg (82.9 КБ) 6870 просмотров

foolhome
Сообщения: 164
Зарегистрирован: 18 окт 2014, 21:39
Откуда: Minsk

Re: Разработка Web-интерфейса. (модульная CMS)

Сообщение foolhome » 23 сен 2016, 09:41

Смысл в том что каждая комната это отдельная страница, а в основную страницу они вставляются ссылками
Вложения
Безымянный3.jpg
Безымянный3.jpg (114.3 КБ) 6869 просмотров
Безымянный2.jpg
Безымянный2.jpg (117.77 КБ) 6869 просмотров

GruNT
Сообщения: 281
Зарегистрирован: 27 авг 2014, 16:42

Re: Разработка Web-интерфейса. (модульная CMS)

Сообщение GruNT » 23 сен 2016, 18:16

foolhome писал(а):За основу для навигации взято вот это:
http://www.templatemo.com/tm-378-dragonfly
что - то не нашел я по этой ссылке ничего подобного. А используете получается HTML, JQuery, php?

GruNT
Сообщения: 281
Зарегистрирован: 27 авг 2014, 16:42

Re: Разработка Web-интерфейса. (модульная CMS)

Сообщение GruNT » 23 сен 2016, 18:21

Разобрался)) Это конструктор одностраничных шаблонов )))

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

OlegJktu84
Сообщения: 651
Зарегистрирован: 16 фев 2016, 19:52

Re: Разработка Web-интерфейса. (модульная CMS)

Сообщение OlegJktu84 » 23 сен 2016, 19:24

https://www.youtube.com/watch?v=MPFlP93xcqo "драг ин дроп для панелек" - типа такого?

GruNT
Сообщения: 281
Зарегистрирован: 27 авг 2014, 16:42

Re: Разработка Web-интерфейса. (модульная CMS)

Сообщение GruNT » 23 сен 2016, 19:52

OlegJktu84 писал(а):https://www.youtube.com/watch?v=MPFlP93xcqo "драг ин дроп для панелек" - типа такого?
Это как тут http://webapplayers.com/homer_admin-v1. ... gable.html, чтоб эти цветные квадратики изображенные у foolhome можно местами было менять)))
Что касаемо видео, то настройка отображения градусника это хорошо, а если я хочу чтоб это был не градусник а что-то другое. Чистый javascript позволит вам это без проблем, но с соответствующими знаниями, а ioBroker вас ограничивает собственно настройками самого объекта. Я предлагаю путь написания плагина который бы генерировал события того же градусника, а вы уже как хотите так и настраивайте (визуально и программно). Можете посмотреть наброски мои приведенные выше. Да и ни какие драйвера в моем случае не надо настраивать)))
Да, это сложнее чем ioBroker, т.к. надо азы какие - никакие знать в JQuery, HTML и PHP, но свободы больше и вы не зависите от обновления драйвера.

Ответить