ESP8266 meteoroloģiskā stacija, kas parāda datus vietnē: 7 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:56

Piezīme. Dažas šīs apmācības daļas var būt pieejamas video formātā manā YouTube kanālā - Tech Tribe

Šajā pamācībā es parādīšu, kā izveidot laika staciju, kas tieši nosūta datus uz jūsu vietni. Tāpēc jums būs nepieciešams savs domēns (piemēram: msolonko.net). Lai sāktu, jums būs nepieciešami šādi materiāli:

Preces:

Spalvas Huzzah (16,95 ASV dolāri)

Mikro USB kabelis ar datiem (1,99 ASV dolāri)

Akumulators (25 ASV dolāri): es vēlāk apspriedīšu, kāda jauda jums ir nepieciešama, cik ilgi bez uzlādēšanas, lai jūs varētu izvēlēties vajadzīgo jaudu. Šī ir saite uz to, kuru izmantoju. To var arī vienkārši barot no kontaktligzdas.

1 Fotorezistors

Daži citi rezistori - apspriesti vēlāk

Vads

Perf Board (5,59 ASV dolāri) - iepakojumā 20

BME280 temperatūras, spiediena un mitruma sensors (9, 99 ASV dolāri)

Kaut kāda kastīte; Jūs varat izdrukāt 3D, un es jums parādīšu savu dizainu.

Tīmekļa mitināšana un domēns, ja vēlaties pilnībā sekot apmācībai

Rīki:

Stiepļu griezējs

Lodāmurs

1. solis: spalvu Huzzah kods

Kods tiks rakstīts Arduino IDE, kuru var lejupielādēt šeit. Pirms sākam, lūdzu, izpildiet šeit sniegtos norādījumus, lai iestatītu Arduino IDE darbam ar jūsu Feather Huzzah. Izpildiet arī šos norādījumus, lai lejupielādētu nepieciešamās bibliotēkas, lai BME sensors darbotos. Koda fails ir pievienots, un viss kods tiek komentēts, lai jūs to varētu saprast. Kad esat to aplūkojis, pārejiet pie nākamās darbības, kur mēs apskatīsim kodu, kas saņem sensora datus.

2. darbība. Datu saņemšana no Feather Huzzah

Tagad jūs, cerams, saprotat, kā darbojas Arduino kods. Ja nē, atgriezieties pie koda un izlasiet manus komentārus (es komentēju gandrīz katru rindiņu). Tagad mēs uzrakstīsim kodu, kas saņem datus. Tāpat kā iepriekš, tas viss tiek komentēts. Programmēšanas valoda, kas tiek izmantota šim nolūkam, ir PHP, par kuru vairāk varat lasīt šeit.

Mūsu dati tiks saglabāti MySQL datu bāzē, par kuru vairāk varat lasīt šeit. Dati tiek glabāti tabulās, kurās ir rindas un kolonnas. Pirms mēs rakstām kodu, mūsu hostinga cPanel vajadzētu izveidot mūsu tabulas struktūru. Es izmantoju Arvixe Hosting, tāpēc jūsu cPanel var izskatīties savādāk. Skatiet vienu no attēliem, lai redzētu, kā izskatās mana daļa. Pirmkārt, jūs vēlaties izveidot jaunu MySQL datu bāzi, ja jums tāda vēl nav. Šim nolūkam varat izmantot vedni. Ja jums nepieciešama palīdzība, par to ir daudz tiešsaistes resursu.

Kad esat izveidojis datu bāzi, dodieties uz vietni phpMyAdmin un atlasiet savu datu bāzi. Izveidojiet tabulu ar nosaukumu weather_data ar 9 kolonnām. Apskatiet vienu no maniem attēliem, lai redzētu, kādai jābūt katrai slejai (nokopējiet nosaukumu, datu tipu un visu pārējo, ja vēlaties izmantot manu kodu). Skaitītājs būs mūsu galvenā atslēga, un ID palīdzēs mums noteikt, kurā dienā dati attiecas (1: šodien, 2: vakar, 3: viss pārējais). Tā kā mums būs daudz datu, mēs tos izdzēsīsim, kad tie kļūs vecāki. Tāpēc mums ir nepieciešama kolonna id. Pārējās slejas ir diezgan pašsaprotamas. Šobrīd jūsu tabulai jūsu datu bāzē vajadzētu izskatīties tieši tāpat kā manējai.

