Hướng phát triển:

Một phần của tài liệu THIẾT kế mô HÌNH TRANG TRẠI GIÁM sát và điều KHIỂN QUA WEB SERVER 2 (Trang 89 - 140)

a. Đối với cá nhân:

− Tìm hiểu nâng cao về thiết kế Web

− Tìm hiểu thêm các phần nâng cao về mạng truyền thông công nghiệp áp dụng vào thực tế.

b. Đối với đề tài:

− Sẽ áp dụng thêm hệ thống camera để theo dõi tình trạng của trang trại, sử dụng camera chống trộm để đảm bảo an toàn cho trang trại.

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 83

TÀI LIỆU THAM KHẢO

[1] C. T. C. P. G. P. M. B. KIM, "Web server (máy chủ web) là gì?," [Online]. Available:

https://www.bkns.vn/web-server-la-gi.html.

[2] V. IDC, "Cách thức hoạt động và lưu ý khi sử dụng Web server," 01 09 2020. [Online]. Available: https://viettelidc.com.vn/tin-tuc/web-server-la-gi-cach-thuc-hoat-dong-va- luu-y-khi-su-dung-web-server. [Accessed 10 05 2022].

[3] T. T. A. T. J. S. COMPANY, "NHẬN THIẾT KẾ HỆ THỐNG ĐIỀU KHIỂN, GIÁM SÁT WEB SERVER," [Online]. Available: https://tudongtinthanh.com/thiet-ke-he- thong-dieu-khien-giam-sat-web-server/.

[4] SIEMENS-VIETNAM, "Giới thiệu PLC S7-1200," 20 3 2019. [Online]. Available:

http://siemens-vietnam.vn/gioi-thieu-plc-s7-1200/.

[5] F.-E. ATUMATION, "Truyền thông giữa 2 PLC SIEMENS," 19 02 2019. [Online]. Available: https://fulle.com.vn/truyen-thong-giua-2-plc-siemens.html.

[6] qthang.net, "Web Server với PLC S7-1200 Siemen – [HTML, CSS, Javascript]," [Online]. Available: https://qthang.net/web-server-voi-plc-s7-1200-siemen-html-css- javascript.

[7] C. h. H. Đ. T. V. ROBOT, "Cảm Biến Độ Ẩm Đất Đầu Dò Chống Ăn Mòn," [Online]. Available: https://hshop.vn/products/cam-bien-do-am-dat-dau-do-chong-an-mon#. [8] Nghialagi.ORG, "Switch là gì? Những ý nghĩa của Switch," [Online]. Available:

https://nghialagi.org/switch-la-gi/.

[9] V. FITA,"Tổng hợp các thẻ HTML","[Online]. Available: https://timoday.edu.vn/tong- hop-cac-the-trong-html/.

[10] Sách Simatic Siemens S7-1200; tác giá: Châu Chí Đức; link sách: http://www.mediafire.com/file/kab21qoetbe4b1u/s7_1200_easy_book.pdf/file

[11] Bài giảng Mạng truyền thông công nghiệp và SCADA; tác giả: Đỗ Văn Cần; link sách:https://tailieu.vn/doc/bai-giang-mang-truyen-thong-cong-nghiep-va-scada-do-

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 84

PHỤ LỤC Thiết kế chương trình điều khiển

Thiết lp địa ch truyn và nhn d liu:

+ Địa chỉ truyền Master

• Data nhận Master:

• Data truyền Master:

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 86

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 89 + Địa ch nhn Slave:

Data nhận Slave:

Data truyền Slave:

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 92 ❖ Chương trình con:

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 95 • Chếđộ tựđộng:

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 98 • Scale cảm biến:

+ Cảm biến nhiệt độ:

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 99 • Trạng thái hoạt động của các thiết bị khối ngõ ra:

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 101 • Xuất đầu ra:

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 104

Thiết kế chương trình giám sát và điều khiển qua Web Server:

<!DOCTYPE html> <html>

<head>

<title>Trang trại iot</title> <meta charset="utf-8">

<link rel="stylesheet" href="./assect/style.css">

<script src="./javascript/jquery-2.0.2.min.js"></script> </head>

<body>

<div id="dangnhap-vao">

<div class="login js-vao"> <div class="login-container"> <header class="login-header">

<div class="login-close js-btnclose">

<img class="close" src="https://bit.ly/3NCFz8F"></img> </div>

<img src="https://bit.ly/3sQDBtl" alt="Admin"> </header>

<div class="login-body">

<label for="user" class="login-lable">

Tên đăng nhập

</label>

<input id="user" type="text" class="login-username" required placeholder="Enter username">

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 105 Mật khẩu

