Страница 1 из 2

Библиотека middle_control

Добавлено: Чт апр 23, 2015 6:38 pm
Alex
middle_control версия 1.0

Описание
--------------

Библиотека предназначена для создания интерактивных элементов управления на веб-страницах. Элементы привязываются к объектам MajorDoMo и позволяют управлять их работой. Работает всё это на JavaScript и PHP через Ajax в обе стороны — элемент отслеживает изменение состояния объекта в MajorDoMo (и автоматически меняет внешний вид) и позволяет менять состояние объекта кликом мыши.

На данный момент библиотека содержит один управляющий элемент control_button. Это интерактивная кнопка, которая поддерживает три состояния on, off и неопределённое (когда произошла какая-либо ошибка).

Работает это так. Кнопка раз в заданный интервал времени (3+ сек.) связывается с сервером и проверяет состояние объекта. Если состояние on, то включается нижняя LED полоса на кнопке заданным вами цветом. Если состояние off, то LED не горит и надпись приглушена. Если произошла ошибка, то LED и надпись мигают синим цветом.

При клике на кнопке цвет надписи (состояние) изменяется мгновенно, а LED полоска включается / выключается с небольшой задержкой (~1 сек.), необходимой для связи с сервером. При наведении мыши кнопка немного меняет цвет.

Инсталляция
-------------------

Нужно создать папку middle_control в каталоге htdocs и распаковать в неё три файла из архива.

Подключение
-------------------

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

<script language="javascript" type="text/javascript" src="/middle_control/middle_control.js"></script>
<script language="javascript" type="text/javascript" src="/middle_control/control_button.js"></script>

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

<canvas id="btn-hom" width="54" height="28">Canvas not supported</canvas>


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

<script>
btn01 = new control_button('btn-hom', 'tempHOM.on_off', 'Дом', 3000, 1);
btn01.alertmin = 0;
btn01.alertmax = 1;
btn01.led_color = 'rgba(240, 140, 30, 1)'; // orange
btn01.objectToSend = 'tempHOM';
btn01.redraw();
</script>
Где tempHOM это название объекта, on_off — свойство, «Дом» - надпись на кнопке, 3000 — обновление раз в 3 секунды, 1 — тип кнопки.

Интеграция
----------------

У объекта MajorDoMo нужно создать метод set_on_off такого содержания

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

$on_off = $params['on_off'];
$this->setProperty('on_off', $on_off);

Re: Библиотека middle_control

Добавлено: Пт апр 24, 2015 4:19 pm
Alex
Ещё варианты дизайна.

Re: Библиотека middle_control

Добавлено: Пн авг 10, 2015 7:13 am
RusikOk
что за кубики слева на картинке из первого поста? какая их функциональность?

Re: Библиотека middle_control

Добавлено: Пн авг 10, 2015 11:03 am
Alex
Это просто 3D модель, но при определённом желании ей можно придать некую функциональность, например индикацию параметров, что и сделано с подобной моделью в АМС. Там индицируется работа сетевых функций (посылки Ajax).

Re: Библиотека middle_control

Добавлено: Пн авг 10, 2015 11:06 am
RusikOk
а сами кубики увеличиваются или меняют цвет?

Re: Библиотека middle_control

Добавлено: Пн авг 10, 2015 11:20 am
Alex
Кубики просто вращаются, остальное в ваших руках.

http://majordomo.smartliving.ru/forum/v ... 100#p11970

Re: Библиотека middle_control

Добавлено: Ср авг 26, 2015 2:49 pm
smoker_vvo
Подскажите как внедрить все это на страницу... Не понимаю. По объекту МДМ все понятно, а основные коды куда.....

Re: Библиотека middle_control

Добавлено: Ср авг 26, 2015 4:59 pm
Alex
На любую нужную вам страницу вначале подключаете библиотеки, canvas вставляете туда, где хотите видеть кнопку, а script ближе к концу страницы.

Re: Библиотека middle_control

Добавлено: Чт авг 27, 2015 10:23 am
smoker_vvo
ОК, спасибо, получилось. Теперь вопрос про типы кнопок?? Где и какие существуют?? И где поменять цвета LED по умолчанию??

Re: Библиотека middle_control

Добавлено: Пт авг 28, 2015 3:53 pm
smoker_vvo
Так, с цветом кнопок все понятно. Теперь с типами - где и как ???