###### tags: `blogger` date: `2018.04`
:::danger
本文章為舊版Blogger內容轉移，目前暫停維護
:::

# 使用 Arduino D1 製作 Wifi 自走車(下)
(搭配 AppInventor 2， IpCam）<span style="color:red">(107.12.16更新：範例檔載點)</span>

<p style="text-align:center;"><img src="https://1.bp.blogspot.com/-ma23UwY2gSA/YP55ICnzShI/AAAAAAAAWU8/nSWJwQdIRkABVu5NPTdDr7HqD052SZD1QCLcBGAsYHQ/s320/qEClYDv.jpg" width="40%"></p>

**&emsp;&emsp;如果你還沒有看過[使用 Arduino D1 製作 Wifi 自走車(上)](http://bo-sgoldhouse.blogspot.tw/2018/04/arduino-d1-wifi.html)這篇文章，建議你先去看看歐。**

## 六.即時影像傳輸
* 本專案選用的即時影像傳輸介面為[IP摄像头-Google Play](https://play.google.com/store/apps/details?id=com.pas.webcam)
<p style="text-align:center;"><img src="https://i.imgur.com/hNfk9uc.png" width="50%"></p>

* 直接滑到程式最下方點選 `Start server` 即可透過網頁瀏覽器瀏覽影像
* 注意：使用到的裝置必須位於同一區網下
<p style="text-align:center;"><img src="https://i.imgur.com/lN1PeA1.png" width="40%"></p>
<p style="text-align:center;"><img src="https://i.imgur.com/cf2iAAl.png" width="70%"></p>

## 七.手機控制端App介面
* ==建議直接下載範例檔做研究==
<p style="text-align:center;"><img src="https://i.imgur.com/zGkc9AD.png" width="70%">&nbsp;<img src="https://i.imgur.com/HRi5V2p.png" width="20%"></p>

* 手機控制端由App inventor 2製作，並用到[Pura Vida Apps](https://puravidaapps.com/extensions.php)網站中的一些擴充包含(以下皆為非必要，有其他方式可以取代，但使用後可使程式更為方便)：
1. [WebViewerDialog](https://community.thunkable.com/t/free-releasing-the-web-viewer-dialog-extension/3956)：懸浮網頁瀏覽器，用來設定影像傳輸端
2. [TaifunNotification](https://puravidaapps.com/notification.php)：通知擴充，變更設定後直接點選通知即可重啟程式
3. [TaifunWifi](https://puravidaapps.com/wifi.php)：Wifi擴充，一鍵連線至指定wifi
* 如果你還不知道如何使用App inventor 2中的 `Import extension` 功能，建議你先閱讀[App inventor 2的進階玩法](http://bo-sgoldhouse.blogspot.tw/2018/05/app-inventor-2-import-extension-app.html)這篇文章
* <span style="color:red">因為著作權的緣故，我無法在這裡提供擴充檔(.aix)，請點選連結至原網站下載</span>

## 八.手機控制端程式碼
1. 主頁面 (Screen1) 佈局設定
<p style="text-align:center;"><img src="https://i.imgur.com/T05UBqm.png" width="80%"></p>

* 佈局主要是一個3*3的表個病在其中依序放入元件各人可有自己的編排方式，以下為我的編排方式：

| 　　　 | 除錯用標籤 | 　　　　 |
| :---: | :------: | :-----: |
| 左布局 | 網頁瀏覽器 | 右布局 |
| 搖　桿 | 　　　　　 | 資訊視窗 |

* 因為元件數量較多，在此不一一描述，大家可先下載在文章下方的範例檔，直接使用範例檔做研究

2. 設定頁面 (Setting) 佈局設定
* 在這裡我們新增了一個頁面用來設定一些參數，並取名為 `Setting`
<p style="text-align:center;"><img src="https://i.imgur.com/cxwVhgV.png" width="80%"></p>

## 八之一.手機控制端程式碼 (Screen1)
* ==建議直接下載範例檔做研究==
1. 變數宣告
<p style="text-align:center;"><img src="https://i.imgur.com/xsbDty1.png" width="90%"></p>

2. 螢幕初始化及相關功能
<p style="text-align:center;"><img src="https://i.imgur.com/etnVGBz.png" width="90%"></p>
<p style="text-align:center;"><img src="https://i.imgur.com/KOitYAv.png" width="50%"></p>

3. 搖桿
<p style="text-align:center;"><img src="https://i.imgur.com/w6XARbw.png" width="90%"></p>
<p style="text-align:center;"><img src="https://i.imgur.com/KmUI6C1.png" width="90%"></p>

4. 函式宣告
<p style="text-align:center;"><img src="https://i.imgur.com/oppNSAU.png" width="90%"></p>

5. 按鈕功能
<p style="text-align:center;"><img src="https://i.imgur.com/1qH7VUd.png" width="70%"></p>
<p style="text-align:center;"><img src="https://i.imgur.com/VPKt7tR.png" width="90%"></p>

6. 其他
<p style="text-align:center;"><img src="https://i.imgur.com/frWBRsl.png" width="90%"></p>
<p style="text-align:center;"><img src="https://i.imgur.com/bMy7pUc.png" width="90%"></p>

## 八之二.手機控制端程式碼 (Setting)
* ==建議直接下載範例檔做研究==
1. 變數宣告
<p style="text-align:center;"><img src="https://i.imgur.com/RHaZowG.png" width="50%"></p>

2. 螢幕初始化及相關功能
<p style="text-align:center;"><img src="https://i.imgur.com/5ktp7UF.png" width="90%"></p>

3. 搖桿(更新頻率)
<p style="text-align:center;"><img src="https://i.imgur.com/pVqT3e4.png" width="70%"></p>

4. 按鈕
<p style="text-align:center;"><img src="https://i.imgur.com/MbEu4Gc.png" width="70%"></p>

5. 對話框
<p style="text-align:center;"><img src="https://i.imgur.com/IgFNJjc.png" width="70%"></p>

## 九.心得與範例檔載點
* [ArduinoCarControl.aia](https://drive.google.com/file/d/16Eoyo8uMMLimpJr3fS6T6sNt4yjz7t5j/view?usp=sharing)
* [ArduinoCarControl.apk](https://drive.google.com/file/d/1lTWTrjXued7gfl-THkVtpyeFcpuLpYwF/view?usp=sharing)
* [arduino_car.ino](https://drive.google.com/open?id=1SLAUwTVMFXQB1sRnrfLCUcSS8qiFwf6H)

==感謝您閱讀本文章==