---
# System prepended metadata

title: VMS Sandbox - 0to1

---


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

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

# 流程
## Step 1. 登入
![image](https://hackmd.io/_uploads/BynbN26-xl.png)

## Step 2. 載入 Widgets bundles `0to1_VMS`
- `Widget Library` > `Widgets bundles` > `+` > `Import widgets bundle` > `Drag and drop` > `Import`
![VMS sandbox widget bundle png](https://hackmd.io/_uploads/H1jUchaZeg.png)

## Step 3. 設定 device profile
- 創建
  - `Device profiles` > `+` > `Create new device0 profile` >
  `Input Name` > `Next: Transport configuration` >
  `Transport type` > `MQTT` > `Add`
  ![VMS sandbox Create device profile 1 png](https://hackmd.io/_uploads/HJ7r55fflx.png)
  ![VMS sandbox Create device profile 2 png](https://hackmd.io/_uploads/H1mBn5MGex.png)
  ![VMS sandbox Create device profile 3 png](https://hackmd.io/_uploads/rk7B2cGfxg.png)

- 匯入 
  - `Device profiles` > `+` > `Import device profile` > `Drag and drop` > `Import`
  ![VMS sandbox Import Device profiles png](https://hackmd.io/_uploads/SJ6AinT-lg.png)

### 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`
  ![VMS sandbox Create device 1 png](https://hackmd.io/_uploads/ByFyTqMfxl.png)
  ![VMS sandbox Create device 2 png](https://hackmd.io/_uploads/rJz5pcMGgx.png)
  ![VMS sandbox Create device 3 png](https://hackmd.io/_uploads/SklVZ09ffge.png)
  
- 


## Step 4. 創建 Dashboards
- `Dashboards` > `+` > `Create new dashboard` > `Title` > `Add`
![VMS sandbox Create new Dashboard png](https://hackmd.io/_uploads/SJEKq3pZxl.png)

### Step 4.1. 新增 States
- `States` > `+` > `Name and State Id` > `Add`
![VMS sandbox Create States png](https://hackmd.io/_uploads/SJ4l62aWel.png)
- 依照下列表格新增 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`
![VMS sandbox Create Alias 1 png](https://hackmd.io/_uploads/SJpPep6-xl.png)
![VMS sandbox Create Alias 2 png](https://hackmd.io/_uploads/ryTDxaaWeg.png)
- 依照下列表格新增 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`
  ![image](https://hackmd.io/_uploads/SJUdS8bfle.png)
  ![VMS sandbox add widget 2 png](https://hackmd.io/_uploads/H17mI8Zflx.png)
  ![VMS sandbox add widget 3 png](https://hackmd.io/_uploads/ByfOI8Zzxe.png)

- 系統 widget 新增方式
  - `Add widget` > `All Widgets` > `Search widget` > `choose widget`
  ![image](https://hackmd.io/_uploads/SJUdS8bfle.png)
  ![VMS sandbox add widget 4 png](https://hackmd.io/_uploads/ryGDDUbMeg.png)
  ![VMS sandbox add widget 5 png](https://hackmd.io/_uploads/ryDhDUWMgg.png)

- 於各別 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 |
  
  ![image](https://hackmd.io/_uploads/HkWw78-zll.png)


- **camera_m**
  | widget name | Target |
  | - | - |
  | Row Tabs | camera_m |
  
  | widget name | CurrentState | HomePage |
  | - | - | - |
  | Dynamic State Widget nv | camera_m | camera-latest |
  
  ![image](https://hackmd.io/_uploads/BJ0_mI-Mxg.png)

- **camera-latest**
  | widget name | Datasources(Type) | Entity alias | Data keys |
  | - | - | - | - |
  | ip-cam latest | Entity | IP-CAM | `Attributes active` `Attributes ip` |
  
  ![image](https://hackmd.io/_uploads/SkS578-zex.png)
  
- **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 |  |
  
  ![image](https://hackmd.io/_uploads/BkLhXIbflg.png)
  
- **camera-record**
  | widget name | Datasources(Type) | Entity alias | Data keys |
  | - | - | - | - |
  | ip-cam record | Device | CAM-P1465 | `Attributes ip` |
  
  ![image](https://hackmd.io/_uploads/rJ667IZGel.png)


- **camera-sLPR**
  | widget name | Datasources(Type) | Entity alias | Data keys |
  | - | - | - | - |
  | ALPR record | Device | CAM-P1465 | `Time series ip` |
  
  ![image](https://hackmd.io/_uploads/Sy-kEIbzeg.png)

- **camera-whiteList**
  | widget name | HTML | CSS | Action |
  | - | - | - | - |
  | ALPR white list |  |  |  |
  
  ![image](https://hackmd.io/_uploads/ryKeNIbfxg.png)

- **add_white_list**
  | widget name | HTML | CSS | Action |
  | - | - | - | - |
  | add white list |  |  |  |
  
  ![image](https://hackmd.io/_uploads/ryzz4LbMeg.png)

- **alarms_icon**
  | widget name | HTML | CSS | Action |
  | - | - | - | - |
  | Alarm count (System widget) |  |  |  |
  
  ![image](https://hackmd.io/_uploads/r1cmE8WGeg.png)

# Code lib
- `HTML_code_1`
:::spoiler
```html=
<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
```css=
.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