Arduino 和 SerialChart 的互动，教程

freeLabs

Arduino 和 SerialChart 的互动

SerialChart是什么？
SerialChart是一个体积非常小串口数据实时生成图形的软件，作用就是绘图，那么在哪些场合可以用上呢？做平衡小车的PID调试，还有卡尔曼滤波融合的时候，借助这个简单的小工具有一个能把数据实时传回电脑进行分析，并且生成图形的软件，会对调试过程起到事半功倍的效果。
正因为SerialChart能做绘图的事情，那么就可以将Arduino的数值传回电脑，然后在绘图。

代码讲解
下面是调试时候的截图，也就是一个抛物线和一个圆的结合，但是有点小瑕疵，就是圆有点不圆，程序中圆的方程和计算是没有什么问题的。只是在Serialchart这里调试有点不理想。


代码下载链接：
链接：http://pan.baidu.com/s/1c24rzHI 密码：kvmr

代码讲解：

1. [_setup_]
   
2. port = com3
   
3. baurate = 9600
   
4. width = 1000
   
5. height = 250
   
6. background_color = white
   
7. grid_h_origin = 0
   
8. grid_h_step = 20
   
9. grid_h_color = #CCC
   
10. grid_h_origin_color = #CCC
    
11. grid_v_origin = 0
    
12. grid_v_step = 20
    
13. grid_v_color = #CCC
    
14. grid_v_origin_color = #CCC
    
15. 
    
16. [_default_]
    
17. min = -5
    
18. max = 5
    
19. 
    
20. [yaxis]
    
21. color = red
    
22. 
    
23. [pyaxis]
    
24. color = red

复制代码

上面是代码，我不知道怎么给SerialChart写注释，好像没办法写注释，不过下面我讲解一下下面语句的关键点
[_default_]
min = -5
max = 5
这里min max 就是最小最大的意思， 也就是你传回电脑变量的取值范围，这个会对曲线的形状产生非常大的影响，也就是会让你觉得图像或者看上去很奇怪，尽管程序没有错。

好吧，下面插个广告啊。
欢迎光临我们的小店：电子进阶室
https://shop117773209.taobao.com/?spm=a230r.7195193.1997079397.2.nctdgM
我们提供物美价廉的电子模块：
萝莉控遥控器：
https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-10523036467.3.OhzoFL&id=522167533120
STC15W最小系统板/开发板-64脚
https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-10523036467.5.OhzoFL&id=520524062405
stc15W4K32S4单片机带下载器
https://item.taobao.com/item.htm?spm=686.1000925.0.0.pz8iRP&id=530621935127

那么接下来就分析一下Arduino的程序，思路是这样子的，定义两个float型的数组变量
也就是定一个X轴的变量范围，然后在根绝抛物线和圆的方程，解出Y的坐标，最后在使用Serialchart能够识别的数据格式，串口打印回电脑，那样就能够显示了，当然，这种方法不仅仅局限于Arduino单片机，其他带串口的单片机都是可以通过此方法调试的，之前我也试过使用STC单片机调试。效果也是可以的。

1. /* 这个sketch展示怎么使用Arduino来画一个抛物线
   
2.     电脑端使用的画图软件是SerialChart
   
3.     圆的方程： X^2+Y^2 = 1
   
4.     抛物线方程：y^2 = 2pX
   
5.     SerialChart的下载地址是：
   
6. 
   
7.     另外也欢迎参观我们的网店，我们提供物美价廉
   
8.     的模块
   
9. https://shop117773209.taobao.com/?spm=a230r.7195193.1997079397.2.vO4XPP
   
10. 
    
11. 店铺名称：电子进阶室
    
12.   
    
13. 萝莉控遥控器：￥45
    
14. https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-10523036467.3.OhzoFL&id=522167533120
    
15. 
    
16. STC15W最小系统板/开发板-64脚 ￥29
    
17. https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-10523036467.5.OhzoFL&id=520524062405
    
18. 
    
19. stc15W4K32S4单片机带下载器 单片机 开发板 套件 C15 系列 手把手 c51 ￥20
    
20. https://item.taobao.com/item.htm?spm=686.1000925.0.0.pz8iRP&id=530621935127
    
21. 
    
22.    2016/05/07 14:30
    
23. */
    
24. float xaxis[11] = {0}; // 圆的X轴
    
25. float yaxis[11] = {0}; // 圆的Y轴
    
26. float pxaxis[101] = {0}; // 抛物线的X轴
    
27. float pyaxis[101] = {0}; // 抛物线的Y轴
    
28. int para = 10; //抛物线参数，参数越大，抛物线开口越大
    
29. 
    
