I-load ang Iyong Arduino / ESP Config Webpage Mula sa Cloud: 7 Mga Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:14

Kapag lumilikha ng isang proyekto ng Arduino / ESP (ESP8266 / ESP32), maaari mo lamang hardcode ang lahat. Ngunit mas madalas kaysa sa hindi isang bagay na lumalabas at magtatapos ka ulit na muling ikabit ang iyong IoT-aparato sa iyong IDE. O nakakuha ka lamang ng maraming mga tao na nag-a-access sa pagsasaayos at nais mong magbigay ng isang UI sa halip na asahan silang maunawaan ng mga panloob na gawain.

Sasabihin sa iyo ng itinuturo na ito kung paano ilagay ang karamihan sa UI sa cloud sa halip na sa Arduino / ESP. Ang paggawa nito sa ganitong paraan ay makakatipid sa iyo sa paggamit ng espasyo at memorya. Ang isang serbisyo na nagbibigay ng libreng mga static na webpage ay partikular na angkop bilang "cloud", tulad ng Mga GitHub na Pahina, ngunit ang iba pang mga pagpipilian ay maaaring gumana din.

Ang pagbuo ng webpage sa ganitong paraan ay nangangailangan ng browser ng gumagamit na dumaan sa 4 na hakbang:

1. Hilingin ang root url mula sa Arduino / ESP
2. Makatanggap ng isang napaka-simpleng webpage, na nagsasabi sa:
3. Humiling ng isang JavaScript file mula sa cloud
4. Makatanggap ng code na bumubuo sa aktwal na pahina

Ang Instructable na ito ay magpapaliwanag din kung paano makipag-ugnay sa Arduino / ESP sa sandaling ang pahina ay handa na ayon sa mga hakbang sa itaas.

Ang code na nilikha sa pagtuturo na ito ay matatagpuan sa GitHub din.

Mga Pangangailangan

Ipinapalagay ng itinuturo na nakakuha ka ng access sa ilang mga materyal at ilang naunang kaalaman:

• Isang Arduino (na may mga network acces) / ESP
• Isang computer upang ikabit ang nasa itaas
• Ang pag-access sa WiFi na konektado sa internet
• Ang naka-install na Arduino IDE (para din sa ESP32)
• Alam mo kung paano mag-upload ng sketch sa iyong IoT-device
• Alam mo kung paano gamitin ang Git & GitHub

Hakbang 1: Simula Sa Isang Simpleng Webserver Sketch

Magsisimula kami nang simple hangga't maaari, at hayaang lumaki ito mula rito.

# isama

