Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Arduino Yún使用網頁顯示監測資料

2,230 views

Published on

介紹如何將Arduino Yún監測資料動態顯示在網頁上

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Arduino Yún使用網頁顯示監測資料

  1. 1. 電子工程系應 用 電 子 組 電 腦 遊 戲 設 計 組 使用網頁顯示監測 資料 吳錫修 November 22, 2015
  2. 2. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組  範例:File/Examples/Bridge/TemperatureWebPanel  TemperatureWebPanel範例展示將Arduino Yún監測資料記錄到 SD卡網頁檔,用戶端可透過HTTP協定檢視監測資料  參考資料 http://www.arduino.cc/en/Tutorial/TemperatureWebPanel TemperatureWebPanel範例 2
  3. 3. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 <html> <head> <script type="text/javascript" src="zepto.min.js"></script> <script type="text/javascript"> function refresh() { <!—將REST call結果載入到content元素中--> $(‘#content’).load(‘/arduino/temperature’); } </script> </head> <body onload="setInterval(refresh, 2000);"> <span id=“content”>0</span> <!--用來動態顯示溫度記錄--> </body> </html> Index.html 3
  4. 4. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組  Arduino Yún與電腦連接到相同WiFi  確認已連接Arduino Yún 測試TemperatureWebPanel範例 1/2 4
  5. 5. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組  使用LM35溫度感測器 硬體接線 5 接Arduino A0 接Arduino A2 接Arduino A1
  6. 6. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組  開啟瀏覽器連接nkeeyun.local/sd/TemperatureWebPanel/ 測試 6
  7. 7. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 #include <Bridge.h> #include <YunServer.h> #include <YunClient.h> YunServer server; String startString; long hits = 0; void setup() { Serial.begin(9600); pinMode(13, OUTPUT); digitalWrite(13, LOW); Bridge.begin(); //起始Bridge digitalWrite(13, HIGH); //指示Bridge已啟動 解析TemperatureWebPanel程式碼 1/3 7
  8. 8. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 //使用A0及A2提供LM35感測器電源及接地 pinMode(A0, OUTPUT); pinMode(A2, OUTPUT); digitalWrite(A0, HIGH); digitalWrite(A2, LOW); server.begin(); //記錄程式執行起始時間 Process startTime; startTime.runShellCommand("date"); while (startTime.available()) { char c = startTime.read(); startString += c; } } 解析TemperatureWebPanel程式碼 2/3 8
  9. 9. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 void loop() { YunClient client = server.accept(); //接受用戶端連線 if (client) { //新用戶端連線作業 String command = client.readString(); //讀取命令字串 command.trim(); Serial.println(command); if (command == "temperature") { //收到temperature命令 Process time; time.runShellCommand("date"); //取得伺服器目前時間 String timeString = ""; while (time.available()) { char c = time.read(); timeString += c; } 解析TemperatureWebPanel程式碼 3/3 9
  10. 10. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 Serial.println(timeString); int sensorValue = analogRead(A1); //讀取LM35感測值 float voltage = sensorValue*(5000.0f/1024.0f); //轉換為mv float temperature = voltage / 10.0f; //轉換攝氏溫度值 //回應溫度偵測結果: client.print("Current time on the Y&uacute;n: "); client.println(timeString); client.print("<br>Current temperature: "); client.print(temperature); client.print(" &deg;C"); client.print("<br>This sketch has been running since "); client.print(startString); client.print("<br>Hits so far: "); client.print(hits); } 解析TemperatureWebPanel程式碼 3/3 10
  11. 11. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 client.stop(); //結束用戶連線並釋放資源 hits++; } delay(50); //每50ms輪詢⼀次 } 解析TemperatureWebPanel程式碼 4/4 11

×