# Demo sandbox states [toc] ## Overview - 透過 State 的樹狀結構關係了解 Demo sandbox Dashboard，清楚呈現各功能頁面之間的邏輯關係。每個 State 代表一個功能分頁，方便用戶依需求快速切換與操作。 :::info - 設定於 223 環境 - Demo sandbox Dashboard 為 ServicePleX 的 Demo 版本 ::: ## Dashboard States - default (選單, [Dynamic State Widget With Menu](https://hackmd.io/@Vian/r1MLxllYj)) - analysis_m (數據分析) - analysis-all (分析總覽) - analysis-energy (用電分析) - alarms_icon (alarm圖示) - alarms_popover (按下alarm圖示跳出) - camera_m (數位監控) - camera-latest (即時影像) - camera_detail (相機資訊) - camera-record (錄影紀錄) - camera-sLPR (車牌辨識紀錄) - camera-whiteList (白名單) - add_white_list (新增名單) - environment_m (環境感測) - environment-latest (當日概況) - aqi_info (按下空氣品質區間) - environment-record (歷史數據) - home_m (地圖) - light_m (智慧照明) - light-latest (即時數據) - light-record (歷史數據) - light-schedule (排程設定) - light_schedule_popover (排程優先順位說明) - signage_m (數位看板) - signage-style (播放樣式) - add_style (新增樣式) - style_setting (編輯樣式) - signage-uschedule (排程設定) - signage-vfile (檔案管理) - upload_file (上傳檔案) - zdataLog_m (系統紀錄) - zdataLog-alarm (告警紀錄) - zdataLog-violation (違規紀錄) - ev_m (充電樁) (與 default 關係未知) - ev_latest (EV充電樁) --- ## States list UI - 開啟 State List 位置 ![Demo_sandbox_1](https://hackmd.io/_uploads/Sy5VUDn1lg.png) ![Demo_sandbox_2](https://hackmd.io/_uploads/BylPnLP3kgg.png) ![Demo_sandbox_3](https://hackmd.io/_uploads/r1KMPP31gg.png) --- ## States :::info explain - **`name`** - usage - `usage` - widget ( `widgets_count` ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Text | Text | Text | Text | - relation - parent : `state_name` - child : `state_name` `img` ::: ### add_style - **新增播放樣式** - usage - 新增版型，紀錄名稱、版型資訊 - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Add New Style httpClient md | 新增播放樣式 | Entity alias | dashboards | - relation - parent : `signage-style` - child : none ![image](https://hackmd.io/_uploads/B1rnLRpkxg.png) ### add_white_list - **add_white_list** - usage - 創建白名單，紀錄名稱、車牌、有效日期資訊 - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | add white list | 名單創建 | | | - `add white list` - 名單創建 - relation - parent : `camera-whiteList` - child : none ![image](https://hackmd.io/_uploads/Hk4M1d2Jlg.png) > [!Note] > **目前無法創建名單** ### alarms_icon - **alarms_icon** - usage - 顯示警報次數，點擊後顯示詳細資訊 - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Alarm count | 顯示警報次數 | Alarms count | | - `Alarm count` - 顯示警報次數 - relation - parent : `deflaut` - child : `alarms_popover` ![image](https://hackmd.io/_uploads/HyZCgO3Jee.png) ### alarms_popover - **alarms_popover** - usage - 紀錄警告程度、類別、設備、時間 - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Alarms table | 紀錄警告程度、類別、設備、時間 | Entity alias | Devices | - relation - parent : `alarms_icon` - child : none ![image](https://hackmd.io/_uploads/BJh_GunJee.png) ### analysis-all - **分析總覽** - usage - 顯示各類數據 - widget ( 10 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ------------ | | Horizontal temperature card | 溫度 | Device | ES-L0003 | | Horizontal humidity card | 濕度 | Device | ES-L0003 | | Horizontal temperature card | pm2.5 | Device | ES-L0003 | | Markdown/HTML Card | 空氣品質 | Device | ES-L0003 | | connection doughnut chart | 設備連線率 | Entity alias | Devices | | Doughnut | 今日入場分類佔比 | Device | CAM-BD05A | | Time series chart | 今日大門人流車流分析 | Device | CAM-BD05A | | overall energy use | 今日總用電量 | Device | | | Time series chart | 上週智慧桿用電度數 | Device | | | Doughnut | 上週能源使用 | Device | | - relation - parent : `analysis_m` - child : none ![image](https://hackmd.io/_uploads/SkQOEu31ee.png) ![image](https://hackmd.io/_uploads/Sk8FNu3kgg.png) ### analysis-energy - **用電分析** - usage - 顯示用電相關數據 - widget ( 4 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Doughnut | 上週能源使用 (kWh) | Device | | | Markdown/HTML Card | 目前功率、電流與電壓 | Device | | | Time series chart | 上週用電度數（度） | Entity alias | PDU energy | | Time series chart | 今日能耗 (kWh) | Entity alias | PDU energy | - `Doughnut` - 上週能源使用 (kWh) - `Markdown/HTML Card` - 目前功率、電流與電壓 - `Time series chart` - 上週用電度數（度） - Entity alias* `PDU energy` - `Time series chart` - 今日能耗 (kWh) - Entity alias* `PDU energy` - relation - parent : `analysis_m` - child : none ![image](https://hackmd.io/_uploads/HJ9oyK31gg.png) ### analysis_m - **數據分析** - usage - 數據相關選單功能 (分析總覽、用電分析) - widget ( 2 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Row Tabs | 選單 | | | | Dynamic State Widget nv | 選單頁面 | | | - relation - parent : `default` - child : `analysis-all` `analysis-energy` ![image](https://hackmd.io/_uploads/ryHMmY2kel.png) ### aqi_info - **aqi_info** - usage - 根據 AQI 數值分類 - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | HTML Card | AQI 空氣品質指標 | | | - relation - parent : `environment-latest` - child : none ![image](https://hackmd.io/_uploads/Hk-fsOn1ge.png) ### camera_latest - **即時影像** - usage - 顯示攝影機名稱、狀態，可全螢幕顯示，點擊攝影機影像顯示攝影機詳細資訊 - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | ip-cam latest | 顯示攝影機名稱、狀態，可全螢幕顯示 | Entity alias | IP-Cam | - relation - parent : `camera_m` - child : `camera_detail` ![image](https://hackmd.io/_uploads/H1q-2_2kxl.png) ### camera-record - **錄影紀錄** - usage - 選擇攝影機、日期、開始時間、結束時間，顯示錄影計入 ，回放功能 (預計加入攝影排程) - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | ip-cam record | 選擇攝影機、日期、開始時間、結束時間，顯示錄影紀錄，可回放功能 | Device | CAM-P1465 | - relation - parent : `camera_m` - child : none ![image](https://hackmd.io/_uploads/BkpX1tnygg.png) ### camera-sLPR - **車牌辨識紀錄** - usage - 顯示辨識紀錄 (時間、車牌、相機、地點)，含搜尋功能 - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | ALPR record | 顯示辨識紀錄 | Device | | - relation - parent : `camera_m` - child : none ![image](https://hackmd.io/_uploads/Hk-Glt2yll.png) ### camera-whitelist - **白名單管理** - usage - 顯示白名單 (車牌、生效日、截止日、別稱/單位)，含新增名單功能 - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | ALPR white list | 顯示白名單 | | | - relation - parent : `camera_m` - child : `alarms_white_list` ![image](https://hackmd.io/_uploads/ryfLZKnkeg.png) ### camera_detail - **`camera_detail`** - usage - 顯示攝影機詳細內容 - widget ( 4 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | HTML Card | 回上一頁 | | | | ip-cam detail | 攝影機畫面 | Entity alias | camera selected | | HTML Value Card | 相機資訊 | Entity alias | camera selected | | Bars | 今日人車統計 | Entity alias | camera selected | - relation - parent : `camera-latest` - child : none ![image](https://hackmd.io/_uploads/r1C4Cdh1lx.png) ### camera_m - **camera_m** - usage - 攝影機相關選單功能 (即時影像、錄影紀錄、車牌辨識紀錄、白名單管理) - widget ( 2 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Row Tabs | 選單 | | | | Dynamic State Widget nv | 選單頁面 | | | - relation - parent : `default` - child : `camera-latest` `camera-record` `camera-sLPR` `camera-whiteList` ![image](https://hackmd.io/_uploads/B1p4ztnkge.png) ### default ( **root** ) - **default** - usage - 選單，預設 `home_m` 為主頁，左側選單連結至其他頁面 - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Dynamic State Widget With Menu nv | 選單工具，預設為 `home_m` | | | - relation - parent : none - child : `analysis_m` `alarms_icon` `camera_m` `environment_m` `home_m` `light_m` `signage_m` `zdataLog_m` ![image](https://hackmd.io/_uploads/Bkayhk0Jex.png) ### environment-latest - **當日概況** - usage - 選擇設備，顯示各類環境數據 - widget ( 8 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | dropdown select2 | 選擇設備 | Entity alias | Environment Sensor | | Horizontal temperature card | 溫度 | Entity alias | Environment Sensor | | Horizontal temperature card | 濕度 | Entity alias | Environment Sensor | | Markdown/HTML Card | 連線狀態 | Entity alias | Environment Sensor | | Air quality index card | 當前空氣品質 | Entity alias | Environment Sensor | | Range chart | 空氣品質區間 | Entity alias | Environment Sensor | | HTML Value Card | 當前設備感測資料 | Entity alias | Environment Sensor | | Time series chart | 今日溫濕度趨勢 | Entity alias | Environment Sensor | - relation - parent : `environment_m` - child : `aqi_info` ![image](https://hackmd.io/_uploads/BJf2leCyge.png) ### environment-record - **歷史數據** - usage - 選擇設備及時間，顯示各類環境數據圖表，可下載成CSV檔案 - widget ( 12 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | dropdown select2 | 選擇設備 | Entity alias | Environment Sensor | | Date-range-navigator | 時間篩選 | | | | Download Btn | 下載檔案CSV | Entity alias | Environment Sensor | | Timeseries Line Chart | 溫度 | Entity alias | Environment Sensor | | Timeseries Line Chart | 濕度 | Entity alias | Environment Sensor | | Timeseries Line Chart | AQI 空氣品質指標 | Entity alias | Environment Sensor | | Timeseries Line Chart | PM2.5 細懸浮微粒 | Entity alias | Environment Sensor | | Timeseries Line Chart | PM10 懸浮微粒 | Entity alias | Environment Sensor | | Timeseries Line Chart | CO 一氧化碳 | Entity alias | Environment Sensor | | Timeseries Line Chart | NO2 二氧化氮 | Entity alias | Environment Sensor | | Timeseries Line Chart | O3 臭氧 | Entity alias | Environment Sensor | | Timeseries Line Chart | SO2 二氧化硫 | Entity alias | Environment Sensor | - relation - parent : `environment_m` - child : none ![image](https://hackmd.io/_uploads/SJfvQlAyll.png) ### environment_m - **environment_m** - usage - 環境感測相關選單功能 (當日概況、歷史數據) - widget ( 2 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Row Tabs | 選單 | | | | Dynamic State Widget nv | 選單頁面 | | | - relation - parent : `default` - child : `environment-latest` `environment-record` ![image](https://hackmd.io/_uploads/ryeNEx0kex.png) ### ev_latest - **ev_latest** - usage - 顯示 evCharge.png - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | HTML Card | 顯示圖片 | | | - relation - parent : `ev_m` - child : none ![image](https://hackmd.io/_uploads/H1qsBFC1le.png) ### ev_m - **ev_m** - usage - 顯示 ev_latest - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Dynamic State Widget nv | 顯示 ev-latest | | | - relation - parent : none - child : `ev_latest` ![image](https://hackmd.io/_uploads/H1qsBFC1le.png) ### home_m - **首頁** - usage - 顯示目前的 Assets ，點擊顯示當前設備狀態和部分訊息 - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Map Search staging | 地圖，顯示目前的智慧桿 | Entity alias | Smart Pole | - relation - parent : `default` - child : none ![image](https://hackmd.io/_uploads/rk4FHW0Jgx.png) ### light-latest - **及時數據** - usage - 選擇設備，顯示各類數據 - widget ( 9 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | dropdown select2 | 選擇設備 | Entity alias | Smart Light | | Markdown/HTML Card | 設備狀態 | Device | | | Markdown/HTML Card | switch | Entity alias | Smart Light | | light energy use | 當日累積度數 | Device | | | Horizontal temperature card | 電壓 | Entity alias | Smart Light | | Horizontal temperature card | 電流 | Entity alias | Smart Light | | Horizontal temperature card | 功率 | Entity alias | Smart Light | | Time series chart | 上週用電度數（度） | Entity alias | Smart Light | | Time series chart | 今日能耗 (kWh) | Entity alias | Smart Light | - relation - parent : `light_m` - child : none ![image](https://hackmd.io/_uploads/SkwQu-Cygx.png) ### light-record - **歷史數據** - usage - 選擇設備及時間，顯示各類數據圖表，可下載成CSV檔案 - widget ( 7 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | dropdown select2 | 選擇設備 | Entity alias | Smart Light | | Date-range-navigator | 時間篩選 | | | | Download Btn | 下載檔案CSV | Entity alias | Smart Light | | Timeseries Line Chart | 電流 | Entity alias | Smart Light | | Timeseries Line Chart | 電壓 | Entity alias | Smart Light | | Timeseries Line Chart | 功率 | Entity alias | Smart Light | | Timeseries Line Chart | 能耗 | Entity alias | Smart Light | - relation - parent : `light_m` - child : none ![image](https://hackmd.io/_uploads/rJRgKWRyel.png) ### light-schedule - **排程設定** - usage - 選擇智慧杆及排程設定方式，新增照明排程 - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | schedule light | 新增照明排程 | Entity alias | dashboards | - relation - parent : `light_m` - child : `light_schedule_popover` ![image](https://hackmd.io/_uploads/H1xuqbAyex.png) ### light_m - **light_m** - usage - 智慧照明相關選單功能 (及時數據、歷史數據、排程設定) - widget ( 2 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Row Tabs | 選單 | | | | Dynamic State Widget nv | 選單頁面 | | | - relation - parent : `default` - child : `light-latest` `light-record` `light-schedule` ![image](https://hackmd.io/_uploads/r1r2KbRJle.png) ### light_schedule_popover - **light_schedule_popover** - usage - 排程優先順位說明 - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | HTML Card | 排程優先順位說明 | | | - relation - parent : `light-schedule` - child : none ![image](https://hackmd.io/_uploads/BJjQiZ01ll.png) ### signage-style - **播放樣式** - usage - 播放樣式清單，可進入播放樣式編輯樣式內容 - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Signage Style Card httpClient md | 播放樣式清單 | Entity alias | dashboards | - relation - parent : `signage_m` - child : `add_style` `style_setting` ![image](https://hackmd.io/_uploads/SJIlhbRJel.png) ### signage-uschedule - **排程設定** - usage - 選擇螢幕、樣式、設定方式以新增排程，可查詢目前已有排程 - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Schedule edge sandbox httpClient md | 新增排程和查詢目前排程 | Entity alias | Edge | - relation - parent : `signage_m` - child : none ![image](https://hackmd.io/_uploads/H1VuhW0Jgg.png) ### signage-vfile - **檔案管理** - usage - 檢視檔案名稱、類型、上傳時間 - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Signage File Page httpClient md | 檢視檔案名稱、類型、上傳時間 | Entity alias | dashboards | - `Signage File Page httpClient md` - 檢視檔案名稱、類型、上傳時間 - Entity alias* `dashboards` - relation - parent : `signage_m` - child : `upload_file` ![image](https://hackmd.io/_uploads/BkuxpbR1ex.png) ### signage_m - **Signage** - usage - 數位看板相關選單功能 (播放樣式、排程設定、檔案管理) - widget ( 2 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Row Tabs | 選單 | | | | Dynamic State Widget nv | 選單頁面 | | | - relation - parent : `default` - child : `signage-style` `signage-uschedule` `signage-vfile` ![image](https://hackmd.io/_uploads/SJp8p-R1ll.png) ### style_setting - **style_setting** - usage - 編輯視窗內容及輪播時長 - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Style Setting httpClient md | 播放樣式詳細設定 | Entity alias | dashboards | - relation - parent : `signage-style` - child : none ![image](https://hackmd.io/_uploads/HyisCbRJgl.png) ### upload_file - **上傳檔案** - usage - 上傳 .png, .jpg, .gif, .mp4 檔案 - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Signage Upload File httpClient md | 上傳檔案 | Entity alias | dashboards | - relation - parent : `signage-vfile` - child : none ![image](https://hackmd.io/_uploads/rkLTyz0Jeg.png) ### zdataLog-alarm - **告警紀錄** - usage - 可設定顯示時間範圍，顯示告警數據 (程度、類別、設備、時間、狀態) - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Alarms table | 告警紀錄 | Entity alias | Devices | - relation - parent : `zdataLog_m` - child : none ![image](https://hackmd.io/_uploads/HkkQezR1xe.png) ### zdataLog-violation - **違規紀錄** - usage - 可設定顯示時間範圍，顯示違規類別及對應數據 (時間、車牌、車速、相機、地點) - widget ( 1 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | violation record | 顯示違規紀錄 | Device | CAM-BD05A | - relation - parent : `zdataLog_m` - child : none ![image](https://hackmd.io/_uploads/Sy7VWzAygl.png) ### zdataLog_m - **歷程資料** - usage - 系統紀錄相關選單功能 (警告紀錄、違規紀錄) - widget ( 2 ) | widget_title | usage | Datasources_type | Device/alias/... | | ------------ | ----- | ---------------- | ---------------- | | Row Tabs | 選單 | | | | Dynamic State Widget nv | 選單頁面 | | | - relation - parent : `default` - child : `zdataLog-alarm` `zdataLog-violation` ![image](https://hackmd.io/_uploads/ryuMzzAyxe.png) > [!Note] >- 命名規則需再規劃，目前依照層級使用 `-`, `_` ，可能存在混淆狀況 >，無法單獨修改，否則造成state關係出錯，需同步處理 >ex. 將 `camera-m` 改為 `camera_m` >修改前 : >![image](https://hackmd.io/_uploads/ryQ2npakxl.png) >修改後 : >![image](https://hackmd.io/_uploads/rkG53apyll.png) > >- [**JSON CRACK**](https://jsoncrack.com/) >JSON 分析工具 >免費版的 Graph 功能，限制檔案大小為 **300KB** 以下 > >- [**Alias types**](https://thingsboard.io/docs/user-guide/ui/aliases/) >可為靜態或動態，使用單或多種 entity， >選擇 Filer type (Single entity, Entity list, Asset type, Device type...) >於 widget 中操作