โปรเจกต์ WIoT-2 Weather Station – Nextion TFT พร้อม ESP8266/ESP32

นี่คือภาคต่อจาก WIoT weather station รุ่นแรกของผม WIoT-2 คืออะไร? ผมใช้มันเป็นศูนย์ข้อมูลเชื่อมต่อ Cloud (IoT) สำหรับติดตั้งไว้ใกล้ประตูหน้าบ้าน มันเป็นการรวบรวมข้อมูลที่ผมหรือภรรยามักจะมองหาบ่อยๆ ไม่ว่าจะเป็นตอนกำลังจะออกจากบ้านหรือตอนที่กลับมาถึงบ้าน โดยมันจะแสดงข้อมูลสภาพอากาศปัจจุบันและพยากรณ์อากาศจาก DarkSky.net/WeatherUnderground, ข้อมูลสภาพอากาศจากภายนอกบ้าน (จากตัวนี้), วันที่, เวลา, ตารางการเก็บขยะในพื้นที่, อัตราแลกเปลี่ยนเงินตรา, สถานะของประตูโรงรถ (จากตัวนี้), อุณหภูมิของอ่างน้ำร้อน (จากตัวนี้) และยังช่วยให้ลูกๆ ของผมสามารถ Check-in เมื่อกลับถึงบ้านได้อีกด้วย อ่านต่อเพื่อดูรายละเอียดว่าผมสร้างมันขึ้นมาได้อย่างไร

บทความฉบับเต็ม

Interface ปี 2018

WIoT-2 ขณะใช้งาน

เวอร์ชันปี 2017 – ติดตั้งบนผนัง

คุณสมบัติของ WIoT2:

• แสดงข้อมูลสภาพอากาศปัจจุบันและพยากรณ์อากาศ + การแจ้งเตือน แหล่งข้อมูลจาก:

• DarkSky.net API หรือ Weather Underground API เพื่อดึงข้อมูลทั้งปัจจุบันและพยากรณ์อากาศในรูปแบบ JSON

• แสดงข้อมูลสภาพอากาศที่ ส่งมาจากนอกบ้าน ผ่านหน่วย ESP อีกตัว โดยจะดึงข้อมูลอุณหภูมิ, ความชื้น และข้อมูลแบตเตอรี่ (ใช้พลังงานแสงอาทิตย์) – ทำงานร่วมกับ Blynk

• สามารถเปลี่ยนตำแหน่งที่ตั้งของสภาพอากาศไปยังที่ต่างๆ ได้

• แสดงอุณหภูมิและความชื้นจากภายในบ้าน ระวังตัวไว้ให้ดีนะ Nest! 😉

• ดึงข้อมูลและแสดงผล จากอ่างน้ำร้อนของเรา (ทำงานร่วมกับ Blynk)

• เปิด/ปิดประตูโรงรถ, ดึงข้อมูล/แสดง สถานะของประตูโรงรถ (เปิด/ปิด) (ทำงานร่วมกับ Blynk)

• ให้ลูกๆ สามารถโต้ตอบกับตัวเครื่องได้ – โดยจะส่งการแจ้งเตือนผ่าน Blynk

• ดึงข้อมูลตารางการเก็บขยะเพื่อแสดงว่าขยะประเภทใดจะถูกเก็บในแต่ละสัปดาห์

• แสดงวันที่และเวลาปัจจุบัน – โดยใช้ Blynk RTC widget

• แสดงอัตราแลกเปลี่ยนเงินตราที่เป็นปัจจุบัน CAD>USD, CAD>GBP

• ศูนย์ควบคุมหลักสำหรับปลั๊กไฟที่เชื่อมต่อเครือข่ายในบ้าน (กำลังจะมาเร็วๆ นี้ด้วยการผสานรวมกับ SONOFF)

เกี่ยวกับหน้าจอ Nextion TFT:

