Gallardo7761/contaminus
Archived
1
0
Fork 0
Code Pull Requests Activity

Implemented (partially) Voronoi algorithm for zone-dividing in Seville map. Also refactored some things in frontend. Modified hardware firmware for conditional compilation for both SENSOR and ACTUATOR type boards.

Browse Source
This commit is contained in:
Jose
2025-05-16 23:05:46 +02:00
parent 51862cf0a8
commit cdff306ca1
30 changed files with 571 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
backend/pom.xml
View File

@@ -73,6 +73,27 @@
<version>1.5.13</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.locationtech.jts/jts-core -->
<dependency>
<groupId>org.locationtech.jts</groupId>
<artifactId>jts-core</artifactId>
<version>1.20.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.locationtech.jts.io/jts-io-common -->
<dependency>
<groupId>org.locationtech.jts.io</groupId>
<artifactId>jts-io-common</artifactId>
<version>1.20.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.19.0</version>
</dependency>
</dependencies>
<build>

100
backend/src/main/java/net/miarma/contaminus/common/VoronoiZoneDetector.java Normal file
View File

@@ -0,0 +1,100 @@
package net.miarma.contaminus.common;
import java.io.File;
import java.io.InputStream;
import java.net.URI;
import java.net.URL;
import java.nio.file.Files;
import java.util.ArrayList;
import java.util.List;
import org.locationtech.jts.geom.Coordinate;
import org.locationtech.jts.geom.Geometry;
import org.locationtech.jts.geom.GeometryFactory;
import org.locationtech.jts.geom.Point;
import org.locationtech.jts.geom.Polygon;
import org.locationtech.jts.io.geojson.GeoJsonReader;
import com.google.gson.Gson;
import com.google.gson.JsonArray;
import com.google.gson.JsonObject;
import com.google.gson.JsonParser;
public class VoronoiZoneDetector {
private static class Zone {
Polygon polygon;
String actuatorId;
public Zone(Polygon polygon, String actuatorId) {
this.polygon = polygon;
this.actuatorId = actuatorId;
}
}
private final List<Zone> zones = new ArrayList<>();
private final GeometryFactory geometryFactory = new GeometryFactory();
private final Gson gson = new Gson();
public VoronoiZoneDetector(String geojsonUrl, boolean isUrl) throws Exception {
String geojsonStr;
if(isUrl) {
try(InputStream is = URL.of(URI.create(geojsonUrl), null).openStream()) {
geojsonStr = new String(is.readAllBytes());
}
} else {
geojsonStr = Files.readString(new File(geojsonUrl).toPath());
}
JsonObject root = JsonParser.parseString(geojsonStr).getAsJsonObject();
JsonArray features = root.getAsJsonArray("features");
GeoJsonReader reader = new GeoJsonReader(geometryFactory);
for (int i = 0; i < features.size(); i++) {
JsonObject feature = features.get(i).getAsJsonObject();
String actuatorId = feature
.getAsJsonObject("properties")
.get("actuatorId")
.getAsString();
JsonObject geometryJson = feature.getAsJsonObject("geometry");
String geometryStr = gson.toJson(geometryJson);
Geometry geometry = reader.read(geometryStr);
if (geometry instanceof Polygon polygon) {
zones.add(new Zone(polygon, actuatorId));
} else {
Constants.LOGGER.error("⚠️ Geometría ignorada: no es un polígono");
}
}
}
public String getZoneForPoint(double lon, double lat) {
Point p = geometryFactory.createPoint(new Coordinate(lon, lat));
for (Zone z : zones) {
if (z.polygon.covers(p)) {
return z.actuatorId;
}
}
return null; // no está dentro de ninguna zona
}
public static void main(String[] args) throws Exception {
VoronoiZoneDetector detector = new VoronoiZoneDetector("https://miarma.net/files/voronoi_sevilla_geovoronoi.geojson", true);
double lon = -5.9752;
double lat = 37.3887;
String actuatorId = detector.getZoneForPoint(lon, lat);
if (actuatorId != null) {
System.out.println("📍 El punto pertenece al actuator: " + actuatorId);
} else {
System.out.println("🚫 El punto no pertenece a ninguna zona");
}
}
}

52
backend/src/main/java/net/miarma/contaminus/verticles/LogicLayerAPIVerticle.java
View File

