Je partage ceci car je suis tombé sur les fesses quand je l'ai vu
http://conso.gourdet.net/tableau-de-bord.html
par magicbel » 15 Juin 2016 13:30
par latoupie » 15 Juin 2016 14:59
par magicbel » 15 Juin 2016 17:40
latoupie a écrit:C'est beau et ça donne envie.. Comment on fait ça ?
Envoyé de mon PLK-L01 en utilisant Tapatalk
par latoupie » 15 Juin 2016 18:23
par magicbel » 15 Juin 2016 19:07
par eric63 » 16 Juin 2016 08:00
par latoupie » 16 Juin 2016 08:13
par Madoma73 » 16 Juin 2016 09:01
par Floman321 » 16 Juin 2016 09:59
site.zip<!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 © 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>@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;
}par Madoma73 » 16 Juin 2016 10:08
par Floman321 » 16 Juin 2016 10:10
par enr37 » 21 Août 2016 23:55
par c!p » 01 Sep 2016 10:51
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
par popix » 01 Sep 2016 19:19
par Egainmoney » 03 Sep 2016 16:20
par popix » 03 Sep 2016 20:21
par anne-marie » 04 Sep 2016 11:23
par Egainmoney » 04 Sep 2016 17:33
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
par Egainmoney » 04 Sep 2016 17:43
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 5 invité(s)