ESP8266: Cách theo dõi nhiệt độ và độ ẩm: 12 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:35

Trong hướng dẫn hôm nay, chúng ta sẽ sử dụng ESP-01, là ESP8266 trong cấu hình 01 (chỉ có 2 GPIO), để đọc nhiệt độ và độ ẩm của cảm biến DHT22. Tôi sẽ chỉ cho bạn một sơ đồ điện và phần lập trình ESP với Arduino. Ví dụ rất đơn giản, dễ hiểu và cũng đi kèm với tệp PDF được sử dụng trong video để hỗ trợ lắp ráp.

Trong thiết kế, chúng tôi có ESP01, nguồn chuyển đổi 110 hoặc 220 thành 5 volt, bộ điều chỉnh điện áp 3v3 và DHT22, là cảm biến. Trên màn hình điện thoại thông minh, bạn sẽ có địa chỉ IP cục bộ ngoài mã JavaScript do ESP cung cấp. Do đó, màn hình này sẽ nhận các thông số về nhiệt độ và độ ẩm và sẽ in ra các giá trị này, các giá trị này sẽ được cập nhật sau mỗi năm giây. Để làm điều này, bạn sẽ không cần bất kỳ ứng dụng nào trên điện thoại và máy tính bảng và điều này áp dụng cho cả Hệ điều hành Android và IOS.

Bước 1: Lắp ráp

Sơ đồ điện khá đơn giản, cũng như phần lắp ráp, sẽ liên quan đến ESP01 như một máy chủ. ESPO1 sẽ được lập trình như thể nó là một Arduino: thông qua ngôn ngữ C. Tôi chỉ ra rằng một phần của mã được in từ trình duyệt. Điều này có nghĩa là nó sẽ gửi mã JavaScript đến trình duyệt. Dưới đây, tôi sẽ giải thích rõ hơn về cách hoạt động của tính năng này.

Quay trở lại sơ đồ đấu dây, tôi đặt một nguồn chuyển mạch 5 volt kết nối với bộ điều chỉnh điện áp 3v3 để cấp nguồn cho ESP01. Chúng tôi vẫn có DHT22 với bốn chân. Một trong số này, dữ liệu, không được sử dụng. Tuy nhiên, nó cần một điện trở kéo lên.

Bước 2: Mã

Bước đầu tiên là bao gồm các lib mà chúng ta sẽ sử dụng. Có thể thêm DHT lib bằng tùy chọn Phác thảo> Bao gồm Thư viện> Quản lý Thư viện…

Trong cửa sổ mở ra, hãy tìm thư viện cảm biến DHT.

Sau đó, chúng tôi đã tạo một biến kiểu ESP8266WebServer sẽ là máy chủ của chúng tôi và sẽ phản hồi các yêu cầu HTTP (cổng 80).

Chúng tôi cũng tạo một biến DHT với các tham số 0 (là chân GPIO 0) và kiểu (trong trường hợp của chúng tôi là DHT22).

#include #include #include #include // Criamos uma variável do tipo ESP8266WebServer que já ridui funções // que auxiliam na criação das rotas que o ESP8266 vai responseer ESP8266WebServer server (80); // Variável do tipo DHT que Obui funções para controlarmos o módulo dht // permitindo ler temperatura e a umidade DHT dht (0, DHT22);

Bước 3: Thiết lập

Trong phần thiết lập, chúng tôi sẽ chỉ khởi tạo Serial để chúng tôi có nhật ký. Điều này sẽ xảy ra nếu ESP8266 được kết nối với máy tính thông qua nối tiếp để sử dụng màn hình nối tiếp.

Chúng tôi sẽ làm cho ESP8266 kết nối với mạng của chúng tôi. Trong trường hợp của chúng tôi, chúng tôi sử dụng mạng TesteESP với mật khẩu 87654321, nhưng bạn sẽ phải thay đổi điều này tùy theo mạng mà bạn sử dụng.

// Inicialize a Serial apenas caso esteja com o ESP8266 conectado ao computador pela serla queira ter um log // para secureitar saber o que está acontecendo com o ESP8266 Serial.begin (115200); // Instrução para o ESP8266 se conectar à red. // No nosso caso o nome da red é TesteESP e a senha é 87654321. // Você deve alterar com as Informações da sua red WiFi.begin ("TesteESP", "87654321"); // Phản hồi caso esteja usando o Monitor Serial Serial.println (""); Serial.print ("Conectando");

Chúng tôi đợi ESP8266 kết nối với mạng và sau khi nó kết nối, chúng tôi sẽ gửi cài đặt mạng. Thay đổi theo mạng của bạn.

// Esperamos até que o módulo se conecte à red while (WiFi.status ()! = WL_CONNECTED) {delay (500); Serial.print ("."); } // Các cấu hình thực hiện sửa lỗi IP. Você pode alterar xác nhận một IPAddress ip (192, 168, 3, 11); Cổng IPAddress (192, 168, 3, 1); Mạng con IPAddress (255, 255, 255, 0); Serial.print ("Configurando IP fixo para:"); Serial.println (ip); // Envia a configuração WiFi.config (ip, gateway, subnet);