</label>

<input id="pass" type="password" class="login-password" required placeholder="Your password">

<input type="submit" id="dangnhap" class="js-btnlogin" value="Login"> </div>

<div class="footer">

<a href="#">Quên mật khẩu?</a> </div>

</div> </div> </div>

<!-- Begin: header -->

<div id="header">

<h1 class="heading">Mô hình trang trại giám sát và điều khiển tự động qua web server</h1>

</div>

<!-- End: header -->

<!-- Begin: Slider bar-->

<div id="slider">

<button class="text-font" id="btnlogout" onclick="logout()">Đăng xuất</button> <button class="text-font js-btnscreena" id="btn-nta">Nông trại A</button>

<button class="text-font js-btnscreenb" id="btn-ntb">Nông trại B</button> <button class="text-font js-btnscreenc" id="btn-ntc">Nông trại C</button> <button class="text-font js-btnscreend" id="btn-ntd">Nông trại D</button> </div>

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 106 <!-- Begin: Display body -->

<div id="display-body"> <div class="nongtrai-a js-nta">

<img src="./img/nong-trai-a.png" alt="Nông trại a"> <div class="item-user">

<!-- Quạt -->

<div class="quat same">

<img id="simuquat" class="same1" src="./img/A1.png" style="filter: hue- rotate(230deg); " alt="quạt">

<div class="co-dinh-all"> <div class="co-dinh">

<button id="btn-quat-on" class="button">Bật</button> </div>

<button id="btn-quat-off" class="button">Tắt</button> </div>

</div>

<!-- Bơm -->

<div class="bom same">

<img id="simubom" class="same1" src="./img/A8.png" style="filter: hue- rotate(230deg); " alt="bơm">

<div class="co-dinh-all"> <div class="co-dinh">

<button id="btn-bom-on" class="button">Bật</button> </div>

<button id="btn-bom-off" class="button">Tắt</button> </div>

</div>

<!-- Độngcơ kéo đóng -->

<div class="keodong same">

<img id="simukeodong" class="same1" src="./img/A13.png" style="filter: hue- rotate(230deg); " alt="Kéo đóng">

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 107

<div class="co-dinh-all"> <div class="co-dinh">

<button id="btn-keodong-on" class="button">Bật</button> </div>

<button id="btn-keodong-off" class="button">Tắt</button> </div>

</div>

<!-- Độngcơ kéo mở -->

<div class="keomo same">

<img id="simukeomo" class="same1" src="./img/A13.png" style="filter: hue- rotate(230deg); " alt="kéo mở">

<div class="co-dinh-all"> <div class="co-dinh">

<button id="btn-keomo-on" class="button">Bật</button> </div>

<button id="btn-keomo-off" class="button">Tắt</button> </div>

</div>

<!-- Đèn sưởi -->

<div class="densuoi same">

<img id="simudensuoi" class="same1" src="./img/A6.png" style="filter: hue- rotate(230deg); " alt="đènsưởi">

<div class="co-dinh-all"> <div class="co-dinh">

<button id="btn-densuoi-on" class="button">Bật</button> </div>

<button id="btn-densuoi-off" class="button">Tắt</button> </div>

</div>

<!-- Đèn sân vườn -->

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 108

<img id="simudensanvuon" class="same1" src="./img/A6.png" style="filter: hue- rotate(230deg); " alt="đèn sân vườn">

<div class="co-dinh-all"> <div class="co-dinh">

<button id="btn-densanvuon-on" class="button">Bật</button> </div>

<button id="btn-densanvuon-off" class="button">Tắt</button> </div>

</div> </div>

<div class="data-list"> <div class="data-output"> <p id="thoi-gian"></p> <p id="thoi-tiet"></p>

<label id="nhiet-do">0.0</label> <label id="do-am">0.0</label> </div>

<div class="data-trang-thai"> <p id="trang-thai"></p> <p id="chia-nua">|</p> <div class="mode">

<input type="checkbox" name="" id="auto-manu"> <p id="auto">Manual</p>

<p id="ngan-cach">/</p> <p id="manual">Auto</p> </div>

</div>

<div class="data-input"> <div>

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 109

<input type="number" name="nhiệtngưỡng cao" id="nhiet-cao" class="nhap-data1 same2">

<input type="number" name="nhiệtngưỡngthấp" id="nhiet-thap" class="nhap-data2 same2">

<input type="number" name="độ ẩmngưỡng cao" id="do-am-cao" class="nhap-data3 same2">

<input type="number" name="độ ẩmngưỡngthấp" id="do-am-thap" class="nhap- data4 same2">

