Jak Wyświetlić Temperaturę i Wilgotność z Czujnika na Stronie Internetowej – Poradnik

Szczegóły: Opublikowano: 05. December 2025

W dzisiejszych czasach czujniki temperatury i wilgotności są wszechobecne, znajdując zastosowanie w niemal każdym budynku. Od technologii, w jakich są wykonane, po zakresy pomiarowe i dokładności, istnieje wiele parametrów, które można odczytać z ich not katalogowych. W tym artykule pokażemy, jak łatwo można uruchomić popularny i tani czujnik XY-MD02 (SHT20) oraz jak odczytywać dane z czujnika podłączonego do ESP8266 na stronie WWW.

Czujnik XY-MD02 (SHT20)

Czujnik XY-MD02 (SHT20) jest precyzyjnym czujnikiem temperatury i wilgotności, który może być stosowany zarówno w środowiskach przemysłowych, jak i w automatyce budynkowej. Elementem wykonawczym jest czujnik SHT20.

Parametry:

Szeroki zakres napięcia zasilania: od 5 do 30V DC
Pomiar temperatury: od -20 do 60°C
Pomiar wilgotności: od 0 do 100% RH
Komunikacja: interfejs RS485, zgodny ze standardem MODBUS RTU

Komunikacja jest zgodna ze standardem MODBUS RTU, więc potrzebujemy wiedzieć, jaki adres ma nasz czujnik, jaki jest numer komendy odczytu rejestru i w jakich rejestrach przechowywane są interesujące nas dane. Domyślnie prędkość transmisji ustawiona jest na 9600 BAUD, 1 bit stopu, brak bitu parzystości. Jeśli chodzi o warstwę fizyczną potrzebujemy jedynie czterech przewodów (dwa komunikacyjne i dwa zasilające).

Konfiguracja w Programie

Pierwszym krokiem, którego nie będę tutaj opisywał jest stworzenie projektu i podłączenie przewodu do programowania. Kolejnym krokiem będzie ustawienie zworek definiujących kierunek portu komunikacyjnego, które znajdziemy pod obudową sterownika. Następnie klikamy prawym przyciskiem myszy na nasz slot 2 i dodajemy nasz czujnik (jako slave). W oknie, które się pojawi zmieniamy nazwę, ustawiamy adres na 1, resztę parametrów zostawiamy domyślnie.

Przeczytaj także: Wpływ mas powietrza na klimat

Kolejnym krokiem będzie stworzenie dwóch zmiennych przechowujących dane odebrane z czujnika, które wykorzystamy w naszym programie. Cała komunikacja odbywa się w tle głównego programu cyklicznie. Przy zmiennej „Temperatura” ustawiamy typ INT, register 1, Read function 0x04, Write function No, liczba rejestrów ustawiamy na 1 a pozostałe parametry zostają domyślnie.

Dalej przechodzimy do okna naszego programu i jedyne co pozostaje nam zrobić to odczytać zmienną, podzielić ją przez 10 i wyświetlić na wyświetlaczu LCD. Ostatnim krokiem jest konfiguracja wyświetlacza w „Display managerze”.

Odczyt Danych z Czujnika Podłączonego do ESP8266 na Stronie WWW

Spore zainteresowanie społeczeństwa IoT (Internet of Things - Internet Rzeczy) nie ominęło również producentów mikrokontrolerów, którzy coraz częściej dodają do swoich procesorów moduły obsługujące bezprzewodowe technologie komunikacyjne, takie jak Bluetooth czy Wi-Fi. W efekcie otrzymaliśmy płytki rozwojowe, takie jak Arduino MKR Wi-Fi 1010, Raspberry Pi Zero 2 W czy ESP8266 na płytce NodeMCU.

Mikrokontrolery tego typu cieszą się ogromną popularnością, pozwalając pasjonatom elektroniki realizować nowe projekty, od prostych czujników temperatury umożliwiających zdalne monitorowanie warunków w domu, po aplikacje sterujące roletami czy oświetleniem w mieszkaniu.

Wykorzystane Komponenty

