技术论坛

实现的功能

这次通信的对象换成了1200的CPU，想要实现的功能如下

• 显示Sin波形数据

• 显示数据及曲线

• 控制数据的初始化

S7-1200生成正弦波

这个可以使用Simense公司针对1200和1500系列PLC专门提供的函数库 LGF 

链接可以参考这里

Library of general functions (LGF)

这个函数库提供了许多好用的功能，其中包括生成各种波形数据，可以直接调用即可实现。sin曲线的Block如下

reset 上通过一个布尔量控制数据的初始化，即上图中的功能3

控制功能实现

Node-Red的使用就不在赘述了，可以参考上一篇文章，框图如下

对S7-1200PLC进行通信参数的配置，以及变量的设定

• 读变量

• 通过uiBuilder进行render

• uiBuilder发出的msg通过function转换成布尔量的数组

• 写变量M104.0

• 写变量M104.1

写变量是通过 S7 Out 节点实现，此节点的输入可以是单独写入也可以通过数组批量写入，msg.payload中是需要写入的值，这里通过 function 节点处理从uiBuilder中输出的msg

当topic为不同的变量名时，即写入对应变量名的状态，其中msg.topic和msg.payload是uiBuilder中通过vue中的methods方法传出

Html代码中两个按钮上分别通过click事件关联vue中不同的methods，一个是 resetCurve1 ，另一个是 resetCurve2 两者除了需要控制的PLC内变量的名不同，其余完全相同

基本逻辑就是先获取M104.0的当前值，之后取其反，通过uibuilder的 send 方法打包成对象送出

这样就实现了页面操作按钮控制PLC变量状态改变

图表的实现

图表是使用highcharts的vue库，可以直接在uiBuilder中调用

Html代码中是通过vue组件的形式使用highcharts

其中option通过一个computed函数进行赋值，主要是曲线的一些参数

vue中的数据包括曲线的title，曲线类型和数据Serial，当然也可以增加更多的highcharts属性，可以参考链接

highcharts-vue

曲线数据的实时更新是在vue的mounted函数中进行的

通过push方法向数组中添加新数据，shift方法移除旧数据，可以通过限定数组的长度来实现曲线的显示宽度

Node-Red部署在PC上还是IOT?

我是部署在运行linux的单片机上

很不错。

问一下，Dashboard的横坐标是秒为单位么？

我好像忘记处理时间轴了，不过highcharts中时间轴的处理很方便，时间格式也很多

这个就是本地访问的，没有连网，具体浏览器版本旧的确实不行，因为数据绑定是通过Vue实现的

说的对，我记得以前还有一个专门的版块，估计没人看。

这太高级了

跟着大神学习

学习了，很不错。

学习了，高级的编程

感谢分享，学习了

 高级操作，想一下能用在那些地方

值得学习，谢谢楼主分享。

感谢分享，学习了

感谢分享。。。。。。。。。