Trang chủ
Arduino UNO R4

Thư Viện DIYables WebApps Framework Ứng Dụng Web Arduino Hoàn Chỉnh

Thư Viện DIYables WebApps

Thư viện Arduino toàn diện để tạo ứng dụng web dựa trên WebSocket cho Arduino Uno R4 WiFi và DIYables STEM V4 IoT. Thư viện này cung cấp nhiều ứng dụng web sẵn dùng để giám sát, điều khiển và tương tác với các dự án Arduino của bạn thông qua giao diện web hiện đại. Được tối ưu hóa đặc biệt cho nền tảng giáo dục DIYables STEM V4 IoT với khả năng IoT nâng cao và cảm biến tích hợp.

Với thư viện này, bạn có thể tương tác với Arduino thông qua trình duyệt web trên điện thoại hoặc PC bằng cách:

  • Sử dụng ứng dụng web có sẵn từ 11 ứng dụng được cung cấp mà không cần kiến thức lập trình web
  • Tùy chỉnh ứng dụng web có sẵn để phù hợp với yêu cầu dự án cụ thể của bạn
  • Xây dựng và thêm ứng dụng web của riêng bạn bằng cách sử dụng kiến trúc framework linh hoạt
Arduino UNO R4 diyables webapps

🚀 Tính Năng

  • Kiến Trúc Module: Chỉ thêm các ứng dụng web bạn cần để tối ưu hóa việc sử dụng bộ nhớ
  • Hiệu Quả Bộ Nhớ: Mỗi ứng dụng web có thể được bật/tắt độc lập
  • Tối Ưu Hóa Bộ Nhớ: Mã HTML, JavaScript và CSS được tối ưu để giảm kích thước code trong khi vẫn bảo toàn giao diện và chức năng. Mã nguồn gốc không được tối ưu có sẵn trong thư viện để tham khảo và tùy chỉnh
  • 11 Ứng Dụng Web Có Sẵn: Điều khiển Arduino hoàn chỉnh mà không cần kiến thức lập trình web
    • Trang Chủ: Trung tâm điều hướng với liên kết đến tất cả ứng dụng web
    • Web Monitor: Monitor cổng serial thời gian thực trong trình duyệt thông qua WebSocket
    • Web Chat: Giao diện chat tương tác với Arduino của bạn
    • Web Digital Pins: Điều khiển và giám sát tất cả chân digital với giao diện web
    • Web Slider: Điều khiển thanh trượt kép cho đầu ra analog/PWM
    • Web Joystick: Joystick tương tác để điều khiển robot và xe
    • Web Analog Gauge: Đồng hồ đo tròn để giám sát cảm biến
    • Web Rotator: Điều khiển đĩa xoay với chế độ liên tục/giới hạn
    • Web Temperature: Hiển thị nhiệt kế với phạm vi có thể cấu hình
    • Web RTC: Đồng hồ thời gian thực với đồng bộ thời gian và xử lý múi giờ
    • Web Table: Bảng hai cột thuộc tính-giá trị với cập nhật thời gian thực
    • Web Plotter: Trực quan hóa và vẽ biểu đồ dữ liệu thời gian thực
  • Template Ứng Dụng Web Tùy Chỉnh: Template hoàn chỉnh để tạo ứng dụng web của riêng bạn với giao tiếp WebSocket thời gian thực
  • Thiết Kế Responsive: Hoạt động trên thiết bị desktop và mobile
  • Giao Tiếp Thời Gian Thực: Dựa trên WebSocket để cập nhật tức thì
  • Tích Hợp Dễ Dàng: API dựa trên callback đơn giản
  • Hỗ Trợ Nhiều Ứng Dụng: Hỗ trợ thêm nhiều ứng dụng web cùng lúc
  • Tích Hợp Trang Chủ Tự Động: Ứng dụng web được thêm sẽ tự động hiển thị liên kết trên trang chủ
  • Có Thể Mở Rộng Nền Tảng: Hiện tại được triển khai cho Arduino Uno R4 WiFi, nhưng có thể mở rộng cho các nền tảng phần cứng khác. Xem DIYables_WebApps_ESP32

