ESP8266 Weather Station na Nagpapakita ng Data sa isang Website: 7 Mga Hakbang

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

Tandaan: Ang mga bahagi ng tutorial na ito ay maaaring magagamit sa format ng video sa aking YouTube Channel - Tech Tribe

Sa itinuturo na ito, ipapakita ko kung paano gumawa ng isang istasyon ng panahon na direktang nagpapadala ng data sa iyong website. Samakatuwid, kakailanganin mo ang iyong sariling domain (Hal: msolonko.net). Upang magsimula, narito ang mga materyales na kakailanganin mo:

Mga item:

Feather Huzzah ($ 16.95)

Micro USB cable na may Data ($ 1.99)

Battery Pack ($ 25): Pag-uusapan ko sa paglaon kung anong kapasidad ang kailangan mo para sa kung anong dami ng oras nang hindi nag-recharge, upang mapili mo ang nais mong kapasidad. Ito ay isang link sa ginamit ko. Maaari mo ring mai-power ito mula sa isang outlet.

1 Photoresistor

Ang ilang iba pang mga resistors - tinalakay sa paglaon

Kawad

Perf Board ($ 5.59) - Pack ng 20

BME280 Temperatura, Presyon, at Humidity Sensor ($ 9.99)

Ilang uri ng kahon; maaari mong 3D i-print ang isa, at ipapakita ko sa iyo ang aking disenyo.

Webhosting at domain, kung nais mong sundin kasama ang tutorial

Mga tool:

Pamutol ng wire

Panghinang

Hakbang 1: Feather Huzzah Code

Isusulat ang code sa Arduino IDE, na maaaring ma-download dito. Bago kami magsimula, mangyaring sundin ang mga tagubilin dito upang mai-set up ang Arduino IDE upang gumana sa iyong Feather Huzzah. Gayundin, sundin ang mga tagubiling ito upang i-download ang mga kinakailangang aklatan upang maandar ang sensor ng BME. Nakalakip ang code file, at ang lahat ng code ay nagkomento upang maunawaan mo ito. Kapag tiningnan mo ito, magpatuloy sa susunod na hakbang kung saan titingnan namin ang code na tumatanggap ng data ng sensor.

Hakbang 2: Pagtanggap ng Data Mula sa Feather Huzzah

Sa ngayon, inaasahan mong naiintindihan mo kung paano gumagana ang Arduino code. Kung hindi, bumalik sa code at basahin ang aking mga komento (nagkomento ako halos bawat linya). Isusulat namin ang code na tumatanggap ng data. Tulad ng dati, lahat ng ito ay nagkomento. Ang wika ng programa na ginagamit para dito ay ang PHP, na maaari mong mabasa ang tungkol dito.

Ang aming data ay maiimbak sa isang MySQL Database, na maaari mong mabasa ang tungkol dito. Ang data ay nakaimbak sa mga talahanayan na may mga hilera at haligi. Bago namin isulat ang code, dapat naming gawin ang istraktura ng aming talahanayan sa aming hosting cPanel. Gumagamit ako ng Arvixe Hosting, kaya't maaaring magkakaiba ang hitsura ng iyong cPanel. Sumangguni sa isa sa mga imahe upang makita kung ano ang hitsura ng bahagi ng minahan. Una, nais mong lumikha ng isang bagong database ng MySQL kung wala ka pa nito. Maaari mong gamitin ang wizard para doon. Maraming mga mapagkukunan sa online dito kung kailangan mo ng tulong.

Kapag mayroon kang isang naka-set up na database, pumunta sa phpMyAdmin at piliin ang iyong database. Lumikha ng isang talahanayan na pinangalanang weather_data na may 9 na haligi. Kumunsulta sa isa sa aking mga imahe sa itaas upang makita kung ano ang dapat na bawat haligi (kopyahin ang pangalan, datatype, at lahat nang iba pa kung nais mong gamitin ang aking code). Ang counter ay magiging aming pangunahing susi at tutulungan kami ng id na makilala kung anong araw ang nauugnay sa data (1: ngayon, 2: kahapon, 3: lahat ng iba pa). Dahil magkakaroon kami ng maraming data, tatanggalin namin ang ilan dito habang tumatanda. Iyon ang dahilan kung bakit kailangan namin ang haligi ng id. Ang natitirang mga haligi ay medyo nagpapaliwanag sa sarili. Sa ngayon, ang iyong talahanayan sa iyong database ay dapat magmukhang eksaktong katulad ng sa akin.

