SlideShare a Scribd company logo
1 of 11
Download to read offline
電子工程系應 用 電 子 組
電 腦 遊 戲 設 計 組
使用網頁顯示監測
資料
吳錫修
November 22, 2015
shapethefuture
電子工程系
應 用 電 子 組
電 腦 遊 戲 設 計 組
 範例:File/Examples/Bridge/TemperatureWebPanel
 TemperatureWebPanel範例展示將Arduino Yún監測資料記錄到
SD卡網頁檔,用戶端可透過HTTP協定檢視監測資料
 參考資料
http://www.arduino.cc/en/Tutorial/TemperatureWebPanel
TemperatureWebPanel範例
2
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
shapethefuture
電子工程系
應 用 電 子 組
電 腦 遊 戲 設 計 組
 Arduino Yún與電腦連接到相同WiFi
 確認已連接Arduino Yún
測試TemperatureWebPanel範例 1/2
4
shapethefuture
電子工程系
應 用 電 子 組
電 腦 遊 戲 設 計 組
 使用LM35溫度感測器
硬體接線
5
接Arduino A0
接Arduino A2
接Arduino A1
shapethefuture
電子工程系
應 用 電 子 組
電 腦 遊 戲 設 計 組
 開啟瀏覽器連接nkeeyun.local/sd/TemperatureWebPanel/
測試
6
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
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
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
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
shapethefuture
電子工程系
應 用 電 子 組
電 腦 遊 戲 設 計 組
client.stop(); //結束用戶連線並釋放資源
hits++;
}
delay(50); //每50ms輪詢⼀次
}
解析TemperatureWebPanel程式碼 4/4
11

More Related Content

What's hot

Arduino mqtt client introduction
Arduino mqtt client introductionArduino mqtt client introduction
Arduino mqtt client introduction
承翰 蔡
 
Webduino introduction
Webduino introductionWebduino introduction
Webduino introduction
承翰 蔡
 

What's hot (20)

Arduino程式開發工具
Arduino程式開發工具Arduino程式開發工具
Arduino程式開發工具
 
建立PHP & MySQL應用程式開發環境 - XAMPP安裝與測試
建立PHP & MySQL應用程式開發環境 - XAMPP安裝與測試建立PHP & MySQL應用程式開發環境 - XAMPP安裝與測試
建立PHP & MySQL應用程式開發環境 - XAMPP安裝與測試
 
更新Arduino Yún OS
更新Arduino Yún OS更新Arduino Yún OS
更新Arduino Yún OS
 
Arduino Yun Mini簡介
Arduino Yun Mini簡介Arduino Yun Mini簡介
Arduino Yun Mini簡介
 
Python與Ardinio整合應用
Python與Ardinio整合應用Python與Ardinio整合應用
Python與Ardinio整合應用
 
Arduino Yún使用Http restful api控制io
Arduino Yún使用Http restful api控制ioArduino Yún使用Http restful api控制io
Arduino Yún使用Http restful api控制io
 
Arduino Yún使用sd card儲存監測資料
Arduino Yún使用sd card儲存監測資料Arduino Yún使用sd card儲存監測資料
Arduino Yún使用sd card儲存監測資料
 
Arduino應用系統設計 - 系統開發工具
Arduino應用系統設計 - 系統開發工具Arduino應用系統設計 - 系統開發工具
Arduino應用系統設計 - 系統開發工具
 
Web + Arduino 實在有夠潮 ( 課程簡報 )
Web + Arduino 實在有夠潮 ( 課程簡報 ) Web + Arduino 實在有夠潮 ( 課程簡報 )
Web + Arduino 實在有夠潮 ( 課程簡報 )
 
Arduino mqtt client introduction
Arduino mqtt client introductionArduino mqtt client introduction
Arduino mqtt client introduction
 
IDE for micro:bit
IDE for micro:bitIDE for micro:bit
IDE for micro:bit
 
Webduino introduction
Webduino introductionWebduino introduction
Webduino introduction
 
Arduino Yun 物聯網 Lesson 1
Arduino Yun 物聯網 Lesson 1Arduino Yun 物聯網 Lesson 1
Arduino Yun 物聯網 Lesson 1
 
LinkIt 7697 IoT tutorial
LinkIt 7697 IoT tutorialLinkIt 7697 IoT tutorial
LinkIt 7697 IoT tutorial
 
