Thauj Koj Cov Arduino/ESP Config Webpage Los Ntawm Huab: 7 Kauj Ruam

2024 Tus sau: John Day | [email protected]. Kawg hloov kho: 2024-01-30 09:29

Thaum tsim qhov Arduino / ESP (ESP8266 / ESP32) txoj haujlwm, koj tuaj yeem tsuas yog nyuaj txhua yam. Tab sis ntau zaus ntau dua li tsis muaj ib yam dab tsi hloov pauv thiab koj yuav rov txuas dua koj li IoT-ntaus ntawv rau koj li IDE dua. Lossis koj tsuas yog tau txais ntau tus neeg nkag mus rau kev teeb tsa thiab koj xav muab UI tsis yog cia siab tias lawv yuav nkag siab txog kev ua haujlwm sab hauv.

Cov lus qhia no yuav qhia koj yuav ua li cas tso UI feem ntau hauv huab tsis yog ntawm Arduino / ESP. Ua li no txoj hauv kev yuav cawm koj ntawm qhov chaw thiab siv lub cim xeeb. Qhov kev pabcuam muab dawb lub vev xaib zoo li no yog qhov tsim nyog tshwj xeeb raws li "huab", zoo li GitHub Nplooj Ntawv, tab sis lwm qhov kev xaiv yuav zaum ua haujlwm ib yam nkaus.

Txhim kho lub vev xaib li no xav kom tus neeg siv lub browser mus dhau 4 kauj ruam:

1. Thov lub hauv paus url los ntawm Arduino / ESP
2. Tau txais lub vev xaib yooj yim heev, qhia rau:
3. Thov kom JavaScript cov ntaub ntawv los ntawm huab
4. Tau txais cov cai uas tsim los ntawm nplooj ntawv tiag

Cov Lus Qhia no tseem yuav piav qhia yuav ua li cas cuam tshuam nrog Arduino / ESP thaum nplooj ntawv tau npaj tiav raws li cov kauj ruam saum toj no.

Cov cai tsim los ntawm cov lus qhia no tuaj yeem pom ntawm GitHub ib yam.

Yam yuavtsum tau kawm uantej

Cov lus qhia no xav tias koj tau nkag mus rau qee yam ntaub ntawv thiab qee qhov kev paub ua ntej:

• Ib qho Arduino (nrog kev nkag mus rau network) / ESP
• Lub khoos phis tawj los txuas rau saum toj no rau
• Kev siv WiFi txuas nrog internet
• Arduino IDE teeb tsa (tseem rau ESP32)
• Koj paub yuav ua li cas upload cov duab kos rau koj IoT-ntaus ntawv
• Koj paub siv Git & GitHub

Kauj Ruam 1: Pib Tawm Nrog Yooj Yim WebServer Sketch

Peb yuav pib yooj yim li sai tau, thiab cia nws loj tuaj ntawm no mus.

#suav nrog