ผมรู้จักหน้าจอ Nextion เมื่อประมาณปีที่แล้วในช่วงแคมเปญ Indiegogo ตอนนั้นผมมองข้ามมันไปเพราะยังมีข้อมูลไม่เพียงพอ และบอกตามตรงว่าผมไม่เข้าใจวิธีการใช้งานของมัน แต่เมื่อมองย้อนกลับไป ผมรู้สึกเสียดายที่ตัดสินใจแบบนั้น Itead ทำหน้าจอนี้ออกมาได้ตอบโจทย์มากในมุมมองของผม มันเชื่อมต่อกับ MCU (Arduino / ESP8266/32 ฯลฯ) โดยใช้การเชื่อมต่อ Serial แบบ 4 สายมาตรฐาน ซึ่งง่ายมากในการเขียนโปรแกรมและควบคุม มันใช้คำสั่ง Serial ง่ายๆ ในการสื่อสารระหว่าง MCU และหน้าจอ ซึ่งเหมาะมากสำหรับความต้องการของผม (และผมคิดว่า Maker ส่วนใหญ่น่าจะชอบเหมือนกัน) มันใช้ HMI editor (ด้านล่าง) ของตัวเอง ซึ่งช่วยให้คุณจัดวางองค์ประกอบกราฟิกและปุ่มต่างๆ บน TFT ได้ คุณยังสามารถตั้งค่ามุมมองได้หลายหน้าเพื่อสร้างอินเทอร์เฟซที่ซับซ้อน อัตราการ Refresh และการโหลดรูปภาพก็ทำได้รวดเร็ว แนวคิดการใช้ HMI และการวางองค์ประกอบกราฟิกและข้อความนั้นคล้ายกับการเขียนโปรแกรมแบบ Object oriented programming มาก ทำให้เรียนรู้ได้ง่าย สำหรับใครที่ใช้ RA8875/1305 หรือตัวอื่นๆ อยู่ คุณไม่รู้หรอกว่าคุณกำลังพลาดอะไรไป หลังจากที่ผมใช้เวลาหลายชั่วโมงในการเขียน Code โปรเจกต์ก่อนหน้าโดยใช้ Controller RA8875 หน้าจอ Nextion กลายเป็นเรื่องง่ายไปเลย และทำให้การจัดวางกราฟิกและการโต้ตอบง่ายกว่าตัวอื่นๆ ที่ผมเคยใช้มา เอาละ พอแค่นี้ก่อน ผมได้เขียน บทความโดยละเอียด เกี่ยวกับเหตุผลที่ผมชอบหน้าจอนี้มากไว้แล้ว ยังมี คุณสมบัติขั้นสูง อื่นๆ อีกมากมายของ Nextion ที่ผมจะยังไม่ขอกล่าวถึงในที่นี้เพราะไม่ใช่จุดประสงค์ของโพสต์นี้

Pin-Outs และการเชื่อมต่อ:

หนึ่งในสิ่งที่ดีที่สุดเกี่ยวกับโปรเจกต์นี้คือความง่ายในการประกอบ การเชื่อมต่อหน้าจอใช้ Serial มาตรฐาน (PWR, GND, RX, TX) จากนั้นเชื่อมต่อกับ Sensor ของผม (PIR 3 สาย), Sensor อุณหภูมิ/ความชื้น (3 สาย) ง่ายสุดๆ!