AMA 認證簡介
AMA 認證簡介AMA 認證簡介
AMA 認證簡介
 
Arduino AMA中級認證術科實作 all
Arduino AMA中級認證術科實作 allArduino AMA中級認證術科實作 all
Arduino AMA中級認證術科實作 all
 
Getting started with amarino
Getting started with amarinoGetting started with amarino
Getting started with amarino
 
Arduino Yun 物聯網 Lesson 3
Arduino Yun 物聯網 Lesson 3Arduino Yun 物聯網 Lesson 3
Arduino Yun 物聯網 Lesson 3
 
瞻營全電子_六足機器人(二)
瞻營全電子_六足機器人(二)瞻營全電子_六足機器人(二)
瞻營全電子_六足機器人(二)
 
LinkIt 7697 開發平台簡介 (Traditional Chinese)
LinkIt 7697 開發平台簡介 (Traditional Chinese)LinkIt 7697 開發平台簡介 (Traditional Chinese)
LinkIt 7697 開發平台簡介 (Traditional Chinese)
 

Viewers also liked

Chapter 3 XBee無線遙控車
Chapter 3 XBee無線遙控車Chapter 3 XBee無線遙控車
Chapter 3 XBee無線遙控車
CAVEDU Education
 
Chapter 2 XBee無線傳輸
Chapter 2 XBee無線傳輸Chapter 2 XBee無線傳輸
Chapter 2 XBee無線傳輸
CAVEDU Education
 
Chapter 4 無線傳輸大筆資料傳輸與應用
Chapter 4 無線傳輸大筆資料傳輸與應用Chapter 4 無線傳輸大筆資料傳輸與應用
Chapter 4 無線傳輸大筆資料傳輸與應用
CAVEDU Education
 

Viewers also liked (20)

Arduino Yun 物聯網 Lesson 2
Arduino Yun 物聯網 Lesson 2Arduino Yun 物聯網 Lesson 2
Arduino Yun 物聯網 Lesson 2
 
物聯網教學與上海深圳maker行
物聯網教學與上海深圳maker行物聯網教學與上海深圳maker行
物聯網教學與上海深圳maker行
 
Arduino Yún使用Temboo服務
Arduino Yún使用Temboo服務Arduino Yún使用Temboo服務
Arduino Yún使用Temboo服務
 
Unity遊戲程式設計(04) 2D運動與碰撞處理I
Unity遊戲程式設計(04) 2D運動與碰撞處理IUnity遊戲程式設計(04) 2D運動與碰撞處理I
Unity遊戲程式設計(04) 2D運動與碰撞處理I
 
Unity遊戲程式設計(01) Unity簡介
Unity遊戲程式設計(01) Unity簡介Unity遊戲程式設計(01) Unity簡介
Unity遊戲程式設計(01) Unity簡介
 
Unity遊戲程式設計(09) 3D物件與光源設定
Unity遊戲程式設計(09) 3D物件與光源設定Unity遊戲程式設計(09) 3D物件與光源設定
Unity遊戲程式設計(09) 3D物件與光源設定
 
mBot 教學7 聲光控制應用
mBot 教學7 聲光控制應用mBot 教學7 聲光控制應用
mBot 教學7 聲光控制應用
 
Mbot教學(1b) mBot初體驗
Mbot教學(1b) mBot初體驗Mbot教學(1b) mBot初體驗
Mbot教學(1b) mBot初體驗
 
mBot 教學5 超音波感測應用
mBot 教學5 超音波感測應用mBot 教學5 超音波感測應用
mBot 教學5 超音波感測應用
 
mBot 教學6 光感測器與LED應用
mBot 教學6 光感測器與LED應用mBot 教學6 光感測器與LED應用
mBot 教學6 光感測器與LED應用
 
Arduino、Web 到 IoT
Arduino、Web 到 IoTArduino、Web 到 IoT
Arduino、Web 到 IoT
 
Chapter 3 XBee無線遙控車
Chapter 3 XBee無線遙控車Chapter 3 XBee無線遙控車
Chapter 3 XBee無線遙控車
 
Chapter 2 XBee無線傳輸
Chapter 2 XBee無線傳輸Chapter 2 XBee無線傳輸
Chapter 2 XBee無線傳輸
 
IBM以雲端技術與物聯網創新產業應用@2016 New Taipei Maker Faire
IBM以雲端技術與物聯網創新產業應用@2016 New Taipei Maker FaireIBM以雲端技術與物聯網創新產業應用@2016 New Taipei Maker Faire
IBM以雲端技術與物聯網創新產業應用@2016 New Taipei Maker Faire
 
