Điều khiển màn hình LED 7 đoạn bằng Máy chủ web ESP8266: 8 bước (có hình ảnh)

2025 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2025-01-23 15:15

Dự án của tôi có Nodemcu ESP8266 đang điều khiển màn hình 7 phân đoạn thông qua máy chủ http sử dụng biểu mẫu html.

Bước 1: GIỚI THIỆU VỀ DỰ ÁN NÀY

Nó là một dự án IOT được phát triển bằng cách sử dụng mô-đun wifi ESP8266 (NodeMCU). Động cơ của dự án là tạo ra một máy chủ web trên mô-đun có thể lưu trữ nhiều máy khách qua mạng. Ở đây, kiến thức cơ bản về html và javaScript là cần thiết để hiểu dự án của tôi. Một số chủ đề trước mà tôi sẽ thảo luận ở đây liên quan đến ESP8266 và javaScript là:

1. Tải lên tệp trên SPIFFS của ESP8266 để sử dụng tệp đó hiệu quả hơn trong mã arduino của chúng tôi.

2. Lưu trữ web bằng javaScript

SPIFFS

Cho đến nay, chúng tôi luôn đưa HTML cho các trang web của mình dưới dạng các ký tự chuỗi trong bản phác thảo của chúng tôi. Điều này làm cho mã của chúng tôi rất khó đọc và bạn sẽ nhanh hết bộ nhớ.

SPIFFS một hệ thống tệp nhẹ dành cho bộ vi điều khiển có chip flash SPI. Chip flash trên bo mạch của ESP8266 có nhiều dung lượng cho các trang web của bạn, đặc biệt nếu bạn có phiên bản 1MB, 2MB hoặc 4MB. Bạn có thể hiểu cách thêm các công cụ trong phần mềm arduino để tải tệp lên SPIFFS theo liên kết sau:

Trong dự án này, tôi có 2 tệp html và một tệp javascript. Tất cả các tệp này được tải lên SPIFFS tách biệt với bản phác thảo để sự thay đổi trong các tệp này độc lập với bản phác thảo chính.

Cả hai tệp html đều được truy xuất bởi readyFile () như được hiển thị bên dưới:

void chuẩn bị () {

bool ok = SPIFFS.begin (); if (ok) {File f = SPIFFS.open ("/ index.html", "r"); Tập tin f1 = SPIFFS.open ("/ index1.html", "r"); data = f.readString (); data1 = f1.readString (); f.close (); f1.close (); } else Serial.println ("Không tìm thấy tệp nào như vậy."); }

trong khi tệp javascript được đọc bằng loadScript () như được hiển thị bên dưới:

void loadScript (Đường dẫn chuỗi, Kiểu chuỗi) {

if (SPIFFS.exists (path)) {File file = SPIFFS.open (path, "r"); server.streamFile (tệp, loại); }}

LƯU TRỮ ĐỊA PHƯƠNG CHO ỨNG DỤNG WEB

Bạn có thể hiểu cách sử dụng các đối tượng và phương pháp lưu trữ cục bộ khác nhau trong HTML5 bằng javascript từ bài viết sau: https://diveintohtml5.info/storage.html. Tôi sẽ thảo luận về việc sử dụng lưu trữ cục bộ trong dự án của mình trong phần làm việc.

Bước 2: Yêu cầu phần cứng

Mô-đun Wifi NodeMCU ESP8266 12E

Breadboard không hàn

Dây nhảy

7 Màn hình Segent (Cathode chung)

Điện trở 1K ohm

Cáp Micro-USB (để kết nối NodeMCU với máy tính của bạn)

Bước 3: Mạch & Kết nối

Các kết nối thực sự dễ dàng. Trong sơ đồ mạch trên, các chân của nút bấm được kết nối theo kiểu sau:

A D1

B D2

C D3

D D4

E D6

F D7

G D8

trong đó A, B, C, D, E & F là các phân đoạn của Hiển thị 7 phân đoạn

. Bỏ qua DP của Màn hình 7 đoạn. Không kết nối nó với chân D5 của ESP

Bước 4: LÀM VIỆC

