Web Server với PLC S7-1200 Siemen – [HTML, CSS, Javascript]

Web Server với PLC S7-1200 Siemen hay những hãng PLC khác là một ứng dụng sử dụng Internet để điều khiển thiết bị ngoại vi thông qua PLC. Có thể hiểu đơn giản như sử dụng HMI điều khiển offline PLC. Với ứng dụng Web server thì bạn có thể kết hợp cả HMI và Web điều khiển song song. Ưu điểm của Web Server là bạn có thể điều khiển PLC, thiết bị ngoại vi bằng bất kỳ thiết bị nào có trình duyệt web và mạng internet.

Trong bài viết này, QThang sẽ hướng dẫn các bạn làm một ứng dụng Web Server từ việc cấu hình phần cứng PLC, lập trình PLC, thiết kế Web với HTML, CSS, Javascript…

.

Cấu hình phần cứng Web Server với PLC S7-1200 Siemen

1. Cấu hình địa chỉ PLC và cũng là địa chỉ để truy cập web server nội bộ. Ví dụ như bạn đang truy cập vào trang https://qthang.net thì ở đây để truy cập vào PLC hay web server thì bạn sẽ nhập địa chỉ http://192.168.1.204

Web Server với PLC S7-1200 Siemen – [HTML, CSS, Javascript]

2. Bật ứng dụng Web Server trên PLC Siemen S7 1200

3. Bật các system memory bit, để tiện sử dụng trong lập trình. Nếu bạn đã biết về S7-200 của Siemen thì cũng có các system memory bit như này, ở plc Mitsubishi cũng có. (Có thể bỏ qua nếu không muốn)

4. Trong tuỳ chọn Web server, sẽ có một số cái cần cấu hình. Ở ảnh bên dưới là kích hoạt tất cả các module web server của PLC để có thể sử dụng web server

5. Phần quyền người dùng truy cập, bạn cứ để như hình thì nó sẽ là tất cả mọi người đều có quyền như admin. Sau khi đã hiểu thì có thể thử phân quyền và tự khám phá nhé!

6. Nếu là lần đầu tiên thì tạm bỏ qua bước này, hãy xem bước 7.
Phần này là cấu hình đường dẫn chứa các file của Web. Bạn có thể hiểu để có 1 web hiển thị trên trình duyệt thì nó cần nhiều file và để thuận tiện thì người ta sẽ để chung vào 1 thư mục để quản lý (bạn có thể để lung tung cũng được :))) nhưng không nên).
– HTML directory: Đường dẫn đến thư mục project web
– Default HTML page: chọn file hiển thị đầu tiên (có thể hiểu vậy – như trang chủ của qthang.net còn các trang như bạn đang xem đây là trang con)
– Application Name: Tên ứng dụng hay là cái tiêu đề bạn nhìn trên tab trình duyệt này.
– Generate blocks: cái này để chuyển đổi file web sang block để PLC có thể hiểu. Sau mỗi lần chỉnh sửa HTML, bạn muốn nó có tác dụng thì bạn cần Generate blocks lại.
– Advance: các bạn cứ để mặc định như hình

7. Tuỳ theo version PLC mới có tuỳ chọn này.
– Nếu có thì bạn cần chọn UP1 để hiển thị cái trang index.html hay là trang có giao diện bạn thiết kế. Hoặc để mặc định để truy cập trang mặc định do Siemen cấu hình, sau đó mới vào trang index.html của bạn.
– Nếu không có thì bỏ qua và mặc định khi truy cập theo ip của PLC sẽ vào trang của siemen (lúc đầu nên để mặc định để xem thử bạn cấu hình đc chưa)

8. Cấp quyền điều khiển HMI, Read, Write và Password

9. Cho phép điều khiển từ bên ngoài đến PLC. HMI hay Web server đều cần bật cái này lên.

