2016-07-25 14 views
0

まずは - 私はコーダーではない、私はここに初めて投稿する。私は数日間さまざまな方法を試して、これを動作させることはできません。Node.js + JavaScript:戻り値、[オブジェクトHTMLDivElement]

シリアルポートからWebページに受信される温度の表示に問題があります。

var http = require('http'); 
var express = require('express'); 
var app = express(); 
var SerialPort = require("serialport"); 
var server = http.createServer(app).listen(8080); 
var io = require('socket.io').listen(server); 

app.use(express.static(__dirname + '/public')); 

var serialport = new SerialPort("/dev/cu.wchusbserialfd1210", { 
    baudrate: 9600, 
    parser: SerialPort.parsers.readline("\r\n") 
}); 
serialport.on('open', function(){ 
    // Now server is connected to Arduino 
    console.log('Serial Port Opened'); 

    var lastValue; 
    io.sockets.on('connection', function (socket) { 
     //Connecting to client 
     console.log('Socket connected'); 
     socket.emit('connected'); 
     var lastValue; 

     serialport.on('data', function(data){ 
      console.log(`Serial got: ${data}`); 
      var temperature1 = data.trim(); 
      if(lastValue !== temperature1){ 
       socket.emit('data', temperature1); 
      } 
      lastValue = temperature1; 
     }); 
    }); 
}); 

その後のindex.htmlに、私はこの機能を作成しました::

function getTemperatureA() { 
    var socket = io.connect('http://localhost:8080'); 
    var temperature1 = 0; 
    socket.on('data', function (data) { 
     tt1 = data; 
    }); 
    return tt1; 
} 

とのindex.htmlファイルで、私は使用をここで

は私のapp.jsコードですこのコード:

document.getElementById('tt1').innerHTML = "Temperature: " + getTemperatureA(); 

私はこれを取得:

温度:このindex.htmlをで

function getTemperatureA(id) { 
    var socket = io.connect('http://localhost:8080'); 
    var temperature1 = 0; 
    var box = document.getElementById(id); 
    socket.on('data', function (data) { 
     box.innerHTML = data; 
    }); 
} 

そして:

<div id="tt1"></div> 
getTemperatureA('tt1'); 

[オブジェクトHTMLDivElement]

私はこのように私の機能を使用する場合それからそれは働いており、温度を24.2(例えば)と示しています。

したがって、値を返す方法が主な質問です。関数の値を使って温度のゲージを描くには、この値が別の関数で必要ですか?

+0

このような状況では値を返すことはできません。関数の2番目のバージョンは、それがうまくいくはずです。 – Pointy

答えて

0

私は、getTemperatureA()関数を削除してこれを動作させるように管理しました。シリアルポートからのデータを受信する前にGaugeがロードされていたという問題がありました。 socket.onはJustGageの後に呼び出さなければなりません。 、とにかくサポートへの感謝

<!doctype html> 
<html> 

<head> 
    <meta charset="utf-8" /> 
    <title>Temperature</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <style> 
    @font-face { 
     font-family: 'OpenSans'; 
     src: url('fonts/OpenSans-Regular.ttf') format('truetype'); 
    } 

    body { 
     font-family: 'OpenSans'; 
     background-color: black; 
     text-align: center; 
     color: grey; 
    } 

    #t1 { 
     width:120px; height:100px; 
     display: inline-block; 
     margin: 0.5px; 
    } 

    </style> 
    <script src="/js/socket.io.min.js"></script> 
    <script src="/js/raphael-2.1.4.min.js"></script> 
    <script src="/js/justgage.js"></script> 

</head> 
<body> 
    <div id="t1"></div> 
    <script> 
     document.addEventListener("DOMContentLoaded", function(event) { 
      var tt1; 
      var socket = io.connect('http://localhost:8080'); 

      var t1 = new JustGage({ 
       title: "", 
       label: "Temperature", 
       id: "t1", 
       value: tt1, 
       min: -50, 
       decimals: true, 
       decimals: 1, 
       max: 50, 
       symbol: '\xB0C', 
       gaugeWidthScale: 0.5, 
       customSectors: [{ 
        color: "#0000ff", 
        lo: -50.0, 
        hi: -20.0 
       }, { 
        color: "#33ceff", 
        lo: -19.9, 
        hi: -10.0 
       }, { 
        color: "#33ffff", 
        lo: -9.9, 
        hi: 0 
       }, { 
        color: "#33ffda", 
        lo: 0.1, 
        hi: 17.9 
       }, { 
        color: "#00ff00", 
        lo: 18.0, 
        hi: 22.9 
       }, { 
        color: "#ffff00", 
        lo: 23.0, 
        hi: 25.9 
       }, { 
        color: "#ffa500", 
        lo: 26.0, 
        hi: 29.9 
       }, { 
        color: "#ff0000", 
        lo: 30.0, 
        hi: 50.0 
       }], 
       counter: true, 
       pointer: true, 
       titleFontColor: "grey", 
       titleFontFamily: "OpenSans", 
       valueFontColor: "grey", 
       valueFontFamily: "OpenSans", 
       formatNumber: false 
      }); 

      socket.on('data', function (data) { 
       //tt1 = parseFloat(data); 
       t1.refresh(tt1); 
      }); 
     }); 

    </script> 
</body> 

</html> 

:ここ

は私ののindex.htmlファイルです!

0

getTemperatureA()に責任があります。これらを分離して適切に使いたいと思うでしょう。それを打ち砕く。まず、websocketに接続してデータイベントハンドラを登録する作業があります。次に、入ってくるデータを使って何かをするという仕事があります。そして最後に、そのデータを参照する必要があります。

接続すると、イベントハンドラを登録するだけダウン一度にする必要があるので、あなただけのような関数を作成することができます

var tt1; 
function connectToHost() { 
    // concern 1: connect and register callback 
    var socket = io.connect('http://localhost:8080'); 
    socket.on('data', function (data) { 
     // concern 2: save the data 
     tt1 = data; 
    }); 
} 

をしてからdocument.readyのような、適切な時にそれを呼び出します。その後、あなたは現在の温度を必要とするコードでは、あなたが直接tt1を参照することができ、または何らかの理由でそれは本当にあなたのような機能を利用することができる値で返す関数である必要がない場合:

function getTemperatureA() { 
    return tt1; 
} 
+0

あなたが示唆し、 '

'と 'document.getElementById( 'TA')を使って表示しようとするconnectToHost()関数を使用すると、innerHTML =" Temperature: "+ tt1; –

+0

ソケットが接続され、データが受信される前にその「innerHTML」割り当てを行っているか、tt1がその呼び出しでスコープに入っていません。おそらくあなたはクライアントコード(index.html)をもっと共有することができますか? – Will

関連する問題