From 43f5b307f5e36a2ea694fe7162cb6514770ec2e2 Mon Sep 17 00:00:00 2001 From: firdaous elhalafi Date: Wed, 10 May 2023 01:22:39 +0200 Subject: [PATCH 1/5] ajout du button conncter ou deconnecter --- src/routes/rout.jsx | 63 ++++++++++++++++++++++++++++----------------- 1 file changed, 39 insertions(+), 24 deletions(-) diff --git a/src/routes/rout.jsx b/src/routes/rout.jsx index 9537193..4f6a097 100644 --- a/src/routes/rout.jsx +++ b/src/routes/rout.jsx @@ -9,40 +9,50 @@ export default function Root() { const topic = 'value/#'; const client = mqtt.connect(brokerUrl); + const [isConnected, setIsConnected] = useState(false); + + useEffect(() => { - client.on('connect', () => { - console.log(`Connected to MQTT broker ${brokerUrl}`); - client.subscribe(topic, (err) => { - if (err) { - console.error('Error subscribing to topic', err); - } else { - console.log(`Subscribed to topic ${topic}`); - } + if(isConnected) { + client.on('connect', () => { + console.log(`Connected to MQTT broker ${brokerUrl}`); + client.subscribe(topic, (err) => { + if (err) { + console.error('Error subscisConnectedribing to topic', err); + } else { + console.log(`Subscribed to topic ${topic}`); + } + }); }); - }); - client.on('message', (topic, message) => { - const sensorData = JSON.parse(message.toString()); - setSensors((prevSensors) => { - const existingSensor = prevSensors.find((sensor) => sensor.id === sensorData.id); - if (existingSensor) { - return prevSensors.map((sensor) => (sensor.id === sensorData.id ? sensorData : sensor)); - } else { - return [...prevSensors, sensorData]; - } + client.on('message', (topic, message) => { + const sensorData = JSON.parse(message.toString()); + setSensors((prevSensors) => { + const existingSensor = prevSensors.find((sensor) => sensor.id === sensorData.id); + if (existingSensor) { + return prevSensors.map((sensor) => (sensor.id === sensorData.id ? sensorData : sensor)); + } else { + return [...prevSensors, sensorData]; + } + }); + console.log(`Received sensor data from topic ${topic}:`, sensorData); }); - console.log(`Received sensor data from topic ${topic}:`, sensorData); - }); + } - return () => { - client.end(); - }; - }, [brokerUrl]); // effect will run whenever brokerUrl changes + }, [brokerUrl], isConnected); // effect will run whenever brokerUrl changes const handleUrlChange = (e) => { const url = e.target.value; setBrokerUrl(url); }; + const handleDisconnect = () => { + client.end(); + setIsConnected(false); + }; + + const handleConnect = () => { + setIsConnected(true); + }; return ( <> @@ -85,6 +95,11 @@ export default function Root() {

URL :

+ {isConnected ? ( + + ) : ( + + )}
-- GitLab From d00ecb4e993576814da96e0adb1fc9bf2b49af5a Mon Sep 17 00:00:00 2001 From: firdaous elhalafi Date: Wed, 10 May 2023 01:53:09 +0200 Subject: [PATCH 2/5] ajout de traitement liees a connecter et deconnecter le broker --- src/routes/rout.jsx | 37 +++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/src/routes/rout.jsx b/src/routes/rout.jsx index 4f6a097..8c7a5de 100644 --- a/src/routes/rout.jsx +++ b/src/routes/rout.jsx @@ -7,16 +7,29 @@ export default function Root() { const [brokerUrl, setBrokerUrl] = useState(''); const topic = 'value/#'; - const client = mqtt.connect(brokerUrl); + const [client, setClient] = useState(null); + //const client = mqtt.connect(brokerUrl); const [isConnected, setIsConnected] = useState(false); + const handleUrlChange = (e) => { + const url = e.target.value; + setBrokerUrl(url); + }; - useEffect(() => { + const handleDisconnect = () => { if(isConnected) { - client.on('connect', () => { + client.end(); + setIsConnected(false); + } + }; + + const handleConnect = () => { + if(!isConnected) { + const newClient = mqtt.connect(brokerUrl); + newClient.on('connect', () => { console.log(`Connected to MQTT broker ${brokerUrl}`); - client.subscribe(topic, (err) => { + newClient.subscribe(topic, (err) => { if (err) { console.error('Error subscisConnectedribing to topic', err); } else { @@ -25,7 +38,7 @@ export default function Root() { }); }); - client.on('message', (topic, message) => { + newClient.on('message', (topic, message) => { const sensorData = JSON.parse(message.toString()); setSensors((prevSensors) => { const existingSensor = prevSensors.find((sensor) => sensor.id === sensorData.id); @@ -37,20 +50,8 @@ export default function Root() { }); console.log(`Received sensor data from topic ${topic}:`, sensorData); }); + setClient(newClient); } - - }, [brokerUrl], isConnected); // effect will run whenever brokerUrl changes - - const handleUrlChange = (e) => { - const url = e.target.value; - setBrokerUrl(url); - }; - const handleDisconnect = () => { - client.end(); - setIsConnected(false); - }; - - const handleConnect = () => { setIsConnected(true); }; -- GitLab From 0e55014ac503739c05c7499fba2acec2efa51ddd Mon Sep 17 00:00:00 2001 From: firdaous elhalafi Date: Wed, 10 May 2023 03:08:11 +0200 Subject: [PATCH 3/5] affichage des liste des sensors qu'on recoit --- public/sensors_data.json | 61 ---------------------------------------- src/index.module.css | 6 ++++ src/routes/rout.jsx | 13 +++++---- 3 files changed, 13 insertions(+), 67 deletions(-) delete mode 100644 public/sensors_data.json diff --git a/public/sensors_data.json b/public/sensors_data.json deleted file mode 100644 index cfb97d1..0000000 --- a/public/sensors_data.json +++ /dev/null @@ -1,61 +0,0 @@ -[ - { - "id": 1234, - "name": "Température Bureau", - "type": "TEMPERATURE", - "data": { - "values": [23, 23, 22, 21, 23, 23, 23, 25, 25], - "labels": [ - "2023-01-19T08:00:00.000Z", - "2023-01-19T09:00:00.000Z", - "2023-01-19T10:00:00.000Z", - "2023-01-19T11:00:00.000Z", - "2023-01-19T12:00:00.000Z", - "2023-01-19T13:00:00.000Z", - "2023-01-19T14:00:00.000Z", - "2023-01-19T15:00:00.000Z", - "2023-01-19T16:00:00.000Z" - ] - } - }, - { - "id": 10245, - "name": "Porte du Garage", - "type": "DOOR", - "data": { - "value": 0 - } - }, - { - "id": 2222, - "name": "Ventilateur Ordinateur Bureau", - "type": "FAN_SPEED", - "data": { - "values": [1073, 1800, 2299, 2176, 1899, 1400], - "labels": [ - "2023-01-19T10:00:00.000Z", - "2023-01-19T10:05:00.000Z", - "2023-01-19T10:10:00.000Z", - "2023-01-19T10:15:00.000Z", - "2023-01-19T10:20:00.000Z", - "2023-01-19T10:25:00.000Z" - ] - } - }, - { - "id": 2233, - "name": "Capteur Humidité salle sport", - "type": "HUMIDITY", - "data": { - "values": [28, 34, 19, 25, 48, 34], - "labels": [ - "2023-02-19T10:00:00.000Z", - "2023-02-19T10:05:00.000Z", - "2023-02-19T10:10:00.000Z", - "2023-02-19T10:15:00.000Z", - "2023-02-19T10:20:00.000Z", - "2023-02-19T10:25:00.000Z" - ] - } - } -] diff --git a/src/index.module.css b/src/index.module.css index a85e609..7870459 100644 --- a/src/index.module.css +++ b/src/index.module.css @@ -113,3 +113,9 @@ nav li a:hover { grid-row: 2 / 3; grid-column: 2 / 3; } +.sensors { + color: #ff5900; +} +.mqtt { + font-weight: normal; +} \ No newline at end of file diff --git a/src/routes/rout.jsx b/src/routes/rout.jsx index 8c7a5de..d9ed437 100644 --- a/src/routes/rout.jsx +++ b/src/routes/rout.jsx @@ -41,14 +41,15 @@ export default function Root() { newClient.on('message', (topic, message) => { const sensorData = JSON.parse(message.toString()); setSensors((prevSensors) => { - const existingSensor = prevSensors.find((sensor) => sensor.id === sensorData.id); + const existingSensor = prevSensors.find((sensor) => sensor.name === sensorData.name); if (existingSensor) { - return prevSensors.map((sensor) => (sensor.id === sensorData.id ? sensorData : sensor)); + const updatedSensors = [...prevSensors]; + updatedSensors[existingSensor] = sensorData; + return updatedSensors; } else { return [...prevSensors, sensorData]; } }); - console.log(`Received sensor data from topic ${topic}:`, sensorData); }); setClient(newClient); } @@ -66,7 +67,7 @@ export default function Root() {
-

Sensors

+

Sensors

-

URL :

- +

MQTT Brocker:

+ {isConnected ? ( ) : ( -- GitLab From 27b09ccca176fbc23ba673a535697c85fa86af8a Mon Sep 17 00:00:00 2001 From: firdaous elhalafi Date: Fri, 12 May 2023 23:09:19 +0200 Subject: [PATCH 4/5] ajout des classe sensor --- src/routes/rout.jsx | 15 ++++++-- src/routes/sensor.jsx | 3 ++ src/sensor.js | 81 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 97 insertions(+), 2 deletions(-) create mode 100644 src/sensor.js diff --git a/src/routes/rout.jsx b/src/routes/rout.jsx index d9ed437..ec652f1 100644 --- a/src/routes/rout.jsx +++ b/src/routes/rout.jsx @@ -1,11 +1,14 @@ import styles from "../index.module.css"; -import React, { useState, useEffect } from 'react'; -import { Outlet, Link, useLoaderData } from "react-router-dom"; +import React, { useState} from 'react'; +import { Outlet, Link} from "react-router-dom"; import mqtt from 'precompiled-mqtt'; +import {creerSensor, existSensor, updateSensor} from '../sensor.js'; + export default function Root() { const [sensors, setSensors] = useState([]); const [brokerUrl, setBrokerUrl] = useState(''); + const topic = 'value/#'; const [client, setClient] = useState(null); //const client = mqtt.connect(brokerUrl); @@ -40,6 +43,14 @@ export default function Root() { newClient.on('message', (topic, message) => { const sensorData = JSON.parse(message.toString()); + const name = sensorData.name; + const data = sensorData.value; + console.log(sensorData); + if(existSensor(name)){ + updateSensor(name, data); + }else { + creerSensor(sensorData); + } setSensors((prevSensors) => { const existingSensor = prevSensors.find((sensor) => sensor.name === sensorData.name); if (existingSensor) { diff --git a/src/routes/sensor.jsx b/src/routes/sensor.jsx index acfed8a..04e8720 100644 --- a/src/routes/sensor.jsx +++ b/src/routes/sensor.jsx @@ -1,6 +1,9 @@ import styles from "../index.module.css"; +import Root from "./rout.jsx"; +import {useEffect} from "react"; export default function Sensor(){ + useEffect(()=>console.log(Root.sensors)) const sensor = { name: "Exemple sensor name", type: "PERCENT", diff --git a/src/sensor.js b/src/sensor.js new file mode 100644 index 0000000..14731c7 --- /dev/null +++ b/src/sensor.js @@ -0,0 +1,81 @@ +export const SensorType = + { + 'TEMPERATURE': 0, + 'PERCENT': 1, + 'OPEN_CLOSE': 2, + 'ON_OFF': 3 + }; +export class Sensor{ + #id; + #name; + #data; + constructor(id, name, data) { + this.#id = id; + this.#name = name; + this.#data = data; + } + get id(){ + return this.#id; + } + set id(id){ + this.#id = id; + } + get name(){ + return this.#name; + } + set name(name){ + this.#name = name; + } + get data(){ + return this.#data; + } + set data(data){ + this.#data = data; + } +} +export class Temperature extends Sensor{ + +} +export class Percent extends Sensor{ + +} +export class Open_Close extends Sensor{ + +} +export class On_Off extends Sensor{ + +} +export let Sensors = []; +export function creerSensor(donnes){ + let S; + let type = SensorType[donnes.type]; + switch (type){ + case SensorType.TEMPERATURE: + S = new Temperature(donnes.id, donnes.name, [donnes.value]); + break; + case SensorType.PERCENT: + S = new Percent(donnes.id, donnes.name, [donnes.value]); + break; + case SensorType.OPEN_CLOSE: + S = new Open_Close(donnes.id, donnes.name, [donnes.value]); + break; + case SensorType.ON_OFF: + S = new On_Off(donnes.id, donnes.name, [donnes.value]); + break; + default: + throw new Error(`Type de capteur : ${donnes.type} n'est pas reconnu`); + } + Sensors.push(S); + return S; +} +export function existSensor(name) { + return Sensors.filter(s => s.name === name).length > 0; +} +export function updateSensor(name, value){ + const sensor = Sensors.find(s => s.name === name); + sensor.data.push(value); + +} +export function getSensor(name) { + return Sensors.find(s => s.name === name).data; +} \ No newline at end of file -- GitLab From 006f0d1b06e4daf8a05d774ec14a083a2f1e4f64 Mon Sep 17 00:00:00 2001 From: firdaous elhalafi Date: Sat, 13 May 2023 00:56:51 +0200 Subject: [PATCH 5/5] affichage de la derniere valeur + l'historique des donnees des capteurs --- src/routes/rout.jsx | 4 ++-- src/routes/sensor.jsx | 12 ++++++++---- src/sensor.js | 35 +++++++++++++++++++---------------- 3 files changed, 29 insertions(+), 22 deletions(-) diff --git a/src/routes/rout.jsx b/src/routes/rout.jsx index ec652f1..6973314 100644 --- a/src/routes/rout.jsx +++ b/src/routes/rout.jsx @@ -73,8 +73,8 @@ export default function Root() {
diff --git a/src/routes/sensor.jsx b/src/routes/sensor.jsx index 04e8720..eb2ef6b 100644 --- a/src/routes/sensor.jsx +++ b/src/routes/sensor.jsx @@ -1,9 +1,11 @@ import styles from "../index.module.css"; import Root from "./rout.jsx"; import {useEffect} from "react"; +import { useParams } from 'react-router-dom'; +import {getSensor, getLastValue} from '../sensor.js'; export default function Sensor(){ - useEffect(()=>console.log(Root.sensors)) + const { sensorName } = useParams(); const sensor = { name: "Exemple sensor name", type: "PERCENT", @@ -12,14 +14,16 @@ export default function Sensor(){ return(
-

{sensor.name}

+

{sensorName}

Valeur actuelle

- {sensor.value} + {getLastValue(sensorName)}

Historique

- + {getSensor(sensorName).map((value, index) => ( +
{value}
+ ))}
); diff --git a/src/sensor.js b/src/sensor.js index 14731c7..53f6a93 100644 --- a/src/sensor.js +++ b/src/sensor.js @@ -6,19 +6,13 @@ export const SensorType = 'ON_OFF': 3 }; export class Sensor{ - #id; #name; #data; - constructor(id, name, data) { - this.#id = id; + #last_value; + constructor(name, data) { this.#name = name; this.#data = data; - } - get id(){ - return this.#id; - } - set id(id){ - this.#id = id; + this.#last_value = data[0]; } get name(){ return this.#name; @@ -30,7 +24,13 @@ export class Sensor{ return this.#data; } set data(data){ - this.#data = data; + this.#data.push(data); + } + get last_value(){ + return this.#last_value; + } + set last_value(last_value){ + this.#last_value = last_value; } } export class Temperature extends Sensor{ @@ -51,16 +51,16 @@ export function creerSensor(donnes){ let type = SensorType[donnes.type]; switch (type){ case SensorType.TEMPERATURE: - S = new Temperature(donnes.id, donnes.name, [donnes.value]); + S = new Temperature(donnes.name, [donnes.value]); break; case SensorType.PERCENT: - S = new Percent(donnes.id, donnes.name, [donnes.value]); + S = new Percent(donnes.name, [donnes.value]); break; case SensorType.OPEN_CLOSE: - S = new Open_Close(donnes.id, donnes.name, [donnes.value]); + S = new Open_Close(donnes.name, [donnes.value]); break; case SensorType.ON_OFF: - S = new On_Off(donnes.id, donnes.name, [donnes.value]); + S = new On_Off(donnes.name, [donnes.value]); break; default: throw new Error(`Type de capteur : ${donnes.type} n'est pas reconnu`); @@ -72,10 +72,13 @@ export function existSensor(name) { return Sensors.filter(s => s.name === name).length > 0; } export function updateSensor(name, value){ - const sensor = Sensors.find(s => s.name === name); + const sensor = Sensors.find(s => s.name === name) sensor.data.push(value); - + sensor.last_value = value; } export function getSensor(name) { return Sensors.find(s => s.name === name).data; +} +export function getLastValue(name) { + return Sensors.find(s => s.name === name).last_value; } \ No newline at end of file -- GitLab