java在jsp中判断td的值是1还是2_Snap7,Eel与S71200简单组态1
Snap7,Eel与S7-1200简单组态『1』
简介
Snap7是一个开源的,可以多平台运行的能与西门子S7系列PLC进行以太网通信的组件,之前的文章有两篇我介绍过这个组件,但是只是简单实现了对PLC的控制和数据读取,但是没有任何图形界面,只能通过命令行实现,这在实际应用中没有太大的意义,当然通过Python也可以实现图形界面,这里介绍一个比较好用的界面组件叫做Eel,说它好用,是因为它能通过前端语言JavaScript,Html,css实现多样的图形界面,前面两篇文章分别介绍过这个组件,今天我通过Snap7和Eel的结合,实现一个带有控制,曲线显示的简单组态界面
界面设计
这里界面是下载Bootstrap网站上现成的例子修改了一下,曲线功能是由Highchart实现
HighChart[1]
切换开关通过一个叫switchery的Js脚本实现
Switchery[2]
启动后,点击右上角的连接按钮后会连接PLC,之后状态栏显示设备已经连接,之后表格处的数值会按1s的周期进行更新,曲线会自动更新,点击每个切换开关会触发PLC内开关量的动作。
重要代码分析
测量值显示
表格里面Value栏是PLC的数据实时更新过来的,所以此处的Html代码中需要为这一列指定一个相同的class,之后在js脚本中,可以将Python获得PLC数据打包成一个列表,之后循环的填充到表格中,可以看到td标签有个 real_value
的class,可以通过这个class将所有td标签迭代出来
切换开关是通过Input实现,指定不同的class,在脚本中对其进行数理化,即生成对应传感器的切换开关,可以看到 通过DOM选择temp_switch对应的单元格,之后使用Switchery实例化,即生成切换开关
表中中的数值是通过Python传递过来的列表迭代出来的,通过getElementsByClassName选择所有real_value的class,之后通过for语句循环对其内部内容赋值列表valueList
切换开关控制
切换开关的开和关状态改变可以对应一个函数,此函数内部判断切换开关的状态,然后对应不同的状态赋值给Python,Python获取该值后,进而控制PLC
tempToggle是Python传递过来的函数,js中可以对其赋值,之后Python中获取该值,进而控制PLC
victim.tempOn是类的方法,TempOn方法即通过Snap7控制对应的布尔量打开
曲线的生成
曲线功能是通过HighChart实现,实现静态的曲线很简单,HighChart采用固定的格式设置来定义曲线的样式,其中数据可以是一个列表,有时间和数据,HighChart可以自动将时间和数据按照设置正确的显示出来,数据我们可以通过js的push方法将Python传过来的PLC数据放进去。通过新建一个values的数组,初始化数组里面的数据,这里我采用了moment的脚本来实现时间序列,y初始化了一个sin序列
momentjs[3]
初始化values数组后,可以通过动态更新里面的数据,x的值是时间,y的值是valueList列表中的第一个数值,即温度 值,使用shift方法可以保证values的数组中始终是固定数量的数据
使用update方法将这个数据更新到HighChart中
按钮控制PLC连接
点击按钮后实现PLC的连接其实很简单,按钮按下后js代码会输出一个数值到Python中
Python使用这个数值判断是否实例化PLC,之后进行连接
最终效果
代码下载
见文章打通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相关推荐
- Go语言-switch case | switch中判断多个值、interface conversion: interface {} is float64, not int
文章目录 Go语言-switch case 背景 switch case Golang中switch的特殊用法--fallthrough go语言switch中判断多个值 Type Switch,判断 ...
- Jsp中request.getParameter(@param)值为[object HTMLInputElement]
Jsp中request.getParameter("@param")值为[object HTMLInputElement] jsp窗体之间传递参数是常有的.一般窗体传参就是从一个窗 ...
- java if equals_Java中判断对象是否相等的equals()方法使用教程
Object类中的equals方法用于检测一个对象是否等于另一个对象.在Object类中,这个方法判断两个对象是否具有相同的引用,如果两个对象具有相同的引用,它们一定是相等的.从这点上看,将其作为默认 ...
- 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, ...
- JSP 中使用Struts2的值
Struts2的值是保存在ValueStack中的,假设有一个字符串str,我们一般是这么取值的: <s:property value="str"/> 或者 ${str ...
- go语言switch中判断多个值
简言 1. go语言的swich中一个case可以同时判断多个值:切记不能写成连续多个case,因为那样go语言会认为前面的case是独立判断,只是对应操作为空 2. c++语言中一个case只能判断 ...
- javascript做的一个根据table中某个td的值为日期时的倒计时
JavaScript代码: <script>window.onload = window.onload = function () { getTdValue(); }//根据传过来的天数( ...
- java或者jsp中修复会话标识未更新漏洞
appscan扫描出来的. 1. 漏洞产生的原因: AppScan会扫描"登录行为"前后的Cookie,其中会对其中的JSESSIONOID(或者别的cookie id依应用而定) ...
- java内存 phd文件抓取_您可以从IBM PHD Java堆转储中提取字符串的值吗?
我有一个来自IBM jvm的PHD格式堆转储,我希望检查一些字符串的值.使用Sun JVM的二进制hprof转储,这是可能的,但是我无法从IBM转储中恢复此信息. 我试过了: >具有IBM DT ...
最新文章
- C#汉字转拼音(npinyin)将中文转换成拼音全文或首字母
- 验证字符串是否为汉字
- 海外观察丨6 大营销风向洞察,暗藏哪些机会?
- Unobtrusive Ajax
- c#和c++的opencv位图数据参数互换问题解决方法
- 处理测试环境硬盘爆满
- LeetCode 2169. 得到 0 的操作数
- scatterpie | ggplot2的几何图形拓展包(1):如何在地图中添加饼图
- 最新高清IT职业技能图谱(15图)
- 主引导扇区(MBR)释疑
- 【优化算法】混合灰狼优化布谷鸟搜索优化算法(AGWOCS)【含Matlab源码 1540期】
- 【最佳实践】如何搭建反向代理服务访问OSS资源?
- 微信模板消息字体设置变大
- 使用阿里巴巴矢量图标库下载所需的小图标
- yum源修改为本地光盘镜像
- sdkd2019.3.20训练题目
- K-means与高斯混合模型
- 《Natural Language Processing with Transformers》中示例
- Go-包管理(管理工具对比及go mod的使用)
- 解决PyCharm和Spyder不能兼容pip下载第三方包的问题