Веб -сайтта маалыматтарды көрсөтүүчү ESP8266 Аба ырайы станциясы: 7 кадам

2025 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2025-01-23 14:51

Эскертүү: Бул окуу куралынын бөлүктөрү менин YouTube каналымда видео форматында жеткиликтүү болушу мүмкүн - Tech Tribe

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

Элементтер:

Хауза жүнү ($ 16.95)

Маалыматтары бар Micro USB кабели ($ 1.99)

Батарея топтому ($ 25): Мен кийинчерээк кандай кубаттуулукка заряддалбай канча убакыт керектигин талкуулайм, андыктан сиз каалаган кубаттуулукту тандай аласыз. Бул мен колдонгон шилтеме. Сиз аны жөн эле розеткадан кубаттай аласыз.

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

Башка резисторлор - кийинчерээк талкууланат

Зым

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

BME280 Температура, басым жана нымдуулук сенсору ($ 9.99)

Кандайдыр бир кутуча; Сиз 3D басып чыгара аласыз, мен сизге дизайнымды көрсөтөм.

Webhosting жана домен, эгер сиз үйрөткүч менен толук ээрчүүнү кааласаңыз

Куралдар:

Зым кескич

Кандооч

1 -кадам: мамык Huzzah Code

Код Arduino IDEде жазылат, аны бул жерден жүктөп алсаңыз болот. Баштоодон мурун, Arduino IDEди Feather Huzzah менен иштөө үчүн бул жердеги көрсөтмөлөрдү аткарыңыз. Ошондой эле, BME сенсорунун иштеши үчүн керектүү китепканаларды жүктөп алуу үчүн бул көрсөтмөлөрдү аткарыңыз. Код файлы тиркелет жана аны түшүнүү үчүн бардык код комментарийленген. Аны карагандан кийин, сенсордун маалыматын алган кодду карай турган кийинки кадамга өтүңүз.

2 -кадам: Feather Huzzahдан маалымат алуу

Азырынча, сиз Arduino коду кантип иштээрин түшүнөсүз деп үмүттөнөбүз. Болбосо, кодго кайтып келип, менин комментарийлеримди окуңуз (дээрлик ар бир сапка комментарий жаздым). Эми биз маалыматты алган кодду жазабыз. Мурдагыдай эле, баарына комментарий берилет. Бул үчүн колдонулган программалоо тили PHP болуп саналат, аны бул жерден окуй аласыз.

Биздин маалыматтар MySQL маалымат базасында сакталат, аны бул жерден окуй аласыз. Маалыматтар саптары жана мамылары бар таблицаларда сакталат. Биз кодду жазардан мурун, столубуздун структурасын cPanel хостингибизде түзүшүбүз керек. Мен Arvixe Hosting колдонуп жатам, андыктан сиздин CPanel башкача көрүнүшү мүмкүн. Менин бир бөлүгүм кандай экенин билүү үчүн сүрөттөрдүн бирине кайрылыңыз. Биринчиден, сизде жок болсо, жаңы MySQL маалымат базасын түзгүңүз келет. Бул үчүн чеберди колдонсоңуз болот. Жардамга муктаж болсоңуз, бул боюнча көптөгөн онлайн ресурстары бар.

Маалыматтар базасын орноткондон кийин, phpMyAdminге өтүп, маалымат базаңызды тандаңыз. Weather_data аттуу таблицаны 9 тилкеден түзүңүз. Ар бир мамыча кандай болушу керектигин билүү үчүн жогорудагы сүрөттөрүмдүн бирине кайрылыңыз (менин кодумду колдонууну кааласаңыз, атын, маалымат түрүн жана башка бардык нерсени так көчүрүңүз). Эсептегич биздин негизги ачкычыбыз болот жана идентификатор бизге маалыматтын кайсы күнү тиешелүү экенин аныктоого жардам берет (1: бүгүн, 2: кечээ, 3: калгандары). Бизде көп маалыматтар болгондуктан, анын кээ бирлери жаш өткөн сайын өчүрүлөт. Ошондуктан бизге id тилкеси керек. Калган мамычалар абдан түшүнүктүү. Азыр, сиздин маалымат базаңыздагы стол меникине окшош болушу керек.

Эми, тиркелген кодду жүктөп алып, аны жана менин комментарийлеримди окуп чыгыңыз. Бүткөндөн кийин, кийинки кадамга өтүңүз.

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

Бул негизинен код кантип иштейт.

1. Ар 10 мүнөт сайын маалыматтарды чогултуп, көрсөтүңүз