ผมใช้ NodeMCU ESP8266 ดังนั้นการเชื่อมต่อของคุณอาจแตกต่างออกไป โปรเจกต์นี้ใช้ประโยชน์จาก Serial ports ทั้งสองพอร์ต Serial ใช้สำหรับการสื่อสารระหว่าง PC และ NodeMCU ส่วน Serial1 ใช้สำหรับการสื่อสารระหว่าง MCU และ Nextion แต่ก็ไม่เชิงเสียทีเดียว สาย RX ของ NodeMCU นั้นถูกแชร์กันทั้งสองฝั่ง เดี๋ยวจะอธิบายเพิ่มภายหลัง การเชื่อมต่อคือ Node RX ต่อกับ Nextion TX และ Node D4 ต่อกับ Nextion RX ตัว Sketch ใช้ Hardware serial โดยใช้ Serial1 (TXD1) เพื่อส่งข้อมูลไปยัง Nextion ในขณะที่ข้อมูลขากลับจะมาทาง Serial RX ฟังดูเหมือนซับซ้อนแต่มันไม่ได้ยากขนาดนั้น... ใน Sketch มีการสร้างทั้ง Serial และ Serial1 ไว้แล้ว เคล็ดลับเดียวคือคุณไม่สามารถจ่ายไฟให้ Nextion ขณะที่กำลังอัปโหลด Sketch ไปยัง Node ได้ ผมแก้ปัญหานี้โดยการใส่ Latching switch ไว้ที่สายจ่ายไฟ 5V ของ Nextion

ข้อสำคัญ: อย่าตกหลุมพรางนี้! หากคุณจ่ายไฟให้ MCU และ Nextion จากแหล่งจ่ายไฟคนละตัวกัน จุดเชื่อมต่อ GND ของทั้งคู่ต้องเป็นจุดร่วม (Common GND) เดียวกัน! นอกจากนี้ ต้องแน่ใจว่าแหล่งจ่ายไฟของคุณมีกระแสเพียงพอสำหรับจ่ายให้ Nextion, MCU และ Sensor ต่างๆ แหล่งจ่ายไฟที่ผมเลือกใช้ประจำคือ 5V 3A ซึ่งใช้งานได้ดีเสมอมา และอย่าประเมินความต้องการกระแสของ MCU ต่ำเกินไปเมื่อใช้งาน WiFi ตัว NodeMCU จะใช้กระแสพุ่งไปถึงประมาณ 500mA เมื่อรับส่งข้อมูล นี่คือการเชื่อมต่อระหว่าง MCU และ Nextion: NodeMCU RX >> Nextion TX ส่วน NodeMCU D4 (TX1) ต่อกับ Nextion RX

Hardware:

• NodeMCU ESP8266 V1.0 – MCU (น่าจะทำงานร่วมกับ MCU ที่รองรับ Wifi ตัวอื่นๆ ได้โดยมีการแก้ไข Code เล็กน้อย) ความจุหน่วยความจำคือหัวใจสำคัญ – นั่นคือเหตุผลที่ผมเลือก ESP

• Nextion TFT LCD 5” (ขนาดอื่นๆ: 2.4“, 3.2“, 4.3“, 5.0“, 7.0” ) คลิกที่นี่ เพื่อดูว่าทำไมผมถึงชอบหน้าจอเหล่านี้มาก

• ตัวจิ๋ว PIR sensor

• กรอบสำหรับ 3D Printer ขนาด 5 นิ้ว – ไฟล์ STL

• คุณจะต้องสร้างเคสสำหรับใส่ MCU และส่วนประกอบของแหล่งจ่ายไฟ ในกรณีของผม มันถูกติดตั้งไว้อีกด้านหนึ่งของผนัง

• Switching power supply – สำหรับจ่ายไฟ 5V ให้ NodeMCU และ Nextion

• สามารถใช้งานร่วมกับ ESP32 ได้โดยมีการแก้ไข Code เล็กน้อย

Libraries และแหล่งข้อมูล:

Nextion Library – โปรดทราบว่ามี Library อย่างเป็นทางการของ Nextion ด้วย แต่ตัวนี้เพียงพอสำหรับความต้องการของผมแล้ว เนื่องจากมันช่วยให้ผมส่งและรับข้อมูลจาก Nextion ได้ อย่าลืมอ่านหมายเหตุและลิงก์ (link, link) ที่ให้ไว้เพราะมีตัวอย่างที่ดีมาก หมายเหตุ: คุณสามารถใช้ Software หรือ Hardware serial ก็ได้ ผมใช้ Hardware serial ใน Code ของผม หากต้องการทำเช่นนี้ คุณต้องคอมเมนต์บรรทัดหนึ่งใน Nextion.h //#define USE_SOFTWARE_SERIAL //Comment this line for use HardwareSerial

