Stacja pogodowa ESP8266 wyświetlająca dane na stronie internetowej: 7 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:30

Uwaga: części tego samouczka mogą być dostępne w formacie wideo na moim kanale YouTube – Plemię Tech

W tej instrukcji pokażę, jak zrobić stację pogodową, która bezpośrednio wysyła dane do Twojej witryny. Dlatego będziesz potrzebować własnej domeny (np. msolonko.net). Na początek oto materiały, których będziesz potrzebować:

Rzeczy:

Huzzah z piór (16,95 USD)

Kabel Micro USB z danymi (1,99 USD)

Akumulator (25 USD): Później omówię, jakiej pojemności potrzebujesz przez jaki czas bez ładowania, abyś mógł wybrać żądaną pojemność. To jest link do tego, którego użyłem. Możesz także po prostu zasilać go z gniazdka.

1 fotorezystor

Niektóre inne rezystory - omówione później

Drut

Deska perforowana (5,59 USD) - opakowanie 20

Czujnik temperatury, ciśnienia i wilgotności BME280 (9,99 USD)

Jakieś pudełko; możesz go wydrukować w 3D, a ja pokażę ci mój projekt.

Hosting i domena, jeśli chcesz śledzić cały samouczek

Narzędzia:

Przecinak do drutu

Lutownica

Krok 1: Piórkowy kod Huzzah

Kod zostanie napisany w Arduino IDE, które można pobrać tutaj. Zanim zaczniemy, postępuj zgodnie z instrukcjami tutaj, aby skonfigurować Arduino IDE do pracy z Feather Huzzah. Postępuj również zgodnie z tymi instrukcjami, aby pobrać niezbędne biblioteki, aby czujnik BME działał. Plik z kodem jest załączony, a cały kod jest skomentowany, abyś mógł go zrozumieć. Gdy już na to spojrzysz, przejdź do następnego kroku, w którym przyjrzymy się kodowi, który otrzymuje dane z czujnika.

Krok 2: Odbieranie danych od Feather Huzzah

Do tej pory mam nadzieję, że rozumiesz, jak działa kod Arduino. Jeśli nie, wróć do kodu i przeczytaj moje komentarze (skomentowałem prawie każdą linijkę). Teraz napiszemy kod, który otrzyma dane. Tak jak poprzednio, wszystko to jest skomentowane. Językiem programowania używanym do tego jest PHP, o którym możesz przeczytać więcej tutaj.

Nasze dane będą przechowywane w Bazie Danych MySQL, o której możesz przeczytać więcej tutaj. Dane są przechowywane w tabelach zawierających wiersze i kolumny. Zanim napiszemy kod, powinniśmy stworzyć strukturę naszej tabeli na naszym hostingowym cPanel. Używam Arvixe Hosting, więc Twój cPanel może wyglądać inaczej. Spójrz na jeden z obrazków, aby zobaczyć, jak wygląda moja część. Po pierwsze, chcesz utworzyć nową bazę danych MySQL, jeśli jeszcze jej nie masz. Możesz do tego użyć kreatora. Istnieje wiele zasobów internetowych na ten temat, jeśli potrzebujesz pomocy.

Po skonfigurowaniu bazy danych przejdź do phpMyAdmin i wybierz swoją bazę danych. Utwórz tabelę o nazwie weather_data z 9 kolumnami. Sprawdź jeden z moich obrazów powyżej, aby zobaczyć, jaka powinna być każda kolumna (skopiuj nazwę, typ danych i wszystko inne dokładnie, jeśli chcesz użyć mojego kodu). Licznik będzie naszym kluczem podstawowym, a id pomoże nam zidentyfikować dzień, którego dotyczą dane (1: dzisiaj, 2: wczoraj, 3: wszystko inne). Ponieważ będziemy mieć dużo danych, będziemy usuwać niektóre z nich, gdy się starzeją. Dlatego potrzebujemy kolumny id. Pozostałe kolumny są dość oczywiste. W tej chwili Twoja tabela w Twojej bazie danych powinna wyglądać dokładnie tak, jak moja.

Teraz pobierz załączony kod i przeczytaj go wraz z moimi komentarzami. Po zakończeniu przejdź do następnego kroku.

Uwaga: po pobraniu kodu zmień jego nazwę na esp.php. Z jakiegoś powodu wystąpił błąd, gdy próbowałem przesłać plik PHP.

Tak w zasadzie będzie działał kod.

1. Zbieraj dane co 10 minut i wyświetlaj je

2. Po upływie dnia uśredniaj co 6 wartości (aby zaoszczędzić miejsce w bazie danych), aby co godzinę był punkt danych

3. Gdy minie kolejny dzień, uśrednij wszystkie pozostałe dane z tego dnia i zapisz je jako jeden punkt danych

W ten sposób będziemy mogli zobaczyć wahania światła, temperatury itp. w ciągu kilku miesięcy, nie rozpraszając się codziennymi wahaniami temperatury, światła itp.

Krok 3: Pobieranie danych z bazy danych do wyświetlenia

Więc teraz wymyśliliśmy, jak zbierać dane pogodowe i przesyłać je do naszej bazy danych. Teraz musimy być w stanie odzyskać go w użytecznej formie. Tak jak poprzednio, dołączyłem plik PHP getWeatherData.txt, który należy zapisać na swoim hoście i zmienić rozszerzenie nazwy pliku na.php zamiast.txt. Cały kod jest skomentowany. Przeczytaj go, aby go zrozumieć i przejdź dalej, gdy uznasz, że go zrozumiałeś. Jeśli masz pytania, zadaj je poniżej.

