Forum eedomus
http://forum.eedomus.fr/

Pimp ton graphique SQL Domotique
http://forum.eedomus.fr/viewtopic.php?f=57&t=4324		 Page 1 sur 2  Suivant »
Auteur:  magicbel [ 15 Juin 2016 13:30 ]
Sujet du message:  Pimp ton graphique SQL Domotique
Bonjour à tous,

Je partage ceci car je suis tombé sur les fesses quand je l'ai vu :D

http://conso.gourdet.net/tableau-de-bord.html
Auteur:  latoupie [ 15 Juin 2016 14:59 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
C'est beau et ça donne envie.. Comment on fait ça ?

Envoyé de mon PLK-L01 en utilisant Tapatalk
Auteur:  fullpower [ 15 Juin 2016 17:12 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
Classe !!
Auteur:  magicbel [ 15 Juin 2016 17:40 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
latoupie a écrit:C'est beau et ça donne envie.. Comment on fait ça ?

Envoyé de mon PLK-L01 en utilisant Tapatalk


La procédure ne change pas, on exporte les données dans une DB SQL (histoire d'eviter de payer le cloud de chez Eedomus) et ensuite on en fait ce que l'on désire.
Tout dépend des compétences web de chacun ;)

Moi c'est pas du tout mon taff, du moins pas le côté web donc forcément je ne peux etre qu'en admiration devant une si belle présentation.
Auteur:  latoupie [ 15 Juin 2016 18:23 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
Pareil [THUMBS UP SIGN]

Envoyé de mon PLK-L01 en utilisant Tapatalk
Auteur:  magicbel [ 15 Juin 2016 19:07 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
Pour ma part et pour en revenir sur mon exploitation de la db SQL, j'utilise le script qui commence a dater maintenant: viewtopic.php?f=12&t=2185

Si d'autres ont des solutions alternatives ou plus recentes, je suis à l'écoute :!: :?:
Auteur:  eric63 [ 16 Juin 2016 08:00 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
Bonjour,

C'est magnifique. J'aimerai bien avoir la même chose mais je ne pense pas être capable de le réaliser.
Auteur:  latoupie [ 16 Juin 2016 08:13 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
C'est bien le problème de beaucoup d'entre nous

Envoyé de mon PLK-L01 en utilisant Tapatalk
Auteur:  Madoma73 [ 16 Juin 2016 09:01 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
si quelqu'un réussit à contacter le gonz pour récupérer son code, je m'engage à l'adapter pour notre box :mrgreen:
Auteur:  Floman321 [ 16 Juin 2016 09:59 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
Ca a l'air super simple a faire,
il faut récupérer les images

voici le pack du site :
site.zip
Site zip
(247.65 Kio) Téléchargé 482 fois


Le code source HTML
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <meta http-equiv="content-language" content="fr" />
   <meta http-equiv="X-UA-Compatible" content="IE=9" />
   
   <title>Consommation</title>
   
   <link rel="icon" type="image/png" href="/img/favicon.png" />
   
   <link rel="stylesheet" type="text/css" href="css/main.css" />
   
   <link rel="apple-touch-icon" href="/img/icon.png" />
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
   
   <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
   <script type="text/javascript" src="js/highcharts/highcharts.src.js"></script>
   <script type="text/javascript" src="js/highcharts/modules/exporting.js"></script>
   <script type="text/javascript" src="js/main.js"></script>

</head>
<body>
   <div id="background"></div>
   <div id="header">
      <div class="boutonMenu active"><a href="tableau-de-bord.html"><img src="/img/home.png" width="110" height="110" /></a></div>
      <div class="boutonMenu "><a href="temperature.html"><img src="/img/temperatures.png" width="110" height="110" /></a></div>
      <div class="boutonMenu "><a href="consommation-electrique.html"><img src="/img/consoElec.png" width="110" height="110" /></a></div>
      <div class="boutonMenu "><a href="production-photovoltaique.html"><img src="/img/prodElec.png" width="110" height="110" /></a></div>
      <div class="boutonMenu "><a href="consommation-eau.html"><img src="/img/consoEau.png" width="110" height="110" /></a></div>
      <div class="boutonMenu "><a href="mise-en-relation.html"><img src="/img/relation.png" width="110" height="110" /></a></div>
      <div class="boutonMenu "><a href="do-it-yourself.html"><img src="/img/diy.png" width="110" height="110" /></a></div>         
   </div>
   <div id="content">
      
<h1>Tableau <span class="bold">de bord</span></h1>
<p>Dernier relevé : 13/06/2016 à 06:40</p>
<br />

<div class="tdb" style="background:url(../img/temp_grey.png) left 30px no-repeat;">
   <div class="sonde">
      <span class="value bleu bold">23.50<span class="unit">°C</span></span>
      <span class="titre bleu bold">Salon</span>
      <span class="subTitre">Minimale : </span> <span class="subValue bold">0.00<span class="unit">°C</span></span><br />
      <span class="subTitre">Maximale : </span> <span class="subValue bold">0.00<span class="unit">°C</span></span>
   </div>
   <div class="sonde">
      <span class="value bleu bold">22.63<span class="unit">°C</span></span>
      <span class="titre bleu bold">Etage</span>
      <span class="subTitre">Minimale : </span> <span class="subValue bold">0.00<span class="unit">°C</span></span><br />
      <span class="subTitre">Maximale : </span> <span class="subValue bold">0.00<span class="unit">°C</span></span>
   </div>
   <div class="sonde">
      <span class="value bleu bold">21.50<span class="unit">°C</span></span>
      <span class="titre bleu bold">Garage</span>
      <span class="subTitre">Minimale : </span> <span class="subValue bold">0.00<span class="unit">°C</span></span><br />
      <span class="subTitre">Maximale : </span> <span class="subValue bold">0.00<span class="unit">°C</span></span>
   </div>
   <div class="sonde">
      <span class="value bleu bold">15.19<span class="unit">°C</span></span>
      <span class="titre bleu bold">Extérieur</span>
      <span class="subTitre">Minimale : </span> <span class="subValue bold">0.00<span class="unit">°C</span></span><br />
      <span class="subTitre">Maximale : </span> <span class="subValue bold">0.00<span class="unit">°C</span></span>
   </div>
</div>
<div class="tdb" style="background:url(../img/conso_elec_grey.png) left 30px no-repeat;">
   <div id="conso1">
      <span class="value bleu bold">0.38<span class="unit">Kwh</span></span>
      <span class="titre bleu bold">Consommation instantanée</span>
      <span class="subTitre">Période en cours : </span> <span class="subValue bold">Heures pleines</span>
      <span class="subTitre">Intensité instantanée : </span> <span class="subValue bold">2 A</span><br />
      <div>
         <div id="switchIndex">
            <span id="switchHP" class="switch bold bleu">HP</span><br />
            <span id="switchHC" class="switch bold gris">HC</span>
         </div>
         <div id="indexConso">
            <span id="indexHP" class="index bleu bold" style="top:0px;">38 828.54<span class="unit">Kwh</span></span>
            <span id="indexHC" class="index bleu bold" style="top:40px;">28 272.42<span class="unit">Kwh</span></span>
         </div>
      </div>
   </div>
   <div id="conso2">
      <div>
         <span class="subTitre">Chauffe-eau : </span> <span class="subValue bleu bold">0.00 Kwh</span><br />
         <span class="subTitre">Chauffage : </span> <span class="subValue bleu bold">0.00 Kwh</span><br />
         <span class="subTitre">Cuisine + électroménager : </span> <span class="subValue bleu bold">0.02 Kwh</span>
      </div>
   </div>
</div>
<div class="tdb" style="background:url(../img/prod_photo_grey.png) left 30px no-repeat;">
   <div id="prod1">
      <span class="value bleu bold">0.12<span class="unit">Kwh</span></span>
      <span class="titre bleu bold">Production instantanée</span>
      <span class="subTitre">Production min du jour : </span> <span class="subValue bold">0.00 Kwh</span><br />
      <span class="subTitre">Production max du jour : </span> <span class="subValue bold">0.00 Kwh</span>
   </div>
   <div id="prod2">
      <div id="indexProd">
         <span class="index bleu bold">20 044.60<span class="unit">Kwh</span></span>
      </div>
      <div id="detailProd">
                  <span class="subTitre">Cumul journalier : </span> <span class="subValue bleu bold">0.00 Kwh</span> <br />
         <span class="subTitre">Hier : </span> <span class="subValue bleu bold">0.00 Kwh</span><br />
         <span class="subTitre">Cumul mensuel : </span> <span class="subValue bleu bold">135.12 Kwh</span><br />
         <span class="subTitre">Cumul annuel : </span> <span class="subValue bleu bold">1 528.34 Kwh</span>
      </div>
   </div>
</div>
<div class="tdb" style="background:url(../img/conso_eau_grey.png) left center no-repeat;">
   <div class="eau">
      <span class="value bleu bold">0.00<span class="unit">L</span></span>
      <span class="titre bleu bold"><img src="/img/eau_froide.png" width="16" height="22" /> Cumul journalier</span>
      <span class="subTitre">Cumul mensuel : </span> <span class="subValue bold">2.73 m<sup>3</sup></span><br />
      <span class="subTitre">Cumul annuel : </span> <span class="subValue bold">36.41 m<sup>3</sup></span>
   </div>
   <div class="eau">
      <span class="value bleu bold">0.00<span class="unit">L</span></span>
      <span class="titre bleu bold"><img src="/img/eau_chaude.png" width="16" height="22" /> Cumul journalier</span>
      <span class="subTitre">Cumul mensuel : </span> <span class="subValue bold">1.48 m<sup>3</sup></span><br />
      <span class="subTitre">Cumul annuel : </span> <span class="subValue bold">24.29 m<sup>3</sup></span>
   </div>
   <div class="eau">
      <span class="value bleu bold">0.00<span class="unit">L</span></span>
      <span class="titre bleu bold"><img src="/img/eau_mixte.png" width="16" height="22" /> Cumul journalier</span>
      <span class="subTitre">Cumul mensuel : </span> <span class="subValue bold">4.20 m<sup>3</sup></span><br />
      <span class="subTitre">Cumul annuel : </span> <span class="subValue bold">60.70 m<sup>3</sup></span>
   </div>
   <div class="eau">
      <span class="value bleu bold">0.00<span class="unit">L</span></span>
      <span class="titre bleu bold"><img src="/img/eau_mixte.png" width="16" height="22" /> Hier</span>
   </div>
</div>   </div>
   <div id="footer">
      Copyright &copy; 2016 Gourdet.net. Tous droits réservés
   </div>
   
   <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-57509274-1', 'auto');
      ga('send', 'pageview');

   </script>
</body>
</html>



Code CSS

Code : Tout sélectionner
@import url("tab.css");

* {
    border: 0 none;
    margin: 0;
    padding: 0;
    position: relative;
   text-decoration:none;
}

html {
    background-color: #e9e9e9;
   height: 100%;
}
body {
    font: 16px Arial,Helvetica,sans-serif;
   height: 100%;
    margin: 0 auto;
    min-width: 1000px;
    width: 1000px;
    z-index: 1;
}

h1 {
   font-weight:normal;
   font-size: 24px;
   color: #333333;
}

h2 {
   font-weight:normal;
   font-size: 18px;
   color: #333333;
   margin-top:10px;
}


fieldset {
    border: 1px solid #333333;
   padding: 10px;
   margin-top:10px;
}

#background {
   background: url(../img/background_content.png) center top no-repeat;
   position:fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

#header {
   text-align: center;
   border-bottom: 1px solid #B7B7B7;
   margin-bottom: 10px;
   overflow:hidden;
   padding-top:10px;
   padding-bottom:10px;
}

#footer {
   text-align: center;
   border-top: 1px solid #B7B7B7;
   padding-top: 10px;
   font-style: italic;
   font-size:12px;
   color: #B7B7B7;
   height: 20px;
   margin-top: 20px;
}

.boutonMenu {
   display:inline-block;
   margin: 10px;
   cursor:pointer;
}

.boutonMenu > a {
   display:block;
   height:100%;
}

.bold {font-weight:bold !important;}
.bleu {color: #027ed7 !important;}
.rose {color: #E00E69 !important;}
.gris {color: #8C8C8C !important;}


.tdb{
   min-height: 130px;
   padding-left: 130px;
   border-top: 1px #B7B7B7 solid;
   overflow:hidden;
}

.tdb > .sonde {
   float:left;
   padding: 5px;
   width: 177px;
   margin: 15px;
   background:url(../img/menu_shadow.png) center 60px no-repeat;
}

.tdb > .eau {
   float:left;
   padding: 5px;
   width: 177px;
   margin: 15px;
   background:url(../img/menu_shadow.png) center 60px no-repeat;
}

#prod1, #conso1 {
   float:left;
   padding: 5px;
   width: 250px;
   margin: 15px;
   margin-left: 70px;
   background:url(../img/menu_shadow.png) center 60px no-repeat;
}

#prod2 {
   float:left;
   padding: 5px;
   width: 473px;
   margin: 15px;
   margin-left: 27px;
   background:url(../img/bg_prod_photovoltaique.png) no-repeat;
   min-height:120px;
   line-height: 13px;
}

#indexProd {
   position: absolute;
   width: 198px;
   left:238px;
   top: 27px;
}

#detailProd {
   position: absolute;
   width: 260px;
   left:238px;
   top: 70px;
   line-height: 13px;
}

#conso2 > div {
   left: -250px;
    position: absolute;
    text-align: right;
    top: 218px;
    width: 250px;
   line-height: 13px;
}

#prod2 .subTitre {
    display: inline-block;
    text-align: right;
    width: 105px;
}

#prod2 .subValue {
    display: inline-block;
    text-align: right;
    width: 85px;
}

#conso2 .subTitre {
    display: inline-block;
    text-align: right;
    width: 156px;
}

#conso2 .subValue {
    display: inline-block;
    text-align: right;
    width: 80px;
}

.index {
   display: block;
   text-align:right;
   padding-right: 5px;
   font-size:32px;
}

#conso1 > div {
   background: url("../img/bg_index.png") no-repeat scroll left top transparent;
    height: 57px;
    padding-right: 5px;
    padding-top: 10px;
    width: 245px;
   margin-top: 6px;
}

