NODEMCU และ VISUINO แสดงข่าวสดจากอินเทอร์เน็ต: 8 ขั้นตอน

2025 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2025-01-23 15:12

ในบทช่วยสอนนี้ เราจะใช้ NodeMCU Mini, OLED Lcd และ Visuino เพื่อแสดงข่าวสดทุกๆ สองสามวินาทีจากอินเทอร์เน็ตบน LCD ดูวิดีโอสาธิต

ขั้นตอนที่ 1: สิ่งที่คุณต้องการ

• NodeMCU มินิ
• OLED LCD
• เขียงหั่นขนม
• สายจัมเปอร์
• โปรแกรม Visuino: ดาวน์โหลด Visuino

ขั้นตอนที่ 2: วงจร

• เชื่อมต่อ GND จาก NodeMCU กับพินเขียงหั่นขนม (gnd)
• เชื่อมต่อพิน 5V จาก NodeMCU กับพินเขียงหั่นขนม (บวก)
• เชื่อมต่อพิน 0 (SCL) จาก NodeMCU ไปยังพิน OLED LCD (SCL)
• เชื่อมต่อพิน 1 (SDA) จาก NodeMCU กับพิน OLED LCD (SDA)
• เชื่อมต่อขา OLED LCD (VCC) กับขาเขียงหั่นขนม (บวก)
• เชื่อมต่อขา OLED LCD (GND) กับขาเขียงหั่นขนม (GND)

ขั้นตอนที่ 3: เริ่ม Visuino และเลือก NodeMCU ESP-12

ในการเริ่มต้นเขียนโปรแกรม Arduino คุณจะต้องติดตั้ง Arduino IDE จากที่นี่:

โปรดทราบว่ามีข้อบกพร่องที่สำคัญบางอย่างใน Arduino IDE 1.6.6 ตรวจสอบให้แน่ใจว่าคุณติดตั้ง 1.6.7 หรือสูงกว่า มิฉะนั้น Instructable นี้จะไม่ทำงาน! หากคุณยังไม่ได้ทำตามขั้นตอนในคำแนะนำนี้เพื่อตั้งค่า Arduino IDE เป็นโปรแกรม ESP 8266!

ต้องติดตั้ง Visuino ด้วย เริ่ม Visuino ตามที่แสดงในภาพแรก คลิกที่ปุ่ม "เครื่องมือ" บนส่วนประกอบ Arduino (ภาพที่ 1) ใน Visuino

เมื่อไดอะล็อกปรากฏขึ้น ให้เลือก "NodeMCU ESP-12" ดังแสดงในภาพที่2

ขั้นตอนที่ 4: ตั้งค่า WiFi

เลือก NodeMCU ESP-12 และในตัวแก้ไข Modules>WiFi>Access Points คลิกที่ปุ่ม […] เพื่อเปิดหน้าต่าง "Access points"

ในตัวแก้ไขนี้ ให้ลากจุดเชื่อมต่อ WiFi ไปทางด้านซ้าย

• ใต้ "SSID" ให้ใส่ชื่อเครือข่าย WiFi ของคุณ
• ใต้ "รหัสผ่าน" ใส่รหัสผ่านการเข้าถึงสำหรับเครือข่าย WiFi ของคุณ

ปิดหน้าต่าง "จุดเข้าใช้งาน"

ทางด้านซ้ายในตัวแก้ไข ให้เลือก Modules>Wifi>Sockets คลิกที่ปุ่ม […] เพื่อเปิดหน้าต่าง "Sockets"

ลาก TCP Client จากขวาไปด้านซ้าย

ภายใต้พอร์ตการตั้งค่าหน้าต่างคุณสมบัติ: 80

ขั้นตอนที่ 5: ใน Visuino เพิ่มส่วนประกอบ

เพิ่มองค์ประกอบ CharToText1

ตั้งค่าความยาวสูงสุด 1000

เพิ่มจอแสดงผล OLED I2C

ดับเบิลคลิกและในหน้าต่างให้ลาก Text Field ไปทางซ้าย

เพิ่มข้อความที่จัดรูปแบบ

ใส่สิ่งนี้ภายใต้ค่า "ข้อความ": GET https://feeds.reuters.com/Reuters/worldNews