• Blynk Library – ผมใช้แอปเพื่อควบคุมและตรวจสอบ อ่างน้ำร้อน, โรงรถ และอุปกรณ์อื่นๆ

• Time – คุณจะต้องมี time library ของ Paul Stoffregen สำหรับ Blynk ด้วย:

• Arduino IDE – ผมใช้เวอร์ชัน 1.6.13 แต่เวอร์ชันอื่นๆ ก็น่าจะใช้งานได้ดีเช่นกัน

• NodeMCU firmware – มาพร้อมกับแพ็กเกจ ESP Google ช่วยคุณได้หากต้องการความช่วยเหลือ เพียงลองค้นหาการตั้งค่า NodeMCU ใน Arduino

• Arduino JSON สำหรับการ Parse ข้อมูล JSON

• Nextion forums – (ขอบคุณ Patrick และ Steve มากๆ ที่ช่วยให้ผมเริ่มต้นใช้งานได้สำเร็จ)

• Arduino Source Code และไฟล์ Nextion HMI – ดูที่ด้านล่างของหน้า

รูปภาพจากคลัง

หน้าจอหลักที่ประตูหน้าบ้าน

หน่วยควบคุม NodeMCU ที่ติดตั้งไว้อีกด้านหนึ่งของผนัง

NodeMCU + อุปกรณ์ต่างๆ + เคสที่ติดตั้งไว้ที่ผนังด้านหลัง

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

การผสานรวมกับ Blynk:

โปรเจกต์นี้ใช้ Blynk อย่างเต็มที่เพื่อช่วยให้ผมดูสถานะและควบคุมอุปกรณ์ต่างๆ ทั่วบ้านจากโทรศัพท์และแท็บเล็ต ผมยังใช้มันเพื่อ Debug อุปกรณ์ต่างๆ เพื่อให้แน่ใจว่าพวกมันยังคงส่งข้อมูลตามช่วงเวลาที่กำหนดไว้ คุณไม่จำเป็นต้องใช้ Blynk ก็ได้ ในกรณีของผม มันเพียงแค่ขยายฟังก์ชันการทำงานของ WIoT และทำหน้าที่เป็นตัวควบคุมสำรอง ตัวอย่างเช่น ผมใช้ Blynk เพื่อเปิด/ปิดประตูโรงรถเมื่อผมใช้โทรศัพท์ แต่ผมก็สามารถทำได้ผ่าน WIoT2 เช่นกัน

ข้อมูลภายนอกบ้านจะถูกบันทึกไว้ใน Blynk เช่น อุณหภูมิ, ความชื้น และระดับแบตเตอรี่ ข้อมูลเหล่านี้จะถูกรายงานไปยัง WIoT ด้วย ตัวควบคุมอ่างน้ำร้อนจะตรวจสอบอุณหภูมิและอนุญาตให้ตั้งค่า RGBW NeoPixels ได้ ข้อมูลนี้ก็จะถูกรายงานไปยัง WIoT เช่นกัน ตัวตรวจสอบประตูโรงรถช่วยให้สามารถตรวจสอบและควบคุมประตูโรงรถทั้งสองบานได้ และมีการรายงานข้อมูลไปยัง WIoT ด้วย

หน่วยบันทึกข้อมูลภายนอกบ้าน

ตัวควบคุมอุณหภูมิอ่างน้ำร้อนและ LED

ตัวควบคุม / ตรวจสอบประตูโรงรถ

ความท้าทาย:

