引言

我們所接觸到的數(shù)字體驗(yàn)場(chǎng)景正與日俱增，乃至超越了電腦與手機(jī)屏幕形成的的藩籬。試想一下，在設(shè)計(jì)中可以考慮引入物理控制，比如一個(gè)按鈕、一個(gè)旋鈕，甚至是一個(gè)可以識(shí)別點(diǎn)觸也可以識(shí)別手指劃過(guò)的觸控條……正是這樣的需求，使得類似Arduino Uno ( https://store-usa.arduino.cc/collections/boards/products/arduino-uno-rev3 )這樣的廉價(jià)開(kāi)發(fā)板吸引了越來(lái)越多有探索欲的用戶來(lái)使用。

在本教程中，我們將完善一個(gè)空調(diào)遙控器的原型。這個(gè)原型可以通過(guò)觸摸屏操作，也可以通過(guò)一個(gè)支持按壓動(dòng)作的物理旋鈕進(jìn)行操作。這樣的旋鈕被稱為旋轉(zhuǎn)編碼器，即便此前你沒(méi)有聽(tīng)說(shuō)過(guò)這個(gè)詞，但你肯定操作過(guò)這樣的零件——當(dāng)你轉(zhuǎn)動(dòng)旋鈕時(shí)，可以感覺(jué)到旋鈕在隨著轉(zhuǎn)動(dòng)發(fā)出有規(guī)律的咔噠聲，而每咔噠一下就有什么東西增強(qiáng)或減弱了——比如車載音響系統(tǒng)上的音量控制旋鈕，就是這類設(shè)備。

學(xué)習(xí)內(nèi)容

在本教程中，我們會(huì)覆蓋以下知識(shí)點(diǎn)：

• Blokdots是什么？

• 連接Arduino電路

• 使用Blokdots對(duì)Arduino編程

• 通過(guò)ProtoPie Connect將消息從Blokdots發(fā)送到Pie上

本教程約需30-60分鐘完成，取決于對(duì)Arduino進(jìn)行電路連接的熟練程度。

Blokdots

如果一想到要編寫代碼你就打算先逃之夭夭，那么其實(shí)你還可以選擇另一種更便捷的方式——使用Blokdots。Blokdots (?https://blokdots.com/ )是一個(gè)在電腦上運(yùn)行的程序，這個(gè)程序可以在不編寫任何代碼的情況下可以使你與Arduino進(jìn)行交互，同時(shí)，它還內(nèi)置了與ProtoPie Connect的集成，這意味著你很快就可以讓你的Pie與物理設(shè)備進(jìn)行交互。

在撰寫本文時(shí)，Blokdots仍處于測(cè)試階段，但已經(jīng)證實(shí)了使用Blokdots來(lái)控制物理設(shè)備是多么的快速而簡(jiǎn)單。

所需零件

到目前為止, 本教程以及前序的所有教程都不需要在ProtoPie之外另行購(gòu)買任何東西，但要完成本教程的后續(xù)部分就得準(zhǔn)備一些零部件了：

只需要購(gòu)買一個(gè)Arduino初學(xué)者官方工具包 (?https://store-usa.arduino.cc/products/arduino-starter-kit-multi-language )，這個(gè)工具包幾乎涵蓋了本教程項(xiàng)目所需的所有零件，然后再買一包這種旋轉(zhuǎn)編碼器。

接線！

雖然Blokdots負(fù)責(zé)代碼方面的工作，但你還是得擼起袖子把這些零件連接到一起。簡(jiǎn)單來(lái)說(shuō)，這件事并不難，就如同你在網(wǎng)上找到某個(gè)電路圖，這個(gè)圖準(zhǔn)確展示了如何將各個(gè)組件連接到Arduino開(kāi)發(fā)板，而你按圖索驥進(jìn)行連接即可，并不需要確切了解其工作原理。

按照下圖連接Arduino電路。

如果在這一環(huán)節(jié)你仍然需要更詳細(xì)的指導(dǎo)，可以參看本文視頻之后的內(nèi)容，該部分內(nèi)容對(duì)此有更詳細(xì)的說(shuō)明。

動(dòng)手實(shí)現(xiàn)！

訪問(wèn)Blokdots.com并點(diǎn)擊右上角的黃色下載按鈕，即可下載Blokdots。由于Blokdots仍處于測(cè)試階段，時(shí)不時(shí)會(huì)發(fā)布帶有新功能和缺陷修復(fù)的更新，應(yīng)該經(jīng)常檢查這些更新版本的發(fā)布，并保持更新到最新版本。

然后，下載以下Pie文件：https://cloud.protopie.io/p/35d69ddd96

現(xiàn)在，瀏覽以下視頻教程并跟隨視頻內(nèi)容進(jìn)行操作：

可供深入研究的問(wèn)題

• 在Pie中，要增加風(fēng)扇轉(zhuǎn)速時(shí)，我們是逆時(shí)針操縱組件實(shí)現(xiàn)的，而使用物理控制設(shè)備時(shí)，我們是順時(shí)針旋轉(zhuǎn)編碼器實(shí)現(xiàn)的，是否能想個(gè)辦法讓物理旋鈕在操作上與溫度控制相反？也就是逆時(shí)針旋轉(zhuǎn)時(shí)，增加風(fēng)扇轉(zhuǎn)速，順時(shí)針旋轉(zhuǎn)時(shí)，減小風(fēng)扇轉(zhuǎn)速。

• 第二個(gè)按鈕已經(jīng)接上線了，但到目前為止還沒(méi)有把它用上，想想這個(gè)按鈕可以用來(lái)干什么呢？

SOS??！教教我怎么連接電路??！

如果你不熟悉電路連接，那也不要擔(dān)心！以下內(nèi)容會(huì)對(duì)電路中的所有部件進(jìn)行講解，并詳細(xì)說(shuō)明如何把所有部件連接起來(lái)。

了解Arduino

Arduino在設(shè)計(jì)時(shí)就已經(jīng)考慮了要使部件易于連接。

• 沿著頂部，有一排標(biāo)著編號(hào)的數(shù)字連接器，我們會(huì)用上其中的幾個(gè)來(lái)連接編碼器

• 另有一組沿著底部的連接器，其中一部分標(biāo)有“POWER（電源）”，我們會(huì)用上這個(gè)連接器里標(biāo)了***“5V”***和 ***“GND”***的這兩個(gè)插槽。

面包板詳解

我們會(huì)用上一個(gè)叫做“面包板”的東西來(lái)連接所有的部件。面包板使電子元器件之間的連接與拆解變得簡(jiǎn)單，從而避免了較為麻煩而復(fù)雜的焊接操作。

在Arduino初學(xué)者套件中包含有一個(gè)與下圖長(zhǎng)相類似的面包板，上面以網(wǎng)格狀布滿了插孔：

對(duì)于了解面包板來(lái)說(shuō)，很重要的一點(diǎn)是要先弄明白哪部分插孔事先已經(jīng)被連接在一起了。在這塊面包板上，位于頂部和底部各有兩行插孔的兩端標(biāo)了 + 和 - ，這四行插孔在同一行內(nèi)的都是事先已經(jīng)連接在一起的。通常這四行插孔被用來(lái)將項(xiàng)目?jī)?nèi)的部件接入到電源上——譬如將電源接入到第一行的任意一個(gè)孔內(nèi)，那么當(dāng)任何其余的接插件也插入到第一行的其它孔內(nèi)時(shí)，實(shí)際上就已經(jīng)連接到電源上了。

中間部分的插孔按照垂直方向每5個(gè)一組進(jìn)行排列，5個(gè)孔是事先相互連接好的，可以把元器件插入到這些組內(nèi)，然后再用若干導(dǎo)線來(lái)進(jìn)行組間連接或把某組接入到頂部或底部的供電行上。

頂部和底部的兩行是分別橫向事先連接在一起的（如藍(lán)線所示）；中間區(qū)域在豎直方向上每五個(gè)一組的孔也是事先連接在一起的（如洋紅色線所示）。

旋轉(zhuǎn)編碼器

旋轉(zhuǎn)編碼器是一種特殊的旋鈕，旋轉(zhuǎn)這種旋鈕的時(shí)候就會(huì)發(fā)出咔噠聲。在這個(gè)項(xiàng)目里用到的旋轉(zhuǎn)編碼器同時(shí)還具備普通按鈕的功能，也就是可以被按下。

旋轉(zhuǎn)編碼器上有5個(gè)連接用的引腳，對(duì)應(yīng)的標(biāo)識(shí)如下所示：

從左至右：

• GND - 接地腳，這根引腳應(yīng)該連接到Arduino的GND插槽上。

• + - 供電腳，這根引腳應(yīng)該連接到Arduino的5V插槽上。

• SW - 旋鈕上自帶了普通按鈕的功能，當(dāng)這個(gè)普通按鈕被按下時(shí)，這根引腳就會(huì)發(fā)出特定信號(hào)。這根引腳應(yīng)該連接到Arduino的其中一個(gè)數(shù)字連接器插槽上。

• DT - 編碼器的數(shù)據(jù)針腳，應(yīng)該連接到Arduino的其中一個(gè)數(shù)字連接器插槽上。

• CLK - 編碼器的時(shí)鐘引腳，應(yīng)該連接到Arduino的其中一個(gè)數(shù)字連接器插槽上。

DT和CLK的工作原理對(duì)你而言并不重要，重要的是當(dāng)Blokdots與編碼器一起使用時(shí)，DT針腳和CLK針腳必須按照數(shù)字連接器的編號(hào)順序接到Arduino上。比如說(shuō)，假定DT引腳連接到數(shù)字連接器的3號(hào)插槽，那么CLK引腳就應(yīng)該連接到數(shù)字連接器的4號(hào)插槽。這一點(diǎn)在下文我們實(shí)際進(jìn)行連接時(shí)我會(huì)再次提醒的。

編碼器的引腳可以被方便而精準(zhǔn)地插入到面包板上。

我們繼續(xù)進(jìn)行，把兩個(gè)編碼器都插到面包板上，使編碼器的每個(gè)引腳都插到各不相同的5孔連接組里。

接線

最后一件事是把所有的部件用導(dǎo)線連接起來(lái)。Arduino初學(xué)者套件中包含了一些長(zhǎng)短不一的導(dǎo)線。用什么顏色的導(dǎo)線都無(wú)所謂，導(dǎo)線就是導(dǎo)線，不用太在意，導(dǎo)線顏色的本意只是幫助你區(qū)分哪些線用在了項(xiàng)目中的哪個(gè)部件上。通常人們會(huì)用紅色線來(lái)代表供電線（或者更準(zhǔn)確地說(shuō)，代表電源線）。實(shí)際用的時(shí)候，只要有助于你的記憶和區(qū)分就可以。

Arduino初學(xué)者套件中包含了一些長(zhǎng)短不一的導(dǎo)線。

按照?qǐng)D示進(jìn)行連接

