จอแสดงผล WIFI สำหรับการจัดการการผลิต: 6 ขั้นตอน

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

ฉันเป็นซีรีส์เกี่ยวกับ IOT และคอมพิวเตอร์บอร์ดเดี่ยว

ฉันอยากจะใช้มันมากกว่าแค่โปรเจกต์งานอดิเรกและความสนุก (การผลิตและการผลิตจริง)

คำแนะนำนี้กำลังจะสร้างจอแสดงผล WIFI 7 ส่วน 4 หลักพร้อม ESP nodemcu เพื่อแสดงอินพุตการผลิตรายชั่วโมง ฉันทำงานในอุตสาหกรรมการผลิตอุปกรณ์อิเล็กทรอนิกส์ ซึ่งเราใช้ระบบการดำเนินการผลิต (MES) เพื่อตรวจสอบและควบคุมอินพุต เอาต์พุต และกระบวนการของชั้นการผลิต ในโปรเจ็กต์นี้ ฉันกำลังสร้างหน่วยแสดงผลขนาดเล็ก ซึ่งจะแสดงจำนวนอินพุตการผลิตตามบรรทัด กะ และชั่วโมง

ในทางเทคนิค โครงการนี้คล้ายกับการแสดงจำนวนสมาชิก Youtube ซึ่งเราใช้การตอบสนอง API/HTTP จากออนไลน์ แต่ที่นี่เราจะสร้าง API ของเราเองเพื่อโต้ตอบกับระบบ MES ในพื้นที่ของเราเพื่อรับปริมาณอินพุต

ขั้นตอนที่ 1: ชิ้นส่วนและเครื่องมือที่ใช้:

ชิ้นส่วนฮาร์ดแวร์ที่ใช้:

1. ESP nodemcu
2. TM1637 จอแสดงผลนาฬิกา 4 หลัก
3. สวิตช์กด
4. ตัวต้านทาน 10k
5. สายจัมเปอร์ไม่กี่เส้น

เครื่องมือซอฟต์แวร์ที่ใช้:

1. Arduino IDE
2. Xampp สำหรับเว็บเซิร์ฟเวอร์ PHP/Apache

ห้องสมุด Arduino ที่ใช้:

1. ตัวจัดการ Wifi โดย tzapu & i ปรับแต่งสำหรับไฟล์ที่กำหนดเองของฉัน (wifimanager)

2. ESP_EEPROM สำหรับจัดเก็บค่าที่กำหนดเองของฉันในหน่วยความจำแฟลช

3. SevenSegmentTM1637 สำหรับจอแสดงผล

ขั้นตอนที่ 2: การปรับแต่ง Wifi Manager

ในครั้งแรกนี้ฉันติดตั้งตัวจัดการ wifi ก่อนแล้วจึงคัดลอกโฟลเดอร์ตัวจัดการ Wifi และส่งผ่านอีกครั้งในโฟลเดอร์ Same ในโฟลเดอร์ไลบรารี Arduino จากนั้นเปลี่ยนชื่อเป็น WiFiManager_custom

ไดเรกทอรีรากของโฟลเดอร์ ส่วนใหญ่ชอบ

C:\Users\ชื่อคอมพิวเตอร์ของคุณ\Documents\Arduino\libraries

จากนั้นฉันเปิดโฟลเดอร์ wifimanager_custom และเปลี่ยนชื่อไฟล์ส่วนหัว.cpp เหมือนกับ wifimanager_custom เพิ่มในไฟล์ส่วนหัว &.cpp ด้วย

และเพิ่ม Custom Form & Button ของฉันในส่วนหัว

ใน HTTP_PORTAL_OPTIONS PROGMEM ฉันเพิ่มรูปแบบปุ่มของฉันสำหรับเมนู

และเพิ่มแบบฟอร์มใหม่สำหรับการเข้าแถวและกะ ฉันสร้างแบบฟอร์มนี้เป็นแบบฟอร์มข้อความธรรมดา

หลังจากนี้เราจะสร้างฟังก์ชันการทำงานสำหรับแบบฟอร์มนี้ในไฟล์.cpp เพื่อที่เราจะต้องทำการประกาศฟังก์ชันในไฟล์ส่วนหัว

