2016-03-28 29 views
0

Sensörümün algıladığı sıcaklığı göstermek için terminalde bu komutu kullanıyorum cat /sys/bus/w1/devices/28-000005330085/w1_slave | grep "t=" | awk -F "t=" '{print $2/1000}' Aslında, benim html dosyası y Ekseni rastgele sayıları temsil eden bir grafik döndürüyor. Bu sayıları sensörüm tarafından algılanan veriyle değiştirmek istiyorum ama ben nasıl olduğunu bilmiyorum! Bu rastgele sayılarBir sıcaklık sensöründen bir html dosyasına nasıl veri gönderilir?

<!DOCTYPE HTML> 
 
<html> 
 
\t <head> 
 
\t \t <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
\t \t <title>Highcharts Example</title> 
 

 
\t \t <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
\t \t <style type="text/css"> 
 
${demo.css} 
 
\t \t </style> 
 
\t \t <script type="text/javascript"> 
 
$(function() { 
 
    $(document).ready(function() { 
 
     Highcharts.setOptions({ 
 
      global: { 
 
       useUTC: false 
 
      } 
 
     }); 
 

 
     $('#container').highcharts({ 
 
      chart: { 
 
       type: 'spline', 
 
       animation: Highcharts.svg, // don't animate in old IE 
 
       marginRight: 10, 
 
       events: { 
 
        load: function() { 
 

 
         // set up the updating of the chart each second 
 
         var series = this.series[0]; 
 
         setInterval(function() { 
 
          var x = (new Date()).getTime(), // current time 
 
           y = Math.random() * 40 ; 
 
          series.addPoint([x, y], true, true); 
 
         }, 3000); 
 
        } 
 
       } 
 
      }, 
 
      title: { 
 
       text: 'Live random data' 
 
      }, 
 
      xAxis: { 
 
       type: 'datetime', 
 
       tickPixelInterval: 150 
 
      }, 
 
      yAxis: { 
 
       title: { 
 
        text: 'Value' 
 
       }, 
 
       plotLines: [{ 
 
        value: 0, 
 
        width: 1, 
 
        color: '#808080' 
 
       }] 
 
      }, 
 
      tooltip: { 
 
       formatter: function() { 
 
        return '<b>' + this.series.name + '</b><br/>' + 
 
         Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + 
 
         Highcharts.numberFormat(this.y, 2); 
 
       } 
 
      }, 
 
      legend: { 
 
       enabled: false 
 
      }, 
 
      exporting: { 
 
       enabled: false 
 
      }, 
 
      series: [{ 
 
       name: 'Random data', 
 
       data: (function() { 
 
        // generate an array of random data 
 
        var data = [], 
 
         time = (new Date()).getTime(), 
 
         i; 
 

 
        for (i = -19; i <= 0; i += 1) { 
 
         data.push({ 
 
          x: time + i * 1000, 
 
          y: Math.random() 
 
         }); 
 
        } 
 
        return data; 
 
       }()) 
 
      }] 
 
     }); 
 
    }); 
 
}); 
 
\t \t </script> 
 
\t </head> 
 
\t <body> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
 

 
\t </body> 
 
</html>

cevap

0

müşteri HTML dosyasını okur sonra benim html dosyasıdır, sizin sunucunun dışında olduğunu ve yükün anda var tüm bilgileri (doludur Örneğin, veri noktalarınız, sunucunuz tarafından (PHP?) sensörünüzün yazdığı bir dosyayı okuyarak olabilir, ancak bu tarayıcıdan dinamik olarak güncellenmez - sizden bilgi almak için bir işlev (JavaScript) yazmazsanız Örneğin, PC'nizden Örneğin, sizin ürün içinde

setInterval(function() { 
          var x = (new Date()).getTime(), // current time 
           y = Math.random() * 40 ; 
          series.addPoint([x, y], true, true); 
         }, 3000); 

Sunucudan en son noktayı almak için ajax işlevi yazabilirsiniz. Sensörünüz, geçici verileri bir ajax çağrısının sonucu olarak sunucu tarafından sıklıkla okunan bir dosyaya yazabilir. Ayrıca, her sensör güncellemesi için yerel sayfa verilerini güncellemek için websockets kullanabilirsiniz.

+0

Django kullanıyorum !! – 2mesfe

+0

Önemli değil. Olduğu gibi, sensör verilerini bir dosyaya yazmanız gerekir ve Django kodunuzda, sayfa istendiğinde bu tür bir dosyayı okumak için bir işlev yazabilir, ilk veri noktalarını (rastgele yerine) yükleyebilirsiniz. Bundan sonra, tarayıcıdan talep edildiğinde aynı dosyayı okuyan başka bir uç noktaya ("sunucu") sahip olmanız gerekir. Bunu nasıl yapacağınız, sunucu çerçevenize bağlıdır. Django hakkında hiçbir şey bilmiyorum, ama dosya sistemi işlevlerine bakmalısın. – noderman

+0

Örneğin, bu komutu çalıştırmak için kod yazabilirsiniz 'cat/sys/bus/w1/devices/28-000005330085/w1_slave | grep "t =" | awk -F "t =" "{print $ 2/1000}" ve bir tarayıcı isteğinin sonucu olarak sunucunun yanıtını ver ve bu yanıtı işlemek için tarayıcıya daha fazla kod yaz. – noderman

İlgili konular