Je suis un fou!

Bobby59130 · Juillet 23, 2020, 1:24

Bonjour à tous,
Ceux qui accepterons de m’aider risquent d’en prendre pour un moment!
Comme le dit le titre je suis un fou. J’ai un projet un peu complexe pour mes petites connaissances. Je vous détaille le projet et vous me dite si c’est herculéen ou possible (je n’ai que ma vie pour arriver au bout…)
Déjà d’où je part :
j’ai un raspberry, j’ai connecté dessus un DHT11 et j’ai un crontab qui fait tourner un py, j’enregistre avec ce petit programme python l’heure, la température et l’humidité dans un fichier texte CSV. Pour moi ce n’est pas l’Everest mais c’est déjà bien le Killimandjaro.
Le but ultime, mais j’ai du temps, serait de relier à mon WIFI des ESP8266 disséminés dans et hors de ma maison et d’envoyer les données (en json?) dans un « cloud » pour faire des graphiques avec chart.js.
La première chose serait donc que les données soient formatées en json et non en CSV. J’ai choisi CSV parce que c’est pratique avec Excel.
Seulement je veux pouvoir les visualiser donc j’ai le petit document HTML ci dessous mais les données sont imbriquées dans la page, je voudrais pouvoir aller les chercher dans un fichier à part.
Je n’y connais pas grand chose en HTML et c’est là que ça commence à être compliqué pour moi…
(j’ai remplacé </ par ??
<!doctype html>

Line Chart??title> ??script> ??script> ??script> canvas { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } ??style> ??head>

??canvas> ??div> var timeFormat = 'DD/MM/YYYY HH:MM:SS';

var config = {
    type:    'line',
    data:    {
        datasets: [
             {
                label: "T",
                data:  [
						{x: moment('4/27/2020 19:6:0'),y: 18},
						{x: moment('4/27/2020 19:16:0'),y: 17.6},
						{x: moment('4/27/2020 21:0:0'),y: 17.4},
						{x: moment('4/27/2020 21:5:0'),y: 17.5},
						{x: moment('4/27/2020 23:30:0'),y: 17.2},
						{x: moment('4/27/2020 23:46:0'),y: 17.2},
						{x: moment('4/28/2020 0:4:0'),y: 17.1},
						{x: moment('4/28/2020 0:6:0'),y: 17.1},
						{x: moment('4/28/2020 0:8:0'),y: 17.1},
						{x: moment('4/28/2020 0:10:0'),y: 17.1},
						{x: moment('4/28/2020 0:12:0'),y: 17.1},
						{x: moment('4/28/2020 0:14:0'),y: 17.1},
						{x: moment('4/28/2020 0:15:0'),y: 17.2},
						{x: moment('4/28/2020 0:16:0'),y: 17.1},
						{x: moment('4/28/2020 0:17:0'),y: 17.1},
						{x: moment('4/28/2020 0:20:0'),y: 17.2},
						{x: moment('4/28/2020 0:30:0'),y: 17.1},
						{x: moment('4/28/2020 0:40:0'),y: 17.1},
						{x: moment('4/28/2020 0:50:0'),y: 17.1},
						{x: moment('4/28/2020 1:0:0'),y: 17.1},
						{x: moment('4/28/2020 1:10:0'),y: 17.1},
						{x: moment('4/28/2020 1:20:0'),y: 17.1},
						{x: moment('4/28/2020 1:30:0'),y: 17.1},
						{x: moment('4/28/2020 1:40:0'),y: 17.1},
						{x: moment('4/28/2020 1:50:0'),y: 17.1},
						{x: moment('4/28/2020 2:0:0'),y: 17.1},
						{x: moment('4/28/2020 2:10:0'),y: 17},
						{x: moment('4/28/2020 2:20:0'),y: 17.1},
						{x: moment('4/28/2020 2:30:0'),y: 17},
						{x: moment('4/28/2020 2:40:0'),y: 17.1},
						{x: moment('4/28/2020 2:50:0'),y: 17},
						{x: moment('4/28/2020 3:0:0'),y: 17.1},
						{x: moment('4/28/2020 3:10:0'),y: 17.1},
						{x: moment('4/28/2020 3:20:0'),y: 17.1},
						{x: moment('4/28/2020 3:30:0'),y: 17},
						{x: moment('4/28/2020 3:40:0'),y: 17.1},
						{x: moment('4/28/2020 3:50:0'),y: 17},
						{x: moment('4/28/2020 4:0:0'),y: 17},
						{x: moment('4/28/2020 4:10:0'),y: 17},
						{x: moment('4/28/2020 4:20:0'),y: 17},
						{x: moment('4/28/2020 4:30:0'),y: 17},
						{x: moment('4/28/2020 4:40:0'),y: 17},
						{x: moment('4/28/2020 4:50:0'),y: 17},
						{x: moment('4/28/2020 5:0:0'),y: 17},
						{x: moment('4/28/2020 5:10:0'),y: 17},
						{x: moment('4/28/2020 5:20:0'),y: 17},
						{x: moment('4/28/2020 5:30:0'),y: 17},
						{x: moment('4/28/2020 5:40:0'),y: 17},
						{x: moment('4/28/2020 5:50:0'),y: 17},
						{x: moment('4/28/2020 6:0:0'),y: 17},
						{x: moment('4/28/2020 6:10:0'),y: 17},
						{x: moment('4/28/2020 6:20:0'),y: 17},
						{x: moment('4/28/2020 6:30:0'),y: 17},
						{x: moment('4/28/2020 6:40:0'),y: 17.1},
						{x: moment('4/28/2020 6:50:0'),y: 17.1},
						{x: moment('4/28/2020 7:0:0'),y: 17},
						{x: moment('4/28/2020 7:10:0'),y: 17},
						{x: moment('4/28/2020 7:20:0'),y: 17},
						{x: moment('4/28/2020 7:30:0'),y: 17.1},
						{x: moment('4/28/2020 7:41:0'),y: 17.1},
						{x: moment('4/28/2020 7:50:0'),y: 17.1},
						{x: moment('4/28/2020 8:0:0'),y: 17.1},
						{x: moment('4/28/2020 8:10:0'),y: 17.1},
						{x: moment('4/28/2020 8:20:0'),y: 17.1},
						{x: moment('4/28/2020 8:30:0'),y: 17.1},
						{x: moment('4/28/2020 8:40:0'),y: 19.8},
						{x: moment('4/28/2020 9:0:0'),y: 19.4},
						{x: moment('4/28/2020 9:10:0'),y: 19.2},
						{x: moment('4/28/2020 9:20:0'),y: 19.2},
						{x: moment('4/28/2020 9:30:0'),y: 19.2},
						{x: moment('4/28/2020 9:40:0'),y: 19.1},
						{x: moment('4/28/2020 9:50:0'),y: 19.1},
						{x: moment('4/28/2020 10:0:0'),y: 19},
						{x: moment('4/28/2020 10:10:0'),y: 19},
						{x: moment('4/28/2020 10:20:0'),y: 19},
						{x: moment('4/28/2020 10:30:0'),y: 19},
						{x: moment('4/28/2020 10:40:0'),y: 18.9},
						{x: moment('4/28/2020 10:50:0'),y: 19},
						{x: moment('4/28/2020 11:0:0'),y: 18.9},
						{x: moment('4/28/2020 11:10:0'),y: 18.9},
						{x: moment('4/28/2020 11:20:0'),y: 18.9},
						{x: moment('4/28/2020 11:30:0'),y: 18.9},
						{x: moment('4/28/2020 11:40:0'),y: 18.9},
						{x: moment('4/28/2020 11:50:0'),y: 18.9},
						{x: moment('4/28/2020 12:0:0'),y: 18.8},
						{x: moment('4/28/2020 12:10:0'),y: 18.8},
						{x: moment('4/28/2020 12:20:0'),y: 18.8}
						],
                fill:  false,
                borderColor: 'blue'
            },{
				label: "HR",
				data:[
						{x: moment('4/27/2020 19:6:0'),y: 82.8},
						{x: moment('4/27/2020 19:16:0'),y: 85.2},
						{x: moment('4/27/2020 21:0:0'),y: 73.6},
						{x: moment('4/27/2020 21:5:0'),y: 73.4},
						{x: moment('4/27/2020 23:30:0'),y: 69.5},
						{x: moment('4/27/2020 23:46:0'),y: 68.8},
						{x: moment('4/28/2020 0:4:0'),y: 68.8},
						{x: moment('4/28/2020 0:6:0'),y: 68.4},
						{x: moment('4/28/2020 0:8:0'),y: 68.2},
						{x: moment('4/28/2020 0:10:0'),y: 68.6},
						{x: moment('4/28/2020 0:12:0'),y: 68.8},
						{x: moment('4/28/2020 0:14:0'),y: 68.8},
						{x: moment('4/28/2020 0:15:0'),y: 69},
						{x: moment('4/28/2020 0:16:0'),y: 69.1},
						{x: moment('4/28/2020 0:17:0'),y: 69.1},
						{x: moment('4/28/2020 0:20:0'),y: 69.5},
						{x: moment('4/28/2020 0:30:0'),y: 69.9},
						{x: moment('4/28/2020 0:40:0'),y: 69.7},
						{x: moment('4/28/2020 0:50:0'),y: 70.4},
						{x: moment('4/28/2020 1:0:0'),y: 71},
						{x: moment('4/28/2020 1:10:0'),y: 71.1},
						{x: moment('4/28/2020 1:20:0'),y: 71.4},
						{x: moment('4/28/2020 1:30:0'),y: 71.2},
						{x: moment('4/28/2020 1:40:0'),y: 70.8},
						{x: moment('4/28/2020 1:50:0'),y: 70.8},
						{x: moment('4/28/2020 2:0:0'),y: 70.7},
						{x: moment('4/28/2020 2:10:0'),y: 70.1},
						{x: moment('4/28/2020 2:20:0'),y: 70.7},
						{x: moment('4/28/2020 2:30:0'),y: 71.4},
						{x: moment('4/28/2020 2:40:0'),y: 71.6},
						{x: moment('4/28/2020 2:50:0'),y: 72},
						{x: moment('4/28/2020 3:0:0'),y: 72.9},
						{x: moment('4/28/2020 3:10:0'),y: 73.5},
						{x: moment('4/28/2020 3:20:0'),y: 74.2},
						{x: moment('4/28/2020 3:30:0'),y: 75.1},
						{x: moment('4/28/2020 3:40:0'),y: 75.7},
						{x: moment('4/28/2020 3:50:0'),y: 77},
						{x: moment('4/28/2020 4:0:0'),y: 77.6},
						{x: moment('4/28/2020 4:10:0'),y: 78.4},
						{x: moment('4/28/2020 4:20:0'),y: 79.2},
						{x: moment('4/28/2020 4:30:0'),y: 79.4},
						{x: moment('4/28/2020 4:40:0'),y: 79.8},
						{x: moment('4/28/2020 4:50:0'),y: 80.1},
						{x: moment('4/28/2020 5:0:0'),y: 80.3},
						{x: moment('4/28/2020 5:10:0'),y: 80.9},
						{x: moment('4/28/2020 5:20:0'),y: 80.9},
						{x: moment('4/28/2020 5:30:0'),y: 81.2},
						{x: moment('4/28/2020 5:40:0'),y: 81.3},
						{x: moment('4/28/2020 5:50:0'),y: 81.1},
						{x: moment('4/28/2020 6:0:0'),y: 81.3},
						{x: moment('4/28/2020 6:10:0'),y: 81.4},
						{x: moment('4/28/2020 6:20:0'),y: 81.4},
						{x: moment('4/28/2020 6:30:0'),y: 81.7},
						{x: moment('4/28/2020 6:40:0'),y: 81.7},
						{x: moment('4/28/2020 6:50:0'),y: 81.8},
						{x: moment('4/28/2020 7:0:0'),y: 81.9},
						{x: moment('4/28/2020 7:10:0'),y: 82},
						{x: moment('4/28/2020 7:20:0'),y: 82.1},
						{x: moment('4/28/2020 7:30:0'),y: 81.8},
						{x: moment('4/28/2020 7:41:0'),y: 81.5},
						{x: moment('4/28/2020 7:50:0'),y: 81.5},
						{x: moment('4/28/2020 8:0:0'),y: 81.7},
						{x: moment('4/28/2020 8:10:0'),y: 81.8},
						{x: moment('4/28/2020 8:20:0'),y: 81.7},
						{x: moment('4/28/2020 8:30:0'),y: 81.8},
						{x: moment('4/28/2020 8:40:0'),y: 93.6},
						{x: moment('4/28/2020 9:0:0'),y: 81.2},
						{x: moment('4/28/2020 9:10:0'),y: 82.4},
						{x: moment('4/28/2020 9:20:0'),y: 83.3},
						{x: moment('4/28/2020 9:30:0'),y: 83.5},
						{x: moment('4/28/2020 9:40:0'),y: 82.6},
						{x: moment('4/28/2020 9:50:0'),y: 83.2},
						{x: moment('4/28/2020 10:0:0'),y: 82.7},
						{x: moment('4/28/2020 10:10:0'),y: 82.5},
						{x: moment('4/28/2020 10:20:0'),y: 83.1},
						{x: moment('4/28/2020 10:30:0'),y: 82.9},
						{x: moment('4/28/2020 10:40:0'),y: 84.4},
						{x: moment('4/28/2020 10:50:0'),y: 83.2},
						{x: moment('4/28/2020 11:0:0'),y: 83.7},
						{x: moment('4/28/2020 11:10:0'),y: 83.9},
						{x: moment('4/28/2020 11:20:0'),y: 84.7},
						{x: moment('4/28/2020 11:30:0'),y: 84.5},
						{x: moment('4/28/2020 11:40:0'),y: 84.8},
						{x: moment('4/28/2020 11:50:0'),y: 84.9},
						{x: moment('4/28/2020 12:0:0'),y: 84.8},
						{x: moment('4/28/2020 12:10:0'),y: 85.2},
						{x: moment('4/28/2020 12:20:0'),y: 85.2}
						],
						fill : false,
						borderColor:'red'
						}
        ]
    },
    options: {
        responsive: true,
        title:      {
            display: true,
            text:    "Chart.js Time Scale"
        },
        scales:     {
            xAxes: [{
                type:       "time",
                time:       {
                    format: timeFormat,
                    tooltipFormat: 'll'
                },
                scaleLabel: {
                    display:     true,
                    labelString: 'Date'
                }
            }],
            yAxes: [{
                scaleLabel: {
                    display:     true,
                    labelString: 'value'
                }
            }]
        }
    }
};

window.onload = function () {
    var ctx       = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx, config);
};

