铁熊 发表于 2019-6-17 17:41:17

铁熊玩创客 | 让掌控板像 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!{:5_131:}有一点小建议:在解释为什么是列表长度-2这里,再解释的细致些会更便于学习者理解。
例如:此处用for循环是为了将列表里的每个点连接起来,形成线段的。第一次画线起点是第一个点,终点是第二个点;第二次画线起点是第二个点,终点是第三个点……最后一次画线起点是第n-1个点,终点是第n个点(n代表列表长度)。所以画个n-1次线段。所以如果for循环的起点是1,终点是列表长度-1。还需要考虑到的是,列表的序号是从0开始,而不是1,故需要再减一,即列表长度-2。

rzyzzxw 发表于 2019-6-17 17:54:32

哇哦,好棒啊。{:5_171:}

汤果 发表于 2019-6-17 18:48:49

这也太厉害了吧~~~

铁熊 发表于 2019-6-18 16:21:18

Nplus实验室 发表于 2019-6-18 10:45
写得很好,为铁熊老师双击666!有一点小建议:在解释为什么是列表长度-2这里,再解释的细致些会更 ...

赞!太感谢了,我把您这段话加进文章里

yywudao 发表于 2019-6-19 00:11:23

“使 i 从范围 0 到(列表长度-2)增加 1”
这句总感觉是 “for i in range(0, (列表长度-2))”, 这样的话实际数据 i 就成了 0 ~ (列表长度-3),岂不是有数据缺失了?
绕晕了。。。

Nplus实验室 发表于 2019-6-19 14:44:52

本帖最后由 Nplus实验室 于 2019-6-19 14:45 编辑

yywudao 发表于 2019-6-19 00:11
“使 i 从范围 0 到(列表长度-2)增加 1”
这句总感觉是 “for i in range(0, (列表长度-2))”, 这样的话 ...
作者用的是mpythonX,这款软件的for循环积木只需要填真实的起点和终点就好了,后台代码会自动将终点+1。所以实际是数据i是0~(列表长度-2),代码是for i in range(0,(列表长度-1))

yywudao 发表于 2019-6-19 22:31:05

Nplus实验室 发表于 2019-6-19 14:44
作者用的是mpythonX,这款软件的for循环积木只需要填真实的起点和终点就好了,后台代码会自动将终点+1。所 ...

明白了,原来这么回事情。谢谢解惑

gada888 发表于 2019-7-13 09:27:51

厉害的功能
页: [1]
查看完整版本: 铁熊玩创客 | 让掌控板像 Mixly 串口监视器一样绘图