西門子PLCS7-1200用戶自定義Web頁(yè)面制作

門子PLC S7-1200有個(gè)web頁(yè)面發(fā)布的功能，這個(gè)功能好像很少有人提及它的使用，我也只是偶爾用來(lái)監(jiān)控一下PLC變量，因?yàn)榇蜷_TIA14確實(shí)有點(diǎn)慢。

但是這個(gè)功能**不是什么雞肋，因?yàn)樗梢园l(fā)布用戶自定義的頁(yè)面，而且頁(yè)面可以加載javas cript，這就使得它的功能跟火箭一樣一飛沖天了，不過SIEMENS的**文檔也說(shuō)了，*好不要靠這個(gè)功能來(lái)代替專業(yè)的HMI軟件，畢竟它的實(shí)時(shí)性和安全性還是有待斟酌的。

但是在產(chǎn)品調(diào)試階段還有測(cè)試階段，這個(gè)功能確實(shí)很值得一用，因?yàn)樗芊奖銓?shí)現(xiàn)也很容易讓不懂PLC系統(tǒng)的測(cè)試人員無(wú)門檻上手，畢竟打開瀏覽器這個(gè)操作人人都會(huì)。

實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，網(wǎng)上的英文文檔也很多，介紹的很詳細(xì)，所以這里就不詳細(xì)說(shuō)怎么實(shí)現(xiàn)了，只是說(shuō)一說(shuō)基于主流的CSS框架來(lái)使頁(yè)面制作的更容易和更美觀一些，還有就是在實(shí)際編寫過程中遇到的一些問題

框架結(jié)構(gòu)

在實(shí)際開始進(jìn)行web功能編寫前，需要先規(guī)劃一下需要展示幾個(gè)頁(yè)面和頁(yè)面的布局，這里介紹一個(gè)網(wǎng)站layoutit，這個(gè)完全可視化的網(wǎng)站可以進(jìn)行拖放操作實(shí)現(xiàn)網(wǎng)頁(yè)布局，布局后的html代碼可以下載下來(lái)直接使用，使用的CSS框架是主流的bootstrap，可以說(shuō)頁(yè)面的美觀程度完全不用操心，**主流，下面是我用它生成的一個(gè)網(wǎng)頁(yè)結(jié)構(gòu)，之后下載到PLC后，瀏覽器中打開的樣子.

放入變量

網(wǎng)頁(yè)結(jié)構(gòu)完成后，就可以放入PLC的變量了，這里其實(shí)沒什么特別要說(shuō)的，變量是通過在整個(gè)html文件開頭通過AWP進(jìn)行所謂的聲明，之后在網(wǎng)頁(yè)中進(jìn)行使用

從PLC進(jìn)行讀操作的變量通過

<!--AWP_Out_Variable Name='"此處填寫變量名"'-->

從PLC進(jìn)行寫操作的變量通過

<!--AWP_In_Variable Name='"此處填寫變量名"'-->

這里要注意引號(hào)的使用，如果是內(nèi)存變量M，或者Q，I之類的輸入輸出變量，就是通過單引號(hào)外加雙引號(hào)將它括起來(lái)，像這樣

‘“此處填寫變量名”‘

但是如果是DB塊的變量，就需要像這樣

‘“DataBloack名稱”.變量名稱’

實(shí)際的使用中，無(wú)非也就幾種操作，

網(wǎng)頁(yè)端按下按鈕控制PLC的變量
在網(wǎng)頁(yè)端顯示PLC的某個(gè)變量
網(wǎng)頁(yè)端輸入某個(gè)數(shù)字到PLC內(nèi)某個(gè)變量

基本這三種操作就能實(shí)現(xiàn)大部分功能，其他的諸如枚舉變量，數(shù)組顯示我都很少用到，大家自己研究吧

網(wǎng)頁(yè)端按下按鈕控制PLC的變量

這個(gè)功能通過表單的POST方法實(shí)現(xiàn)