📦 Cài Đặt - Arduino IDE Library Manager

  • Mở Arduino IDE
  • Điều hướng đến biểu tượng Libraries ở thanh bên trái của Arduino IDE.
  • Tìm kiếm "DIYables WebApps", sau đó tìm thư viện DIYables WebApps của DIYables
  • Nhấn nút Install để cài đặt thư viện.
Arduino UNO R4 diyables webapps thư viện
  • Bạn sẽ được yêu cầu cài đặt một số thư viện phụ thuộc khác
  • Nhấn nút Install All để cài đặt tất cả thư viện phụ thuộc.
Arduino UNO R4 diyables webapps dependency

🔧 Thư Viện Phụ Thuộc

Thư viện này yêu cầu các thành phần sau:

  • Thư viện UnoR4WiFi_WebServer (để hỗ trợ WebSocket)

🎯 Bắt Đầu Nhanh

Để biết hướng dẫn thiết lập chi tiết và các ví dụ code, vui lòng tham khảo:

📱 Ứng Dụng Web

1. Trang Chủ (`/`)

  • Trung tâm điều hướng
  • Liên kết đến tất cả ứng dụng web
  • Chỉ các ứng dụng được bật/thêm mới hiển thị trên trang chủ
  • Hiển thị trạng thái kết nối
  • Thiết kế responsive

2. Web Monitor (`/web-monitor`)

  • Serial monitor dựa trên trình duyệt
  • Giao tiếp hai chiều thời gian thực
  • Đánh dấu thời gian và đếm tin nhắn
  • Nhập lệnh với lịch sử

3. Web Plotter (`/web-plotter`)

  • Trực quan hóa dữ liệu và vẽ biểu đồ thời gian thực
  • Hỗ trợ nhiều chuỗi dữ liệu (lên đến 8 đường)
  • Trục Y tự động chia tỷ lệ hoặc phạm vi cố định
  • Tiêu đề biểu đồ và nhãn trục có thể tùy chỉnh
  • WebSocket streaming để giảm thiểu độ trễ
  • Hoàn hảo cho giám sát cảm biến và debug

4. WebChat (`/chat`)

  • Giao diện chat tương tác
  • Phản hồi ngôn ngữ tự nhiên
  • Điều khiển LED thông qua lệnh chat
  • Tương tác vui và mang tính giáo dục

5. Web Digital Pins (`/web-digital-pins`)

  • Điều khiển từng chân riêng biệt (chân 0-13)
  • Mỗi chân có thể được bật với chế độ INPUT hoặc OUTPUT
  • Chỉ các chân được bật mới hiển thị trong Web UI
  • Giám sát chân input và output
  • Thao tác hàng loạt (All ON/OFF, Toggle)
  • Phản hồi trạng thái chân thời gian thực

6. Web Slider (`/web-slider`)

  • Thanh trượt kép (0-255)
  • Điều khiển đầu ra PWM
  • Nút giá trị đặt trước
  • Tùy chọn điều khiển đồng bộ

7. Web Joystick (`/web-joystick`)

  • Điều khiển joystick tương tác với hỗ trợ cảm ứng/chuột
  • Giá trị tọa độ X/Y (-100 đến +100)
  • Phản hồi vị trí thời gian thực
  • Tự về giữa có thể bật/tắt qua code Arduino
  • Hoàn hảo cho điều khiển robot và xe

8. Web Analog Gauge (`/web-gauge`)

  • Hiển thị đồng hồ đo tròn chuyên nghiệp để giám sát cảm biến thời gian thực
  • Phạm vi giá trị, đơn vị và độ chính xác có thể cấu hình
  • Hoạt hình kim mượt mà với phản hồi trực quan
  • Vùng mã màu (xanh lá, vàng, đỏ) để chỉ báo trạng thái
  • Xử lý config tự động - thiết lập phạm vi một lần trong constructor
  • Hoàn hảo cho cảm biến áp suất, giám sát điện áp và đọc analog

