basic UI dashboard

master
Beagle User 4 weeks 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
![Raspberry Pi Zero GPIO layout](rpiz.png)

@ -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…
Cancel
Save