2.8.1. Ngôn ngữ HTML
a. Giới thiệu
Ngôn ngữ HTML (HyperText Markup Language – ngôn ngữ siêu văn bản) là một trong các loại ngôn ngữ được sử dụng trong lập trình web. Khi truy cập một trang web cụ thể là click vào các đường link, sẽ được dẫn tới nhiều trang khác nhau, các trang này được gọi là một tài liệu HTML (tập tin HTML).
Một trang HTML như vậy được cấu thành bởi nhiều phần tử HTML nhỏ và được quy định bằng các thẻ tag. Có thể phân biệt một trang web được viết bằng ngôn ngữ HTML hay PHP thông qua đường link của nó. Ở cuối các trang HTML thường hay có đuôi là .HTML hoặc .HTM.
HTML là ngôn ngữ lập trình web được đánh giá là đơn giản. Mọi trang web, mọi trình duyệt web đều có thể hiển thị tốt ngôn ngữ HTML. Hiện nay, phiên bản mới nhất của HTML là HTML 5 với nhiều tính năng và chất lượng hơn so với các phiên bản cũ.
b. Vai trò
Là một loại ngôn ngữ đánh dấu siêu văn bản, giúp cấu thành các cấu trúc cơ bản trên một website (chia khung sườn, bố cục các thành phần trang web) và góp phần hỗ trợ khai báo các tập tin kĩ thuật số như video, nhạc, hình ảnh.
Để xây dựng được một website hoàn chỉnh, trên bất kỳ nền tảng nào khác đều cũng phải cần sự hỗ trợ của HTML, dù ít hay nhiều.
c. Ưu và nhược điểm
Bất kể thử gì cũng đều có ưu và nhược điểm của riêng nó.
Ưu điểm:
Ngôn ngữ được sử dụng rộng lớn, có nguồn tài nguyên hỗ trợ và cộng đồng
sử dụng rộng lớn
Sử dụng mượt trên mọi loại trình duyệt.
Dễ dàng tích hợp các ngôn ngữ backend khác như PHP và Node.js.
Mã nguồn mở và hoàn toàn miễn phí
Dùng chủ yếu cho web tĩnh. Đối với các tính năng động, cần sử dụng JavaScript hoặc ngôn ngữ backend bên thứ 3 như PHP.
Một số trình duyệt chậm hỗ trợ tính năng mới.
Khó kiểm soát logs của trình duyệt.
d. Cấu trúc
Để hoàn thiện một file HTML, cần sử dụng thẻ <html> để bắt đầu và kết thúc bằng thẻ </html>. Bên trong một file gồm có 2 phần cơ bản:
Phần tiêu đề: bắt đầu bằng thẻ <head> và kết thúc bởi thẻ </head>. Phần này chưa tiêu đề được hiển thị trên thanh điều hướng của trang web. Tiêu đề nằm trong title, bắt đầu bằng thẻ <title> và kết thúc bằng thẻ </title>. Đây là phần rất quan trọng vì nắm vai trò trong việc tìm kiếm thông tin, nói cách khác chính là từ khóa cho công cụ tìm kiếm.
Phần thân: nằm sau phần tiêu đề. Bao gồm văn bản, hình ảnh, video và các nội dung khác muốn hiển thị trên trang web. Bắt đầu bằng thẻ <body> và kết thúc bằng thẻ </body>.
e. Các thẻ HTML cơ bản
Headings (Tiêu đề)
Headings được sử dụng để trình bày tiêu đề cho phần nội dung hiển thị trên trang Web.
Những phần tiêu đề được hiển thị to và in đậm hơn để phân biệt chúng với các phần còn lại của văn bản. Cũng có thể hiển thị phần tiêu đề theo một trong sáu kích thước từ h1 đến h6. Tất cả những gì làm là định rõ kích thước h1, h2… Thẻ h1 dành cho các tiêu đề quan trọng nhất và giảm dần đến h6.
Thẻ khối <span>, <div>, <p>
Có những trường hợp muốn chia văn bản trong một trang web thành những khối thông tin logic khi đó phần tử div và span được sử dụng để nhóm nội dung lại với nhau. Thẻ div rất thường được sử dụng trong thiết kế website layout.
Phần tử div dùng để chia tài liệu thành các thành phần có liên quan với nhau.
Phần tử span dùng để định nghĩa nội dung trong dòng (in-line) còn phần tử div
Phần tử p định nghĩa một đoạn văn bản.
Chèn ảnh
Thẻ <img> dùng để chèn hình ảnh vào trong HTML. Cũng có thể đặt thẻ
<img> tại vị trí mà hình ảnh được hiển thị. Thẻ <img> không có nội dung, nó hiển thị nội dung bằng cách xác định thuộc tính src. Cú pháp là:
<img src = “url”>
Trong đó src (source) là thuộc tính và giá trị là một url, chỉ vị trí chính xác của file ảnh.
Thuộc tính align của thẻ <img> có thể được sử dụng để điều chỉnh canh lề của ảnh với văn bản xung quanh.
<img align = position src=”PICTURE.GIF”>
Trong đó, vị trí của ảnh có thể là trên (top), dưới (bottom), ở giữa (middle), trái (left) hoặc phải (right).
Tạo bảng
Thẻ <table> dùng để tạo bảng biểu trong HTML. Cấu trúc cơ bản như sau:
<table> <tr>
<td> … </td> </tr>
</table>
Trong đó thẻ <tr> cho biết bắt đầu 1 hàng, <td> là thẻ chỉ đến cột tương ứng với hàng đó.
Nếu muốn dùng hàng đầu tiên làm hàng tiêu đề (chữ được tô đậm và đặt ở giữa), thì thay vì dùng cặp thẻ <td></td> đổi lại dùng cặp thẻ <th></th>.
Thẻ liên kết
Thẻ <a> dùng để tạo liên kết với một địa chỉ url. Cấu trúc như sau:
Trên giao diện web sẽ hiển thị chữ “HCMUTE” và khi click vào dòng chữ này
sẽ liên kết tới một trang web (www.hcmute.edu.vn).
Thẻ <link> được sử dụng để định nghĩa một link tới một tài liệu ngoại vi. Nó được đặt trong khu vực <head> của tài liệu.
Thẻ thu thập thông tin
Thẻ <form> là thẻ dùng để thu thập thông tin từ người dùng, chẳng hạn như hồ sơ xin việc làm, mẫu thăm dò ý kiến…
Cấu trúc như sau:
<form>
<input type = “text” name = “username” /> <input type = “password” name = “password” /> </form>
Với dạng "text" thì các ký tự hiển thị bình thường. Với dạng "password" thì các ký tự sẽ được thay thế bằng ký tự ‘ * ’ hoặc “•”.
Thẻ tạo danh sách
Thẻ <li>, <ul> được sử dụng để xác định một danh sách thứ tự, không theo thứ tự, thư mục, và các menu.
2.9. MỘT SỐ LINH KIỆN KHÁC 2.9.1. LCD hiển thị
Có rất nhiều loại LCD với nhiều hình dáng và kích thước khác nhau. Khi sản xuất LCD, nhà sản xuất đã tích hợp chíp điều khiển (HD44780) bên trong lớp vỏ và chỉ đưa các chân giao tiếp cần thiết.
Hình 2.21: LCD 16x2
Trong 16 chân của LCD được chia ra làm 3 dạng tín hiệu như sau:
- Các chân cấp nguồn: chân số 1 là chân nối mass (0V), chân thứ hai là VDD nối với nguồn +5V. Chân thứ ba dùng để chỉnh contrast thường nối với biến trở.
- Các chân điều khiển: chân số 4 là chân RS dùng để điều khiển lựa chọn thanh ghi. Chân R/W dùng để điều khiển quá trình đọc và ghi. Chân E là chân cho phép dạng xung chốt.
- Các chân dữ liệu D7 - D0: chân số 7 đến chân số 14 là 8 chân dùng để trao đổi dữ liệu giữa thiết bị điều khiển và LCD.
- Các chân LED_A và LED_K: Chân số 15, 16 là 2 chân dùng để cấp nguồn cho đèn nền để có thể nhìn thấy vào ban đêm.
- Bộ điều khiển LCD và các vùng nhớ:
Để điều khiển LCD thì có các IC chuyên dùng được tích hợp bên dưới LCD có mã số 447801 đến các IC 447809.
Bảng 2.3: Các chân của LCD 16x2
Sơ đồ khối của bộ điều khiển LCD:
Sơ đồ khối gồm có 4 phần: bộ điều khiển LCD, bảng kí tự LCD, bộ thúc tín hiệu các đoạn, đèn nền.
Bộ điều khiển LCD có ba vùng nhớ nội, mỗi vùng có chức năng riêng, phải khởi động trước khi truy cập bất kỳ vùng nhớ nào.
2.9.2. Module I2C
Vì nhóm chọn sử dụng LCD 16x2 nên cần có ít nhất 6 chân của vi xử lý kết nối với các chân RS, EN, D7, D6, D5 và D4 để có thể giao tiếp với LCD. Nhưng với module chuyển giao tiếp LCD sang I2C thì chỉ cần 2 chân (SDA và SCL) của vi xử lý kết nối với 2 chân (SDA và SCL) của module là có thể hiển thị thông tin lên LCD. Ngoài ra có thể điều chỉnh được độ tương phản bởi biến trở gắn trên module.
Hình 2.23: Module I2C
Thông số kỹ thuật:
- Kích thước: 41.5 x 19 x 15.3mm.
- Trọng lượng: 5g.
- Điện áp hoạt động: 5V.
- Jump chốt: Cung cấp đèn cho LCD hoặc ngắt.
- Biến trở điều chỉnh độ tương phản cho LCD.
2.9.3. Cảm biến DHT11
DHT11 là cảm biến nhiệt độ, độ ẩm rất thông dụng hiện nay vì chi phí rẻ và rất dễ lấy dữ liệu thông qua giao tiếp 1-wire (giao tiếp digital 1-wire truyền dữ liệu duy nhất). Cảm biến được tích hợp bộ tiền xử lý tín hiệu giúp dữ liệu nhận về được chính xác mà không cần phải qua bất kỳ tính toán nào.
Hình 2.24: Cảm biến DHT11
Thông số kỹ thuật:
- Nguồn: 3 -> 5 VDC.
- Dòng sử dụng: 2.5mA max (khi truyền dữ liệu).
- Đo tốt ở độ ẩm 20 đến 80%RH với sai số 5%.
- Đo tốt ở nhiệt độ 0 đến 50°C sai số ±2°C. - Tần số lấy mẫu tối đa 1Hz (1 giây 1 lần).
- Kích thước 15mm x 12mm x 5.5mm.
- 4 chân, khoảng cách chân 0.1''.
Thiết kế:
Hình 2.25: Sơ đồ kết nối của DHT11
Khi kết nối khoảng cách dưới 20m thì nên treo một điện trở có giá trị 5kΩ, ngược lại nếu xa hơn 20m thì treo một điện trở khác có giá trị thích hợp hơn. Ngoài ra cũng có thể treo thêm một tụ điện có giá trị 100nF giữa chân VDD và GND để lọc nguồn.
2.9.4. Cảm biến độ ẩm đất
Cảm biến độ ẩm đất, trạng thái đầu ra mức thấp (0V), khi đất thiếu nước đầu ra sẽ là mức cao (5V), độ nhạy có thể điều chỉnh được bằng biến trở. Phần đầu đo được cắm vào đất để phát hiện độ ẩm của đất, khi độ ẩm của đất đạt ngưỡng thiết lập, đầu ra DO sẽ chuyển trạng thái từ mức thấp lên mức cao. Nhờ thế, có thể sử dụng Analog hoặc Digital của Arduino để đọc giá trị từ cảm biến.
Hình 2.26: Cảm biến độ ẩm đất
Thông số kỹ thuật:
- Điện áp sử dụng: 3.3-5V.
- Đầu ra: AOUT, DOUT
- AOUT: Tín hiệu ADC.
- DOUT: Mức logic 0, 1.
- Sử dụng: IC LM393 mắc theo dạng so sánh.
- DO khi chưa phát hiện ở mức 1, khi phát hiện độ ẩm cho ra mức 0.
Hình 2.27: Sơ đồ kết nối độ ẩm đất
Khi module cảm biến độ ẩm phát hiện, khi đó sẽ có sự thay đổi điện áp ngay tại đầu vào của IC LM393. IC này nhận biết có sự thay đổi nó sẽ đưa ra một tín hiệu 0V để báo hiệu. và thay đổi như thế nào sẽ được tính toán để đọc độ ẩm đất.
Chi tiết có thể tham khảo Datasheet Cảm biến độ ẩm đất.
- Cảm biến độ ẩm đất rất nhạy với độ ẩm môi trường xung quanh, thường được
sử dụng để phát hiện độ ẩm của đất.
- Khi độ ẩm đất vượt quá giá trị được thiết lập, ngõ ra của module D0 ở mức giá
trị là 0V.
- Ngõ ra D0 có thể được kết nối trực tiếp với vi điều khiển như (Arduino, PIC,AVR,STM), để phát hiện cao và thấp, và do đó để phát hiện độ ẩm của đất.
- Đầu ra Analog AO có thể được kết nối với bộ chuyển đổi ADC, có thể nhận
được các giá trị chính xác hơn độ ẩm của đất.
2.9.5. Động cơ bơm P385
Động cơ bơm P385 12VDC 3W có kích thước nhỏ gọn, được sử dụng để bơm nước, dung dịch với khả năng bơm tối đa lên đến 1.8L / 1 phút, động cơ sử dụng điện áp 12VDC, thích hợp với các thiết kế sử dụng máy bơm nhỏ: bơm hồ cá, tưới nước cho cây,..., lưu ý không cấp ngược cực vì có thể làm hư cơ cấu bơm của động cơ (cực dương có đánh dấu màu đỏ).
Hình 2.28: Động cơ bơm P385 Thông số kỹ thuật: - Loại động cơ DC: 385. - Điện áp sử dụng: 12VDC - Dòng điện sử dụng: 0.25A. - Công suất: 3W
- Lưu lượng bơm: 1,8 ± 0,1 L / 1 phút.
- Áp suất nước: 0.3Mpa.
- Thời gian làm việc liên tục tối đa trong 1 ngày: không quá 8h.
- Đường kính ngoài ống dẫn: 7mm
- Kích thước: 86 x 46 x 46 mm
2.9.6. Bóng đèn 12V21/6CP
Bật/tắt đèn để tăng nhiệt độ môi trường cho cây khi nhiệt độ xuống thấp.
Hình 2.29: Bóng đèn 12V21/6CP
- Loại đèn: đèn pha/cos xe máy.
- Điện áp sử dụng: 12VDC
- Dòng điện sử dụng: 0.5A.
33
Chương 3. TÍNH TOÁN VÀ THIẾT KẾ
3.1. GIỚI THIỆU
3.1.1. Yêu cầu của hệ thống
Với tiêu chí thiết kế hệ thống giám sát nhiều vườn thông minh, thân thiện và dễ sử dụng cho người dùng.
Hệ thống tự động.
Theo dõi/điều khiển từ xa thông qua Website/App.
Xây dựng giao diện trên Website/App.
Nút nhấn vật lý được đồng bộ với phần mềm.
3.1.2. Phương án thiết kế
Dựa vào yêu cầu của hệ thống, nhóm đề ra các phương án:
Sử dụng các module có sẵn ngoài thị trường như cảm biến DHT11, cảm biến
độ ẩm đất, module I2C,… board Arduino Wemos R1 để đáp ứng được độ ổn định cao nhất.
Sau khi tính toán, sẽ chọn dùng nguồn Adapter để cung cấp cho mạch và nguồn
xung để cung cấp cho phần công suất như bơm và đèn.
Vẽ sơ đồ nguyên lý, sử dụng các chân và kết nối hợp lý.
Lựa chọn ngôn ngữ lập trình C++ để viết chương trình cho hệ thống.
Sử dụng phần mềm Arduino thông dụng để viết và nạp chương trình.
Thay vì viết ứng dụng cho từng hệ điều hành như Android, IOS, nhóm sử dụng
ứng dụng Blynk để làm giao diện điều khiển trên điện thoại di động và website vì Blynk đều chạy ổn định trên cả 2 hệ điều hành này.
34
3.2. TÍNH TOÁN VÀ THIẾT KẾ HỆ THỐNG 3.2.1. Thiết kế sơ đồ khối hệ thống 3.2.1. Thiết kế sơ đồ khối hệ thống
KHỐI XỬ LÝ
TRUNG TÂM KHỐI CẢM BIẾN KHỐI CÔNG
SUẤT
KHỐI CSDL KHỐI APP
BLYNK
KHỐI NGUỒN
Hình 3.1: Sơ đồ khối toàn mạch
Chức năng từng khối:
Khối xử lý trung tâm: Nhận dữ liệu từ các cảm biến rồi sau đó xử lý, so sánh và đưa mệnh lệnh thực thi cho khối công suất, gửi dữ liệu lên CSDL của Blynk để hiển thị lên giao diện Website/App/LCD. Ngoài nút nhấn vật lý, cũng có thể điều khiển khối công suất bằng Website/App thông qua CSDL.
Khối cảm biến:Thu thập nhiệt độ, độ ẩm từ môi trường; trạng thái khối công suất và gửi đến khối xử lý trung tâm.
Khối công suất:Nhận tín hiệu từ khối xử lý trung tâm, Website/App.
Khối CSDL: Nhận/truyền dữ liệu với khối xử lý trung tâm để cập nhật, hiển thị lên giao diện Website/App/LCD và điều khiển khối công suất.
Khối App Blynk: Trao đổi với khối CSDL để truyền và nhận dữ liệu với khối xử lý trung tâm.
Khối nguồn: Cung cấp nguồn cho các khối hoạt động.
a. Thiết kế hệ thống phần cứng
Theo sơ đồ khối, sẽ thiết kế sơ đồ nguyên lý gồm có:
Khối xử lý trung tâm: Arduino Wemos R1.
Khối cảm biến: DHT11, cảm biến độ ẩm đất.
35
Khối CSDL: Blynk server.
Khối App: ứng dụng Blynk.
Khối nguồn: Nguồn xung 12V/5A 60W
b. Giải thích hoạt động của hệ thống
Bước 1: Khi được cấp nguồn, toàn bộ hệ thống sẽ khởi động và các khối công suất, khối cảm biến sẽ chờ tín hiệu từ khối điều khiển trung tâm.
Bước 2: Khối điều khiển trung bắt đầu tìm và kết nối với Wifi, sau đó tiến hành kết nối với app Blynk.
Bước 3: Kết nối với server của Blynk thành công, khối điều khiển trung tâm đọc dữ liệu từ khối cảm biến, trạng thái khối công suất và cập nhật lên CSDL, đồng thời Blynk sẽ nhận và hiển thị dữ liệu nhận được lên giao diện