HTML hoạt động nào? HTML documents files kết thúc với html hay htm Bạn xem chúng cách sử dụng trình duyệt web (như Google Chrome, Safari, hay Mozilla Firefox) Trình duyệt đọc files HTML xuất nội dung lên internet cho người đọc xem Thơng thường, trung bình web chứa nhiều trang web HTML, ví dụ như: trang chủ, trang about, trang liên hệ, tất cần trang HTML riêng Mỗi trang HTML chứa tag (cũng gọi elements), bạn xem việc xây dựng khối trang web Nó tạo thành cấu trúc thư mục bao gồm section, paragraph, heading, khối nội dung khác Hầu hết HTML elements có tag mở tag đóng với cấu trúc Cấu trúc trang HTML có dạng sau, thường gồm phần: : Phần khai báo chuẩn html hay xhtml : Phần khai báo ban đầu, khai báo meta, title, css, javascript… : Phần chứa nội dung trang web, nơi hiển thị nội dung Cấu trúc bản: 20 Tiêu đề trang web Phần thân viết H12 Giao diện Trang Web b Thiết kế giao diện app blynk Cài đặt thông số chi tiết nhiệt độ, độ ẩm: Để tiến hành cài đặt thông số cho cảm biến ta thực bước sau: Click vào GAUGE để tiến hành cài đặt thông số Cài đặt thông số nhiệt độ Ở mục GAUGE 1: Đặt tên cho thang đo nhiệt độ (temperature) INPUT: Cấu hình cho PIN cần kết nối, chọn Virtual > V6 (0~1023) đổi lại (0~50) LABELS: e.g: Temp:/pin/độ c REFRESH INTERVAL: Vào Push chọn tốc độ đọc cảm biến nhiệt độ (sec) 21 Cài đặt thông số độ ẩm Ở mục GAUGE : Đặt tên chothang đo độ ẩm (humidity) INPUT: Cấu hình cho PIN cần kết nối, chọn Virtual > V5 (0~1023) đổi lại (0~100) LABELS: e.g: Temp:/pin/% (Độ ẩm đơn vị %) REFRESH INTERVAL: Vào Push chọn tốc độ đọc cảm biến độ ẩm (sec) B1 B2 22 B3 B4 c Giao diện Thingspeak Bước 1: Truy cập https://thingspeak.com/ tạo tài khoản cách điền thơng tin chi tiết (có thể sử dụng tài khoản matlab có từ trước) Bước 2: Tạo kênh cách nhấp vào “Channel” điền vào chi tiết sau thể hình ảnh bên 23 Bước 3: Nhấp vào API Key, thấy thông báo "Write API Key" Sao chép Khóa API Điều quan trọng, yêu cầu đoạn chương trình phần Gateway Bước 4: Nhấp vào “Private view” tùy chỉnh cửa sổ hiển thị theo ý muốn VI Chương VI Kết Sản phẩm thiết kế H13 Sản phẩm thiết kế Node MCU&DHT&LCD (dùng cho web server & AppBlynk) 24 H14.Node MCU cảm biến & Node MCU Gateway (Modulo không dây NRF) Kết giám sát nhiệt độ, độ ẩm H15 Kết hiển thị Web Server 25 H16 Kết hiển thị LCD & Blynk App H17 Kết hiển thị máy chủ Thingspeak - Nhận xét, đánh giá Ưu điểm Mạch hoạt động tốt, đo nhiệt độ, độ ẩm Thiết bị giám sát website, LCD, Blynk không cần refresh Nhiệt độ, độ ẩm tự động cập nhật Nhược điểm Việc cảm biến phụ thuộc chất lượng DHT Hướng phát triển: Xây dựng trang web hồn thiện, lưu trữ lịch sử, vẽ biểu đồ thể mối quan hệ, … 26 Phụ lục Bảng Các linh kiện, trình biên dịch sử dụng đồ án Tên linh kiện Chức LCD16X02 LCD 16×2 sử dụng để hiển thị trạng thái thông số LCD 16×2 có 16 chân chân liệu (D0 – D7) chân điều khiển (RS, RW, EN) chân lại dùng để cấp nguồn đèn cho LCD 16×2 Các chân điều khiển giúp ta dễ dàng cấu hình LCD chế độ lệnh chế độ liệu Chúng giúp ta cấu hình chế độ đọc ghi I2C LCD có q nhiều nhiều chân gây khó khăn q trình đấu nối chiếm dụng nhiều chân vi điều khiển Module I2C LCD đời giải vấn để Thay phải chân vi điều khiển để kết nối với LCD 16×2 (RS, EN, D7, D6, D5 D4) module IC2 bạn cần tốn chân (SCL, SDA) để kết nối Module I2C hỗ trợ loại LCD sử dụng driver HD44780(LCD 16×2, LCD 20×4, …) tương thích với hầu hết vi điều khiển Board test dây jump Dùng để lắp vi xử lý & linh kiện, jump để nối chân với Trình biên dịch chương trình Arduino IDE Dùng để viết code, debug, nạp chương trình vào vi xử lý ESP8266 Subline Text3 Visual Studio Code Viết file mã nguồn HTML 27 Tài liệu tham khảo [1].Rui Santo, Sara Santo, (2020), ESP8266 Web Server with Arduino IDE [2] Bùi Văn Minh, Dương Thanh Long, Phạm Quang Huy, (2019), Lập trình vi điều khiển từ xa Esp8266 Esp32, NXB Thanh Niên [3] Marco Schwartz, (2016), Internet of Things with ESP8266 [4] Tutorials HTML & CSS, W3school, https://www.w3schools.com/ [5].Website, https://theiotprojects.com/ [6] Hình ảnh sơ đồ nguyên lý tham khảo Internet, địa chỉ: https://theiotprojects.com/ [7] Để lấy icon nhiệt độ, độ ẩm, ngày giờ… truy cập link: https://fontawesome.com/icons?d=gallery&p=2 [8] Và tài liệu khác internet Hết 28 ... nhứng nhận xét, đánh giá, góp ý đồ án mơn học Đồ Án Thiết Kế Hệ Thống Nhúng suốt thời gian thực Qua việc học tìm hiểu kiến thức liên quan đồng thời thực hành, làm việc trực tiếp với công cụ liên... hành, làm việc trực tiếp với công cụ liên quan đến môn học Đồ Án Thiết Kế Hệ Thống Nhúng, nhóm chúng em rút nhiều học bổ ích phục vụ cho trình học tập nghiên cứu sau Chúng em xin chân thành cảm ơn... dựng sơ đồ khối a Module Node MCU sử dụng Web Server H4.Sơ đồ khối b Modulo Node MCU kết nối App Blynk 16 H6 Sơ đồ khối c Modulo Node MCU với Thingspeak H7 Sơ đồ khối Sơ đồ nguyên lý a Sơ đồ Node