Snap7,Eel与S7-1200简单组态『1』

简介

Snap7是一个开源的,可以多平台运行的能与西门子S7系列PLC进行以太网通信的组件,之前的文章有两篇我介绍过这个组件,但是只是简单实现了对PLC的控制和数据读取,但是没有任何图形界面,只能通过命令行实现,这在实际应用中没有太大的意义,当然通过Python也可以实现图形界面,这里介绍一个比较好用的界面组件叫做Eel,说它好用,是因为它能通过前端语言JavaScript,Html,css实现多样的图形界面,前面两篇文章分别介绍过这个组件,今天我通过Snap7和Eel的结合,实现一个带有控制,曲线显示的简单组态界面

image.png

界面设计

这里界面是下载Bootstrap网站上现成的例子修改了一下,曲线功能是由Highchart实现

HighChart[1]

切换开关通过一个叫switchery的Js脚本实现

Switchery[2]

启动后,点击右上角的连接按钮后会连接PLC,之后状态栏显示设备已经连接,之后表格处的数值会按1s的周期进行更新,曲线会自动更新,点击每个切换开关会触发PLC内开关量的动作。

重要代码分析

测量值显示

表格里面Value栏是PLC的数据实时更新过来的,所以此处的Html代码中需要为这一列指定一个相同的class,之后在js脚本中,可以将Python获得PLC数据打包成一个列表,之后循环的填充到表格中,可以看到td标签有个 real_value 的class,可以通过这个class将所有td标签迭代出来

code1.png

切换开关是通过Input实现,指定不同的class,在脚本中对其进行数理化,即生成对应传感器的切换开关,可以看到 通过DOM选择temp_switch对应的单元格,之后使用Switchery实例化,即生成切换开关

code2.png

image.png

表中中的数值是通过Python传递过来的列表迭代出来的,通过getElementsByClassName选择所有real_value的class,之后通过for语句循环对其内部内容赋值列表valueList

code3.png

切换开关控制

切换开关的开和关状态改变可以对应一个函数,此函数内部判断切换开关的状态,然后对应不同的状态赋值给Python,Python获取该值后,进而控制PLC

code4.png

tempToggle是Python传递过来的函数,js中可以对其赋值,之后Python中获取该值,进而控制PLC

code5.png

victim.tempOn是类的方法,TempOn方法即通过Snap7控制对应的布尔量打开

code6.png

曲线的生成

曲线功能是通过HighChart实现,实现静态的曲线很简单,HighChart采用固定的格式设置来定义曲线的样式,其中数据可以是一个列表,有时间和数据,HighChart可以自动将时间和数据按照设置正确的显示出来,数据我们可以通过js的push方法将Python传过来的PLC数据放进去。通过新建一个values的数组,初始化数组里面的数据,这里我采用了moment的脚本来实现时间序列,y初始化了一个sin序列

momentjs[3]

code8.png

初始化values数组后,可以通过动态更新里面的数据,x的值是时间,y的值是valueList列表中的第一个数值,即温度 值,使用shift方法可以保证values的数组中始终是固定数量的数据

code7.png

使用update方法将这个数据更新到HighChart中

code9.png

按钮控制PLC连接

点击按钮后实现PLC的连接其实很简单,按钮按下后js代码会输出一个数值到Python中

code10.png

Python使用这个数值判断是否实例化PLC,之后进行连接

code11.png

最终效果

final.gif

代码下载

见文章打通Python与JavaScript『2』[4]

引用链接

[1] HighChart: https://www.highcharts.com/[2] Switchery: https://abpetkov.github.io/switchery/[3] momentjs: https://momentjs.com/[4] 打通Python与JavaScript『2』: http://mp.weixin.qq.com/s?__biz=MzI4NDY1MjY4Nw==&mid=2247484406&idx=1&sn=a05424ca42f09a16cc9ac2e047eba7d8&chksm=ebf96616dc8eef00c6b3a37333749443ddadd655a66b53418cfb0f1dcbb8d3a71287ea6daff7#rd

