Веб -сайттағы деректерді көрсететін ESP8266 метеостанциясы: 7 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:25

Ескерту: Бұл оқулықтың кейбір бөліктері менің YouTube каналымда - Tech Tribe бейне форматында қол жетімді болуы мүмкін

Бұл нұсқаулықта мен сіздің веб -сайтқа деректерді тікелей жіберетін метеостанцияны қалай жасау керектігін көрсетемін. Сондықтан сізге өзіңіздің жеке доменіңіз қажет болады (Мысалы: msolonko.net). Бастау үшін сізге қажет материалдар:

Элементтер:

Қауырсын Хузза ($ 16.95)

Деректері бар шағын USB кабелі ($ 1.99)

Батареялар жинағы ($ 25): Мен сізге кейін зарядтамай -ақ қанша уақыт қажет болатын сыйымдылықты талқылаймын, осылайша сіз қалаған сыйымдылықты таңдай аласыз. Бұл мен қолданған сілтеме. Сондай -ақ, оны розеткадан ғана қосуға болады.

1 Фоторезистор

Кейбір басқа резисторлар - кейінірек талқыланады

Сым

Perf Board ($ 5.59) - 20 пакет

BME280 температура, қысым және ылғалдылық сенсоры ($ 9.99)

Қандай да бір қорап; Сіз 3D басып шығаруға болады, мен сізге өз дизайнымды көрсетемін.

Егер веб -хостинг пен домен, егер сіз оқулықпен бірге жүргіңіз келсе

Құралдар:

Сым кескіш

Пісіру темірі

1 -қадам: Қауырсын Хузза коды

Код Arduino IDE -де жазылады, оны мына жерден жүктеуге болады. Жұмысқа кіріспес бұрын, Arduino IDE -ді мамық Хуззамен жұмыс жасау үшін осы жердегі нұсқауларды орындаңыз. Сондай -ақ, BME сенсорының жұмыс істеуі үшін қажетті кітапханаларды жүктеу үшін осы нұсқауларды орындаңыз. Код файлы қоса беріледі және барлық код түсінікті болу үшін түсіндіріледі. Сіз оны қарағаннан кейін сенсорлық деректерді алатын кодты қарастыратын келесі қадамға өтіңіз.

2 -қадам: Қауырсын Хуззадан деректер алу

Сіз қазір Arduino коды қалай жұмыс істейтінін түсінесіз деп үміттенесіз. Олай болмаса, кодқа оралыңыз және менің түсініктемелерімді оқыңыз (мен әр жолға дерлік түсініктеме бердім). Енді біз деректерді алатын кодты жазамыз. Бұрынғыдай бәрі түсіндіріледі. Бұл үшін бағдарламалау тілі PHP болып табылады, ол туралы толығырақ мына жерден оқи аласыз.

Біздің деректер MySQL мәліметтер базасында сақталады, оны осы жерден оқуға болады. Деректер жолдар мен бағандар бар кестелерде сақталады. Кодты жазбас бұрын, cPanel хостингінде кестеміздің құрылымын жасауымыз керек. Мен Arvixe хостингін қолданамын, сондықтан сіздің cPanel басқаша көрінуі мүмкін. Менің бөлігімнің қандай екенін білу үшін суреттердің бірін қараңыз. Біріншіден, сізде жаңа MySQL дерекқоры болмаса, оны жасағыңыз келеді. Ол үшін шеберді қолдануға болады. Егер сізге көмек қажет болса, бұл туралы көптеген онлайн -ресурстар бар.

Дерекқорды орнатқаннан кейін phpMyAdmin -ге өтіп, дерекқорды таңдаңыз. 9 бағаннан тұратын weather_data атты кесте құрыңыз. Әр баған қандай болу керектігін білу үшін жоғарыдағы суреттерімнің біреуінен кеңес алыңыз (егер менің кодты қолданғыңыз келсе, атауды, деректер түрін және басқаларын дәл көшіріңіз). Есептегіш біздің негізгі кілтіміз болады, ал идентификатор бізге деректердің қай күні тиесілі екенін анықтауға көмектеседі (1: бүгін, 2: кеше, 3: қалғандары). Бізде көптеген деректер болғандықтан, біз есейген сайын оның бір бөлігін өшіреміз. Сондықтан бізге идентификатор бағанасы қажет. Қалған бағандар өздігінен түсіндіріледі. Дәл қазір сіздің дерекқордағы кестеңіз дәл менікіне ұқсас болуы керек.

