Talaan ng mga Nilalaman:

Nextion Display Interface Sa ESP 32 Apat na Relay Board: 7 Mga Hakbang
Nextion Display Interface Sa ESP 32 Apat na Relay Board: 7 Mga Hakbang

Video: Nextion Display Interface Sa ESP 32 Apat na Relay Board: 7 Mga Hakbang

Video: Nextion Display Interface Sa ESP 32 Apat na Relay Board: 7 Mga Hakbang
Video: How to Make PLC LCD HMI || FLProg 2024, Nobyembre
Anonim
Nextion Display Interface Sa ESP 32 Apat na Relay Board
Nextion Display Interface Sa ESP 32 Apat na Relay Board

Sa mga itinuturo na ito ay isasama namin ang 5 nextion display sa Esp 32 apat na relay board. Ang board ay kinokontrol ng MQTT protocol. Ang lupon ay mayroon ding dalawang paraan sa pagkontrol ng mga tampok. Maaari itong kontrolin pareho ng mqtt at touch screen. Ang touch screen ay konektado sa Esp 32 sa pamamagitan ng uart.

Pag-setup ng Nextion Display:

Ang Nextion Editor ay isang software ng pag-unlad na ginagamit para sa visual na gusali ng graphic interface para sa naka-embed na mga aparato na masinsinang GUI na may iba't ibang uri ng mga pagpapakita ng TFT at mga Touch Panel. Gamit ang tool na ito, maaaring simulan ng mga gumagamit ang paglikha ng mga aparatong batay sa TFT sa isang mas mabilis at madaling paraan.

Maaaring mai-download ang Nextion Editor mula sa link na ito

nextion.itead.cc/resource/download/nextion-editor/

Pagkatapos i-download ang i-install ang nextion editor.

Hakbang 1: Nextion Editor

Nextion Editor
Nextion Editor
Nextion Editor
Nextion Editor
Nextion Editor
Nextion Editor

Buksan ang nextion editor sa ibaba ay ipinapakita ang window ng nextion, mayroon itong mga sub windows. Ang Tboxbox sa window na ito ay magkakaroon ng hanay ng mga tampok tulad ng upang ipakita ang teksto, magdagdag ng pindutan o upang lumikha ng dial atbp. Maaari nating i-drag at i-drop ang mga bagay na ito sa pangunahing window. Sa kaliwang sulok sa kaliwa ay ang window ng larawan at font kung saan maaaring magdagdag ang gumagamit ng mga imahe gamit ang simbolong ‘+’ at maaaring tanggalin ang mga imahe gamit ang simbolong ‘-’. Sa kanang sulok sa itaas ay may window ng pahina kung saan maaaring magdagdag o magtanggal ng mga pahina ng gumagamit. Sa ibabang sulok ng window ng katangian ay naroroon, dito maaaring baguhin ng gumagamit ang mga parameter ng mga bagay. Sa ibaba mayroong dalawang bintana ang isa ay ang Output window at window ng Kaganapan. Sa Output window ito ipapakita ang error ng tagatala. Pipili ang gumagamit ng mga bagay at isusulat ang code sa window ng kaganapan upang mangyari ang mga bagay.

Kailangan naming likhain ang bagong file, sa sandaling nai-save namin ang bagong file ay lilitaw ang window ng imahe2, hihilingin na piliin ang modelo, ang modelo ay walang iba kundi ang modelo ng display na nextion makukuha mo ito sa likuran ng nextion pagkatapos ng pag-click na ok sa magpatuloy

Matapos lumikha ng bagong file ang pahina ay nilikha tulad ng ipinapakita sa imahe na imahe3, ang gumagamit ay maaaring lumikha ng maraming bilang ng mga pahina na nakasalalay sa kanyang aplikasyon. Ngunit sa kasalukuyang application ay nililimitahan namin ang isang pahina lamang.

Hakbang 2: Pagdaragdag ng Mga Imahe at Font

Pagdaragdag ng Mga Imahe at Font
Pagdaragdag ng Mga Imahe at Font
Pagdaragdag ng Mga Imahe at Font
Pagdaragdag ng Mga Imahe at Font
Pagdaragdag ng Mga Imahe at Font
Pagdaragdag ng Mga Imahe at Font

Sa imahe4 maaari mong makita kung paano lumikha ng font. Pumunta sa mga tool at mag-click sa Font Generator ang window ng tagalikha ng font ay lilitaw, sa ito piliin ang taas at uri ng font at ibigay ang pangalan ng font at mag-click sa font ng generator. Matapos mabuo ang font ang nextion ay magtatanong kung idaragdag ang font o hindi

Sa image5 maaari mong makita kung paano idagdag ang font, naka-highlight ito sa snapshot. Ang paggamit ng + at - simbolo ng gumagamit ay maaaring magdagdag o magtanggal ng font.

Sa imahe6 maaari mong makita kung paano magdagdag ng mga imahe o tanggalin ang mga imahe sa pamamagitan ng pagpili ng pagpili ng “+” o “-” ayon sa pagkakabanggit.

Hakbang 3: Lumilikha ng Button