ยอมรับ: text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, image/apng, */*;q=0.8

ยอมรับ-Charset: *.*

ยอมรับภาษา: en-US, en;q=0.7, sl;q=0.3

โฮสต์: feeds.reuters.com

DNT: 1

เพิ่มข้อความแทนที่ (ReplaceText1)

1. ตั้งค่า "จากค่า":
2. ตั้งค่า "ToValue" เป็นค่าว่าง

เพิ่มข้อความแทนที่ (ReplaceText2)

1. (ดูรูป) ตั้งค่า "จากค่า":TAB TAB
2. ตั้งค่า "ToValue" เป็นค่าว่าง

• เพิ่มความยาวของข้อความ (TextLength2)
• เพิ่มประกอบด้วยข้อความ (ประกอบด้วยข้อความ1)

1. ตั้งค่า "ข้อความ": TAB TAB

(ดูภาพ)

• เพิ่มข้อความจำ

• เพิ่มตรรกะ AND

• เพิ่มมูลค่าเพิ่ม

1. กำหนดมูลค่า:1

• เพิ่มค่าเปรียบเทียบ (CompareValue1)

1. ตั้งค่า "comparetype": ctSmallerOrEqual
2. ตั้งค่า "ค่า":2

• เพิ่ม CompareValue (CompareValue3)

1. set "comparetype": ctBigger
2. ตั้งค่า "ค่า":3

ขั้นตอนที่ 6: ใน Visuino: การเชื่อมต่อส่วนประกอบ

• เชื่อมต่อ NodeMCU ESP-12 > โมดูล WiFi Sockets TCP Client1> ปักหมุด [Out] กับ CharToText1 pin [In]
• เชื่อมต่อ CharToText1 pin [ออก] กับ ReplaceText1 pin [ใน]
• เชื่อมต่อขา ReplaceText1 [ออก] กับขา TextLength2 [ใน] และขาประกอบด้วยข้อความ1 [ใน] และหมุด RememberText1 [ใน]
• เชื่อมต่อ TextLength2 pin [ออก] กับ CompareValue3 pin [ใน]
• เชื่อมต่อ CompareValue3 pin [ออก] กับ And1 pin[1]
• เชื่อมต่อมีข้อความ1 พิน[ออก] กับ And1 พิน[0]
• เชื่อมต่อ And1 pin [ออก] กับ AddValue1 pin[ใน]
• เชื่อมต่อ AddValue1 พิน[ออก] กับ CompareValue1 พิน[ใน]
• เชื่อมต่อ CompareValue1 pin[out] กับ RememberText1 pin [remember] และ pin[recall]
• เชื่อมต่อพิน RememberText1 [ออก] กับ ReplaceText2 พิน [ใน]
• เชื่อมต่อขา ReplaceText2 [ออก] กับ NodeMCU ESP-12 serial0 pin [ใน] และพินฟิลด์ข้อความองค์ประกอบ DisplayOLED1 [ใน]
• เชื่อมต่อ DisplayOLED1 pin [ออก] กับ NodeMCU ESP-12 I2C pin [ใน]

ขั้นตอนที่ 7: สร้าง คอมไพล์ และอัปโหลดโค้ด Arduino

ใน Visuino กด F9 หรือคลิกที่ปุ่มที่แสดงในรูปที่ 1 เพื่อสร้างรหัส Arduino และเปิด Arduino IDE

ใน Arduino IDE ให้คลิกที่ปุ่ม Upload เพื่อคอมไพล์และอัพโหลดโค้ด (ภาพที่ 2)

ขั้นตอนที่ 8: เล่น

หากคุณจ่ายไฟให้กับโมดูล NodeMCU หน้าจอ OLED จะเริ่มแสดงข่าวโลกล่าสุด

ยินดีด้วย! คุณทำโปรเจ็กต์ Live News กับ Visuino เสร็จแล้ว สิ่งที่แนบมาด้วยคือโครงการ Visuino ที่ฉันสร้างขึ้นสำหรับคำแนะนำนี้ คุณสามารถดาวน์โหลดและเปิดได้ใน Visuino: ลิงก์ดาวน์โหลด