const char * ssid = "sa iyo"; const char * password = "yourpasswd"; WiFiServer server (80); void setup () {// Initialize serial and wait for port to open: Serial.begin (115200); habang (! Serial) {; // hintaying kumonekta ang serial port. Kailangan para sa katutubong USB port lamang} WiFi.begin (ssid, password); habang (WiFi.status ()! = WL_CONNected) {pagkaantala (500); Serial.print ("."); } Serial.println ("Konektado ang WiFi."); Serial.println ("IP address:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// makinig para sa mga papasok na kliyente WiFiClient client = server.available (); // makinig para sa mga papasok na client bool sendResponse = false; // set to true kung nais naming magpadala ng isang tugon String urlLine = ""; // gumawa ng isang String upang hawakan ang hiniling na URL kung (client) // kung makakakuha ka ng isang kliyente, {Serial.println ("Bagong Client."); // print a message out the serial port String currentLine = ""; // gumawa ng isang String upang hawakan ang papasok na data mula sa client habang (client.connected ()) // loop habang ang client ay konektado {if (client.available ()) // kung mayroong mga byte na babasahin mula sa client, {char c = client.read (); // basahin ang isang byte, pagkatapos kung (c == '\ n') // kung ang byte ay isang bagong character na character {// kung ang kasalukuyang linya ay blangko, nakakuha ka ng dalawang mga bagong character na magkakasunod. // na ang pagtatapos ng kahilingan ng HTTP ng kliyente, kaya magpadala ng isang tugon: kung (currentLine.length () == 0) {sendResponse = true; // maayos ang lahat! pahinga; // break out of the while loop} else // kung nakakuha ka ng isang bagong linya, pagkatapos i-clear ang currentLine: {if (currentLine.indexOf ("GET /")> = 0) // dapat ito ang linya ng URL {urlLine = currentLine; // save it for later use} currentLine = ""; // reset the currentLine String}} iba pa kung (c! = '\ r') // kung may nakuha ka pa ngunit isang character na bumalik sa karwahe, {currentLine + = c; // idagdag ito sa dulo ng kasalukuyangLine}}} kung (sendResponse) {Serial.print ("Hiniling ng kliyente"); Serial.println (urlLine); // HTTP header laging nagsisimula sa isang code ng pagtugon (hal. HTTP / 1.1 200 OK) // at isang uri ng nilalaman upang malaman ng kliyente kung ano ang darating, pagkatapos ay isang blangko na linya: client.println ("HTTP / 1.1 200 OK"); client.println ("Uri ng nilalaman: teksto / html"); client.println (); kung (urlLine.indexOf ("GET /")> = 0) // kung ang URL ay isang "/" {// ang nilalaman ng tugon na HTTP ay sumusunod sa header: client.println ("Hello world!"); } // Ang pagtugon sa HTTP ay nagtatapos sa isa pang blangko na linya: client.println (); } // isara ang koneksyon: client.stop (); Serial.println ("Client Disconnected."); }}

Kopyahin ang nasa itaas na code, o i-download ito mula sa gumawa sa GitHub.

Huwag kalimutang baguhin ang SSID at password upang tumugma sa iyong network.

Gumagamit ang sketch na ito ng kilalang Arduino

setup ()

at

loop ()

pagpapaandar Nasa

setup ()

pagpapaandar ang serial na koneksyon sa IDE ay naisimulan at sa gayon ay ang WiFi. Kapag ang WiFi ay konektado sa nasabing SSID ang IP ay naka-print at nagsimula ang webserver. Sa bawat pag-ulit ng

loop ()

pagpapaandar ang webserver ay naka-check para sa mga konektadong kliyente. Kung nakakonekta ang isang kliyente nabasa ang kahilingan at ang hiniling na URL ay nai-save sa isang variable. Kung ang lahat ay mukhang maayos, isang tugon mula sa server sa client ay ginaganap batay sa hiniling na URL.

BABALA! Ang code na ito ay gumagamit ng klase ng Arduino String upang mapanatili itong simple. Ang mga pag-optimize ng string ay hindi nasa loob ng saklaw ng pagtuturo na ito. Magbasa nang higit pa tungkol dito sa itinuturo tungkol sa Arduino String Manipulation Paggamit ng Minimal Ram.

Hakbang 2: Paglikha ng Remote JavaScript

Sasabihin ng Arduino / ESP sa browser ng mga bisita na i-load ang isang file na ito. Ang lahat ng natitira ay magagawa ng JavaScript code na ito.

Sa Instructable na ito gagamitin namin ang jQuery, hindi ito mahigpit na kinakailangan, ngunit gagawing mas madali ang mga bagay.

Ang file na ito ay kailangang ma-access mula sa web, isang static na server ng mga pahina ay sapat na upang magawa ito, halimbawa mga pahina ng GitHub. Kaya malamang na gugustuhin mong gumawa ng isang bagong lalagyan ng GitHub at lumikha ng isang

gh-pages

sangay Ilagay ang sumusunod na code sa loob ng a

.js

file sa repository sa tamang sangay.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (function () {var script = document.createElement ('script'); // lumikha ng isang elemento script.src = cdnjsURL + 'jquery / 3.2.1 / jquery.min.js'; // itakda ang src = "" katangian ng script.onload = function () // callback function, na tinawag sa sandaling ang jquery file ay na-load {$ = window.jQuery; // gawing naa-access ang jQuery bilang global $ variable init (); // tawagan ang init function}; dokumento. getE ElementByTagName ('head') [0].appendChild (script); // idagdag ang nilikha na tag sa dokumento, magsisimula itong mag-load ng jQuery lib}) (); function init () {// Tapos na ang paglo-load ng jQuery, magdagdag ng code dito sa paglaon…}

Kopyahin ang nasa itaas na code, o i-download ito mula sa gumawa sa GitHub.

Suriin kung naa-access ang iyong file. Sa kaso ng mga pahina ng GitHub pumunta sa https://username.github.io/repository/your-file.j… (palitan

username

,

imbakan

at

iyong-file.js

para sa tamang mga parameter).

Hakbang 3: Nilo-load ang Remote na File ng JavaScript Sa Mga Bumibisita sa Browser

Ngayon na nakuha na namin ang lahat ng na-set up na oras na upang mai-load ng webpage ang remote na JavaScript file.

Maaari mo itong gawin sa pamamagitan ng pagbabago ng linya 88 ng sketch mula sa

client.println ("Kamusta mundo!"); t

client.println ("");

(Baguhin ang

src

katangian upang ituro sa iyong sariling JavaScript file). Ito ay isang maliit na web page ng html, ang ginagawa lamang nito ay i-load ang JavaScript file sa browser ng mga bisita.

Ang nabago na file ay maaari ding matagpuan sa kaukulang gumawa sa GitHub.

I-upload ang naayos na sketch sa iyong Arduino / ESP.

Hakbang 4: Pagdaragdag ng Mga Bagong Sangkap sa Pahina

Ang isang walang laman na pahina ay walang silbi, kaya oras na ngayon upang magdagdag ng isang bagong elemento sa webpage. Sa ngayon ito ay magiging isang video sa YouTube. Sa halimbawang ito ang ilang mga jQuery code ay gagamitin upang magawa ito.

Idagdag ang sumusunod na linya ng code sa

sa loob()

pagpapaandar:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0'}). css ({width: '608px', taas: '342px'}). AppendTo ('body');

Lilikha ito ng

iframe

elemento, itakda ang tama

src

katangian at itakda ang laki gamit ang css at idagdag ang elemento sa katawan ng pahina.

Tinutulungan kami ng jQuery na madaling pumili at magbago ng mga elemento sa webpage, ilang pangunahing bagay na dapat malaman:

• $ ('katawan')

• pipili ng anumang mayroon nang elemento, ang ibang mga tagapili ng css ay maaari ding gamitin

• $(' ')

  lumilikha ng bago

• elemento (ngunit hindi idagdag ito sa dokumento)

• .appendTo ('. pangunahing')

• idinugtong ang napili / nilikha na elemento sa isang elemento na may css class na 'pangunahing'

• Ang iba pang pagpapaandar upang magdagdag ng mga elemento ay

  . mag-aplay ()

  ,

  .handa ()

  ,

  .reprepTo ()

  ,

  .insert ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .pagkatapos ()

  ,

  .geon ()

Tingnan ang kaukulang pagbibigay sa GitHub kung may anumang hindi malinaw.

Hakbang 5: Mga Elementong Pakikipag-ugnay

Ang isang video ay masaya, ngunit ang layunin ng pagtuturo na ito ay makipag-ugnay sa Arduino / ESP. Palitan natin ang video para sa isang pindutan na nagpapadala ng impormasyon sa Arduino / ESP at naghihintay din para sa isang tugon.

Kakailanganin natin ng

$('')

upang idagdag sa pahina, at maglakip ng isang tagapakinig dito. Tatawagan ng tagapakinig ang pagpapaandar ng callback kapag nangyari ang tinukoy na kaganapan:

$ (''). teksto ('isang pindutan'). sa ('pag-click', pagpapaandar ()

{// code dito ay papatayin kapag na-click ang pindutan}). appendTo ('body');

At magdagdag ng isang kahilingan sa AJAX sa pagpapaandar ng callback:

$.get ('/ ajax', pagpapaandar (data)

{// code dito ay papatayin kapag natapos ang kahilingan sa AJAX});

Kapag natapos na ang kahilingan, ang naibalik na data ay idaragdag sa pahina:

$('

').text (data).appendTo (' body ');

Bilang buod, lumilikha ang code sa itaas ng isang pindutan, idinagdag ito sa webpage, kapag na-click ang pindutan ay ipapadala ang isang kahilingan at idadagdag din ang tugon sa webpage.

Kung ito ang iyong unang pagkakataon na gumagamit ng mga callback baka gusto mong suriin ang nakatuon sa GitHub upang makita kung paano ang lahat ng bagay ay pugad.

Hakbang 6: Tumugon sa Interactive Element

Siyempre, ang kahilingan ng AJAX ay nangangailangan ng isang tugon.

Upang lumikha ng tamang tugon para sa

/ ajax

url kailangan naming magdagdag ng

iba pa kung ()

pagkatapos mismo ng pagsasara ng bracket ng kung pahayag na nagsuri sa

/

url

kung hindi man (urlLine.indexOf ("GET / ajax")> = 0)

{client.print ("Kumusta!"); }

Sa pagtataguyod sa GitHub Nagdagdag din ako ng isang counter upang maipakita sa browser na ang bawat kahilingan ay natatangi.

Hakbang 7: Konklusyon

Ito ang pagtatapos ng pagtuturo na ito. Mayroon ka ngayong Arduino / ESP na naghahatid ng isang maliit na webpage na nagsasabi sa browser ng bisita na mag-load ng isang JavaScript file mula sa cloud. Kapag na-load na ang JavaScript ay mabubuo nito ang natitirang nilalaman ng webpage na nagbibigay ng isang UI para makipag-usap ang gumagamit sa Arduino / ESP.

Nasa sa imahinasyon mo lamang na lumikha ng higit pang mga elemento sa webpage at i-save ang mga setting nang lokal sa ilang uri ng ROM (EEPROM / NVS / etc).

Salamat sa pagbabasa, at mangyaring huwag mag-atubiling magbigay ng ilang puna!