iFrame

Tính năng iFrame sử dụng để tích hợp và hiển thị nội dung từ các nguồn khác nhau vào một trang web hoặc ứng dụng IoT. Nó cho phép người dùng nhúng các trang web, widgets, hoặc ứng dụng khác vào giao diện của nền tảng E-Ra IoT mà không cần phải viết lại mã nguồn.

Human Detection iFrame

Industrial Dashboard iFrame

GPS Tracking iFrame

Home 2D iFrame

Home 3D iFrame

SmartHome iFrame

Hướng dẫn chi tiết cách tạo IoT Dashboard sử dụng iFrame

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 đè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 Widget 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 iFrame 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.zip được tạo mẫu sẵn sau đây về máy của bạn:

Link: https://github.com/eoh-jsc/era-widget-switch/raw/main/switch.html.zip

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.

Chú ý: Để thay đổi được chiều cao của Widget trên Mobile App cần thêm phần định nghĩa chiều cao cho iFrame Widget. Thêm cấu hình thuộc tính: "mobileHeight(heightvalue);" sau câu lệnh "eraWidget.ready();". Việc này đòi hỏi trong giao diện Widget bạn cũng phải lập trình hiển thị tương ứng.

Ví dụ để thiết lập độ cao Widget trên mobile app là 300 ta làm như sau:

eraWidget.ready();
mobileHeight(300);

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 chọn Configure, sau đó nhấn chọ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 ở góc dướ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ùng 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 tên "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.