Thiết kế web Điều khiển thiết bị nhà thông minh với plc s7 1200

Nhiệm vụ nghiên cứu - Xây dựng giao diện Web bằng phần mềm Adobe Dreamweaver CS6 - Giao tiếp giao diện Web với PLC S7-1200 để thu thập dữ liệu và điều khiển các thiết bị trong nhà.. Xây

ỦY BAN NHÂN DÂN TP.HCM

TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THỦ ĐỨC

NGHIÊN CỨU KHOA HỌC NĂM HỌC 2022 -2023

Tên đề tài: Thiết kế Web điều khiển thiết bị nhà thông

ỦY BAN NHÂN DÂN TP.HCM

TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THỦ ĐỨC

NGHIÊN CỨU KHOA HỌC NĂM HỌC 2022 -2023

Tên đề tài: Thiết kế Web điều khiển thiết bị nhà thông

MỤC LỤC

PHẦN MỞ ĐẦU 1

1 Lý do chọn đề tài 1

2 Mục đích nghiên cứu 1

3 Đối tượng và khách thể nghiên cứu 1

4 Nhiệm vụ nghiên cứu 1

5 Phương pháp nghiên cứu 1

6 Phạm vi nghiên cứu 2

PHẦN NỘI DUNG 3

Chương 1 : Tổng quan 3

Chương 2 : Nội dung 6

2.1 Thiết kế giao diện Web 6

2.1.1 Phần mềm thiết kế Web Adobe Dreamweaver CS6 6

2.1.2 Giao diện Web điều khiển các thiết bị trong nhà 8

2.2 Giao tiếp giao diện Web với PLC S7-1200 10

2.2.1 Ajax 10

2.2.2 Chương trình Javascript giao tiếp web với PLC S7-1200 12

2.3 Thu thập dữ liệu và điều khiển các thiết bị trong nhà 14

Chương 3 : Kết quả nghiên cứu 18

KẾT LUẬN VÀ KIẾN NGHỊ 19

TÀI LIỆU THAM KHẢO 21

DANH MỤC CHỮ VIẾT TẮT

IoT: Internet of Things

PLC: Programmable Logic Controller

AJAX: Asynchronous JavaScript and XML

HTML: Hypertext Markup Language

DANH MỤC HÌNH ẢNH

Hình 1.1: IoT - Internet of Things 3

Hình 1.2: Ứng dụng của IoT 4

Hình 2.1: Phần mềm Adobe Dreamweaver CS6 6

Hình 2.2: Trang giới thiệu thông tin 8

Hình 2.3: Trang thu thập và điều khiển các thiết bị tầng trệt 9

Hình 2.4: Trang thu thập và điều khiển các thiết bị tầng 1 9

Hình 2.5: Sơ đồ mô tả hoạt động của Ajax 11

Hình 2.6: Chương trình cập nhật trạng thái các thiết bị 12

Hình 2.7: Chương trình đọc dữ liệu từ PLC S7-1200 sử dụng kỹ thuật Ajax 13

Hình 2.8: Chương trình hiển thị trạng thái của đèn trên giao diện web dựa vào dữ liệu đọc về từ PLC S7-1200 13

Hình 2.9: Chương trình gửi dữ liệu xuống PLC S7-1200 14

Hình 2.10: Kết nối PLC S7-1200 với modem wifi 14

Hình 2.11: Mở port 80 của modem wifi Viettel 15

Hình 2.12: Truy cập trang web bằng địa chỉ của modem 16

Hình 2.13: Đăng ký tên miền miễn phí trên trang www.noip.com 16

Hình 2.14: Gán tên miền đã đăng ký vào modem wifi 17

PHẦN MỞ ĐẦU

1 Lý do chọn đề tài

Trong cuộc cách mạng 4.0, IoT là vấn đề rất được quan tâm và ứng dụng rộng rãi Các ứng dụng như là: nhà thông minh, thành phố thông minh… Đề tài là một trong những ứng dụng của IoT trong thực tế

Học phần Thực hiện dự án điều khiển và tự động hóa của ngành Công nghệ kỹ thuật điều khiển & tự động hóa và học phần Thực hiện dự án IoT của ngành Tự động hóa công nghiệp là hai học phần mà sinh viên thực hiện các dự án điều khiển tự động, đặc biệt là các