<button id="set-data">Cài đặt</button> </div>

</div> </div>

<div class="bar">

<p class="name_tt">NÔNG <br> TRẠI A</p>

<button id="dungkhancap">DỪNG KHẨN CẤP</button> </div>

</div>

<div class="nongtrai-b js-ntb">

<img src="https://bit.ly/3wM0Fuk" alt="Nông trại b">

<div class="bar">

<p class="name_tt"> NÔNG <br> TRẠI B</p> </div>

</div>

<div class="nongtrai-c js-ntc">

<img src="https://bit.ly/3LP4XGO" alt="Nông trại c"> <div class="bar">

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 110

</div> </div>

<div class="nongtrai-d js-ntd">

<img src="https://bit.ly/3NERvqx" alt="Nông trại d"> <div class="bar">

<p class="name_tt">NÔNG <br> TRẠI D</p> </div>

</div> </div>

<!-- End: Display body -->

<script src="./javascript/java-code.js"></script> </body>

<script type="text/javascript">

vartuxa; vartaicho; varstatusdungkhancap; varbomloi; varkeomoloi; varkeodongloi; varbomrun; varkeomorun; varkeodongrun; vardenvuonrun; vardenvuonloi; vardensuoirun; vardensuoiloi; varquatrun; varquatloi; varstatusbangtay;

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 111 varstatustudong; varcbmua; varcbanhsang; // vardem_quat = 1; vardem_bom = 1; vardem_keomo = 1; vardem_keo_dong = 1; vardem_den_suoi = 1; vardem_den_vuon = 1; // varbom_dem_lag = 0; varquat_dem_lag = 0; varkeomo_dem_lag = 0; varkeodong_dem_lag = 0; vardenvuon_dem_lag = 0; vardensuoi_dem_lag = 0; vardenvuon_lag1 = 0; vardensuoi_lag1 = 0;

