Шаблон класса / Class Template

[sega6549]

Всем привет. Совсем недавно поставил себе MajorDoMo.
Сразу же решил написать классы под свои задачи.
Нужен был выключатель на 3 позиции (включить свет = 0, выключить свет = 1 и авто = 2 с использованием датчика движения).

Создал новый класс с единственным свойством "status" и единственным методом "Switch":

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

$val=$this->getProperty('status');
$val++;
if ($val>2)
$val=0;
$this->setProperty('status',$val);

В шаблоне класса прописал стиль и

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

<a href="#" class='button %.status|"dsgnmoo;xbox;grey;"%' onClick='callMethod("%.Switch");'>%.status|"выкл;вкл;авто;"%</a>

Использую в сцене как объект.
При клике вызывается метод "Switch".
Всё хорошо, но он не обновляется. Переключение происходит, но что бы в этом убедиться - нужно обновлять страницу.
Вопрос как сделать автоматическое обновление отображения объекта в сцене (как это происходит со стандартными выключателями)

А ещё хочется, что бы это работало и при изменение свойств. По MQTT переодически получаю актуальную информацию, её нужно выводить и обновлять, без обновления страницы.

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

[Chainik]

sega6549, раз вы уже разобрались с кнопками, может сможете "прикрутить" такие (https://majordomo.smartliving.ru/forum/ ... 0&start=18) переключатели. (Парные круглые переключатели в овалах.) Мы пытались 1,5 года назад, действие по клику добавить удалось (onClick), а вот обратную связь со свойством организовать тогда не получилось.

[nick7zmail]

Действие выполняется по onclick как там верно подметили. А обратная связь - к примеру через middle-connector. Если сокетами - то div дёргаться будет. Не знаю как этого избежать, уже задавал вопрос в теме про сокеты.

[tarasfrompir]

по поводу обратной связи - https://youtu.be/xZJi5J-Msv4 - вот видео
Див не дергается - только заменяется картинка лампочки
В чем я туплю...???

[Chainik]

Тут вы взяли как пример "штатную" кнопку, где все уже "привязано" на уровне системы.
А мы пробуем "прикрутить" переключатель, раздобытый на просторах Интернета (https://majordomo.smartliving.ru/forum/ ... 0&start=18).
И здесь возникают вопросы и сложности (особенно для несведующих/малосведующих в программировании).

[tarasfrompir]

Тут вы взяли как пример "штатную" кнопку, где все уже "привязано" на уровне системы.
А мы пробуем "прикрутить" переключатель, раздобытый на просторах Интернета (https://majordomo.smartliving.ru/forum/ ... 0&start=18).
И здесь возникают вопросы и сложности (особенно для несведующих/малосведующих в программировании).

Ну во первых он мне не нравится,
а во вторых он плох тем что его надо наполовину передывать (оставив только ксс)

[Chainik]

Мне тоже не то чтобы нравится... Но это только пример. Другими словами, как сделать любой, раздобытый на просторах Интернета переключатель, чтобы он был с обратной связью по свойству?
Просто живой пример для "чайников". Типа, вот сюда добавляем onClick, а сюда механизм реагирования на изменение конкретного свойства (обратная связь).

[tarasfrompir]

В данном случае выключатель работает за счет стилей для разных дивов...
Поэтому береш обычный ДИВ множиш его на 2 и по свойству обьекта в данном случае - alive (состояние 1 или 0 ) отображаеш за счет style = block or style=none один из дивов.

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

<div class="device-header" style='display:%.alive|"none;block"%;float:right;font-size: 50%; font-family: monospace;'></div>
<div class="device-header" style='display:%.alive|"block;none;"%;float:right;font-size: 50%; font-family: monospace;'></div>

НО этот метод не очень хорош поскольку он всегда перерисовывает сам ДИВ.

Поэтому береш 2 картинки для выключателя.
всовываеш их в 1 ДИВ и соответственно меняеш сами картинки

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

 <div name="buttons" style="width:310px; height: 45px; ">
<button style='display:%.pause_unpause|"none;block"%; float:left; width:46px;height: 34px;' onClick='ajaxSetGlobal("%.object_title%.pause_unpause", 1);' class="btn btn-custom"><span title="Pause" id="pause" class="glyphicon glyphicon-pause aligned"></span></button>
 <button style='display:%.pause_unpause|"block;none"%; float:left;width:46px;height: 34px;' onClick='ajaxSetGlobal("%.object_title%.pause_unpause", 0);' class="btn btn-custom"><span title="UnPause" id="Unpause" class="glyphicon glyphicon-play aligned"></span></button>
</div>

в данном случае пример на кнопках... тут изменяется одна кнопка которая заменяет другую...
Этот пример я считаю более правильным потому что если мы имеем сложный ДИВ и в нем очень много другого отображается
ТО тут у нас только заменится кнопка и ВСЕ. (можно конечно сделать одну картинку а менять для нее только ссылку на картинки ) - что тоже сделано в примерах... Но я не понял всего до конца там
НУ ЭТО ТАК Я ПОНЯЛ СТРУКТУРУ ЭТИХ ШАБЛОНОВ..

[Chainik]

Ну этот прием я освоил (https://majordomo.smartliving.ru/forum/ ... 0&start=10). Кстати, его давным давно еще Сергей приводил где-то на форуме.
Но это, так сказать, простейший случай с заменой картинки. В случае переключателя мы имеем дело, насколько я понимаю, с описанием видоизменения самого элемента посредством css. Если бы научится организовывать обратную связь по свойству, можно было бы "вытворять" вообще любой интерфейс. Нашел понравившийся элемент (переключатель, слайдер, чекбокс и т.д.), добавил onClick и связанное свойство, и вся красота у тебя уже в интерфейсе...

[tarasfrompir]

так а ведь по свойству и изменяет состояние картинки - это основная задача вебсокетов - видео выше часть 2 она справедлива для всего что только можна
только свойство надо указывать явное (если это не ПУ) типа rele11mqqtt.status