dự án IoT Đề tài cung cấp một giao diện web mẫu và phương pháp giao tiếp giữa web với PLC S7-1200 để sinh viên thực hiện các dự án IoT của mình

Ngoài ra, đề tài có thể áp dụng vào thực tế điều khiển các thiết bị nhà thông minh

2 Mục đích nghiên cứu

- Áp dụng trong việc giảng dạy các học phần: Thực hiện dự án điều khiển và tự động hóa của ngành Công nghệ kỹ thuật điều khiển & tự động hóa và học phần Thực hiện dự án IoT của ngành Tự động hóa công nghiệp

- Áp dụng vào thực tế điều khiển các thiết bị nhà thông minh

- Nâng cao trình độ chuyên môn của giảng viên, phục vụ công tác giảng dạy

3 Đối tượng và khách thể nghiên cứu

- Phần mềm Adobe Dreamweaver CS6: thiết kế giao diện Web

- Webserver PLC S7-1200

4 Nhiệm vụ nghiên cứu

- Xây dựng giao diện Web bằng phần mềm Adobe Dreamweaver CS6

- Giao tiếp giao diện Web với PLC S7-1200 để thu thập dữ liệu và điều khiển các thiết bị trong nhà

5 Phương pháp nghiên cứu

Phương pháp nghiên cứu được áp dụng để thực hiện đề tài này là phân tích lý thuyết, xây dựng mô hình thử nghiệm

Phân tích lý thuyết: nghiên cứu các lý thuyết về CSS, javascript, truyền nhận dữ liệu

sử dụng JQuery Ajax, Webserver của PLC S7-1200

Xây dựng mô hình thực nghiệm: Thiết kế giao diện web giao tiếp PLC S7-1200 để thu thập dữ liệu và điều khiển các thiết bị trong nhà

6 Phạm vi nghiên cứu

- Xây dựng giao diện Web bằng phần mềm Adobe Dreamweaver CS6

- Giao tiếp giao diện Web với PLC S7-1200 để thu thập dữ liệu và điều khiển các thiết bị trong nhà

PHẦN NỘI DUNG Chương 1 : Tổng quan

IoT hay còn gọi là kết nối vạn vật Internet of Thing, hệ thống liên kết các thiết bị vật

lý với nhau Điều này giúp tạo ra một mạng lưới hoạt động linh hoạt, tạo ra một quy trình trong hoạt động sản xuất, kinh doanh

Hình 1.1: IoT - Internet of Things Khi bất cứ vật gì đó được kết nối với internet, điều đó có nghĩa là nó có thể gửi thông tin hoặc nhận thông tin, hoặc cả hai Với IoT khả năng gửi hoặc nhận thông tin này làm cho mọi thứ trở nên thông minh, và thông minh luôn là điều hướng đến

Trong Internet of Things, tất cả những thứ đang được kết nối với internet có thể được chia thành ba loại:

Loại thu thập thông tin và sau đó gửi nó

Các thiết bị cảm biến, có thể là cảm biến nhiệt độ, cảm biến chuyển động, cảm biến

độ ẩm, ánh sáng,… Những cảm biến này cùng với một kết nối, cho phép chúng ta tự động thu thập thông tin từ môi trường Do đó, cho phép chúng tôi đưa ra quyết định thông minh hơn

Loại nhận được thông tin và sau đó hành động

Máy in nhận được một tài liệu và in nó Xe nhận được tín hiệu từ chìa khóa xe và cửa

mở

Thực hiện cả hai

Các cảm biến có thể thu thập thông tin về độ ẩm của đất để cho nông dân biết cần tưới bao nhiêu cho cây trồng, nhưng chúng ta không thực sự cần người nông dân Thay vào đó,

hệ thống tưới có thể tự động bật khi cần thiết, dựa trên độ ẩm của đất

Thêm vào đó, các nhà nông nghiệp đã phát minh thêm một bước tiến nữa Nếu hệ thống thủy lợi nhận được thông tin về thời tiết từ kết nối internet của nó, thì nó cũng có thể biết khi nào trời sẽ mưa và quyết định không tưới nước cho các loại cây trồng ngày hôm nay vì tận dụng được nguồn nước mưa