Енді бекітілген кодты жүктеп алып, оны және менің түсініктемелерімді оқып шығыңыз. Аяқтағаннан кейін келесі қадамға өтіңіз.

Ескерту: кодты жүктеген кезде оның атын esp.php деп өзгертіңіз. PHP файлын жүктеу кезінде мен қандай да бір себептермен қате таптым.

Бұл код негізінен жұмыс істейтін болады.

1. Әр 10 минут сайын деректерді жинап, көрсетіңіз

2. Күн сайын бір рет сайын әрбір 6 мәнді (ДБ кеңістігін үнемдеу үшін) әрбір сағат үшін деректер нүктесі болатындай етіп орташа

3. Тағы бір күн өткен соң, сол күнге қалған барлық деректерді ортаға салыңыз және оны тек бір деректер нүктесі ретінде сақтаңыз

Осылайша, біз температураның, жарықтың және т.

3 -қадам: Дерекқордан дисплейге деректерді алу

Енді біз ауа райы туралы ақпаратты қалай жинау керектігін білдік және оны дерекқорға жүктеуді шештік. Енді біз оны қолдануға жарамды түрде алуымыз керек. Бұрынғыдай мен getWeatherData.txt PHP файлын тіркедім, оны хостқа сақтап, файл атауының кеңейтімін.txt орнына.php етіп өзгерту керек. Барлық код түсіндіріледі. Мұны түсіну үшін оқып шығыңыз және сіз оны алдым деп ойласаңыз, әрі қарай жүріңіз. Егер сізде сұрақтар болса, төменде сұраудан тартынбаңыз.

4 -қадам: Кітапханаларды орнату және басқа нәрселер

Бұл жоба үшін біз қолданатын шеңберлердің бірі - AngularJS, ол бізге мәліметтер базасымен байланыс орнатуға және SPA (Бір беттік қосымша) құруға көмектеседі. Кітапхананы алу үшін мына сілтемеге өтіп, 1.64 немесе одан жоғары нұсқасын жүктеп алыңыз. Бұл оқулықта мен 1.64 қолдандым, бірақ жаңа нұсқалар жиі шығарылады, сондықтан сіз басқасын қолдана аласыз. Осы беттен аяқталатын сілтемені табыңыз: /VERSION/angular.min.js

Сілтемені көшіріп, қауіпсіз жерге сақтаңыз. Бізде AngularJS кітапханасына сілтеме болды. Сізге келесі қадам үшін қажет болады. Енді сол беттен келесідей сілтемені тауып, оны көшіріңіз: /VERSION/angular-route.min.js

Бұрыштық маршрут SPA-ны басқаруға және беттегі көріністерді ауыстыруға көмектеседі.

Біз өз деректеріміздің диаграммаларын жақсы көрсеткіміз келеді. Ол үшін біз ChartJS деп аталатын кітапхананы қолданамыз. Мұнда өтіңіз, соңғы нұсқаны таңдаңыз және келесідей аяқталатын сілтемені сақтаңыз: VERSION/Chart.bundle.min.js

Ақырында, біз Bootstrap деп аталатын беттерді орналастыру үшін кітапхананы қолданатын боламыз. Жылдам бастау үшін осы сілтемеге өтіңіз және оны әзірге ашық қалдырыңыз. Біз клиент кодын жаза бастағаннан кейін сіз менің ескі сілтемелерімді жаңа нұсқамен алмастыра аласыз.

Енді біз қосымшаның әр түрлі көріністерін орнатуымыз керек. Алдыңғы екі файлыңыз бар хосттың каталогында (esp.php және getWeatherData.php) weather_views деп аталатын жаңа қалта жасаңыз. Мұнда біз әрқайсысы дерекқордағы идентификаторға сәйкес келетін барлық беттерімізді орналастырамыз (1, 2 немесе 3).

