openOPC与监控页面二

时间 2020-03-07

标签 openopc 监控页面繁體版

原文原文链接

　　本章节，咱们继续完成监控页面验证的demo，实现实时从后台刷新数据到UI端，笔者考虑采用B/S架构来构建这个简单的监控页面，下面将演示这个页面是如何一步一步来演进，这也是但愿告诉读者，当咱们面向一个新的需求时，如何经过技术领域的探索验证技术路线是否知足需求。在经过迭代来确保功能知足需求的同时，如何经过不断的小步迭代改进技术架构的过程。html

目标1：实现一个网页，经过点击一个按钮，而后从后台抓取某几个位号的值回传到UI端更新网页里div的文本内容。python

2.1.安装集成开发环境

　　本小节为了提升开发效率，文中演示过程当中才用的集成开发环境（IDE），是Visual Studio Community 2019社区版本，可供学习的教育版本和我的开发者使用，同时也受权5人一下的小团队进行商业开发，另外VS Community 2019有Mac版本，对于钟爱使用Mac同窗来讲也是一个很是好的IDE选择。 jquery

VS Community 2019下载网址： web

https://visualstudio.microsoft.com/zh-hans/free-developer-offers/ajax

笔者所用的开发环境：Windows 10操做系统笔记本电脑，进入安装界面以下：flask

　　注意如上图必定要选择左边ASP.NET Web 开发和 Python 开发，同时，咱们选择python 2 32-bit 2.7 来确保知足openOPC对python2环境的需求。若是环境不对就不能正常的访问到OPC服务读取tag位号值。浏览器

2.2.建立一个web project项目

安装完毕后咱们启动VS Community 2019集成开发环境，来到启动界面，以下图：服务器

选择Create a new project选项建立一个Python web项目，这里选择建立Flask Web Project，以下图：架构

笔者选择默认路径，可本身选择项目的存放位置。app

2.3.添加一个项目运行的虚拟环境

项目运行的虚拟环境很重要，必定要选择前面openOPC运行支持的python2环境不然后面就会很坑的，以下图：

虚拟环境添加过程当中IDE环境会自动安装目标环境须要的相应的一些基本的python，好比Flask和其依赖的第三方组件，以下图：

　　安装虚拟环境完毕后咱们就能够经过IDE环境运行这个项目了，点击Debug下的F5运行咱们刚刚建立的Flask Web项目，一个轻量级的网站就跑起来了，Flask 在轻量级上确实方便又好用的一个web开发利器。

2.4.新增一个本身的测试页面

咱们新增一个页面来模拟点击按钮刷新界面div文本效果，首先在项目的templates目录下增长一个新的testPage.html的文件，以下图：

2.4.1.testPage.html代码

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
        <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<body>
    <div>
        tag value:
    </div>
    <div id="divTag">0.0 </div>
    <button onclick="testClick()">test</button>
<script>
    //按钮绑定事件，首先模拟把0.0值修改成2020
        function testClick() {
            $("#divTag").html('2020');          

        }
    </script>
</body>
</html >

2.4.2.修改项目的views.py文件代码

# coding=utf8  #很是重要文件了加了中文必定要加这个标记,不然运行程序会报错
"""
Routes and views for the flask application.
"""

from datetime import datetime
from flask import render_template
from FlaskWebProject1 import app

#@app.route('/') 注释这一行默认显示咱们新增的页面
@app.route('/home')
def home():
    """Renders the home page."""
    return render_template(
        'index.html',
        title='Home Page',
        year=datetime.now().year,
    )

@app.route('/contact')
def contact():
    """Renders the contact page."""
    return render_template(
        'contact.html',
        title='Contact',
        year=datetime.now().year,
        message='Your contact page.'
    )

@app.route('/about')
def about():
    """Renders the about page."""
    return render_template(
        'about.html',
        title='About',
        year=datetime.now().year,
        message='Your application description page.'
    )

@app.route('/') #把网站默认显示页面修改成咱们新增的页面便于调试
@app.route('/testPage')
def testPage():
    """Renders the home page."""
    return render_template(
        'testPage.html',
        title='Test Page',
    )

　　2.4.3.按F5运行咱们的网站项目

点击“test”按钮div 文字变成2020，模拟了点击更新当前文字内容。

　　到目前为止，这个页面简单的体现了主动刷新数据的一个基本机制，那么接下来尝试如何从后台来获取到数据，后台获取数据这里咱们采用JQuery的异步请求 ajax() 技术来实现，所以咱们发现页面的head里加载了jquery-2.0.2.min.js文件，本文采用百度的CDN就不用再本身的项目里增长这个js文件了。

<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>

　　2.4.4.ajax异步调用

　　　　如今咱们把testClick()函数代码修改成以下：

        function testClick() {
            //模拟改变值
            //$("#divTag").html('2020');

            //模拟异步从后台得到值
            $.ajax({url:"/getTagCurValue/",success:function(result){
                $("#divTag").html(result);
            }});

        }

此次运行网站点击“test”按钮咱们会在浏览器调试工具页的控制台上看到错误，服务器没有发现url资源，以下图：

因而咱们得在web服务里增长这个/getTagCurValue/，经过它从服务端返回咱们想读取的tag位号的当前值。

2.4.5.views文件里增长getTagCurValue url 函数

@app.route('/getTagCurValue')
def getTagCurValue():
    """Renders the home page."""
    #先返回一个静态值测试页面的刷新效果
    return "2021"

Flask笔者用起来能够说真是很爽，你看这么一段简单的代码咱们就增长了一个后台服务接口，F5 点击“test”按钮你会发现div文本刷新为“2021”了。是否是得呵呵了。

2.5.读取opc服务的tag位号值

　　如今咱们就差一步了getTagCurValue'真正读取opc服务某一个tag位号的值。这样就完成了从UI端到服务端主动获取opc服务tag位号值，并更新UI界面的技术原型。views文件函数getTagCurValue代码修改以下：

@app.route('/getTagCurValue')
def getTagCurValue():
    #先返回一个静态值测试页面的刷新效果
    #return "2021"  
    import OpenOPC
    opc = OpenOPC.client()
    opc.connect('Matrikon.OPC.Simulation')
    result= opc['Random.Int1']
    opc.close()
    return unicode( result)

此次咱们F5执行测试，点击“test”按钮UI界面数据不会刷新，服务端控制台出现错误提示：

import OpenOPC

ImportError: No module named OpenOPC

这是由于咱们添加的虚拟环境无法有安装这个openOPC组件，这里咱们移除这个虚拟环境使用电脑安装好的python27环境便可，以下图：

移除虚拟环境后，个人系统会默认使用python3.6，须要把python2.7设置这个工程的默认执行环境，以下图：

python环境切换成全局的python2.7后咱们在F5运行测试，每次点击“test”按钮UI都会刷新从服务端获取到的tag Random.Int1 的当前值。

2.6.小结

　　本小节，经过设立一个小目标（1亿元）咱们完成了页面UI经过主动刷新（经过按钮Click事件）采用ajax异步请求方式从后台读取静态数据，到读取OPC tag位号值的演进过程，结合上一篇的代码咱们就实现了UI端展示OPC tag 位号值的原型验证过程，下一篇，咱们会进步优化这个页面，实现页面的动态自动刷新。