# 5-5 網頁遠端監控LED

## **建立產品原型**

**進入MCS Lite網頁後，第一步需建立產品原型，按創建。**

![](https://lh5.googleusercontent.com/jyf4Sx380tn2kdna1BbMmWpJErWLyYnm8L73xUBAmi_bStHBGwKCIurq26HtO7QsAueuDtiB7y7MwQ3pEsNzEOVM5aIBIbcsrOWD4Kit_DNAmHqrRROhpJIRN6_cmQyAsf7YaL56IJAnIFxAZw)

* **選擇創建方式選輸入原型資訊**
* **產品原型名稱輸入LED Control**
* **產品原型版本輸入1.0**
* **按下儲存。**

![](https://lh6.googleusercontent.com/ruK43Krh920cpqt70wgjwgC47UNQF_Ljg7kuckTjS-gUBMxldsOHLro_g6IDPFYwuJhHluuHJ-hchcFyJaUA5H54xWRVam5YN68Utj1XKuvOeoGoqB2dIZnHawh4OOBBb3UwaeB9toZnm5N_Fw)

## **建立LED控制的資料通道**

**在產品原型名稱處按下剛建立的LED Control。**

![](https://lh4.googleusercontent.com/3IEeKRWyHkdIUw6lpRlrl6G-3YIr38CkiOhbSiwG9cICfPNV_4K68nDv2jsTZ1vQQrmMvS4NT40UvgPnG3vAEcvhKLZ9mouyKwOHHjaWDDQuvfGFwucBIqQ7qntSgufKJ0SYoV0zm9WlL_JGPw)

**按下新增。**

![](https://lh3.googleusercontent.com/4ZbiuOBpd4TqYjR40kPuNzQtSzvR8nO7t8AquhFT6EPBVSKhWTEgb-M-PTiurVcCUOzkfZGgZ5mRZRnqIv1MAnBli_ZAnjiv57vs7H35TUUtxwihYURyuBygESjBO36STYwbN6UTzc9PVGeyqQ)

**在新增資料通道的控制器下，點選新增。**

* **輸入資料通道名稱LED\_Control**
* **資料通道id輸入LED\_Control(選了就無法再改)**
* **資料型態選開關**

![](https://lh3.googleusercontent.com/C1w8ekwWgd2z7c6rBNbDtXAMjrCqReRDEvEFhd2VA7iApV4s6HEKDGK92gIXBleLO2s2mWHx5MqGWubvEdDP3sa_dK8R85xOdeKeFIyKNincviaBQ_4uKirKQ3q8qw-676moMQwnY6DMC36mwg)

**LED的控制的資料通道建立成功。**

![](https://lh6.googleusercontent.com/WKAF-go6UkxmAmdQD1C7Qtwq6aU9kOZ2ArAqYjB1GPDZV7GQP_UNiL9GKEIC9-QQJsbSkkP7hx5j5UHMHaLAH_5GwOESBq5rt-jKUg15hDP3JkNvgcw0l8h5oCK5jxsiXgv2y3xBhV9jNbX6Sw)

## **建立LED顯示的資料通道**

**按下新增。**

![](https://lh4.googleusercontent.com/dHuNPOYSWj2G3pCyz7fO9gooqgA6r5p71N-jIwn4VWmnYVoQAgrypexfXGnV7PgqUadKva_yta43Vwe1uPN--_iLqsvh4-r6gSODvgzjF-LUzfVOmJ4xgxvorFsU_W5ppPBrY3TxtaVp_mqZTw)

**在新增資料通道的顯示器下，點選新增。**

![](https://lh6.googleusercontent.com/l76isNk-7A3lM9y7J7vojCz0gF5xuaMPAjteYm2Jdd6m1GgEIvcu7sQA6B5roxWOfaYhSXBA8-ilWsFXUscBmbvb9wcyE6uI4j17iRBd-H4NDG3_aBYxnUMEthl7hgsU3SGQwIkdWUrtNsPktQ)

* **輸入資料通道名稱LED\_Status**
* **資料通道id輸入LED\_Status (選了就無法再改)**
* **資料型態選開關**

![](https://lh5.googleusercontent.com/bHR4WW22xm2e6nSOD1rl4Zq3cNbFvsebzj5YafdWixjmn4X78AzCBSnND8TmUZEc4jey4lcaO73LPJ_8OsNJ9TdmLdW4CXtsFhj93c89pP7mEUomf4x5dSBXN75NWaMkHdNuOCRbgLTkFzcgRg)

**LED的顯示的資料通道建立成功。**

![](https://lh5.googleusercontent.com/Vei2-g0acDcalLNokFLmnAgNkvkpRzDBDvqAyJnqfdAt5hKIVyTOeNk_zcDXUC8G4BdXi1IOBWLcw0DDfEeELsaSq2ZDnjs3p0m_7ehtpITXhDbcraqbeEG-trE6gt_4bOaxy7FVUE8P2Na3dA)

## **建立測試裝置**

![](https://lh3.googleusercontent.com/eLPyjGRnZHSYae-CM_5i_0qQQMpuibNAURQd0uv7wrvGps3lGM7hgOBsb2TurL5mWJlE5wQmk7vBJfNULhgYjrETLesAGJ-3yMCprGvyJGhGhe5Bh6A-AZo6zKvQK8ENBN-R620wXfG9tjDJzw)

**測試裝置名稱輸入LED\_Control ，再按下儲存。**

![](https://lh6.googleusercontent.com/s30FVFrXmlSR15CijCsJMGtYu-s1ofeGv8iyZ4b75KyIUWUpCifWOLJhyRQNmIzu2dQRMwx4xGy2-QvKVG7QA6Kip91njinB0n03YbcME-EilpGsUqIvflOJGr5CdFq-eNhlybrug3LcY_lwRA)

**建立測試裝置成功，會產生DeviceId和DeviceKey，在撰寫監控LED的程式時會使用到。**

![](https://lh6.googleusercontent.com/r3li1QKnjM8a6ouAG5Md9CZ8EnhsF-X77Oyhb98VGjmR3ReAO08DXSbCnyiOETZsBiSgBjH3PM4V26CJrboOxYIJjM7muKrnJ8sLpr0jWE1pdMCeFDTng_shA_GiusEZvq6Hfi-_YNJ0hzVb8Q)

## **撰寫LED監控程式**

![](https://lh3.googleusercontent.com/HT3h5Sgh6O7UivuFPEiAAOrb_hhrxuH5HUnABNY_f-AGft1tR-9CrT1ZpftqfY2E7SNhcd6PO-waLxARaDikFsoA1ShqXie90bpnB0PjTljLyNoQ9TL8CWT-dUtg01OREHD_XSy4O5L7ZnYUig)

## **執行結果**

**MCS Lite 網頁中測試裝置的操作及顯示結果**

![](https://lh5.googleusercontent.com/O8fDwXgxvPVBVnhCf_oJqWW8iATjVKdO4rbHqWi1glds4TqiEBsDnFuVQCaRi2wlvOeuj_dbIEO-oehKi9DDuZuOdhHQ8e2NOt1CGUaG72zDd__CgvnL8Kjfhv8IkxFDfb7VdnTGoPPobmyN5g)

**當MCS Lite控制通道更新時，序列埠視窗上的結果顯示。**

![](https://lh4.googleusercontent.com/whAPiIgPm_32GfHOoshsW9-otoNbjnpyk2FI83fWXIDJJJ22OgQcny1eIMHKnX4Z8CsvzQnPKzf2iDalftUZf0KV7CFHMUN2ZcTjE8zwc19mL5mlzaKoWHCQ8bbzE9MZ0Vts_Ej7LzIaF6vLag)

![](https://lh5.googleusercontent.com/Pn-la8uD2rSE5NQVzTduT5vAJoBqvbIu_joeTGzsiaep-sxupvb-WkBhSDe_3AyJq-oe0mTrUExk0hnFT3XSLjQKGcYPmMTSQNwf8SJeUiwBfkSWom6SrWIYz1_VhaYaj_LqZfreYbxp_DCOXQ)