Қалтада 3 файл жасаңыз (day.html, old.html және кеше.html). Қосылған кодты жүктеп алып, сол файлдарға салыңыз. Не болып жатқанын түсіну үшін DAY. HTML коды түсіндірілген. Қалған 2 беттің коды негізінен бірдей (old.html ішіндегі әр түрлі бөлік түсіндірілген).

Бұл қадамды аяқтағаннан кейін келесі қадамға өтіңіз, бұл ең қиын бағдарламалау қадамы.

5 -қадам: Негізгі HTML файлы

Бұл қадамда сіз барлығын көрсететін негізгі HTML файлын жасайсыз/өңдейсіз/оқисыз. Тіркелген файлды (әдеттегідей түсіндірілген) esp.php сияқты каталогта espdata.html ретінде сақтаңыз. Сіз оған өзгерістер енгізіп, не болып жатқанын түсінесіз деп үміттенемін.

Бұл сіздің кодыңыздың негізгі бөлігі, сондықтан не болып жатқанын түсіну маңызды.

6 -қадам: Электронды тақтадағы сымдарды сынау

Енді біз барлық кодтың біздің аппараттық құралмен жұмыс істейтінін тексереміз. Егер сізде әлі жоқ болса, Feather Huzzah және BME280 сенсорына дәнекерлеу түйінін бекітіңіз. Әр қадамға фотосурет қоса беріледі.

1. Қауырсынды тақтаға қойыңыз. 3V + рельсіне және GND - рельске қосыңыз.

2. VIN сенсорын + рельске және GND - рельске жалғаңыз.

3. SDA сенсорын қауырсынның 4 -ші түйрегіне жалғаңыз. SCL -ді 5 -ші пинге қосыңыз.

4. Фоторезисторды тақтаға + рельске баратын бір сыммен қойыңыз.

5. Фоторезистордың қосылмаған сымына 4.7к резисторды қосыңыз. 4.7к қосылмайтын сымды 2к резисторға қосыңыз. 2к резистордың қосылмайтын ұшын рельске (GND) қосыңыз.

6. 4.7к және 2к резистордың түйісуін ADC (аналогтық түйреуіш) штырына қосыңыз. Біз кернеу бөлгішін жасадық, ол істік оқылатын максималды кернеуді 3,3В -тан 1В -тан төменге бөледі. Қаласаңыз, сіз өзіңіздің комбинацияңызбен ойнай аласыз, бірақ аналогтық істікке берілетін кернеу 1В -тан төмен болуы керек екенін есте сақтаңыз.

7. Соңында, мамықтағы RST (қалпына келтіру) түйреуішін қауырсынға 16 түйреуішке қосыңыз (суреттегі қызғылт сары сым). Бұл конфигурация қуатты үнемдеу үшін Feather Huzzah -ға терең ұйқы режиміне өтуге мүмкіндік береді.

Енді сіз аяқтадыңыз! Кодты қауырсынға жүктеңіз, және сіз веб -беттің жаңартылғанын көресіз деп үміттенеміз (тек day.html беті). Олай болмаса, ақаулықтарды жою үшін төмендегі түсініктемелерде сериялық мониторды қолданып көріңіз.

7 -қадам: Тұрақты жоба (міндетті емес)

Егер бәрі жұмыс істейді деп ойласаңыз, қаласаңыз, сіз бұл жобаны тұрақты ете аласыз. Мен мұны мұнда көрсетпеймін, бірақ сіз барлық компоненттерді тақтаға дәнекерлей аласыз, содан кейін оларды контейнерге салыңыз. Мен төменде қолданған 3D контейнеріне IPT файлдарын және бірнеше фотосуреттерді тіркеймін. Контейнер шабытқа арналған, өйткені сіз оны басқа дизайнмен және мәтінмен жеке етіп жасағыңыз келуі мүмкін. Теңшеу арқылы көңілді болыңыз! Іске сәт!