以下のHTMLを「temp_123d.htm」と名前を付けて保存してください。
※このコードは、このブログのサイドバーに埋め込んでいます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>温度</title> | |
| <script type="text/javascript" src="http://www.google.com/jsapi"></script> | |
| <script src="http://dweet.io/client/dweet.io.min.js"></script> | |
| </head> | |
| <body> | |
| <div> | |
| <button onclick="subscribe()">接続</button> | |
| <button onclick="unsubscribe()">切断</button> | |
| </div> | |
| <div> | |
| <div id="temperatureGauge"></div> | |
| <div id="chart_div"></div> | |
| </div> | |
| <script type="text/javascript"> | |
| var thingName = "arduino-temperature" // channel名の設定 | |
| // Google Chart | |
| google.load("visualization", "1", {packages:["gauge", "line","corechart"]}); | |
| google.setOnLoadCallback(drawChart); | |
| function drawChart() { | |
| // Data for temperature Gauge | |
| Data = google.visualization.arrayToDataTable([ | |
| ['Label', 'Value'], | |
| ['Temperature', 0], | |
| ]); | |
| // Option for temperature Gauge | |
| Options = { | |
| width: 200, height: 200, | |
| min: 0, max: 150, | |
| redFrom: 112, redTo: 150, | |
| yellowFrom:75, yellowTo: 112, | |
| minorTicks: 5 | |
| }; | |
| Gauge = new google.visualization.Gauge(document.getElementById('temperatureGauge')); | |
| Gauge.draw(Data, Options); | |
| }; | |
| function subscribe() { | |
| dweetio.listen_for(thingName, function(dweet){ | |
| // Update temperature data | |
| Data.setValue(0, 1, dweet.content.temperature); | |
| Gauge.draw(Data, Options); | |
| }); | |
| } | |
| function unsubscribe(){ | |
| dweetio.stop_listening_for(thingName); | |
| Data.setValue(0, 1, 0); | |
| Gauge.draw(Data, Options); | |
| } | |
| </script> | |
| </body> | |
| </html> |
「temp_123d.htm」をブラウザで開いてください。
[接続]ボタンをクリックすると温度データと取得します。
[切断]ボタンをクリックすると、データの取得を停止します。
※データを取得するまで時間がかかります。
123D Circuitsの温度データを変化させるには、温度センサーLM35をクリックし、表示されたバーをスライドさせます。
グラフで確認するには、こちらを参照してください。
0 件のコメント:
コメントを投稿