ESP NodeMCU V2 ESP-12E: Płytka rozwojowa będąca wersją ESP8266, produkcji firmy Espressif Systems. Działa na 32-bitowym procesorze i została wyposażona w moduł ESP-12E z WiFi 2,4 GHz. To pozwala na połączenie się z domową siecią internetową.
Czujnik temperatury i wilgotności - DHT11: Bardzo prosty czujnik temperatury oraz wilgotności. Zawiera termistor NTC (do pomiaru temperatury) oraz pojemnościowy czujnik wilgotności.

Czym Jest Wi-Fi?

Wi-Fi to technologia bezprzewodowa umożliwiająca przesyłanie informacji na duże odległości. ESP8266, którego będziemy używać, działa na paśmie 2,4 GHz. Pasmo 2,4 GHz charakteryzuje się niższą prędkością przesyłu danych, ale za to większym zasięgiem niż pasma o wyższej częstotliwości.

Przeczytaj także: Praktyczne wskazówki dotyczące pomiaru temperatury i wilgotności

Czujnik DHT11 - Moduł Ułatwiający Życie

Moduł DHT11 zawiera czujnik oraz rezystor. Rezystor podłącza się między źródłem napięcia a pinem DATA, aby uzyskać stabilny, prawidłowy odczyt. Dodatkowo czujnik ma 4 piny, a moduł tylko 3. Dzieje się tak, ponieważ czujnik posiada pin NC (Not Connected), który w module jest ignorowany.

DHT11 mierzy temperaturę w zakresie od 0 do 50°C z dokładnością ±2°C oraz wilgotność w zakresie 20-90% RH ±5%. Nasz moduł mierzy temperaturę przy pomocy termistora typu NTC (wraz ze wzrostem temperatury rezystancja spada), natomiast wilgotność jest mierzona pojemnościowym czujnikiem wilgotności.

Jak Stworzyć Swój Serwer z ESP8266 w Arduino IDE?

Aby stworzyć serwer z ESP8266 w Arduino IDE, najpierw musimy zintegrować naszą płytkę z tym środowiskiem. Jeśli jeszcze tego nie zrobiłeś, znajdziesz instrukcję w artykule Jak rozpocząć programowanie ESP8266 w Arduino IDE.

Połączenie z WiFi: Mikrokontroler musi znać nazwę sieci (SSID) oraz hasło.

Edycja funkcji setup(): Standardem w Arduino jest rozpoczęcie od funkcji void setup() (operacje wykonują się tylko raz), a następnie wykorzystanie funkcji void loop() (operacje powtarzają się). W tym fragmencie inicjalizujemy port szeregowy (nie jest to niezbędny krok jednak ułatwia debugowanie i zrozumienie jak działa nasz kod) oraz rozpoczynamy proces łączenia z Internetem. Pętla while będzie wykonywana, dopóki ESP nie połączy się z naszym WiFi. W trakcie łączenia będziemy wyświetlać kropkę co pół sekundy.

Przeczytaj także: Wpływ nawilżacza na temperaturę

Jak Podłączyć DHT11 do ESP8266 NodeMCU V2?

Aby podłączyć DHT11 do ESP8266 NodeMCU V2 należy pin sygnałowy (oznaczony literą S) oraz dwa piny odpowiedzialne za zasilanie: + (moduł może być zasilany napięciem od 3V do 5,5V) oraz - (standardowo 0V).

Piny NodeMCU	Piny DHT11
3v3	+ lub nieoznaczony
GND	-
Pin np. D2	S

Nasz mikrokontroler komunikuje się z czujnikiem DHT, ale to my musimy wskazać o jaki pin konkretnie nam chodzi. Dobrą praktyką będzie zdefiniowanie tego pinu na samym początku. Warto pamiętać, że oznaczenia na płytkach nie muszą być zgodne z oznaczeniami na mikrokontrolerze, a to z nim musimy się porozumieć.

GPIO to piny naszego ESP8266, a więc D2 na płytce to GPIO4, do którego odnosimy się w kodzie. Gdybyśmy wybrali pin D1 na płytce, do jakiego pinu powinniśmy się odnieść w kodzie? Do pinu 5, ponieważ pin D2 na naszej płytce NodeMCU odnosi się do GPIO5 na mikrokontrolerze ESP8266.

