webserver s7 - 1200
DESCRIPTION
Webserver s7 - 1200TRANSCRIPT
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 1/37
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 2/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
1Lời mở đầu
L
ờ
i m
ở
đầ
u
Ngày nay, khoa học công nghệ đang phát triển với t ốc độ r ấ t nhanh. Các sản ph ẩm công nghệ
do đó cũng phải b ắt kịp xu th ế của thời đại và đáp ứng yêu c ầu của người sử dụng. Chính vì vậy
các nhà sản xu ấ t luôn luôn cập nhật và không ngừng đổi mới để tạo ra những sản ph ẩm có tính
ứng dụng cao.
Siemens là một trong những nhà sản xu ất đi đầu v ề việc tạo ra các sản ph ẩm ứng dụng công
nghệ hiện đại. D ễ th ấ y r ằng các sản ph ẩm g ần đây của Siemens trong lĩnh vực tự động hóa công
nghiệp đều được tích hợp khả năng truyền thông mạng mạnh mẽ mà S7-1200 là dòng sản ph ẩm
tiêu bi ểu nh ấ t.
Một trong những tính năng đáng chú ý của dòng S7-1200 đó là Webserver. Thực ra tính năngnày không phải mới lạ nhưng việc tích hợp c ổng truy ền thông PROFINET cùng mức giá h ấ p d ẫn
đã làm cho S7-1200 trở nên ph ổ bi ến và tính năng Webserver cũng được khai thác mạnh mẽ.
Với tính năng Webserver, bạn có
th ể điều khi ển và giám sát hệ th ống b ằng các thi ế t bị di động
có h ỗ trợ k ế t n ối mạng. Điều này
cho phép bạn có th ể truy cập
vào hệ th ống ở mọi lúc mọi nơi.
Webserver trên S7-1200 bao
g ồm 2 thành ph ần chính đó làHTML và AWP. Ngoài ra còn có
các thành ph ần b ổ trợ khác như
CSS hay Javascript. Tài liệu này
sẽ tập trung vào việc hướng d ẫn bạn cách tạo một trang web b ằng ngôn ngữ HTML và tích hợp
AWP để tạo thành một Webserver hoàn chỉnh.
Để có th ể hi ểu rõ được tài liệu này, yêu c ầu bạn phải có:
Ki ế n thức căn bản v ề máy tính
Ki ế n thức căn bản v ề PLC S7-1200 và cách sử dụng ph ần m ềm TIA Portal
PLC S7-1200 (vì hiện tại chưa thể mô phỏng được dòng PLC này, chúng ta sẽ download
và ki ểm tra trực ti ế p)
Tài li ệu này đượ c biên soạn nh ằm mục đích giúp bạn rút ng ắn thờ i gian t ự nghiên cứ u.
Tác gi ả có sử d ụng một s ố tài li ệu tham khảo sau:
Hướ ng d ẫn thi ế t k ế Web – Aweb.vn
S7-1200 System Manual - Siemens
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 3/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
2 HTML và Webserver S7-1200
Khái niệm về HTML và AWP
HTML là gì?
HTML (Hyper Text Makeup Language) là ngôn ngữ lập trình web đơn giản, được tạo thành từ
các thẻ và nội dung dạng text. M ỗi thẻ bao quanh một đối tượng và có th ể quy ết định các thuộc
tính liên quan đến đối tượng đó. Do sự đơn giản này, ta có th ể dùng một chương trình soạn
thảo văn bản b ất kì để tạo file html (như Word, Notepad,…). File HTML đó được gọi là “trangweb”.
Trong tài liệu này, tác giả sẽ sử dụng ph ần m ềm Notepad++ để vi ế t code web. Notepad++ là
một công cụ hữu ích cho các lập trình viên, h ỗ trợ nhi ều loại ngôn ngữ lập trình khác nhau trong
đó có HTML. Notepad++ có thể phân chia b ố cục rõ ràng cho các thành ph ần trong code do đócó th ể giúp người lập trình có th ể quản lí t ốt chương trình mình đang viế t. Bạn có th ể download
Notepad++ theo địa chỉ: http://notepad-plus-plus.org/
AWP là gì
AWP (Automation Web Programming) là ngôn ngữ web do Siemens phát tri ển cho các dòng PLC
được tích hợp tính năng Webserver. AWP thực ch ấ t là các dòng ghi chú trong trang HTML
nhưng PLC có thể biên dịch và hi ểu được. Từ đó chúng ta có thể truy cập dữ liệu trên PLC thông
qua AWP.
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 4/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
3Thi ế t k ế một trang web đơn giản
HTML ăn bản
Thi
ế
t k
ế
m
ột trang web đơn giả
n
C ấ u trúc cơ bản của một trang HTML
Giải thích:
Một cặp thẻ HTML bao g ồm <Tên thẻ (b ắt đầu)>Nội dung</Tên thẻ (k ế t thúc)>
Trong ví dụ trên ta th ấ y có các cặp thẻ sau:
<HTML>…..</HTML> dùng để định nghĩa đó là một trang HTML;
<HEAD>…..</HEAD> dùng để định nghĩa phần tiêu đề cho trang HTML;
<BODY>…..</BODY> dùng để định nghĩa phần thân của trang HTML;
<TITLE>…..</TILTE> dùng để xác định tiêu đề trang web;
<meta ….. /> là một thẻ đặc biệt dùng để định nghĩa các thuộc tính của trang web nhưloại mã sử dụng, thời gian refresh…;
<h1>…..</h1> dùng để xác định nội dung bên trong là một đề mục;
<p>…..</p> dùng để xác định đây là đoạn văn bản chứa nội dung web;
<br /> là thẻ dùng để xu ống dòng (brake);
<b>…..</b> là thẻ dùng để in đậm nội dung bên trong;
HTML Structrue
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<TITLE>Tiêu đề trang Web</TITLE>
</HEAD>
<BODY>
<h1>Đề mục</h1>
<p>nội dung thứ nh ấ t</p>
<p>nội dung thứ hai</p>
…
</BODY>
</HTML>
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 5/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
4 HTML và Webserver S7-1200
<i>…..</i> là thẻ dùng để in nghiên nội dung bên trong;
<u>…..</u> là thẻ dùng để gạch chân nội dung bên trong;
Bài tập nhỏ Hãy soạn một trang HTML đơn giản như sau:
CODE
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>Thi ế t k ế Webserver S7-1200</TITLE>
</HEAD>
<BODY>
<h1>Di ễn đàn PLC Việt Nam</h1>
<p>Di ễn đàn PLC Việt Nam là một trong những di ễn đàn tự động hóa n ổi ti ế ng và có uy tín
nh ất nước ta. Với đội ngũ hỗ trợ nhiệt tình, dày dạn kinh nghiệm cùng ki ế n thức chuyên môn
vững ch ắc, di ễn đàn PLC Việt Nam đã trở thành một nơi giao lưu học hỏi hiệu quả cho anh em
ngành kĩ thuật nói chung và tự động hóa nói riêng.</p>
<p>Nội dung trên di ễn đàn rất đa dạng phong phú với nhi ều mảng ki ế n thức khác nhau từ
ph ần m ềm, thi ế t bị đế n những dự án thực t ế hay thậm chí là những tâm tình, những trăn trở
và băn khoăn trong ngh ề.</p>
<br />
<b>Các hoạt động thực t ế </b>
<p>H ằng năm diễn đàn thường t ổ chức các bu ổi hội thảo chuyên đề để chia sẻ kinh nghiệm
thực t ế và giới thiệu những công nghệ mới. Thường xuyên mở các khóa đào tạo giúp mọi
người ti ế p cận với công nghệ tự động hóa một cách nhanh nh ấ t.</p>
<p>Ngoài ra, di ễn đàn cũng thường t ổ chức các bu ổi họp mặt offline để các thành viên có dịp
giao lưu chia sẽ kinh nghiệm trong ngành. Từ khi thành lập đế n nay, di ễn đàn đã trở thành một
c ầu n ối vững ch ắc, liên k ế t bộ phận kĩ sư, kĩ thuật viên, sinh viên và những người làm kĩ thuật
nói chung tạo nên một kh ối vững ch ắc, một n ền kĩ thuật lớn mạnh của nước nhà.</p>
<br />
<p>Với phương châm chia sẻ và học hỏi, di ễn đàn PLC Việt Nam hi vọng sẽ có th ể đóng gópnhi ều hơn vào nền công nghiệp của đất nước, đưa nền kĩ thuật nước ta ti ế n lên ngang b ằng với
các nước trong khu vực và th ế giới.</p>
<b><i>Chung tay xây dựng một cộng đồng tự động hóa PLC Việt Nam</i></b>
</BODY>
</HTML>
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 6/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
5Thi ế t k ế một trang web đơn giản
Hướng d ẫn thực hiện:
Mở chương trình Notepad++, chuy ển sang ngôn ngữ lập trình HTML và mã UTF-8 như hình
dưới:
Gõ lại đoạn code trên vào Notepad++
1
2
3
4
5
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 7/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
6 HTML và Webserver S7-1200
Save lại và mở b ằng trình duyệt b ất kì ta được k ế t quả như sau:
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 8/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
7Định dạng trang HTML
Đị
nh d
ạ
ng trang HTML
Như vậy chúng ta đã biế t cách tạo một trang HTML, trong ph ần này tác giả sẽ hướng d ẫn cách
định dạng cho các thành ph ần trong HTML.
Tạo một danh sách
Danh sách thông thườngĐể định dạng danh sách ki ểu thông thường, ta dùng cặp thẻ <UL>…..</UL> và <LI>…..</LI>.
Thẻ <UL>…..</UL> dùng để xác định vị trí
đầu và cu ối của danh sách.
Thẻ <LI>…..</LI> dùng để xác định nội dung
của các ph ần tử trong danh sách.
Danh sách ki ểu menu
Để định dang danh sách ki ểu menu, ta dùng cặp thẻ <OL>…..</OL> và <LI>…..</LI>.
Thẻ <Ol>…..</OL> dùng để xác định vị trí
đầu và cu ối của danh sách.
Thuộc tính Type của thẻ <OL> xác định ki ểu
đánh thứ tự của từng ph ần tử trong danhsách như kiểu s ố (1,2,3…) kiểu chữ in hoa
(A,B,C…)…
Thẻ <LI>…..</LI> dùng để xác định nội dung
của từng mục lớn trong danh sách.
Thuộc tính Type của thẻ <LI> xác định ki ểu
đánh thứ tự của từng ph ần tử trong danh
sách như chấm tròn đậm, ch ấ m tròn, hình
vuông.
M ỗi mục lớn sẽ g ồm những mục nhỏ hơnđược s ắp x ế p thành danh sách dạng
thường.
CODE
<UL>
<LI>Ph ần tử thứ nh ấ t</LI>
<LI>Ph ần tử thứ hai</LI>
…
<LI>Ph ần tử thứ n</LI>
</UL>
CODE
<OL Type=1/A/a/I/i>
<LI Type=disc/circle/square>Loại 1</LI>
Danh sách thường loại 1
<LI Type=disc/circle/square >Loại 2</LI>
Danh sách thường loại 2
…
<LI Type=disc/circle/square >Loại n</LI>
Danh sách thường loại n
</OL>
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 9/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
8 HTML và Webserver S7-1200
Định dạng văn bảnĐể định dạng văn bản trong HTML (màu s ắc, font chữ, kích thước,…), ta có thể dùng cặp thẻ
<FONT>…..</FONT> Cú pháp như sau:
Với “Kiểu chữ” là tên Font chữ bạn chon (ví dụ “Arial”), “Màu chữ” là dãy số hex g ồm 6 chữ s ố
mô tả mức độ của các màu cơ bản RGB (ví dụ màu tr ắng “FFFFFF”), “Cỡ chữ” là một s ố nguyên
lớn hơn 0 (ví dụ “15”).
Bài tập nhỏ Hãy soạn trang HTML có nội dung như sau:
CODE
<FONT FACE =”Kiểu chữ” COLOR=”Màu chữ” SIZE =”Cỡ chữ”>Nội dung</FONT>
CODE
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>Thi ế t k ế Webserver S7-1200</TITLE>
</HEAD>
<BODY>
<h1><FONT FACE=”Corbel” COLOR=”EFEFEFEF” SIZE=”15”>Diễn đàn PLC Việt
Nam</FONT></h1>
<h2>Các chuyên mục trên di ễn đàn</h2>
<OL Type=A>
<LI>Tự động hóa và ứng dụng</LI>
<UL>
<LI>Siemens Automation</LI>
<LI>Mitsubishi Electric</LI>
<LI>ABB Automation</LI>
<LI>Omron Automation</LI>
<LI>Rockwell Automation</LI>
<LI>Schneider Electric</LI>
<LI>IVNT Automation</LI>
<LI>Honeywell Automation</LI>
<LI>HMI và SCADA</LI>
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 10/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
9Định dạng trang HTML
CODE
<LI>Hệ th ống điều khi ển phân tán</LI>
<LI>Hệ th ống BMS và nhà thông minh</LI>
<LI>Hệ th ống HVAC</LI>
<LI>Động cơ DC – Servo – Step – Drive</LI>
<LI>…</LI>
<LI>Học tập tự động hóa online</LI>
</UL>
<LI>Cơ – điện – điện tử - IT</LI>
<UL>
<LI>Thi ế t k ế M&E – điện công nghiệp</LI>
<LI>Vi điều khi ển</LI>
<LI>…</LI>
<LI>Thư viện tài liệu</LI>
</UL>
<LI>Đối tác ngành giáo dục đào tạo</LI>
<UL>
<LI>Khóa học TĐH – Cơ điện – điện tử tại TP.HCM</LI>
<LI>Khóa học TĐH – TT CĐT Hải Dương</LI>
<LI>…</LI>
<LI>Thông tin dự án trọng điểm</LI>
</UL>
</OL>
</BODY>
</HTML>
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 11/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
10 HTML và Webserver S7-1200
Ta được k ế t quả như sau:
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 12/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
11Thẻ <BODY> - Tạo liên k ết và định dạng liên k ế t
Th
ẻ
<BODY> T
ạ
o liên k
ết và đị
nh d
ạ
ng liên k
ế
t
Thẻ <BODY>Ở các ph ần trước ta đã biế t thẻ <BODY> dùng để xác định ph ần thân của trang HTML. Thẻ
<BODY> còn có th ể được dùng để xác định các thuộc tính của trang HTML như hình nền, màu
n ền, canh l ề trang…
C ấu trúc đầy đủ của thẻ <BODY> như sau:
Giải thích:
LINK: màu của liên k ế t hi ển thị trong trang web
ALINK: màu của liên k ết đang chọn
VLINK: màu của liên k ết đã từng được chọn (từng click vào)
BGCOLOR: màu n ền của trang web
TEXT: màu chữ chung của cả trang web
T ấ t cả các thuộc tính màu s ắc trên là dãy s ố hex g ồm 6 chữ s ố mô tả mức độ của các màu cơbản RGB (ví dụ màu tr ắng “FFFFFF”).
BACKGROUND: đường d ẫn đế n hình n ền trang web. Mặc định HTML sẽ dò trong thư mục cùngc ấ p chứa file HTML n ếu như đường d ẫn chỉ có tên file.
Ví dụ BACKGROUND=“hinhnen.png” trong trường hợp này file hinhnen.png n ằm cùng
một thư mục với file HTML.
Đối với trường hợp file hình n ằm trong một thư mục khác, ta c ần địa chỉ đầy đủ d ẫn đế n file
hình đó.
Ví dụ BACKGROUND=“D:\My Pictures\wallpapers\hinhnen.png”
Đối với trường hợp file hình n ằm trong thư mục con của thư mục g ốc chứa file HTML, ta chỉ c ần
đường d ẫn b ắt đầu từ thư mục g ốc.
CODE
<BODY
LINK =“màu liên kết”
ALINK=“màu liên kết đang được chọn”
VLINK=“màu liên kết đã được chọn”
BACKGROUND=“hình nền trang web”
BGCOLOR=“màu nền trang web”
TEXT=”màu chữ”
>
Nội dung trang web
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 13/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
12 HTML và Webserver S7-1200
Ví dụ ta có file HTML n ằm ở địa chỉ “D:\documents\HTML\My webpage\test web.html”
File hình n ằm ở địa chỉ: “D:\documents\HTML\My webpage\background\hinhnen.png”
Như vậy ta chỉ c ần khai báo thuộc tính BACKGROUND=“background\hinhnen.png”
Tạo liên k ết và định dạng liên k ế t
Để tạo liên k ế t ta sử dụng cú pháp sau:
Giải thích:
HREF: liên k ế t c ần tạo, ví dụ: http://plcvietnam.com.vn
NAME: Tên của liên k ết (để quản lí trong trang HTML)
TITLE: Văn bản hi ển thị khi rê chuột vào liên k ế t
TARGET: có một trong 2 tùy chọn là “_blank” hoặc “_self”.
“_blank”: mở liên k ế t trong trang mới, “_self”: mở liên k ế t thay th ế trang hiện tại.
Bài tập nhỏ Hãy mở lại trang HTML của ph ần trước (Định dạng trang HTML) ta sẽ thêm vào một s ố thuộc
tính và chèn liên k ế t vào
CODE
<A HREF=“liên kế t c ần tạo” NAME=“Tên liên kết” TILTLE=“tiêu đề liên k ết” TARGET=“phươngthức mở liên k ết”> Tên rút gọn của liên k ế t </A>
CODE
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>Thi ế t k ế Webserver S7-1200</TITLE>
</HEAD>
<BODY BACKGROUND=“D:\Documents\Hoc tap\HTML\AWeb\CUSTOM\Test web\4.png”
TEXT=”FFFFFF” >
<h1><FONT FACE=”Corbel” COLOR=”EFEFEFEF” SIZE=”15”>Diễn đàn PLC Việt
Nam</FONT></h1>
<h2>Các chuyên mục trên di ễn đàn</h2>
…..
<A HREF=“http://plcvietnam.com.vn” NAME=“forum” TILTLE=“link” TARGET=“_blank”>
Di ễn đàn PLC Việt Nam
</A> …..
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 14/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
13Thẻ <BODY> - Tạo liên k ết và định dạng liên k ế t
Ph ần chữ in nghiêng là ph ần ta vừa thêm vào, hình n ền có th ể dùng b ấ t kì hình nào khác có trên
máy của bạn. Save lại và mở b ằng trình duyệt b ấ t kì ta có k ế t quả như sau:
Liên k ế t vừa thêm vào
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 15/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
14 HTML và Webserver S7-1200
Hình
ả
nh trong HTML
Để chèn hình ảnh vào trang web, bạn dùng cú pháp sau:
Giải thích:
SRC: đường d ẫn đế n file ảnh có c ấu trúc như đã trình bày ở ph ần hình n ền trang web
HSPACE/VSPACE: kích thước vùng tr ống được xác định b ằng một s ố nguyên, ví dụ “3”
BORDER: kích thước vi ền bao được xác định b ằng một s ố nguyên, ví dụ “5”
ALT: văn bản hi ển thị khi rê chuột vào ảnh, ví dụ “ảnh 1”
WIDTH: chi ều rộng bạn mu ốn hi ển thị trên web, ví dụ “320”
HEIGHT: chi ều cao bạn mu ốn hi ển thị trên web, ví dụ “240”
Bài tập nhỏ Soạn file HTML có nội dung như sau: (Xem trang k ế )
CODE
<IMG
SRC=“đường d ẫn đế n file âm ảnh”
HSPACE=”kích thước vùng tr ống theo chi ều ngang”
VSPACE=”kích thước vùng tr ống theo chi ều dọc”
BORDER=”kích thước vi ền bao”
ALT=”văn bản hi ển thị khi rê chuột vào ảnh”
WIDTH=”chiều rộng của ảnh”
HEIGHT=”chiều cao của ảnh”
>
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 16/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
15Hình ảnh trong HTML
CODE
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>Di ễn đàn PLC Việt Nam</TITLE>
</HEAD>
<BODY bgcolor="006633" text="FFFFFF">
<IMG alt="Header" align="bottom" src=" D:\Documents\PLCVietnam\banner\header.png"
width="990" height="87">
<h1>Di ễn Đàn PLC Việt Nam</h1>
<p>Di ễn đàn PLC Việt Nam là một trong những di ễn đàn tự động hóa n ổi ti ế ng và có uy tín nh ấ tnước ta. Với đội ngũ hỗ trợ nhiệt tình, dày dạn kinh nghiệm cùng ki ế n thức chuyên môn vững
ch ắc, di ễn đàn PLC Việt Nam đã trở thành một nơi giao lưu học hỏi hiệu quả cho anh em ngành
kĩ thuật nói chung và tự động hóa nói riêng.</p>
<p>Nội dung trên di ễn đàn rất đa dạng phong phú với nhi ều mảng ki ế n thức khác nhau từ ph ần
m ềm, thi ế t bị đế n những dự án thực t ế hay thậm chí là những tâm tình, những trăn trở và bănkhoăn trong nghề.</p>
<br />
b>Các hoạt động thực t ế </b>
<p>H ằng năm diễn đàn thường t ổ chức các bu ổi hội thảo chuyên đề để chia sẻ kinh nghiệm
thực t ế và giới thiệu những công nghệ mới. Thường xuyên mở các khóa đào tạo giúp mọi người
ti ế p cận với công nghệ tự động hóa một cách nhanh nh ấ t.</p>
<p>Ngoài ra, di ễn đàn cũng thường t ổ chức các bu ổi họp mặt offline để các thành viên có dịpgiao lưu chia sẽ kinh nghiệm trong ngành. Từ khi thành lập đế n nay, di ễn đàn đã trở thành một
c ầu n ối vững ch ắc, liên k ế t bộ phận kĩ sư, kĩ thuật viên, sinh viên và những người làm kĩ thuật
nói chung tạo nên một kh ối vững ch ắc, một n ền kĩ thuật lớn mạnh của nước nhà.</p>
<br />
<p>Với phương châm chia sẻ và học hỏi, di ễn đàn PLC Việt Nam hi vọng sẽ có th ể đóng gópnhi ều hơn vào nền công nghiệp của đất nước, đưa nền kĩ thuật nước ta ti ế n lên ngang b ằng với
các nước trong khu vực và th ế giới.</p>
<b><i>Chung tay xây dựng một cộng đồng tự động hóa PLC Việt Nam</i></b>
</BODY>
</HTML>
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 17/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
16 HTML và Webserver S7-1200
Save lại và mở b ằng trình duyệt b ấ t kì, ta có k ế t quả như sau:
Bảng trong HTML
Bảng là một thành ph ần h ế t sức quan trọng trong HTML. Người ta thường dùng bảng để trình
bày các s ố liệu, th ống kê, thông s ố… và chức năng quan trọng nh ấ t là tạo giao diện cho trang
HTML. Hãy hình dung bạn có một trang web với b ố cục như sau:
Header
Navigator Content
Footer
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 18/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
17Bảng trong HTML
Trong đó Header là phần tiêu đề trang web (Banner, câu chào…), Navigator là bảng liên k ết đế ncác trang khác, Content là nội dung trang đang hiển thị, Footer là ph ần k ế t của trang web (dùng
cho các thông tin v ề liên hệ, bản quy ền…).
Chúng ta sẽ dùng bảng để tạo các ô chứa những thành ph ần trên. C ấ u trúc lệnh tạo bảng nhưsau:
CODE
<TABLE
ALIGN=”Canh vị trí bảng”
BORDER=”Kích thước vi ền”
BORDERCOLOR=”Màu viền”
BACKGROUND=”Hình nền”
BGCOLOR=”Màu nền”
CELLSPACING=”Khoảng cách giữa các ô”
CELLPADDING=”Khoảng cách từ rìa ô đế n nội dung chứa trong ô”
>
<TR ALIGN=”Canh lề cho nội dung trong hàng” VALIGN=”Canh lề dọc cho nội dung trong
dòng”>
<TD>Nội dung hàng 1 cột 1</TD>
<TD>Nội dung hàng 1 cột 2</TD>
…
</TR>
<TR>
<TD>Nội dung hàng 2 cột 1</TD>
<TD>Nội dung hàng 2 cột 2</TD>
…
</TR>
…
</TABLE>
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 19/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
18 HTML và Webserver S7-1200
Giải thích:
<TR>…</TR> Cặp thẻ xác định hang
<TD>…</TD> Cặp thẻ xác định cột trong một hàng
ALIGN: Canh l ề trái “LEFT”, phải “RIGHT”, giữa “CENTER”.
BORDER: Kích thước vi ền là một s ố nguyên ví dụ “2”. Giá trị “0” sẽ định dạng bảng không có
vi ền bao.
BORDERCOLOR: Màu vi ền là dãy s ố hex g ồm 6 chữ s ố mô tả mức độ của các màu cơ bản RGB (ví
dụ màu tr ắng “FFFFFF”).
BACKGROUND: Đường d ẫn đế n file ảnh mu ốn sử dụng làm n ền cho bảng có dạng như đã mô tả
trong mục “Thẻ <BODY>”.
BGCOLOR: Màu n ền tương tự thuộc tính BORDERCOLOR.
CELLSPACING: Khoảng cách giữa các ô, là một s ố nguyên, ví dụ “2”.
CELLPADDING: Khoảng cách từ vi ền ô đế n nội dung chứa trong ô, là một s ố nguyên, ví dụ “2”.
VALIGN: Nội dung ở ph ần đầu ô “TOP”, giữa ô “MIDDLE”, cuối ô “BOTTOM”.
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 20/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
19Bảng trong HTML
Bài tập nhỏ Hãy soạn một trang HTML có nội dung như sau:
CODE
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>Hệ th ống giám sát</TITLE>
</HEAD>
<BODY>
<TABLE border="2" cellspacing="0" cellpadding="0" align="center">
<TR HEIGHT="10" align="center">
<TD WIDTH="100">Module</TD>
<TD WIDTH="200">Mô tả</TD>
<TD WIDTH="100">Trạng thái</TD>
</TR>
<TR HEIGHT=”10”>
<TD WIDTH="100">M1</TD>
<TD WIDTH="200">Động cơ kéo số 1</TD>
<TD WIDTH="100">Đang chạy</TD>
</TR>
<TR HEIGHT="10">
<TD WIDTH="100">M2</TD>
<TD WIDTH="200">Động cơ kéo số 2</TD>
<TD WIDTH="100">Đã dừng</TD>
</TR>
</TABLE>
</BODY>
</HTML>
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 21/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
20 HTML và Webserver S7-1200
Lưu lại và mở b ằng một trình duyệt b ất kì ta được k ế t quả như sau:
Webserver và AWP
Standard Webpages
S7-1200 cung c ấ p s ẵn trang web dạng chu ẩn cung c ấ p các thông tin cơ bản v ề PLC. Để truy cập
được trang này, bạn phải kích hoạt chức năng webserver trên PLC theo các bước sau:
Click phải vào PLC c ần kích hoạt, chọn Properties
1
2
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 22/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
21Standard Webpages
Cửa s ổ c ấ u hình PLC hiện ra, click chọn mục Webserver, sau đó check vào ô Enable… để
kích hoạt
Hộp thoại Security Note hiện ra, click OK để ti ế p tục
Sau đó Click OK ở cửa s ổ c ấu hình để hoàn t ấ t
1
2
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 23/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
22 HTML và Webserver S7-1200
Như vậy chúng ta đã hoàn tấ t việc kích hoạt tính năng Webserver trên S7-1200, bây giờ
chúng ta sẽ mở trình duyệt để truy cập vào server trên PLC. Mở trình duyệt, nhập địa chỉ IP của PLC vào thanh địa chỉ r ồi nh ấn Enter. Sau đó bạn sẽ th ấ y trang welcome xu ấ thiện, click Enter để ti ế p tục.
Để điều khi ển và giám sát PLC, bạn c ần đăng nhập vào Webserver với Name là admin và
khung password chừa tr ống. Trường hợp bạn đã cài đặt password cho PLC, hãy đăngnhập b ằng password đã tạo.
Sau khi đăng nhập, trang đầu tiên (Start Page) sẽ được hi ển thị như sau.
Trang này hi ển thị các thông tin v ề PLC như tên, địa chỉ IP và tác vụ cơ bản là RUN/STOPFLASHLED…
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 24/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
23Standard Webpages
Ti ế p theo bạn hãy xem qua trang Variable Status.
Trang này cho phép chúng ta xem và thay đổi trạng thái của một bi ế n b ấ t kì trên PLC
tương tự Watch Table trên TIA Portal.
K ế ti ế p là Diagnostic Buffer.
Trang này hi ển thị thông tin v ề lịch sử hoạt động của PLC, ta có th ể dựa vào các thông
tin đó để ch ẩn đoán lỗi cho PLC.
Datalogs
Trang này hi ển thị các file Log được lưu trên PLC nế u bạn dùng chức năng Data Logging.Tại trang này, chúng ta có th ể download file log ở dạng excel v ề thi ế t bị để xem.
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 25/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
24 HTML và Webserver S7-1200
Cu ối cùng là trang Update Firmware
Trang này cho phép cập nhật firmware của PLC ngay trên trình duyệt.
Bạn có th ể tự mình duyệt qua các trang còn lại để n ắm được các thành ph ần có trong
Standard Webpage.
User Defined Webpage
Standard Webpage có th ể đáp ứng được các yêu c ầu cơ bản trong giám sát và điều khi ển. Tuy
nhiên để tạo sự thuận lợi cho người dùng cu ối, chúng ta c ần một trang web với giao diện trực
quan hơn. Do vậy Siemens đã hỗ trợ thêm hình thức User Defined Webpage.
Tài liệu này sẽ tập trung vào việc hướng d ẫn bạn tạo một trang web theo ki ểu User Defined
Webpage.
AWPĐể tạo một trang User Defined Webpage, bạn c ần tìm hi ểu qua AWP.
Như đã trình bày ở ph ần đầu thì AWP chỉ là ph ần chú thích trong trang HTML.
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 26/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
25User Defined Webpage
AWP bao g ồm 3 tác vụ cơ bản là đọc giá trị từ PLC (Read), ghi giá trị xu ống PLC (Write) và thayth ế giá trị dạng s ố b ằng dạng văn bản (Enum).
Đọc giá trị từ PLC
Cú pháp
CODE
:=<Tên bi ế n>:
AWP
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 27/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
26 HTML và Webserver S7-1200
Ví dụ
Đọc giá trị từ ô nhớ I0.5
Đọc giá trị từ ô nhớ Q0.1
Đọc giá trị từ vùng nhớ MW10
Đọc giá trị từ Tag “Motor”
Đọc giá trị từ Tag “Sensor” trong Datablock1
Lưu ý:
Đố i v ớ i Tag, tên Tag phải được đặt trong cặ p d ấu “…” Còn với Datablock, tên Datablock cũng
phải đặt trong d ấu “…” nhưng tên biến trong Datablock đó thì không.
Bài tập nhỏ
Hãy soạn một trang HTML có nội dung như sau (Xem trang kế ):
CODE
:=I0.5:
CODE
:=Q0.1:
CODE
:=MW10:
CODE
:=”Motor”:
CODE
:=”Datablock1”.Sensor:
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 28/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
27User Defined Webpage
Dòng lệnh [<meta http-equiv="Refresh" content="5" >] sẽ cài đặt trang web tự động refresh
sau 5 giây để cập nhật thông s ố. Bạn có th ể thay đổi giá trị “5” bằng một s ố khác tùy theo yêu
c ầu. Hãy lưu trang web này lại, chúng ta sẽ download và ki ểm tra trên PLC sau.
Ghi giá trị xu ố ng PLC
Cú pháp
Để ghi giá trị xu ống PLC, trước h ế t chúng ta c ần khai báo bi ế n mu ốn ghi giá trị
Sau đó bạn dùng một form với phương thức POST để ghi giá trị vào bi ế n. Ch ẳng hạn:
Form text input
CODE
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta http-equiv="Refresh" content="5" >
<TITLE>S7 1200 Webserver</TITLE>
</HEAD>
<BODY>
<P>Trạng thái của Bit I0.0: :=I0.0:</P>
</BODY>
</HTML>
CODE
<!-- AWP_In_Variable Name='<Tên bi ế n>' -->
CODE
<!-- AWP_In_Variable Name='<Tên bi ế n>' -->
<form method="post">
<p><Dòng mô tả>: <input name='<Tên bi ế n>' type="text">
</p>
</form>
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 29/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
28 HTML và Webserver S7-1200
Form select
Ví dụ
Dùng text input
Form này thực hiện ghi giá trị vào Tag “Tank Level”.
CODE
<!-- AWP_In_Variable Name='<Tên bi ế n>' -->
<form method="post">
<select name='[Tên bi ế n]'>
<option value=:[Tên bi ế n]:> </option>
<option value=[Giá trị 1]>[Tùy chọn 1]</option>
<option value=[Giá trị 2]>[Tùy chọn 2]</option>
</select>
<input type="submit" value="[Tên nút nh ấ n]">
</form>
CODE
<!-- AWP_In_Variable Name='"Tank_Level"' -->
<form method="post">
<p>Cài đặt mức nước: <input name='"Tank_Level"' type="text">
</p>
</form>
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 30/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
29User Defined Webpage
Dùng Select form
Form này cho phép lựa chọn giá trị là On hoặc Off cho Tag “Switch”, sau khi chọn xong nh ấ n
“Xác nhận” để gửi dữ liệu v ề PLC.
Bài tập nhỏ
Hãy soạn một trang HTML có nội dung như sau:
CODE
<!-- AWP_In_Variable Name='"Switch"'-->
<form method="post">
<select name='"Switch"'>
<option value=:"Switch":> </option>
<option value=1>On</option>
<option value=0>Off</option>
</select><input type="submit" value="Xác nhận"></form>
CODE
<!--Tag Declaration-->
<!-- AWP_In_Variable Name='"Switch"'-->
<!---------------------------------------------------><HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<TITLE>S7 1200 Webserver</TITLE>
</HEAD>
<BODY>
<form method="post">
<select name='"Switch"'>
<option value=:"Switch":> </option>
<option value=1>On</option>
<option value=0>Off</option>
</select><input type="submit" value="Xác nhận"></form>
</BODY>
</HTML>
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 31/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
30 HTML và Webserver S7-1200
Ở trang này ta không c ần dòng lệnh tự refresh do chỉ dùng để điều khi ển chứ không giám sát.
Hãy lưu trang web này lại, chúng ta sẽ download và ki ểm tra trên PLC sau.
Thay th ế giá trị s ố b ằng văn bản
Trong thực t ế đối với người dùng cu ối (end-user), việc giám sát hệ th ống thông qua những con
s ố là sự phi ền toái. Có nghĩa là trang web của chúng ta kém thân thiện với người dùng.
Ch ẳng hạn bạn có 2 giá trị của một bi ế n là 0 hoặc 1. Nhưng thay vì sử dụng 2 giá trị này để hi ển
thị, ta có th ể dùng 2 từ g ần gũi với người dùng hơn là “Bật” “Tắt”, “Chạy” “Dừng” hay “On”“Off”.
Ta có th ể làm được điều này thông qua Javascript. Tuy nhiên, S7-1200 đã hỗ trợ s ẵn câu lệnh
giúp bạn thực hiện điều này một cách d ễ dàng. Đó chính là Enum.
Cú pháp
Để sử dụng Enum, trước h ế t bạn c ần phải khai báo.
Sau đó bạn sẽ xác định bi ế n nào sử dụng Enum này.
Ví dụ
Khi Tag động cơ mang giá trị 0, S7-1200 sẽ tương đương giá trị này với dòng chữ “Đã dừng”.
Khi Tag động cơ mang giá trị 1, S7-1200 sẽ tương đương giá trị này với dòng chữ “Đang chạy”.
CODE
<!-- AWP_Enum_Def Name='<Tên Enum>'
Values='<Giá trị 1>:”Văn bản 1”,<Giá trị 2>:”Văn bản 2”’-->
CODE
<!-- AWP_Enum_Ref Name='<Tên bi ế n>' Enum='<Tên Enum>' -->
CODE
<!-- AWP_Enum_Def Name='BitStatus' Values='0:"Đã dừng",1:"Đang chạy"' -->
<!-- AWP_Enum_Ref Name='"Động cơ 1"' Enum='BitStatus' -->
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 32/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
31User Defined Webpage
Bài tập nhỏ
Hãy soạn một trang HTML có nội dung như sau:
Hãy lưu trang web này lại, chúng ta sẽ download và ki ểm tra trên PLC sau.
CODE
<!--Enum Decleration-->
<!-- AWP_Enum_Def Name='BitStatus' Values='0:"False",1:"True"' -->
<!----------------------------------------------------------------------------------------------------->
<!--Enum Reference-->
<!-- AWP_Enum_Ref Name='"Start"' Enum='BitStatus' -->
<!----------------------------------------------------------------------------------------------------->
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta http-equiv="Refresh" content="5" >
<TITLE>S7 1200 Webserver</TITLE>
</HEAD>
<BODY>
<P>Trạng thái của Bit Start: :=”Start”:<P>
</BODY>
</HTML>
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 33/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
32 HTML và Webserver S7-1200
Làm việc với Webserver S7-1200
Download chương trình và nạp trang web xu ố ng PLC
Mở TIA Portal và kích hoạt tính năng Webserver như đã hướng d ẫn ở mục Standard Webpage.
Tại mục User-defined webpage, click chọn đường d ẫn đến thư mục chứa file HTML mà bạn vừa
tạo trong bài tập nhỏ ở ph ần Enum.
1
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 34/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
33User Defined Webpage
Sau đó xác định file HTML được mở trong mục Default HTML Page
Click nút Generate blocks để TIA Portal ti ế n hành đóng gói dữ liệu web thành các Datablock
Hãy chú ý mục Web DB number
Click OK để hoàn t ấ t quá trình khai báo User-defined webpage.
2
3
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 35/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
34 HTML và Webserver S7-1200
Mở kh ối OB1
Tại mục Communication bên phải, click chọn mục WEB server
4
5
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 36/37
Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI
35User Defined Webpage
Kéo thả kh ối WWW vào OB1
Khai báo các thông s ố cho kh ối WWW như trong hình, chú ý rằng giá trị tại chân CTRL_DB chính
là giá trị tại ô Web DB number.
Tạo một tag với tên “Start” và địa chỉ là I0.0 trên TIA Portal (ở mục PLC tags) sau đó lưu chươngtrình lại và Download xu ống PLC. Bây giờ bạn đã có thể truy cập vào Webserver trên PLC.
Truy cập User-defined webpage trên PLC
Mở trình duyệt, nhập địa chỉ IP của PLC vào thanh địa chỉ r ồi nh ấ n Enter. Ti ế p tục truy cập vào
Standard Webpage như đã hướng d ẫn ở ph ần trước.
Đăng nhập trang web với quy ền admin. Khi đăng nhập với quy ền admin, bạn sẽ được phép truy
cập vào t ấ t cả các thành ph ần của Webserver bao g ồm cả User-defined webpage.
Chuy ển đế n trang User Pages r ồi click vào đường d ẫn “Homepage of the application”
6
7/17/2019 Webserver s7 - 1200
http://slidepdf.com/reader/full/webserver-s7-1200 37/37
36 HTML và Webserver S7-1200
Trang web bạn tạo sẽ hi ển thị trên trình duyệt, bây giờ hãy thay đổi trạng thái của bit Start
(chân I0.0) và quan sát sự thay đổi trên trang web. Ti ế p tục ki ểm tra với các trang web bạn đãvi ế t ở những ph ần trước để n ắm được các thao tác khi làm việc với User-defined webpage.
Lưu ý: khi muốn thay đổ i trang Web đang sử d ụng trong Project, bạn phải khai báo l ại các mục
HTML Directory và Default HTML page đồng thờ i xóa các kh ố i d ữ li ệu web đã tạo trước đó bằng
cách click vào nút Delete blocks. Sau đó click lại vào nút Generate blocks để t ạo kh ố i d ữ li ệu mớ ivà thao tác như bình thườ ng.
*****
Chúc bạn thành công