Hard
โปรเจกต์ YunServer: ส่งค่า Sensor ไปยัง HTML Page
ส่งค่าจาก Sensor ไปยัง Web Page โดยใช้ YunServer
14,483 ถูกใจ
รายการอุปกรณ์และเครื่องมือ
รายละเอียดและวิธีทำ
1. เริ่มจากตัวอย่าง
หากคุณดูในตัวอย่างของ Bridge library จะมีตัวอย่างหนึ่งที่ชื่อว่า “TemperatureWebPanel” ซึ่งรับค่าจาก Arduino pin แล้วส่งไปยัง server โดยใช้ Bridge library และสุดท้ายจะพิมพ์ค่านั้นลงบนหน้า HTML นี่เป็นแอปพลิเคชันพื้นฐานมาก แต่แนวคิดของมันทรงพลังมาก และนั่นคือสิ่งที่เรากำลังจะสร้างขึ้นใหม่ตั้งแต่ต้นในบทช่วยสอนนี้ เราเริ่มจากตัวอย่างนี้เพื่อทำความเข้าใจแนวคิดหลักบางประการของระบบนี้
กระบวนการทั้งหมดที่ส่งและรับข้อมูลจาก Arduino ไปยัง Linino และในทางกลับกันนั้นดำเนินการโดย Bridge Library ซอฟต์แวร์ชิ้นใหม่นี้มาพร้อมกับ IDE 1.5.4 และช่วยให้สื่อสารกับส่วน Linino ของบอร์ด Arduino ของคุณได้ง่ายมาก ลองดูตัวอย่างของ Bridge หรือดูข้อมูลอ้างอิงสำหรับรายละเอียดเพิ่มเติม
2. TemperatureWebPanel
มาดูกันว่าเราจะสร้างสิ่งที่โต้ตอบได้ด้วยตัวเองได้อย่างไร โดยเริ่มจากตัวอย่าง TemperatureWebPanel เราจะลองทำแบบเดียวกันแต่ใช้ข้อมูลน้อยลง เพื่อทำความเข้าใจแนวคิดหลัก
เพื่อให้งานนี้สำเร็จ เราต้องการองค์ประกอบสองอย่าง: Arduino sketch ของเรา และ HTML page
หน้า HTML จะส่งคำขอไปยัง Yun server ซึ่งจะตอบกลับด้วยค่าบางอย่างที่หน้าเว็บจะแสดงผล การสื่อสารจะเป็นลักษณะเช่น: “Yun ช่วยบอกค่าอุณหภูมิให้ฉันหน่อยได้ไหม?” “มันคือ 34 องศา”
มาเริ่มกันที่หน้า HTML: เราไม่ได้เน้นที่เนื้อหามากเท่ากับฟังก์ชันการทำงาน หน้าเว็บของเราจะว่างเปล่าโดยมีเพียงค่าตัวเลขของ Sensor เท่านั้น หากคุณมีความเชี่ยวชาญด้าน CSS อยู่แล้ว คุณสามารถปรับแต่งมันได้ตามต้องการ
ในการส่งคำขอ เราจำเป็นต้องเขียน Javascript หากคุณยังใหม่กับเรื่องนี้ ไม่ต้องกังวล เราจะใช้ library ที่ช่วยให้งานง่ายขึ้น ในตัวอย่าง TemperatureWebPanel มีการใช้ Zepto ซึ่งเป็นเวอร์ชันที่เบากว่าของ jQuery (แต่คุณสามารถใช้ jQuery หรือ JS library อื่นๆ ได้ เนื่องจากทุกอย่างจะถูกอัปโหลดลงใน SD card) เราแค่กำลังเลียนแบบตัวอย่างเพื่อทำความเข้าใจให้ดียิ่งขึ้น ดังนั้นเราจึงจะใช้ Zepto เช่นกัน
3. HTML & Zepto
สร้างโฟลเดอร์ว่างใหม่ จากนั้นวางไฟล์ index.html ใหม่ลงไป (คุณสามารถสร้างด้วย text editor ตัวใดก็ได้ ส่วนตัวผมใช้ SublimeText2)
ขั้นตอนที่สองคือการคัดลอก zepto.min.js ลงในโฟลเดอร์นั้น (คุณสามารถคัดลอกได้จากโฟลเดอร์ “www” ของตัวอย่าง TemperatureWebPanel หรือ ดาวน์โหลด จากเว็บไซต์ของพวกเขา)
Zepto เป็นเพียงเวอร์ชันน้ำหนักเบาของ jQuery เพื่อให้มีขนาดเล็กมาก พวกเขาจึงต้องยอมแลกกับความเข้ากันได้ของเบราว์เซอร์ หากสิ่งนี้ไม่ทำงานในเบราว์เซอร์ของคุณ ให้ใช้ jQuery มาตรฐานแทน ใน sketch ของเรา jQuery / Zepto ถูกใช้สำหรับฟังก์ชัน $(“#content”).load ซึ่งหากไม่มี library ใดๆ และใช้ pure JavaScript มันจะยาวและซับซ้อนกว่านี้มาก
4. index.html
เนื้อหาของหน้า index.html ของเรา:
<!DOCTYPE html>
<head>
\t<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript">
function refresh() {
$('#content').load('/arduino/temperature');
\t \t}
</script>
</head>
<body onload="setInterval(refresh, 1000);">
\t<span id="content">Waiting for Arduino...</span>
</body>
5. รายละเอียดของ HTML
หลังจากรวม Zepto แล้ว ให้สร้าง script ใหม่ที่เราสร้าง function ชื่อ refresh() ขึ้นมา มันจะโหลดเนื้อหาทั้งหมดของ URL "/arduino/temperature" เข้าไปใน span 'content' ของเรา
function refresh() {
$('#content').load('/arduino/temperature');
}
ฟังก์ชันด้านบนสามารถอ่านได้ว่า: “โหลดเนื้อหาของ URL ‘/arduino/temperature’ เข้าไปในองค์ประกอบที่แท็กด้วย ‘content’”
ในแท็ก body คุณสามารถเรียกฟังก์ชัน refresh ทุกๆ วินาที (1000 milliseconds) ด้วยเมธอด "setInterval" ของ javascript ภายใน body ให้สร้างองค์ประกอบที่มี id เป็น 'content' ซึ่งเป็นที่ที่ข้อความจาก Arduino จะถูกโหลดเข้ามา
เมื่อ script ของเราโหลดเนื้อหาทุกวินาที มันจะทำการ call ไปยัง URL นั้น (/arduino/temperature) บน Yún server โดย Yún จะรับการเรียกนั้นและตอบกลับด้วยค่า ซึ่งจะถูกโหลดเข้าสู่ div "content" โดยตรงตามที่เป็นอยู่
6. Arduino Sketch
คราวนี้มาดูฝั่ง Arduino กันบ้าง:
เปิด Arduino IDE ขึ้นมาและเริ่ม sketch ใหม่
มาเริ่มด้วยการรวม libraries ที่เราใช้ไว้ที่ด้านบนสุดของ sketch ก่อนส่วน setup()
ด้วยรายการของ #include
.
จากนั้นกำหนดค่าเริ่มต้นสำหรับ YunServer object ที่ชื่อว่า server
YunServer server;
ตอนนี้ในฟังก์ชัน setup เราเริ่มการทำงานของ Bridge และ server บน localhost (ไม่มีใครจากเครือข่ายภายนอกสามารถเชื่อมต่อได้):
void setup() { Bridge.begin(); server.listenOnLocalhost(); server.begin(); }
จากนั้นใน loop เราสร้าง client object เพื่อรับคำขอจาก client:
// Get clients coming from server YunClient client = server.accept();
Code ของเราจะถูกเรียกใช้งานแบบ “on-demand” เท่านั้น นั่นคือเมื่อ Arduino รับคำขอจาก client:
if(client) { ... }
หากเราได้รับการตอบกลับ สิ่งแรกที่ต้องการทำคือบันทึกเนื้อหาลงใน String object และกำจัดช่องว่างด้วยเมธอด trim()
String request = client.readString(); request.trim();
หลังจากนั้นเราต้องการตรวจสอบ String ซึ่งอาจไม่จำเป็นหากเราจัดการกับองค์ประกอบเดียว เพราะเราสามารถส่งองค์ประกอบนั้นได้เลยโดยไม่ต้องมี “label” อย่างไรก็ตาม หากเราจัดการกับหลายองค์ประกอบ นี่คือวิธีการทำ เราจะตรวจสอบว่าใน string มี substring คำว่า “temperature” หรือไม่
if (request == "temperature") { int val = analogRead(A1); client.print(val); }
หาก request string คือ "temperature" ให้รับค่าจาก pin A1 ที่ Sensor วัดอุณหภูมิเชื่อมต่ออยู่ จากนั้นพิมพ์ค่านั้นไปยัง client ทุกอย่างที่คุณใส่ไว้ในวงเล็บของ client.print() จะถูกรายงานใน span "content" ของหน้า HTML ของเรา
ในกรณีนี้จะเป็นเพียงค่าของ pin A1 แต่หากคุณดูตัวอย่าง TemperatureWebPanel มันจะพิมพ์ทั้งเวลาและจำนวนครั้งที่มีการเข้าถึง (hits) ด้วย
แม้ว่าเราจะส่ง string ที่เป็น "/arduino/temperature" แต่ส่วนของ "/arduino" จะไม่ถูกนำมาพิจารณาใน sketch (แม้ว่าจะจำเป็นในส่วนของ JS) ดังนั้น string ของเราจึงเป็นเพียง "temperature/value"
7. ติดตั้งและใช้งาน
ขั้นตอนสุดท้ายของกระบวนการนี้คือการอัปโหลดทุกอย่างลงใน Yún
หลังจากบันทึก sketch ของคุณแล้ว (คุณสามารถดูโค้ดตัวเต็มได้หลังจากนี้) ให้สร้างโฟลเดอร์ย่อย www และคัดลอก index.html และ zepto.min.js ลงไปในนั้น ตอนนี้เลือก IP Yún จากเมนู Tools->Port และอัปโหลดผ่าน WiFi
หากต้องการดูหน้าเว็บ เพียงเปิดหน้าต่างเบราว์เซอร์และไปที่ URL นี้:
http://arduino.local/sd/mysketch (“arduino” คือชื่อบอร์ดของคุณ และ “mysketch” คือชื่อ sketch ของคุณ)
หากทุกอย่างเรียบร้อยดี ในตอนแรกคุณควรจะเห็นเลขศูนย์เพียงตัวเดียวที่มุมซ้ายบนของหน้าเว็บ แต่หลังจากผ่านไปไม่กี่วินาที มันจะเริ่มพิมพ์ค่าจาก analog port A1
คุณสามารถเข้าถึงหน้านี้ได้จากอุปกรณ์ใดก็ได้ที่เชื่อมต่อกับเครือข่ายเดียวกัน เพียงแค่คัดลอกลิงก์ไปใช้งาน
Code
🔒 ปลดล็อก Code
สนับสนุนเพื่อรับ Source Code หรือแอปพลิเคชันสำหรับโปรเจกต์นี้