9. Web Rotator (`/web-rotator`)

  • Điều khiển đĩa xoay tương tác với phản hồi trực quan
  • Hai chế độ hoạt động: Liên tục (0-360°) và Giới hạn (phạm vi tùy chỉnh)
  • Phản hồi góc thời gian thực với xoay mượt mà
  • Hỗ trợ cảm ứng và chuột cho desktop và mobile
  • Thiết kế gradient conic chuyên nghiệp với chỉ báo vị trí
  • Hoàn hảo cho servo motor, stepper motor và điều khiển xoay

10. Web Temperature (`/web-temperature`)

  • Hiển thị nhiệt kế trực quan với giám sát nhiệt độ thời gian thực
  • Phạm vi nhiệt độ và đơn vị có thể cấu hình (°C, °F, K)
  • Trực quan nhiệt kế tương tác với hoạt hình kiểu thủy ngân
  • Xử lý config tự động - thiết lập phạm vi một lần trong constructor
  • Cập nhật giá trị thời gian thực qua WebSocket
  • Hoàn hảo cho cảm biến nhiệt độ và giám sát môi trường

11. Web RTC (`/web-rtc`)

  • Hiển thị đồng hồ thời gian thực cho cả RTC Arduino và thời gian thiết bị client
  • Đồng bộ thời gian một cú nhấp từ trình duyệt web đến Arduino RTC
  • Chỉ báo chênh lệch thời gian trực quan hiển thị độ chính xác đồng bộ theo phút
  • Định dạng thời gian hai dòng với hiển thị 12 giờ AM/PM và ngày đầy đủ
  • Cập nhật thời gian thực dựa trên WebSocket để đồng bộ thời gian tức thì
  • UI gradient hiện đại với layout card-style responsive
  • Đồng bộ hóa có nhận biết múi giờ sử dụng thời gian thiết bị local
  • Hỗ trợ RTC tích hợp đặc biệt cho Arduino Uno R4 WiFi
  • Giám sát trạng thái kết nối với chỉ báo WebSocket trực quan
  • Yêu cầu thời gian tự động khi tải trang để hiển thị ngay lập tức
  • Hoàn hảo cho đánh dấu thời gian, ghi log dữ liệu, lập lịch và tự động hóa dựa trên thời gian

12. Web Table (`/web-table`)

  • Bảng dữ liệu hai cột với cặp thuộc tính-giá trị để hiển thị dữ liệu có tổ chức
  • Cập nhật giá trị thời gian thực qua WebSocket để làm mới dữ liệu tức thì
  • Cấu trúc bảng có thể cấu hình thiết lập một lần trong hàm setup() của Arduino
  • Cập nhật giá trị động trong thời gian chạy mà không cần làm mới trang
  • Thiết kế responsive hiện đại với hiệu ứng hover và phản hồi trực quan
  • Giám sát trạng thái kết nối với chỉ báo WebSocket trực quan
  • Xử lý trạng thái trống với thông báo thân thiện khi không có dữ liệu
  • Khả năng làm mới thủ công với nút làm mới chuyên dụng
  • Kiểu dữ liệu linh hoạt hỗ trợ chuỗi, số và giá trị định dạng
  • Lưu trữ hiệu quả bộ nhớ với số dòng tối đa có thể cấu hình (mặc định: 20)
  • Yêu cầu dữ liệu tự động khi tải trang để điền bảng ngay lập tức
  • Hoàn hảo cho giám sát cảm biến, trạng thái hệ thống, hiển thị cấu hình và dashboard thời gian thực

13. Template CustomWebApp (`/custom`)

  • Template hoàn chỉnh để tạo ứng dụng web tùy chỉnh của riêng bạn
  • Giao tiếp WebSocket thời gian thực với lọc tin nhắn tự động
  • Thiết kế chuyên nghiệp dựa trên class với hệ thống APP_IDENTIFIER được đóng gói
  • Template thân thiện với người mới bắt đầu với tin nhắn văn bản đơn giản giữa web và Arduino
  • Chức năng kết nối lại tự động cho kết nối WebSocket đáng tin cậy
  • Thiết kế responsive mobile hoạt động trên điện thoại, máy tính bảng và máy tính
  • Hướng dẫn ngăn chặn xung đột để phát triển nhiều ứng dụng tùy chỉnh
  • Cấu trúc file module với HTML, logic Arduino và tích hợp thư viện riêng biệt
  • Framework có thể mở rộng - sửa đổi template để tạo ứng dụng phức tạp
  • Sẵn sàng tích hợp - hoạt động liền mạch với các DIYables WebApps khác
  • Hoàn hảo cho giao diện IoT tùy chỉnh, dashboard cảm biến, bảng điều khiển thiết bị và dự án giáo dục