#conso2 {
   float:left;
   padding: 5px;
   width: 473px;
   margin: 15px;
   margin-left: 27px;
   background:url(../img/bg_conso_electrique.png) no-repeat;
   min-height:265px;
}

span.value  {
   display: block;
   text-align: center;
   font-size:40px;
   margin:10px;
}

span.titre  {
   display: block;
   border-bottom: 2px #c9c9c9 solid;
   font-style: italic;
   margin-top: 20px;
   padding-bottom: 3px;
}

span.subTitre  {
   color: #8C8C8C;
   font-style: italic;
   font-size: 13px;
}

span.subValue  {
   color: #8C8C8C;
   font-size: 13px;
}

span.value > .unit {
   font-size:20px;
   vertical-align: 14px;
}

span.index > .unit {
   font-size:20px;
   vertical-align: 8px;
}

span.subValue > .unit {
   font-size:8px;
   vertical-align: 4px;
}

#switchIndex {
   position: absolute;
   left:11px;
   top:10px;
   cursor:pointer;
   z-index:5;
}

#indexConso {
   position: relative;
   overflow: hidden;
   height: 40px;
}

.switch {
   font-size: 12px;
}

#indexConso > .index {
   margin-bottom: 0px !important;
   position: absolute;
   right:0px;
}


