โหลดเว็บเพจ Config Arduino/ESP ของคุณจากคลาวด์: 7 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:07

เมื่อสร้างโครงการ Arduino / ESP (ESP8266/ESP32) คุณสามารถฮาร์ดโค้ดทุกอย่างได้ แต่บ่อยครั้งที่บางสิ่งไม่ปรากฏขึ้น และคุณจะต้องเชื่อมต่ออุปกรณ์ IoT เข้ากับ IDE ของคุณอีกครั้ง หรือคุณเพิ่งมีคนเข้าถึงการกำหนดค่ามากขึ้น และคุณต้องการให้ UI แทนที่จะคาดหวังให้พวกเขาเข้าใจการทำงานภายใน

คำแนะนำนี้จะบอกวิธีวาง UI ส่วนใหญ่ในระบบคลาวด์แทน Arduino / ESP การทำเช่นนี้จะช่วยให้คุณประหยัดเนื้อที่และการใช้หน่วยความจำ บริการที่ให้หน้าเว็บแบบคงที่ฟรีนั้นเหมาะสมอย่างยิ่งกับ "คลาวด์" เช่น GitHub Pages แต่ตัวเลือกอื่นๆ ก็อาจจะใช้ได้เช่นกัน

การสร้างหน้าเว็บด้วยวิธีนี้ทำให้เบราว์เซอร์ของผู้ใช้ต้องผ่าน 4 ขั้นตอน:

1. ขอ URL รูทจาก Arduino / ESP
2. รับหน้าเว็บง่ายๆ บอกกับ:
3. ขอไฟล์ JavaScript จาก cloud
4. รับโค้ดที่สร้างเพจจริง

คำแนะนำนี้จะอธิบายวิธีการโต้ตอบกับ Arduino / ESP เมื่อหน้าพร้อมตามขั้นตอนข้างต้น

รหัสที่สร้างขึ้นในคำแนะนำนี้สามารถพบได้ใน GitHub เช่นกัน

ข้อกำหนดเบื้องต้น

คำแนะนำนี้ถือว่าคุณเข้าถึงเนื้อหาบางอย่างและความรู้ก่อนหน้านี้:

• Arduino (พร้อมการเข้าถึงเครือข่าย) / ESP
• คอมพิวเตอร์สำหรับติดด้านบนกับ
• การเข้าถึง WiFi เชื่อมต่อกับอินเทอร์เน็ต
• ติดตั้ง Arduino IDE แล้ว (สำหรับ ESP32 ด้วย)
• คุณรู้วิธีอัปโหลดภาพร่างไปยังอุปกรณ์ IoT ของคุณ
• คุณรู้วิธีใช้ Git & GitHub

ขั้นตอนที่ 1: เริ่มต้นด้วย Webserver Sketch อย่างง่าย

เราจะเริ่มต้นให้เรียบง่ายที่สุด และปล่อยให้มันเติบโตจากนี้ไป

#รวม