161123
161123161123
161123
 
Chapter 1 what is arduino
Chapter 1 what is arduinoChapter 1 what is arduino
Chapter 1 what is arduino
 
Chapter 4 無線傳輸大筆資料傳輸與應用
Chapter 4 無線傳輸大筆資料傳輸與應用Chapter 4 無線傳輸大筆資料傳輸與應用
Chapter 4 無線傳輸大筆資料傳輸與應用
 
專題製作 六軸機械手臂控制
專題製作 六軸機械手臂控制專題製作 六軸機械手臂控制
專題製作 六軸機械手臂控制
 
Arduino 習作工坊 - Lesson 2 動力之夜
Arduino 習作工坊 - Lesson 2 動力之夜Arduino 習作工坊 - Lesson 2 動力之夜
Arduino 習作工坊 - Lesson 2 動力之夜
 
8direction behavior
8direction behavior8direction behavior
8direction behavior
 

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

Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoload
jay li
 
Using google appengine_final
Using google appengine_finalUsing google appengine_final
Using google appengine_final
Wei Sun
 
WEB 安全基础
WEB 安全基础WEB 安全基础
WEB 安全基础
xki
 
Using google appengine (2)
Using google appengine (2)Using google appengine (2)
Using google appengine (2)
Wei Sun
 
Tm快报201202 daqiu
Tm快报201202 daqiuTm快报201202 daqiu
Tm快报201202 daqiu
tbmallf2e
 

Similar to Arduino Yún使用網頁顯示監測資料 (20)

利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
 
HTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 appHTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 app
 
Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoload
 
常用开发工具介绍
常用开发工具介绍常用开发工具介绍
常用开发工具介绍
 
ASP.NET Core 2.1設計新思維與新發展
ASP.NET  Core 2.1設計新思維與新發展ASP.NET  Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
 
在雲端上啜飲爪哇
在雲端上啜飲爪哇在雲端上啜飲爪哇
在雲端上啜飲爪哇
 
TBAD F2E 2010 review
TBAD F2E 2010 reviewTBAD F2E 2010 review
TBAD F2E 2010 review
 
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練4
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練42015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練4
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練4
 
181201_CoAP_coding365
181201_CoAP_coding365181201_CoAP_coding365
181201_CoAP_coding365
 
PHP 應用之一 socket funion : 偽 WEB Server
PHP 應用之一 socket funion : 偽 WEB ServerPHP 應用之一 socket funion : 偽 WEB Server
PHP 應用之一 socket funion : 偽 WEB Server
 
Js dom
Js domJs dom
Js dom
 
Using google appengine_final
Using google appengine_finalUsing google appengine_final
Using google appengine_final
 
以HTML5和COIMOTION打造跨平台App
以HTML5和COIMOTION打造跨平台App以HTML5和COIMOTION打造跨平台App
以HTML5和COIMOTION打造跨平台App
 