Lumilikha ng Button
Lumilikha ng Button
Lumilikha ng Button
Lumilikha ng Button
Lumilikha ng Button
Lumilikha ng Button

Ipinapakita ng Image7 kung paano idagdag ang mga bagay sa pangunahing window mula sa toolbox. Halimbawa mag-click sa pindutan ng dalawahang estado ng bagay, lilitaw ito sa pangunahing window tulad ng ipinapakita sa imahe7 dalawahang pindutan ng estado na bagay bt0. Maaaring ilipat ng gumagamit ang pindutan sa x at y direksyon. Ipapakita namin kung paano lumikha ng isang switch button na may dalawahang estado.

Sa imahe8 maaari nating makita ang pindutan ng imahe ay nabago ayon sa gumagamit. Kailangan naming mag-click sa pindutan bt0, sa window ng katangian, lilitaw ang mga parameter ng pindutan. Sa user na iyon kailangang baguhin ang parameter ng sta sa imahe at sa tab na pic0 at pic1 kailangang magtalaga ang gumagamit ng mga imaheng nais niyang mailapat.

Ipinapakita ng imahe9 ang pangwakas na pag-aayos ng lahat ng mga pindutan kasama ang pagbibigay ng pangalan. Dito naidagdag namin ang bt0, bt1, bt2 at bt3 para sa button0, button1, button2 at button3 ayon sa pagkakabanggit.

Hakbang 4: Code ng Kaganapan para sa Button ng Paglipat

Code ng Kaganapan para sa Button ng Paglipat
Code ng Kaganapan para sa Button ng Paglipat
Code ng Kaganapan para sa Button ng Paglipat
Code ng Kaganapan para sa Button ng Paglipat

Ipinapakita ng Image10 ang preinitialization ng baud rate = 115200 sa window ng kaganapan, ang bahagi nito ng code. Maaaring simulan ng gumagamit ang bahaging ito na nauugnay sa pagpapakita.

Ipinapakita ng image11 ang bahagi ng code ng button bt0, narito ang pag-print namin ng serial depende sa variable na estado ng pindutan, ie para sa bt0 variable ay 0 pagkatapos ay nagpapadala kami ng serial na "R10" at para sa bt0 variable ay 1 pagkatapos ay nagpapadala kami ng "R11" sa esp. Kapag natanggap ni Esp ang R10 pinapatay nito ang 1st relay at kapag natanggap nito ang R11 1st relay ay nakabukas. Katulad nito kailangan naming mag-code para sa lahat ng mga pindutan halimbawa bt1, bt2 at bt3.

Hakbang 5: I-debug ang GUI

Debug GUI
Debug GUI
Debug GUI
Debug GUI

Kapag naka-code na ang lahat kailangan nating mag-ipon, kung walang error maaari naming i-debug ang nilikha na GUI na gumagana ayon sa aming mga kinakailangan bago mag-upload sa display ng nextion. Ipinapakita ng Image12 ang window ng debugger, dito maaari ng kasalukuyang simulator ng gumagamit mula sa drop down button at suriin kung gumagana ito bilang bawat gumagamit.

Kapag ang aparato ay gumagana bilang bawat gumagamit pagkatapos ng susunod na hakbang ay i-upload ang code sa display ng nextion.

Ipinapakita ng Image13 ang pag-upload ng window sa nextion device, narito kailangan mong pumili ng com port at baud-rate. Pagkatapos nito ay kailangang mag-click on go button upang mag-upload sa code, maaaring magtagal bago mag-upload.

Hakbang 6: Paggawa ng Device

Paggawa ng Device
Paggawa ng Device
Paggawa ng Device
Paggawa ng Device

Ipinapakita ng Image14 ang diagram ng koneksyon ng ESP 32 wifi apat na relay board na may display na nextion. Mula sa board ng ESP 32 na J1 at J2 ikonekta ang 5v at Ground (G) sa display ng nextion tulad ng ipinakita sa ibaba. Ikonekta ang Tx ng nextion sa Rx0 ng ESP32 board at Rx ng nextion sa Tx0 ng ESP32 board. Ito ay magtatatag ng komunikasyon sa Uart.

Nagtatrabaho: Kapag ang lahat ay konektado sa kapangyarihan ang aparato ay nag-configure ng aparato gamit ang ssid at password at mqtt broker na may publish at pangalan ng paksa ng subscript. Matapos isumite ang mga kredensyal na aparato ay magre-reboot at kumonekta sa mqtt. Ang naka-configure na aparato ay upang buksan (para sa openhab mangyaring suriin ang aming openhab instructable) tulad ng ipinakita sa imahe15.

Ang aparato ay maaaring kontrolado ng http, mqtt pati na rin sa pamamagitan ng touch screen ng GUI. Maaari naming makuha ang kasalukuyang katayuan ng lahat ng mga relay channel kung naka-on o naka-off ang mga channel sa parehong mqtt at touch screen display.

Hakbang 7: Tulong sa Nextion

Tulong sa Nextion
Tulong sa Nextion

Ipinapakita ng Image17 ang window para sa hanay ng pagtuturo ng nextion, kung saan maaaring makakuha ng tulong ang gumagamit.

Inirerekumendang: