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

serghei · Сообщение **serghei** » Пт окт 09, 2020 9:12 pm

Надо HTML5 учить конкретно. И да , проценты тут не сработали. Скорее всего тогда размер картинки подгонять вручную

xor · Сообщение **xor** » Сб окт 10, 2020 1:24 am

serghei писал(а): ↑
Пт окт 09, 2020 8:26 pm

</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>[/code]

что-то много подключено
у меня (я только в 3rdparty папку перенёс)
<script src="/3rdparty/SteelSeries/tween-min.js"></script>
<script src="/3rdparty/SteelSeries/steelseries-min.js"></script>

xor · Сообщение **xor** » Сб окт 10, 2020 1:33 am

pru469 писал(а): ↑
Чт окт 08, 2020 6:14 pm

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

По заданному ранее вопросу ответил в личку
Уважаемый xor может вспомните, что ответили товарищу в личку. Честно перепробовал кучу вариантов, так и не смог завести одиночный одометр.

Честно говоря, уже не помню. Что-то про пути расположения библиотек. А пример из первого поста не завёлся?

pru469 · Сообщение **pru469** » Сб окт 10, 2020 6:41 am

xor писал(а): ↑
Сб окт 10, 2020 1:33 am

pru469 писал(а): ↑
Чт окт 08, 2020 6:14 pm

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

По заданному ранее вопросу ответил в личку
Уважаемый xor может вспомните, что ответили товарищу в личку. Честно перепробовал кучу вариантов, так и не смог завести одиночный одометр.
Честно говоря, уже не помню. Что-то про пути расположения библиотек. А пример из первого поста не завёлся?

Не завелся, я пытаюсь одометр расположить на сцене. По аналогии спидометра код, которого у меня работает на сцене:

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

<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>

Если ставлю из примера первого поста, то вообще пустая картинка, только при обновлении страницы на секунду выскакивает одометр с нулями. Я пытался под шапку рабочего кода подставлять значения одометра и тоже, не заводится.

pru469 · Сообщение **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>

Просто до этого, не внимательно переносил данные кода.

pru469 · Сообщение **pru469** » Сб окт 10, 2020 7:50 pm

Может кому пригодится, Алиса бегущей строкой на сцене:

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

<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>

serghei · Сообщение **serghei** » Вс окт 11, 2020 9:53 am

Что-то я не соображу - куда и как вставить этот код ? С разбегу не завелась.

Jilber · Сообщение **Jilber** » Вс окт 11, 2020 11:35 am

Вставить в HTML-элемент на сцене. И в последних двух строках надо указать правильный путь к файлам "tween-min.js" и "steelseries-min.js". У меня из-за этого сначала тоже не заработало.

int2246 · Сообщение **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>

Просто до этого, не внимательно переносил данные кода.

Djeday999 · Сообщение **Djeday999** » Ср мар 13, 2024 6:46 am

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>

По аналогии на 3 одометра.

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

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

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

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

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

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

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

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

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

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

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