🧩 Kiến Trúc Module

Tối Ưu Hóa Bộ Nhớ: Thư viện DIYables WebApps có thiết kế module cho phép bạn chỉ bao gồm các ứng dụng web mà bạn thực sự cần, giảm đáng kể việc sử dụng bộ nhớ trên Arduino của bạn.

Lợi Ích Chính:

  • Tích Hợp Có Chọn Lọc: Chỉ thêm các ứng dụng web cần thiết vào dự án của bạn
  • Hiệu Quả Bộ Nhớ: Mỗi ứng dụng web độc lập và tùy chọn
  • Có Thể Mở Rộng: Bắt đầu nhỏ và thêm tính năng khi cần
  • Tối Ưu Hiệu Suất: Ít ứng dụng hoạt động = hiệu suất tốt hơn

Cách Hoạt Động:

// Thiết lập cơ bản - chỉ bao gồm những gì bạn cần DIYablesWebAppServer webAppsServer(80, 81); DIYablesHomePage homePage; // Luôn được khuyến nghị DIYablesWebSliderPage webSliderPage; // Chỉ khi bạn cần slider DIYablesWebJoystickPage webJoystickPage; // Chỉ khi bạn cần joystick DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // Chỉ khi bạn cần analog gauge DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS); // Chỉ khi bạn cần rotator DIYablesWebTemperaturePage tempPage(-10.0, 50.0, "°C"); // Chỉ khi bạn cần temperature DIYablesWebRTCPage webRTCPage; // Chỉ khi bạn cần đồng bộ thời gian // Chỉ thêm các ứng dụng bạn muốn webAppsServer.addApp(&homePage); webAppsServer.addApp(&webSliderPage); // Bỏ qua ứng dụng bạn không cần webAppsServer.addApp(&gaugePage); // Chỉ thêm những gì bạn dùng webAppsServer.addApp(&tempPage); // để tiết kiệm bộ nhớ webAppsServer.addApp(&webRotatorPage); // Tùy chỉnh theo nhu cầu webAppsServer.addApp(&webRTCPage); // Thêm đồng bộ thời gian // Khởi động server - chọn phương thức phù hợp webAppsServer.begin("WiFi_SSID", "password"); // Kết nối WiFi // HOẶC // webAppsServer.begin(); // Cho kết nối Ethernet hoặc đã cấu hình trước (tương lai) // Quản lý runtime (nâng cao) if (sensorConnected) { webAppsServer.addApp(&webJoystickPage); // Thêm động }

Tính Linh Hoạt Runtime:

  • Quản Lý Động: Thêm hoặc xóa ứng dụng trong runtime sử dụng addApp() và removeApp()
  • Tải Có Điều Kiện: Tải ứng dụng dựa trên phần cứng hoặc cấu hình
  • Ứng Dụng Tùy Chỉnh: Tạo ứng dụng web tùy chỉnh bằng cách kế thừa từ DIYablesWebAppPageBase
  • Không Cần Biên Dịch Lại: Thay đổi ứng dụng có sẵn mà không cần rebuild

🔌 Tham Khảo API

Để biết tài liệu API hoàn chỉnh bao gồm tất cả class, method và ví dụ sử dụng, xem:

Tài Liệu Tham Khảo API

📋 Ví Dụ

Thư viện bao gồm hướng dẫn ví dụ toàn diện:

Mỗi hướng d

Bài hướng dẫn liên quan

Copyright © 2026 newbiely.vn. All rights reserved.
Terms and Conditions | Privacy Policy
Email: newbiely.com@gmail.com