查看: 5845|回复: 8

[入门教程] 铁熊玩创客 | 让掌控板像 Mixly 串口监视器一样绘图

[复制链接]

## 起因

事情的缘由是这样的，早上掌控板群里有老师讨论到掌控板能不能像 Mixly 串口监视器一样绘图，如下图所示：

## 解决方案

感觉是个蛮有意思的挑战，而且最近又在学习掌控板，权当练习了，所以就尝试着写了一个程序，最开始实现的效果是这样的：

程序如下图所示。本文采用的软件是掌控板官方图形化编程软件 mPython X 0.3.2，当然用 Mind+ 和 Mixly 也是可以编写的哦，这两个也都是很棒的编程软件。

我用了掌控板自带的声音传感器采集数据，声音传感器的数值则存储在一个“声音”列表中。掌控板上声音传感器的输入范围是 0-4095，但是 OLED 显示屏 y 轴的坐标最大是 63，所以用到了映射，将声音传感器检测到的数值映射到 0-60 的范围内。为什么不是 0-63 呢？因为想要上下各留些白，图像好看些。

然后不断去读取声音的值，然后添加到“声音”列表中。这个过程中还要去检测“声音”列表中的数据量是否多于 128 了，因为数据太多，显示屏也一样是画不下的，所以当数据太多的时候，不断去移除前面的数据，让列表中的数据进行移动，这样在绘图的过程中，就可以形成动态的效果啦。

（以下描述参考了 Nplus实验室老师的指正，非常感谢~）

绘图时，会用到一些坐标知识，尤其是绘制线条的过程，它要将前一个点和后一个点连接起来，所以此处用了“使用 i 从范围……”这条重复执行语句（ for 循环），它可以通过重复执行命令将列表里的每个点连接起来，形成一条条小线段，最终组合成曲线。

横坐标前、后点之间的关系就是 “i” 和 “i+1”，纵坐标就是声音列表相应位置的声音值。另外 for 循环中，它的起始点设置为 0 容易理解，但是终点为什么设置为“声音列表的长度-2”呢？

这是因为：

第一次画线起点是第1个点，终点是第2个点；
第二次画线起点是第2个点，终点是第3个点；
第三次画线起点是第3个点，终点是第4个点……

以此类推，

最后一次画线起点是第 n-1 个点，终点是第 n 个点（n代表列表长度）。

所以画了 n-1 次线段。所以如果 for 循环的起点是 1，终点就是：列表长度-1。还需要考虑到的是，列表的序号是从 0 开始，而不是 1，故需要再减 1，即：列表长度-2。

很简单，是不是？

## 升级

再仔细看看掌控板画的图，和 Mixly 串口监视器相比，是不是感觉特别毛刺？而且 Mixly 中每个点都用实心小圆标注了出来。

作为一个强迫症患者，可不能就这么完事了。怎么办呢？

先来解决第 1 个问题。看起来特别毛刺，是因为掌控板屏幕太小，我们把曲线横向拉长就好了。拉长多少合适呢？做一下实验发现横向拉长 6 倍看起来还是蛮舒服的。既然要拉长 6 倍，就代表声音列表要存储的数据就要相应减少，128÷6 取整后是 21，那么就存储 21 个数据吧，同样绘图时横坐标的值就要乘以 6。

再来解决第 2 个问题，这个好办，掌控板不是有绘制实心圆功能么？用绘制实心圆代替描点就行了。

修改程序如下：

最终效果如下：

是不是跟 Mixly 串口监视器很类似？

## 思考

当然为了最求完美的效果，还可以思考下做曲线拟合，让绘制的图像更加平滑平缓。这里就留给读者思考了，，留给我思考的时间已经不多了（因为老板已经在我身后盯了很久了……）

等等，还有一件事，再打个小广告：欢迎关注我的个人公众号“铁熊玩创客”，不 kan 定 xin 期 qing 更新创客制作、技术教程以及一些胡言乱语。

# 往期作品：

## 创客技巧