[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式
[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式
[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式
 
ASP.NET MVC 開發分享
ASP.NET MVC 開發分享ASP.NET MVC 開發分享
ASP.NET MVC 開發分享
 
WEB 安全基础
WEB 安全基础WEB 安全基础
WEB 安全基础
 
Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.xIntroduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.x
 
Using google appengine (2)
Using google appengine (2)Using google appengine (2)
Using google appengine (2)
 
Tm快报201202 daqiu
Tm快报201202 daqiuTm快报201202 daqiu
Tm快报201202 daqiu
 
自由軟體鑄造場_20111023_Subversion版本控制系統之操作_曾義峰(ant)
自由軟體鑄造場_20111023_Subversion版本控制系統之操作_曾義峰(ant)自由軟體鑄造場_20111023_Subversion版本控制系統之操作_曾義峰(ant)
自由軟體鑄造場_20111023_Subversion版本控制系統之操作_曾義峰(ant)
 

More from 吳錫修 (ShyiShiou Wu)

More from 吳錫修 (ShyiShiou Wu) (20)

Vuforia AR影片程式設計
Vuforia AR影片程式設計Vuforia AR影片程式設計
Vuforia AR影片程式設計
 
micro:bit亮度感測應用
micro:bit亮度感測應用micro:bit亮度感測應用
micro:bit亮度感測應用
 
Vuforia AR 同時追踨多張辨識圖
Vuforia AR同時追踨多張辨識圖Vuforia AR同時追踨多張辨識圖
Vuforia AR 同時追踨多張辨識圖
 
micro:bit開關控制應用
micro:bit開關控制應用micro:bit開關控制應用
micro:bit開關控制應用
 
Vuforia AR 應用程式設計入門
Vuforia AR應用程式設計入門Vuforia AR應用程式設計入門
Vuforia AR 應用程式設計入門
 
Vuforia AR 應用程式準備作業
Vuforia AR應用程式準備作業Vuforia AR應用程式準備作業
Vuforia AR 應用程式準備作業
 
micro:bit LED顯示控制
micro:bit LED顯示控制micro:bit LED顯示控制
micro:bit LED顯示控制
 
Microbit 1 introduction
Microbit 1 introductionMicrobit 1 introduction
Microbit 1 introduction
 
Arduino overview
Arduino overviewArduino overview
Arduino overview
 
使用Makeblock App學習mBot程式設計
使用Makeblock App學習mBot程式設計使用Makeblock App學習mBot程式設計
使用Makeblock App學習mBot程式設計
 
使用M部落App學習mBot程式設計
使用M部落App學習mBot程式設計使用M部落App學習mBot程式設計
使用M部落App學習mBot程式設計
 
nodeMCU IOT教學03 - NodeMCU導論
nodeMCU IOT教學03 - NodeMCU導論nodeMCU IOT教學03 - NodeMCU導論
nodeMCU IOT教學03 - NodeMCU導論
 
nodeMCU IOT教學02 - Lua語言
nodeMCU IOT教學02 - Lua語言nodeMCU IOT教學02 - Lua語言
nodeMCU IOT教學02 - Lua語言
 
Unity遊戲程式設計 - 2D Platformer遊戲
Unity遊戲程式設計 - 2D Platformer遊戲Unity遊戲程式設計 - 2D Platformer遊戲
Unity遊戲程式設計 - 2D Platformer遊戲
 
Unity遊戲程式設計 - 2D移動與碰撞處理II
Unity遊戲程式設計 - 2D移動與碰撞處理IIUnity遊戲程式設計 - 2D移動與碰撞處理II
Unity遊戲程式設計 - 2D移動與碰撞處理II
 
Unity遊戲程式設計 - 2D運動與碰撞處理I
Unity遊戲程式設計 - 2D運動與碰撞處理IUnity遊戲程式設計 - 2D運動與碰撞處理I
Unity遊戲程式設計 - 2D運動與碰撞處理I
 
Python與Ardinio整合應用
Python與Ardinio整合應用Python與Ardinio整合應用
Python與Ardinio整合應用
 
mBlock積木式設計程式
mBlock積木式設計程式mBlock積木式設計程式
mBlock積木式設計程式
 
Arduino程式除錯
Arduino程式除錯Arduino程式除錯
Arduino程式除錯
 
Unity遊戲設計- 2D動畫製作及應用
Unity遊戲設計-  2D動畫製作及應用Unity遊戲設計-  2D動畫製作及應用
Unity遊戲設計- 2D動畫製作及應用
 

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

  • 1. 電子工程系應 用 電 子 組 電 腦 遊 戲 設 計 組 使用網頁顯示監測 資料 吳錫修 November 22, 2015
  • 2. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組  範例:File/Examples/Bridge/TemperatureWebPanel  TemperatureWebPanel範例展示將Arduino Yún監測資料記錄到 SD卡網頁檔,用戶端可透過HTTP協定檢視監測資料  參考資料 http://www.arduino.cc/en/Tutorial/TemperatureWebPanel TemperatureWebPanel範例 2
  • 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. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組  Arduino Yún與電腦連接到相同WiFi  確認已連接Arduino Yún 測試TemperatureWebPanel範例 1/2 4
  • 5. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組  使用LM35溫度感測器 硬體接線 5 接Arduino A0 接Arduino A2 接Arduino A1
  • 6. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組  開啟瀏覽器連接nkeeyun.local/sd/TemperatureWebPanel/ 測試 6
  • 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. 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. 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. 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. shapethefuture 電子工程系 應 用 電 子 組 電 腦 遊 戲 設 計 組 client.stop(); //結束用戶連線並釋放資源 hits++; } delay(50); //每50ms輪詢⼀次 } 解析TemperatureWebPanel程式碼 4/4 11