Các ứng dụng có thể kể đến như IoT ngành nông nghiệp, công nghiệp, sản xuất, nuôi trồng thủy sản, thành phố thông minh, nhà thông minh …

Hình 1.2: Ứng dụng của IoT Nhà thông minh được hiểu một cách đơn giản là tất cả thiết bị điện trong nhà đều được kết nối với nhau bằng sóng không dây gọi là IoT (vạn vật kết nối)

Với điện thoại di động, máy tính bảng hoặc máy tính có kết nối Internet, chúng ta có thể điều khiển tất cả các thiết bị trong nhà từ xa

- Quên tưới cây hoặc đi công tác xa nhà

- Đi công tác lâu ngày muốn kiểm tra tình trạng ngôi nhà thân yêu của mình

- Có người đột nhập vào nhà

- Rủi ro xì ga, cháy nổ…

Những vấn đề bên trên và nhiều thứ phiền toái mà chúng ta đang phải sống chung với

nó Giải pháp nhà thông minh sẽ giúp chúng ta giải quyết tất cả Mang lại cho ngôi nhà vô cùng tiện nghi hiện đại và an toàn

Khi chúng đi làm, đi học hay đi công tác xa, chúng ta đều có thể kiểm tra ngôi nhà thân yêu của mình Bởi vì tất cả trạng thái thiết bị sẽ được hiển thị trên giao diện web mà chúng ta truy cập vào

Chương 2 : Nội dung 2.1 Thiết kế giao diện Web

2.1.1 Phần mềm thiết kế Web Adobe Dreamweaver CS6

Một trong những công cụ hỗ trợ đắc lực được các nhà lập trình web yêu thích phải kể đến phần mềm thiết kế dreamweaver CS6 Bởi phần mềm này giúp tiết kiệm được nhiều thời gian trong quá trình làm việc cũng như đem lại hiệu quả cao cho sản phẩm

Adobe Dreamweaver là một trong những lựa chọn hàng đầu của các nhà thiết kế web chuyên nghiệp

Hình 2.1: Phần mềm Adobe Dreamweaver CS6 Dreamweaver CS6 là một công cụ thiết kế, soạn thảo mã web chuyên nghiệp Phần mềm thiết kế này có hỗ trợ nhiều ngôn ngữ lập trình như JAVA, PHP, ASP, Bên cạnh đó, phần mềm còn có thêm tính năng xem trước (Preview) để các nhà thiết kế có thể tránh được những sai sót trong quá trình làm việc, cải thiện được chất lượng sản phẩm và tăng được hiệu quả cao

Có thể nói, phần mềm thiết kế web Dreamweaver CS6 là công cụ hỗ trợ thiết kế web chuyên nghiệp được nhiều lập trình viên sử dụng và cũng được các chuyên gia, nhà phát triển đánh giá cao

Những tính năng mà phần mềm thiết kế web Adobe Dreamweaver mang lại cho người

sử dụng:

Chỉnh sửa file HTML và CSS

File CSS là một trong những nhân tố quyết định để tạo nên các trình bày cũng như bố cục của một trang web từ banner cho đến những khung hình đều được đặt trong CSS Phần mềm này sẽ cho phép bạn thay đổi được màu sắc, màu nền, kích thước chữ, màu sắc của những đường link, xây dựng lại các menu, sao cho phù hợp với trang web của bạn nhất Bên cạnh đó, chúng ta cũng có thể thay đổi trực tiếp các đoạn mã CSS này bằng cách bôi đen trực tiếp những đối tượng ngay trên giao diện đang trong quá trình thiết kế, chương trình sẽ hiển thị những dòng mã được bôi đen trong CSS để dễ dàng nhận biết và thay đổi chúng

Cho phép kết nối cơ sở dữ liệu

Phần mềm thiết kế web Dreamweaver có khả năng kết nối các cơ sở dữ liệu được tạo

ra và viết bằng những phần mềm hỗ trợ như Microsoft Access, My SQL, SQL Server, Oracle