Ngayon, i-download ang nakalakip na code at basahin ito at ang aking mga komento. Kapag tapos na, magpatuloy sa susunod na hakbang.

Tandaan: kapag na-download mo ang code, palitan ang pangalan nito sa esp.php. Sa ilang kadahilanan, nakakuha ako ng isang error nang subukan kong mag-upload ng isang PHP file.

Ito ay karaniwang kung paano gagana ang code.

1. Kolektahin ang data bawat 10 minuto at ipakita ito

2. Kapag lumipas ang isang araw, average ang bawat 6 na halaga (upang makatipid ng puwang ng DB) upang mayroong isang data point para sa bawat oras

3. Kapag lumipas ang isa pang araw, average ang lahat ng natitirang data para sa araw na iyon at iimbak ito bilang isang punto lamang ng data

Sa ganitong paraan, makakakita tayo ng mga pagbabagu-bago sa ilaw, temperatura atbp sa paglipas ng tagal ng buwan nang hindi nagsisimulang magulo ng pang-araw-araw na pagbagu-bago sa temperatura, ilaw, atbp.

Hakbang 3: Kinukuha ang Data Mula sa Database upang Maipakita

Kaya't nalaman na namin kung paano makolekta ang data ng panahon at mai-upload ito sa aming database. Ngayon dapat naming makuha ito sa isang magagamit na form. Tulad ng dati, nag-attach ako ng isang PHP file getWeatherData.txt na dapat mong i-save sa iyong host at palitan ang filename extension sa.php sa halip na.txt. Ang lahat ng mga code ay nagkomento. Basahin ito upang maunawaan ito at magpatuloy sa sandaling sa palagay mo nakuha mo na. Kung mayroon kang mga katanungan, huwag mag-atubiling magtanong sa ibaba.

Hakbang 4: Pag-setup ng Mga Aklatan at Ilang Ibang mga Bagay

Para sa proyektong ito, ang isa sa mga balangkas na gagamitin namin ay AngularJS, na makakatulong sa amin na makipag-usap sa database at bumuo ng isang SPA (Single Page Application). Upang makuha ang library, pumunta sa link na ito at mag-download ng isang bersyon na 1.64 o mas mataas. Para sa tutorial na ito, gumamit ako ng 1.64 ngunit ang mga bagong bersyon ay madalas na pinakawalan upang maaari mong gamitin ang ibang. Maghanap ng isang link sa pahinang iyon na nagtatapos tulad nito: /VERSION/angular.min.js

Kopyahin ang link at i-save ito sa isang lugar na ligtas. Nakakuha lang kami ng isang link para sa AngularJS library. Kakailanganin mo ito para sa susunod na hakbang. Ngayon, sa parehong pahina maghanap ng isang link na katulad nito at kopyahin din ito: /VERSION/angular-route.min.js

Tutulungan kami ng ruta ng angular na pamahalaan ang aming SPA at hawakan ang paglipat ng mga pagtingin sa pahina.

Nais naming maipakita nang maayos ang mga tsart ng aming data. Para dito gagamitin namin ang isang silid-aklatan na tinatawag na ChartJS. Pumunta dito, piliin ang pinakabagong bersyon at i-save ang isang link na nagtatapos tulad nito: VERSION / Chart.bundle.min.js

Panghuli, gagamit kami ng isang silid-aklatan upang mai-layout ang mga pahinang tinatawag na Bootstrap. Pumunta sa link na ito sa Mabilis na Pagsisimula at iwanan itong bukas sa ngayon. Kapag nagsimula na kaming magsulat ng client code, mapapalitan mo ang aking mga dating link sa isang mas bagong bersyon.

Ngayon, dapat naming i-set up ang iba't ibang mga pagtingin para sa aming aplikasyon. Sa direktoryo sa iyong host kung saan mayroon kang nakaraang dalawang mga file (esp.php at getWeatherData.php), lumikha ng isang bagong folder na pinangalanang Weather_views. Dito, ilalagay namin ang lahat ng aming mga pahina na bawat isa ay tumutugma sa isang id mula sa aming database (1, 2, o 3).

