# <center><i class="fa fa-edit"></i> Smart Dispenser Thingworx Suggestions </center>
###### tags: `Internship`
:::info
**Goal:**
To gain a basic understanding of the components of IoT technologies. Focus on any suggestions or improvements that can be made to the Thingworx Dashboard of the Smart Dispenser Project.
- [x] Overview
- [x] Suggestions (Based on Current Layout and 設計圖)

**Resources:**
[Smart Dispenser Project](https://hackmd.io/@RayCheng/HJk_YpRou)
[XinXing_Spec - formpage demo](https://140.118.122.115:5443/Thingworx/Runtime/index.html#mashup=XinXing_Spec&forceClose=true&__enableWC=true&__fromNextGen=e35b125d-96aa-4493-b958-06df1371a4be&features=)
[Thingworx Outcome設計圖](https://hackmd.io/@RenJhang/HkA6oH8G_)
:::

---
:::spoiler **Expand Catalog**
[TOC]
:::

---

## Overview
Dashboard和設計圖目前有注入有出入因為尚未完工。

---
## Dashboard
### 主頁

### 分布地圖

### 用水資訊

## 設計圖內容
### 搜尋
### 新增資料
* 更新成員資料, 新增成員資料 以及 新增班級的彈跳視窗

---

# Suggestions (Based on Current Layout and 設計圖)
現在的Dashboard總體上看起來有點凌亂和擁擠，所以我的建議將針對性減少這種情況，以減少文本和信息的數量為主。

---
## 主頁
- 垂直線（在設計圖上做區域分割的）沒有什麼太大必要，同時增加了顯示的擁擠度
- 分割區域我有以下兩種建議
1. 將不同區域的信息組織成長方形或正方形，方便閱讀
2. 用色塊兒區分

---

## 分布地圖
- 地圖有點模糊，由於地圖在屏幕的一半上，文字難以閱讀。建議把地圖在整個屏幕上水平顯示
- 飲水機狀況可以改成由顏色區分線上床框並且在地圖空白地方附上key

**Key**

| 顏色 | 對應情況 |
| -----| -------- |
| 綠色 | 持續上線中，飲水機情況良好 |
| 黃色 | 持續上線中，飲水機需要加水，情況良好 |
| 紅色 | 線下，飲水機需要維修 |

- 點擊圖中Logo顯示飲水機資訊改成信息提示彈窗

---
## 用水資訊
- 目前感覺圖形很多。用戶打开此頁面就被撲面而來的信息包圍了，會有點不知所措。我建議對它進行限制，改為下拉式菜單，只顯示一個空圖表。用戶可以自行選擇他們想要觀看的圖表。

---
## 搜尋 （以設計圖為準）
- 把查詢到的數據顯示改成table形式因該會更美觀。電機搜尋後再出示table
- `Must be bound to data` 可以改成黃色系或橙色系長方形背景色塊，然後放大，起到警示作用


---
:::success
目前針對設計圖上的 `新增資料` 沒有其他建議
:::