/* ฟังก์ชั่นที่กำหนดเองของฉัน */

เป็นโมฆะ handleCustomForm(); โมฆะ handleCustomSave();

ฉันประกาศฟังก์ชั่นที่กำหนดเองของฉันในไฟล์ส่วนหัว ว่างานของเราในส่วนหัวเสร็จแล้วเราต้องไปกับไฟล์.cpp เพื่อสร้างฟังก์ชันและการกระทำของเรา

ขั้นตอนที่ 3: ฟังก์ชันที่กำหนดเองสำหรับการดำเนินการกับแบบฟอร์ม

ตอนนี้เราเปิดไฟล์ wifimanager_custom.cpp ของเรา

และเราต้องเพิ่มตัวจัดการการตอบสนอง http เพื่อเรียกใช้ฟังก์ชันของเราเมื่อโพสต์แบบฟอร์ม

เซิร์ฟเวอร์->on(String(F("/custom_config")), std::bind(&WiFiManager::handleCustomForm, this)); // ที่จับที่กำหนดเองของฉัน

เซิร์ฟเวอร์->on(String(F("/custom_save")), std::bind(&WiFiManager::handleCustomSave, this)); // ที่จับที่กำหนดเองของฉัน

สิ่งเหล่านี้จะเรียกฟังก์ชันที่กำหนดเองของเราเมื่อมีการโพสต์แบบฟอร์ม

1.handleCustomForm()-> จะสร้างหน้าด้วยแบบฟอร์มที่กำหนดเองของเราสำหรับปุ่ม line & shift input & save

2.handleCustomSave()-> ฟังก์ชันนี้จะได้รับค่าแบบฟอร์มและจัดเก็บในตำแหน่งหน่วยความจำแฟลช 0 (บรรทัด) และ 50 (กะ)

ขั้นตอนที่ 4: การเชื่อมต่อ & โปรแกรมหลัก

การเชื่อมต่อนั้นง่ายมาก..

การเชื่อมต่อและสายไฟ:

nodemcu TM1637 จอแสดงผล

3.3v ----Vcc

จี ----Gnd

D2 ---- CLK

D3 ----- DIO

nodemcu- สวิตช์กด

- ปุ่มกดติดอยู่กับพิน D8 จาก +5V - ตัวต้านทาน 10K ติดอยู่กับพิน D8 จากกราวด์

เราปรับแต่ง wifimanager ของเราเสร็จแล้ว ตอนนี้เราต้องสร้างโปรแกรมหลักของเรา

1. ตัวจัดการ wifi ของเราจะเชื่อมต่อกับเครือข่าย wifi ด้วยข้อมูลรับรองที่ใช้ล่าสุดเพื่อเชื่อมต่อ หากไม่สำเร็จ จะเปิดเซิร์ฟเวอร์ Wi-Fi ของ AutoConnectAP เราสามารถกำหนดค่าข้อมูลรับรอง wifi ใหม่ สาย & กะโดยเชื่อมต่อกับเซิร์ฟเวอร์ wifi นี้

2. จากนั้นจะเข้าสู่ลูปหลัก

วงหลักของเราจะมีสองส่วน หนึ่งคือรูทีนย่อย Confid เมื่อเราต้องเปลี่ยนสาย เปลี่ยนหรือเพิ่มข้อมูลรับรอง wifi เพื่อเรียกโหมดความต้องการ AP เพื่อกำหนดค่า สิ่งนี้จะถูกเรียกเมื่อกดปุ่มที่เชื่อมต่อกับพิน D8

วงเป็นโมฆะ () {

config_loop();

}