Tagad lejupielādējiet pievienoto kodu un izlasiet to un manus komentārus. Kad esat pabeidzis, pārejiet pie nākamās darbības.

Piezīme: lejupielādējot kodu, pārdēvējiet to uz esp.php. Kādu iemeslu dēļ es saņēmu kļūdu, mēģinot augšupielādēt PHP failu.

Būtībā kods darbosies šādi.

1. Apkopojiet datus ik pēc 10 minūtēm un parādiet tos

2. Kad diena ir pagājusi, vidēji ik pēc 6 vērtībām (lai ietaupītu vietu DB), lai katrai stundai būtu datu punkts

3. Kad vēl viena diena ir pagājusi, aprēķiniet visus atlikušos šīs dienas datus un saglabājiet tos tikai kā vienu datu punktu

Tādā veidā mēs varēsim redzēt gaismas, temperatūras uc svārstības mēnešu laikā, nesākot traucēt ikdienas temperatūras svārstībām, gaismai utt.

3. darbība: datu izgūšana no datu bāzes uz displeju

Tāpēc tagad mēs esam sapratuši, kā apkopot laika apstākļu datus un augšupielādēt tos mūsu datu bāzē. Tagad mums ir jāspēj to izgūt izmantojamā formā. Tāpat kā iepriekš, es pievienoju PHP failu getWeatherData.txt, kas jums jāsaglabā savā saimniekdatorā un jāmaina faila nosaukuma paplašinājums uz.php, nevis.txt. Viss kods tiek komentēts. Izlasiet to, lai to saprastu, un turpiniet, kad domājat, ka esat to sapratis. Ja jums ir jautājumi, lūdzu, jautājiet zemāk.

4. darbība: bibliotēku iestatīšana un dažas citas lietas

Šim projektam viens no ietvariem, ko mēs izmantosim, ir AngularJS, kas palīdzēs mums sazināties ar datu bāzi un izveidot SPA (vienas lapas lietojumprogrammu). Lai iegūtu bibliotēku, dodieties uz šo saiti un lejupielādējiet versiju 1.64 vai jaunāku. Šajā apmācībā es izmantoju 1.64, bet bieži tiek izlaistas jaunas versijas, lai jūs varētu izmantot citu. Atrodiet šajā lapā saiti, kas beidzas šādi: /VERSION/angular.min.js

Kopējiet saiti un saglabājiet to drošā vietā. Mēs tikko saņēmām saiti uz AngularJS bibliotēku. Jums tas būs vajadzīgs nākamajam solim. Tagad tajā pašā lapā atrodiet saiti, kas izskatās šādi, un arī nokopējiet to: /VERSION/angular-route.min.js

Leņķiskais maršruts palīdzēs mums pārvaldīt mūsu SPA un apstrādāt skatu maiņu lapā.

Mēs vēlamies, lai mēs varētu labi parādīt savu datu diagrammas. Šim nolūkam mēs izmantosim bibliotēku ar nosaukumu ChartJS. Dodieties šeit, izvēlieties jaunāko versiju un saglabājiet saiti, kas beidzas šādi: VERSION/Chart.bundle.min.js

Visbeidzot, mēs izmantosim bibliotēku, lai izkārtotu lapas ar nosaukumu Bootstrap. Dodieties uz šo saiti uz ātro sākumu un pagaidām atstājiet to atvērtu. Tiklīdz mēs sāksim rakstīt klienta kodu, jūs varēsit aizstāt manas vecās saites ar jaunāko versiju.