<form method="POST" action="" align="right">
  <input type="submit" value="開始測(cè)試" class="btn btn-primary btn-sm">
  <input type="hidden" name='"AI_TEST_Start_Stop"' value="1"></form>

第1，2，4行可以原封不動(dòng)的敲進(jìn)去，因?yàn)闆]有任何功能性的東西，都是一些顯示和樣式，只有第三行比較重要，其中name后面是PLC的變量名，value是給這個(gè)變量寫入1，這個(gè)就實(shí)現(xiàn)了按下按鈕，這個(gè)變量置1的操作，那怎么置0呢，把value改成0就行了。

在網(wǎng)頁(yè)端顯示PLC的某個(gè)變量

這個(gè)功能*簡(jiǎn)單，在需要顯示變量的地方插入代碼

<td class="font-weight-bold">:="200asModbusMaster_DB".ModbusMaster_6:</td>

兩邊尖括號(hào)的東西可以忽略，只要注意尖括號(hào)內(nèi)部的代碼就行，這是顯示的是DB塊變量，顯示變量的時(shí)候可以不需要單引號(hào)，但是兩端都要有冒號(hào)。

網(wǎng)頁(yè)端輸入某個(gè)數(shù)字到PLC內(nèi)某個(gè)變量

這個(gè)和按下按鈕控制變量的實(shí)現(xiàn)機(jī)制是一樣的，只不過需要有個(gè)輸入框

<form method="POST" action="">
  <input type="text" name='"1200asModbusSlave_DB".ModbusSlave_7'>
  <input type="submit" class="btn btn-success btn-sm" value="輸入700"></form>

可以看到第2行type是text，這就是那個(gè)輸入框，這里面的數(shù)值是賦給name的，name后面的變量就是PLC里面的變量，這里需要有單引號(hào)，第三行是通過一個(gè)按鈕實(shí)現(xiàn)提交動(dòng)作，也就是按下按鈕后，1200asModbusSlave_DB”.ModbusSlave_7就寫入你輸入的那個(gè)值了

圖形顯示

再來(lái)說(shuō)一種，有些時(shí)候希望一個(gè)Bool變量不是單純的在網(wǎng)頁(yè)端顯示1或者0，而是能用圖形來(lái)進(jìn)行顯示，這個(gè)也是可以實(shí)現(xiàn)的

<img src='Images/Lamp0:="TestFinished":.png' />

這個(gè)HTML代碼正常的樣子其實(shí)是這樣的

<img src='Images/Lamp00.png' />或者<img src='Images/Lamp01.png' />

發(fā)現(xiàn)一些端倪了吧，其實(shí)就是用Bool變量來(lái)替換Lamp0x后面的這個(gè)x，0的時(shí)候就是Lamp00.png，1的時(shí)候就是Lamp01.png，這兩張圖片是這樣的

*后是這個(gè)樣子的

一章. 頁(yè)面基本元素

1.1頁(yè)面基礎(chǔ)元素：<html>

<html>是頁(yè)面的基礎(chǔ)元素，主要用來(lái)定義頁(yè)面的開始和結(jié)束部分。元素語(yǔ)法結(jié)構(gòu)如下<html>....</html>（開頭標(biāo)記為<>,結(jié)束標(biāo)記為</html>）先介紹一下完整的HTML文件的基本結(jié)構(gòu)

<html> 文件開始標(biāo)記

<head> 文件頭開始標(biāo)記

......... 文件頭部分的內(nèi)容

</head> 文件頭結(jié)束標(biāo)記

<body> 文件主體開始標(biāo)記

......... 文件主題部分的內(nèi)容

</head> 文件主題結(jié)束標(biāo)記

</html> 文件結(jié)束標(biāo)記

在<html>和</html>之間寫入想要編輯的頁(yè)面內(nèi)容就構(gòu)成了一個(gè)簡(jiǎn)單的頁(yè)面