還記得上面的接線圖嗎？只要按圖示來(lái)接線就可以。不需要在意導(dǎo)線的顏色，所以如果你發(fā)現(xiàn)沒(méi)有下圖所示顏色的導(dǎo)線，就直接用另外一種顏色的導(dǎo)線就行。

為面包板供電：

• 用導(dǎo)線把Arduino的5V插槽連接到面包板最底行（有個(gè)“+”標(biāo)識(shí)的行）的任意一個(gè)插孔中。面包板中的這一行我們稱為供電帶。

• 用導(dǎo)線把Arduino的GND插槽連接到面包板從底往上第二行（有個(gè)“-”標(biāo)識(shí)的行）的任意一個(gè)插孔中。面包板中的這一行我們稱為接地帶。

注意現(xiàn)在編碼器是背對(duì)的狀態(tài)，所以從你的角度看編碼器的引腳從左至右為：

• CLK

• DT

• SW

• +

• GND

連接編碼器1：

• 將接地帶上的任意一個(gè)插孔和編碼器GND引腳所在的5孔連接組中任意一孔用導(dǎo)線連接起來(lái)。

• 將供電帶上的任意一個(gè)插孔和編碼器+引腳所在的5孔連接組中任意一孔用導(dǎo)線連接起來(lái)。