Web page maker cũng là một trong những phần mềm thiết kế web hiệu quả thông

qua môi trường làm việc với mã HTML, nó có khả năng xây dựng những mẫu website với cấu trúc khoa học, hệ thống liên kết phù hợp Đặc biệt, với Web page maker còn hỗ trợ người dùng với nhiều nội dung đa phương tiện như các tập tin âm thanh, ảnh động, video, vào website

Adobe Dreamweaver cung cấp nhiều hơn những tính năng tạo mới và chỉnh sửa các đoạn mã lập trình, chúng ta cũng có thể làm việc trong chế độ các ngôn ngữ lập trình (chọn lựa chế độ code), vừa là lập trình vừa xem được các bản thiết kế (trong chế độ Split), hoặc chỉnh sửa hoàn toàn trên thiết kế giao diện (Design)

Adobe Dreamweaver còn cung cấp thêm nhiều giao diện website sẵn có cho từng web khác nhau, để chúng ta có thể dễ dàng chọn lựa, áp dụng để làm mẫu thiết kế cho những trang web của mình Ngoài ra, chúng ta cũng có thể sử dụng những kinh nghiệm mà mình

có được để tạo ra những trang web mang phong cách của riêng mình, với những cách trình bày và bố cục, màu sắc đều do chính bạn tạo nên

Nhiều giao diện thiết kế miễn phí

Phần mềm này sẽ cung cấp cho chúng ta nhiều giao diện thiết kế miễn phí, dựa trên những giao diện đã được cung cấp sẵn hoặc kinh nghiệm đã học được để có thể thiết kế cho trang web của mình

2.1.2 Giao diện Web điều khiển các thiết bị trong nhà

Giao diện Web của đề tài được thiết kế bằng phần mềm Adobe Dreamweaver, định dạng bằng CSS

Giao diện Web của đề tài được thiết kế 3 trang: Trang giới thiệu thông tin, trang thu thập và điều khiển các thiết bị tầng trệt, trang thu thập và điều khiển các thiết bị tầng 1

Trang giới thiệu thông tin: giới thiệu về thông tin đề tài nghiên cứu, thông tin tác giả

Hình 2.2: Trang giới thiệu thông tin

Trang thu thập và điều khiển các thiết bị tầng trệt:

- Hiển thị nhiệt độ tầng trệt

- Hiển thị trạng thái đóng, mở của cửa chính

- Điều khiển và hiển thị trạng thái đèn phòng khách

- Điều khiển và hiển thị trạng thái quạt trần phòng khách

- Điều khiển và hiển thị trạng thái đèn cầu thang giữa tầng trệt và tầng 1

- Điều khiển và hiển thị trạng thái đèn bếp

- Điều khiển và hiển thị trạng thái quạt bàn ăn

Hình 2.3: Trang thu thập và điều khiển các thiết bị tầng trệt

Trang thu thập và điều khiển các thiết bị tầng 1:

Hình 2.4: Trang thu thập và điều khiển các thiết bị tầng 1

- Điều khiển đóng mở và hiển thị trạng thái của cửa sổ phòng ngủ 1

- Điều khiển và hiển thị trạng thái đèn chiếu sáng phòng ngủ 1

- Điều khiển và hiển thị trạng thái đèn ngủ phòng ngủ 1

- Điều khiển đóng mở và hiển thị trạng thái của cửa sổ phòng ngủ 2

- Điều khiển và hiển thị trạng thái đèn chiếu sáng phòng ngủ 2

- Điều khiển và hiển thị trạng thái đèn ngủ phòng ngủ 2

- Điều khiển và hiển thị trạng thái đèn cầu thang giữa tầng 1 và sân thượng

2.2 Giao tiếp giao diện Web với PLC S7-1200

Quá trình giao tiếp và đọc ghi dữ liệu giữa Web và PLC S7-1200, sau mỗi lần cập nhật dữ liệu, để trang web không tải lại trang thì chúng ta sử dụng công nghệ Ajax

Asynchronous, hay nói ngắn hơn là Async – bất đồng bộ Bất đồng bộ có nghĩa là