Delay (przerwa w wykonywaniu kodu) jest tutaj po to, aby czujnik mógł ustabilizować sygnał. Bez niego pierwszy odczyt może być błędny. Kod odpowiadający za łączenie z WiFi zostawiamy bez zmian. Zmienimy jednak to co będzie się wyświetlać na naszej stronie.

Początek kodu bardzo przypomina stronę, którą pisaliśmy wcześniej. Mamy nagłówek znajdujący się między <h1></h1> i tekst poniżej wewnątrz <p></p>, w środku znajduje się dodatkowo <span>.

Element <span> służy nam do oznaczenia fragmentu tekstu, który następnie przy pomocy innych narzędzi możemy dowolnie modyfikować. Między elementem <script></script> znajduje się nasz kod w JavaScript osadzony w HTML. Wewnątrz tworzymy dwie funkcje getTemp() i getHumi(), obie zaczynają się od groźnie wyglądającego kodu, w skrócie tworzymy obiekt AJAX.

AJAX-em nazywamy również technologie, która umożliwia zmianę zawartości strony bez potrzeby jej odświeżania, co idealnie nadaje się do naszego projektu. Dalej sprawdzamy poprawne przy pomocy instrukcji if() czy odpowiedź z serwera została poprawnie odebrana przed aktualizacją wartości na naszej stronie. Jeśli wszystko jest okej dwa myślniki zmienią się na wartość odczytaną z czujnika.

ESP8266 zna już potrzebną nam temperaturę i wilgotność. Teraz powinniśmy go o nie zapytać, a dokładniej - poprosić, aby przekazał je na naszą stronę. Aby ESP-ek wysłał na naszą stronę informację o temperaturze musimy stworzyć funkcję server.on(). Będzie się ona aktywować, gdy serwer otrzyma żądanie http typu GET na ścieżce /temperature. Dzieje się to w naszej funkcji getTemp. W if() sprawdzamy, czy czujnik przekazał informacje o temperaturze do mikrokontrolera (czy DHT11 nic przed nami nie ukrywa??).

Monitorowanie Temperatury i Wilgotności za Pomocą Astraada HMI CFG i MQTT

Monitorowanie temperatury czy wilgotności w odległych od siebie lokalizacjach (pomieszczeniach) za pomocą jednego panelu, na który przesyłane są wszystkie zarejestrowane dane pomiarowe, jest bardzo praktyczne. Nie trzeba chodzić i kolejno sprawdzać wyniki pomiarów - zamiast tego monitorujemy je z jednego miejsca. Możliwość taką daje panel operatorski Astraada HMI w połączeniu z czujnikami ELA Innovation oraz routerem Teltonika RUTX11.

W tym artykule pokażemy, jak zbudować prosty system monitorowania temperatury i wilgotności w biurze za pomocą aplikacji Astraada HMI CFG oraz w jaki sposób dane z czujników są do niego wysyłane.

Konfiguracja Aplikacji Astraada HMI CFG

Na samym początku po pobraniu i zainstalowaniu aplikacji Astraada HMI CFG ze strony wsparcia technicznego ASTOR należy zacząć od stworzenia nowego projektu.

Edycja ekranów aplikacji: W tej części zaczniemy tworzenie aplikacji, która będzie wizualizowała monitorowanie temperatury i wilgotności w każdym z pokojów biura. Biuro ma 8 pokoi i w każdym będzie wyświetlana bieżąca wartość temperatury i wilgotności. Po kliknięciu w dany obszar pokoju otworzy się okno z Data Loggerem.

Edycja ekranu startowego możliwa jest po dwukrotnym kliknięciu w niego w drzewie projektu. W polu Screen Name wpisujemy nazwę ekranu. Niżej definiujemy typ ekranu Normal Screen (ekran podstawowy zajmujący cały obszar wyświetlacza) oraz resztę parametrów.

Na początek wgramy z dysku zdjęcie rzutu biura w formacie .png, które będzie głównym elementem aplikacji. W tym celu wybieramy z menu Draw -> Picture -> Import Picture From File i wybieramy zdjęcie, które dopasowujemy do ekranu.