• 將Arduino上編號(hào)為2的數(shù)字連接器和編碼器SW引腳所在的5孔連接組中任意一孔用導(dǎo)線連接起來(lái)。

• 將Arduino上編號(hào)為3的數(shù)字連接器和編碼器DT引腳所在的5孔連接組中任意一孔用導(dǎo)線連接起來(lái)。

• 還記得前面我說(shuō)過(guò)的嗎？Blokdots需要編碼器按順序使用數(shù)字連接器的插槽，現(xiàn)在DT引腳已經(jīng)連到3號(hào)數(shù)字連接器上了，那么CLK引腳就得連接到4號(hào)數(shù)字連接器上?，F(xiàn)在將Arduino上編號(hào)為4的數(shù)字連接器和編碼器CLK引腳所在的5孔連接組中任意一孔用導(dǎo)線連接起來(lái)。

連接編碼器2：

• 將接地帶上的任意一個(gè)插孔和編碼器GND引腳所在的5孔連接組中任意一孔用導(dǎo)線連接起來(lái)。

• 將供電帶上的任意一個(gè)插孔和編碼器+引腳所在的5孔連接組中任意一孔用導(dǎo)線連接起來(lái)。

• 將Arduino上編號(hào)為5的數(shù)字連接器和編碼器SW引腳所在的5孔連接組中任意一孔用導(dǎo)線連接起來(lái)。

• 將Arduino上編號(hào)為6的數(shù)字連接器和編碼器DT引腳所在的5孔連接組中任意一孔用導(dǎo)線連接起來(lái)。

• 與前面的操作一樣，CLK引腳得按照數(shù)字連接器的順序連接到Arduino上。所以將Arduino上編號(hào)為7的數(shù)字連接器和編碼器CLK引腳所在的5孔連接組中任意一孔用導(dǎo)線連接起來(lái)。

把上述步驟都做完后，完成品看起來(lái)就類似下圖所示：