[Dashboard](http://192.168.1.223:8080/dashboard/a6977480-351e-11f0-b734-fda4e064d6df?publicId=59bb6e80-b1fe-11ef-8065-23a6bed1b7fa)

# Overview
建置智慧監控 0to1 詳細步驟

# 流程
## Step 1. 登入

## Step 2. 載入 Widgets bundles `0to1_VMS`
- `Widget Library` > `Widgets bundles` > `+` > `Import widgets bundle` > `Drag and drop` > `Import`

## Step 3. 設定 device profile
- 創建
- `Device profiles` > `+` > `Create new device0 profile` >
`Input Name` > `Next: Transport configuration` >
`Transport type` > `MQTT` > `Add`

- 匯入
- `Device profiles` > `+` > `Import device profile` > `Drag and drop` > `Import`

### Step 3.1. 設定 device
- New Device
- `Devices` > `+` > `Add new device` >
`Input Name` > `Choose Device profile` > `Next: Credentials` >
`MQTT Basic` > `Input Client ID` > `Input User Name` > `Add`

-

## Step 4. 創建 Dashboards
- `Dashboards` > `+` > `Create new dashboard` > `Title` > `Add`

### Step 4.1. 新增 States
- `States` > `+` > `Name and State Id` > `Add`
- 依照下列表格新增 State
| Name | State Id |
| ---- | -------- |
| default | default |
| 智慧監控 | camera_m |
| 即時影像 | camera-latest |
| 相機資訊 | camera_detail |
| 錄影紀錄 | camera-record |
| 車牌辨識紀錄 | camera-sLPR |
| 車輛白名單 | camera-whiteList |
| 新增名單 | add_white_list |
| 警告圖示 | alarms_icon |
| 系統紀錄 | zdataLog_m |
| 告警紀錄 | zdataLog-alarm |
| 違規紀錄 | zdataLog-violation |

- 通用設定 `layouts` > `layout settings`
- Margin between widgets `0`
- Background color `white`

### Step 4.2. 新增 Alias
- `Entity aliases icon` > `Add alias` > `Alias name` > `Filter type` > `Add`
- 依照下列表格新增 Alias
| name | Filter type | State entity parameter name | type | Resolve as multiple entities |
| - | - | - | - | - |
| camera selected | Entity from dashboard state | cameraState | Device | false |

| name | Filter type | Entities | Resolve as multiple entities |
| - | - | - | - |
| IP-Cam | Device type | `IP_CAM` | true |

### Step 4.3. 新增 Widget
- 自訂 widget 新增方式
- `Add widget` > `Widget bundles` > `Search 0to1_VMS` > `choose widget`

- 系統 widget 新增方式
- `Add widget` > `All Widgets` > `Search widget` > `choose widget`

- 於各別 State ，依照表格設定 Widget
- 通用設定 `Edit` > `Widget card`
| Display widget title | Drop shadow | Enable fullscreen |
| - | - | - |
| false | false | false |

- **default**
| widget name | CurrentState | HomePage |
| - | - | - |
| Dynamic State Widget With Menu nv | default | camera_m |


- **camera_m**
| widget name | Target |
| - | - |
| Row Tabs | camera_m |

| widget name | CurrentState | HomePage |
| - | - | - |
| Dynamic State Widget nv | camera_m | camera-latest |


- **camera-latest**
| widget name | Datasources(Type) | Entity alias | Data keys |
| - | - | - | - |
| ip-cam latest | Entity | IP-CAM | `Attributes active` `Attributes ip` |


- **camera_detail**
| widget name | HTML | CSS | Action |
| - | - | - | - |
| HTML Card | `HTML_code_1` | `CSS_code_1` | |

| widget name | Datasources(Type) | Entity alias | Data keys |
| - | - | - | - |
| ip-cam detail | Entity | camera selected | `Attributes ip` |
| HTML Value Card | Entity | camera selected | `Entity field name` `Entity field label` |
| Bars | Entity | camera selected | |


- **camera-record**
| widget name | Datasources(Type) | Entity alias | Data keys |
| - | - | - | - |
| ip-cam record | Device | CAM-P1465 | `Attributes ip` |


- **camera-sLPR**
| widget name | Datasources(Type) | Entity alias | Data keys |
| - | - | - | - |
| ALPR record | Device | CAM-P1465 | `Time series ip` |


- **camera-whiteList**
| widget name | HTML | CSS | Action |
| - | - | - | - |
| ALPR white list | | | |


- **add_white_list**
| widget name | HTML | CSS | Action |
| - | - | - | - |
| add white list | | | |


- **alarms_icon**
| widget name | HTML | CSS | Action |
| - | - | - | - |
| Alarm count (System widget) | | | |


# Code lib
- `HTML_code_1`
:::spoiler

<div class="header">
    <div id="back-to-camera" class="back-wrap" (click)="goBackToStyle()">
        <span class="material-icons">
            arrow_back
        </span>
        <div class="txt">回上一頁</div>
    </div>
</div>

:::

- `CSS_code_1`
:::spoiler

.header {
    height: 100%;
}
.back-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.back-wrap:hover {
    color: blue;
}

.txt {
    font-size: 14px;
    font-weight: 400;
}

:::

:::info
因 camera 缺少對應 APP ，故 `camera-sLPR` `camera-whiteList` `add_white_list` 無法運作
:::

## 參考文件
https://avantec-thingsboard.readthedocs.io/en/latest/intro/get-started.html#step-4-import-dashboards