Tagad mūsu lietojumprogrammai vajadzētu iestatīt dažādus skatus. Uzņēmēja direktorijā, kurā ir divi iepriekšējie faili (esp.php un getWeatherData.php), izveidojiet jaunu mapi ar nosaukumu weather_views. Šeit mēs ievietosim visas mūsu lapas, kas katra atbilst ID no mūsu datu bāzes (1, 2 vai 3).

Mapē izveidojiet 3 failus (day.html, old.html un vakar.html). Lejupielādējiet pievienoto kodu un ievietojiet to šajos failos. DAY. HTML kods tiek komentēts, lai jūs varētu saprast, kas notiek. Pārējo 2 lapu kods būtībā ir vienāds (tiek komentēta atšķirīga daļa old.html).

Kad esat pabeidzis šo darbību, pārejiet pie nākamā, kas ir visgrūtākais programmēšanas solis.

5. darbība: galvenais HTML fails

Šajā solī jūs izveidosit/rediģēsit/izlasīsit galveno HTML failu, kurā parādīsit visu. Saglabājiet pievienoto failu (kas, kā vienmēr, tiek komentēts) kā espdata.html tajā pašā direktorijā kā esp.php. Es ceru, ka jūs varat tajā veikt dažas izmaiņas un saprast, kas patiesībā notiek.

Šī ir lielākā daļa no jūsu koda, tāpēc noteikti ir svarīgi saprast, kas notiek.

6. darbība: elektroinstalācijas pārbaude uz maizes dēļa

Tagad mēs pārbaudīsim, vai viss kods darbojas ar mūsu aparatūru. Ja vēl neesat to izdarījis, lodējiet galvenes tapas uz Feather Huzzah un BME280 sensora. Katram solim tiek pievienots fotoattēls.

1. Novietojiet spalvu uz maizes dēļa. Pievienojiet 3V + sliedei un GND - sliedei.

2. Savienojiet sensora VIN ar + sliedi un GND uz sliedi.

3. Savienojiet sensoru SDA ar spalvas 4. tapu. Pievienojiet SCL 5. tapai.

4. Novietojiet fotorezistoru uz maizes dēļa ar vienu vadu uz + sliedi.

5. Pievienojiet 4.7k rezistoru fotorezistora nesavienotajam vadam. Pievienojiet 4.7k nesaistīto vadu 2k rezistoram. Pievienojiet 2k rezistora nesaistīto galu sliedei (GND).

6. Savienojiet 4.7k un 2k rezistora savienojumu ar kontakta ADC (analog pin). Mēs tikko izgatavojām sprieguma dalītāju, kas sadala maksimālo spriegumu, ko nolasījis tapa no 3,3 V līdz mazāk nekā 1 V. Ja vēlaties, varat spēlēties ar savu kombināciju, taču paturiet prātā, ka analogās tapas spriegumam jābūt mazākam par 1 V.

7. Visbeidzot pievienojiet spalvas RST (atiestatīšanas) tapu pie spalvas 16. tapas (oranža stieple fotoattēlā). Šī konfigurācija ļauj Feather Huzzah pāriet dziļā miega režīmā, lai taupītu enerģiju.

Tagad esat pabeidzis! Augšupielādējiet kodu savā spalvai un, cerams, varēsit redzēt savas tīmekļa lapas atjauninājumu (tikai lapu day.html). Ja nē, mēģiniet izmantot sērijas monitoru, lai novērstu problēmas vai jautājiet tālāk sniegtajos komentāros.

7. darbība. Pastāvīgs projekts (pēc izvēles)

Pieņemot, ka viss darbojas, ja vēlaties, varat šo projektu padarīt pastāvīgāku. Es šeit to nerādīšu, bet jūs varat pielodēt visas sastāvdaļas uz tāfeles un pēc tam tos ievietot traukā. Es pievienošu 3D konteinera IPT failus, kurus izmantoju zemāk, un dažus fotoattēlus, lai sāktu darbu. Konteiners ir paredzēts iedvesmai, jo jūs, iespējams, vēlēsities to padarīt personīgāku ar atšķirīgu dizainu un tekstu. Izklaidējieties ar pielāgošanu! Veiksmi!