1 of 11

VPython Device Application� and �12/22練習題

蔡文能

交通大學資訊工程系

2020/12/22

IoTtalk System

2 of 11

Agenda (大綱)

  • Vpython Device Ball-throw2
    • 開啟 Ball-throw2 並抓回 html, dai.js, dan.js, .py
    • 修改 html, dai.js, .py (若要改 d_name 則在 dan.js)
  • Vpython Device Ball-throw1
    • 抓回 .py 檔案即可, 其它用前面抓回的
    • 把這 .py 直接 copy 到前述 .py 即可
    • 修改 .py 檔案, 參考 https://iottalk.vip/b1/
  • Vpython Device(s) 在自己電腦上的網站
  • 更多DEMO
    • 補充說明 12/22重做之前 Ball-throw1 (Week07)的習題

2

3 of 11

關於 VPython Device Application

  • 所有的 VPython Device 的 DA 都 ..
    • 使用相同的一支 HTML
    • 使用相同的 .js 程式庫(廢話, 因為 HTML 同一支)
    • 根據 HTML結尾#WhichDevice 抓 WhichDevice.py
      • 這由 dai.js 負責
  • 注意 dai.js 內重點: (d_name 在 dan.js 內)
    • 要連去哪個 IoTtalk server
    • 要去哪個地方抓 .wav 檔案
    • 要抓哪個 .py 檔案 (VPython DA 的 .py 檔案)

3

4 of 11

準備工作

  • 建立一個測試用目錄, 例如 test543\vv
  • 建立 Python 虛擬(隔離)環境
    • python –m venv ggyy
  • 如何啟動該虛擬隔離環境 (離開只要打 deactivate )
    • ggyy\Scripts\activate
  • 建議 ..
    • 用 Python 的 IDLE 修改 .py 檔案
    • 用 notepad++ 修改 .js 檔案 和 .html 檔案
    • 必要時用 notepad 幫忙另存新檔改編碼為 UTF-8
    • 用 CMD 視窗執行命令; 記得啟動虛擬隔離環境

4

5 of 11

先不必用到 Flask 網站

  • 先測試 Ball-throw2 (因為有聲音)
    • 抓回 Ball-throw2.py (我偷懶故意改名 b1.py)
  • 我故意把 HTML 檔案改名 haha.html
  • 確認 HTML 會抓自己電腦上的:
    • dai.js
    • dan.js (若不改 d_name 可不用抓回這)
  • 確認 dai.js 會..
    • 會抓自己電腦上的 .py
    • 會抓 Server 端的 .wav (播放聲音用)
    • 會連去我們希望連的 IoTtalk Server

5

6 of 11

抓回並修改 Ball-throw1.py

  • 抓回 Ball-throw1.py 並 copy 蓋掉前述 .py
  • 重新測試同一支 HTML

​

  • 參考 https://iottalk.vip/b1/ 修改 .py 檔案
    • 直接 copy 來換掉剛剛的 .py 檔案即可
    • 但建議稍為研究一下 VPython code
    • 建議即使不想加分(可能懶得繳交)也要練習加分題

6

7 of 11

Python + Flask 建立網站

  • 在自己 PC 上即可 (MAC 或 Linux 也都可)
    • 這裡用 Windows 為例
  • 參考 https://iottalk.vip/b1/
    • 建立一個子目錄 templates 並把 haha.html 放入
    • 建立一個子目錄 static
      • 把兩個 .js 和那個 .py 都放入這 static 子目錄　
    • 建立一個 flask web application 的 .py 檔案
      • 假設叫 w80.py
      • 這檔案不要放到前述兩子目錄內 (要與該兩子目錄同層)
    • 修改 haha.html 指到正確 .js; 修改 dai.js 指到正確 .py
      • http://127.0.0.1/static/檔案名稱
    • 執行 python w80.py

7

8 of 11

注意！注意！注意！

  • 如果 Vpython .py 檔案有錯,�必須清除瀏覽器的快取(cache) 資料再繼續 ！

8

9 of 11

12/22習題

(1)把 Ball-throw1 的 DA 弄在自己電腦跑 (類似之前抓Bulb回自己電腦跑);

參考 https://iottalk.vip/b1/

規定: Due: 2020/12/28(一)23:59:59

(a)HTML檔案, dai.js, dan.js, Ball-throw1.py 這四個都要在自己電腦上

(b)上述兩個 .js 和 一個 .py 可以用本機檔案也可以搭配 Flask 在自己電腦的Web Server;

把 HTML 也放自己網站更好! 這部分會另外提供影片檔 demo 並說明! (其實都很簡單)

(c)不可以寫任何連結線上的函數, 就是說要全部設定 Disabled

(d)可以修改各 ODF 的 [Min, Max], 不過注意改了會影響其他人, 也可能被其他人影響:-)

不過既然 DA 主要程式碼在自己電腦, 其實你也可改 dm_name 搭配自己建立新 DM 名稱;

(e)Speed一定要用 Dummy_Device 從鍵盤上輸入; 且 Speed 這ODF 的上下限請設 [0, 0]

(程式碼參考 DAI2 即可, 或用你之前自建的 Dummy_Device也可)

(f)Angle 和 Height 用新 RemoteControl 但自己決定用哪個功能

(2)繳交: 12/28(一)23:59:59之前(心得 + 圖片 + 必要時對圖片簡單解說); 不必拍攝影片!

(a) 心得至少 55字, 至多 355字; (加分題總該多一點心得:-)

(b) 測試過程抓有代表性的螢幕截圖, 至少 8張, 至多 12張

再說一次: 卡通小美人魚裡有經典名句:

　　 Life is Full of Choices. You can NOT have it all.

至少要看看影片以及同學心得！

9

10 of 11

End of the Lecture�2020/12/22�參考 https://iottalk.vip/b1/� �Vpython DA

  • Taking a break is for accomplishing a longer journey.
  • Life is Full of Choices. �You can NOT have it all.

10

11 of 11

謝謝捧場

tsaiwn@cs.nctu.edu.tw

蔡文能

https://iottalk.vip/000

http://iottalk.club

備用測試網站

入門使用手冊

11

VPython Device Application� and �12/22練習題