Krok 4: Konfiguracja bibliotek i kilka innych rzeczy

W tym projekcie jednym z frameworków, z których będziemy korzystać, jest AngularJS, który pomoże nam komunikować się z bazą danych i budować SPA (Single Page Application). Aby pobrać bibliotekę, przejdź do tego linku i pobierz wersję 1.64 lub wyższą. W tym samouczku użyłem 1.64, ale często pojawiają się nowe wersje, więc możesz użyć innej. Znajdź link na tej stronie, który kończy się tak: /VERSION/angular.min.js

Skopiuj link i zapisz go w bezpiecznym miejscu. Właśnie dostaliśmy link do biblioteki AngularJS. Będziesz go potrzebować w następnym kroku. Teraz na tej samej stronie znajdź link, który wygląda tak i skopiuj go również: /VERSION/angular-route.min.js

Trasa kątowa pomoże nam zarządzać naszym SPA i obsługiwać przełączanie widoków na stronie.

Chcemy móc ładnie wyświetlać wykresy naszych danych. W tym celu użyjemy biblioteki o nazwie ChartJS. Wejdź tutaj, wybierz najnowszą wersję i zapisz link, który kończy się tak: VERSION/Chart.bundle.min.js

Na koniec użyjemy biblioteki do układania stron o nazwie Bootstrap. Przejdź do tego linku do szybkiego startu i pozostaw to na razie otwarte. Gdy zaczniemy pisać kod klienta, będziesz mógł zastąpić moje stare linki nowszą wersją.

Teraz powinniśmy skonfigurować różne widoki dla naszej aplikacji. W katalogu na twoim hoście, w którym masz dwa poprzednie pliki (esp.php i getWeatherData.php), utwórz nowy folder o nazwie weather_views. Tutaj umieścimy wszystkie nasze strony, z których każda będzie odpowiadać identyfikatorowi z naszej bazy danych (1, 2 lub 3).

W folderze utwórz 3 pliki (day.html, old.html i wczoraj.html). Pobierz załączony kod i umieść go w tych plikach. Kod DAY. HTML jest skomentowany, abyś mógł zrozumieć, co się dzieje. Kod pozostałych 2 stron jest w zasadzie taki sam (komentowana jest inna część w starym.html).

Gdy skończysz z tym krokiem, przejdź do następnego, który jest najtrudniejszym krokiem programowania.

Krok 5: Główny plik HTML

W tym kroku utworzysz/edytujesz/odczytujesz główny plik HTML, w którym wszystko wyświetlisz. Zapisz załączony plik (który, jak zawsze, jest zakomentowany) jako espdata.html w tym samym katalogu co esp.php. Mam nadzieję, że dokonasz w nim zmian i zrozumiesz, co się naprawdę dzieje.

To jest większość twojego kodu, więc zdecydowanie ważne jest, aby zrozumieć, co się dzieje.

Krok 6: Test okablowania na płytce do krojenia chleba

Teraz przetestujemy, czy cały kod działa na naszym sprzęcie. Jeśli jeszcze tego nie zrobiłeś, przylutuj piny nagłówka do czujnika Feather Huzzah i czujnika BME280. Do każdego kroku dołączone jest zdjęcie.

1. Umieść piórko na płytce do krojenia chleba. Podłącz 3V do szyny + i GND do szyny -.

2. Podłącz czujnik VIN do szyny + i GND do szyny -.

3. Podłącz czujnik SDA do styku 4 na piórze. Podłącz SCL do pinu 5.

4. Umieść fotorezystor na płytce stykowej jednym wyprowadzeniem do szyny +.

5. Podłącz rezystor 4,7k do niepodłączonego przewodu fotorezystora. Podłącz niepodłączony przewód 4,7k do rezystora 2k. Podłącz niepodłączony koniec rezystora 2k do szyny - (GND).

6. Podłącz złącze rezystora 4,7k i 2k do pinu ADC (pin analogowy). Właśnie wykonaliśmy dzielnik napięcia, który dzieli maksymalne napięcie odczytane przez pin z 3,3V do mniej niż 1V. Możesz bawić się własną kombinacją, jeśli chcesz, ale pamiętaj, że napięcie podawane na pin analogowy musi być mniejsze niż 1V.

7. Na koniec połącz pin RST (reset) pióra z pinem 16 pióra (na zdjęciu pomarańczowy przewód). Ta konfiguracja pozwala Feather Huzzah przejść w tryb głębokiego uśpienia w celu oszczędzania energii.

Teraz gotowe! Prześlij kod do swojego pierzastego huzzah i miejmy nadzieję, że zobaczysz aktualizację swojej strony internetowej (tylko strona day.html). Jeśli nie, spróbuj użyć monitora szeregowego do rozwiązywania problemów lub zapytaj w komentarzach poniżej.

Krok 7: Stały projekt (opcjonalnie)

Zakładając, że wszystko działa, jeśli chcesz, możesz uczynić ten projekt bardziej trwałym. Nie będę tego tutaj pokazywał, ale wszystkie elementy można przylutować do płytki perforowanej, a następnie zamknąć je w pojemniku. Dołączę pliki IPT do kontenera 3D, którego użyłem poniżej, i kilka zdjęć na początek. Kontener jest przeznaczony do inspiracji, ponieważ prawdopodobnie będziesz chciał nadać mu bardziej osobisty charakter za pomocą innego projektu i tekstu. Baw się z dostosowywaniem! Powodzenia!