CHƯƠNG 3: THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG
3.6. Hệ thống giám sát và điều khiển
3.6.4. Lập trình giao diện HTML
Hình 3.26: Giao diện đăng nhập vào trang web
Để đảm bảo chỉ có những người có trách nhiệm chăm sóc vườn rau mới có thể truy cập vào hệ thống, việc tạo tài khoản đăng nhập là cần thiết.
SVTH: NGUYỄN XUÂN VINH 90 Tại giao diện đăng nhập, người dùng phải nhập đúng Username và Password đặt trước mới có thể truy cập vào các trang tiếp theo. Nếu nhập sai sẽ được trang thông báo “Bạn nhập sai tên đăng nhập hoặc mật khẩu!”.
Hình 3.27: Code Webapp cho phần thông báo đăng nhập 3.6.4.2 Giao diện trang chủ
Hình 3.28: Giao diện tab Trang chủ
Để có giao diện trên, chúng ta sẽ áp dụng một style CSS để phân các vùng như: #main, #head, #head_logo, #left, #content, #right, #footer…Sau đó kết hợp với ngôn ngứ HTML để tạo ra một giao diện cân đối giữa các phần.
SVTH: NGUYỄN XUÂN VINH 91 Hình 3.29: Code CSS định dạng style
Hình 3.30: Code HTML cho tab Trang chủ 3.6.4.3 Giao diện tab “Công ty”
Minh Hòa là một công ty chuyên về trồng rau thủy canh công nghệ cao, cho nên nhu cầu về thu thập dữ liệu môi trường và tự động điều chỉnh các thông số đó là rất cần thiết. Đây cũng là công ty tài trợ chính cho luận văn.
SVTH: NGUYỄN XUÂN VINH 92 Hình 3.31: Giao diện tab Công ty
Ở tab này, các nội dung thể hiện bao gồm logo, tên và địa chỉ công ty, các video và hình ảnh thể hiện quá trình trồng và chăm sóc rau, chia sẻ kinh nghiệm với các nông dân và đối tác.
Hình 3.32: Code HTML cho tab Công ty 3.6.4.4 Giao diện tab “Điều khiển”
Tab Điều khiển có thể coi là tab quan trọng và khó viết code nhất vì nó là tab chứa các thông số real time, điều khiển các thiết bị với các sự kiện. Bên cạnh đó ở tab này ngoài CSS và HTML thì còn sử dụng ngôn ngữ Angular.
Giao diện ở tab này được thiết kế đơn giản, thân thiện với người dùng, dễ theo dõi các thông số cũng như thuận tiện trong việc điều khiển các thiết bị.
SVTH: NGUYỄN XUÂN VINH 93 Hình 3.33: Giao diện tab Điều khiển
Ở tab này, chúng ta có thể quan sát thấy các thông số nhiệt độ, độ ẩm, cường độ ánh sáng…đang được cập nhật theo thời gian thực. Ở phần bảng điều khiển thể hiển hai chế độ là “Auto” cho chế độ chạy tự động theo các thông số đã cài đặt trước, hai là “Manual” cho chế độ điều khiển thủ công.
Khi đang ở chế độ “Auto” nếu chúng ta check vào các ô điều khiển thì không có chuyện gì xảy ra. Những ô này sẽ điều khiển được nếu chúng ta chọn chế độ
“Manual”. Khi check vào các ô này, trạng thái sẽ thay đổi theo. Ngoài ra nút “Cập nhật” có nhiệm vụ đồng bộ các sự kiện ở các Client khác nhau và đồng thời làm mới dữ liệu.
Hình 3.34: Code HTML kết hợp Angular của tab “Điều khiển”
SVTH: NGUYỄN XUÂN VINH 94 3.6.4.5 Giao diện tab Biểu đồ
Tại tab biểu đồ này, chúng ta sẽ kết nối với Firebase để upload dữ liệu. Dữ liệu này được tạo ra bằng cách đăng ký một tài khoảng trên Firebase và tạo một dự án. Phần này sẽ được hướng dẫn tại mục 3.6.7.
Dữ liệu sẽ được thu thập từ Arduino truyền đến ESP8266 và từ đây dữ liệu sẽ được upload lên Firebase. Dữ liệu này sẽ được cập nhật mỗi ba phút một lần.
Hình 3.35: Biểu đồ nhiệt độ không khí
Hình 3.36: Biểu đồ độ ẩm không khí
SVTH: NGUYỄN XUÂN VINH 95 Hình 3.37: Biểu đồ cường độ ánh sáng
Hình 3.38: Biểu đồ nhiệt độ dung dịch
Hình 3.39: Biểu đồ nồng độ hòa tan chất rắn (TDS) 3.6.4.6 Lập trình Webapp
Webapp là phần cực kỳ quan trọng, nó đóng vai trò như hệ thần kinh của cả trang web. Để dễ hiểu, chúng ta có thể xem các phần lập trình HTML, CSS chính là phần sườn, các bộ phận của một cơ thể còn Webapp là hệ thần kinh, kết nối tất cả
SVTH: NGUYỄN XUÂN VINH 96 lại với nhau, thực hiện các tác vụ gửi nhận chuỗi JSON để hiển thị thông số và điều khiển thiết bị.
Hình 3.40: Code Webapp
Hình 3.41: Đoạn code Webapp chọn chế độ “Auto”