const char* ssid = "yourssid"; const char* password = "yourpasswd"; WiFiServer server (80); void setup () {// Initialize serial thiab tos rau qhov chaw nres nkoj qhib: Serial.begin (115200); thaum (! Serial) {; // tos rau qhov chaw nres nkoj txuas mus txuas. Xav tau rau ib txwm USB chaw nres nkoj nkaus xwb} WiFi.begin (ssid, password); thaum (WiFi.status ()! = WL_CONNECTED) {ncua (500); Serial.print ("."); } Serial.println ("Txuas nrog WiFi."); Serial.println ("IP chaw nyob:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// mloog rau cov neeg siv khoom WiFiClient tus thov = server.available (); // mloog rau cov neeg siv khoom bool xaResponse = tsis tseeb; // teeb tsa qhov tseeb yog tias peb xav xa cov lus teb Txoj hlua urlLine = ""; // ua txoj hlua los tuav qhov thov URL yog (tus neeg siv khoom) // yog tias koj tau txais tus neeg siv khoom, {Serial.println ("Tus Neeg Siv Khoom Tshiab."); // luam tawm cov lus tawm ntawm qhov chaw nres nkoj txuas Txoj hlua tam sim no = ""; // ua txoj hlua los tuav cov ntaub ntawv nkag los ntawm tus neeg siv khoom thaum (tus neeg siv khoom sib txuas ()) // lub voj thaum tus neeg siv khoom sib txuas {yog (tus neeg siv khoom siv tau ()) // yog tias muaj bytes nyeem los ntawm tus neeg siv khoom, {char c = client.read (); cov. // nyeem ib byte, tom qab ntawd yog (c == '\ n') // yog tias byte yog tus kab ntawv tshiab {// yog tias kab tam sim no tsis muaj dab tsi, koj tau txais ob kab ntawv tshiab hauv kab. // uas yog qhov kawg ntawm tus thov HTTP thov, yog li xa cov lus teb: yog (currentLine.length () == 0) {sendResponse = muaj tseeb; // txhua yam zoo! tawg; // tawg tawm ntawm lub sijhawm voj} lwm yam // yog tias koj tau txais kab ntawv tshiab, tom qab ntawd tshem tam sim tam sim no: {yog (currentLine.indexOf ("GET /")> = 0) // qhov no yuav tsum yog kab URL {urlLine = currentLine; // txuag nws rau tom qab siv} currentLine = ""; // rov pib dua txoj hlua tam sim no}} lwm qhov yog (c! = '\ r') // yog tias koj tau txais lwm yam tab sis lub tsheb rov qab ua cim, {currentLine += c; // ntxiv nws mus rau qhov kawg ntawm currentLine}}} yog (xaResponse) {Serial.print ("Cov neeg thov"); Serial.println (urlLine); // HTTP headers ib txwm pib nrog cov lus teb (piv txwv li HTTP/1.1 200 OK) // thiab cov ntsiab lus-hom yog li tus neeg siv khoom paub dab tsi los tom ntej, tom qab ntawv tsis muaj kab: client.println ("HTTP/1.1 200 OK"); client.println ("Cov ntsiab lus-hom: ntawv/html"); client.println (); cov. yog tias (urlLine.indexOf ("GET /")> = 0) // yog tias qhov URL tsuas yog " /" {// cov ntsiab lus ntawm HTTP cov lus teb ua raws lub hauv paus: client.println ("Nyob zoo ntiaj teb!"); } // HTTP cov lus teb xaus nrog lwm kab dawb paug: client.println (); } // kaw qhov kev sib txuas: client.stop (); Serial.println ("Client Disconnected."); }}

Luam hla cov cai saum toj no, lossis rub tawm nws los ntawm kev cog lus ntawm GitHub.

Tsis txhob hnov qab hloov tus SSID thiab tus password kom phim koj lub network.

Cov duab kos no siv Arduino paub zoo

teeb ()

thiab

voj ()

kev ua haujlwm. Hauv

teeb ()

ua haujlwm txuas txuas mus rau IDE tau pib thiab yog li WiFi. Thaum lub WiFi txuas nrog rau SSID hais tias IP tau luam tawm thiab lub vev xaib tau pib. Hauv txhua qhov rov ua dua ntawm

voj ()

ua haujlwm lub vev xaib raug tshuaj xyuas rau cov neeg siv khoom sib txuas. Yog tias tus neeg siv tau txuas nrog qhov kev thov raug nyeem thiab thov URL tau khaws tseg hauv qhov sib txawv. Yog tias txhua yam zoo li zoo, cov lus teb los ntawm server rau tus neeg siv khoom tau ua tiav raws li qhov thov URL.

CEEB TOOM! Txoj cai no siv chav kawm Arduino String kom yooj yim. Txoj hlua ua kom zoo dua qub tsis nyob hauv qhov kev qhia no. Nyeem ntxiv txog qhov no ntawm kev qhia paub txog Arduino String Manipulation Siv Minimal Ram.

Kauj Ruam 2: Tsim Cov Chaw Taws Teeb JavaScript

Arduino / ESP yuav qhia rau cov neeg tuaj saib browser kom thauj cov ntaub ntawv no. Txhua qhov seem yuav ua tiav los ntawm tus lej JavaScript no.

Hauv Cov Lus Qhia no peb yuav siv jQuery, qhov no tsis tsim nyog nruj me ntsis, tab sis yuav ua kom yooj yim dua.

Cov ntaub ntawv no xav tau los ntawm lub vev xaib, cov nplooj ntawv zoo li qub server txaus los ua txoj haujlwm no, piv txwv li GitHub nplooj ntawv. Yog li koj yuav zaum xav ua qhov tshiab GitHub chaw cia khoom thiab tsim ib qho

gh paj

ceg. Muab cov cai hauv qab no tso rau hauv a

.js ib

cov ntaub ntawv hauv qhov chaw cia khoom hauv cov ceg raug.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (muaj nuj nqi () {var tsab ntawv = document.createElement ('tsab ntawv'); // tsim cov ntawv script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // teeb tsa src = "" tus cwj pwm script.onload = muaj nuj nqi () // hu rov qab muaj nuj nqi, hu ua ib zaug jquery cov ntaub ntawv yog loaded {$ = window.jQuery; // ua jQuery nkag tau raws li lub ntiaj teb $ kuj sib txawv init (); // hu rau lub luag haujlwm pib}; daim ntawv. getElementsByTagName ('taub hau') [0].appendChild (tsab ntawv); // ntxiv cov ntawv tsim rau daim ntawv, qhov no yuav pib thauj khoom ntawm jQuery lib}) (); muaj nuj nqi init () {// Ua tiav loading jQuery, yuav ntxiv cov cai ntawm no tom qab ntawm …}

Luam hla cov cai saum toj no, lossis rub tawm nws los ntawm kev cog lus ntawm GitHub.

Xyuas seb koj cov ntaub ntawv puas siv tau. Nyob rau hauv rooj plaub ntawm GitHub nplooj ntawv mus rau https://username.github.io/repository/your-file.j… (hloov

lub npe siv

,

chaw cia khoom

thiab

koj-file.js

rau qhov ntsuas tsis raug).

Kauj Ruam 3: Thauj Cov Ntaub Ntawv JavaScript Cov Chaw Taws Teeb rau hauv Cov Qhua Qhua

Tam sim no uas peb tau txais txhua yam teeb tsa nws yog lub sijhawm los ua lub vev xaib thauj cov ntaub ntawv JavaScript deb.

Koj tuaj yeem ua qhov no los ntawm kev hloov kab 88 ntawm daim duab kos los ntawm

client.println ("Nyob zoo ntiaj teb!"); t

client.println ("");

(change cov

src ua

tus cwj pwm taw tes rau koj tus kheej cov ntaub ntawv JavaScript). Qhov no yog lub vev xaib html me me, txhua yam nws ua yog ntsaws cov ntaub ntawv JavaScript rau hauv cov neeg tuaj saib browser.

Cov ntaub ntawv hloov pauv kuj tseem tuaj yeem pom hauv kev cog lus sib xws ntawm GitHub.

Tshaj tawm cov duab hloov pauv rau koj Arduino / ESP.

Kauj Ruam 4: Ntxiv Elements Tshiab rau Nplooj Ntawv

Ib nplooj ntawv tsis muaj txiaj ntsig, yog li tam sim no yog lub sijhawm los ntxiv cov ntsiab lus tshiab rau ntawm nplooj ntawv webpage. Txog tam sim no qhov no yuav yog YouTube vis dis aus Hauv qhov piv txwv no qee tus lej jQuery yuav siv los ua kom tiav qhov no.

Ntxiv kab ntawv hauv qab no rau

pib ()

muaj nuj nqi:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0'}). css ({dav: '608px', qhov siab: '342px'}). AppendTo ('lub cev');

Qhov no yuav tsim ib qho

iframe

element, teeb qhov tseeb

src ua

tus cwj pwm thiab teeb tsa qhov loj me siv css thiab ntxiv cov ntsiab lus rau lub cev ntawm nplooj ntawv.

jQuery pab peb yooj yim xaiv thiab hloov cov ntsiab lus hauv lub vev xaib, qee yam yooj yim kom paub:

• $ ('lub cev')

• xaiv ib qho uas twb muaj lawm, lwm tus xaiv css tuaj yeem siv tau ib yam

• $(' ')

  tsim tshiab

• element (tab sis tsis ntxiv nws rau hauv daim ntawv)

• .appendTo ('. lub ntsiab')

• txuas ntxiv qhov xaiv/tsim keeb rau ib ntu nrog css chav kawm 'tseem ceeb'

• Lwm txoj haujlwm los ntxiv cov ntsiab lus yog

  .txog ()

  ,

  .peb ()

  ,

  .prependTo ()

  ,

  .txog ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  tom qab ()

  ,

  ua ntej ()

Ua tibzoo saib qhov kev cog lus sib raug ntawm GitHub yog tias muaj dab tsi tsis meej.

Kauj Ruam 5: Cov Lus Sib Tham

Cov vis dis aus lom zem, tab sis lub hom phiaj ntawm cov lus qhia no yog los cuam tshuam nrog Arduino / ESP. Let's hloov cov vis dis aus rau lub pob uas xa cov ntaub ntawv mus rau Arduino / ESP thiab tseem tos qhov lus teb.

Peb yuav xav tau ib

$('')

ntxiv rau nplooj ntawv, thiab txuas tus neeg sau npe koom nrog rau nws. Tus neeg teev npe yuav hu xov tooj rov qab thaum muaj xwm txheej tshwj xeeb tshwm sim:

$ (''). ntawv ('khawm'). ntawm ('nyem', ua haujlwm ()

{// code ntawm no yuav ua tiav thaum lub pob tau nyem}). appendTo ('lub cev');

Thiab ntxiv qhov kev thov AJAX rau kev hu rov qab:

$.get ('/ajax', muaj nuj nqi (cov ntaub ntawv)

{// code ntawm no yuav ua tiav thaum AJAX thov ua tiav});

Thaum qhov kev thov tiav, cov ntaub ntawv xa rov qab yuav raug ntxiv rau nplooj ntawv:

$('

').text (cov ntaub ntawv).appendTo (' lub cev ');

Hauv cov ntsiab lus, cov cai saum toj no tsim lub pob, ntxiv nws rau lub vev xaib, thaum lub pob nyem nyem qhov kev thov yuav raug xa tawm thiab cov lus teb tseem yuav ntxiv rau hauv lub vev xaib.

Yog tias qhov no yog koj thawj zaug siv kev hu rov qab koj yuav xav tshawb xyuas qhov kev cog lus ntawm GitHub kom pom tias txhua yam yog zes.

Kauj Ruam 6: Teb rau Cov Lus Sib Tham

Yog lawm, AJAX qhov kev thov xav tau cov lus teb.

Txhawm rau tsim cov lus teb raug rau

/ajax

url peb yuav tau ntxiv ib qho

lwm yog tias ()

txoj cai tom qab kaw kab lus ntawm yog cov lus hais uas tshawb xyuas ntawm

/

url ua.

lwm yog (urlLine.indexOf ("GET /ajax")> = 0)

{client.print ("Nyob zoo!"); }

Hauv kev cog lus ntawm GitHub Kuv tseem tau ntxiv lub txee los qhia qhov browser tias txhua qhov kev thov tshwj xeeb.

Kauj Ruam 7: Xaus

Qhov no yog qhov kawg ntawm cov lus qhia no. Tam sim no koj muaj Arduino / ESP ua haujlwm rau lub vev xaib me me uas qhia rau tus qhua lub browser kom thauj cov ntaub ntawv JavaScript los ntawm huab. Thaum JavaScript tau rub tawm nws tsim cov seem ntawm cov vev xaib muab UI rau tus neeg siv los sib tham nrog Arduino / ESP.

Tam sim no nws yog nyob ntawm koj lub tswv yim los tsim ntau cov ntsiab lus ntawm lub vev xaib thiab khaws cov chaw hauv zos ntawm qee yam ntawm ROM (EEPROM / NVS / thiab lwm yam).

Ua tsaug rau kev nyeem ntawv, thiab thov ua siab zoo muab qee cov lus qhia!