const char* ssid = "yourssid"; const char* password = "yourpasswd"; เซิร์ฟเวอร์ WiFiServer(80); การตั้งค่าเป็นโมฆะ () {// เริ่มต้นซีเรียลและรอให้พอร์ตเปิด: Serial.begin (115200); ในขณะที่(!อนุกรม) {; // รอให้พอร์ตอนุกรมเชื่อมต่อ จำเป็นสำหรับพอร์ต USB ดั้งเดิมเท่านั้น } WiFi.begin (ssid, รหัสผ่าน); ในขณะที่ (WiFi.status () != WL_CONNECTED) { ล่าช้า (500); Serial.print("."); } Serial.println ("เชื่อมต่อ WiFi แล้ว"); Serial.println("ที่อยู่ IP:"); Serial.println(WiFi.localIP()); เซิร์ฟเวอร์.begin(); } วงเป็นโมฆะ () { // ฟังไคลเอ็นต์ WiFiClient ขาเข้า = server.available (); // ฟังไคลเอ็นต์ขาเข้า bool sendResponse = false; // ตั้งค่าเป็นจริงถ้าเราต้องการส่งการตอบกลับ String urlLine = ""; // สร้างสตริงเพื่อเก็บ URL ที่ร้องขอ if(client) // หากคุณได้รับไคลเอนต์ { Serial.println("New Client."); // พิมพ์ข้อความออกพอร์ตอนุกรม String currentLine = ""; // สร้างสตริงเพื่อเก็บข้อมูลขาเข้าจากลูกค้าในขณะที่ (client.connected ()) // วนซ้ำในขณะที่ไคลเอ็นต์เชื่อมต่ออยู่ { if(client.available ()) // หากมีไบต์ให้อ่านจากลูกค้า { ถ่าน c = client.read(); // อ่านไบต์ แล้ว if(c == '\n') // ถ้าไบต์เป็นอักขระขึ้นบรรทัดใหม่ { // ถ้าบรรทัดปัจจุบันว่างเปล่า คุณได้อักขระขึ้นบรรทัดใหม่สองตัวในแถว // นั่นคือจุดสิ้นสุดของคำขอ HTTP ของไคลเอ็นต์ ดังนั้นให้ส่งการตอบกลับ: if(currentLine.length() == 0) { sendResponse = true; // ทุกอย่างเรียบร้อยดี! หยุดพัก; // แยกตัวออกจากลูป while } else // หากคุณขึ้นบรรทัดใหม่ ให้ล้าง currentLine: { if(currentLine.indexOf("GET /") >= 0) // นี่ควรเป็นบรรทัด URL { urlLine = currentLine; // บันทึกไว้เพื่อใช้ในภายหลัง } currentLine = ""; // reset the currentLine String } } else if(c != '\r') // หากคุณมีอย่างอื่นนอกจากอักขระขึ้นบรรทัดใหม่ { currentLine += c; // เพิ่มไปที่ส่วนท้ายของ currentLine } } } if(sendResponse) { Serial.print("Clientร้องขอ"); Serial.println (urlLine); // ส่วนหัว HTTP จะเริ่มต้นด้วยรหัสตอบกลับเสมอ (เช่น HTTP/1.1 200 OK) // และประเภทเนื้อหาเพื่อให้ไคลเอ็นต์รู้ว่ากำลังจะเกิดอะไรขึ้น จากนั้นจึงขึ้นบรรทัดว่าง: client.println("HTTP/1.1 200 OK"); client.println("ประเภทเนื้อหา:ข้อความ/html"); client.println(); if(urlLine.indexOf("GET / ") >= 0) // ถ้า URL เป็นเพียง "/" { // เนื้อหาของการตอบสนอง HTTP จะเป็นไปตามส่วนหัว: client.println("Hello world!"); } // การตอบสนอง HTTP ลงท้ายด้วยบรรทัดว่างอื่น: client.println(); } // ปิดการเชื่อมต่อ: client.stop(); Serial.println("ไคลเอ็นต์ถูกตัดการเชื่อมต่อ"); } }

คัดลอกโค้ดด้านบน หรือดาวน์โหลดจากคอมมิตบน GitHub

อย่าลืมเปลี่ยน SSID และรหัสผ่านให้ตรงกับเครือข่ายของคุณ

ร่างนี้ใช้ Arduino. ที่รู้จักกันดี

ติดตั้ง()

และ

วน ()

ฟังก์ชั่น. ใน

ติดตั้ง()

ฟังก์ชันการเชื่อมต่อแบบอนุกรมกับ IDE ได้รับการเตรียมใช้งานและ WiFi ก็เช่นกัน เมื่อเชื่อมต่อ WiFi กับ SSID ดังกล่าวแล้ว IP จะถูกพิมพ์และเว็บเซิร์ฟเวอร์เริ่มทำงาน ในการทำซ้ำแต่ละครั้งของ

วน ()

ฟังก์ชั่นเว็บเซิร์ฟเวอร์ได้รับการตรวจสอบสำหรับไคลเอนต์ที่เชื่อมต่อ หากไคลเอนต์เชื่อมต่ออยู่ คำขอจะถูกอ่านและ URL ที่ร้องขอจะถูกบันทึกไว้ในตัวแปร หากทุกอย่างเรียบร้อยดี การตอบกลับจากเซิร์ฟเวอร์ไปยังไคลเอนต์จะดำเนินการตาม URL ที่ร้องขอ

คำเตือน! รหัสนี้ใช้คลาส Arduino String เพื่อให้ง่าย การเพิ่มประสิทธิภาพสตริงไม่อยู่ในขอบเขตของคำแนะนำนี้ อ่านเพิ่มเติมเกี่ยวกับสิ่งนี้ในคำแนะนำเกี่ยวกับ Arduino String Manipulation โดยใช้ Minimal Ram

ขั้นตอนที่ 2: การสร้าง JavaScript ระยะไกล

Arduino / ESP จะบอกเบราว์เซอร์ผู้เยี่ยมชมให้โหลดไฟล์นี้ ส่วนที่เหลือทั้งหมดจะทำโดยโค้ด JavaScript นี้

ในคำแนะนำนี้ เราจะใช้ jQuery ซึ่งไม่จำเป็นอย่างยิ่ง แต่จะทำให้สิ่งต่างๆ ง่ายขึ้น

ไฟล์นี้ต้องสามารถเข้าถึงได้จากเว็บ เซิร์ฟเวอร์เพจแบบสแตติกก็เพียงพอที่จะทำให้ใช้งานได้ เช่น เพจ GitHub ดังนั้นคุณอาจต้องการสร้างที่เก็บ GitHub ใหม่และสร้าง a

gh-pages

สาขา. ใส่รหัสต่อไปนี้ใน

.js

ไฟล์ในที่เก็บในสาขาที่ถูกต้อง

คัดลอกโค้ดด้านบน หรือดาวน์โหลดจากคอมมิตบน GitHub

ตรวจสอบว่าไฟล์ของคุณสามารถเข้าถึงได้หรือไม่ กรณีหน้า GitHub ให้ไปที่ https://username.github.io/repository/your-file.j… (แทนที่

ชื่อผู้ใช้

,

ที่เก็บ

และ

your-file.js

สำหรับพารามิเตอร์ที่ถูกต้อง)

