Zaloguj się
Wszystkie
15 grudnia 2025
4
Router Wi-Fi tworzy lokalną sieć, w ramach której mogą komunikować się różne urządzenia. Każde z nich, łącznie z routerem, ma swój unikalny adres IP w obrębie lokalnej sieci (nie należy go mylić z publicznym adresem IP, który jest przydzielany przez dostawcę usług internetowych). Taki adres składa się z czterech bajtów, a zwykle pierwsze dwa bajty mają wartości 192 i 168.
Zdecydowana większość urządzeń w sieci lokalnej komunikuje się z routerem Wi-Fi po to, by uzyskać dostęp do Internetu. Jednak urządzenia w ramach tej samej sieci mogą także przesyłać pomiędzy sobą różne informacje, również za pośrednictwem routera. Typowym przykładem jest drukarka bezprzewodowa, do której polecenia wydruku przesyłać mogą komputery lub smartfony – pod warunkiem, że pracują w tej samej sieci lokalnej.
Każde urządzenie w sieci Wi-Fi może mieć swój własny serwer HTTP, dzięki któremu jest w stanie generować strony internetowe, które mogą być odczytane w przeglądarce internetowej na innym urządzeniu. Tutaj klasycznym przykładem jest strona konfiguracyjna routera Wi-Fi, którą możemy otworzyć wpisując w pasku adresu przeglądarki adres http://192.168.0.1. Jeżeli ten adres nie działa, sprawdź instrukcję na obudowie Twojego routera, bo najprawdopodobniej należy wywołać inny adres.
W tym odcinku kursu opracujemy w MicroPythonie prosty serwer HTTP. Jego zadaniem będzie udostępnianie strony index.html, zapisanej w pamięci ESP32. Widzimy ją na rysunku 1. Jest ona bardzo prosta i ma za zadanie zademonstrować, w jaki sposób możemy wyświetlać jakieś dane, np. temperaturę procesora czy moc sygnału, a także jak można zbudować interfejs człowiek-maszyna (HMI) za pomocą takiej technologii. Przy użyciu ośmiu przycisków na stronie WWW użytkownik może wybrać kolor diody WS2812, która znajduje się na devboardzie ESP32-S3-DevKit-C. Oczywiście możemy stworzyć bardziej zaawansowany interfejs webowy z użyciem plików CSS i JavaScript. Jedyne, co nas ogranicza, to miejsce w pamięci – ale nic nie stoi na przeszkodzie, by wykorzystać także kartę MicroSD, co omówiliśmy już w 4. odcinku kursu MicroPythona (EP 08/2025).
Strona index.html
Zacznijmy od omówienia kodu strony internetowej zaprezentowanego na listingu 1. Ponieważ jest to kurs MicroPythona, a nie HTML, chciałem, by strona była możliwie jak najprostsza, ale przy zachowaniu ładnego wyglądu. Omówimy skrótowo najważniejsze elementy naszej strony.
<html>
<head>
<title>MicroPython ESP32</title>
<meta charset="UTF-8">
<link rel="icon" href="data:image/png;base64,iVBORw0KG
goAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P
4//8/AAX+Av7czFnnAAAAAElFTkSuQmCC">
<style>
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
color: white;
}
body {
background: -webkit-radial-gradient(#7b0191, #26002f);
}
h1 {
font-size: 250%;
padding: 20px;
}
h2 {
font-size: 200%;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
h3 {
font-size: 175%;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
button {
border: 1px solid;
background-color: #3b0043;
border-radius: 40px;
color: white;
font-size: 200%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
display: inline-block;
padding: 20px 20px 20px 20px;
margin: 0px 10px 0px 10px;
cursor: pointer;
width: 100%;
-webkit-box-shadow: 0 0 5px 5px #fcf584;
}
button:hover {
background-color: #5b0467;
-webkit-box-shadow: 0 0 5px 5px #ffffff;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
max-width: 1000px;
margin: 20px auto;
}
.cell {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid;
border-radius: 40px;
padding: 0px 20px 0px 20px;
margin: 0px 10px 0px 10px;
width: 100%;
-webkit-box-shadow: 0 0 5px 5px #fcf584;
}
</style>
</head>
<body>
<h1>MicroPython ESP32</h1>
<div class="row">
<div class="cell">
<h2>Temperatura CPU</h2>
<h3>AA °C</h3>
</div>
<div class="cell">
<h2>Moc sygnału WIFI</h2>
<h3>BBB RSSI</h3>
</div>
</div>
<div class="row">
<div class="cell">
<h2>Aktualny kolor diody WS2812</h2>
<h3>CCCCCCCCC</h3>
</div>
</div>
<form class="row">
<button type="submit" name="color" value="red">Czerwony</button>
<button type="submit" name="color" value="yellow">Żółty</button>
<button type="submit" name="color" value="green">Zielony</button>
<button type="submit" name="color" value="white">Biały</button>
</form>
<form class="row">
<button type="submit" name="color" value="cyan">Błękitny</button>
<button type="submit" name="color" value="blue">Niebieski</button>
<button type="submit" name="color" value="magenta">Fioletowy</button>
<button type="submit" name="color" value="black">Czarny</button>
</form>
</body>
</html>
Listing 1. Kod pliku index.html – cd.Strona ma układ tabelaryczny. Każdy wiersz rozpoczyna się instrukcją <div class="row"> i kończy </div>, a wewnątrz każdego wiersza możemy umieścić dowolną liczbę komórek objętych tagami <div class="cell"> oraz </div>. Szerokość komórek dostosuje się automatycznie w zależności od tego, ile ich jest w wierszu.
Pola, które mają się zmieniać, tzn. odczyty temperatury, mocy sygnału oraz koloru diody, w kodzie są reprezentowane przez znaki AA, BBB i CCCCCCCCC. Dlaczego tak dziwnie? Zanim strona zostanie przesłana przez Wi-Fi, w miejsce tych znaków zostaną bowiem wstawione rzeczywiste wartości. Jest to metoda bardzo prymitywna, bo odświeżenie tych zmiennych wymaga wygenerowania i przesłania całej strony od nowa. Bardziej doświadczeni programiści mogliby tu zastosować JavaScript, który cyklicznie wysyła zapytania o konkretne zmienne i aktualizuje tylko wybrane fragmenty strony.
Komunikacja od użytkownika do ESP32 zrealizowana jest przy pomocy formularza, który zaczyna się od <form class="row">. Przyciski tworzone są za pomocą instrukcji o następującej budowie:
Facebook
Twitter
Linkedin
Kup teraz