1.1.1 文本顯示方向?qū)傩裕篸ir

【作用與語(yǔ)法】dir屬性用來(lái)指定瀏覽器文本顯示的方向，同時(shí)也決定瀏覽器滾條的位置。dir屬性的語(yǔ)法結(jié)構(gòu)如下

<html dir="瀏覽器中文本的方向">......</html>(在元素名稱和屬性之間要加入空格)

dir屬性可以取兩個(gè)值，ltr（left title right）和rtl（right title left），分別表示從左向右顯示和從右向左顯示

1.1.2 指定語(yǔ)言屬性：lang

【作用與語(yǔ)法】lang屬性用來(lái)指定文檔中所使用的語(yǔ)言。lang屬性的語(yǔ)法結(jié)構(gòu)如下

lang屬性的取值可以使用ISO標(biāo)準(zhǔn)中的語(yǔ)言代碼。在<html>元素中加入lang屬性，使瀏覽器更好的顯示界面，并不會(huì)更改頁(yè)面的文字編碼

ISO標(biāo)準(zhǔn)中語(yǔ)言代碼的取值及含義語(yǔ)言名稱寫法語(yǔ)言名稱寫法英語(yǔ)en法語(yǔ)fr漢語(yǔ)zh德語(yǔ)de日語(yǔ)ja意大利語(yǔ)it

1.2 頁(yè)面頭部元素：<head>

【作用與語(yǔ)法】HTML的頭部元素是以<head>為開始標(biāo)記，以</head>為結(jié)束標(biāo)記。它用于包含當(dāng)前文檔的相關(guān)信息，可包含<title>元素、<meta>元素等，分別用來(lái)定義頁(yè)面的標(biāo)題、編碼。使用<head>元素可以將基本信息部分和頁(yè)面主體內(nèi)容區(qū)分開來(lái)。<head>元素的語(yǔ)法結(jié)構(gòu)如下

<head>......</head>

1.3 頁(yè)面標(biāo)題元素：<title>

【作用與語(yǔ)法】HTML頁(yè)面的標(biāo)題一般是用來(lái)說(shuō)明頁(yè)面用途的，它顯示在瀏覽器的標(biāo)題欄中。在HTML文檔中，標(biāo)題信息設(shè)置在頁(yè)面的頭部，也就是<head>和</head>之間。<title>元素的語(yǔ)法結(jié)構(gòu)如下。

<title>......</title> (說(shuō)明：在標(biāo)記中間的“......”就是標(biāo)題的內(nèi)容，它位于HTML文檔的頭部，即<head>和</head>之間)

1.4 元信息元素：<meta>

【作用與語(yǔ)法】元信息元素<meta>用來(lái)定義頁(yè)面的附加信息，其中包括頁(yè)面的作者、版權(quán)、關(guān)鍵字等相關(guān)信息。<meta>元素的語(yǔ)法結(jié)構(gòu)如下。

<meta 屬性=“屬性值”/>

1.4.1 元信息元素名稱屬性：name

【作用與語(yǔ)法】name屬性用來(lái)制定文檔中附加信息的名稱。例如，最常用的值“keywords”用來(lái)定義文檔中的關(guān)鍵字，方便搜索引擎的搜索。name屬性的語(yǔ)法結(jié)構(gòu)如下。

<meta name="信息名稱"/>

在<meta>元素中，名稱必須對(duì)應(yīng)有相關(guān)的值才能生效

1.4.2 元信息元素的值：content

【作用與語(yǔ)法】content屬性用來(lái)指定文檔中附加信息的值，它與name屬性成對(duì)出現(xiàn)。content屬性的語(yǔ)法結(jié)構(gòu)如下

<meta name="信息名稱" conten="附加信息的值"/>

1.4.3 元信息元素的附加屬性：http-equiv