ผมเจอปัญหาแรกกับ NodeMCU เมื่อพยายามที่จะแสดงข้อความ Debug โดยใช้หน้าต่าง Serial มาตรฐานของ Arduino ไปพร้อมกับการสื่อสารกับ Nextion หลังจากค้นหาข้อมูลและได้รับ ความช่วยเหลือ จาก Steve และ Patrick ใน Nextion forums ผมก็สามารถทำให้ทั้ง Serial debugging และการสื่อสารกับ Nextion ทำงานร่วมกันได้ มันใช้เคล็ดลับง่ายๆ คือ Nextion จะใช้พิน D4 (Serial 1 TX) ของ NodeMCU ในการส่งข้อมูล และใช้ Serial RX ในการรับข้อมูล สำหรับผู้ที่สังเกตเก่งๆ จะเห็นว่านี่เป็นปัญหาเมื่ออัปโหลด Sketch ซึ่งแก้ไขได้ง่ายโดยการถอดสายพินออก หรือปิดการจ่ายไฟให้หน้าจอ Nextion ระหว่างการอัปโหลด Sketch

เคล็ดลับและเทคนิค:

การเปลี่ยน ID ใน HMI Editor: หากคุณยังไม่เคยเจอ คุณจะได้เจอแน่ๆ! สำหรับ Nextion HMI Editor เมื่อคุณใส่รูปภาพลงไป ลำดับของรูปภาพจะมีความสำคัญมาก เพราะรูปภาพทั้งหมดจะถูกระบุด้วย ID และ ID นั้นจะเลื่อนหากคุณพยายามสลับลำดับรูปภาพ หวังว่าคุณจะไม่ต้องทำแบบนั้น แต่มันอาจจำเป็น จากตัวอย่าง Code ด้านล่าง ผมพบว่าวิธีการที่ใช้อยู่จะพังทุกครั้งที่ผมเพิ่มหรือสลับวัตถุรูปภาพใน Editor แทนที่จะใช้ ID ของวัตถุ ผมจึงให้ HMI ส่งคำสั่ง print เมื่อมีการคลิกปุ่มใดๆ เพื่อส่งค่ากลับไปยัง MCU ด้วยวิธีนี้ ผมสามารถตรวจสอบค่าที่สมจริงยิ่งขึ้นใน call-backs เช่น ผมสามารถส่ง "print b1" เมื่อมีการกดปุ่ม 1 คุณจะใช้ข้อความอะไรก็ได้ตามต้องการ และคุณสามารถแยกการเรียกใช้งานได้เมื่อมีการกดหรือปล่อยปุ่ม

การเพิ่มรูปภาพใหม่ / การจัดลำดับเลเยอร์ของรูปภาพ: เนื่องจากผมมีการปรับปรุงโปรเจกต์นี้อย่างสม่ำเสมอตั้งแต่เริ่มต้น ผมจึงได้เพิ่มรูปภาพใหม่ๆ เข้าไป ปัญหาก็คือ Editor ไม่มีระบบที่เสถียรสำหรับการเลื่อนเลเยอร์รูปภาพขึ้น/ลงเพื่อให้อยู่ข้างหน้าหรือข้างหลังรูปอื่น แต่มีเคล็ดลับอยู่ อย่างแรกคือคุณสามารถแทนที่รูปภาพเดิมด้วยรูปใหม่ได้ ดังนั้นหากคุณต้องการอัปเดตรูปเดิม ให้ใช้ฟีเจอร์ Replace เพราะมันจะรักษา ID เดิมไว้และไม่ทำให้ตัวอื่นพัง นี่เป็นสิ่งสำคัญหาก Code ของคุณอ้างอิงรูปภาพตาม ID # เหมือน Code ชุดนี้ (สำหรับ Icon สภาพอากาศ) ทีนี้ถ้าคุณต้องการเพิ่มรูปภาพใหม่ มันจะปรากฏขึ้นมาทับรูปอื่นทั้งหมด จะมีลูกศรขึ้นและลงที่มุมซ้ายบนของ Editor ที่ช่วยให้คุณย้ายวัตถุไปยังด้านหน้าสุดหรือหลังสุดได้ ใช่ครับ... คุณไม่สามารถเลื่อนทีละเลเยอร์ได้ แต่หวังว่าพวกเขาจะแก้ไขในอนาคต แทนที่จะเป็นเช่นนั้น คุณสามารถใช้วิธีการย้ายรูปภาพใหม่ไปยังด้านล่างสุด แล้วค่อยย้ายรูปอื่นๆ ขึ้นมาทับมันแทน (หากนั่นคือสิ่งที่คุณต้องการ) WIoT2 มีความซับซ้อนเพราะผมใช้รูปพื้นหลังที่ครอบคลุมทั้งหน้าจอ ดังนั้นผมจึงต้องย้ายรูปที่เพิ่มใหม่ไปยังด้านล่างสุด จากนั้นเลือกรูปพื้นหลังแล้วทำแบบเดียวกัน จากนั้นรูปใดก็ตามที่ผมต้องการให้อยู่เหนือรูปภาพใหม่ ผมก็แค่เลือกทั้งหมดแล้วคลิกปุ่มลูกศรขึ้น ถ้าทำเป็นวิดีโอมันคงจะเข้าใจง่ายกว่านี้ใช่ไหมครับ? 🙂

