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 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. 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ăng nà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 ến và tính năng năng Webserver cũng 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 ể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) p)
ệ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 nghiên cứ u. Tài li ệu u. Tác gi ả có sử d d ụng một s ố tài tài li ệu tham khảo sau:
Hướ ng ẫn thi ế t k ế Web ng d Web – Aweb.vn Aweb.vn
S7-1200 System Manual - Siemens
ễn Đàn PLC Việt Nam – chauvinhloi@ Di ễ
[email protected] gmail.com
CHÂU VĨNH LỢI
1
2
HTML và Webserver S7-1200
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à “trang
web”. 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. t. Bạn có th ể download Notepad++ theo đị a chỉ: http://notepad-plus-plus.org/
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 ểu được. Từ đó chúng ta có thể truy cập dữ liệu trên PLC thông qua AWP.
ễn Đàn PLC Việt Nam – chauvinhloi@ Di ễ
[email protected] gmail.com
CHÂU VĨNH LỢI
Thi ế t k ế một trang web đơn giả n
C ấ u trúc cơ bản của một trang HTML HTML Structrue
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Tiêu đề trang Web
Đề mục
nội dung thứ nh ấ t
nội dung thứ hai
… Giải thích: Một cặp thẻ HTML bao g ồm
Nội dung Trong ví dụ trên ta th ấ y có các c ặp thẻ sau:
….. dùng để định nghĩa đó là một trang HTML; ….. dùng để định nghĩa phần tiêu đề cho trang HTML; ….. dùng để định nghĩa phần thân của trang HTML;
….. 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…; …..
dùng để xác định nội dung bên trong là m ột đề mục; …..
dùng để xác định đây là đoạn văn bả n chứa nội dung web;
là th ẻ dùng để xu ống dòng (brake);
….. là thẻ dùng để in đậm nội dung bên trong; Di ễn Đàn PLC Việt Nam – chauvinhloi@gmail.com
CHÂU VĨNH LỢI
3
4
HTML và Webserver S7-1200
….. là thẻ dùng để in nghiên nội dung bên trong; ….. 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
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Thi ế t k ế Webserver S7-1200
Di ễn đàn PLC Việt Nam
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.
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 t rong ngh ề.
Các hoạt động thực t ế 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.
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à.
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óp nhi ề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.
Chung tay xây d ựng một cộng đồng tự động hóa PLC Việt Nam
Di ễn Đàn PLC Việt Nam –
[email protected]
CHÂU VĨNH LỢI
Thi ế 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:
4
1
5
2 3
Gõ lại đoạn code trên vào Notepad++
Di ễn Đàn PLC Việt Nam –
[email protected]
CHÂU VĨNH LỢI
5
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:
Di ễn Đàn PLC Vi ệt Nam –
[email protected]
CHÂU VĨNH LỢI
Đị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ẻ
và
…... Thẻ
dùng để xác định vị trí đầu và cu ối của danh sách.
CODE
- Ph ần tử thứ nh ấ t
Thẻ - …..
dùng để xác định nội dung của các ph ần tử trong danh sách.
- Ph ần tử thứ hai
… - Ph ần tử thứ n
Danh sách ki ểu menu
Để định dang danh sách ki ểu menu, ta dùng cặp thẻ
…..
và
…... Thẻ
…..
dùng để xác định vị trí đầu và cu ối của danh sách.
CODE
- Loại 1
Danh sách thường loại 1 - Loại 2
Danh sách thường loại 2
Thuộc tính Type c ủa thẻ xác đị nh ki ểu đánh thứ tự của từng ph ần tử trong danh sách như kiểu s ố (1,2,3…) kiểu chữ in hoa
(A,B,C…)… Thẻ - …..
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ẻ - xác đị nh ki ểu
- Loại n
đá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
Danh sách thường loại n
Di ễn Đàn PLC Việt Nam – [email protected]
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.
CHÂU VĨNH LỢI
7
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ẻ ….. Cú pháp như sau: CODE
Nội dung 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
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Thi ế t k ế Webserver S7-1200
Diễn đàn PLC Việt Nam
Các chuyên mục trên di ễn đàn
- Tự động hóa và ứng dụng
- Siemens Automation
- Mitsubishi Electric
- ABB Automation
- Omron Automation
- Rockwell Automation
- Schneider Electric
- IVNT Automation
- Honeywell Automation
- HMI và SCADA
Di ễn Đàn PLC Vi ệt Nam – [email protected]
CHÂU VĨNH LỢI
Định dạng trang HTML CODE - Hệ th ống điều khi ển phân tán
- Hệ th ống BMS và nhà thông minh
- Hệ th ống HVAC
- Động cơ DC – Servo – Step – Drive
- …
- Học tập tự động hóa online
- Cơ – điện – điện tử - IT
- Thi ế t k ế M&E – điện công nghiệp
- Vi điều khi ển
- …
- Thư viện tài liệu
- Đối tác ngành giáo d ục đào tạo
- Khóa học TĐH – Cơ điện – điện tử tại TP.HCM
- Khóa học TĐH – TT CĐT Hải Dương
- …
- Thông tin d ự án trọng điểm
Di ễn Đàn PLC Việt Nam – [email protected]
CHÂU VĨNH LỢI
9
10
HTML và Webserver S7-1200
Ta được k ế t quả như sau:
Di ễn Đàn PLC Vi ệt Nam – [email protected]
CHÂU VĨNH LỢI
Thẻ - T ạo liên k ết và định dạng liên k ế t
Thẻ Ở các ph ần trước ta đã biế t thẻ dùng để xác định ph ần thân của trang HTML. Thẻ 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ẻ như sau: CODE
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
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ùng c ấ 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. Di ễn Đàn PLC Việt Nam –
[email protected]
CHÂU VĨNH LỢI
11
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: CODE
Tên rút gọn của liên k ế t 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
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Thi ế t k ế Webserver S7-1200
Diễn đàn PLC Việ t Nam
Các chuyên mục trên di ễn đàn
…..
ễn đàn PLC Việt Nam Di ….. Di ễn Đàn PLC Vi ệt Nam –
[email protected]
CHÂU VĨNH LỢI
Thẻ - 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
Di ễn Đàn PLC Việt Nam –
[email protected]
CHÂU VĨNH LỢI
13
14
HTML và Webserver S7-1200
Để chèn hình ảnh vào trang web, b ạn dùng cú pháp sau: CODE
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” > 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 ế )
Di ễn Đàn PLC Vi ệt Nam –
[email protected]
CHÂU VĨNH LỢI
Hình ảnh trong HTML
CODE <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Di ễn đàn PLC Việt Nam Di ễn Đàn PLC Việt Nam
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.
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ề.
b>Các hoạt động thực t ế
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.
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à.
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óp nhi ề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.
Chung tay xây d ựng một cộng đồng tự động hóa PLC Việt Nam
Di ễn Đàn PLC Việt Nam –
[email protected]
CHÂU VĨNH LỢI
15
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 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 Di ễn Đàn PLC Vi ệt Nam –
[email protected]
CHÂU VĨNH LỢI
Bả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 đế n cá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
Nội dung hàng 1 cột 1 | Nội dung hàng 1 cột 2 |
…
Nội dung hàng 2 cột 1 | Nội dung hàng 2 cột 2 |
…
…
Di ễn Đàn PLC Việt Nam –
[email protected]
CHÂU VĨNH LỢI
17
18
HTML và Webserver S7-1200
Giải thích:
…
Cặp thẻ xác định hang
… | 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ẻ ” . 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”.
Di ễn Đàn PLC Vi ệt Nam –
[email protected]
CHÂU VĨNH LỢI
Bảng trong HTML
Bài tập nhỏ Hãy soạn một trang HTML có n ội dung như sau: CODE <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Hệ th ống giám sát Module | Mô tả | Tr ạng thái |
M1 |
Động cơ kéo số 1 | Đang chạ y |
M2 |
Động cơ kéo số 2 | Đã dừ ng |
Di ễn Đàn PLC Việt Nam –
[email protected]
CHÂU VĨNH LỢI
19
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:
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
Di ễn Đàn PLC Vi ệt Nam –
[email protected]
CHÂU VĨNH LỢI
Standard 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
2
1
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
Di ễn Đàn PLC Việt Nam –
[email protected]
CHÂU VĨNH LỢI
21
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 ấ t hiệ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 đăng nhậ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/STOP FLASHLED…
Di ễn Đàn PLC Vi ệt Nam –
[email protected]
CHÂU VĨNH LỢI
Standard 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. Di ễn Đàn PLC Việt Nam –
[email protected]
CHÂU VĨNH LỢI
23
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.
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. Di ễn Đàn PLC Vi ệt Nam –
[email protected]
CHÂU VĨNH LỢI
User Defined Webpage
AWP
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à thay th ế giá trị dạng s ố b ằng dạng văn bản (Enum).
Đọc giá trị từ PLC Cú pháp CODE :=
:
Di ễn Đàn PLC Việt Nam – [email protected]
CHÂU VĨNH LỢI
25
26
HTML và Webserver S7-1200
Ví dụ
CODE :=I0.5:
Đọc giá trị từ ô nhớ I0.5
CODE :=Q0.1:
Đọc giá trị từ ô nhớ Q0.1
CODE :=MW10:
Đọc giá trị từ vùng nhớ MW10
CODE
:=”Motor”: Đọc giá trị từ Tag “Motor”
CODE
:=”Datablock1”.Sensor: Đọ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ế ):
Di ễn Đàn PLC Vi ệt Nam – [email protected]
CHÂU VĨNH LỢI
User Defined Webpage
CODE
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <meta http-equiv="Refresh" content="5" > S7 1200 Webserver
Trạng thái của Bit I0.0: :=I0.0:
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 ị CODE
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
Di ễn Đàn PLC Việt Nam – [email protected]
CHÂU VĨNH LỢI
27
28
HTML và Webserver S7-1200 Form select CODE
Ví dụ Dùng text input CODE Form này th ực hiện ghi giá trị vào Tag “Tank Level”.
Di ễn Đàn PLC Vi ệt Nam – [email protected]
CHÂU VĨNH LỢI
User Defined Webpage Dùng Select form CODE
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
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" > S7 1200 Webserver
Di ễn Đàn PLC Việt Nam – [email protected]
CHÂU VĨNH LỢI
29
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. CODE
Sau đó bạn sẽ xác định bi ế n nào sử dụng Enum này. CODE
Ví dụ CODE
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”.
Di ễn Đàn PLC Vi ệt Nam – [email protected]
CHÂU VĨNH LỢI
User Defined Webpage
Bài tập nhỏ Hãy soạn một trang HTML có n ội dung như sau: CODE
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <meta http-equiv="Refresh" content="5" > S7 1200 Webserver
Trạng thái của Bit Start: :=”Start”:
Hãy lưu trang web này lạ i, chúng ta s ẽ download và ki ểm tra trên PLC sau.
Di ễn Đàn PLC Việt Nam – [email protected]
CHÂU VĨNH LỢI
31
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
Di ễn Đàn PLC Vi ệt Nam – [email protected]
CHÂU VĨNH LỢI
User Defined Webpage
Sau đó xác định file HTML đượ c mở trong mục Default HTML Page
2
Click nút Generate blocks để TIA Portal ti ế n hành đóng gói dữ liệu web thành các Datablock
3
Hãy chú ý mục Web DB number
Click OK để hoàn t ấ t quá trình khai báo User-defined webpage. Di ễn Đàn PLC Việt Nam – [email protected]
CHÂU VĨNH LỢI
33
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
Di ễn Đàn PLC Vi ệt Nam – [email protected]
CHÂU VĨNH LỢI
User Defined Webpage Kéo thả kh ối WWW vào OB1
6 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ương trì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”
Di ễn Đàn PLC Việt Nam – [email protected]
CHÂU VĨNH LỢI
35