Następnie dodajemy opisy pomieszczeń, aby widok był bardziej czytelny. Z menu Draw wybieramy Text, wstawiamy go w wybrane pomieszczenie i dwuklikiem przechodzimy do jego ustawień.

Teraz przejdziemy do utworzenia nowego ekranu zawierającego nagłówek, który będzie wyświetlany na górze każdego z ekranów. Nowy ekran będzie miał typ Window Screen, na wzór okna Windows, aby było można je przesunąć. Na nagłówku zamieścimy takie informacje, jak logo firmy, opis, datę i godzinę. Dokonamy tego wybierając z drzewka projektowego opcję Text Format Table.

Tabela będzie zawierać trzy kolumny: ID, Name, Language 1. W naszym przypadku będziemy mieć jeden wspólny temat dla publikacji i subskrypcji, więc treść wiadomości też będzie miała taki sam format dla obu trybów - wystarczy zdefiniować jedną treść wiadomości. Wobec tego za pomocą ikony NEW tworzymy dwa wiersze. W kolumnie Name wpisujemy dowolną nazwę, a właściwy tekst zdefiniujemy w kolumnie Language 1.

Pierwszy wiersz stanowi tekst wiadomości - tekst będzie przesyłał zmienną, dlatego musi zostać ona zdefiniowana. W naszym przykładzie będziemy odczytywać tą samą wiadomość, jaką wysyłamy do brokera. Drugi wiersz przedstawia formę tematu, na jaki będziemy publikować i subskrybować dane. W naszym przypadku będzie to wspólny temat „RHT”.

Podanym wierszom należy jeszcze nadać odpowiednie cechy, żeby mogły być wykorzystane do konkretnych celów. Aby to zrobić, zależy zaznaczyć wybrany tekst i kliknąć przycisk Property. W przypadku wiersza drugiego wystarczy zaznaczyć odpowiednie pola w Specific Purposes. Natomiast w przypadku wiersza pierwszego, oprócz zaznaczenia odpowiednich pól w Specific Purposes, definiujemy zmienną $U1000, która będzie naszym ciągiem JSON. Zatwierdzamy przyciskiem OK. Ostatnim krokiem jest wpisanie w treść wiadomości znaku zdefiniowanej zmiennej - „%1”.

W następnym kroku powracamy do zakładki MQTT Client i przeprowadzamy dalszą konfigurację. Jedną z rzeczy, która zrobimy, jest zaznaczenie i wybranie zdefiniowanego przez nas tematu publikacji i subskrypcji.

Dobrym zwyczajem jest monitorowanie działania MQTT, żeby nie publikować/subskrybować danych na marne. Pomoże to również szybciej zauważyć, gdzie w obsłudze MQTT jest błąd. Do tego użyjemy elementu Bit lamp. Będzie on sygnalizował status MQTT - czy jest ono włączone, czy wyłączone.

Dalej utworzymy specjalne makra, za pomocą których odbywać się będzie komunikacja MQTT. Napiszemy w sumie trzy różne makra do trybu publikacji, subskrypcji i do zdefiniowania stałych zmiennych. Zacznijmy od makra publikacji.

Tworzymy nowe makro, wybierając z drzewa projektu Macros -> Native Scripts -> Add Script i nadajemy dowolną nazwę, w naszym przypadku będzie to PUBLISH. Do publikacji wiadomości skorzystamy z komendy: A = Mqtt_IF (B, C, D). W naszym przypadku do zmiennej result przypiszemy funkcję Mqtt_IF. Wartości w nawiasie po kolei oznaczają:

nasz temat „RHT” zaznaczony przy Topic ID 1.
tekst naszej wiadomości zapisany w Text Format Table o ID 00002.
wysłanie wiadomości bez żadnych potwierdzeń dostarczenia.

Zmienne takie jak result definiujemy w opcji Tags, umieszczonej w drzewie projektowym. Zgodnie z powyższym nasze makro będzie miało następującą postać: 0\result = MqttP_IF (1,2,0). Aby opublikować naszą wiadomość na serwerze, użyjemy elementu Bit Button, w którym zawrzemy stworzone przez nas makro.