Sa folder, lumikha ng 3 mga file (day.html, old.html, at kahapon.html). I-download ang nakalakip na code at ilagay ito sa mga file na iyon. Ang code para sa DAY. HTML ay nagkomento upang maunawaan mo kung ano ang nangyayari. Ang code para sa iba pang 2 mga pahina ay karaniwang pareho (magkakaibang bahagi sa old.html ay nagkomento).

Kapag tapos ka na sa hakbang na ito, magpatuloy sa susunod, na kung saan ay ang pinakamahirap na hakbang sa pagprograma.

Hakbang 5: Pangunahing File ng HTML

Sa hakbang na ito, gagawin mong / i-edit / babasahin ang pangunahing file ng HTML kung saan ipapakita mo ang lahat. I-save ang naka-attach na file (na, tulad ng lagi, ay nagkomento) bilang espdata.html sa parehong direktoryo tulad ng esp.php. Inaasahan kong makakagawa ka ng ilang mga pagbabago dito at maunawaan kung ano talaga ang nangyayari.

Ito ang karamihan ng iyong code, kaya't tiyak na mahalagang maunawaan kung ano ang nangyayari.

Hakbang 6: Pagsubok sa Mga Kable sa isang Breadboard

Ngayon ay susubukan namin na ang lahat ng code ay gumagana sa aming hardware. Kung hindi mo pa nagagawa, maghinang ang mga pin ng header sa Feather Huzzah at sa sensor ng BME280. Para sa bawat hakbang, nakakabit ang isang larawan.

1. Ilagay ang balahibo sa breadboard. Ikonekta ang 3V sa + riles at GND sa - riles.

2. Ikonekta ang sensor VIN sa + riles at GND sa - riles.

3. Ikonekta ang sensor SDA sa pin 4 sa feather. Ikonekta ang SCL sa pin 5.

4. Ilagay ang photoresistor sa breadboard na may isang lead na papunta sa + riles.

5. Ikonekta ang isang 4.7k risistor sa hindi konektadong tingga ng photoresistor. Ikonekta ang hindi konektadong tingga ng 4.7k sa isang 2k risistor. Ikonekta ang hindi konektadong dulo ng 2k risistor sa - riles (GND).

6. Ikonekta ang magkasanib na 4.7k at 2k risistor upang i-pin ang ADC (analog pin). Gumawa lang kami ng isang divider ng boltahe na hinahati ang maximum na boltahe na nabasa ng pin mula sa 3.3V hanggang mas mababa sa 1V. Maaari kang maglaro sa paligid ng iyong sariling kumbinasyon kung nais mo ngunit tandaan na ang boltahe na ibinigay sa analog pin ay dapat mas mababa sa 1V.

7. Panghuli, ikonekta ang RST (reset) na pin sa balahibo upang i-pin ang 16 sa feather (orange wire sa larawan). Pinapayagan ng pagsasaayos na ito ang Feather Huzzah na pumasok sa deep mode ng pagtulog upang makatipid ng kuryente.

Ngayon tapos ka na! I-upload ang code sa iyong feather huzzah, at sana, makita mo ang pag-update ng iyong webpage (pahina lamang ng araw na html). Kung hindi, subukang gamitin ang Serial monitor upang mag-troubleshoot o magtanong sa mga komento sa ibaba.

Hakbang 7: Permanenteng Proyekto (Opsyonal)

Ipagpalagay na gumagana ang lahat, kung nais mo, maaari mong gawing mas permanente ang proyektong ito. Hindi ko ito ipapakita dito, ngunit maaari mong solder ang lahat ng mga bahagi sa isang perf board at pagkatapos ay isama ang mga ito sa isang lalagyan. Ikakabit ko ang mga file ng IPT para sa lalagyan na 3D na ginamit ko sa ibaba at ilang larawan upang makapagsimula ka. Ang lalagyan ay inilaan para sa inspirasyon dahil marahil ay gugustuhin mong gawin itong mas personal na may iba't ibang disenyo at teksto. Maglibang sa pagpapasadya! Good luck!