Như đã thảo luận trước đó, chúng ta có hai tệp html. Một trong số đó là trang html gốc được gọi khi máy chủ ESP8266 nhận được "/" tức là Nếu URI '/' được yêu cầu, máy chủ sẽ trả lời bằng mã trạng thái HTTP 200 (Ok) và sau đó gửi phản hồi với chỉ mục ". html ".

Tệp html thứ hai sẽ được gửi khi khách hàng yêu cầu từ trang gốc bằng cách gửi đầu vào trên biểu mẫu. Ngay sau khi, máy chủ nhận được đầu vào POSTED từ biểu mẫu, nó sẽ so sánh nó với giá trị chuỗi cố định và gửi trang html thứ hai để phản hồi.

if (server.arg ("nam") == "0") {server.send (200, "text / html", data1); bảySeg (0); }

Vì html cho trang thứ 2 không được xác định trong bản phác thảo, vì vậy ở đây chúng tôi đang tham chiếu đến "data1" đã được đọc các mã html bằng cách sử dụng SPIFFS.readString ()

Tập tin f1 = SPIFFS.open ("/ index1.html", "r"); data1 = f1.readString ();

Ở đây SevenSeg () cũng được gọi với một đối số là "0" để nó có thể được sử dụng để hiển thị "0" bằng cách chuyển các đoạn khác nhau BẬT và TẮT. Ở đây, tôi đã đặt tên cho fuction tự giải thích, tức là onA () sẽ bật hiển thị phân đoạn A của 7 seg trên breadboard, tương tự offA sẽ tắt nó.

Vì vậy, trong trường hợp này để hiển thị "0", chúng ta phải chuyển tất cả các phân đoạn ngoại trừ G (DP bị bỏ qua vì nó không được kết nối với bất kỳ chân nào của ESP8266). Vì vậy, hàm của tôi trông giống như:

if (num == 0) {onA (); onB (); onC (); onD (); một(); onF (); tắtG (); }

Bước 5: Mã HTML & JAVASCRIPT

Index.html có một canvas có 7 đoạn hiển thị ở chế độ tắt và ở dưới nó. Đây là những gì bạn thấy sau khi mở nó:

Nếu chúng tôi muốn sử dụng trang web của mình mà không có ESP8266, thì có thể thực hiện được bằng cách thay đổi liên kết trong thuộc tính action của biểu mẫu của bạn. Hiện tại, đây là liên kết đang hoạt động:

Ở đây bạn có thể thấy rằng liên kết đang hoạt động là cùng một địa chỉ ip được phân bổ cho nodeMCU của bạn sau khi kết nối với bất kỳ wifi (hoặc điểm phát sóng) nào. Thẻ biểu mẫu sau khi điều chỉnh trông giống như sau:

Ở đây, tôi đang sử dụng web stroge của trình duyệt để lưu trữ giá trị đầu vào của người dùng sao cho giá trị được nhập vào index.html được lưu trữ cục bộ trong trình duyệt (như cookie). Giá trị đó được tìm nạp bởi index1.html và số được hiển thị trên màn hình 7 phân đoạn trên canvas html. Bạn có thể hiểu quy trình này bằng video sau:

video_attach

Bước 6: LƯU Ý CHÍNH

Dự án này sẽ hoạt động với gật đầu của bạn nếu bạn chú ý đến các điểm sau:

1. Liên kết trong thuộc tính action của tệp html gốc phải là "https:// (IP trên Serial monitor hoặc IP được phân bổ cho ESP của bạn) / submit".

2. Sử dụng phiên bản mới nhất của trình duyệt hỗ trợ html5 và các thẻ và chức năng mới.

3. SPIFFS sẽ chỉ hoạt động nếu index.html, index1.html và main.js của bạn được đặt cùng nhau trong thư mục dữ liệu. Bạn có thể sao chép tệp mã từ github của tôi

Bước 7: MÃ

Đây là liên kết kho chứa mã của dự án của tôi. Nếu bạn đang làm việc với SPIFFS trong ESP8266, bạn có thể hiểu tại sao tôi đặt các tệp html và javascript trong thư mục dữ liệu.

Liên kết kho lưu trữ GitHub

Bước 8: Hướng dẫn bằng video

Nếu nó hữu ích, hãy đăng ký