một chương trình có thể xử lý không theo tuần tự các hàm Sẽ không có quy trình, có thể nhảy đi bỏ qua bước nào đó Ích lợi dễ thấy nhất của bất đồng bộ là chương trình có thể xử

lý nhiều công việc một lúc

JavaScript là một ngôn ngữ lập trình nổi tiếng Trong số rất nhiều chức năng của nó

là khả năng quản lý nội dung động của website và hỗ trợ tương tác với người dùng

XML là một dạng của ngôn ngữ markup như HTML, chữ đầy đủ của nó là eXtensible

Markup Language Nếu HTML được dùng để hiển thị dữ liệu, XML được thiết kế để chứa

Hình 2.5: Sơ đồ mô tả hoạt động của Ajax

Có 4 lợi ích chính của việc sử dụng Ajax, cụ thể là:

• Callbacks: Ajax được sử dụng để thực hiện một cuộc gọi lại AJAX thực hiện việc

truy xuất và lưu dữ liệu mà không gửi toàn bộ trang trở lại máy chủ Bằng cách gửi lại một phần trang web đến máy chủ, việc sử dụng mạng được giảm thiểu và các hoạt động diễn ra nhanh hơn Trong các trang web băng thông hạn chế, điều này có thể cải thiện đáng kể hiệu suất mạng Dữ liệu được gửi đến và đi từ máy chủ một cách tối thiểu

• Thực hiện các cuộc gọi không đồng bộ: Ajax cho phép thực hiện các cuộc gọi

không đồng bộ đến một máy chủ web Điều này cho phép trình duyệt của người

dùng tránh phải chờ tất cả dữ liệu đến trước khi cho phép người dùng hành động một lần nữa

• Thân thiện với người dùng: Vì không phải post lại trang lên server, các ứng dụng

hỗ trợ Ajax sẽ luôn nhanh hơn và thân thiện với người dùng hơn

• Tăng tốc độ: Mục đích chính của Ajax là cải thiện tốc độ, hiệu suất và khả năng sử

dụng của một ứng dụng web Một ví dụ tuyệt vời của Ajax là tính năng xếp hạng phim trên Netflix Người dùng đánh giá một bộ phim và xếp hạng cá nhân của họ cho bộ phim đó sẽ được lưu vào cơ sở dữ liệu của họ mà không cần chờ trang làm mới hoặc tải lại

2.2.2 Chương trình Javascript giao tiếp web với PLC S7-1200

Chương trình cập nhật trạng thái các thiết bị Tự động gọi chương trình con cập nhật trạng thái các thiết bị 1 giây một lần

Hình 2.6: Chương trình cập nhật trạng thái các thiết bị

Chương trình đọc dữ liệu từ PLC S7-1200 bằng kỹ thuật Ajax Các dữ liệu đọc về có thể hiển thị lên Web hoặc được sử dụng để các chương trình con khác trong javascript xử

lý

Hình 2.7: Chương trình đọc dữ liệu từ PLC S7-1200 sử dụng kỹ thuật Ajax

Hình 2.8: Chương trình hiển thị trạng thái của đèn trên giao diện web dựa vào dữ liệu đọc

về từ PLC S7-1200 Chương trình gửi dữ liệu từ web xuống PLC S7-1200 sử dụng kỹ thuật Ajax Khi một nút nhấn được tác động, dựa vào trạng thái của nút nhấn được nhấn xuống hay nhả ra mà

dữ liệu tương ứng được gửi xuống PLC

Hình 2.9: Chương trình gửi dữ liệu xuống PLC S7-1200

2.3 Thu thập dữ liệu và điều khiển các thiết bị trong nhà

Kết nối PLC S7-1200 vào modem wifi trong gia đình bằng cáp internet

Hình 2.10: Kết nối PLC S7-1200 với modem wifi

Mở port 80 của modem wifi để cho phép các thiết bị bên ngoài truy cập vào PLC

Hình 2.11: Mở port 80 của modem wifi Viettel

Sử dụng điện thoại di động, máy tính bảng hoặc máy tính xách tay, máy tính bàn có kết nối internet Sử dụng trình duyệt web trên các thiết bị để truy cập vào trang web điều khiển các thiết bị trong nhà