EPCB - Điện tử và IoT | Cảm biến công nghiệp

♥️Chào các bạn!♥️

Trong kì trước của series này, mình đã hướng dẫn các bạn tạo một Server ThingSpeak miễn phí và cách làm sao để đẩy dữ liệu từ cảm biến lên server này. Các bạn có thể xem lại Gửi Dữ Liệu Lên ThingSpeak Sử Dụng ESP8266 để hiểu rõ hơn nhé!

Mình sẽ giúp các bạn tùy chỉnh lại giao diện quan sát trên ThingSpeak Server cho đẹp mắt hơn một chút và làm thế nào để lấy được những giá trị dữ liệu đó xuống một thiết bị ESP8266 khác ở bất cứ đâu có kết nối 3G/4G-LTE/WiFi. Mới nghe là thấy hào hứng rồi phải không? 

PHẦN 1: TÙY CHỈNH GIAO DIỆN THINGSPEAK SERVER ĐẸP MẮT

Bước 1: Cài đặt quyền xem dữ liệu trên Server

Các bạn truy cập vào Channel ThingSpeak đã tạo ở Bài trước, sau đó chọn tab Sharing, tab này sẽ quyết định đến quyền riêng tư dữ liệu kênh của bạn (quyền được xem thôi nha các bạn).

- Keep channel view private: Giữ quyền xem riêng tư
- Share channel view with everyone: Chia sẻ quyền xem cho mọi người.
- Share channel view only with the following users: Chia sẻ quyền xem dữ liệu cho những người nhất định bằng Email.

Bạn chọn Share channel view with everyone sau đó chuyển sang thẻ Public View

Bước 2: Tạo giao diện hiển thị Public

Đối với tab Private thì bài viết trước chúng ta đã nghiên cứu rồi, ở bài này mình tập trung hướng dẫn các bạn tùy chỉnh ở thẻ Public nhằm mục đích cho các viết sau chúng ta sẽ làm việc khác, cách chỉnh giao diện thẻ Private cũng tương tự nha các bạn.

- Các bạn tạo một biểu đồ theo dõi thì chọn Add Visualizations, website sẽ mở ra các Field Data là các trường bạn đã gửi dữ liệu từ ESP8266 lên đây, các bạn chọn trường muốn hiển thị, sau đó chọn Save.

Bạn có thể làm tương tự với các trường khác nhé!

Bước 3: Tùy chỉnh

Sau khi tạo một biểu đồ thành công, các bạn chọn Options (icon cây bút) để bắt đầu tùy chỉnh giao diện.

Có khá nhiều thông số để tùy chỉnh, mình sẽ giải thích các thông số phổ biến mà mình hay chỉnh:

- Title: Đặt tên cho Biểu đồ
- X-Asis: Tùy chỉnh độ rộng biên X
- Y-Asis: Tùy chỉnh độ rộng biên Y
- Color: Tùy chỉnh màu của đường dữ liệu (theo chuẩn mã màu HTML, CSS, RGB, CMYK). Các bạn có thể lấy mã màu tùy ý ở đây và sửa lại, nhớ viết thường hết nhé!
- Background: Tùy chỉnh màu của nền (theo chuẩn mã màu HTML, CSS, RGB, CMYK).
- Type: Cách thể hiện đường dữ liệu (đường thẳng, dạng thanh, cột, đường cong, bước)
- Dynamic: Cho phép cập nhật động.
- Result: Thời gian lấy mẫu (nên chọn 30 hoặc 60 giây).

Sau đó chọn Save để lưu lại

Đối với các ô khác các bạn có thể tự chịu khó nghiên cứu thêm nhé! Sau đó các bạn nhấn Save để lưu.

Bước 4: Tùy chỉnh giao diện dạng màn hình dữ liệu và máy đo

Trong tab Public View, các bạn chọn thẻ Add Widgets, chọn Gauge và nhấn Next để tạo ra một giao diện dạng máy đo (Hay dùng cho Cảm biến độ ẩm)

Các bạn cũng chọn Options (icon cây bút)

- Name: Tên giao diện
- Field: Trường lấy dữ liệu
- Min: Giá trị thấp nhất (bạn nhập 0)
- Max: Giao trị cao nhất (bạn nhập 100)
- Click chọn Display Value.
- Units: Chọn đơn vị (đối với nhiệt độ mình để °C, độ ẩm mình để %)
- Tick Interval và Update Interval bạn để mặc định.
- Range là vùng đo dữ liệu (mình đo từ 0 đến 99).
- Kế bên có thẻ chọn màu, bạn chọn màu cho dải đo

Sau đó chọn Save để lưu lại

Trong tab Public View, các bạn chọn thẻ Add Widgets, chọn Numberic Display và nhấn Next để tạo ra một giao diện dạng màn hình số (Hay dùng cho Cảm biến nhiệt độ)

Mình lại tiếp tục tùy chỉnh các thông số:

- Name: Tên giao diện
- Field: Trường dữ liệu
- Update Interval (để mặc định 15s nhé bạn)
- Units: Bạn nhập đơn vị
- Data Type: Bạn nên chon dạng Decimal (Thập phân) và nhập đơn vị thập phân làm tròn (mình chọn 1).

Sau đó chọn Save để lưu lại

Sau khi mình loay hoay chỉnh sửa thì đây là thành quả 😍

Trông cũng đẹp mắt hơn đúng không bạn?

PHẦN 2: LẤY DỮ LIỆU TỪ SERVER VỀ THIẾT BỊ ESP8266

Download source code mẫu

Các bạn chuẩn bị thêm 1 board ESP8266, có thể mua tại đây nhé!

Tải về source code của mình tại:
https://github.com/VVCi/ESP8266HTTPServer sau đó mở file readDataSensor.ino trên Arduino IDE để build và nạp code cho board mới. Các giá trị cảm biến lấy được từ board ESP8266 thứ nhất sẽ được tải xuống và hiển thị trên Serial/Terminal Monitor. Và tất nhiên là dữ liệu này sẽ đồng bộ realtime xuyên suốt hệ thống gửi và nhận của các bạn.

Mở rộng cấu hình

Với các giá trị dữ liệu đã lấy xuống, bạn có thể dùng LCD Text để hiển thị ra cho trực quan và dễ nhìn. Khi nào mình có thời gian hơn sẽ hướng dẫn thêm cho các bạn sử dụng thêm với các LCD Text này! 🙂

Ở phần sau mình sẽ hướng dẫn cho các bạn cách để sử dụng kho dữ liệu đám mây ThingSpeak để đưa lên Google Sites và tạo một Website quan trắc dữ liệu cho riêng bạn! Sẽ rất thú vị và hấp dẫn đấy!

Nếu các bạn có những thắc mắc cần giải đáp, hãy nhắn tin cho mình qua Fanpage: EPCB hoặc qua Email: epcbtech@gmail.com. Cảm ơn các bạn đã theo dõi!