【作用與語(yǔ)法】http-equiv屬性和name屬性類似，用來(lái)指定附加信息的名稱。在瀏覽器加載頁(yè)面之前，服務(wù)器會(huì)把http-equiv屬性定義的相關(guān)信息發(fā)送給瀏覽器，便于在瀏覽器中正確顯示頁(yè)面。http-equiv屬性的語(yǔ)法結(jié)構(gòu)如下

【作用與語(yǔ)法】<meta http-equiv="信息名稱"，content="附加信息的值">

說(shuō)明：和name屬性相似，http-equiv屬性一般要和conten屬性成對(duì)出現(xiàn)

1.4.4 定義頁(yè)面的跳轉(zhuǎn)

【作用與語(yǔ)法】在瀏覽器網(wǎng)頁(yè)的時(shí)候經(jīng)常會(huì)看到一些歡迎信息的頁(yè)面，并經(jīng)過一段時(shí)間后，這一頁(yè)面會(huì)自動(dòng)轉(zhuǎn)到其他頁(yè)面，這就是網(wǎng)頁(yè)的跳轉(zhuǎn)。使用HTML中的HTTP代碼就可以很輕松的實(shí)現(xiàn)這一功能。頁(yè)面跳轉(zhuǎn)的語(yǔ)法結(jié)構(gòu)

<meta http-equiv="refresh" content="跳轉(zhuǎn)時(shí)間"；url="鏈接地址">

說(shuō)明：在該語(yǔ)法中，refresh表示網(wǎng)頁(yè)的刷新，而在content中則設(shè)定刷新的時(shí)間和刷新后的地址，時(shí)間和鏈接地址之間用分號(hào)相隔。默認(rèn)情況下，跳轉(zhuǎn)時(shí)間是以秒為單位的

1.5 基本設(shè)置元素：<base>

在HTML中，基本設(shè)置元素<base>使用來(lái)定義相對(duì)路徑的根目錄。使用<base>元素，可以方便的定義頁(yè)面中的超級(jí)鏈接。語(yǔ)法結(jié)構(gòu)如下

<base 屬性="屬性值"/>

<base>元素在不使用任何屬性時(shí)，對(duì)頁(yè)面沒有影響。<base>元素中可以使用的屬性有鏈接路徑屬性href和鏈接窗口屬性target

1.5.1 鏈接路徑屬性：href

【作用與語(yǔ)法】href屬性用來(lái)指定文檔中相對(duì)鏈接的根目錄。文檔中的所有鏈接(包括圖片、音頻等內(nèi)容)都按照href屬性所指定的根目錄顯示。href屬性的語(yǔ)法結(jié)構(gòu)如下

<base href="指定路徑">包含的內(nèi)容部分</base>

href屬性的取值為url值。它可以使用絕對(duì)路徑，也可以指

向某個(gè)文件夾。

1272208556@qq.com

1、HTML + CSS + UI

2、Javascript

3、HTML5CORE + AJAX + Jquery

4、Bootstrap,Angular JS + 其他框架

1、HTML + CSS3BASIC + PRO + UI + PRO + CSS3CORE + PRO

======================================================

1、Internet

1、什么是Internet

是全球性計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò),是由若干終端(PC,移動(dòng)端)以及特殊的傳輸介質(zhì)而組成的一個(gè)網(wǎng)絡(luò)結(jié)構(gòu)

PC:Personal Computer

2、提供的服務(wù)

信息共享

Telnet : 遠(yuǎn)程連接

Email : 電子郵件

WWW : 萬(wàn)維網(wǎng) www.baidu.com

BBS : 電子公告板，論壇

FTP : 上傳和下載服務(wù)

3、實(shí)現(xiàn)技術(shù)

1、分組交換原理:數(shù)據(jù)通過數(shù)據(jù)包進(jìn)行傳遞，到達(dá)目的地后，對(duì)數(shù)據(jù)包進(jìn)行重組

2、TCP/IP 協(xié)議簇

2、WEB

1、什么是WEB

就是 WWW（World Wide Web）