2. Күнүгө бир жолу, орточо ар бир 6 баалуулук (DB мейкиндигин сактоо үчүн), ошондуктан ар бир саат үчүн маалымат пункту бар

3. Дагы бир күн өткөндөн кийин, ошол күнү калган бардык маалыматтарды орточо эсепке алып, бир гана маалымат чекити катары сактаңыз

Ошентип, биз айдын ичинде жарыктын, температуранын ж.

3 -кадам: Маалыматтар базасынан дисплейге чыгуу

Ошентип, азыр биз аба ырайы тууралуу маалыматты кантип чогултууну жана аны базабызга жүктөөнү ойлодук. Эми биз аны колдонууга жарактуу түрдө кайтарып алышыбыз керек. Мурдагыдай эле, мен PHP файлын тиркедим getWeatherData.txt, сиз хостуңузга сактап, файл аталышынын кеңейтүүсүн.txt ордуна.php деп өзгөртүшүңүз керек. Бардык код комментарийленген. Түшүнүү үчүн муну окуп, түшүндүм деп ойлогондон кийин улантыңыз. Суроолоруңуз болсо, төмөндөн сураңыз.

4 -кадам: Китепканаларды орнотуу жана башка нерселер

Бул долбоор үчүн биз колдоно турган алкактардын бири - бул AngularJS, ал бизге маалымат базасы менен байланышууга жана SPA (Single Page Application) түзүүгө жардам берет. Китепканага ээ болуу үчүн бул шилтемеге кирип, 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 файлын түзөтөсүз/окуйсуз. Тиркелген файлды (адаттагыдай эле комментарийленген) espdata.html катары esp.php менен бир каталогдо сактаңыз. Мен ага бир аз өзгөртүүлөрдү киргизип, чынында эмне болуп жатканын түшүнө аласыз деп үмүттөнөм.

Бул сиздин кодуңуздун негизги бөлүгү, андыктан эмне болуп жатканын түшүнүү маанилүү.

6 -кадам: Нан тактасында зымдарды текшерүү

Эми биз бардык коддор биздин жабдыктарыбыз менен иштээрин текшеребиз. Эгерде сизде азырынча жок болсо, анда Feather Huzzah жана BME280 сенсорунун үстүндөгү төөнөгүчтөр. Ар бир кадам үчүн сүрөт тиркелет.

1. Мамыктын үстүнө мамык кой. 3V + темир жолуна жана GND - темир жолуна туташтырыңыз.

2. VIN сенсорун + темир жолуна жана GNDди - темир жолуна туташтырыңыз.

3. SDA сенсорун мамыкка 4 -пинге туташтырыңыз. SCLди 5 -пинге туташтырыңыз.

4. Фоторезисторду нанга + рельске бир коргошун менен коюңуз.

5. Фоторезистордун туташпаган туташуусуна 4.7k каршылыгын туташтырыңыз. 4.7k туташпаган коргошун 2k каршылыкка туташтырыңыз. 2k каршылыгынын туташпаган учун темир жолго (GND) туташтырыңыз.

6. 4.7k жана 2k каршылыгынын бириктирилген жерин ADC (аналогдук пин) менен туташтырыңыз. Биз жөн гана чыңалуу бөлүштүргүчтү жасадык, ал пиндин окулган максималдуу чыңалуусун 3.3Vдан 1Vга чейин бөлөт. Кааласаңыз, өзүңүздүн айкалышыңыз менен ойной аласыз, бирок аналогдук пинге берилген чыңалуу 1Вдан аз болушу керек экенин унутпаңыз.

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

Эми бүттүңүз! Кодду мамык huzzahка жүктөңүз, жана сиз веб -баракчаңыздын жаңыртылышын көрө аласыз (day.html баракчасы гана). Болбосо, көйгөйлөрдү чечүү үчүн сериялык мониторду колдонуп көрүңүз же төмөндөгү комментарийлерде сураңыз.

7 -кадам: Туруктуу долбоор (милдеттүү эмес)

Баары иштейт деп ойлосоңуз, эгер кааласаңыз, бул долбоорду туруктуу кыла аласыз. Мен муну бул жерде көрсөтпөйм, бирок сиз бардык компоненттерди перфорация тактасына кошуп, анан контейнерге салып койсоңуз болот. Мен баштоо үчүн мен төмөндө колдонгон 3D контейнерге IPT файлдарын жана бир нече сүрөттөрдү тиркейм. Контейнер илхам үчүн арналган, анткени сиз аны башка дизайн жана текст менен жекече кылгыңыз келет. Ыңгайлаштыруу менен көңүл ачыңыз! Жакшы ийгилик!