@@ -45,7 +45,12 @@ public class LogicLayerAPIVerticle extends AbstractVerticle {
WebClientOptions options = new WebClientOptions()
.setUserAgent("ContaminUS");
this.restClient = new RestClientUtil(WebClient.create(Vertx.vertx(), options));
this.mqttClient = MqttClient.create(Vertx.vertx(), new MqttClientOptions().setAutoKeepAlive(true));
this.mqttClient = MqttClient.create(Vertx.vertx(),
new MqttClientOptions()
.setAutoKeepAlive(true)
.setUsername("contaminus")
.setPassword("contaminus")
);
}
@Override
@@ -70,11 +75,25 @@ public class LogicLayerAPIVerticle extends AbstractVerticle {
router.route(HttpMethod.GET, Constants.HISTORY).handler(this::getDeviceHistory);
router.route(HttpMethod.GET, Constants.SENSOR_VALUES).handler(this::getSensorValues);
mqttClient.connect(1883, "localhost", ar -> {
if (ar.succeeded()) {
Constants.LOGGER.info("🟢 MQTT client connected");
vertx.createHttpServer()
.requestHandler(router)
.listen(configManager.getLogicApiPort(), configManager.getHost());
.listen(configManager.getLogicApiPort(), configManager.getHost(), http -> {
if (http.succeeded()) {
Constants.LOGGER.info("🟢 HTTP server started on port " + configManager.getLogicApiPort());
startPromise.complete();
} else {
Constants.LOGGER.error("🔴 HTTP server failed to start: " + http.cause());
startPromise.fail(http.cause());
}
});
} else {
Constants.LOGGER.error("🔴 MQTT client connection failed: " + ar.cause());
startPromise.fail(ar.cause());
}
});
}
private void getDeviceLatestValues(RoutingContext context) {
@@ -152,27 +171,18 @@ public class LogicLayerAPIVerticle extends AbstractVerticle {
WeatherValue weatherValue = gson.fromJson(weather.toString(), WeatherValue.class);
COValue coValue = gson.fromJson(co.toString(), COValue.class);
// MQTT publish =============================
float coAmount = coValue.getValue();
Constants.LOGGER.info("CO amount received: " + coAmount);
String topic = buildTopic(Integer.parseInt(groupId), deviceId, "matrix");
if (coAmount >= 80.0f) {
mqttClient.connect(1883, "miarma.net", ar -> {
if(ar.succeeded()) {
Constants.LOGGER.info("Connected to MQTT broker");
mqttClient.publish(topic, Buffer.buffer("ECO"), MqttQoS.AT_LEAST_ONCE, false, false);
} else {
Constants.LOGGER.error("Error connecting to MQTT broker: " + ar.cause().getMessage());
}
});
} else {
mqttClient.connect(1883, "miarma.net", ar -> {
if(ar.succeeded()) {
Constants.LOGGER.info("Connected to MQTT broker");
mqttClient.publish(topic, Buffer.buffer("GAS"), MqttQoS.AT_LEAST_ONCE, false, false);
} else {
Constants.LOGGER.error("Error connecting to MQTT broker: " + ar.cause().getMessage());
}
});
Constants.LOGGER.info("Topic: " + topic);
if (mqttClient.isConnected()) {
Constants.LOGGER.info("🟢 Publishing to MQTT topic: " + topic + " with value: " + coAmount);
mqttClient.publish(topic, Buffer.buffer(coAmount >= 80.0f ? "ECO" : "GAS"),
MqttQoS.AT_LEAST_ONCE, false, false);
Constants.LOGGER.info("🟢 Message published to MQTT topic: " + topic);
}
// ============================================
gpsValue.setDeviceId(deviceId);
weatherValue.setDeviceId(deviceId);

18
backend/src/main/resources/coords.txt Normal file
View File

@@ -0,0 +1,18 @@
Bellavista: 37.32533897043053, -5.968045749476732
Bermejales: 37.3490769843888, -5.976422439823011
Los Remedios: 37.37515235961667, -6.000317870442392
Tiro de Línea: 37.36841756821152, -5.97598991091761
San Bernardo: 37.3789653804891, -5.987731412877974
Nervión: 37.38310913923199, -5.97320443871298
Cerro del Águila: 37.3733690603403, -5.960390435428303
Polígono Sur: 37.36134485686387, -5.965857306623599
Amate: 37.381087013389035, -5.953545655643191
Sevilla Este: 37.39944168632523, -5.925092000775878
Valdezorras: 37.429014427259844, -5.927831833065477
Pino Montano: 37.423390190328654, -5.973241522877093
Macarena: 37.40735604254458, -5.980276144202576
Centro: 37.39277256619283, -5.994765524658572
Santa Justa: 37.394092596421686, -5.962662563452358
Santa Clara: 37.40050556650672, -5.954710495719027
Triana: 37.380789093980844, -6.008393542942082
Cartuja: 37.403427709335816, -6.007627600183472

70
backend/src/main/resources/voronoi.py Normal file
View File

@@ -0,0 +1,70 @@
import geopandas as gpd # esto es necesario para leer el GeoJSON
import matplotlib.pyplot as plt # esto es necesario para graficar
import numpy as np # esto es necesario para manejar los arrays
import json # esto es necesario para guardar el GeoJSON
from shapely.geometry import Polygon # esto es necesario para crear la caja de recorte
from geovoronoi import voronoi_regions_from_coords # esto es necesario para crear el Voronoi
# se cargan los puntos (coordenadas) de los actuadores
# en formato GeoJSON
points_gdf = gpd.read_file("sevilla.geojson")
coords = np.array([[geom.x, geom.y] for geom in points_gdf.geometry])
# esto es una "caja" alrededor de Sevilla para recortar el Voronoi
# para que las regiones no acotadas no sean infinitas
seville_boundary = Polygon([
(-6.10, 37.30),
(-5.85, 37.30),
(-5.85, 37.45),
(-6.10, 37.45)
])
area_gdf = gpd.GeoDataFrame(geometry=[seville_boundary], crs="EPSG:4326")
# se genera el Voronoi con las coordenadas de los actuadores
# y la caja de recorte (unión de todo)
region_polys, region_pts = voronoi_regions_from_coords(coords, area_gdf.union_all())
# dibuja con matplotlib
fig, ax = plt.subplots(figsize=(10, 10))
for poly in region_polys.values():
x, y = poly.exterior.xy
ax.fill(x, y, alpha=0.3, edgecolor='black')
ax.plot(coords[:, 0], coords[:, 1], 'ro')
for idx, coord in enumerate(coords):
ax.text(coord[0], coord[1], points_gdf.iloc[idx]["name"], fontsize=8, ha='center')
ax.set_title("Zonas Voronoi por Actuator (GeoVoronoi)")
plt.axis("equal")
plt.grid(True)
plt.tight_layout()
plt.show()
# Guardar GeoJSON
features = []
for idx, region in region_polys.items():
point_index = region_pts[idx] # índice del punto original
name = points_gdf.loc[point_index, "name"]
if isinstance(name, gpd.GeoSeries):
name = name.iloc[0] # o el que tú quieras
name = str(name)
feature = {
"type": "Feature",
"properties": {
"actuatorId": name
},
"geometry": json.loads(gpd.GeoSeries([region]).to_json())["features"][0]["geometry"]
}
features.append(feature)
geojson_output = {
"type": "FeatureCollection",
"features": features
}
with open("voronoi_sevilla_geovoronoi.geojson", "w") as f:
json.dump(geojson_output, f, indent=2)
print("✅ GeoJSON guardado como 'voronoi_sevilla_geovoronoi.geojson'")

BIN
frontend/public/fonts/LEDBOARD.ttf Normal file
View File

Binary file not shown.

BIN
frontend/public/fonts/OpenSans.ttf Normal file
View File

Binary file not shown.

BIN
frontend/public/fonts/ProductSansBold.ttf Normal file
View File

Binary file not shown.

BIN
frontend/public/fonts/ProductSansBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/public/fonts/ProductSansItalic.ttf Normal file
View File

Binary file not shown.

BIN
frontend/public/fonts/ProductSansRegular.ttf Normal file
View File

Binary file not shown.

52
frontend/src/components/HistoryCharts.jsx
View File

@@ -7,6 +7,8 @@ import { useTheme } from "@/hooks/useTheme";
import { DataProvider } from "@/context/DataContext.jsx";
import { useDataContext } from "@/hooks/useDataContext";
import { useConfig } from "@/hooks/useConfig";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
ChartJS.register(LineElement, PointElement, LinearScale, CategoryScale, Filler);
@@ -54,16 +56,31 @@ const HistoryChartsContent = () => {
carbonMonoxide: []
};
const threeDaysAgo = new Date();
threeDaysAgo.setDate(threeDaysAgo.getDate() - 3);
const isToday = (timestamp) => {
const date = new Date(timestamp * 1000);
return (
date.getUTCFullYear() >= threeDaysAgo.getUTCFullYear() &&
date.getUTCMonth() >= threeDaysAgo.getUTCMonth() &&
date.getUTCDate() >= threeDaysAgo.getUTCDate()
);
};
data?.forEach(sensor => {
if (sensor.value != null && grouped[sensor.valueType]) {
if (
sensor.value != null &&
grouped[sensor.valueType] &&
isToday(sensor.timestamp)
) {
grouped[sensor.valueType].push({
timestamp: sensor.timestamp * 1000,
value: sensor.value
});
}
});
const sortAndExtract = (entries) => {
const sorted = entries.sort((a, b) => a.timestamp - b.timestamp);
@@ -75,26 +92,27 @@ const HistoryChartsContent = () => {
})
);
const values = sorted.map(e => e.value);
return { labels, values };
const values = sorted.map(e => e.value);
return { labels, values };
};
const temp = sortAndExtract(grouped.temperature);
const hum = sortAndExtract(grouped.humidity);
const press = sortAndExtract(grouped.pressure);
const co = sortAndExtract(grouped.carbonMonoxide);
const temp = sortAndExtract(grouped.temperature);
const hum = sortAndExtract(grouped.humidity);
const press = sortAndExtract(grouped.pressure);
const co = sortAndExtract(grouped.carbonMonoxide);
const timeLabels = temp.labels.length ? temp.labels : hum.labels.length ? hum.labels : co.labels.length ? co.labels : ["Sin datos"];
const timeLabels = temp.labels.length ? temp.labels : hum.labels.length ? hum.labels : co.labels.length ? co.labels : ["Sin datos"];
const historyData = [
const historyData = [
{ title: "🌡️ Temperatura", data: temp.values, borderColor: "#00FF85", backgroundColor: "rgba(0, 255, 133, 0.2)" },
{ title: "💦 Humedad", data: hum.values, borderColor: "#00D4FF", backgroundColor: "rgba(0, 212, 255, 0.2)" },
{ title: "⏲ Presión", data: press.values, borderColor: "#B12424", backgroundColor: "rgba(255, 0, 0, 0.2)" },
{ title: "☁️ Contaminación", data: co.values, borderColor: "#FFA500", backgroundColor: "rgba(255, 165, 0, 0.2)" }
];
];
return (
return (
<>
<CardContainer
cards={historyData.map(({ title, data, borderColor, backgroundColor }) => ({
title,
@@ -108,12 +126,16 @@ return (
/>
),
styleMode: "override",
className: "col-lg-6 col-xxs-12 d-flex flex-column align-items-center p-3 card-container",
className: "col-lg-6 col-xxs-12 d-flex flex-column align-items-center",
style: { minHeight: "250px" }
}))}
className=""
/>
);
<span className="m-0 p-0 d-flex align-items-center justify-content-center">
<FontAwesomeIcon icon={faInfoCircle} className="me-2" />
<p className="m-0 p-0">El historial muestra datos de los últimos 3 días</p>
</span>
</>
);
};
HistoryCharts.propTypes = {

2
frontend/src/components/PollutionMap.jsx
View File

@@ -72,9 +72,7 @@ const PollutionMapContent = () => {
if (!data) return <p>Datos no disponibles.</p>;
return (
<div className="p-3">
<div id="map" className='rounded-4' style={{ height: "60vh" }}></div>
</div>
);
}

50
frontend/src/components/SummaryCards.jsx
View File

@@ -39,12 +39,52 @@ const SummaryCardsContent = () => {
if (!data) return <p>Datos no disponibles.</p>;
const CardsData = [
{ id: 1, title: "Temperatura", content: "N/A", status: "Esperando datos...", titleIcon: '🌡 ' },
{ id: 2, title: "Humedad", content: "N/A", status: "Esperando datos...", titleIcon: '💦 ' },
{ id: 3, title: "Presión", content: "N/A", status: "Esperando datos...", titleIcon: '⏲ ' },
{ id: 4, title: "Nivel de CO", content: "N/A", status: "Esperando datos...", titleIcon: '☁ ' }
{
id: 1,
title: "Temperatura",
content: "N/A",
status: "Esperando datos...",
titleIcon: '🌡 ',
className: "col-12 col-md-6 col-lg-3",
link: false,
text: true
},
{
id: 2,
title: "Humedad",
content: "N/A",
status: "Esperando datos...",
titleIcon: '💦 ',
className: "col-12 col-md-6 col-lg-3",
link: false,
text: true
},
{
id: 3,
title: "Presión",
content: "N/A",
status: "Esperando datos...",
titleIcon: '⏲ ',
className: "col-12 col-md-6 col-lg-3",
link: false,
text: true
},
{
id: 4,
title: "Nivel de CO",
content: "N/A",
status: "Esperando datos...",
titleIcon: '☁ ',
className: "col-12 col-md-6 col-lg-3",
link: false,
text: true
}
];
if (data) {
let coData = data[2];
let tempData = data[1];
@@ -61,7 +101,7 @@ const SummaryCardsContent = () => {
}
return (
<CardContainer text cards={CardsData} />
<CardContainer cards={CardsData} />
);
}

51
frontend/src/components/layout/Card.jsx
View File

@@ -1,9 +1,22 @@
import PropTypes from "prop-types";
import { useState, useEffect, useRef } from "react";
import { Link } from "react-router-dom";
import "@/css/Card.css";
import { useTheme } from "@/hooks/useTheme";
const Card = ({ title, status, children, styleMode, className, titleIcon, style }) => {
const Card = ({
title,
status,
children,
styleMode,
className,
titleIcon,
style,
link,
to,
text,
marquee
}) => {
const cardRef = useRef(null);
const [shortTitle, setShortTitle] = useState(title);
const { theme } = useTheme();
@@ -25,23 +38,37 @@ const Card = ({ title, status, children, styleMode, className, titleIcon, style
return () => window.removeEventListener("resize", checkSize);
}, [title]);
return (
const cardContent = (
<div
ref={cardRef}
className={styleMode === "override" ? `${className}` :
`col-xl-3 col-sm-6 d-flex flex-column align-items-center p-3 card-container ${className}`}
className={`card p-3 w-100 ${theme} ${className ?? ""}`}
style={styleMode === "override" ? style : {}}
>
<div className={`card p-3 w-100 ${theme}`} style={styleMode === "override" ? style : {}}>
<h3 className="text-center">
{titleIcon}
{shortTitle}
</h3>
<div className="card-content">{children}</div>
{status ? <span className="status text-center mt-2">{status}</span> : null}
<div className="card-content">
{marquee ? (
<marquee>
<p className="card-text text-center">{children}</p>
</marquee>
) : text ? (
<p className="card-text text-center">{children}</p>
) : (
<div className="my-2">{children}</div>
)}
</div>
{status && <span className="status text-center mt-2">{status}</span>}
</div>
);
return link && to
? <Link to={to} style={{ textDecoration: "none" }}>{cardContent}</Link>
: cardContent;
};
Card.propTypes = {
@@ -52,10 +79,18 @@ Card.propTypes = {
className: PropTypes.string,
titleIcon: PropTypes.node,
style: PropTypes.object,
link: PropTypes.bool,
to: PropTypes.string,
text: PropTypes.bool,
};
Card.defaultProps = {
styleMode: "",
className: "",
style: {},
link: false,
to: "",
text: false,
};
export default Card;

34
frontend/src/components/layout/CardContainer.jsx
View File

@@ -1,41 +1,33 @@
import Card from "./Card.jsx";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
const CardContainer = ({ links, cards, className, text }) => {
const CardContainer = ({ cards, className }) => {
return (
<div className={`row justify-content-center g-0 ${className}`}>
<div className={`row justify-content-center g-3 ${className}`}>
{cards.map((card, index) => (
links ? (
<Link to={card.to} key={index} style={{ textDecoration: 'none' }}>
<Card title={card.title} status={card.status} styleMode={card.styleMode} className={card.className} titleIcon={card.titleIcon} style={card.style}>
{text
? <p className="card-text text-center">{card.content}</p>
: <div className="my-2">{card.content}</div>
}
<div key={index} className={card.className ?? "col-12 col-md-6 col-lg-3"}>
<Card {...card}>
{card.content}
</Card>
</Link>
) : (
<Card key={index} title={card.title} status={card.status} styleMode={card.styleMode} className={card.className} titleIcon={card.titleIcon} style={card.style}>
{text
? <p className="card-text text-center">{card.content}</p>
: <div className="my-2">{card.content}</div>
}
</Card>
)
</div>
))}
</div>
);
};
CardContainer.propTypes = {
links: Boolean,
text: Boolean,
cards: PropTypes.arrayOf(
PropTypes.shape({
title: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
status: PropTypes.string.isRequired,
className: PropTypes.string,
styleMode: PropTypes.string,
style: PropTypes.object,
titleIcon: PropTypes.node,
link: PropTypes.bool,
to: PropTypes.string,
text: PropTypes.bool,
})
).isRequired,
className: PropTypes.string,

6
frontend/src/components/layout/Header.jsx
View File

@@ -7,17 +7,13 @@ const Header = ({ subtitle }) => {
const { theme } = useTheme();
return (
<header className={`row justify-content-center text-center mb-4 ${theme}`}>
<header className={`animated-header row justify-content-center text-center mb-4 ${theme}`}>
<div className='col-xl-4 col-lg-6 col-8'>
<Link to="/" className="text-decoration-none">
<img src={`/images/logo-${theme}.png`} className='img-fluid' />
</Link>
</div>
<p className='col-12 text-center my-3'>{subtitle}</p>
{/*<nav className='d-flex justify-content-center gap-4 my-3'>
<Link to="/" className="nav-link">Inicio</Link>
<Link to="/groups" className="nav-link">Grupos</Link>
</nav> */}
</header>
);
}

8
frontend/src/css/Card.css
View File

@@ -46,6 +46,14 @@
margin-right: 10px;
}
.card.led marquee > p.card-text {
font-family: "LEDBOARD" !important;
color: rgb(38, 60, 229) !important;
font-size: 2.5em !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
p.card-text {
font-size: 2.2em;
font-weight: 600;

15
frontend/src/css/Header.css
View File

@@ -34,6 +34,21 @@ header > .subtitle {
animation: fadeIn 2s ease-in-out;
}
.animated-header {
animation: pulseHeader 6s ease-in-out infinite;
}
@keyframes pulseHeader {
0%, 100% {
opacity: 0.96;
transform: translateY(3px);
}
50% {
opacity: 1;
transform: translateY(-3px);
}
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }

66
frontend/src/css/index.css
View File

@@ -12,42 +12,52 @@
--card-gradient-secondary: #353535;
}
/* latin-ext */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v22/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
font-family: "Open Sans";
src: url('/fonts/OpenSans.ttf');
}
/* latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v22/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
font-family: "Product Sans";
src: url('/fonts/ProductSansRegular.ttf');
}
/* latin-ext */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
font-family: "Product Sans Italic";
src: url('/fonts/ProductSansItalic.ttf');
}
/* latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v22/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
font-family: "Product Sans Italic Bold";
src: url('/fonts/ProductSansBoldItalic.ttf');
}
@font-face {
font-family: "Product Sans Bold";
src: url('/fonts/ProductSansBold.ttf');
}
@font-face {
font-family: "LEDBOARD";
src: url('/fonts/LEDBOARD.ttf');
}
/* Tipografía global */
div,
label,
input,
p,
span,
a,
button {
font-family: "Open Sans", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Product Sans", sans-serif;
}

2
frontend/src/pages/Dashboard.jsx
View File

@@ -8,7 +8,7 @@ const Dashboard = () => {
const { groupId, deviceId } = useParams();
return (
<main className='container justify-content-center'>
<main className='container justify-content-center gap-3 d-flex flex-column'>
<SummaryCards groupId={groupId} deviceId={deviceId} />
<PollutionMap groupId={groupId} deviceId={deviceId} />
<HistoryCharts groupId={groupId} deviceId={deviceId} />

23
frontend/src/pages/GroupView.jsx
View File

@@ -9,8 +9,10 @@ import { useEffect, useState } from "react";
import { DataProvider } from "@/context/DataContext";
import { MapContainer, TileLayer, Marker } from 'react-leaflet';
import L from 'leaflet';
import L, { map } from 'leaflet';
import 'leaflet/dist/leaflet.css';
import PropTypes from 'prop-types';
import { text } from "@fortawesome/fontawesome-svg-core";
// Icono de marcador por defecto (porque Leaflet no lo carga bien en algunos setups)
const markerIcon = new L.Icon({
@@ -19,6 +21,7 @@ const markerIcon = new L.Icon({
iconAnchor: [12, 41],
});
const MiniMap = ({ lat, lon }) => (
<MapContainer
center={[lat, lon]}
@@ -34,6 +37,11 @@ const MiniMap = ({ lat, lon }) => (
</MapContainer>
);
MiniMap.propTypes = {
lat: PropTypes.number.isRequired,
lon: PropTypes.number.isRequired,
};
const GroupView = () => {
const { groupId } = useParams();
const { config, configLoading } = useConfig();
@@ -91,21 +99,20 @@ const GroupViewContent = () => {
return (
<CardContainer
links
cards={data.map(device => {
const latest = latestData[device.deviceId];
const gpsSensor = latest?.data[0];
const mapPreview = gpsSensor?.lat && gpsSensor?.lon
? <MiniMap lat={gpsSensor.lat} lon={gpsSensor.lon} />
: "Sin posición";
const mapPreview = <MiniMap lat={gpsSensor?.lat} lon={gpsSensor?.lon} />;
return {
title: device.deviceName,
status: `ID: ${device.deviceId}`,
content: mapPreview,
link: gpsSensor != undefined,
text: gpsSensor == undefined,
marquee: gpsSensor == undefined,
content: gpsSensor == undefined ? "SOLO VEHICULOS ELECTRICOS" : mapPreview,
to: `/groups/${groupId}/devices/${device.deviceId}`,
styleMode: "override",
className: "col-12 col-md-6 col-lg-4"
className: `col-12 col-md-6 col-lg-4 ${gpsSensor == undefined ? "led" : ""}`,
};
})}

5
frontend/src/pages/Groups.jsx
View File

@@ -60,17 +60,16 @@ const GroupsContent = ({ config }) => {
return (
<CardContainer
links
text
cards={data.map(group => {
const groupDevices = devices[group.groupId]?.data;
const deviceCount = groupDevices?.length;
return {
title: group.groupName,
link: true,
text: true,
status: `ID: ${group.groupId}`,
to: `/groups/${group.groupId}`,
styleMode: "override",
content: deviceCount != null
? (deviceCount === 1 ? "1 dispositivo" : `${deviceCount} dispositivos`)
: "Cargando dispositivos...",

6
hardware/include/WifiConnection.hpp
View File

@@ -3,7 +3,7 @@
#include <WiFi.h>
#include <PubSubClient.h>
#define SSID "iPhone de Álvaro"
#define WIFI_PASSWORD "alvarito123"
#define SSID "DIGIFIBRA-D2ys"
#define WIFI_PASSWORD "4EEATsyTcZ"
int setupWifi();
int WiFi_Init();

6
hardware/include/globals.hpp
View File

@@ -10,7 +10,13 @@
#define GPS_ID 1
#define MAX7219_ID 1
#define ECO "Solo vehiculos electricos/hibridos"
#define ALL "Todo tipo de vehiculos"
#define DEBUG
#define SENSOR 0
#define ACTUATOR 1
extern const uint32_t DEVICE_ID;
extern const int GROUP_ID;

17
hardware/include/main.hpp
View File

@@ -1,14 +1,29 @@
#pragma once
#include "globals.hpp"
#define DEVICE_ROLE SENSOR // se cambia entre SENSOR y ACTUATOR
#if DEVICE_ROLE == SENSOR
#warning "Compilando firmware para SENSOR"
#elif DEVICE_ROLE == ACTUATOR
#warning "Compilando firmware para ACTUATOR"
#else
#warning "DEVICE_ROLE no definido correctamente"
#endif
#include "JsonTools.hpp"
#include "RestClient.hpp"
#include "WifiConnection.hpp"
#include "MqttClient.hpp"
#if DEVICE_ROLE == SENSOR
#include "BME280.hpp"
#include "GPS.hpp"
#include "MAX7219.hpp"
#include "MQ7v2.hpp"
#endif
#if DEVICE_ROLE == ACTUATOR
#include "MAX7219.hpp"
#endif
struct TaskTimer
{

6
hardware/src/lib/inet/MqttClient.cpp
View File

@@ -20,14 +20,16 @@ void MQTT_OnReceived(char *topic, byte *payload, unsigned int length)
content.concat((char)payload[i]);
}
#if DEVICE_ROLE == ACTUATOR
if(content == "ECO")
{
currentMessage = "Solo vehiculos electricos/hibridos";
currentMessage = ECO;
}
else
{
currentMessage = "Todo tipo de vehiculos";
currentMessage = ALL;
}
#endif
}
void MQTT_Init(const char *MQTTServerAddress, uint16_t MQTTServerPort)

2
hardware/src/lib/inet/WifiConnection.cpp
View File

@@ -34,7 +34,7 @@ void hueCycle(uint8_t pos)
setColor(r, g, b);
}
int setupWifi()
int WiFi_Init()
{
setupLED();

63
hardware/src/main.cpp
View File

@@ -1,47 +1,67 @@
#include "main.hpp"
const uint32_t DEVICE_ID = getChipID();
const String mqttId = "CUS-" + String(DEVICE_ID, HEX);
const int GROUP_ID = 1;
const char *currentMessage = nullptr;
const String id = "CUS-" + String(DEVICE_ID, HEX);
TaskTimer matrixTimer{0, 25};
TaskTimer globalTimer{0, 60000};
TaskTimer mqttTimer{0, 5000};
#if DEVICE_ROLE == ACTUATOR
TaskTimer matrixTimer{0, 25};
const char *currentMessage = ALL;
extern MD_Parola display;
#endif
extern HTTPClient httpClient;
String response;
extern MD_Parola display;
#if DEVICE_ROLE == SENSOR
MQ7Data_t mq7Data;
BME280Data_t bme280Data;
GPSData_t gpsData;
#endif
void setup()
{
Serial.begin(115200);
#ifdef DEBUG
Serial.println("Iniciando...");
#endif
setupWifi();
WiFi_Init();
MQTT_Init(MQTT_URI, MQTT_PORT);
try
{
#if DEVICE_ROLE == SENSOR
BME280_Init();
Serial.println("Sensor BME280 inicializado");
GPS_Init();
Serial.println("Sensor GPS inicializado");
MQ7_Init();
Serial.println("Sensor MQ7 inicializado");
#endif
#if DEVICE_ROLE == ACTUATOR
MAX7219_Init();
Serial.println("Display inicializado");
writeMatrix(currentMessage);
#endif
}
catch (const char *e)
{
Serial.println(e);
}
}
void loop()
{
uint32_t now = millis();
#if DEVICE_ROLE == ACTUATOR
if (now - matrixTimer.lastRun >= matrixTimer.interval)
{
if (MAX7219_Animate())
@@ -50,9 +70,11 @@ void loop()
}
matrixTimer.lastRun = now;
}
#endif
if (now - globalTimer.lastRun >= globalTimer.interval)
{
#if DEVICE_ROLE == SENSOR
readBME280();
readGPS();
readMQ7();
@@ -62,17 +84,29 @@ void loop()
#endif
sendSensorData();
#endif
globalTimer.lastRun = now;
}
if (now - mqttTimer.lastRun >= mqttTimer.interval)
{
MQTT_Handle(id.c_str());
MQTT_Handle(mqttId.c_str());
mqttTimer.lastRun = now;
}
}
#if DEVICE_ROLE == ACTUATOR
void writeMatrix(const char *message)
{
#ifdef DEBUG
Serial.println("Escribiendo en el display...");
#endif
MAX7219_DisplayText(message, PA_LEFT, 50, 0);
}
#endif
#if DEVICE_ROLE == SENSOR
void readMQ7()
{
const float CO_THRESHOLD = 100.0f;
@@ -89,15 +123,6 @@ void readGPS()
gpsData = GPS_Read_Fake();
}
void writeMatrix(const char *message)
{
#ifdef DEBUG
Serial.println("Escribiendo en el display...");
#endif
MAX7219_DisplayText(message, PA_LEFT, 50, 0);
}
void printAllData()
{
Serial.println("---------------------");
@@ -130,7 +155,6 @@ void sendSensorData()
{
const String deviceId = String(DEVICE_ID, HEX);
// Validaciones básicas (puedes añadir más si quieres)
bool gpsValid = gpsData.lat != 0.0f && gpsData.lon != 0.0f;
bool weatherValid = bme280Data.temperature != 0.0f &&
bme280Data.humidity != 0.0f &&
@@ -156,10 +180,11 @@ void sendSensorData()
postRequest(String(API_URI) + "/batch", json, response);
#ifdef DEBUG
Serial.println("📬 Respuesta del servidor:");
Serial.println("📥 Respuesta del servidor:");
Serial.println(response);
#endif
}
#endif
uint32_t getChipID()
{