10. Như vậy là cấu hình phần cứng cơ bản là xong. Bạn download xuống PLC và xem thử. Lưu ý là nên làm theo bước 7 trước để test xem cấu hình đúng chưa, sau đó làm lại bước 6 theo ý bạn. Mặc định sẽ như hình bên dưới, sau khi đã làm được file index thì bạn vào tiếp User Pages để vào trang bạn thiết kế.

Thiết kế Web server với HTML, CSS và Javascript

I. Tổng quan về 1 project web server

Do bài này hơi dài nên bạn có thể tìm hiểu qua về lập trình web trên google, phần này QThang chỉ hướng dẫn những cái cơ bản và cần để ra được Web server.

1. Các thành phần trong project web server

– HTML: Cấu trúc 1 trang web để hiển thị cho bạn thấy

<!DOCTYPE html>
<html>
<head>  
    <meta charset="utf-8"/>
    <!--Add css, js, title-->
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="jquery-2.0.2.min.js"></script>
    <title>Tiêu đề trang</title>
</head>

<body>
...Phần thân viết ở đây...
</body>
</html>

– CSS: Add vào phần <head>…</head>, đây là cái để làm giao diện, làm đẹp theo ý hay nó là style của trang HTML

– Javascript: Cái này thì nó giống như code C, C# hay Pascal… 🙂 nó dùng để lập trình điều khiển cái web, hiểu nôm na là vậy.

2. Tạo 1 thư mục web server và bên trong nó sẽ có thư mục và file như hình
Để gọn gàng với 1 project web thì bên trong thư mục chính sẽ gồm các thư mục img để chứa ảnh, css để chứa file style, js để chứa file javascript. Không cần tạo thư mục con cũng được vì nó chỉ là để dễ quản lý và nhìn khoa học, đỡ rối. Để tạo file thì bạn có thể dùng notepad có sẵn trong windows hoặc sử dụng subline text (QThang dùng cái này).
– img: thư mục chứa ảnh
– index.html: trang chính hiển thị như kiểu trang chính trong HMI, rồi sẽ có các trang con từ trang chính vào đó.
– IO.html: trang được tách ra để tạo json (hiểu nó như là dạng tập tin chứa dữ liệu, trang index sẽ đọc nó) và cấu trúc liên kết giữa PLC và web server. Ở đây coi nó là cầu nối giữa PLC và Web server.
– jquery-2.0.2.min.js: thư viện để có thể sử dụng được javascript. Nó có nhiều phiên bản, bạn có thể tìm hiểu thêm.
– style.css: file cấu hình style – phong cách cho trang web

II. Chi tiết từng thành phần trong project web server

1. Phân tính 1 web server. Hãy xem 1 cái tôi đã làm bên dưới.
Đây là một giao diện tổng thể đã được lắp ghép với nhiều hình ảnh.
– Thứ nhất là có 1 hình nền, cố định không thay đổi gì cả.
– Thứ 2 là bao gồm nhiều hình con PNG, đó là các hình bơm, cảm biến. Nó được tách rời rồi mới ghép bởi vì ta cần đổi màu của chúng như trên HMI.
– Thứ 3: làm sao để ghép và đổi màu chúng thì cần đến css và javascript

Ví dụ đây là hình nền

2. Thư mục img chứa file ảnh con và cả hình nền (main) cũng để trong đó cho dễ quản lý
Các hình này các bạn có thể dùng photoshop cắt ra từ thiết kế HMI hoặc dùng Symbol Factory 2.0 để lưu tải hình về máy. Ở đây QThang để màu xanh chính là màu để hiển thị khi ON, OFF là màu xám thì cái này cần dùng đến css và javascript xử lý.

3. File IO.html là cấu trúc theo AWP do siemen sử dụng như vậy, dùng AWP để đọc giá trị data từ PLC, trong file IO.html có cấu trúc json sử dụng data từ PLC.

4. File style.css – Sử dụng file này để cấu hình cho từng thành phần trong index.html như hình nền, nút nhấn button, bơm, cảm biến. Nó quá dài nên chỉ có thể gợi ý để bạn tìm hiểu thêm.

