Bố cục trang web

Một phần của tài liệu ĐỀ TÀI THU THẬP DỮ LIỆU DÙNG RASPBERRY PI THÔNG QUA MẠNG INTERNET (Trang 43)

2. Nội dung thực hiện:

3.4.3. Bố cục trang web

Giao diện trang web được viết bằng các ngôn ngữ thường gặp trong lập trình web như HTML, Javascript, Jquery (một module của Javascript)…

• HTML: ngôn ngữ chính để thiết kế giao diện

HTML là một ngôn ngữ đánh dấu chứ không phải một ngôn ngữ lập trình, nhằm tạo ra các trang web tĩnh dựa trên các thẻ (tags) đánh dấu, dựa vào các thẻ đánh dấu để trình duyệt cách hiển thị. HTML chứa các thành phần định dạng để báo cho trình duyệt web biết cách để hiển thị một trang web. Một trang web thông thường gồm có 2 thành phần chính:

- Dữ liệu của trang web (văn bản, âm thanh, hình ảnh…).

- Các thẻ tag HTML dùng để định dạng mô tả cách thức các dữ liệu được hiển thị trên trình duyệt.

Để đọc được trang web phải thông qua trình duyệt web (Web Browser) như Internet Explorer, Mozzila Firefox, Google Chrome…

• Javascript, Jquery: sử dụng để xây dựng các biểu đồ nhiệt độ, độ ẩm và tốc độ, làm cho trang web sinh động hơn, giúp trang web tự động cập nhật dữ liệu mới từ server.

Nhiệt độ: oC Độ ẩm: % Tốc độ: vòng/phút Biểu đồ nhiệt độ Thời gian cập nhật Biểu đồ độ ẩm Biểu đồ tốc độ quay

Giới thiệu đề tài

Javascript là một ngôn ngữ lập trình phía trình duyệt xử lý có động cơ được nhúng vào trong các trình duyệt web như Internet Explorer, Netscape, Firefox, Google Chrome … Ngôn ngữ này được dùng rộng rãi cho các trang web

Javascript đã thêm vào nhiều tính năng thú vị đến các trang HTML. Nó có thể cung cấp một máy chủ với các tính năng hấp dẫn như thực hiện các phép tính, cho phép người sử dụng tương tác với các trang web, thực hiện các yếu tố thao tác trên một trang web, cung cấp các hiệu ứng tuyệt vời, năng động.

Hình 3.24: Bố cục trang hiển thị dữ liệu thu thập

 Phần giới thiệu: các thông tin về đề tài đồ án.

 Phần thời gian cập nhật: hiển thị thời gian cập nhật dữ liệu.

 Phần hiển thị nhiệt độ, độ ẩm và tốc độ động cơ: hiển thị thông số về nhiệt độ, độ ẩm và tốc độ động cơ từ Raspberry gửi lên.

 Phần biểu đồ: vẽ biểu đồ của các thông số nhiệt độ, độ ẩm và tốc độ trong khoảng thời gian 30 giây.

 Phần download file dữ liệu: cho phép download file dữ liệu được lưu lại liên tục về máy khách.

Đồ án tốt nghiệp

Chương 4

THIẾT KẾ HỆ THỐNG THU THẬP DỮ LIỆU DÙNG RASPBERRY PI

Một phần của tài liệu ĐỀ TÀI THU THẬP DỮ LIỆU DÙNG RASPBERRY PI THÔNG QUA MẠNG INTERNET (Trang 43)

w