Các lệnh tiếp theo chỉ trong trường hợp bạn đã kết nối ESP8266 với máy tính thông qua nối tiếp, để bạn có phản hồi từ Màn hình nối tiếp.

Bạn có thể kiểm tra IP mà ESP8266 nhận được để xem nó có giống như trong cài đặt hay không.

// Mostramos no Monitor Serial o ip com o Qual o esp8266 se conectou para ver se está de acordo com o que configuramos Serial.println (""); Serial.println ("Connectado"); Serial.print ("IP:"); Serial.println (WiFi.localIP ());

Ở đây, chúng ta bắt đầu xác định những hàm nào sẽ được thực thi cho mỗi yêu cầu.

Trong hướng dẫn bên dưới, mỗi khi ESP8266 nhận được một yêu cầu HTTP thuộc loại GET trong đường dẫn / nhiệt độ, thì hàm getTempe Heat sẽ được thực thi.

// Aqui definimos Qual a função será executeutada para o caminho e tipo dado. // Nesse caso quando houver uma suggestição http do tipo NHẬN không có caminho https://192.168.2.8/tempether // (pode ser outro ip dependendo da sua configuração) a função getTempether será executive server.on ("/ Temperature", HTTP_GET, getTempe Heat);

Trong câu lệnh khác này, mỗi khi ESP8266 nhận được một yêu cầu HTTP loại GET trong đường dẫn / độ ẩm, hàm getHumidity sẽ được thực thi.

// Nesse outo caso quando houver uma suggestição http do tipo NHẬN không có caminho https://192.168.2.8/humidity // (pode ser outro ip dependendo da sua configuração) a função getHumidity será executive server.on ("/ ẩm", HTTP_GET, getHumidity);

Trong hướng dẫn này, mỗi khi ESP8266 nhận được yêu cầu HTTP loại GET trong đường dẫn / màn hình, hàm showMonitor sẽ được thực thi.

Hàm showMonitor chịu trách nhiệm trả về html chính sẽ hiển thị các giá trị nhiệt độ và độ ẩm.

// Nesse caso quando houver uma suggestição http do tipo NHẬN không có caminho https://192.168.2.8/monitor // (pode ser outro ip dependendo da sua configuração) a função showMonitor será executive. // Esta função retornará a página major que mostrará os valores // da temperatura e da umidade e recarregará essas Informações de tempos em tempos server.on ("/ monitor", HTTP_GET, showMonitor);

Đây là định nghĩa hàm sẽ được thực thi khi không tìm thấy đường dẫn được yêu cầu.

// Aqui definimos Qual função será executada caso o caminho que o cliente Demisitou não tenha sido registerrado server.onNotFound (onNotFound);

Ở đây chúng tôi khởi tạo máy chủ của mình mà chúng tôi đã khai báo trước đó trên cổng 80.

Đây là phần cuối của quá trình thiết lập.

// Inicializamos o server que criamos na porta 80 server.begin (); Serial.println ("Máy chủ HTTP iniciado"); }

Bước 4: Vòng lặp

Nhờ có lib ESP8266WebServer, chúng tôi không cần phải kiểm tra trong vòng lặp xem có ứng dụng khách hay không và đường dẫn yêu cầu là gì. Chúng ta chỉ cần gọi hàm handleClient (), và đối tượng sẽ kiểm tra xem có khách hàng nào đang thực hiện bất kỳ yêu cầu nào không và sẽ chuyển hướng đến chức năng tương ứng mà chúng ta đã đăng ký trước đó.

