This document discusses setting up and customizing widgets for remote monitoring. It introduces Azure IoT environment and open source remote monitoring solutions. It explains the basic infrastructure, installation requirements, and how to use and customize the interface. It provides links to documentation and resources for customizing widget settings and integrating external data.

1. Caesar Chi
Remote monitoring
widget setup and customization
EXMA-Square

2. Agenda
Azure Iot 環境簡介及數據困境
Open source 解決⽅案 - Remote Monitoring Solution with Azure IoT
基礎架構說明及安裝需知
使⽤介紹及安裝
客製化設置及內部組件建立介紹
客製化設置加入外部數據

6. 雲端架構
企業內部開發

7. 雲端架構
企業內部開發
操作介⾯
數據視覺

9. https://azure.microsoft.com/zh-tw/resources/videos/iot-remote-monitoring-demo/

10. Remote
Monitoring
UI
https://github.com/Azure/pcs-remote-monitoring-webui

11. 需要具備基本概念
• JavaScript
• Node.js
• React / Redux
• Bootstrap

12. ⽀援公司與法律疑問
執⾏單位 ⽀援公司 授權範圍
JavaScript JS Foundation
Microsoft / Google / Firefox /
Apple …
MIT
Node.js JS Foundation Microsoft / Google / Netflix … MIT
React / Redux Facebook
Facebook / Microsoft / Twitter
…
MIT
Bootstrap Twitter Twitter / Microsoft / Google … MIT

13. 運作介紹
https://github.com/Azure/pcs-remote-monitoring-webui

14. npm install
套件安裝

15. npm run start
啟動指令

16. 客製化
Widget
https://github.com/Azure/pcs-remote-monitoring-webui

17. https://getbootstrap.com/docs/5.0/layout/grid/

18. https://getbootstrap.com/docs/5.0/layout/grid/

19. https://getbootstrap.com/docs/5.0/layout/grid/

20. https://getbootstrap.com/docs/5.0/layout/grid/

21. https://getbootstrap.com/docs/5.0/layout/grid/

22. https://getbootstrap.com/docs/5.0/layout/grid/

23. Maintenance - Error tasks management

25. https://azure.microsoft.com/zh-tw/resources/videos/iot-remote-monitoring-demo/

26. Make the World
Better
Thanks
https://exma-square.co/