java在jsp中判断td的值是1还是2_Snap7,Eel与S71200简单组态1相关推荐

  1. Go语言-switch case | switch中判断多个值、interface conversion: interface {} is float64, not int

    文章目录 Go语言-switch case 背景 switch case Golang中switch的特殊用法--fallthrough go语言switch中判断多个值 Type Switch,判断 ...

  2. Jsp中request.getParameter(@param)值为[object HTMLInputElement]

    Jsp中request.getParameter("@param")值为[object HTMLInputElement] jsp窗体之间传递参数是常有的.一般窗体传参就是从一个窗 ...

  3. java if equals_Java中判断对象是否相等的equals()方法使用教程

    Object类中的equals方法用于检测一个对象是否等于另一个对象.在Object类中,这个方法判断两个对象是否具有相同的引用,如果两个对象具有相同的引用,它们一定是相等的.从这点上看,将其作为默认 ...

  4. c# java gt;gt;gt;,相同的字节数组=gt; Java和C#中的不同BigInteger值

    byte[] byteArray = { 52, 51, 102, 100, 55, 48, 48, 48, 57, 97, 57, 55, 97, 55, 100, 51, 49, 49, 99, ...

  5. JSP 中使用Struts2的值

    Struts2的值是保存在ValueStack中的,假设有一个字符串str,我们一般是这么取值的: <s:property value="str"/> 或者 ${str ...

  6. go语言switch中判断多个值

    简言 1. go语言的swich中一个case可以同时判断多个值:切记不能写成连续多个case,因为那样go语言会认为前面的case是独立判断,只是对应操作为空 2. c++语言中一个case只能判断 ...

  7. javascript做的一个根据table中某个td的值为日期时的倒计时

    JavaScript代码: <script>window.onload = window.onload = function () { getTdValue(); }//根据传过来的天数( ...

  8. java或者jsp中修复会话标识未更新漏洞

    appscan扫描出来的. 1. 漏洞产生的原因: AppScan会扫描"登录行为"前后的Cookie,其中会对其中的JSESSIONOID(或者别的cookie id依应用而定) ...

  9. java内存 phd文件抓取_您可以从IBM PHD Java堆转储中提取字符串的值吗?

    我有一个来自IBM jvm的PHD格式堆转储,我希望检查一些字符串的值.使用Sun JVM的二进制hprof转储,这是可能的,但是我无法从IBM转储中恢复此信息. 我试过了: >具有IBM DT ...

最新文章

  1. C#汉字转拼音(npinyin)将中文转换成拼音全文或首字母
  2. 验证字符串是否为汉字
  3. 海外观察丨6 大营销风向洞察,暗藏哪些机会?
  4. Unobtrusive Ajax
  5. c#和c++的opencv位图数据参数互换问题解决方法
  6. 处理测试环境硬盘爆满
  7. LeetCode 2169. 得到 0 的操作数
  8. scatterpie | ggplot2的几何图形拓展包(1):如何在地图中添加饼图
  9. 最新高清IT职业技能图谱(15图)
  10. 主引导扇区(MBR)释疑
  11. 【优化算法】混合灰狼优化布谷鸟搜索优化算法(AGWOCS)【含Matlab源码 1540期】
  12. 【最佳实践】如何搭建反向代理服务访问OSS资源?
  13. 微信模板消息字体设置变大
  14. 使用阿里巴巴矢量图标库下载所需的小图标
  15. yum源修改为本地光盘镜像
  16. sdkd2019.3.20训练题目
  17. K-means与高斯混合模型
  18. 《Natural Language Processing with Transformers》中示例
  19. Go-包管理(管理工具对比及go mod的使用)
  20. 解决PyCharm和Spyder不能兼容pip下载第三方包的问题

热门文章

  1. 使用 openssl反弹加密 shell
  2. linux 网络状态表 /proc/net/tcp 各项参数说明
  3. 关于Fuzz工具的那些事儿
  4. KVM-Qemu-Libvirt三者之间的关系
  5. WinDbg 脚本实例,可以显示 SSDT
  6. Android开发--图形图像与动画(三)--Animation效果的XML实现
  7. Linux 用户进程内存空间详解
  8. 对网上花店系统进行软件测试,网上花店系统
  9. 云服务器 与本地文件传输,云服务器 与本地文件传输
  10. oracle更新快捷方式的错误,oracle 11g数据库启动错误总结