Страница 20 из 43
Re: Шаблон класса / Class Template
Добавлено: Пт авг 31, 2018 8:31 pm
nick7zmail
Я половину вопроса решил. Приконектился к вебсокету.
Осталось у Сергея выпытать как подписаться на обновление из яваскрипта)). Уже достал поди его.
Re: Шаблон класса / Class Template
Добавлено: Пт авг 31, 2018 10:48 pm
tarasfrompir
ну надеюсь о результатах отпишешся ?
Re: Шаблон класса / Class Template
Добавлено: Сб сен 01, 2018 6:04 am
nick7zmail
Конечно.
Отправлено с моего Xperia XZ1 Compact через Tapatalk
Re: Шаблон класса / Class Template
Добавлено: Вс сен 02, 2018 9:27 am
nick7zmail
Делюсь)) Правда немного в другой теме, но суть - всё работает))
https://majordomo.smartliving.ru/forum/ ... 328#p86328
Re: Шаблон класса / Class Template
Добавлено: Вс сен 02, 2018 12:13 pm
tarasfrompir
Re: Шаблон класса / Class Template
Добавлено: Вс сен 02, 2018 3:45 pm
nick7zmail
Ну я максимально коротко и по делу постарался....для виджетов на сценах - первая часть того сообщения отпадает, т.к. вебсокеты в сценах уже подключены. Остаётся только 2-я часть. Вот пример индикатора подключенного через %Объект.свойство% и его сравнение с таким же индикатором через сокеты.
- ScreenCaptureProject3_1.gif (8.71 МБ) 4350 просмотров
Сори за качество но пришлось его сильно урезать, чтобы гифку вставить. А теперь угадай где какой)))
Вот код первого
Код: Выделить всё
<table>
<tbody>
<tr>
<td width="100%">
<canvas id="canvasRadial4" width="201" height="201"></canvas>
</td>
</tr>
</tbody></table>
<script>
var radial4;
init2();
function init2() {
// Define some sections
var sections = [steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),
steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'),
steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)') ],
// Define one area
areas = [steelseries.Section(75, 100, 'rgba(220, 0, 0, 0.3)')],
// Define value gradient for bargraph
valGrad = new steelseries.gradientWrapper( 0,
100,
[ 0, 0.33, 0.66, 0.85, 1],
[ new steelseries.rgbaColor(0, 0, 200, 1),
new steelseries.rgbaColor(0, 200, 0, 1),
new steelseries.rgbaColor(200, 200, 0, 1),
new steelseries.rgbaColor(200, 0, 0, 1),
new steelseries.rgbaColor(200, 0, 0, 1) ]);
radial4 = new steelseries.Radial('canvasRadial4', {
gaugeType: steelseries.GaugeType.TYPE4,
size: 201,
section: sections,
area: areas,
titleString: "Title",
unitString: "Type4",
threshold: 50,
lcdVisible: true
});
radial4.setValueAnimated(%Sensor_humidity02.value%);
}
</script>
и второго
Код: Выделить всё
<table>
<tbody>
<tr>
<td width="100%">
<canvas id="canvasRadial3" width="201" height="201"></canvas>
</td>
</tr>
</tbody></table>
<script language='javascript'>
$.subscribe('wsConnected', function (_) {
var payload;
payload = new Object();
payload.action = 'Subscribe';
payload.data = new Object();
payload.data.TYPE='properties';
payload.data.PROPERTIES='sensor_humidity02.value';
wsSocket.send(JSON.stringify(payload));
});
function processPropertiesUpdate(data) {
var obj=jQuery.parseJSON(data);
var objCnt = obj.length;
if (objCnt) {
for(var i=0;i<objCnt;i++) {
if (obj[i]['PROPERTY']=='sensor_humidity02.value') {
rad3val=obj[i]['VALUE'];
radial3.setValueAnimated(obj[i]['VALUE']);
$.publish('sensor_humidity02.value.updated', obj[i]['VALUE']);}
}
}
}$.subscribe('wsData', function (_, response) {
if (response.action=='properties') {
processPropertiesUpdate(response.data);
}
});
</script>
<script>
var radial3;
var rad3val;
init();
function init() {
// Define some sections
var sections = [steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),
steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'),
steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)') ],
// Define one area
areas = [steelseries.Section(75, 100, 'rgba(220, 0, 0, 0.3)')],
// Define value gradient for bargraph
valGrad = new steelseries.gradientWrapper( 0,
100,
[ 0, 0.33, 0.66, 0.85, 1],
[ new steelseries.rgbaColor(0, 0, 200, 1),
new steelseries.rgbaColor(0, 200, 0, 1),
new steelseries.rgbaColor(200, 200, 0, 1),
new steelseries.rgbaColor(200, 0, 0, 1),
new steelseries.rgbaColor(200, 0, 0, 1) ]);
radial3 = new steelseries.Radial('canvasRadial3', {
gaugeType: steelseries.GaugeType.TYPE4,
size: 201,
section: sections,
area: areas,
titleString: "Title",
unitString: "Type4",
threshold: 50,
lcdVisible: true
});
}
function setRandomValue(gauge, range) {
gauge.setValueAnimated(Math.random() * range);
}
</script>
<script src="/js/tween-min.js"></script>
<script src="/js/steelseries-min.js"></script>
ну так, для сравнения. Для работы надо скачать файлики steelseries.min и tween-min из темы с оформлениями.
Так хоть понятнее стало?))
Re: Шаблон класса / Class Template
Добавлено: Вс сен 02, 2018 8:10 pm
tarasfrompir
nick7zmail писал(а): ↑Вс сен 02, 2018 3:45 pm
Ну я максимально коротко и по делу постарался....для виджетов на сценах - первая часть того сообщения отпадает, т.к. вебсокеты в сценах уже подключены. Остаётся только 2-я часть. Вот пример индикатора подключенного через %Объект.свойство% и его сравнение с таким же индикатором через сокеты.
ScreenCaptureProject3_1.gif
Сори за качество но пришлось его сильно урезать, чтобы гифку вставить. А теперь угадай где какой)))
Вот код первого
Код: Выделить всё
<table>
<tbody>
<tr>
<td width="100%">
<canvas id="canvasRadial4" width="201" height="201"></canvas>
</td>
</tr>
</tbody></table>
<script>
var radial4;
init2();
function init2() {
// Define some sections
var sections = [steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),
steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'),
steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)') ],
// Define one area
areas = [steelseries.Section(75, 100, 'rgba(220, 0, 0, 0.3)')],
// Define value gradient for bargraph
valGrad = new steelseries.gradientWrapper( 0,
100,
[ 0, 0.33, 0.66, 0.85, 1],
[ new steelseries.rgbaColor(0, 0, 200, 1),
new steelseries.rgbaColor(0, 200, 0, 1),
new steelseries.rgbaColor(200, 200, 0, 1),
new steelseries.rgbaColor(200, 0, 0, 1),
new steelseries.rgbaColor(200, 0, 0, 1) ]);
radial4 = new steelseries.Radial('canvasRadial4', {
gaugeType: steelseries.GaugeType.TYPE4,
size: 201,
section: sections,
area: areas,
titleString: "Title",
unitString: "Type4",
threshold: 50,
lcdVisible: true
});
radial4.setValueAnimated(%Sensor_humidity02.value%);
}
</script>
и второго
Код: Выделить всё
<table>
<tbody>
<tr>
<td width="100%">
<canvas id="canvasRadial3" width="201" height="201"></canvas>
</td>
</tr>
</tbody></table>
<script language='javascript'>
$.subscribe('wsConnected', function (_) {
var payload;
payload = new Object();
payload.action = 'Subscribe';
payload.data = new Object();
payload.data.TYPE='properties';
payload.data.PROPERTIES='sensor_humidity02.value';
wsSocket.send(JSON.stringify(payload));
});
function processPropertiesUpdate(data) {
var obj=jQuery.parseJSON(data);
var objCnt = obj.length;
if (objCnt) {
for(var i=0;i<objCnt;i++) {
if (obj[i]['PROPERTY']=='sensor_humidity02.value') {
rad3val=obj[i]['VALUE'];
radial3.setValueAnimated(obj[i]['VALUE']);
$.publish('sensor_humidity02.value.updated', obj[i]['VALUE']);}
}
}
}$.subscribe('wsData', function (_, response) {
if (response.action=='properties') {
processPropertiesUpdate(response.data);
}
});
</script>
<script>
var radial3;
var rad3val;
init();
function init() {
// Define some sections
var sections = [steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),
steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'),
steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)') ],
// Define one area
areas = [steelseries.Section(75, 100, 'rgba(220, 0, 0, 0.3)')],
// Define value gradient for bargraph
valGrad = new steelseries.gradientWrapper( 0,
100,
[ 0, 0.33, 0.66, 0.85, 1],
[ new steelseries.rgbaColor(0, 0, 200, 1),
new steelseries.rgbaColor(0, 200, 0, 1),
new steelseries.rgbaColor(200, 200, 0, 1),
new steelseries.rgbaColor(200, 0, 0, 1),
new steelseries.rgbaColor(200, 0, 0, 1) ]);
radial3 = new steelseries.Radial('canvasRadial3', {
gaugeType: steelseries.GaugeType.TYPE4,
size: 201,
section: sections,
area: areas,
titleString: "Title",
unitString: "Type4",
threshold: 50,
lcdVisible: true
});
}
function setRandomValue(gauge, range) {
gauge.setValueAnimated(Math.random() * range);
}
</script>
<script src="/js/tween-min.js"></script>
<script src="/js/steelseries-min.js"></script>
ну так, для сравнения. Для работы надо скачать файлики steelseries.min и tween-min из темы с оформлениями.
Так хоть понятнее стало?))
Сделал как все написано - неподнялось - не отображает метрометра
Re: Шаблон класса / Class Template
Добавлено: Вс сен 02, 2018 8:32 pm
Chainik
Подтверждаю - не отображает.
Файлы steelseries-min.js и tween-min.js в \htdocs\js\ положил.
Объект sensor_humidity02 со свойством value создал. Значение свойства value вписал.
Не "взлетело". Что может быть не доделано?
Re: Шаблон класса / Class Template
Добавлено: Вс сен 02, 2018 9:43 pm
nick7zmail
Всё вписали в html блок? Или что-то в "дополнительный яваскрипт код"? Туда ничего не надо вписывать. Всё только в основное поле состояния.
И я так...просто ради примера накидал...не обязательно повторять...можно в своём чём нить пробовать))
Re: Шаблон класса / Class Template
Добавлено: Вс сен 02, 2018 10:14 pm
tarasfrompir
https://canvas-gauges.com/documentation/examples/ даже это пробую прикрутить пока что с аниме - нифиге