void loop () {// Verifica se há alguma recisição de algum cliente server.handleClient (); }

Bước 5: Không tìm thấy yêu cầu

Đây là chức năng chúng tôi đã đăng nhập trước đó để thực thi khi khách hàng đưa ra bất kỳ yêu cầu nào chưa được đăng ký.

Hàm chỉ trả về mã 404 (mã mặc định khi không tìm thấy tài nguyên), kiểu dữ liệu trả về (trong trường hợp là văn bản thuần túy) và văn bản có từ “Không tìm thấy”.

// Função que definimos para ser chamada quando o caminho recisitado não foi registerrado void onNotFound () {server.send (404, "text / trơn", "Không tìm thấy"); }

Bước 6: Trả lại nhiệt độ

Đây là chức năng sẽ trả về một json với dữ liệu nhiệt độ khi khách hàng đưa ra yêu cầu GET tại / nhiệt độ.

// Função que definimos que será executeutada quando o cliente fizer uma preferisição // do tipo GET no caminho https://192.168.2.8/tempether (pode ser outro ip dependendo da sua configuração) void getTempether () {// Fazemos a leitura da temperatura através do módulo dht float t = dht.readTempentic (); // Cria um json com os dados da temperatura String json = "{" Temperature / ":" + String (t) + "}"; // Envia o json para o cliente com o codigo 200, que é o codigo quando a recisição foi realizada com sucesso server.send (200, "application / json", json); }

Bước 7: Trả lại độ ẩm

Đây là chức năng sẽ trả về một json với dữ liệu độ ẩm khi khách hàng đưa ra yêu cầu GET trong / độ ẩm.

// Função que definimos que será executada quando o cliente fizer uma preferisição // do tipo GET no caminho https://192.168.2.8/humidity (pode ser outro ip dependendo da sua configuração) void getHumidity () {// Fazemos a leitura da umidade através do módulo dht float h = dht.readHumidity (); // Cria um json com os dados da umidade String json = "{" độ ẩm / ":" + String (h) + "}"; // Envia o json para o cliente com o codigo 200, que é o codigo quando a recisição foi realizada com sucesso server.send (200, "application / json", json); }

Bước 8: HTML

Đây là hàm sẽ trả về html khi máy khách truy cập / giám sát. Trang này sẽ hiển thị các giá trị nhiệt độ và độ ẩm, đồng thời nó sẽ tải lại dữ liệu theo thời gian. Phần nằm giữa và và phong cách>

xác định giao diện của trang và bạn có thể thay đổi nó theo ý muốn.

// Função que definimos que será executeutada quando o cliente fizer uma suggestição // do tipo GET no caminho https://192.168.2.8/monitor (pode ser outro ip dependendo da sua configuração) void showMonitor () {String html = "" "" ""

"Màn hình DHT"

"cơ thể người{"

"padding: 35px;"

"background-color: # 222222;" "}"

Bước 9: Tiếp tục kiểu HTML

"h1 {" "màu: #FFFFFF;" "font-family: sans-serif;" "}" "p {" "màu: #EEEEEE;" "font-family: sans-serif;" "font-size: 18px;" "}" ""

Ở đây chúng ta có phần chính của html. Trong đó, chúng ta có hai đoạn văn sẽ hiển thị nhiệt độ và độ ẩm. Hãy chú ý đến id của các đoạn văn, bởi vì thông qua chúng, chúng ta sẽ khôi phục các đoạn văn này để nhập các giá trị nhiệt độ và độ ẩm sau khi yêu cầu.

Màn hình DHT

Nhiệt độ:

Độ ẩm:

Bước 10: JavaScript

Ở đây chúng ta bắt đầu xác định script sẽ đọc các giá trị của nhiệt độ và độ ẩm theo thời gian. Hàm refresh () gọi hàm refreshTempe Heat () và refreshHumdity () và setInterval gọi hàm refresh cứ sau 5000 mili giây (5 giây).

"Làm tươi();" "setInterval (làm mới, 5000);" "function refresh ()" "{" "refreshTempether ()" "refreshHumidity ();" "}"

Hàm refreshTempeosystem () thực hiện một yêu cầu tại / nhiệt độ, phân tích cú pháp thông tin có trong json và thêm nhiệt độ id vào đoạn văn.

"function refreshTempeosystem ()" "{" "var xmlhttp = new XMLHttpRequest ();" "xmlhttp.onreadystatechange = function () {" "if (xmlhttp.readyState == XMLHttpRequest. DONE && xmlhttp.status == 200) {" "document.getElementById ('nhiệt độ'). innerHTML = 'Nhiệt độ:' + JSON. phân tích cú pháp (xmlhttp.responseText).tempeosystem + 'C'; " "}" "};" "xmlhttp.open ('GET', 'https://192.168.2.8/tempeosystem', true);" "xmlhttp.send ();" "}"

Hàm refreshHumidity () thực hiện yêu cầu / độ ẩm, phân tích cú pháp thông tin có trong json và thêm id độ ẩm vào đoạn văn. Và cùng với đó, chúng tôi hoàn thành html mà chúng tôi sẽ gửi trong các yêu cầu trong / monitor.

"function refreshHumidity ()" "{" "var xmlhttp = new XMLHttpRequest ();" "xmlhttp.onreadystatechange = function () {" "if (xmlhttp.readyState == XMLHttpRequest. DONE && xmlhttp.status == 200) {" "document.getElementById ('độ ẩm'). innerHTML = 'Độ ẩm:' + JSON. phân tích cú pháp (xmlhttp.responseText).humidity + '%'; " "}" "};" "xmlhttp.open ('GET', 'https://192.168.2.8/humidity', true);" "xmlhttp.send ();" "}"

"";

Bước 11: Hoàn thiện ShowMonitor

Bây giờ chuỗi với html mà chúng tôi sẽ gửi đã sẵn sàng, chúng tôi có thể gửi nó cho khách hàng. Điều này hoàn thành chức năng showMonitor và mã.

// Envia o html para o cliente com o codigo 200, que é o codigo quando a recisição foi realizada com sucesso server.send (200, "text / html", html); }

Bước 12: Kiểm tra

Bây giờ mở trình duyệt của bạn và nhập https://192.168.2.8/monitor (bạn có thể cần một ip khác tùy thuộc vào cấu hình của bạn).