steel series на домашних страницах

Использование системы в различных ситуациях, вопросы программирования сценариев.

Модератор: immortal

serghei
Сообщения: 2575
Зарегистрирован: Пт ноя 06, 2015 10:22 am
Откуда: Кишинёв
Благодарил (а): 303 раза
Поблагодарили: 282 раза

Re: steel series на домашних страницах

Сообщение serghei » Чт янв 18, 2018 1:42 am

На другом сервере полный комплект библиотек стоит. На этом не углядел. Спасибо !
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
serghei
Сообщения: 2575
Зарегистрирован: Пт ноя 06, 2015 10:22 am
Откуда: Кишинёв
Благодарил (а): 303 раза
Поблагодарили: 282 раза

Re: steel series на домашних страницах

Сообщение serghei » Чт янв 18, 2018 11:44 am

Ооо! Получилось вывести все индикаторы. Только надо добавить на странице

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

<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
serghei
Сообщения: 2575
Зарегистрирован: Пт ноя 06, 2015 10:22 am
Откуда: Кишинёв
Благодарил (а): 303 раза
Поблагодарили: 282 раза

Re: steel series на домашних страницах

Сообщение serghei » Пт янв 19, 2018 10:33 am

Уфф.... Простите за наглость , но последняя проблема.
Появился последний спидометр , совмещенный со счетчиком.
СпойлерПоказать

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

        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
Сообщения: 2038
Зарегистрирован: Сб ноя 22, 2014 8:45 pm
Благодарил (а): 284 раза
Поблагодарили: 629 раз

Re: steel series на домашних страницах

Сообщение xor » Вт янв 23, 2018 12:06 am

По аналогии ...
Домашняя страницаПоказать

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

<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>
За это сообщение автора xor поблагодарил:
serghei (Вт янв 23, 2018 8:57 am)
Рейтинг: 1.16%
pru469
Сообщения: 57
Зарегистрирован: Вс апр 07, 2019 6:49 pm
Благодарил (а): 33 раза
Поблагодарили: 10 раз

Re: steel series на домашних страницах

Сообщение pru469 » Чт окт 08, 2020 6:14 pm

xor писал(а):
Сб янв 13, 2018 1:04 am
По приведённому выше коду
183 строка battery1 = new steelseries.Battery(...
196 line batVal=battery1; <---- так можно?

По заданному ранее вопросу ответил в личку
Уважаемый xor может вспомните, что ответили товарищу в личку. Честно перепробовал кучу вариантов, так и не смог завести одиночный одометр.
serghei
Сообщения: 2575
Зарегистрирован: Пт ноя 06, 2015 10:22 am
Откуда: Кишинёв
Благодарил (а): 303 раза
Поблагодарили: 282 раза

Re: steel series на домашних страницах

Сообщение serghei » Пт окт 09, 2020 8:37 am

Привет. Только вечером смогу показать полный код .
За это сообщение автора serghei поблагодарил:
pru469 (Пт окт 09, 2020 6:05 pm)
Рейтинг: 1.16%
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
serghei
Сообщения: 2575
Зарегистрирован: Пт ноя 06, 2015 10:22 am
Откуда: Кишинёв
Благодарил (а): 303 раза
Поблагодарили: 282 раза

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.14.27.png (37.55 КБ) 2894 просмотра
Выглядеть будет так
СпойлерПоказать
Скриншот 2020-10-09 20.17.44.png
Скриншот 2020-10-09 20.17.44.png (187.31 КБ) 2894 просмотра
Фоновую картинку положить сюда

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

/cms/scenes/backgrounds/concept2.jpg
За это сообщение автора serghei поблагодарили (всего 2):
dengi.76 (Пт окт 09, 2020 8:40 pm) • pru469 (Сб окт 10, 2020 7:53 am)
Рейтинг: 2.33%
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
dengi.76
Сообщения: 222
Зарегистрирован: Вт фев 06, 2018 9:40 pm
Откуда: Пермь
Благодарил (а): 117 раз
Поблагодарили: 7 раз

Re: steel series на домашних страницах

Сообщение dengi.76 » Пт окт 09, 2020 8:44 pm

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
ОГРОМНОЕ Вам СПАСИБО !!!
serghei
Сообщения: 2575
Зарегистрирован: Пт ноя 06, 2015 10:22 am
Откуда: Кишинёв
Благодарил (а): 303 раза
Поблагодарили: 282 раза

Re: steel series на домашних страницах

Сообщение serghei » Пт окт 09, 2020 8:52 pm

dengi.76 писал(а):
Пт окт 09, 2020 8:44 pm

ОГРОМНОЕ Вам СПАСИБО !!!
Всегда рад помочь , хоть и мало что понимаю в мажерике. Я 3 года пытался запустить эту библиотеку на ардуинке и вот наконец-то получилось )
С фоновой картинкой пролетел - не знаю как загнать в размер экрана
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
dengi.76
Сообщения: 222
Зарегистрирован: Вт фев 06, 2018 9:40 pm
Откуда: Пермь
Благодарил (а): 117 раз
Поблагодарили: 7 раз

Re: steel series на домашних страницах

Сообщение dengi.76 » Пт окт 09, 2020 9:08 pm

serghei писал(а):
Пт окт 09, 2020 8:52 pm
dengi.76 писал(а):
Пт окт 09, 2020 8:44 pm

ОГРОМНОЕ Вам СПАСИБО !!!
Всегда рад помочь , хоть и мало что понимаю в мажерике. Я 3 года пытался запустить эту библиотеку на ардуинке и вот наконец-то получилось )
С фоновой картинкой пролетел - не знаю как загнать в размер экрана
На сколько я понял, домашние страницы не подгоняются под размер экрана ( хотя возможно это только у меня :D )
За это сообщение автора dengi.76 поблагодарил:
serghei (Пт окт 09, 2020 9:10 pm)
Рейтинг: 1.16%
Ответить