w3c : www consortium 萬(wàn)維網(wǎng)聯(lián)盟

2、能干什么

能夠?qū)⒏黝惖男畔⒑头?wù)進(jìn)行連接，提供圖形用戶界面

信息:文字、圖片、音頻、視頻

服務(wù):Telnet, FTP , Mail , HTTP ...

3、萬(wàn)維網(wǎng)就是無(wú)數(shù)的文檔集合（網(wǎng)頁(yè)文檔）,文檔會(huì)駐留在世界（互聯(lián)網(wǎng)）的任何一個(gè)角落

3、WEB的工作原理

WEB是基于Internet的多媒體信息服務(wù)系統(tǒng)

1、基于瀏覽器 / 服務(wù)器模式

B / S : Browser / Server

在服務(wù)器上，主要以網(wǎng)頁(yè)的形式發(fā)布多媒體信息

2、由WEB服務(wù)器、瀏覽器、通信協(xié)議組成

3、WEB 相關(guān)技術(shù)

1、服務(wù)器端技術(shù)（后臺(tái)）

PHP,JSP,ASP 。。。。。。

2、客戶端技術(shù)(前端技術(shù))

HTML,

CSS,

Javascript

=========================================================

1、HTML 入門

1、什么是HTML

HTML(Hyper Text Markup Language),超級(jí)文本標(biāo)記語(yǔ)言

超文本:

標(biāo)記 : 超文本都是由標(biāo)記組成的

<a>

語(yǔ)言 : 包含自己獨(dú)特的語(yǔ)法

HTML最終由瀏覽器負(fù)責(zé)解釋

HTML總可以嵌入一些腳本語(yǔ)言編寫的程序段:Javascript,VBScript

2、HTML版本

超級(jí)文本標(biāo)記語(yǔ)言（第一版）

HTML2.0

HTML3.2

HTML4.0

HTML4.01

XHTML1.0

HTML5

3、標(biāo)簽(標(biāo)記)

1、標(biāo)簽語(yǔ)法

1、必須使用尖括號(hào)擴(kuò)起來(lái)

<a>,<div> ...

<A>,<a>

2、有封閉類型的標(biāo)簽，也有非封閉類型的標(biāo)簽

1、封閉類型

也稱作雙標(biāo)記，則必須成對(duì)出現(xiàn)

<標(biāo)記>文本內(nèi)容</標(biāo)記>

不同的標(biāo)記，決定了"文本內(nèi)容"的不同表現(xiàn)形式

eg:<a></a>,<p></p>,<div></div>

2、非封閉類型

也稱作單標(biāo)記、空標(biāo)記

<標(biāo)記>

或者

<標(biāo)記/>

eg:

3、元素

標(biāo)記就是元素，元素也稱為標(biāo)記

4、元素嵌套(標(biāo)簽嵌套)

標(biāo)簽之間相互嵌套，形成復(fù)雜的語(yǔ)法結(jié)構(gòu)

<body>

<p>

<a></a>

</p>

</body>

5、屬性

屬性是出現(xiàn)在開始標(biāo)記中的內(nèi)容,作用是修飾元素

標(biāo)準(zhǔn)屬性:每個(gè)元素都會(huì)具備的通用屬性

id : 定義每個(gè)標(biāo)簽的唯一標(biāo)識(shí)

title:提示文本

class:樣式相關(guān)，類樣式

style:樣式相關(guān)，行內(nèi)樣式

操作1：定義一對(duì)p標(biāo)簽，id屬性設(shè)置為program

多屬性:

注意：多屬性之間，排名不分先后

2、創(chuàng)建HTML文檔

開發(fā)工具:任何一個(gè)文字編輯軟件都可以開發(fā)HTML

EditPlus ：超級(jí)記事本

運(yùn)行環(huán)境:任何一個(gè)瀏覽器都能運(yùn)行HTML

Google Chrome,Mozilla Firefox,Microsoft IE,Safari,Opera

超文本文件(HTML文檔):