$(document).ready(function() {

$.ajaxSetup({

cache:false

});

setInterval(function() {

$.getJSON("io.html", function(result) {

tuxa = result["tuxa"];

taicho = result["taicho"];

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 112

bomloi = result["bomloi"];

keomoloi = result["keomoloi"];

keodongloi = result["keodongloi"];

bomrun = result["bomrun"];

keomorun = result["keomorun"];

keodongrun = result["keodongrun"];

denvuonloi = result["denvuonloi"];

denvuonrun = result["denvuonrun"];

densuoirun = result["densuoirun"];

densuoiloi = result["densuoiloi"];

quatrun = result["quatrun"];

quatloi = result["quatloi"];

statusbangtay = result["statusbangtay"];

statustudong = result["statustudong"];

cbmua = result["cbmua"];

cbanhsang = result["cbanhsang"];

// Kiểm tra hiểnthịtrạng thái hoạtđộng if (tuxa == 1 && taicho == 0) {

$('#trang-thai').text("Từ xa");

} else if (tuxa == 0 && taicho == 1) {

$('#trang-thai').text("Tại chỗ"); } else {

$('#trang-thai').text("No Status"); }

// Xét ngày hay đêm,mưa rào hay khô ráo if (cbmua == 1) {

$('#thoi-tiet').text("Mưa rào"); } else {

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 113 }

if (cbanhsang == 1) {

$('#thoi-gian').text("Ban đêm"); } else {

$('#thoi-gian').text("Ban ngày"); }

// Bơm quay

if (bomrun == 1 && bomloi == 0 && bom_dem_lag == 0) {

varID_bom = setInterval(changebom, 200);

bom_dem_lag++;

functionchangebom() {

varimgs = ["./img/A8.png", "./img/A9.png", "./img/A10.png", "./img/A11.png"];

document.getElementById('simubom').src = imgs[dem_bom];

dem_bom++; if (dem_bom >= 4) { dem_bom = 0; } if (bomrun == 0 || bomloi == 1) { bom_dem_lag = 0; dem_bom = 0;

document.getElementById('simubom').setAttribute('style', "filter: hue-

rotate(230deg)");

clearInterval(ID_bom); }

}

} else if (bomloi == 1 && bom_dem_lag == 0) {

document.getElementById('simubom').setAttribute('style', "filter: hue-rotate(0deg)");

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 114

bom_dem_lag++;

functionchangebom1() {

varimgs = ["./img/A8.png", "./img/bom.png"];

document.getElementById('simubom').src = imgs[dem_bom];

dem_bom++; if (dem_bom >= 2) { dem_bom = 0; } if (bomloi == 0) { bom_dem_lag = 0; dem_bom = 0;

document.getElementById('simubom').setAttribute('style', "filter: hue-

rotate(230deg)"); clearInterval(ID_bom1); } } } // Quạt quay

if (quatrun == 1 && quatloi == 0 && quat_dem_lag == 0) {

varID_quat = setInterval(changequat, 200);

quat_dem_lag++;

functionchangequat() {

varimgs = ["./img/A1.png", "./img/A2.png", "./img/A3.png", "./img/A4.png"];

document.getElementById('simuquat').src = imgs[dem_quat];

dem_quat++;

if (dem_quat >= 4) {

dem_quat = 0;

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 115 if (quatrun == 0 || quatloi == 1) {

quat_dem_lag = 0;

dem_quat = 0;

document.getElementById('simuquat').setAttribute('style', "filter: hue-

rotate(230deg)");

clearInterval(ID_quat); }

}

} else if (quatloi == 1 && quat_dem_lag == 0) {

document.getElementById('simuquat').setAttribute('style', "filter: hue-rotate(0deg)");

varID_quat1 = setInterval(changequat1, 500);

quat_dem_lag++;

functionchangequat1() {

varimgs = ["./img/A1.png", "./img/quat.png"];

document.getElementById('simuquat').src = imgs[dem_quat];

dem_quat++; if (dem_quat >= 2) { dem_quat = 0; } if (quatloi == 0) { dem_quat = 0; quat_dem_lag = 0;

document.getElementById('simuquat').setAttribute('style', "filter: hue-

rotate(230deg)");

clearInterval(ID_quat1); }

}

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 116 // Kéo mở quay

if (keomorun == 1 && keomoloi == 0 && keomo_dem_lag == 0) {

varID_keomo = setInterval(changekeomo, 200);

keomo_dem_lag++;

functionchangekeomo() {

varimgs = ["./img/A13.png", "./img/A14.png"];

document.getElementById('simukeomo').src = imgs[dem_keomo];

dem_keomo++; if (dem_keomo >= 2) { dem_keomo = 0; } if (keomorun == 0 || keomoloi == 1) { dem_keomo = 0; keomo_dem_lag = 0;

document.getElementById('simukeomo').setAttribute('style', "filter: hue-

rotate(230deg)");

clearInterval(ID_keomo); }

}

} else if (keomoloi == 1 && keomo_dem_lag == 0) {

document.getElementById('simukeomo').setAttribute('style', "filter: hue-

rotate(0deg)");

varID_keomo1 = setInterval(changekeomo1, 500);

keomo_dem_lag++;

functionchangekeomo1() {

varimgs = ["./img/A13.png", "./img/banhquay.png"];

document.getElementById('simukeomo').src = imgs[dem_keomo];

dem_keomo++;

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 117 dem_keomo = 0; } if (keomoloi == 0) { dem_keomo = 0; keomo_dem_lag = 0;

document.getElementById('simukeomo').setAttribute('style', "filter: hue-

rotate(230deg)"); clearInterval(ID_keomo1); } } } // Kéo đóng quay

if (keodongrun == 1 && keodongloi == 0 && keodong_dem_lag == 0) {

varID_keodong = setInterval(changekeomo, 200);

keodong_dem_lag++;

functionchangekeomo() {

varimgs = ["./img/A14.png", "./img/A13.png"];

document.getElementById('simukeodong').src = imgs[dem_keo_dong];

dem_keo_dong++; if (dem_keo_dong >= 2) { dem_keo_dong = 0; } if (keodongrun == 0 || keodongloi == 1) { dem_keo_dong = 0; keodong_dem_lag = 0;

document.getElementById('simukeodong').setAttribute('style', "filter: hue-

rotate(230deg)");

clearInterval(ID_keodong); }

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 118 }

} else if (keodongloi == 1 && keodong_dem_lag == 0) {

document.getElementById('simukeodong').setAttribute('style', "filter: hue-

rotate(0deg)");

varID_keodong1 = setInterval(changekeomo, 500);

keodong_dem_lag++;

functionchangekeomo() {

varimgs = ["./img/A14.png", "./img/banhquay.png"];

document.getElementById('simukeodong').src = imgs[dem_keo_dong];

dem_keo_dong++; if (dem_keo_dong >= 2) { dem_keo_dong = 0; } if (keodongloi == 0) { dem_keo_dong = 0; keodong_dem_lag = 0;

document.getElementById('simukeodong').setAttribute('style', "filter: hue-

rotate(230deg)"); clearInterval(ID_keodong1); } } } // Đèn sân vườn

if (denvuonrun == 1 && denvuonloi == 0 && denvuon_dem_lag == 0) {

varID_denvuon = setTimeout(changedenvuon, 100);

denvuon_dem_lag++;

functionchangedenvuon() {

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 119

dem_den_vuon++;

document.getElementById('simudensanvuon').src = imgs[dem_den_vuon];

document.getElementById('simudensanvuon').setAttribute('style', "filter: hue-

rotate(0deg)"); }

} else if (denvuonrun == 0 && denvuonloi == 0) {

denvuon_dem_lag = 0;

dem_den_vuon = 0;

document.getElementById('simudensanvuon').setAttribute('style', "filter: hue-

rotate(230deg)");

varimgs = ["./img/A6.png", "./img/A7.png"];

document.getElementById('simudensanvuon').src = imgs[dem_den_vuon];

clearTimeout(ID_denvuon);

} else if (denvuonloi == 1 && denvuon_lag1 == 0 || denvuonrun == 1 && denvuonloi == 1 && denvuon_lag1 == 0) {

clearTimeout(ID_denvuon);

document.getElementById('simudensanvuon').setAttribute('style', "filter: hue-

rotate(0deg)");

varID_denvuon1 = setInterval(changedenvuon1, 500);

denvuon_lag1++;

functionchangedenvuon1() {

varimgs = ["./img/A6.png", "./img/den.png"];

document.getElementById('simudensanvuon').src = imgs[dem_den_vuon];

dem_den_vuon++; if (dem_den_vuon >= 2) { dem_den_vuon = 0; } if (denvuonloi == 0) { denvuon_lag1 = 0; denvuon_dem_lag = 0;

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 120

dem_den_vuon = 0;

document.getElementById('simudensanvuon').setAttribute('style', "filter: hue-

rotate(230deg)"); clearInterval(ID_denvuon1); } } } // Đèn sưởi

if (densuoirun == 1 && densuoiloi == 0 && densuoi_dem_lag == 0) {

varID_densuoi = setTimeout(changekeomo, 100);

densuoi_dem_lag++;

functionchangekeomo() {

varimgs = ["./img/A6.png", "./img/A7.png"];

dem_den_suoi++;

document.getElementById('simudensuoi').src = imgs[dem_den_suoi];

document.getElementById('simudensuoi').setAttribute('style', "filter: hue-

rotate(0deg)"); }

} else if (densuoirun == 0 && densuoiloi == 0) {

densuoi_dem_lag = 0;

dem_den_suoi = 0;

document.getElementById('simudensuoi').setAttribute('style', "filter: hue-

rotate(230deg)");

varimgs = ["./img/A6.png", "./img/A7.png"];

document.getElementById('simudensuoi').src = imgs[dem_den_suoi];

clearTimeout(ID_densuoi);

} else if (densuoiloi == 1 && densuoi_lag1 == 0 || densuoirun == 1 && densuoiloi ==

1 && densuoi_lag1 == 0) {

clearTimeout(ID_densuoi);

document.getElementById('simudensuoi').setAttribute('style', "filter: hue-

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 121

varID_densuoi1 = setInterval(changedensuoi1, 500);

densuoi_lag1++;

functionchangedensuoi1() {

varimgs = ["./img/A6.png", "./img/den.png"];

document.getElementById('simudensuoi').src = imgs[dem_den_suoi];

dem_den_suoi++; if (dem_den_suoi >= 2) { dem_den_suoi = 0; } if (densuoiloi == 0) { densuoi_lag1 = 0; densuoi_dem_lag = 0; dem_den_suoi = 0;

document.getElementById('simudensuoi').setAttribute('style', "filter: hue-

rotate(230deg)"); clearInterval(ID_densuoi1); } } } // lấy data từ plc

$('#nhiet-do').text(result["nhietdo"] + " Độ C");

$('#do-am').text(result["doam"] + " %");

});

}, 1000); // SetInterval (Cứ sau 1000 ms thì sẽ reload 1 lần) });

//////////////////////////////////////////////////////////////////////

Nhóm 45 GVHD: Th.S Nguyễn Tấn Hòa Trang 122 // Lắng nghe sựkiện click từ id btn-den và thựchiện câu lệnh.

// Dừngkhẩncấp

$("#dungkhancap").click(function() { if (statusdungkhancap == 1) {

ulr = 'io.html';

name = '"DATA_TRUYEN_MASTER".DUNG_KHAN_CAP';

sdata = escape(name) + '=' + 0;

$.post(ulr, sdata, function(result2) {});

} else {

ulr = 'io.html';

Một phần của tài liệu THIẾT kế mô HÌNH TRANG TRẠI GIÁM sát và điều KHIỂN QUA WEB SERVER 2 (Trang 89 - 140)