---
# System prepended metadata

title: <center><i class="fa fa-edit"></i> Smart Dispenser Thingworx Suggestions   </center>
tags: [Internship]

---

# <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
### 主頁
![](https://i.imgur.com/iGuOy0V.jpg)

### 分布地圖
![](https://i.imgur.com/6Qz9w9p.jpg)

### 用水資訊
![](https://i.imgur.com/EvmrYjm.jpg)

## 設計圖內容
### 搜尋
![](https://i.imgur.com/N77JZxl.png)
### 新增資料
![](https://i.imgur.com/4ixxTFD.png)
* 更新成員資料, 新增成員資料 以及 新增班級的彈跳視窗
![](https://i.imgur.com/WTOaRxR.png)
![](https://i.imgur.com/aOKJm6O.png)
![](https://i.imgur.com/M6gdW5x.png)

---

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

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

--- 

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

**Key**

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


![](https://i.imgur.com/o4dZDLy.jpg)
- 點擊圖中Logo顯示飲水機資訊改成信息提示彈窗
![](https://i.imgur.com/rN3kGK7.jpg)

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

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

![](https://i.imgur.com/fpbslVq.jpg)

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