Następnym krokiem będzie utworzenie nowego makra o nazwie STAŁE i zdefiniowanie w nim stałych, do których będą przypisane nazwy czujników. Nazwy czujników odpowiadają numerowi pokoju, w którym się znajdują:

0\czujnik8 = „8”0\czujnik9 = „9”0\czujnik10 = „10”0\czujnik11 = „11”0\czujnik12 = „12”0\czujnik13 = „13”0\czujnik14 = „14”0\czujnik15 = „15”

Ten skrypt wystarczy, że wykona się tylko raz przy starcie aplikacji, więc powiążemy go z aplikacją w zakładce General Setup. Zaznaczamy pozycję Startup Macro i w zakładce, która się pojawiła, wybieramy makro STAŁE.

Ostatnim elementem konfiguracji MQTT będzie napisanie makra do trybu subskrypcji CONVERT. Makro to będzie odbierać informacje przychodzące na serwer, porównywać nazwy czujników, konwertować dane i zapisywać w zmiennych.

Skrypt rozpoczniemy od wykorzystania funkcji MqttGet, która odbiera informacje o najnowszej wiadomości od brokera. W zmiennej „nazwa” będzie przechowywany napis Nazwa. Dalej za pomocą funkcji GetJsonVal pobieramy nazwę czujnika w ciągu JSON o adresie $U1000, konwertujemy ją na typ danych STR i zapisujemy wynik w zmiennej wynik_nazwy. W zmiennej wynikJson będzie zapisane, czy operacja się powiodła czy też nie.

Następnie za pomocą funkcji STRCMP porównujemy ze sobą dwa stringi - nazwę czujnika zdefiniowaną w skrypcie STAŁE z nazwą odebraną przez broker. Jeśli zdefiniowane i odebrane nazwy są takie same (czyli funkcja zwraca wartość 0) to wykonują się dalsze instrukcje związane z funkcją GetJsonVal.

Teraz wrócimy do naszego ekranu Biuro i dodamy elementy wyświetlające temperaturę i wilgotność w każdym z pokojów. Procedura jest taka sama dla wyświetlania temperatury, jak i wilgotności - wybieramy odpowiednie do każdego pokoju zmienne zamienione z ASCII na INT ze skryptu CONVERT wynik_t[8-15], wynik_h[8-15] i konfigurujemy dany element.

Data Logger

Przydatną funkcjonalnością, którą oferuje panel Astraada HMI, jest możliwość utworzenia Data Loggerów - obiektów do gromadzenia danych. Dzięki nim stworzymy wizualizację, która ułatwi nam późniejsze analizy.

Klikamy na węzeł Data Loggers -> Add Data Loggers. Zaczynamy od wpisania nazwy i zdefiniowania, które dane chcemy zapisywać. W naszym przypadku będą to zmienne wynik_t[8-15] i wynik_h[8-15]. W Data Logger możemy zapisywać tylko jedną daną, więc musimy więc utworzyć 16 Data Loggerów - po dwa na każdy czujnik (temperatura i wilgotność). Wielkość bufora przechowującego dane ustawiamy na 100 słów bitowych, a interwał pobierania danych ustawiamy na 1 sekundę.

Zaznaczamy Save Data to File i ustalamy parametry zapisu danych do plików. Stworzony zostanie plik .csv w określonym miejscu na dysku. Plik zostanie stworzony tylko raz a dane są do niego dopisywane. Powiadomienia o zapisie danych do pliku nie będą wyświetlane.

Przechodzimy do drugiej zakładki Data Item, tam dodajemy nazwę zmiennej, która będzie widoczna w pliku i obiektach graficznych. Dla Data Loggerów związanych z temperaturą zmienna będzie miała nazwę „Poziom temperatury”, a dla związanych z wilgotnością - „Poziom wilgotności”.

Chcemy, aby po naciśnięciu na obszar danego pokoju pojawiał się ekran z Data Loggerem. Tworzymy zatem 8 nowych ekranów DataLogger[8-15] z poniższymi parametrami. Ekrany te będą w trybie Window Screen, aby było można je otworzyć klikając na określony przycisk oraz zamknąć.

Do każdego z ekranów Data Loggera dodajemy następujące elementy:

tags: #jak #wyświetlić #temperaturę #i #wilgotność #z