系列文章合集：IoT Power PC 端技术总结

这一节大致记录一下软件上的波形是如何展示的，以及为什么要这样处理展示

高分辨率下的波形

当分辨率足够高时，设备抓到的波形必定会有较大的波动起伏，就类似于下面这样

直接这样展示也很正确，但是不要忘记，我们使用的是一秒钟一万个点的数据，实际给用户展示的话，波形就会像是这样：

数据全部堆在一起，看不出其中的具体细节。

这种点的特征就很像某个设备，就是示波器。我们可以参考看一下示波器是如何处理的：

上下两组波形可以很明显的看出区别：按颜色表示数据密度，可以更清晰的看出数据的实际趋势。

所以在实际的软件中，我采取了一种折衷的渲染思路：完整的波形作为浅色展示在图像中，以便用户更清晰地看出极值；中间的曲线使用平均电流来展示，以便用户更好地分析电流的实际趋势。

大量数据波形的渲染

解决了渲染方式的问题，又有一个新的问题：如何渲染超大量的数据，并且保证不失真？

现在可以计算一个极限情况：
假设用户连续抓取了20小时，那么实际点的数据就为20*3600*10000=7.2亿
显然，我们不可能一次性渲染7亿数据（以后的电脑也许可以，谁知道呢），并且保证10fps的底线刷新率

为了渲染这些数据，我们需要用一套比较巧妙地方法来实现数据的渲染。

波形界面，展示一组假数据

为了保证渲染步骤不会成为瓶颈，我定义了如下设定：

• 波形显示区域，始终只渲染用户选定的区域，其他区域不渲染
• 渲染区域的点，数量固定为2000个（x坐标点）
• 根据用户的选定操作，动态操作这2000个点，渲染对应的波形
• 让用户察觉不出来，2000个点渲染的结果要符合正常人的直觉

当然，这2000个点如何计算出来，也是一项技术活。

抽样≠失真

上一小节我定义了使用2000个点来渲染实际数据的方法，也就是说举一个下面的例子
比如我们实际上在画面内有2000_000个点，那么：

• 波形展示界面的2000个点，每个点实际代表了1000个点的数据
• 需要展示每个1000个点的最大值、最小值、平均值，画在波形图中
• 展示的值要符合真实的数据

但是我们会发现，即使使用了2000点，我们仍然需要遍历所有数据，来算出需要渲染的数据。这样对于我们的性能没有什么实际帮助。那么需要如何优化呢？抽样肯定是不行的，会丢失大量的极值数据，甚至可能使得最终求出的数据失真。

实际软件是这样处理的：

代码使用了n级的缓存数据，根据用户当前使用的缩放倍数，动态选择对应的缓存数据层。这样就可以完美实现2000点数据的准确抽样，并且确保即使在数亿数据点时，也可以极快得求出当前需要展示的数据值。该方法仅使得内存占用多了不到20%，但换来了巨大的性能提升，这是十分值得的。

总结

通过上述的各种优化措施，客户端成功地在较低的CPU占用下，流畅渲染出准确的波形数据，这为用户跟手的操作提供了性能基础。

下一小节，会简单讲解用户的鼠标操作是如何处理的。