steel series на домашних страницах
Модератор: immortal
-
- Сообщения: 2575
- Зарегистрирован: Пт ноя 06, 2015 10:22 am
- Откуда: Кишинёв
- Благодарил (а): 303 раза
- Поблагодарили: 282 раза
Re: steel series на домашних страницах
Надо HTML5 учить конкретно. И да , проценты тут не сработали. Скорее всего тогда размер картинки подгонять вручную
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
- xor
- Сообщения: 2040
- Зарегистрирован: Сб ноя 22, 2014 8:45 pm
- Благодарил (а): 286 раз
- Поблагодарили: 629 раз
Re: steel series на домашних страницах
что-то много подключено
у меня (я только в 3rdparty папку перенёс)
<script src="/3rdparty/SteelSeries/tween-min.js"></script>
<script src="/3rdparty/SteelSeries/steelseries-min.js"></script>
win10 connect https://connect.smartliving.ru/profile/303
- xor
- Сообщения: 2040
- Зарегистрирован: Сб ноя 22, 2014 8:45 pm
- Благодарил (а): 286 раз
- Поблагодарили: 629 раз
Re: steel series на домашних страницах
Честно говоря, уже не помню. Что-то про пути расположения библиотек. А пример из первого поста не завёлся?
win10 connect https://connect.smartliving.ru/profile/303
-
- Сообщения: 57
- Зарегистрирован: Вс апр 07, 2019 6:49 pm
- Благодарил (а): 33 раза
- Поблагодарили: 10 раз
Re: steel series на домашних страницах
Не завелся, я пытаюсь одометр расположить на сцене. По аналогии спидометра код, которого у меня работает на сцене:xor писал(а): ↑Сб окт 10, 2020 1:33 amЧестно говоря, уже не помню. Что-то про пути расположения библиотек. А пример из первого поста не завёлся?
Код: Выделить всё
<canvas id="canvasRadial3" width="130" height="130"></canvas>
<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='espSensor_voltage01.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']=='espSensor_voltage01.value') {
//rad3val=obj[i]['VALUE'];
radial3.setValueAnimated(obj[i]['VALUE']);
$.publish('espSensor_voltage01.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(8000, 11000, 'rgba(0, 0, 220, 0.3)'),
steelseries.Section(11000, 12400, 'rgba(0, 220, 0, 0.3)'),
steelseries.Section(12400, 14500, 'rgba(220, 220, 0, 0.3)') ],
// Define one area
areas = [steelseries.Section(14500, 18000, 'rgba(220, 0, 0, 0.2)'),
steelseries.Section(8000, 12000, 'rgba(220, 0, 0, 0.2)')],
// 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: 130,
section: sections,
area: areas,
minValue:8000,
maxValue:18000,
titleString: "Напряжение",
unitString: "mV",
threshold: 14000,
lcdVisible: true,
frameVisible: false
});
live_upd("/pChart/?op=value&p=espSensor_voltage01.value",radial3);
}
function live_upd(url,gauge) {
$.ajax({
url: url,
}).done(function(data) {
if (data!='') {gauge.setValueAnimated(parseFloat(data));}
});
}
</script>
<script src="/tween-min.js"></script>
<script src="/steelseries-min.js"></script>
-
- Сообщения: 57
- Зарегистрирован: Вс апр 07, 2019 6:49 pm
- Благодарил (а): 33 раза
- Поблагодарили: 10 раз
Re: steel series на домашних страницах
Всем спасибо. На сцену одиночный одометр смог вывести с помощью такого кода:
Просто до этого, не внимательно переносил данные кода.
Код: Выделить всё
<canvas id="canvasOdometer1" width="180" height="40"></canvas>
<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='Counter01.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']=='Counter01.value') {
//rad3val=obj[i]['VALUE'];
odometer1.setValueAnimated(obj[i]['VALUE']);
$.publish('Counter01.value.updated', obj[i]['VALUE']);}
}
}
}$.subscribe('wsData', function (_, response) {
if (response.action=='properties') {
processPropertiesUpdate(response.data);
}
});
</script>
<script>
var odometer1, n = 999999997.7;
//var rad3val;
init();
function init() {
odometer1 = new steelseries.Odometer('canvasOdometer1', {
digits:6,
decimals:2
});
live_upd("/pChart/?op=value&p=Counter01.value",odometer1);
}
function live_upd(url,gauge) {
$.ajax({
url: url,
}).done(function(data) {
if (data!='') {gauge.setValueAnimated(parseFloat(data));}
});
}
</script>
<script src="/tween-min.js"></script>
<script src="/steelseries-min.js"></script>
- Рейтинг: 1.16%
-
- Сообщения: 57
- Зарегистрирован: Вс апр 07, 2019 6:49 pm
- Благодарил (а): 33 раза
- Поблагодарили: 10 раз
Re: steel series на домашних страницах
Может кому пригодится, Алиса бегущей строкой на сцене:
Код: Выделить всё
<canvas id="canvasSingle2" width="400" height="49"></canvas>
<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='ThisComputer.lastSayMessage';
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']=='ThisComputer.lastSayMessage') {
//rad3val=obj[i]['VALUE'];
single2.setValueAnimated(obj[i]['VALUE']);
$.publish('ThisComputer.lastSayMessage.updated', obj[i]['VALUE']);}
}
}
}$.subscribe('wsData', function (_, response) {
if (response.action=='properties') {
processPropertiesUpdate(response.data);
}
});
</script>
<script>
var single2;
//var rad3val;
init();
function init() {
// Define some sections
single2 = new steelseries.DisplaySingle('canvasSingle2', {
width: 400,
height: 50,
value: "%ThisComputer.lastSayMessage%",
autoScroll: true,
valuesNumeric: false
});
live_upd("/pChart/?op=value&p=ThisComputer.lastSayMessage",single2);
}
function live_upd(url,gauge) {
$.ajax({
url: url,
}).done(function(data) {
if (data!='') {gauge.setValueAnimated(parseFloat(data));}
});
}
</script>
<script src="/tween-min.js"></script>
<script src="/steelseries-min.js"></script>
- Рейтинг: 6.98%
-
- Сообщения: 2575
- Зарегистрирован: Пт ноя 06, 2015 10:22 am
- Откуда: Кишинёв
- Благодарил (а): 303 раза
- Поблагодарили: 282 раза
Re: steel series на домашних страницах
Что-то я не соображу - куда и как вставить этот код ? С разбегу не завелась.
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
-
- Сообщения: 686
- Зарегистрирован: Ср май 03, 2017 7:41 pm
- Благодарил (а): 113 раз
- Поблагодарили: 107 раз
Re: steel series на домашних страницах
Вставить в HTML-элемент на сцене. И в последних двух строках надо указать правильный путь к файлам "tween-min.js" и "steelseries-min.js". У меня из-за этого сначала тоже не заработало.
-
- Сообщения: 12
- Зарегистрирован: Ср апр 15, 2020 10:33 am
- Благодарил (а): 1 раз
- Поблагодарили: 2 раза
Re: steel series на домашних страницах
а кто подскажет как изменить код для 3 одометров?
имею в виду чтобы данные обновлялись сами.
имею в виду чтобы данные обновлялись сами.
pru469 писал(а): ↑Сб окт 10, 2020 7:52 amВсем спасибо. На сцену одиночный одометр смог вывести с помощью такого кода:Просто до этого, не внимательно переносил данные кода.Код: Выделить всё
<canvas id="canvasOdometer1" width="180" height="40"></canvas> <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='Counter01.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']=='Counter01.value') { //rad3val=obj[i]['VALUE']; odometer1.setValueAnimated(obj[i]['VALUE']); $.publish('Counter01.value.updated', obj[i]['VALUE']);} } } }$.subscribe('wsData', function (_, response) { if (response.action=='properties') { processPropertiesUpdate(response.data); } }); </script> <script> var odometer1, n = 999999997.7; //var rad3val; init(); function init() { odometer1 = new steelseries.Odometer('canvasOdometer1', { digits:6, decimals:2 }); live_upd("/pChart/?op=value&p=Counter01.value",odometer1); } function live_upd(url,gauge) { $.ajax({ url: url, }).done(function(data) { if (data!='') {gauge.setValueAnimated(parseFloat(data));} }); } </script> <script src="/tween-min.js"></script> <script src="/steelseries-min.js"></script>
- Djeday999
- Сообщения: 45
- Зарегистрирован: Сб май 29, 2021 3:04 pm
- Откуда: Екатеринбург
- Благодарил (а): 6 раз
- Поблагодарили: 9 раз
Re: steel series на домашних страницах
int2246 писал(а): ↑Вт мар 12, 2024 8:46 pmа кто подскажет как изменить код для 3 одометров?
имею в виду чтобы данные обновлялись сами.pru469 писал(а): ↑Сб окт 10, 2020 7:52 amВсем спасибо. На сцену одиночный одометр смог вывести с помощью такого кода:Просто до этого, не внимательно переносил данные кода.Код: Выделить всё
<canvas id="canvasOdometer1" width="180" height="40"></canvas> <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='Counter01.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']=='Counter01.value') { //rad3val=obj[i]['VALUE']; odometer1.setValueAnimated(obj[i]['VALUE']); $.publish('Counter01.value.updated', obj[i]['VALUE']);} } } }$.subscribe('wsData', function (_, response) { if (response.action=='properties') { processPropertiesUpdate(response.data); } }); </script> <script> var odometer1, n = 999999997.7; //var rad3val; init(); function init() { odometer1 = new steelseries.Odometer('canvasOdometer1', { digits:6, decimals:2 }); live_upd("/pChart/?op=value&p=Counter01.value",odometer1); } function live_upd(url,gauge) { $.ajax({ url: url, }).done(function(data) { if (data!='') {gauge.setValueAnimated(parseFloat(data));} }); } </script> <script src="/tween-min.js"></script> <script src="/steelseries-min.js"></script>
Код: Выделить всё
<body onload="init()" style="background-image:url(concept2.jpg); background-size: 100%;">
<table width="100%" border="0">
<tr>
<td width="20%" >
<h3><strong><span style="color:MAGENTA;">Стиралка</span></strong></h3>
</td>
<td width="20%" >
<h3><strong><span style="color:blue;">Горячая вода</span></strong></h3>
</td>
<td width="60%" >
<h3><strong><span style="color:red;">Температура Улица</span></strong></h3>
</td>
</tr>
<tr>
<td width="20%" >
<canvas id="canvasOdometer1" width="189" height="70"></canvas>
</td>
<td width="20%" >
<canvas id="canvasOdometer2" width="189" height="70"></canvas>
</td>
<td width="60%" >
<canvas id="canvasOdometer3" width="189" height="70"></canvas>
</td>
</tr>
<tr>
<td width="20%" >
<h3><strong><span style="color:MAGENTA;">Бак 1</span></strong></h3>
</td>
<td width="20%" >
<h3><strong><span style="color:MAGENTA;">Бак 2</span></strong></h3>
</td>
<td width="60%" >
<h3><strong><span style="color:red;">Кухня</span></strong></h3>
</td>
</tr>
<tr>
<td width="20%" >
<canvas id="canvasRadial1" width="201" height="201"></canvas>
</td>
<td width="20%" >
<canvas id="canvasVertical1" width="201" height="201"></canvas>
</td>
<td width="60%" >
<canvas id="canvasVertical2" width="201" height="201"></canvas>
</td>
</tr>
</table>
<script>
var odometer1, n = 999999997.7;
var odometer2, n = 999999997.7;
var odometer3, n = 999999997.7;
var radial1;
var vertical1;
var vertical2;
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) ]);
// Initialzing gauges
radial1 = new steelseries.Radial('canvasRadial1', {
gaugeType: steelseries.GaugeType.TYPE1,
size: 201,
section: sections,
area: areas,
titleString: 'Title',
unitString: 'Type3',
threshold: 50,
lcdVisible: true
});
vertical1 = new steelseries.RadialVertical('canvasVertical1', {
titleString: 'Title',
unitString: 'North',
size: 201
});
vertical2 = new steelseries.RadialVertical('canvasVertical2', {
titleString: 'Title',
unitString: 'West',
size: 201,
orientation: steelseries.Orientation.WEST
});
odometer1 = new steelseries.Odometer('canvasOdometer1', {
digits:6,
decimals:1
});
odometer2 = new steelseries.Odometer('canvasOdometer2', {
digits:6,
decimals:2
});
odometer3 = new steelseries.Odometer('canvasOdometer3', {
digits:6,
decimals:2
});
// Start the update
//читаем данные каждые 2 с
radial1.setFrameDesign(steelseries.FrameDesign.BLACK_METAL);
vertical2.setFrameDesign(steelseries.FrameDesign.GOLD);
vertical1.setFrameDesign(steelseries.FrameDesign.GLOSSY_METAL);
radial1.setBackgroundColor(steelseries.BackgroundColor.STAINLESS);
vertical1.setBackgroundColor(steelseries.BackgroundColor.BRUSHED_STAINLESS);
radial1.setBackgroundColor(steelseries.BackgroundColor.STAINLESS);
setInterval(function(){ live_upd("/pChart/?op=value&p=mqttCounter05.value", odometer1); },2000); // вставьте свое Объект.Свойство
setInterval(function(){ live_upd("/pChart/?op=value&p=mqttCounter03.value", odometer2); },3000); // вставьте свое Объект.Свойство
setInterval(function(){ live_upd("/pChart/?op=value&p=ThisComputer.cycle_execsRun", odometer3); },4000); // вставьте свое Объект.Свойство
setInterval(function(){ live_upd("/pChart/?op=value&p=MysensorsSensor_temp08.value", radial1); },2000); // вставьте свое Объект.Свойство
setInterval(function(){ live_upd("/pChart/?op=value&p=MysensorsSensor_temp09.value", vertical1); },3000); // вставьте свое Объект.Свойство
setInterval(function(){ live_upd("/pChart/?op=value&p=MysensorsSensor_temp01.value", vertical2); },4000); // вставьте свое Объект.Свойство
}
function live_upd(url,gauge) {
$.ajax({
url: url,
}).done(function(data) {
if (data!='') {gauge.setValueAnimated(parseFloat(data));}
});
}
</script>
<script src="../SteelSeries/steelseries.js"></script>
<script src="../SteelSeries/jquery.js"></script>
<script src="../SteelSeries/tween-min.js"></script>
<script src="../SteelSeries/steelseries-min.js"></script>
</body>