.dataDisabled {
   opacity:.3;
}

#temperature {display:inline-block; vertical-align: top; }

#temperature span{display:inline-block;}

.thermo{position:relative; height:460px; width:170px; float:left; margin-right:40px;}
.thermo span.titre {position: absolute; top: 27px; left: 14px; z-index: 3; font-weight: bold; font-size: 16px;}
.thermo span.value {position: absolute; right: 16px; text-align: center; top: 27px; width: 65px; z-index: 3; font-weight: bold; font-size: 16px;}
.thermo img.fond {position:absolute; z-index:2; height:460px; width:170px; top:0; left:0;}
.thermo div {position:absolute; left:40px; bottom:20px; right:80px; z-index:1;}

.graph {
   min-width: 100%;
   height: 400px;
   margin-bottom: 20px;
}
Auteur:  Madoma73 [ 16 Juin 2016 10:08 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
le code source html ne montre pas toute la tringlerie derrière pour créer les requêtes SQL et générer les graphes.....
Auteur:  Floman321 [ 16 Juin 2016 10:10 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
En effet c'est pas déja fait dans eedomus ?
Auteur:  enr37 [ 21 Août 2016 23:55 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
Ca fait un bout de temps que j'ai lorgne dessus ce site. Il y a tout ce qui manque à l eedomus. Car le script dont la plupart se sert n'est ni optimisé ni vraiment réfléchi (désolé) pour faire de vraies études thermique et de conso. Au lieu d étudier par destination, le script travail par module. Or une lampe peut partir d un wall Plug, un greenwave ou un module. Bref, Ca fait 3 ans que je réclame une vraie box tournée énergie à la team et je pense encore la réclamer dans le vent... Dommage car tant les collectivités que les entreprises sont hyper tournée vers ce point qui est aujourd'hui le seul de la Domotique à donner un argument de retour sur investissement. Chez moi, c'est 30%d'économies sur 3 ans. Ca cause quand même. Et ça rentabilise vite une petite box de 300euros...si la team ou le responsable marketing passe par la....

Message envoyé en utilisant Tapatalk
Auteur:  c!p [ 01 Sep 2016 10:51 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
enr37 a écrit:Ca fait un bout de temps que j'ai lorgne dessus ce site. Il y a tout ce qui manque à l eedomus. Car le script dont la plupart se sert n'est ni optimisé ni vraiment réfléchi (désolé) pour faire de vraies études thermique et de conso. Au lieu d étudier par destination, le script travail par module. Or une lampe peut partir d un wall Plug, un greenwave ou un module. Bref, Ca fait 3 ans que je réclame une vraie box tournée énergie à la team et je pense encore la réclamer dans le vent... Dommage car tant les collectivités que les entreprises sont hyper tournée vers ce point qui est aujourd'hui le seul de la Domotique à donner un argument de retour sur investissement. Chez moi, c'est 30%d'économies sur 3 ans. Ca cause quand même. Et ça rentabilise vite une petite box de 300euros...si la team ou le responsable marketing passe par la....

Message envoyé en utilisant Tapatalk


Ça ne fait pas avancer le problème mais je tiens à dire que je suis entièrement d'accord !!
Auteur:  popix [ 01 Sep 2016 19:19 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
Salut à tous,

@enr37
Les vrais économies sont assez rares en domotique résidentielle, sauf à démarrer ses stats à partir de aucune gestion de rien (pas de thermostat, pas d'arrosage automatique, pas de multiprise coupe-veille, etc..) .
Il est également important de préciser les montants globaux, 30% de combien ? Perso j'ai 180 € de chauffage gaz par an maintenant, sans domotique et gestion manuelle je suis à 220 €, en faisant n'importe quoi, donc en pourcentage c’est pas mal , en absolu c'est des clopinettes.
Réduire son investissement domotique au coût de la box est également un peu tranché, on peut facilement rajouter le double ou le triple pour une install complète. Perso j'ai chauffage centrale + 3 clim donc 5 modules, mais ceux qui ont des fils pilotes , à 60 € le modules , ça commence à faire.
On va aussi rajouter le temps de config et de prise de tête, les SAV, etc...

Le gars à un agencement design et une excellente répartition des données dans la page, la lisibilité et les polices sont top, c'est simple et très efficace. Un peu de travail sur les boutons du dashboard mais sinon rien de bien violent.
Par contre pour ceux qui maîtrise pas bien, sachez qu' y a vraiment pas mal de taf pour récupérer les données de la box, les formater, les archiver en base.
Highcharts est un module de graph prêt à l'emploi mais il faut quand même bien gérer ses données pour les injecter correctement dans les graphs, et enfin le plus important avoir en tête clairement ce que l'on souhaite afficher/comparer et quelle type de rendu l'on souhaite (barre, pie, line, ,etc..)

Ce qui est génial avec ce type de dashboard et le cloud eedomus, c'est qu'en rajoutant un système de compte sécurisé, il serait assez simple de le proposer en ligne, pour n'importe quel user Eedomus.
Je connais la réponse , "mort au cloud", donc ca sera sur vos NAS ou vos RPI :)

Le point noir de l'extraction de stats sur l'eedomus ça reste les cumuls (non gérés par la box) qu'il faut se taper à la main, et donc les calculs seront forcement tronqué si l'on n'a pas une mesure toute les secondes pour être précis.
Auteur:  Egainmoney [ 03 Sep 2016 16:20 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
Salut

c'est vrai que le jour ou je peut placer mes données de ma box
sur ce genre de cloud perso je serais ravie https://meetlima.com/index.php?lang=fr

et avec ce genre de graphique fluid en plus le top
tout a l'aire bien maitriser sur ce tableau de bord c'est trop beau
Auteur:  popix [ 03 Sep 2016 20:21 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
Il te faut un nas ou un rpi avec un serveur Web, lima c est juste du stockage brut , sans service, c est bien pour ton ado ou tes parent ...

Envoyé de mon GT-P5210 en utilisant Tapatalk
Auteur:  anne-marie [ 04 Sep 2016 11:23 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
En effet, c'est vraiment top
Auteur:  Egainmoney [ 04 Sep 2016 17:33 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
popix a écrit:Il te faut un nas ou un rpi avec un serveur Web, lima c est juste du stockage brut , sans service, c est bien pour ton ado ou tes parent ...

Envoyé de mon GT-P5210 en utilisant Tapatalk


lima dans le futur serais bien capable un jour de remplacer nos Nas ou rpi que je trouve trop lourd a installer chez moi
et j'y pense plus pour l'instant pour virer dropbox et autres surtout
Auteur:  Egainmoney [ 04 Sep 2016 17:43 ]
Sujet du message:  Re: Pimp ton graphique SQL Domotique
tenez en cherchant un peu j'ai retrouver l'auteur de ce superbe travaille par la ;)
https://www.grafikart.fr/profil/52630
http://forum.snootlab.com/viewtopic.php?f=32&t=921
Page 1 sur 2 Le fuseau horaire est UTC+1 heure
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/