ขั้นตอนที่ 3: การโหลดไฟล์ JavaScript ระยะไกลลงในเบราว์เซอร์ของผู้เยี่ยมชม

เมื่อเราได้ทุกอย่างเรียบร้อยแล้ว ก็ถึงเวลาให้หน้าเว็บโหลดไฟล์ JavaScript ระยะไกล

คุณสามารถทำได้โดยเปลี่ยนบรรทัดที่ 88 ของภาพร่างจาก

client.println("สวัสดีชาวโลก!"); NS

client.println("");

(เปลี่ยน

src

ให้ชี้ไปที่ไฟล์ JavaScript ของคุณเอง) นี่คือหน้าเว็บ html ขนาดเล็ก ทั้งหมดที่ทำได้คือโหลดไฟล์ JavaScript ลงในเบราว์เซอร์ของผู้เข้าชม

ไฟล์ที่แก้ไขยังสามารถพบได้ในคอมมิตที่เกี่ยวข้องบน GitHub

อัปโหลดภาพร่างที่ปรับแล้วไปยัง Arduino / ESP ของคุณ

ขั้นตอนที่ 4: การเพิ่มองค์ประกอบใหม่ให้กับเพจ

หน้าว่างไม่มีประโยชน์ ดังนั้นถึงเวลาเพิ่มองค์ประกอบใหม่ลงในหน้าเว็บแล้ว สำหรับตอนนี้ นี่จะเป็นวิดีโอ YouTube ในตัวอย่างนี้ โค้ด jQuery บางส่วนจะถูกใช้เพื่อทำสิ่งนี้ให้สำเร็จ

เพิ่มบรรทัดของรหัสต่อไปนี้ใน

ในนั้น()

การทำงาน:

