###### tags: `iot-greenhouse` `lab` 返回[物聯網自動化溫室監控系統](/s/PJIS24sFR76axKI0xOrnjQ)
# 網頁功能總覽

**詳細介紹網頁上各種與開發板互動的功能，每一主題皆有影片操作示範。**
:::warning
:zap: 方塊程式目前還未支援部分瀏覽器，建議使用Chrome能有良好體驗。
:::
## 系統資訊
<center> <img src="https://i.imgur.com/LHQUxCM.png" width="50%" /> </center>

<br>

:::info
顯示開發板各項系統參數。
:::

| 名稱 | 功能 |
|:--------:|:-------------------------------------------------------------------------------------------------:|
| 裝置名稱 | 顯示自訂裝置名稱，點擊可設定。 |
| WiFi | 顯示已連上的WiFi，獨立模式表示未連上任何WiFi，點擊按鈕開啟[WiFi功能頁](#WiFi功能頁)。 |
| 訊號強度 | 顯示所連上的WiFi訊號強度，獨立模式下顯示 SAP mode[^sap]。 |
| SSID修改 | 更換開發板WiFi名稱與密碼，成功修改會跳出通知視窗，按reset重置按鈕後生效。 |
| 啟動時間 | 顯示開發板開機後所經過時間(秒)，重置或斷電重啟則從1開始。 |
| UART bps | 開發板上UART介面的[鮑率](https://zh.wikipedia.org/wiki/%E6%B3%A2%E7%89%B9%E7%8E%87)，點擊可設定。 |

:::warning
:zap: WiFi名稱若有重複則會連不上正確的裝置，設定時需先檢查周圍WiFi名稱，避免重複。
:::

[^sap]: SAP mode 右方數字意思
每次增加1表示有一個網頁連結到開發板，增加2表示同時有兩個網頁連結，最多允許同時三個網頁連結

## WiFi功能頁
<center> <img src="https://i.imgur.com/jG5g1v8.png" width="100%" /> </center>

<br>

:::info
提供各項WiFi設定功能頁面。
:::

| 編號 | 名稱 | 功能 |
|:----:|:------------:|:--------------------------------------------------------------------------------------------------------------:|
| 1 | 已連上WiFi | 顯示目前已連上WiFi名稱，獨立模式表示未連上任何WiFi。 |
| 2 | 搜尋WiFi | 搜尋並顯示附近可用WiFi清單。 |
| 3 | 重新連接 | 重新連上最後一次連過的WiFi，若無則不會有回應。 |
| 4 | 遠端IP | 點擊設定目標裝置IP，格式為 ==IP==:==PORT==，預設PORT為80。 |
| 5 | 更新IP | 點擊顯示設定中的遠端IP，若無則顯示 ==遠端IP 未設定==。 |
| 6 | 區網IP | 僅在開發板連至另一個開發板的WiFi時有效，點擊後顯示此開發板在區網下的IP位址，若逾時則跳出通知視窗。 |
| 7 | 可用WiFi清單 | 顯示目前可用WiFi，點擊後輸入密碼進行連線(若無密碼則直接確認)，成功後已連上WiFi名稱會更新，連線失敗時則無回應。 |

## 程式編輯區(JavaScript)
<center> <img src="https://i.imgur.com/mL6FADZ.png" width="100%" /> </center>

<br>

:::info
使用JavaScript運算、判斷、控制輸出及顯示輸入資料。
:::

| 編號 | 名稱 | 功能 |
|:----:|:----------------:|:-----------------------------------------------------------------------------------------------------------------:|
| 1 | 匯入 | 將保存的程式檔案匯入，格式為.json。 |
| 2 | 匯出 | 將目前的程式檔案匯出，可輸入檔案名稱。 |
| 3 | 終端 | 開啟/關閉[終端視窗](#終端機)。 |
| 4 | 切換編輯模式 | 切換JavaScript編輯與[方塊編輯](#程式編輯區(方塊程式))模式，預設為JavaScript編輯模式。 |
| 5 | 縮放編輯區 | 放大編輯區，隱藏訊息輸出區，增加編輯區空間，點即返回復原。 |
| 6 | 程式檔案選擇清單 | 可新增、選擇、刪除程式記錄，在==編輯區中修改程式皆會記錄至當下選擇的檔案中==。 |
| 7 | 範本Js新增清單 | 新增範本程式碼於編輯區中，目前有delay、console.log、if 判斷、for 迴圈。 |
| 8 | 執行 | 執行編輯區中的程式碼，若==以window.開頭定義的全域變數只執行一次==，==無任何delay下的其他程式碼以300毫秒為間隔不斷執行==。 |
| 9 | 停止 | 停止執行中的程式碼。 |
| 10 | 清除訊息 | 清除訊息輸出區中的文字。 |
| 11 | 清除全部 | 清除編輯區中的程式碼(覆蓋至當前選擇檔案)及訊息輸出區中的文字並停止程式碼執行，清除前會再次確認。 |
| 12 | JavaScript編輯區 | 程式碼編輯區，僅接受JavaScript程式語法，若有語法或其他錯誤，執行時會在訊息輸出區顯示錯誤訊息 |
| 13 | 訊息輸出區 | 顯示console.log的訊息及異常錯誤時的訊息 |

:::warning
:zap: JavaScript的基礎運用參考 - [JavaScript基礎語法與變數運用](/s/4CgYHd9BREiq0TwqEWpRKw)
:::

## 程式編輯區(方塊程式)
<center> <img src="https://i.imgur.com/FgHbstc.png" width="100%" /> </center>

<br>

:::info
使用方塊程式運算、判斷、控制輸出及顯示輸入資料。
:::

| 編號 | 名稱 | 功能 |
|:----:|:----:|:----:|
| 1 | 顯示/隱藏方塊 | 顯示/隱藏方塊元件區，每次從JS編輯模式切換時皆會顯示。 |
| 2 | 方塊JS預覽 | 切換方塊/方塊轉換JS程式碼顯示，若有缺少參數或其他錯誤時會跳出通知視窗。 |
| 3 | 方塊編輯區 | 放置方塊的編輯區，在編輯區中的方塊可以拖曳互換位置，而方塊無法被覆蓋。 |
| 4 | 方塊元件區 | 提供10種方塊使用，點擊並拖曳至方塊編輯區使用，部分方塊無法直接使用(資料、值、變數、邏輯、判斷)，需搭配其他方塊才能使用，參考下方[方塊功能簡介](#方塊功能簡介) |

### 方塊功能簡介

>以下介紹中，有標記的文字如==變數==代表變數方塊的意思。

:::warning
#### :zap: 由於設計上的限制，使用時需注意以下幾點，或參考影片示範會更容易使用。

- 需要從元件區拖曳才能將方塊包在==如果==中
- 已在編輯區中的方塊無法拖曳至==如果==中
- ==如果==不能包另一個==如果==
- 將==如果==包著的方塊拖曳離開時，便無法再放回==如果==中
- ==值==中的參數若要表示字串，需以雙引號""表示
:::

| 方塊 | 功能 |
|:-------------------------------------------:|:---------------------------------------------------------------------------------------------------------:|
|  | 取得開發板提供的資料，作為判斷的依據，需在==判斷==、==設定==、==顯示== 中使用。 |
|  | 拖曳至程式編輯區後，點擊可輸入任何數值及運算，需在==判斷==、==設定==、==控制==、==顯示== 中使用。 |
|  | 拖曳至程式編輯區後，點擊可輸入自定義變數，僅接受英文及部份特殊符號命名，需在==判斷==、==設定==、==控制==、==顯示== 中使用。 |
|  | 可選擇使用大於、小於、等於...等運算子，需在==如果==方塊中使用。 |
|  | 可放入兩個==變數==或==值==進行比較，需在==如果==中使用。 |
|  | 可放入==判斷==及==邏輯==，當判斷結果為真時，才會執行這個方塊底下被黃色所包覆的方塊。 |
|  | 拖曳至程式編輯區後，點擊可切換區域/全域變數(預設為全域)，左邊只能放==變數==，右邊可以放==變數==或==值==。 |
|  | 控制輸出與遠程控制與請求，可放入==變數==或==值==設定參數。 |
|  | 輸出資訊於程式編輯區下方的訊息區，可放入==變數==或==值==。 |
|  | 等設定時間結束後才往下執行其他方塊，預設為300毫秒。 |

### 影片示範(待更新)

## 終端機

<center> <img src="https://i.imgur.com/ka7DBuB.png" width="100%" /> </center>

<br>

:::info
文字命令介面，提供文字輸入方式設定開發板各項參數。
:::

| 名稱 | 功能 |
|:----:|:----------------------:|
| 傳送 | 發送文字命令給開發板。 |
| 清除 | 清除訊息文字。 |

### 指令一覽

參考[內建Js參數及功能總覽](/51F8nDF3Ss6M2DmGoRJQbA)

### 影片示範(待更新)

## 其他區塊

### 溫室端 - 空氣溫度
<center> <img src="https://i.imgur.com/1OmszZh.png" width="50%" /> </center>

<br>

:::info
即時顯示空氣溫度資訊，RAW為感測器原始資料，圖表及下方數字顯示需輸入轉換程式才會正確顯示。
:::

### 溫室端 - 空氣濕度
<center> <img src="https://i.imgur.com/WA4o0k1.png" width="50%" /> </center>

<br>

:::info
即時顯示空氣濕度資訊。
:::

### 溫室端 - 土壤濕度
<center> <img src="https://i.imgur.com/v6ybCZn.png" width="50%" /> </center>

<br>

:::info
即時顯示土壤濕度資訊。
:::

{%youtube Jc-65WBXu_8 %}

### 溫室端 - 風扇狀態
<center> <img src="https://i.imgur.com/qPhQXz6.png" width="50%" /> </center>

<br>

:::info
即時顯示風扇狀態資訊。
:::

{%youtube YAxTruekRBs %}

### 幫浦端 - 壓力狀態
<center> <img src="https://i.imgur.com/Prhdz45.png" width="50%" /> </center>

<br>

:::info
即時顯示裝置壓力資訊。
:::

### 幫浦端 - 電磁閥控制
<center> <img src="https://i.imgur.com/jkQxoYr.png" width="50%" /> </center>

<br>

:::info
即時顯示各站電磁閥資訊與手動控制。
:::

### 幫浦端 - 外部通知
<center> <img src="https://i.imgur.com/2RBO59U.png" width="50%" /> </center>

<br>

:::info
即時來自溫室端的控制請求。
:::

### 幫浦端 - 已連接裝置
<center> <img src="https://i.imgur.com/DouFT34.png" width="50%" /> </center>

<br>

:::info
當有溫室端連上幫浦端wifi並更新區網IP時，顯示連接溫室端的名稱及IP。
:::

{%youtube W4UF5aPdkAs %}

<a class="btn btn-warning" style="width:100%;color:#333333;" href="/s/6m3A90ogQwK4LpYYSxrxEQ" role="button"> 感測器數值轉換與校正 **&#8680;** </a>

<a class="btn btn-primary" style="width:100%;" href="/s/97x7o1_GRIKzZ9vIvpAxyQ" role="button"> **&#8678;** 抽水幫浦與電磁閥簡介
</a>