是一個(gè)以.html或.htm結(jié)尾的文檔

3、文檔結(jié)構(gòu)

1、文檔類型聲明

聲明使用的html版本和風(fēng)格

<!doctype html>

2、html頁(yè)面

1、文檔根元素

每個(gè)文檔有且僅有一對(duì)根元素 , html

2、在根元素的內(nèi)部，包含兩對(duì)子元素

1、head : 頁(yè)面的頭部?jī)?nèi)容

定義頁(yè)面全局信息

包含:

<title></title> : 網(wǎng)頁(yè)標(biāo)題

2、body : 頁(yè)面的主體內(nèi)容

任何一個(gè)標(biāo)簽，都可能會(huì)出現(xiàn)在body中

3、head元素

1、聲明網(wǎng)頁(yè)標(biāo)題

2、定義網(wǎng)頁(yè)文本編碼格式

默認(rèn):ISO-8859-1,只支持英文以及英文狀態(tài)下的標(biāo)點(diǎn)符號(hào)

utf-8:支持中英文,標(biāo)點(diǎn)符號(hào)

3、... ...

4、body元素

屬性:

text : 文本的顏色

bgcolor : 背景顏色

練習(xí)1:

1、為body添加兩個(gè)屬性，text，bgcolor

2、文本顏色 : 紅色(red)

背景顏色 : 銀色(silver)

3、在body中隨意寫上一段文本，觀察頁(yè)面顯示效果

5、文本標(biāo)記

1、特殊的文本

轉(zhuǎn)義字符:

空格: 

< : < less than

> : > greater than

2、文本標(biāo)記

1、文本樣式

<b>...</b> : 加粗文本

<i>...</i> : 斜體文本

<u>...</u> : 下劃線

<s>...</s> : 刪除線

<sup>...</sup> : 上標(biāo)

<sub>...</sub> : 下標(biāo)

2、標(biāo)題元素

1-6級(jí)6個(gè)標(biāo)題

<hn></hn> n:1-6

一級(jí)最大

六級(jí)最小

3、段落元素

提供了結(jié)構(gòu)化文本的表現(xiàn)方式

語(yǔ)法:<p></p>

注意：

1、每對(duì)p標(biāo)簽單獨(dú)成一個(gè)段落

2、段落與其他元素有垂直空白，段落間距

常用屬性:

align : 水平對(duì)齊方式

取值:left center right

4、換行元素

在代碼的任何位置處，實(shí)現(xiàn)回車的效果

<br />

5、水平線

又叫分割線

<hr />

屬性:

1、size : 水平線的粗細(xì)，通常以像素(px)為單位

2、width: 寬度

3、align: 水平線的水平對(duì)齊方式

4、color: 顏色

6、分區(qū)元素

目的：為元素進(jìn)行分組，多數(shù)用在布局中

塊分區(qū)元素:<div></div> 層

行內(nèi)分區(qū)元素:<span></span>

注意：

div ：主要用在布局上

span：修改其內(nèi)部?jī)?nèi)容的樣式

7、預(yù)格式化

保留源文檔中的空格和回車

<pre>

文本內(nèi)容

</pre>

3、注釋

可以寫在html源碼中，但不被瀏覽器解釋的文本

語(yǔ)法:

4、行內(nèi)元素與塊級(jí)元素

塊級(jí)元素:默認(rèn)情況下，塊級(jí)元素獨(dú)占一行，元素的前后都會(huì)自動(dòng)換行 div,hn,hr,p

塊級(jí)元素作用:布局

行內(nèi)元素:默認(rèn)情況，多個(gè)元素位于同一行，不會(huì)換行

span,文本標(biāo)記... ...

行內(nèi)元素作用:修改內(nèi)部?jī)?nèi)容的樣式

在線咨詢

上一篇：.NET Core 的緩存篇之MemoryCache
下一篇：好程序員web前端教程分享JavaScript如何實(shí)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商