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 位號值的原型驗證過程，下一篇，咱們會進步優化這個頁面，實現頁面的動態自動刷新。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。