Nextion Baud Rate: คุณสามารถดู Baud rate เริ่มต้นได้โดยอ้างอิงจากคำสั่ง 'baud' ใน Nextion Instruction Set ข่าวดีก็คือคุณสามารถเปลี่ยนมันได้โดยใช้คำสั่ง bauds ตามด้วย Baud rate ที่คุณต้องการ อย่าลืมอัปเดต Baud rate ใน Sketch สำหรับ Serial1 ด้วย (เช่น Serial1.begin(9600);) ค่าเริ่มต้นจากโรงงานคือ 9600 ผมเปลี่ยนของผมเป็น 115200

การใช้ Nextion Editor และ ESP ใน Debug Mode: ผมเพิ่งมารู้เรื่องนี้เอาตอนหลัง แต่ Nextion Editor มีฟีเจอร์ในมุมมอง Debug ที่ช่วยให้คุณสามารถจำลองในสภาพแวดล้อมจริงที่เชื่อมต่อกับ MCU โดยตรงได้ การทำเช่นนี้ค่อนข้างตรงไปตรงมา ในสถานการณ์ของผม WIoT2 ถูกติดตั้งอยู่บนผนัง ดังนั้นการอัปเดตจึงเป็นเรื่องยาก เพื่อแก้ปัญหานี้ ผมจึงมี NodeMCU หน่วยที่สอง ผมแก้ไข Code Arduino และอัปโหลดไปยัง MCU ตัว Serial pointer ต้องเปลี่ยนไปใช้การเชื่อมต่อ USB serial (ในตัวอย่าง Code ด้านล่าง) หลังจากอัปเดต NodeMCU แล้ว ให้เชื่อมต่อเข้ากับ USB ของคอมพิวเตอร์ ใน Nextion Editor ให้เปิดไฟล์ HMI ในมุมมอง Debug เลือก COM port ที่ MCU เชื่อมต่ออยู่และเลือก Baud rate ที่ถูกต้อง แล้วคุณก็เริ่มใช้งานได้เลย MCU จะส่งข้อมูลจริงให้ HMI ราวกับว่ามันเชื่อมต่อกับหน้าจอโดยตรง คุณสามารถดูการอัปเดตของหน้าจอจำลองได้ เมื่อทุกอย่างเรียบร้อย คุณสามารถ Build ไฟล์ HMI และอัปโหลดไปยังหน้าจอจริงได้ ข้อเสียเพียงอย่างเดียวคือถ้าคุณใช้ Sensor และไม่มี Sensor สำรองเพื่อต่อกับ MCU อีกตัว แต่มันไม่ได้สร้างปัญหาให้ผมนะ แค่ต้องคำนึงไว้บ้าง

ต้องการสร้างมันด้วยตัวเองหรือไม่ - Source Code Arduino Sketch / Nextion HMI:

http://www.plastibots.com/index.php/2017/01/03/wiot-2-weather-station-nextion-tft-with-esp8266/