Afficher un graphique sur une page WEB

International Français
1

Bonjour à tous,

Après avoir conçu des circuits de relevé de T° et Hydrométrie, je souhaiterais réalisé un programme qui donne à disposition sur le réseaux local les données enregistré les 24h dernières heures sur une tablette/pc via une interface WEB simple de ce style :

1339×721 141 KB

Déjà je vais utiliser 1 Arduino , 1 DHT11, 1 Lecteur de carte SD.

Pour le reste,je ne sais pas ; peut être une cap Ethernet ?

800×603 53.1 KB

De +elle intégre déjà un lecteur de carte SD ou microSd

je suis à la recherche d'infos concernant la partie affichage graphique, je sais pas si le ".json" ou le "html" suffise. la plupart des tutos parle de serveur (jeedom etc..) mais je veut rester en local.

Je suis vraiment dans le brouillard pour cette partie là

Par avance merci

2

Re

Je viens de trouver un lien du blog d'eskimon:

Plus qu'à bosser dessus...

3

hello regarde du coté de l'ESP8266 qui est un microcontroleur avec wifi intégré qui peut faire également serveur, que tu peux associé à ton arduino ou même remplacer l'arduino :
ça te fait une solution tout en un afin de mesurer+historiser+grapher en créant une interface html accessible en http

plein de chose sur internet la à dessus dont :
https://www.fais-le-toi-meme.fr/fr/electronique/materiel/esp8266-arduino-wifi-2-euros

4

Bonsoir

Je continue sur mon projet

b2r:
plein de chose sur internet la à dessus dont :
https://www.fais-le-toi-meme.fr/fr/electronique/materiel/esp8266-arduino-wifi-2-euros

j'ai essayer pas mal de tuto site depuis 1 mois.. sans succes. avec le shield ou l'esp8266.

j'ai découvert le iot playground de ce que j'ai cru comprendre on peut installer chez soi le serveur sur un RPI3 j'ai malheureusement qu'un 2 et donc le boot dans le Pi ne démarre pas.

Je rmonte le post au cas où qqu'un a vu un projet avec une remonter de donnée T°, hydro ou compteur d'une SD du shield sur une page web ( meme en local) afin d'afficher un graphique comme sur mon premier post ..

Merci a vous Julien

5

Bonsoir
rien de dataillé à proposer
juste une piste : inclure le graphe en SVG dans la page web
on voit ça à petite échelle dans l'exemple AdvancedWebServer d'Arduino/ESP8266 (cf fonction drawGraph)

6

al1fch:
Bonsoir
rien de dataillé à proposer
juste une piste : inclure le graphe en SVG dans la page web

Bonsoir al1fch, j'avais essayer cette piste.

Je pense commencer a me tourner vers les Raspberry Pi, l'arduino semble pas capable à lui seul de géré ça..

Merci

7

Il est certain qu'avec un petit système Linux tout change....des solutions diverses existent pour mettre en ligne un graphe.

entre Arduino et Raspberry y a les ESP8266 et ESP32
Qu'est ce qui ne convenait pas avec un ESP8266 servant une page web comportant un SVG actualisé ?

8

Un petit graphe avec un objet javascript ?

9

Bonjour al1fch

al1fch:
Qu'est ce qui ne convenait pas avec un ESP8266 servant une page web comportant un SVG actualisé ?

Je n'ai pas réussi :-[ ....

Bonjour hbachetti

hbachetti:
Un petit graphe avec un objet javascript ?

Highcharts Demos and Examples | Highcharts

J'avais vu ça, vraiment top et ça correspond à ce que je voudrais afficher :
jsfiddle.net

Mais comment dans la partie JS remplacer ces valeurs par celle qui sont sur la SD du shield :

series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

L'arduino est capable de géré ça ?

Cordialement julien

10

Est-ce que l’appareil se connectant sur l’arduino aura accès à internet ? Si oui vous pouvez pointer dans le HTML vers des librairies HTML5 de présentation (par exemple CanvasJS ) et/ou JavaScript (genre chartJS ou jqxChart) et ne pousser que les data bien formatées dans une ‘petite’ page HTML. Sinon charger des grosses librairies depuis votre arduino va être un peu lent (mais envisageable)

Sinon pour générer la page, il faut écrire le code qui lit sur la SD et balance le contenu, pas de magie...

11

Bonjour J-M-L

J-M-L:
Est-ce que l’appareil se connectant sur l’arduino aura accès à internet ?

Oui si ça peut simplifier le schmilblick.

Sur ce générateur de "script" ( je crois),

jsfiddle.net

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>

Ce sont les librairies HTML5 de présentation dont vous parliez ? ce site de génération de page suffit ?

J-M-L:
Sinon pour générer la page, il faut écrire le code qui lit sur la SD et balance le contenu, pas de magie...

Du coup je sais enregistré des données de sonde sur une SD via un arduino, j'ai piger ( à peu près) la création de graphic sur le site mais il me manque ce petit bout de magie qui "prend" les données de la SD pour les intégré dans ce graphic....

Julien

12

il me manque ce petit bout de magie qui "prend" les données de la SD pour les intégré dans ce graphic..

qui écrit les données sur la carte SD, c'est vous non? donc vous connaissez le format sur la carte. Il "suffit" d'écrire un bout de code inverse qui va lire les lignes sur la carte SD, qui va les reformer si elles ne sont pas écrite sous la bonne forme pour la librairie graphique, et les envoyer dans la réponse HTTP

si vous ne traitez pas votre fichier qui est sur la carte SD pour excel, éventuellement écrire directement dans la carte SD ligne par ligne dans le bon format HTML vous simplifiera la vie lors de la génération de la page

13

Du coup c'est le code qui modifie ce .js :

Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2012
        }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 1000
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }
14

C'est le code ARDUINO qui génère le JAVASCRIPT. Il y a des parties fixes, et les parties variables, en particulier les options 'series' et souvent xAxis['categories'].

Si tu veux jette un oeil par ICI.

15

J'ai terminé ma petite démo de serveur WEB sur ARDUINO Ethernet :

  • affichage de graphes HighCharts générés dynamiquement
  • affichage d'une page à partir d'une template HighCharts stockée dans le code
  • affichage d'une page à partir d'une template HighCharts stockée sur carte SD

J'ai été obligé de passer sur ARDUINO MEGA pour la partie SD.

Ça marche plutôt pas mal.

640×578 57.6 KB

C'est certainement faisable sur ESP8266 et on peut s'en inspirer pour un projet sur RASBERRY PI.

Sur RASPBERRY PI il y a aussi PYTHON et DJANGO.

Il y a aussi de nombreuses possibilités avec PHP.

@+

16

Merci

C'est clair et bien détaillé. ....... je comprends enfin :slight_smile:

Avec un ESP8266 ou un ESP32 on pourrait sans doute se passer de carte SD et uploader les fichiers templates directement dans le système de fichiers SPIFFS (commande ESP Sketech Data Upload)

17

SPIFFS : je n'ai pas encore essayé mais certainement.

@+