Thiết kế hệ thống điều khiển và giám sát nồng độkhí ở môi trường thông qua webserver sử dụng board arduinovà esp8266

I ĐẶT VẤN ĐỀ Với phát triển khoa học kỹ thuật, công nghệ thông tin ngày diễn nhanh chóng, kéo theo xu hướng phát triển tất quốc gia, có Việt Nam Đó lĩnh vực ứng dụng cơng nghệ 4.0 vào lĩnh vực công nghiệp đời sống Đồng thời, phổ biến Internet thiết bị di động thông minh tạo nên khái niệm IoT (Internet of Things – Internet vạn vật), vấn đề ứng dụng thành tựu vào việc điều khiển thiết bị điện trở nên tất yếu, giúp thiết bị trở nên thơng minh tính tự động hóa cao, kèm theo việc điều khiển người dùng trở nên dễ dàng Xuất phát từ thực tế này, nghiên cứu lựa chọn đề tài: “Thiết kế hệ thống điều khiển giám sát nồng độ khí mơi trường thơng qua Webserver sử dụng board Arduino Esp8266” để bước đầu tiếp cận công nghệ thời đại 4.0 Hệ thống sử dụng tài nguyên Arduino Esp8266 thiết kế chuyên cho ứng dụng IoT (Internet of Things) với công suất nhỏ Với hệ thống việc giám sát thiết bị trở nên dễ dàng, mà thông số thời gian hoạt động, trạng thái thiết bị đưa lên website để người dùng tương tác cách trực quan hệ thống II.TỔNG QUAN VỀ MẠNG INTERNET 2.1 Giới thiệu Internet hệ thống thơng tin tồn cầu truy cập cơng cộng gồm mạng máy tính liên kết với Hệ thống truyền thông tin theo kiểu nối chuyển gói liệu (packet switching) dựa giao thức liên mạng chuẩn hóa (giao thức IP) Hệ thống bao gồm hàng ngàn mạng máy tính nhỏ doanh nghiệp, viện nghiên cứu trường đại học, người dùng cá nhân, phủ tồn cầu Chúng cung cấp khối lượng thông tin dịch vụ khổng lồ internet Mạng Internet mang lại nhiều tiện ích hữu dụng cho người sử dụng, tiện ích phổ thơng Internet hệ thống thư điện tử (email), trò chuyện trực tuyến (chat), máy truy tìm liệu (search engine), dịch vụ thương chuyển ngân, dịch vụ y tế giáo dục chữa bệnh từ xa tổ chức lớp học ảo Nguồn thông tin khổng lồ kèm theo dịch vụ tương ứng hệ thống trang Web liên kết với tài liệu khác www (World Wide Web) Internet tập hợp mạng máy tính kết nối với dây đồng, cáp quang, v.v ; www hay Web tập hợp tài liệu liên kết với siêu liên kết (hyperlink) địa URL, truy nhập cách sử dụng Internet 2.2 Hoạt động mạng Internet Các Giao Thức (Protocols): tập luật mà máy tính phải tuân theo giao tiếp Internet Tranmission Control Protocol (TCP): thiết lập kết nối hai máy tính để truyền tải liệu, chia liệu thành gói nhỏ đảm bảo việc truyền nhận liệu TCP giao thức hướng kết nối (connectionoriented protocol) User Datagram Protocol (UDP): thiết lập kết nối nhanh không chắn máy tính để truyền tải liệu, cung cấp dịch vụ đểkhắc phục lỗi Internet Protocol (IP): điều chỉnh đường gói liệu đường truyền nhận Internet TCP giao thức phi kết nối (connectionless protocol) HTTP: cho phép trao đổi thông tin Internet FTP: cho phép truyền nhận file Internet SMTP: cho phép gửi thư điện tử Internet POP3: cho phép nhận thư điện tử Internet TCP/IP dùng làm giao thức chuẩn giao tiếp Internet độc lập với hệ thống (platform independent) khơng có tổ chức có quyền sở hữu giao thức Địa Chỉ IP (IP Adress) Internet mạng kết nối rộng lớn máy tính Để xác định máy tính mạng này, người ta dùng số gọi địa IP Địa IP gồm tập số nhỏ 255 ngăn cách dấu ‘.’ Ví dụ: 192.168.1.1 Hệ Thống Tên Miền (DNS- Domain Name System): máy tính mạng Internet xác định địa IP, số khó nhớ Để khắc phục nhược điểm này, người ta dùng hệ thống tên miền để đặt tên cho máy tính Ví dụ: tên miền www.yahoo.com ứng với địa IP 216.109.127.28 2.3 Giao thức TCP/IP TCP/IP giao thức cho phép kết nối hệ thống mạng không đồng với TCP/IP viết tắt Transmission Control Protocol (Giao thức Điều khiển Truyền thông)/Internet Protocol (Giao thức Internet) Ngày TCP/IP sử dụng rộng rãi c ác mạng cục mạng Internet tồn cầu TCP/IP khơng gồm giao thức mà thực tế tập hợp nhiều giao thức Chúng ta gọi hệ giao thức hay giao thức (Suite Of Protocols) TCP/IP xem giản lược mơ hình tham chiếu OSI với bốn tầng, mơ hình (theo thứ tự từ xuống): + Tầng ứng dụng (Application Layer) + Tầng giao vận (Transport Layer) +Tầng mạng (Internet Layer) + Tầng liên mạng (Network Interface Layer) Hình 2-2 Mơ hình TCP/IP Tần liên mạng (Network Interface Layer): Tầng liên mạng có trách nhiệm đưa liệu tới nhận liệu từ phương tiện truyền dẫn Tầng bao gồm thiết bị giao tiếp mạng (Card Mạng Cáp Mạng) chương trình cung cấp thơng tin cần thiết để hoạt động, truy nhập đường truyền vật lý qua thiết bị giao tiếp mạng Tầng mạng (Internet Layer): nằm tầng liên mạng, tầng có chức gán địa chỉ, đóng gói định tuyến (Route) liệu Bốn giao thức quan trọng tầng gồm: • IP (Internet Protocol): Có chức gán địa cho liệu trước truyền định tuyến chúng tới đích • ARP (Address Resolution Protocol): Có chức biên dịch địa IP máy đích thành địa MAC (Media Access Control) • ICMP (Internet Control Message Protocol): Có chức thơng báo lỗi trường hợp truyền liệu bị hỏng • IGMP (Internet Group Management Protocol): Có chức điều khiển truyền đa hướng (Multicast) Tầng giao vận (Transport Layer): Có trách nhiệm thiết lập phiên truyền thơng máy tính quy định cách truyền liệu giao thức tầng gồm có hai giao thức chính: TCP (Transmission Control Protocol) UDP (User Datagram Protocol) • TCP cung cấp kênh truyền thông hướng kết nối đảm bảo truyền liệu cách tin cậy, cung cấp luồng liệu tin cậy hai trạm, sử dụng chế chia nhỏ gói tin tầng thành gói tin có kích thước thích hợp cho tầng mạng bên dưới, báo nhận gói tin, đặt hạn chế thời gian time-out để đảm bảo bên nhận biết gói tin gửi TCP thường truyền gói tin có kích thước lớn u cầu phía nhận xác nhận gói tin nhận Do tầng đảm bảo tính tin cậy, tầng khơng cần quan tâm đến • UDP cung cấp dịch vụ đơn giản cho tầng ứng dụng UDP cung cấp kênh truyền thơng phi kết nối, gửi gói liệu từ trạm tới trạm mà khơng đảm bảo gói tin đến tới đích Các ứng dụng dùng UDP thường truyền gói có kích thước nhỏ, độ tin cậy liệu phụ thuộc vào ứng dụng Các chế đảm bảo độ tin cậy cần thực tầng Tầng ứng dụng (Application Layer): Tầng ứng dụng tầng mơ hình TCP/IP bao gồm tiến trình ứng dụng cung cấp cho người sử dụng để truy cập mạng Một số giao thức thơng dụng tầng là: • DHCP (Dynamic Host Configuration Protocol): Giao thức cấu hình trạm động • DNS (Domain Name System): Hệ thống tên miền • SNMP (Simpe Network Management Protocol): Giao thức quản lý mạng đơn giản • FTP (File Transfer Protocol): Giao thức truyền tập tin • TFTP (Trivial File Transfer Protocol): Giao thức truyền tập tin bình thường • SMTP (Simple Mail Transfer Protocol): Giao thức truyền thư đơn giản 2.4 Công nghệ Ethernet Ethernet đời mang lại mạng truyền liệu nối tiếp tốc độ cao, trở thành chuẩn chấp nhận khắp giới, giao thức thống trị mạng LAN, 85% kết nối mạng cài đặt giới Ethernet Tốc độ truyền liệu phổ biến Ethernet 10 triệu bit/s (10 Mbps), vậy, hầu hết mạng nhanh chóng nâng cấp lên Fast Ethernet với tốc độ 100 Mbps Ethernet thường gắn với hệ điều khiển công nghiệp qua điều khiển độc lập kết nối với PC hay mạng cáp Ethernet Chuẩn Ethernet 10Mbps xuất năm 1980 phối hợp phát triển hãng: DEC, Intel Xerox Chuẩn có tên DIX Ethernet (lấy tên theo chữ đầu tên hãng) Uỷ ban 802.3 IEEE lấy DIX Ethernet làm tảng để phát triển Năm 1985, chuẩn 802.3 đời với tên IEEE 802.3 Carrier Sense Multiple Access with Collition Detection (CSMA/CD) Access Method vesus Physical Layer Specification Mặc dù không sử dụng tên Ethernet hầu hết người hiểu chuẩn công nghệ Ethernet Ngày chuẩn IEEE 802.3 chuẩn thức Ethernet IEEE phát triển chuẩn Ethernet nhiều công nghệ truyền dẫn khác có nhiều loại mạng Ethernet Các chuẩn Ethernet hoạt động tầng Data Link mơ hình lớp OSI đơn vị liệu mà trạm trao đổi với khung (frame) Cấu trúc khung Ethernet sau: Hình 2-3 Cấu trúc khung tin Ethernet Các trường quan trọng phần mào đầu mơ tả đây: • Preamble: trường đánh dấu xuất khung bit, ln mang giá trị 10101010 Từ nhóm bit này, phía nhận tạo xung đồng hồ 10 Mhz • SFD (start frame delimiter): trường thực xác định bắt đầu khung Nó ln mang giá trị 10101011 • Các trường Destination Source: mang địa vật lý trạm nhận gửi khung, xác định khung gửi từ đâu gửi tới đâu • LEN: giá trị trường nói lên độ lớn phần liệu mà khung mang theo • FCS mang CRC (cyclic redundancy checksum): phía gửi tính tốn trường trước truyền khung Phía nhận tính tốn lại CRC theo cách tương tự Nếu hai kết trùng nhau, khung xem nhận đúng, ngược lại khung coi lỗi bị loại bỏ III WEB SERVER VÀ CƠ SỞ DỮ LIỆU 3.1 Các ngơn ngữ lập trình cho Website Bản chất phát triển website phát triển giao tiếp Cụ thể giao tiếp hai chủ thể khác thông qua giao thức HTTP: Server: giữ vai trò phục vụ cho trang cần hiển thị Client: gửi yêu cầu trang đến server, hiển thị chúng trình duyệt cho người dùng Trong hầu hết trường hợp, client thường trình duyệt web Việc lập trình ngơn ngữ phụ thuộc vào việc chạy máy nào, server client Chính nên chia ngơn ngữ lập trình cho website thành phía: phía server (server-side) phía client (client-side) Nếu nhiệm vụ ngơn ngữ lập trình chạy client giúp hiển thị nội dung trang web trình duyệt, tạo trang tương tác, gửi yêu cầu cho server nhận phản hồi từ nó, ngơn ngữ lập trình phía server lại hoạt động phức tạp nhiều Các ngôn ngữ web server thông dịch trả phản hồi, quản lí yêu cầu người dùng, xử lý kiện, lưu trữ - trích xuất liệu từ sở liệu 3.2 Khái quát ngôn ngữ HTML 3.2.1 HTML gì? Giải thích rõ ngơn ngữ Markup Hypertext HTML chữ viết tắt Hypertext Markup Language Nó giúp người dùng tạo cấu trúc thành phần trang web ứng dụng, phân chia đoạn văn, heading, links, blockquotes, vâng HTML ngơn ngữ lập trình, đồng nghĩa với việc khơng thể tạo chức “động” Nó giống Microsoft Word, dùng để bố cục định dạng trang web Khi làm việc với HTML, sử dụng cấu trúc code đơn giản (tags attributes) để đánh dấu lên trang web Ví dụ, tạo đoạn văn cách đặt văn vào cặp tag mở đóng văn