30. void setup() {
    
31.   // put your setup code here, to run once:
    
32.   Serial.begin(9600);
    
33. 
    
34.   for (int i = 0; i <= 10; i++) // 给X轴赋值
    
35.   {
    
36. xaxis[i] = i * 0.05;
    
37.   }
    
38.   for (int i = 0; i <= 10; i++) //给抛物线X轴赋值
    
39.   {
    
40.     yaxis[i] = sqrt(0.5 - xaxis[i] * xaxis[i]); //计算圆的方程
    
41.   }
    
42.   for (int i = 0; i <= 100; i++)
    
43.   {
    
44.     pxaxis[i] = 2 * para * i; //计算抛物线的方程
    
45.   }
    
46. 
    
47. }
    
48. 
    
49. int delay_plot = 0; //用于画出一条直线用
    
50. void loop() {
    
51.   for (int j = 0; j < 100; j++)
    
52.   {
    
53.     Serial.print(delay_plot);
    
54.     Serial.print(",");
    
55.     Serial.print(0);
    
56.     Serial.println();
    
57.   }
    
58.   for (int i = 10; i >= 0; i--)// 画出圆的左半部份
    
59.   {
    
60.     Serial.print(yaxis[i]);
    
61.     Serial.print(",");
    
62.     Serial.print(-yaxis[i]);
    
63.     Serial.println();
    
64.   }
    
65.   for (int i = 0; i <= 10; i++) // 画出圆的右半部份
    
66.   {
    
67.     Serial.print(yaxis[i]);
    
68.     Serial.print(",");
    
69.     Serial.print(-yaxis[i]);
    
70.     Serial.println();
    
71.   }
    
72. 
    
73.   for (int i = 0; i <= 100; i++) //下面这个循环是画出抛物线
    
74.   {
    
75.     pyaxis[i] = 0.1 * sqrt(pxaxis[i]);
    
76.     Serial.print(pyaxis[i]);
    
77.     Serial.print(",");
    
78.     Serial.print(-pyaxis[i]);
    
79.     Serial.println();
    
80.   }
    
81. }

复制代码

最后展示一下其他的画图：
一连串的圆


像关节一样的图形


所有文档的下载链接
1.SerialChart下载地址： 链接：http://pan.baidu.com/s/1qXDgiW8 密码：o9wh
2.所有代码下载：链接：http://pan.baidu.com/s/1c24rzHI 密码：kvmr

参考阅读：
1. SerialChart串口数据波形描绘软件配置详解
http://bbs.ednchina.com/BLOG_ARTICLE_3015472.HTM

2. github中的SerialChart源码 ：https://github.com/robint91/serialchart

如果你有任何不明白的地方欢迎指出，感谢帮助我们完善，我们将做得更好。

Hackerpro

萝莉的东西虽然是开放的，但还是要在宝贝介绍里声明下吧，尊重下别人的成果
不能让乐意奉献的人心寒

freeLabs

Hackerpro 发表于 2016-5-9 11:55
萝莉的东西虽然是开放的，但还是要在宝贝介绍里声明下吧，尊重下别人的成果
不能让乐意奉献的人心寒

不好意思，我不是很懂你的意思，能否指明？

Hackerpro

freeLabs 发表于 2016-5-9 17:35
不好意思，我不是很懂你的意思，能否指明？

我说的是店铺中的商品介绍

novelcrab

挺实用的东东

weiview

' 注释

1. 
   
2. [_setup_]
   
3. 
   
4. '设置端口参数
   
5. port=COM2   
   
6. baudrate=9600
   
7. '设置绘图区域 单位：像素
   
8. width=3600
   
9. height=500
   
10. background_color = #333333
    
11. '设置水平网格，X轴线
    
12. grid_h_origin = 300
    
13. grid_h_origin_color = yellow
    
14. grid_h_step = 10
    
15. grid_h_color = #999999
    
16. 
    
17. '设置垂直网格，Y轴线
    
18. grid_v_origin = 60
    
19. grid_v_origin_color = white
    
20. grid_v_step = 10
    
21. grid_v_color = #999999
    
22. 
    
23. 
    
24. '取值映射范围
    
25. [_default_]
    
26. min=200
    
27. max=700
    
28. 
    
29. '第一条曲线
    
30. [Field1]
    
31. color=red
    
32. 
    
33. ‘第二条曲线
    
34. [Field2]
    
35. color=green
    
36. 
    
37. ’第三条曲线
    
38. [Field3]
    
39. color=#00ffff
    

复制代码

nxcosa

你可以去看看DF做的一个开源的串口波形显示的   https://github.com/DFRobot/DFSerialChart     下载后之间点start.bat就好了  不需要任何配置