5. File index.html – trang chính hiển thị giao diện và xử lý lập trình theo ý muốn.
– Trong phần <head>…</head> để add thêm css, thư viện javascript, tiêu đề trang title
– Trong phần <body>…</body> chứa thiết kế giao diện như add hình nền, add các phần tử như nút nhấn, bơm, cảm biến,… Sử dụng css để đưa các thành phần con đến đúng vị trí.
– Javascript bạn có thể add trong body hoặc để bên ngoài nhưng bắt buộc phải ở trong <html>…</html>. Sử dụng javascript để đọc json và đổi màu của các thành phần con.

6. QThang hiện tại chỉ có thể hướng dẫn tổng quát, để chuyên sâu từng phần bạn cần có chút kiến thức về web, hãy tìm hiểu thêm về web và xem hướng dẫn của QThang.
Gợi ý: Chưa cần load vào plc mà hãy dùng trình duyệt mở file index.html và chỉnh sửa theo ý muốn.
7. Hoàn thành project web, làm lại bước 6 trong cấu hình phần cứng PLC.

Lập trình PLC để giao tiếp với Web server

1. Kéo function WWW để có thể giao tiếp Web server. Bạn vào Communication > Web server và kéo function ra network.

– CTRL_DB bạn kéo block DB 333 như hình vào, làm sao để có như hình thì nó chính là bước số 6 trong cấu hình phần cứng khi bạn nhấn Generate blocks thì nó tạo ra những block từ 333-888.
– RET_VAL: thông tin lỗi – đặt là một vùng nhớ để có thể xem hoặc không cần đặt.

2. Tiếp theo là bạn lập trình theo yêu cầu bài toán
– Làm tương tự như khi lập trình HMI, sử dụng biến song song 1 biến điều khiển cứng, 1 biến dùng cho HMI, Web server điều khiển.
– Hiển thị thì có thể dùng chung hoặc dùng bit riêng cho HMI và Web server.
– Có thể tạo 1 block để dễ quản lý nếu bạn thông thạo về block data
3. Từ những bit data dành riêng cho Web server thì cũng như HMI, bạn gắn chúng vào file IO.html trong project web với cấu trúc AWP
Sử dụng dụng Javascript để đọc và ghi vào json từ file IO.html. PLC dựa theo cấu trúc AWP sẽ đọc và gửi được các giá trị hiện tại trên web.
Bạn có thể hiểu là index.html dùng javascript để đọc json thì PLC sử dụng AWP để đọc hiểu data.

Tài liệu WEB server của Siemens

Link download: Link tốc độ cao | Link Siemen

Cấu hình kết nối điều khiển PLC từ xa qua internet

Trong bài viết này chia sẻ đến bạn cách làm web server và nó chỉ có thể điều khiển nội bộ trong mạng LAN, có thể điều khiển quan Wifi từ máy tính hoặc điện thoại theo cách kết nối PLC với modem wifi; điện thoại, máy tính bắt wifi từ modem đó là có thể điều khiển được.

QThang sẽ cố gắng để chia sẻ đến các bạn cách cấu hình kết nối từ xa ở một bài viết khác. Nói qua thì nó cũng khá tốn chi phí thiết bị khác và cũng có thể xây dựng kết nối với giá sinh viên. Mong các bạn luôn ủng hộ để có thể tiếp tục chủ đề này 😀 (Click quảng cáo hoặc donate cho QThang nhé :v )

Kết luận

Trên đây là bài viết hướng dẫn lập trình thiết kế Web server với PLC S7-1200 Siemen – HTML, CSS, Javascript của QThang, một bài viết dài nhất từ trước đến giờ. Có thể nó chưa được chi tiết nhưng cũng khá cơ bản để bạn có thể có cái nhìn tổng quát về Web server với PLC Siemens và cũng có thể áp dụng với PLC hãng khác. Cần giải đáp thắc mắc hỗ trợ thì hãy comment bên dưới hoặc liên hệ admin. Chia sẻ bài viết nếu nó giúp ích cho bạn nhé. Chúc các bạn thành công!

Nội dung chính