$('').prop({ src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0' }).css({ width: '608px', height: '342px' }).appendTo('body');

สิ่งนี้จะสร้าง

iframe

องค์ประกอบตั้งค่าที่ถูกต้อง

src

แอตทริบิวต์และกำหนดขนาดโดยใช้ css และเพิ่มองค์ประกอบในเนื้อหาของหน้า

jQuery ช่วยให้เราเลือกและแก้ไของค์ประกอบในหน้าเว็บได้อย่างง่ายดาย สิ่งพื้นฐานที่ควรทราบ:

• $('เนื้อความ')

• เลือกองค์ประกอบที่มีอยู่แล้ว สามารถใช้ตัวเลือก css อื่นได้เช่นกัน

• $(' ')

  สร้างใหม่

• องค์ประกอบ (แต่ไม่ได้เพิ่มลงในเอกสาร)

• .appendTo('.main')

• ผนวกองค์ประกอบที่เลือก/สร้างเข้ากับองค์ประกอบที่มีคลาส css 'หลัก'

• ฟังก์ชันอื่นๆ ในการเพิ่มองค์ประกอบคือ

  .ผนวก()

  ,

  .prepend()

  ,

  .prependTo()

  ,

  .แทรก()

  ,

  .insert After()

  ,

  .insertBefore()

  ,

  .หลังจาก()

  ,

  .ก่อน()

ดูคอมมิชชันที่เกี่ยวข้องบน GitHub หากมีสิ่งใดไม่ชัดเจน

ขั้นตอนที่ 5: องค์ประกอบเชิงโต้ตอบ

วิดีโอเป็นเรื่องสนุก แต่จุดประสงค์ของคำแนะนำนี้คือเพื่อโต้ตอบกับ Arduino / ESP มาแทนที่วิดีโอสำหรับปุ่มที่ส่งข้อมูลไปยัง Arduino / ESP และรอการตอบกลับเช่นกัน

เราจะต้อง

$('')

เพื่อเพิ่มไปยังเพจ และแนบผู้ฟังเหตุการณ์เข้าไป eventlistener จะเรียกใช้ฟังก์ชันเรียกกลับเมื่อเหตุการณ์ที่ระบุเกิดขึ้น:

$('').text('a button').on('click', function()

{ // รหัสที่นี่จะถูกดำเนินการเมื่อคลิกปุ่ม }).appendTo('body');

และเพิ่มคำขอ AJAX ไปยังฟังก์ชันเรียกกลับ:

$.get('/ajax', ฟังก์ชัน (ข้อมูล)

{ // รหัสที่นี่จะถูกดำเนินการเมื่อคำขอ AJAX เสร็จสิ้น });

เมื่อคำขอเสร็จสิ้น ข้อมูลที่ส่งคืนจะถูกเพิ่มลงในเพจ:

$('

').text(data).appendTo('body');.ข้อความ(data).appendTo('body');

โดยสรุป โค้ดด้านบนสร้างปุ่ม เพิ่มลงในหน้าเว็บ เมื่อคลิกปุ่ม คำขอจะถูกส่งออกไปและการตอบสนองจะเพิ่มไปยังหน้าเว็บด้วย

หากนี่เป็นครั้งแรกที่คุณใช้การเรียกกลับ คุณอาจต้องการตรวจสอบการคอมมิตบน GitHub เพื่อดูว่าทุกอย่างซ้อนกันอย่างไร

ขั้นตอนที่ 6: ตอบสนองต่อองค์ประกอบเชิงโต้ตอบ

แน่นอน คำขอ AJAX ต้องมีการตอบสนอง

เพื่อสร้างการตอบสนองที่ถูกต้องสำหรับ

/ajax

url ที่เราจะต้องเพิ่ม an

อื่น ๆ ถ้า ()

หลังวงเล็บปิดของคำสั่ง if ที่ตรวจสอบเครื่องหมาย

/

URL

อื่น if(urlLine.indexOf("GET /ajax ") >= 0)

{ client.print("สวัสดี!"); }

ในการคอมมิตบน GitHub ฉันได้เพิ่มตัวนับเพื่อแสดงเบราว์เซอร์ที่ทุกคำขอไม่ซ้ำกัน

ขั้นตอนที่ 7: บทสรุป

นี่คือจุดสิ้นสุดของคำสั่งสอนนี้ ตอนนี้คุณมี Arduino / ESP ที่ให้บริการหน้าเว็บขนาดเล็กที่บอกให้เบราว์เซอร์ของผู้เยี่ยมชมโหลดไฟล์ JavaScript จากคลาวด์ เมื่อโหลด JavaScript แล้ว มันจะสร้างเนื้อหาที่เหลือของหน้าเว็บโดยให้ UI สำหรับผู้ใช้ในการสื่อสารกับ Arduino / ESP

ตอนนี้ขึ้นอยู่กับจินตนาการของคุณแล้วที่จะสร้างองค์ประกอบเพิ่มเติมบนหน้าเว็บและบันทึกการตั้งค่าใน ROM บางประเภท (EEPROM / NVS / ฯลฯ)

ขอบคุณสำหรับการอ่านและโปรดแสดงความคิดเห็น!