basic UI dashboard
Beagle User
12 months ago
commit
db28d00f63
@ -0,0 +1 @@
|
||||
{ "temperature": 24.60, "humidity": 52.68 }
|
||||
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-f</title><path d="M400,240c-8.89-89.54-71-144-144-144-69,0-113.44,48.2-128,96C68,198,16,235.59,16,304c0,66,54,112,120,112H396c55,0,100-27.44,100-88C496,268.18,443,242.24,400,240Z" style="fill:none;stroke:white;stroke-linejoin:round;stroke-width:32px"/></svg>
|
||||
|
After Width: | Height: | Size: 365 B |
@ -0,0 +1 @@
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><title>ionicons-v5-q</title><line x1='256' y1='48' x2='256' y2='96' style='fill:none;stroke:white;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='256' y1='416' x2='256' y2='464' style='fill:none;stroke:white;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='108.92' x2='369.14' y2='142.86' style='fill:none;stroke:white;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='369.14' x2='108.92' y2='403.08' style='fill:none;stroke:white;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='464' y1='256' x2='416' y2='256' style='fill:none;stroke:white;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='96' y1='256' x2='48' y2='256' style='fill:none;stroke:white;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='403.08' x2='369.14' y2='369.14' style='fill:none;stroke:white;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='142.86' x2='108.92' y2='108.92' style='fill:none;stroke:white;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><circle cx='256' cy='256' r='80' style='fill:none;stroke:white;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-q</title><path d="M307.72,302.27a8,8,0,0,1-3.72-6.75V80a48,48,0,0,0-48-48h0a48,48,0,0,0-48,48V295.52a8,8,0,0,1-3.71,6.74,97.51,97.51,0,0,0-44.19,86.07A96,96,0,0,0,352,384,97.49,97.49,0,0,0,307.72,302.27Z" style="fill:none;stroke:white;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/><line x1="256" y1="112" x2="256" y2="384" style="fill:none;stroke:white;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/><circle cx="256" cy="384" r="48"/></svg>
|
||||
|
After Width: | Height: | Size: 578 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-r</title><path d="M400,320c0,88.37-55.63,144-144,144S112,408.37,112,320c0-94.83,103.23-222.85,134.89-259.88a12,12,0,0,1,18.23,0C296.77,97.15,400,225.17,400,320Z" style="fill:none;stroke:white;stroke-miterlimit:10;stroke-width:32px"/><path d="M344,328a72,72,0,0,1-72,72" style="fill:none;stroke:white;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
|
||||
|
After Width: | Height: | Size: 476 B |
@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Air Quality Monitor</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* General Styles */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; }
|
||||
body { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f5f5f5; color: #333; height: 100vh; }
|
||||
|
||||
h1 { font-size: 2em; color: #444; margin-bottom: 20px; }
|
||||
|
||||
/* Container for Sensors */
|
||||
.sensor-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Sensor Box */
|
||||
.sensor {
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
width: 180px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.sensor:hover { transform: scale(1.05); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
/* Sensor Titles */
|
||||
.sensor-title {
|
||||
font-weight: 400;
|
||||
color: #555;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Sensor Value */
|
||||
.sensor-value {
|
||||
font-size: 2.5em;
|
||||
font-weight: 300;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
animation: fadeIn 0.5s ease;
|
||||
}
|
||||
|
||||
.unit { font-size: 0.8em; color: #777; }
|
||||
|
||||
/* Icon Styles */
|
||||
.sensor-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 8px;
|
||||
filter: grayscale(50%);
|
||||
}
|
||||
|
||||
/* Keyframes for Smooth Animations */
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Room Air Quality Monitor</h1>
|
||||
<div class="sensor-container">
|
||||
<div id="temperature" class="sensor">
|
||||
<div class="sensor-title">
|
||||
<img src="./images/thermometer-outline.svg" class="sensor-icon" alt="Temperature Icon">
|
||||
Temperature
|
||||
</div>
|
||||
<div class="sensor-value" id="temp-value">--</div>
|
||||
<div class="unit">℃</div>
|
||||
</div>
|
||||
|
||||
<div id="humidity" class="sensor">
|
||||
<div class="sensor-title">
|
||||
<img src="./images/water-outline.svg" class="sensor-icon" alt="Humidity Icon">
|
||||
Humidity
|
||||
</div>
|
||||
<div class="sensor-value" id="humidity-value">--</div>
|
||||
<div class="unit">%</div>
|
||||
</div>
|
||||
|
||||
<div id="co2" class="sensor">
|
||||
<div class="sensor-title">
|
||||
<img src="./images/cloud-outline.svg" class="sensor-icon" alt="CO2 Icon">
|
||||
CO₂
|
||||
</div>
|
||||
<div class="sensor-value" id="co2-value">--</div>
|
||||
<div class="unit">ppm</div>
|
||||
</div>
|
||||
|
||||
<div id="pressure" class="sensor">
|
||||
<div class="sensor-title">
|
||||
<img src="./images/sunny-outline.svg" class="sensor-icon" alt="Pressure Icon">
|
||||
Pressure
|
||||
</div>
|
||||
<div class="sensor-value" id="pressure-value">--</div>
|
||||
<div class="unit">hPa</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function fetchData() {
|
||||
try {
|
||||
const res = await Promise.all([
|
||||
//fetch("./data/BH1750.json"),
|
||||
//fetch("./data/BMP180.json"),
|
||||
fetch("./data/HTU21D.json"),
|
||||
//fetch("./data/MH_Z19.json")
|
||||
]);
|
||||
|
||||
const data = (await Promise.all(res.map(r => r.json()))).reduce((acc, item) => ({ ...acc, ...item }), {});
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch sensor data:", error);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function updateUI(data) {
|
||||
document.getElementById("temp-value").textContent = data.temperature ? data.temperature.toFixed(1) : "--";
|
||||
document.getElementById("humidity-value").textContent = data.humidity ? data.humidity.toFixed(1) : "--";
|
||||
document.getElementById("co2-value").textContent = data.co2 ? data.co2 : "--";
|
||||
document.getElementById("pressure-value").textContent = data.pressure ? data.pressure.toFixed(1) : "--";
|
||||
}
|
||||
|
||||
async function refreshData() {
|
||||
const data = await fetchData();
|
||||
updateUI(data);
|
||||
}
|
||||
|
||||
setInterval(refreshData, 6000); // Refresh every 60 seconds
|
||||
refreshData(); // Initial fetch
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Simple Sensor Dashboard</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; text-align: center; }
|
||||
.sensor { margin: 10px; padding: 10px; border: 1px solid #ccc; }
|
||||
.sensor-title { font-weight: bold; }
|
||||
.sensor-value { font-size: 2em; color: #333; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Sensor Data</h1>
|
||||
<div id="temperature" class="sensor">
|
||||
<div class="sensor-title">Temperature</div>
|
||||
<div class="sensor-value" id="temp-value">--</div>
|
||||
</div>
|
||||
<div id="humidity" class="sensor">
|
||||
<div class="sensor-title">Humidity</div>
|
||||
<div class="sensor-value" id="humidity-value">--</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function fetchData() {
|
||||
try {
|
||||
const tempResponse = await fetch('./data/HTU21D.json');
|
||||
const tempData = await tempResponse.json();
|
||||
document.getElementById('temp-value').textContent = tempData.temperature.toFixed(1) + ' ℃';
|
||||
document.getElementById('humidity-value').textContent = tempData.humidity.toFixed(1) + ' %';
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Update data every 60 seconds
|
||||
setInterval(fetchData, 60000);
|
||||
fetchData(); // Initial fetch
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,16 @@
|
||||
CC=gcc
|
||||
CFLAGS=-I.
|
||||
DEPS =
|
||||
OBJ = main.o htu21d.o
|
||||
EXTRA_LIBS=-li2c
|
||||
|
||||
%.o: %.c $(DEPS)
|
||||
$(CC) -c -o $@ $< $(CFLAGS)
|
||||
|
||||
HTU21D: $(OBJ)
|
||||
$(CC) -o $@ $^ $(CFLAGS) $(EXTRA_LIBS)
|
||||
|
||||
.PHONY: clean
|
||||
|
||||
clean:
|
||||
rm -f HTU21D $(OBJ)
|
||||
@ -0,0 +1,180 @@
|
||||
# Introduction
|
||||
This repository guides you to implement and use the HTU21D temperature and humidity sensor by using I2C communication. The repository contains the following files:
|
||||
|
||||
- `htu21d.h` library header files
|
||||
- `htu21d.c` implemenation methods file
|
||||
- `main.c` an example file to test I2C communication using the library `htu21d`
|
||||
- `example` output file precompiled in a raspberry pi zero that returns temperature and humidity
|
||||
|
||||
# Setup the raspberry
|
||||
|
||||
## Enable I2C on the Raspberry Pi:
|
||||
- Run sudo raspi-config.
|
||||
- Navigate to Interfacing Options → I2C and enable it.
|
||||
- Reboot the Pi.
|
||||
|
||||
## Install I2C Tools and Development Libraries:
|
||||
|
||||
```
|
||||
sudo apt-get update
|
||||
sudo apt-get install i2c-tools libi2c-dev
|
||||
```
|
||||
## Check if the sensor is detected:
|
||||
|
||||
```
|
||||
sudo i2cdetect -y 1
|
||||
```
|
||||
This command should show an address for the HTU21D, typically 0x40.
|
||||
```
|
||||
0 1 2 3 4 5 6 7 8 9 a b c d e f
|
||||
00: -- -- -- -- -- -- -- --
|
||||
10: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
|
||||
20: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
|
||||
30: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
|
||||
40: 40 -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
|
||||
50: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
|
||||
60: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
|
||||
70: -- -- -- -- -- -- -- --
|
||||
```
|
||||
|
||||
# My own header files for HTU21D sensor
|
||||
This is a detailed guide to configure and create your own files to comunicate with each sensor used by the air-quality sensor.
|
||||
|
||||
## Header
|
||||
Create the Header File `htu21d.h` with Header Guard and Includes:
|
||||
|
||||
```c
|
||||
#ifndef HTU21D_H
|
||||
#define HTU21D_H
|
||||
|
||||
// I2C Address
|
||||
#define HTU21D_I2C_ADDR 0x40
|
||||
// Commands
|
||||
#define HTU21D_TEMP 0xE3
|
||||
#define HTU21D_HUMID 0xE5
|
||||
#define HTU21D_RESET 0xFE
|
||||
|
||||
|
||||
// Function declarations:
|
||||
|
||||
// Temp
|
||||
int getTemperature(int fd, double *temperature);
|
||||
// Humidity
|
||||
int getHumidity(int fd, double *humidity);
|
||||
|
||||
#endif // HTU21D_H
|
||||
```
|
||||
|
||||
## Implement the Sensor Communication `htu21d.c`
|
||||
|
||||
```c
|
||||
#include <unistd.h> //to send commands to and receive from I2C device
|
||||
#include <sys/ioctl.h>//setting up and controlling the I2C device settings
|
||||
#include <linux/i2c-dev.h>//definitions for system calls and structures specific to I2C
|
||||
#include <i2c/smbus.h>//SMBus commands in a more standardized way for I2C
|
||||
#include <stdio.h>//perror
|
||||
|
||||
#include "htu21d.h" // my own header file
|
||||
|
||||
// Reset function:
|
||||
int reset(int fd)
|
||||
{
|
||||
if(0 > ioctl(fd, I2C_SLAVE, HTU21D_I2C_ADDR))
|
||||
{
|
||||
perror("Failed to open the bus");
|
||||
return -1;
|
||||
}
|
||||
i2c_smbus_write_byte(fd, HTU21D_RESET);
|
||||
return 0;
|
||||
}
|
||||
|
||||
// Get temperature:
|
||||
int getTemperature(int fd, double *temperature)
|
||||
{
|
||||
reset(fd);
|
||||
char buf[3];
|
||||
__s32 res = i2c_smbus_read_i2c_block_data(fd, HTU21D_TEMP,3,buf);
|
||||
if(res<0)
|
||||
{
|
||||
perror("Failed to read from the device");
|
||||
return -1;
|
||||
}
|
||||
*temperature = -46.85 + 175.72 * (buf[0]*256 + buf[1]) / 65536.0;
|
||||
return 0;
|
||||
}
|
||||
|
||||
|
||||
// Get humidity:
|
||||
int getHumidity(int fd, double *humidity)
|
||||
{
|
||||
reset(fd);
|
||||
char buf[3];
|
||||
__s32 res = i2c_smbus_read_i2c_block_data(fd, HTU21D_HUMID, 3, buf);
|
||||
if(res<0)
|
||||
{
|
||||
perror("Failed to read from the device");
|
||||
return -1;
|
||||
}
|
||||
*humidity = -6 + 125 * (buf[0]*256 + buf[1]) / 65536.0;
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Using the library
|
||||
|
||||
```c
|
||||
#include <stdio.h>
|
||||
#include <errno.h>
|
||||
#include <stdlib.h>
|
||||
#include <string.h>
|
||||
#include <fcntl.h>
|
||||
|
||||
#include "htu21d.h"
|
||||
|
||||
int main()
|
||||
{
|
||||
char filename[20];
|
||||
snprintf(filename, 19, "/dev/i2c-%d", 1);
|
||||
int fd = open(filename, O_RDWR);
|
||||
if (0 > fd)
|
||||
{
|
||||
fprintf(stderr, "ERROR: Unable to access HTU21D sensor module: %s\n", strerror (errno));
|
||||
exit(-1);
|
||||
}
|
||||
// Retrieve temperature and humidity
|
||||
double temperature = 0;
|
||||
double humidity = 0;
|
||||
if ( (0 > getHumidity(fd, &humidity)) || (0 > getTemperature(fd, &temperature)) )
|
||||
{
|
||||
fprintf(stderr, "ERROR: HTU21D sensor module not found\n");
|
||||
exit(-1);
|
||||
}
|
||||
|
||||
// Print temperature and humidity on the screen
|
||||
printf("HTU21D Sensor Module\n");
|
||||
printf("%5.2fC\n", temperature);
|
||||
printf("%5.2f%%rh\n", humidity);
|
||||
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
# Compiling and testing
|
||||
Then to properly compile whitout a make file:
|
||||
```sh
|
||||
gcc -o example main.c htu21d.c -li2c
|
||||
```
|
||||
or
|
||||
```sh
|
||||
gcc -o example main.c htu21d.c -I. -li2c
|
||||
```
|
||||
|
||||
### Wiring htu21d to Rasp-zero
|
||||
Htu -> Rasp-Zero
|
||||
VIN -> GPIO 1
|
||||
GND -> GPIO 9 or (6)
|
||||
SCL -> GPIO 5
|
||||
SDA -> GPIO 3
|
||||
|
||||
|
||||
@ -0,0 +1,52 @@
|
||||
#include <unistd.h> //to send commands to and receive from I2C device
|
||||
#include <sys/ioctl.h>//setting up and controlling the I2C device settings
|
||||
#include <linux/i2c-dev.h>//definitions for system calls and structures specific to I2C
|
||||
#include <i2c/smbus.h>//SMBus commands in a more standardized way for I2C
|
||||
#include <stdio.h>//perror
|
||||
|
||||
#include "htu21d.h" // my own header file
|
||||
|
||||
// Reset function:
|
||||
int reset(int fd)
|
||||
{
|
||||
if(0 > ioctl(fd, I2C_SLAVE, HTU21D_I2C_ADDR))
|
||||
{
|
||||
perror("Failed to open the bus");
|
||||
return -1;
|
||||
}
|
||||
i2c_smbus_write_byte(fd, HTU21D_RESET);
|
||||
return 0;
|
||||
}
|
||||
|
||||
// Get temperature:
|
||||
int getTemperature(int fd, double *temperature)
|
||||
{
|
||||
reset(fd);
|
||||
char buf[3];
|
||||
__s32 res = i2c_smbus_read_i2c_block_data(fd, HTU21D_TEMP,3,buf);
|
||||
if(res<0)
|
||||
{
|
||||
perror("Failed to read from the device");
|
||||
return -1;
|
||||
}
|
||||
*temperature = -46.85 + 175.72 * (buf[0]*256 + buf[1]) / 65536.0;
|
||||
return 0;
|
||||
}
|
||||
|
||||
|
||||
// Get humidity:
|
||||
int getHumidity(int fd, double *humidity)
|
||||
{
|
||||
reset(fd);
|
||||
char buf[3];
|
||||
__s32 res = i2c_smbus_read_i2c_block_data(fd, HTU21D_HUMID, 3, buf);
|
||||
if(res<0)
|
||||
{
|
||||
perror("Failed to read from the device");
|
||||
return -1;
|
||||
}
|
||||
*humidity = -6 + 125 * (buf[0]*256 + buf[1]) / 65536.0;
|
||||
return 0;
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
#ifndef HTU21D_H
|
||||
#define HTU21D_H
|
||||
|
||||
// I2C Address
|
||||
#define HTU21D_I2C_ADDR 0x40
|
||||
// Commands
|
||||
#define HTU21D_TEMP 0xE3
|
||||
#define HTU21D_HUMID 0xE5
|
||||
#define HTU21D_RESET 0xFE
|
||||
|
||||
|
||||
// Function declarations:
|
||||
|
||||
// Temp
|
||||
int getTemperature(int fd, double *temperature);
|
||||
// Humidity
|
||||
int getHumidity(int fd, double *humidity);
|
||||
|
||||
#endif // HTU21D_H
|
||||
Binary file not shown.
@ -0,0 +1,39 @@
|
||||
#include <stdio.h>
|
||||
#include <errno.h>
|
||||
#include <stdlib.h>
|
||||
#include <string.h>
|
||||
#include <fcntl.h>
|
||||
|
||||
#include "htu21d.h"
|
||||
|
||||
int main()
|
||||
{
|
||||
char filename[20];
|
||||
snprintf(filename, 19, "/dev/i2c-%d", 2);
|
||||
int fd = open(filename, O_RDWR);
|
||||
if (0 > fd)
|
||||
{
|
||||
fprintf(stderr, "ERROR: Unable to access HTU21D sensor module: %s\n", strerror (errno));
|
||||
exit(-1);
|
||||
}
|
||||
|
||||
// Retrieve temperature and humidity
|
||||
double temperature = 0;
|
||||
double humidity = 0;
|
||||
if ( (0 > getHumidity(fd, &humidity)) || (0 > getTemperature(fd, &temperature)) )
|
||||
{
|
||||
fprintf(stderr, "ERROR: HTU21D sensor module not found\n");
|
||||
exit(-1);
|
||||
}
|
||||
|
||||
// Print temperature and humidity on the screen
|
||||
printf("{ ");
|
||||
printf("\"temperature\": %5.2f, ", temperature);
|
||||
printf("\"humidity\": %5.2f ", humidity);
|
||||
printf("}");
|
||||
//printf("HTU21D Sensor Module\n");
|
||||
//printf("%5.2fC\n", temperature);
|
||||
//printf("%5.2f%%rh\n", humidity);
|
||||
|
||||
return 0;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Loading…
Reference in New Issue