Đây cách bạn thêm đoạn văn HTML.

Bạn thêm nhiều đoạn văn!

3.2.2 Lịch sử HTML HTML sáng tạo Tim Berners-Lee, nhà vật lý học trung tâm nghiên cứu CERN Thụy Sĩ Anh ta nghĩ ý tưởng cho hệ thống hypertext Internet Hypertext có nghĩa văn chứa links, nơi người xem truy cập Anh xuất phiên HTML năm 1991 bao gồm 18 tag HTML Từ đó, phiên HTML có thêm tag attributes Theo Mozilla Developer Network: HTML Element Reference , có 140 HTML tags, vài số chúng bị tạm ngưng (không hỗ trợ trình duyệt đại) Nhanh chóng phổ biến mức độ chóng mặt, HTML xem chuẩn mật website Các thiết lập cấu trúc HTML vận hành phát triển World Wide Web Consortium (W3C) Bạn kiểm tra tình trạng ngơn ngữ lúc trang W3C’s website 3.2.3 HTML hoạt động nào? HTML documents files kết thúc với html hay htm Bạn xem chúng cách sử dụng trình duyệt web (như Google Chrome, Safari, hay Mozilla Firefox) Trình duyệt đọc files HTML xuất nội dung lên internet cho người đọc xem Thơng thường, trung bình web chứa nhiều trang web HTML, ví dụ như: trang chủ, trang about, trang liên hệ, tất cần trang HTML riêng Mỗi trang HTML chứa tag (cũng gọi elements), bạn xem việc xây dựng khối trang web Nó tạo thành cấu trúc thư mục bao gồm section, paragraph, heading, khối nội dung khác 3.2.4 Ưu điểm nhược điểm HTML a) Ưu điểm:  Ngôn ngữ sử dụng rộng lớn có nhiều nguồn tài nguyên hỗ trợ cộng đồng sử dụng cực lớn  Sử dụng mượt mà hầu hết trình duyệt  Có q trình học đơn giản trực tiếp  Mã nguồn mở hoàn toàn miễn phí  Markup gọn gàng đồng  Chuẩn web vận hành World Wide Web Consortium (W3C)  Dễ dàng tích hợp với ngôn ngữ backend PHP Node.js b) Khuyết điểm:  Được dùng chủ yếu cho web tĩnh Đối với tính động, bạn cần sử dụng JavaScript ngôn ngữ backend bên thứ PHP  Nó thực thi số logic định cho người dùng Vì vậy, hầu hết trang cần tạo riêng biệt, kể sử dụng yếu tố, headers hay footers  Một số trình duyệt chậm hỗ trợ tính  Khó kiểm sốt cảnh thực thi trình duyệt (ví dụ, trình duyệt cũ khơng render tag mới) 3.3 Khái quát ngôn ngữ CSS 3.3.1CSS gì? CSS chữ viết tắt Cascading Style Sheets, ngơn ngữ sử dụng để tìm định dạng lại phần tử tạo ngơn ngữ đánh dấu (HTML) Nói ngắn gọn ngôn ngữ tạo phong cách cho trang web Bạn hiểu đơn giản rằng, HTML đóng vai trị định dạng phần tử website việc tạo đoạn văn bản, tiêu đề, bảng,…thì CSS giúp thêm style vào phần tử HTML đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc… CSS phát triển W3C (World Wide Web Consortium) vào năm 1996, HTML khơng thiết kế để gắn tag để giúp định dạng trang web Phương thức hoạt động CSS tìm dựa vào vùng chọn, vùng chọn tên thẻ HTML, tên ID, class hay nhiều kiểu khác Sau áp dụng thuộc tính cần thay đổi lên vùng chọn Hỗ trợ đa ngơn ngữ lập trình VSCode hỗ trợ nhiều ngơn ngữ lập trình khác như: C#, C/C+, HTML, Visual Basic, F#, JavaScript, CSS,… Do vậy, dễ dàng phát đưa thơng báo chương trình xuất lỗi Kho lưu trữ an toàn Đây ưu điểm bật VSCode Nó dễ dàng kết nối với Git hay kho lưu trữ có Vậy nên, bạn hồn tồn n tâm sử dụng Hỗ trợ web VSCode hỗ trợ nhiều ứng dụng web khác Đồng thời, có trình soạn thảo thiết kế website Lưu trữ liệu theo dạng phân cấp Những tệp lưu trữ đoạn mã đặt thư mục tương tự Bên cạnh đó, VSCode cịn cung cấp thư mục dành riêng cho số tệp quan trọng khác Hỗ trợ viết code Một số đoạn code thay đổi nhằm mang lại thuận tiện cho người dùng Lúc đó, Visual Studio Code đề xuất tùy chọn thay (nếu có) cho bạn Hỗ trợ thiết bị đầu cuối VSCode tích hợp thiết bị đầu cuối Điều giúp người dùng chuyển đổi hai hình hay trở thư mục gốc để thực thao tác khác Giao diện dễ sử dụng, thân thiện với người dùng Hệ thống phím tắt đa dạng giúp bạn dễ dàng quan sát thao tác làm việc nhanh chóng Từ giúp nâng cao hiệu suất tăng hiệu làm việc Màn hình đa nhiệm Visual Studio Code cho phép người dùng mở nhiều tệp thư mục lúc Mặc dù giữ chúng khơng có liên quan với 4.2 Website a) Code HTML SMART HOME SMART HOME Nhiệt Độ Khơng khí ON OFF Độ ẩm OFF OFF type="button" id="btn3"class="btn waves-effect type="button" id="btn4"class="btn waves-effect type="button" id="btn5"class="btn waves-effect type="button" id="btn6"class="btn waves-effect // Import the functions you need from the SDKs you need import { initializeApp } from "https://www.gstatic.com/firebasejs/9.5.0/firebaseapp.js"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration const firebaseConfig = { apiKey: "AIzaSyB4AQohzuoGIoJ8yaZz-q8BbBlbe3S1s6Y", authDomain: "hongphu-doan.firebaseapp.com", databaseURL: "https://hongphu-doan-default-rtdb.firebaseio.com", projectId: "hongphu-doan", storageBucket: "hongphu-doan.appspot.com", messagingSenderId: "634646302", appId: "1:634646302:web:babbf526c880c59942230f", measurementId: "G-8RTLLL820S" }; // Initialize Firebase const app = initializeApp(firebaseConfig); import {getDatabase, ref, get, set, onValue, child, update, remove} from "https://www.gstatic.com/firebasejs/9.5.0/firebase-database.js"; const db = getDatabase(); var var var var var var Btn1 Btn2 Btn3 Btn4 Btn5 Btn6 = = = = = = document.getElementById("btn1") document.getElementById("btn2") document.getElementById("btn3") document.getElementById("btn4") document.getElementById("btn5") document.getElementById("btn6") var onquat = "batquat"; var offquat = "tatquat"; var onden = "on"; var offden = "off"; var onmaylanh ="11"; var offmaylanh = "22"; var stateAir = false; function InsertData(){ document.getElementById("quat").setAttribute("src","./img/lab2-quaton.png"); set(ref(db,"hahaha"),{ Den: onquat, }) } Btn1.addEventListener('click', InsertData); function offquat1(){ document.getElementById("quat").setAttribute("src","./img/lab2-quatoff.png"); set(ref(db,"hahaha"),{ Den: offquat, }) } Btn2.addEventListener('click', offquat1) function onden1(){ document.getElementById("tuoi").setAttribute("src","./img/sang.png"); set(ref(db,"hahaha"),{ Den: onden, }) } Btn3.addEventListener('click', onden1) function offden1(){ document.getElementById("tuoi").setAttribute("src","./img/lab2-denoff.jpg"); set(ref(db,"hahaha"),{ Den: offden, }) } Btn4.addEventListener('click', offden1) function onmaylanh1(){ document.getElementById("maylanh").setAttribute("src","./img/aircondition.png"); set(ref(db,"hahaha"),{ Den: onmaylanh, }) } Btn5.addEventListener('click', onmaylanh1) function offmaylanh1(){ document.getElementById("maylanh").setAttribute("src","./img/airconditionoff.png"); set(ref(db,"hahaha"),{ Den: offmaylanh, }) } Btn6.addEventListener('click', offmaylanh1) //********************************* web l liệu***********************************************// const ktden = ref(db,'hahaha/'+'/Den'); onValue(ktden,(snapshot)=>{ const trangthai = snapshot.val(); if(trangthai == "\"off\""){ document.getElementById("tuoi").setAttribute("src","./img/lab2denoff.jpg"); } if(trangthai == '\"on\"'){ document.getElementById("tuoi").setAttribute("src","./img/sang.png"); } if(trangthai == '\"batquat\"'){ document.getElementById("quat").setAttribute("src","./img/lab2quaton.png"); } if(trangthai == '\"tatquat\"'){ document.getElementById("quat").setAttribute("src","./img/lab2quatoff.png"); } if(trangthai == '\"11\"'){ document.getElementById("maylanh").setAttribute("src","./img/aircondition.png"); } if(trangthai == '\"22\"'){ document.getElementById("maylanh").setAttribute("src","./img/airconditionoff.png"); } }) const starCountRef = ref(db, 'taolao/temp' ); onValue(starCountRef, (snapshot) => { const nhietdonhan = snapshot.val(); document.getElementById("nhietdo").innerText = nhietdonhan+" °C"; }); const getdoam = ref(db, 'taolao/doam' ); onValue(getdoam, (snapshot) => { document.getElementById("doam").innerText = snapshot.val()+" %"; }); const getkhongkhi = ref(db, 'taolao/Khơng khí' ); onValue(getkhongkhi, (snapshot) => { document.getElementById("khongkhi").innerText = snapshot.val()+" PPM"; }); b) Code CSS *{ padding: 0; margin: 0; font-family: "Roboto", sans-serif; } body { background-size: 50%; width: auto; } img{ width: 1000px; height: auto; } container{ width: 1000px; margin: auto; } nav{ height: 50px; width: 1000px; background: blanchedalmond; } nav menu ul{ list-style: none; } nav menu ul li{ float: left; line-height: 50px; padding: 60px; } nav menu ul li a{ color: crimson; font-size: 20px; text-decoration: none; font-family: 'Times New Roman', Times, serif; } nav menu ul li a:hover { /*background-color: #ebc5d2;*/ color: crimson; font-weight: bold } header img { width: 1000px; height: 200px; } row { width: 1000px; height: 550px; align-items: center; background-color:rosybrown; padding-top: 0; display: flex; justify-content: space-around; } #box1 { width: 520px; height: 550px; float: left; padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; /*border-style: solid;*/ background-color: white; } #box2 { width: 490px; height: 550px; float: left; font-family: Arial, Helvetica, sans-serif; /*border-style: solid;*/ background-color: white; } h2 { font-size: 3em; text-align: center; color: rgb(203, 240, 40); font-family: 'Times New Roman', Times, serif; width: 1000px; background-color: brown; margin-top: 0px; animation-name: keyframes1; animation-duration: 5s; animation-iteration-count: infinite; padding-top: 0; } h1 { font-size: 2em; text-align: center; color: rgb(23, 6, 175);} div#khung1 { width: 300px; margin-top: 5px; float: left; margin-left: 0px; border: 4px groove #50e50b; padding:5px 5px; } div#khung2 { width: 300px; margin-top: 5px; float: right; margin-right: 0px; border: 4px groove #50e50b; padding:5px 5px; } div#khung3 { /** position: absolute; width: 300px; margin-top: 5px; float: right; margin-right: 0px; border: 4px groove #50e50b; padding:5px 5px; top: 260px; left: 600px;**/ position: relative; width: 300px; margin-top: 5px; float: right; margin-right: 0px; border: 4px groove #50e50b; padding: 5px 5px; top: -95px; left: 29%; } footer { width: 1000px; height: 40px; margin: 0; margin-top: 20px; } lab2-quaton{ /** width: 100px; height: 100px; padding-left: 125px; padding-top: 52px;**/ width: 100px; position: relative; height: 100px; padding-left: 125px; padding-top: 52px; top: -103px; left: -15px; } lab2-quatoff { width: 100px; height: 100px; padding-left: 125px; padding-top: 52px; } denon{ /** position: absolute; top: 360px; right: 320px; width: 200px; height: 200px; padding-left: 85px; padding-top: 0;**/ position: relative; top: 3px; right: 320px; width: 200px; height: 200px; padding-left: 551px; padding-top: 0; } maylanhon{ /**position: absolute; width: 140px; height: 140px; top: 406px; right: 690px;**/ position: relative; width: 140px; height: 140px; top: -156px; right: 85px; } lab2-denoff{ width: 200px; height: 200px; padding-left: 85px; padding-top: 0; margin-top: 0; } button { width: 50px; height: 40px; } #btn1 { /** position: absolute; margin: 6rem; top: 430px; left: 230px; width: 6rem; background-color: rgb(7, 90, 4); border: 6px outset #21ea06; padding-left: 0px; font-size: 20px; color:white; text-align: center; font-family: 'Times New Roman', Times, serif; vertical-align: middle;**/ position: relative; margin: 6rem; top: -159px; left: -55px; width: 6rem; background-color: rgb(7, 90, 4); border: 6px outset #21ea06; padding-left: 0px; font-size: 20px; color: white; text-align: center; font-family: 'Times New Roman', Times, serif; vertical-align: middle; } #btn2 { /** position: absolute; margin: 2rem; top: 493px; left: 420px; width: 6rem; background-color: rgb(7, 90, 4); border: 6px outset #21ea06; padding-left: 10px; font-size: 20px; color:white; text-align: center; font-family: 'Times New Roman', Times, serif;**/ position: relative; margin: 2rem; top: -157px; left: -145px; width: 6rem; background-color: rgb(7, 90, 4); border: 6px outset #21ea06; padding-left: 10px; font-size: 20px; color: white; text-align: center; font-family: 'Times New Roman', Times, serif; } #btn3 { /** position: absolute; margin: 2rem; right: 405px; top: 493px; width: 6rem; background-color: rgb(7, 90, 4); border: 6px outset #21ea06; padding-left: 0px; font-size: 20px; color:white; text-align: center; font-family: 'Times New Roman', Times, serif;**/ position: relative; margin: 2rem; right: -25px; top: -128px; width: 6rem; background-color: rgb(7, 90, 4); border: 6px outset #21ea06; padding-left: 0px; font-size: 20px; color: white; text-align: center; font-family: 'Times New Roman', Times, serif; } #btn4 { /** position: absolute; margin: 6rem; right: 210px; top: 429px; width: 6rem; background-color: rgb(7, 90, 4); border: 6px outset #21ea06; padding-left: 10px; font-size: 20px; color:white; text-align: center; font-family: 'Times New Roman', Times, serif;**/ position: relative; margin: 6rem; right: -259px; top: -295px; width: 6rem; background-color: rgb(7, 90, 4); border: 6px outset #21ea06; padding-left: 10px; font-size: 20px; color: white; text-align: center; font-family: 'Times New Roman', Times, serif; } #btn5{ /**position: absolute; margin: 2rem; background-color: rgb(7, 90, 4); border: 6px outset #21ea06; top: 495px; right: 750px; width: 6rem; padding-left: 0px; font-size: 20px; color:white; text-align: center; font-family: 'Times New Roman', Times, serif;**/ position: relative; margin: 2rem; background-color: rgb(7, 90, 4); border: 6px outset #21ea06; top: -297px; right: 458px; width: 6rem; padding-left: 0px; font-size: 20px; color: white; text-align: center; font-family: 'Times New Roman', Times, serif; } #btn6{ /**position: absolute; margin: 2rem; background-color: rgb(7, 90, 4); border: 6px outset #21ea06; top: 495px; right: 625px; width: 6rem; padding-left: 0px; font-size: 20px; color:white; text-align: center; font-family: 'Times New Roman', Times, serif;**/ position: relative; margin: 2rem; background-color: rgb(7, 90, 4); border: 6px outset #21ea06; top: -465px; right: 25px; width: 6rem; padding-left: 0px; font-size: 20px; color: white; text-align: center; font-family: 'Times New Roman', Times, serif; } footer{ font-size: 1em; text-align: center; float: left; margin: 0; color: rgb(8, 8, 3); font-family: 'Times New Roman', Times, serif; /*border: 1px outset rgb(227, 240, 229);*/ height: 80px; /* background-color: rgb(20, 160, 196);*/ width: 1000px; /*color: #FFF;*/ background: -webkit-radial-gradient(top left, green, yellow, blue); } @keyframes keyframes1 { 70% {background-color: blue;} 100% {background-color: green;} } c ) Giao diện điều khiển giám sát website ... cho phép kết nối hệ thống mạng không đồng với TCP/IP viết tắt Transmission Control Protocol (Giao thức Điều khiển Truyền thông) /Internet Protocol (Giao thức Internet) Ngày TCP/IP sử dụng rộng... phụ thuộc vào ứng dụng Các chế đảm bảo độ tin cậy cần thực tầng Tầng ứng dụng (Application Layer): Tầng ứng dụng tầng mơ hình TCP/IP bao gồm tiến trình ứng dụng cung cấp cho người sử dụng để truy... nâng cấp lên Fast Ethernet với tốc độ 100 Mbps Ethernet thường gắn với hệ điều khiển công nghiệp qua điều khiển độc lập kết nối với PC hay mạng cáp Ethernet Chuẩn Ethernet 10Mbps xuất năm 1980