steel series на домашних страницах
Модератор: immortal
-
- Сообщения: 2575
- Зарегистрирован: Пт ноя 06, 2015 10:22 am
- Откуда: Кишинёв
- Благодарил (а): 303 раза
- Поблагодарили: 282 раза
Re: steel series на домашних страницах
На другом сервере полный комплект библиотек стоит. На этом не углядел. Спасибо !
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
-
- Сообщения: 2575
- Зарегистрирован: Пт ноя 06, 2015 10:22 am
- Откуда: Кишинёв
- Благодарил (а): 303 раза
- Поблагодарили: 282 раза
Re: steel series на домашних страницах
Ооо! Получилось вывести все индикаторы. Только надо добавить на странице
Спасибо!
Код: Выделить всё
<script src="tween-min.js"></script>
<script src="steelseries-min.js"></script>
<script src="steelseries.js"></script>
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
-
- Сообщения: 2575
- Зарегистрирован: Пт ноя 06, 2015 10:22 am
- Откуда: Кишинёв
- Благодарил (а): 303 раза
- Поблагодарили: 282 раза
Re: steel series на домашних страницах
Уфф.... Простите за наглость , но последняя проблема.
Появился последний спидометр , совмещенный со счетчиком.
Сам спидометр прицепить уже просто, а вот как одометр? Так , что бы он показывал другую переменную? Счет показывает.
Появился последний спидометр , совмещенный со счетчиком.
СпойлерПоказать
Код: Выделить всё
radial9 = new steelseries.Radial('canvasRadial9', {
gaugeType: steelseries.GaugeType.TYPE4,
size: 201,
section: sections,
area: areas,
titleString: "Title",
unitString: "Type4",
threshold: 50,
lcdVisible: true,
lcdDecimals: 1,
useOdometer: true,
odometerParams: {digits: 5, value: odoValue}
});
---------
radial9.setOdoValue(odoValue);
setInterval(function(){ setRandomValue(radial9, 100); }, 4850);
setInterval(function(){ setOdometer(radial9); }, 100);
--------- function setOdometer(gauge) {
odoValue += 0.02
gauge.setOdoValue(odoValue);
}
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
- xor
- Сообщения: 2045
- Зарегистрирован: Сб ноя 22, 2014 8:45 pm
- Благодарил (а): 289 раз
- Поблагодарили: 632 раза
Re: steel series на домашних страницах
По аналогии ...
Домашняя страницаПоказать
Код: Выделить всё
<body onload="init()">
<canvas id="canvasRadial9" width="201" height="201"></canvas>
<script>
var radial9,
odoValue = 99998.2;
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)')],
radial9 = new steelseries.Radial('canvasRadial9', {
gaugeType: steelseries.GaugeType.TYPE4,
size: 201,
section: sections,
area: areas,
titleString: "Title",
unitString: "Type4",
threshold: 50,
lcdVisible: true,
lcdDecimals: 1,
useOdometer: true,
odometerParams: {digits: 5, value: odoValue}
});
// Start the update
//читаем данные каждые 2 с
radial9.setOdoValue(odoValue);
setInterval(function(){ setRandomValue(radial9, 100); }, 4850);
//setInterval(function(){ setOdometer(radial9); }, 100);
setInterval(function(){ live_upd_odo("/objects/?op=get&object=ThisComputer&p=uptime", radial9); },2000); // вставьте свое Объект.Свойство
}
function setRandomValue(gauge, range) {
gauge.setValueAnimated(Math.random() * range);
}
// function setOdometer(gauge) {
// odoValue += 0.02
// gauge.setOdoValue(odoValue);
// }
function live_upd_odo(url,gauge) {
$.ajax({
url: url,
}).done(function(data) {
if (data!='') {gauge.setOdoValue(parseFloat(data));}
});
}
</script>
<script src="../SteelSeries/tween-min.js"></script>
<script src="../SteelSeries/steelseries-min.js"></script>
</body>
- Рейтинг: 1.16%
win10 connect https://connect.smartliving.ru/profile/303
-
- Сообщения: 57
- Зарегистрирован: Вс апр 07, 2019 6:49 pm
- Благодарил (а): 33 раза
- Поблагодарили: 10 раз
Re: steel series на домашних страницах
Уважаемый xor может вспомните, что ответили товарищу в личку. Честно перепробовал кучу вариантов, так и не смог завести одиночный одометр.
-
- Сообщения: 2575
- Зарегистрирован: Пт ноя 06, 2015 10:22 am
- Откуда: Кишинёв
- Благодарил (а): 303 раза
- Поблагодарили: 282 раза
Re: steel series на домашних страницах
Привет. Только вечером смогу показать полный код .
- Рейтинг: 1.16%
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
-
- Сообщения: 2575
- Зарегистрирован: Пт ноя 06, 2015 10:22 am
- Откуда: Кишинёв
- Благодарил (а): 303 раза
- Поблагодарили: 282 раза
Re: steel series на домашних страницах
У меня одометры совместно с другими спидометрами. Код домашней страницы
Конечно же библиотеки должны быть установлены заранее.
Создай домашнюю страницу с этим кодом
Выглядеть будет так
Фоновую картинку положить сюда
Код: Выделить всё
<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>
Создай домашнюю страницу с этим кодом
СпойлерПоказать
СпойлерПоказать
Код: Выделить всё
/cms/scenes/backgrounds/concept2.jpg
- Рейтинг: 2.33%
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
-
- Сообщения: 222
- Зарегистрирован: Вт фев 06, 2018 9:40 pm
- Откуда: Пермь
- Благодарил (а): 117 раз
- Поблагодарили: 7 раз
Re: steel series на домашних страницах
ОГРОМНОЕ Вам СПАСИБО !!!serghei писал(а): ↑Пт окт 09, 2020 8:26 pmУ меня одометры совместно с другими спидометрами. Код домашней страницыКонечно же библиотеки должны быть установлены заранее.Код: Выделить всё
<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>
Создай домашнюю страницу с этим кодомВыглядеть будет такСпойлерПоказатьСкриншот 2020-10-09 20.14.27.pngФоновую картинку положить сюдаСпойлерПоказатьСкриншот 2020-10-09 20.17.44.pngКод: Выделить всё
/cms/scenes/backgrounds/concept2.jpg
-
- Сообщения: 2575
- Зарегистрирован: Пт ноя 06, 2015 10:22 am
- Откуда: Кишинёв
- Благодарил (а): 303 раза
- Поблагодарили: 282 раза
Re: steel series на домашних страницах
Всегда рад помочь , хоть и мало что понимаю в мажерике. Я 3 года пытался запустить эту библиотеку на ардуинке и вот наконец-то получилось )
С фоновой картинкой пролетел - не знаю как загнать в размер экрана
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
-
- Сообщения: 222
- Зарегистрирован: Вт фев 06, 2018 9:40 pm
- Откуда: Пермь
- Благодарил (а): 117 раз
- Поблагодарили: 7 раз
Re: steel series на домашних страницах
На сколько я понял, домашние страницы не подгоняются под размер экрана ( хотя возможно это только у меня )
- Рейтинг: 1.16%