??script>

??body>

??html>

bof · Juillet 24, 2020, 5:28

hello,

pour ce type de projet il y a une solution a partir de logiciels existants qui permet de consulter les sensors avec un navigateur web.
le principe c’est de centraliser les mesures dans une base de données ( influxdb ) de mettre a jour ces infos avec mosquito ( utilitaire MQTT ) et de les lire avec chronograf qui permet en plus la consultation par un navigateur web.
pour les esp8266 ( pour cette manip j’utilise les petits sp1 a 2€ ) en les programmant avec l’IDE de arduino il existe les bibliotheques pour le wifi et pour MQTT

même si tu veux développer toi même ce type d’application l’utilisation de MQTT et d’un base de donnée te simplifiera la vie.

source: Raspberry Pi IoT: Sensors, InfluxDB, MQTT, and Grafana - DZone
https://www.framboise314.fr/utiliser-le-protocole-mqtt-pour-communiquer-des-donnees-entre-2-raspberry-pi/

PS: pour afficher du code sur ce forum il faut 3 quotes inversées ( Alt-Gr + touche è7) avant et après…

jelopo · Juillet 24, 2020, 8:44

Bonjour,

Longtemps, j’ai voulu faire moi même mes graphiques à la main. Et je ne jamais rien fait jusqu’au bout, car trop long pour moi… Un jour j’ai découvert le couple influxdb+grafana. Et là tout à changé, c’est facile, c’est beau c’est pratique.
Un lien au hasard:

A+

Bobby59130 · Juillet 26, 2020, 9:15

Merci de votre réponse et de vos conseils, je vais regarder ça de près, ça a l’air très bien.