HOT Tính Năng iFrame

New Update 07/2024

Tính năng iFrame trên Nền tảng IoT E-Ra sẽ mang đến cho bạn khả năng tạo ra một phiên bản IoT Dashboard của riêng mình với sự tùy biến cao nhất! Bạn có thể tự xây dựng ý tưởng, giao diện mới, giải pháp mới cho các dự án của mình như Human Detection, Map Tracking, 2D, 3D Visualization...v.v.

Kết quả mong đợi

Sau khi hoàn thành hướng dẫn này, bạn sẽ tạo thành công một giao diện nút nhấn mới cho phép bật/tắt đèn LED, và theo dõi trạng thái của nó theo thời gian thực.

Chuẩn bị trước

Bạn cần đảm bảo đã có sẵn một unit và đã kích hoạt một gateway hoạt động online.
Cấu hình datastream và action để điều khiển đèn LED.
Cấu hình giao diện nút nhấn để bật/tắt đèn LED, đảm bảo nút nhấn của bạn hoạt động ổn định và điều khiển chính xác.

Khi mọi thứ đã sẵn sàng, chúng ta sẽ bắt đầu tạo widget mới.

Bước 1: Đăng nhập vào tài khoản GitHub

Truy cập vào GitHub và đăng nhập bằng tài khoản của bạn.

Bước 2: Tạo một Repository mới

Truy cập vào GitHub Repository để tạo một repository mới.
Điền thông tin:
- Repository name (tên repository) bắt buộc.
- Description (mô tả) tùy chọn.
- Chọn Public.
- Chọn Add a README file.
- Nhấn Create repository để hoàn tất.

Bước 3: Đưa file HTML lên GitHub

Tải fileswitch.html.zipvề máy của bạn nhấp vào đây để tải
Giải nén ra bạn sẽ thấy file index.html
Thêm file index.html này vào repository mà bạn vừa tạo ở bước 2.

Bước 4: Kích hoạt GitHub Pages

Vào Settings của repository, sau đó chọn Pages.
Trong trang GitHub Pages, tìm đến mục Source, chọn GitHub Actions.
Tại mục GitHub Pages Jekyll, nhấn Configure, sau đó nhấn Commit changes.

Vào mục Actions, chọn Create jekyll-gh-pages.yml.

Đợi quá trình hoàn tất cho đến khi xuất hiện dấu tick xanh.

Bước 5: Lấy URL trang GitHub Pages

Sau khi hoàn tất các bước trên, ở phần Deploy, bạn sẽ thấy một đường dẫn (URL). Hãy sao chép URL này, vì bạn sẽ cần sử dụng nó trong Bước 6.
Khi nhấn vào đường dẫn một tab mới sẽ mở ra và bạn sẽ thấy widget switch mới của bạn.

Bước 6: Cấu hình iFrame with config

Truy cập vào Dashboard Units và chọn Unit của bạn.
Nhấn Edit Dashboard.
Ở phần Widget Box (nằm ở cuối cùng bên trái), sau đó kéo và thả widget iFrame With Config vào Dashboard của bạn.
Nhấp vào biểu tượng bánh răng (⚙️) ở góc phải trên của widget để bắt đầu cấu hình widget iFrame With Config

Điền đầy đủ các thông tin Khu vực, Thiết bị hiển thị.
URL: Dán URL bạn đã sao chép từ Bước 5.
Giá trị hiện thời (Realtime Configs): Tạo một giá trị mới và nhập datastream "Trạng thái LED" của bạn vào.
Hành động (Actions): Tạo hai 2 giá trị mới, đó là 2 hành động bật và tắt đèn LED của bạn.
Sau khi hoàn tất cấu hình, nhấn OK để lưu lại.