ถือเป็นโมฆะ config_loop(){ Serial.println("");

Serial.println("กำลังรอสถานะปุ่มกำหนดค่า…");

//display.print("รอ");

ถ้า (digitalRead(TRIGGER_PIN) == สูง)

{

display.print("Conf"); // WiFiManager

// การกำหนดค่าเริ่มต้นในท้องถิ่น เมื่อธุรกิจเสร็จสิ้น ไม่จำเป็นต้องเก็บไว้รอบๆ WiFiManager wifiManager

//รีเซ็ตการตั้งค่า - สำหรับการทดสอบ

//wifiManager.resetSettings();

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

//wifiManager.setTimeout (120);

// มันเริ่มจุดเชื่อมต่อด้วยชื่อที่ระบุ

//ที่นี่ "AutoConnectAP" //และเข้าสู่ลูปการบล็อกเพื่อรอการกำหนดค่า

// หากไม่มี AP นี้ดูเหมือนว่าจะทำงานไม่ถูกต้องกับ SDK 1.5 ให้อัปเดตเป็นอย่างน้อย 1.5.1 //WiFi.mode(WIFI_STA);

if (!wifiManager.startConfigPortal ("OnDemandAP")) { Serial.println ("ล้มเหลวในการเชื่อมต่อและกดหมดเวลา"); ล่าช้า (3000); //รีเซ็ตแล้วลองใหม่อีกครั้ง หรืออาจจะทำให้หลับลึก ESP.reset(); ล่าช้า (5000); } }

//Serial.println("สถานะปุ่ม False. Back to Main loop"); //display.print("ลูปหลัก"); //display.clear();

}

อันที่สองจะเป็นโปรแกรมหลักของเราในการรับการตอบสนอง HTTP จากเซิร์ฟเวอร์เฉพาะ & แสดงปริมาณอินพุตในจอแสดงผล

สำหรับสิ่งนี้ ก่อนอื่นเราต้องรับรายละเอียดบรรทัด & shift จากที่เก็บข้อมูล Flash ของ ESP (ที่อยู่ 0-> line, 50-> shift)

EEPROM.begin(100); // eeprom storageEEPROM.get(0, บรรทัด); // รับค่าจากที่อยู่ 0

EEPROM.get(50, กะ); // รับค่าจากที่อยู่ 50

จากนั้นเราต้องส่งผ่านบรรทัดนี้ & เปลี่ยนรายละเอียดไปยังเซิร์ฟเวอร์ http ของเราโดยรับวิธีการเพื่อรับค่าของอินพุต & เอาต์พุต

สตริง Base_url="ลบ"; // url พื้นฐานของฉัน HTTPClient http; //วัตถุของคลาส

สตริง URL=Base_url+"?"+"line="+line+"&shift="+shift;

Serial.println (URL);

http.begin(URL);

int httpCode =

Serial.println(http.getString()); // นี่จะพิมพ์สตริงตอบกลับ http ทั้งหมด;

ถ้าคุณต้องการให้ข้อความทั้งหมดเป็นอย่างไร งานของคุณเสร็จสิ้นที่นี่ เราสามารถแสดงผลได้โดยตรงในจอแสดงผล tm1637

display.print(http.getString());

แต่ฉันไม่ต้องการแสดงข้อความทั้งหมด เนื่องจากมีอินพุต เอาต์พุตในรูปแบบ json และข้อความทั่วไปอื่นๆ เกี่ยวกับฐานข้อมูลและอื่น ๆ

ก่อนอื่นฉันลบข้อความทั่วไปนั้นออกจากสตริงการตอบกลับโดยใช้ฟังก์ชัน Substring()

ฉันนับความยาวของข้อความทั่วไปและตัดแต่งมัน

ถ้า (httpCode > 0) { const size_t bufferSize = 100; //DynamicJsonDocument jsonBuffer (ขนาดบัฟเฟอร์); รูท DynamicJsonDocument (ขนาดบัฟเฟอร์);

//JsonObject& root = doc.parseObject(http.getString());

สตริง json_string=http.getString().substring(121); /* นี่คือการชดเชยข้อความทั่วไปของฉัน หากผู้ตอบของคุณไม่มีสิ่งใดเช่นนั้น คุณสามารถลบโค้ดนี้ได้ */

//Serial.println(json_string); //อนุกรม.println(json_string);

ข้อผิดพลาด DeserializationError = deserializeJson (รูท, json_string);

//JsonObject& root = jsonBuffer.parseObject(http.getString());

ถ้า (ผิดพลาด)

{ Serial.print(F("deserializeJson() ล้มเหลว: "));

Serial.println(error.c_str());

กลับ;

}

อื่น{

const ถ่าน* อินพุต = รูท["อินพุต"];

const char* output = root["output"];

Serial.print("อินพุต:");

Serial.println (อินพุต);

Serial.print("เอาท์พุท:");

Serial.println (เอาต์พุต);

display.print("..ใน..");

display.clear(); // ล้างหน้าจอ

display.print(input);// print นับจำนวนหลัก

}

นั่นคือโปรแกรมหลักของเราเสร็จสิ้น

ขั้นตอนที่ 5: การสร้างเว็บเซิร์ฟเวอร์

ฉันกำลังใช้ xampp เป็นเว็บเซิร์ฟเวอร์ของฉัน & รหัส PHP เพื่อรับข้อมูลจากฐานข้อมูล SQL ของฉันเพื่อรับปริมาณที่แน่นอน

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

สำหรับสิ่งนี้คุณควรต้องการโฮสต์เว็บใด ๆ ฉันใช้ที่นี่ xampp เป็นโฮสต์ของฉัน

คุณสามารถดาวน์โหลด xampp ได้ที่นี่

ติดตั้ง xampp…ถ้าคุณต้องการคำแนะนำที่ชัดเจน คุณสามารถใช้ลิงค์นี้

หลังจากติดตั้ง xampp คุณต้องไปที่ไดเร็กทอรีรากของคุณ

C:\xampp\htdocs

โปรแกรม php ทั้งหมดของคุณควรอยู่ภายในรูทนี้

ฉันสร้างเพจของฉันในชื่อที่เรียกว่า esp_api.php

นี่คือรหัส php ของฉัน ที่นี่ฉันแค่แสดงค่าคงที่ของอินพุต & เอาต์พุต;

$line=$_GET['line'];$shift=$_GET['shift']; $line=$_GET['line'];$shift=$_GET['shift'];

เสียงสะท้อน ("myString"); //ข้อความทั่วไป

if($line=='a0401' and $shift='dd') { $result['input']=100; $result['output']=99; }

อื่น { $result['input']=200; $result['output']=199; }

$myObj->input =''.$result['input'].'';

$myObj->output =''.$result['output'].'';

$myJSON = json_encode($myObj);

เสียงสะท้อน $myJSON;

ตอนนี้ API การตอบสนอง HTTP ของเราเสร็จสิ้นแล้ว

URL ฐาน http ของเราจะเป็นเช่น

you_ip_address/esp_api.php

คุณสามารถตรวจสอบข้อความตอบกลับ API ของคุณได้โดย

localhost/esp_api.php?line=a0401&shift=dd

ที่นี่ฉันพูดถึงบรรทัดเป็น a0401 และเปลี่ยนเป็น dd

ขั้นตอนที่ 6: ขั้นตอนสุดท้าย!!

ป้อนที่อยู่ IP ของคอมพิวเตอร์ของคุณใน URL ฐาน

สตริง Base_url="ลบแล้ว"; // URL พื้นฐานของคุณ

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

จากนั้นรีเซ็ตอุปกรณ์ของคุณ & ตรวจสอบว่าเครือข่ายของคุณเชื่อมต่อเมื่อเชื่อมต่อแล้วทุกอย่างเสร็จสิ้น

คุณสามารถเห็นการป้อนข้อมูลปรากฏขึ้นในจอแสดงผล

หากคุณต้องการเปลี่ยนสายหรือข้อมูลรับรอง wifi คุณสามารถกดสวิตช์กดสองสามวินาที จอแสดงผลจะแสดง Confid

คุณเข้าสู่โหมด DemandAP คุณสามารถเปลี่ยนและรีเซ็ตอุปกรณ์ได้

moto หลักของคำสั่งของเขาเพื่อแสดงให้คุณเห็นว่าเราสามารถใช้งานอดิเรกและโครงการสนุก ๆ ของเราในพื้นที่การผลิตและการผลิตจริงและการแสดงได้อย่างไร