- 创客项目缺少高颜值电路图？看这里就对了：https://mc.dfrobot.com.cn/thread-289862-1-1.html
- 小白也能学会的激光切割创意盒子设计方法：https://mc.dfrobot.com.cn/thread-276550-1-1.html

## 桌面机器人

- 桌面萌宠 Pando，这个机器人靠卖萌为生好多年：https://mc.dfrobot.com.cn/thread-35162-1-1.html
- 桌面萌宠 Pandy，谁说智能车不能卖萌：https://mc.dfrobot.com.cn/thread-36721-1-1.html
- 吃货战车：谁说泡面只能用来填肚子：https://mc.dfrobot.com.cn/thread-34679-1-1.html
- 纯野生黑科技，分分钟教你自制最skr的全向麦熊小车：https://mc.dfrobot.com.cn/thread-268968-1-1.html

## 智能家居

- Hey Siri, 打开 HAY 旋转灯：https://mc.dfrobot.com.cn/thread-26865-1-1.html
- Hey Siri，请告诉我传感器数据：https://mc.dfrobot.com.cn/thread-28859-1-1.html

## 创意生活

- HAY，你好 ── DIY HAY旋转灯：https://mc.dfrobot.com.cn/thread-26212-1-1.html
- DIY 你的专属酷炫照片投影灯：https://mc.dfrobot.com.cn/thread-26900-1-1.html
- 好色灯：你们吸猫，我吸色：https://mc.dfrobot.com.cn/thread-34483-1-1.html
- DIY 你的专属酷炫照片投影灯：https://mc.dfrobot.com.cn/thread-26900-1-1.html
- 没有什么问题是猜拳不能解决的：https://mc.dfrobot.com.cn/thread-38060-1-1.html
- 律动头饰皇冠：每个女孩心中都有一个公主梦：https://mc.dfrobot.com.cn/thread-267927-1-1.html

## 学生作品

- 陈朔：戒烟帽：https://mc.dfrobot.com.cn/thread-280204-1-1.html
- 梁立昊：体感骑行安全帽：https://mc.dfrobot.com.cn/thread-280093-1-1.html

## HCRbot 机器人(SLAM)

- HCRbot 系列 1──HCRbot 机器人简介：https://mc.dfrobot.com.cn/thread-26938-1-1.html
- HCRbot 系列 2──HCRbot 硬件介绍与设置：https://mc.dfrobot.com.cn/thread-26939-1-1.html
- HCRbot 系列 3──HCRbot 上位机 PC 端软件设置：https://mc.dfrobot.com.cn/thread-26975-1-1.html
- HCRbot 系列 4──HCRbot下位机设置（树莓派版）：https://mc.dfrobot.com.cn/thread-27020-1-1.html
- HCRbot 系列 5──HCRbot下位机设置（Odroid XU4版）：https://mc.dfrobot.com.cn/thread-27161-1-1.html
- HCRbot 系列 6──HCRbot 底层驱动 OpenCR 设置：https://mc.dfrobot.com.cn/thread-27296-1-1.html
- HCRbot 系列 7──启动 HCRbot 机器人：https://mc.dfrobot.com.cn/thread-28248-1-1.html
- HCRbot 系列 8──远程控制 HCRbot 机器人：https://mc.dfrobot.com.cn/thread-29354-1-1.html
- HCRbot 系列 9──控制 HCRbot 机器人绘制平面地图（SLAM）：https://mc.dfrobot.com.cn/thread-29936-1-1.html

使用道具举报

Nplus实验室 高级技师

发表于 2019-6-18 10:45:16

写得很好，为铁熊老师双击666！

有一点小建议：在解释为什么是列表长度-2这里，再解释的细致些会更便于学习者理解。
例如：此处用for循环是为了将列表里的每个点连接起来，形成线段的。第一次画线起点是第一个点，终点是第二个点；第二次画线起点是第二个点，终点是第三个点……最后一次画线起点是第n-1个点，终点是第n个点（n代表列表长度）。所以画个n-1次线段。所以如果for循环的起点是1，终点是列表长度-1。还需要考虑到的是，列表的序号是从0开始，而不是1，故需要再减一，即列表长度-2。

使用道具举报