【ProtoPie Connect 教程】第3课 - Arduino第1节:通过Blokdots进行连接

引言
我们所接触到的数字体验场景正与日俱增,乃至超越了电脑与手机屏幕形成的的藩篱。试想一下,在设计中可以考虑引入物理控制,比如一个按钮、一个旋钮,甚至是一个可以识别点触也可以识别手指划过的触控条……正是这样的需求,使得类似Arduino Uno ( https://store-usa.arduino.cc/collections/boards/products/arduino-uno-rev3 )这样的廉价开发板吸引了越来越多有探索欲的用户来使用。
在本教程中,我们将完善一个空调遥控器的原型。这个原型可以通过触摸屏操作,也可以通过一个支持按压动作的物理旋钮进行操作。这样的旋钮被称为旋转编码器,即便此前你没有听说过这个词,但你肯定操作过这样的零件——当你转动旋钮时,可以感觉到旋钮在随着转动发出有规律的咔哒声,而每咔哒一下就有什么东西增强或减弱了——比如车载音响系统上的音量控制旋钮,就是这类设备。
学习内容
在本教程中,我们会覆盖以下知识点:
Blokdots是什么?
连接Arduino电路
使用Blokdots对Arduino编程
通过ProtoPie Connect将消息从Blokdots发送到Pie上
本教程约需30-60分钟完成,取决于对Arduino进行电路连接的熟练程度。
Blokdots
如果一想到要编写代码你就打算先逃之夭夭,那么其实你还可以选择另一种更便捷的方式——使用Blokdots。Blokdots ( https://blokdots.com/ )是一个在电脑上运行的程序,这个程序可以在不编写任何代码的情况下可以使你与Arduino进行交互,同时,它还内置了与ProtoPie Connect的集成,这意味着你很快就可以让你的Pie与物理设备进行交互。
在撰写本文时,Blokdots仍处于测试阶段,但已经证实了使用Blokdots来控制物理设备是多么的快速而简单。
所需零件
到目前为止, 本教程以及前序的所有教程都不需要在ProtoPie之外另行购买任何东西,但要完成本教程的后续部分就得准备一些零部件了:

只需要购买一个Arduino初学者官方工具包 ( https://store-usa.arduino.cc/products/arduino-starter-kit-multi-language ),这个工具包几乎涵盖了本教程项目所需的所有零件,然后再买一包这种旋转编码器。
接线!
虽然Blokdots负责代码方面的工作,但你还是得撸起袖子把这些零件连接到一起。简单来说,这件事并不难,就如同你在网上找到某个电路图,这个图准确展示了如何将各个组件连接到Arduino开发板,而你按图索骥进行连接即可,并不需要确切了解其工作原理。
按照下图连接Arduino电路。
如果在这一环节你仍然需要更详细的指导,可以参看本文视频之后的内容,该部分内容对此有更详细的说明。

动手实现!
访问Blokdots.com并点击右上角的黄色下载按钮,即可下载Blokdots。由于Blokdots仍处于测试阶段,时不时会发布带有新功能和缺陷修复的更新,应该经常检查这些更新版本的发布,并保持更新到最新版本。
然后,下载以下Pie文件:https://cloud.protopie.io/p/35d69ddd96
现在,浏览以下视频教程并跟随视频内容进行操作:

可供深入研究的问题
在Pie中,要增加风扇转速时,我们是逆时针操纵组件实现的,而使用物理控制设备时,我们是顺时针旋转编码器实现的,是否能想个办法让物理旋钮在操作上与温度控制相反?也就是逆时针旋转时,增加风扇转速,顺时针旋转时,减小风扇转速。
第二个按钮已经接上线了,但到目前为止还没有把它用上,想想这个按钮可以用来干什么呢?
SOS!!教教我怎么连接电路!!
如果你不熟悉电路连接,那也不要担心!以下内容会对电路中的所有部件进行讲解,并详细说明如何把所有部件连接起来。
了解Arduino

Arduino在设计时就已经考虑了要使部件易于连接。
沿着顶部,有一排标着编号的数字连接器,我们会用上其中的几个来连接编码器
另有一组沿着底部的连接器,其中一部分标有“POWER(电源)”,我们会用上这个连接器里标了***“5V”***和 ***“GND”***的这两个插槽。
面包板详解
我们会用上一个叫做“面包板”的东西来连接所有的部件。面包板使电子元器件之间的连接与拆解变得简单,从而避免了较为麻烦而复杂的焊接操作。
在Arduino初学者套件中包含有一个与下图长相类似的面包板,上面以网格状布满了插孔:

对于了解面包板来说,很重要的一点是要先弄明白哪部分插孔事先已经被连接在一起了。在这块面包板上,位于顶部和底部各有两行插孔的两端标了 + 和 - ,这四行插孔在同一行内的都是事先已经连接在一起的。通常这四行插孔被用来将项目内的部件接入到电源上——譬如将电源接入到第一行的任意一个孔内,那么当任何其余的接插件也插入到第一行的其它孔内时,实际上就已经连接到电源上了。
中间部分的插孔按照垂直方向每5个一组进行排列,5个孔是事先相互连接好的,可以把元器件插入到这些组内,然后再用若干导线来进行组间连接或把某组接入到顶部或底部的供电行上。

顶部和底部的两行是分别横向事先连接在一起的(如蓝线所示);中间区域在竖直方向上每五个一组的孔也是事先连接在一起的(如洋红色线所示)。
旋转编码器
旋转编码器是一种特殊的旋钮,旋转这种旋钮的时候就会发出咔哒声。在这个项目里用到的旋转编码器同时还具备普通按钮的功能,也就是可以被按下。

旋转编码器上有5个连接用的引脚,对应的标识如下所示:

从左至右:
GND - 接地脚,这根引脚应该连接到Arduino的GND插槽上。
+ - 供电脚,这根引脚应该连接到Arduino的5V插槽上。
SW - 旋钮上自带了普通按钮的功能,当这个普通按钮被按下时,这根引脚就会发出特定信号。这根引脚应该连接到Arduino的其中一个数字连接器插槽上。
DT - 编码器的数据针脚,应该连接到Arduino的其中一个数字连接器插槽上。
CLK - 编码器的时钟引脚,应该连接到Arduino的其中一个数字连接器插槽上。
DT和CLK的工作原理对你而言并不重要,重要的是当Blokdots与编码器一起使用时,DT针脚和CLK针脚必须按照数字连接器的编号顺序接到Arduino上。比如说,假定DT引脚连接到数字连接器的3号插槽,那么CLK引脚就应该连接到数字连接器的4号插槽。这一点在下文我们实际进行连接时我会再次提醒的。
编码器的引脚可以被方便而精准地插入到面包板上。

我们继续进行,把两个编码器都插到面包板上,使编码器的每个引脚都插到各不相同的5孔连接组里。

接线
最后一件事是把所有的部件用导线连接起来。Arduino初学者套件中包含了一些长短不一的导线。用什么颜色的导线都无所谓,导线就是导线,不用太在意,导线颜色的本意只是帮助你区分哪些线用在了项目中的哪个部件上。通常人们会用红色线来代表供电线(或者更准确地说,代表电源线)。实际用的时候,只要有助于你的记忆和区分就可以。

Arduino初学者套件中包含了一些长短不一的导线。
按照图示进行连接
还记得上面的接线图吗?只要按图示来接线就可以。不需要在意导线的颜色,所以如果你发现没有下图所示颜色的导线,就直接用另外一种颜色的导线就行。

为面包板供电:
用导线把Arduino的5V插槽连接到面包板最底行(有个“+”标识的行)的任意一个插孔中。面包板中的这一行我们称为供电带。
用导线把Arduino的GND插槽连接到面包板从底往上第二行(有个“-”标识的行)的任意一个插孔中。面包板中的这一行我们称为接地带。
注意现在编码器是背对的状态,所以从你的角度看编码器的引脚从左至右为:
CLK
DT
SW
+
GND
连接编码器1:
将接地带上的任意一个插孔和编码器GND引脚所在的5孔连接组中任意一孔用导线连接起来。
将供电带上的任意一个插孔和编码器+引脚所在的5孔连接组中任意一孔用导线连接起来。
将Arduino上编号为2的数字连接器和编码器SW引脚所在的5孔连接组中任意一孔用导线连接起来。
将Arduino上编号为3的数字连接器和编码器DT引脚所在的5孔连接组中任意一孔用导线连接起来。
还记得前面我说过的吗?Blokdots需要编码器按顺序使用数字连接器的插槽,现在DT引脚已经连到3号数字连接器上了,那么CLK引脚就得连接到4号数字连接器上。现在将Arduino上编号为4的数字连接器和编码器CLK引脚所在的5孔连接组中任意一孔用导线连接起来。
连接编码器2:
将接地带上的任意一个插孔和编码器GND引脚所在的5孔连接组中任意一孔用导线连接起来。
将供电带上的任意一个插孔和编码器+引脚所在的5孔连接组中任意一孔用导线连接起来。
将Arduino上编号为5的数字连接器和编码器SW引脚所在的5孔连接组中任意一孔用导线连接起来。
将Arduino上编号为6的数字连接器和编码器DT引脚所在的5孔连接组中任意一孔用导线连接起来。
与前面的操作一样,CLK引脚得按照数字连接器的顺序连接到Arduino上。所以将Arduino上编号为7的数字连接器和编码器CLK引脚所在的5孔连接组中任意一孔用导线连接起来。
把上述步骤都做完后,完成品看起来就类似下图所示:
