Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=1280, user-scalable=yes" >
<meta name="format-detection" content="telephone=no" >
<meta http-equiv="imagetoolbar" content="no">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title>DHT22 Temperature Extérieure</title>
<!-- Le styles -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap-responsive.min.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 150px;
padding-bottom: 40px;
background-color:#4B4BFF;
}
h3{font-familly: verdana;
color: red}
</style>
</head>
<body>
<script type="text/javascript">
// return everything after the question mark
function GetUrlParameter() {
idx = window.location.href.indexOf("?");
if( idx < 0 ) return "";
return window.location.href.substring(idx+1);
}
urlParameter = GetUrlParameter();
</script>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<h3>Temperature Exterieure</h3>
<div class="nav-collapse collapse">
<ul class="nav">
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Temperature Exterieure</li>
<script tyep="text/javascript">
var qparser = document.createElement('a');
qparser.href = window.location.href;
var frame1url = qparser.protocol + "//" + qparser.host + qparser.pathname;
document.write('<li><a href="' + frame1url + '?3h">Dernières 3h</a></li>');
document.write('<li><a href="' + frame1url + '?24h">Dernières 24h</a></li>');
document.write('<li><a href="' + frame1url + '?48h">Dernières 48h</a></li>');
document.write('<li><a href="' + frame1url + '?1w">Semaine</a></li>');
document.write('<li><a href="' + frame1url + '?1m">Mois</a></li>');
document.write('<li><a href="' + frame1url + '?3m">3 derniers mois</a></li>');
document.write('<li><a href="' + frame1url + '?1y">Année dernière</a></li>');
</script>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span10">
<div id="content">
</div>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
<!-- Le javascript
================================================== -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js" charset="UTF-8"></script>
<!--
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/2.3.1/highcharts.js" charset="UTF-8"></script>
-->
<script type="text/javascript" src="/charts/js/highcharts.js" charset="UTF-8"></script>
<script type="text/javascript" src="/charts/js/themes/gray.js"></script>
<script type="text/javascript">
var all;
function computeSunrise(e, t) {
var n = 13.408056;
var r = 52.518611;
var i = 90.83333333333333;
var s = Math.PI / 180;
var o = 180 / Math.PI;
var u = n / 15;
var a;
if (t) {
a = e + (6 - u) / 24
} else {
a = e + (18 - u) / 24
}
M = .9856 * a - 3.289;
L = M + 1.916 * Math.sin(M * s) + .02 * Math.sin(2 * M * s) + 282.634;
if (L > 360) {
L = L - 360
} else if (L < 0) {
L = L + 360
}
RA = o * Math.atan(.91764 * Math.tan(L * s));
if (RA > 360) {
RA = RA - 360
} else if (RA < 0) {
RA = RA + 360
}
Lquadrant = Math.floor(L / 90) * 90;
RAquadrant = Math.floor(RA / 90) * 90;
RA = RA + (Lquadrant - RAquadrant);
RA = RA / 15;
sinDec = .39782 * Math.sin(L * s);
cosDec = Math.cos(Math.asin(sinDec));
cosH = (Math.cos(i * s) - sinDec * Math.sin(r * s)) / (cosDec * Math.cos(r * s));
var f;
if (t) {
f = 360 - o * Math.acos(cosH)
} else {
f = o * Math.acos(cosH)
}
f = f / 15;
T = f + RA - .06571 * a - 6.622;
UT = T - u;
if (UT > 24) {
UT = UT - 24
} else if (UT < 0) {
UT = UT + 24
}
localT = UT + 1;
return localT * 3600 * 1e3
}
function dayOfYear() {
var e = Math.floor((new Date).setFullYear((new Date).getFullYear(), 0, 1) / 864e5);
var t = Math.ceil((new Date).getTime() / 864e5);
var n = t - e;
return n
}
Highcharts.setOptions({
global: {
useUTC: false
},
lang: {
months: [" Janvier "," Février "," Mars "," Avril "," Mai "," Juin "," Juillet "," Août "," Septembre "," Octobre "," Novembre "," Décembre"],
weekdays: [" Dim "," Lun "," Mar "," Mer "," Jeu "," Ven "," Sam"],
shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil','Août', 'Sept', 'Oct', 'Nov', 'Déc'],
}
});
options = {
chart: {
renderTo: "content",
type: "spline",
backgroundColor: '#191919',
plotBorderColor: '#808080',
plotBorderWidth: 5,
plotBackgroundColor: '#000000',
},
title: {
text: "Temperatures Exterieur"
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
hour: "%H. %M"
}
},
yAxis: [{
title: {
text: "T ( °C )"
}
},
{
title: {
text: "Humidité ( % )"
},
opposite: true
}],
tooltip: {
borderColor: '#808080',
shared: false,
backgroundColor: '#4B4BFF',
formatter: function() {
if(this.series.name == 'Humidity')
{
return "<b>" + this.series.name + "</b><br/>" + Highcharts.dateFormat("%H:%M", this.x) + " : " + this.y.toFixed(1) + "%"
}
else
{
return "<b>" + this.series.name + "</b><br/>" + Highcharts.dateFormat("%H:%M", this.x) + " : " + this.y.toFixed(1) + "°C"
}
}
},
plotOptions: {
series: {
lineWidth: 2,
marker: {
radius: 2
},
color: '#FF0000'
}
},
lineWidth: 3,
color: '#ff0000',
series: []
}
// multiple parameters decoder
function gup( name ){
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null ) return "";
else return results[1];}
// return everything after the question mark
function GetUrlParameters() {
idx = window.location.href.indexOf("?");
if( idx < 0 ) return "";
return window.location.href.substring(idx+1);
}
function GetChartXml() {
switch(urlParameter)
{
case "3h":
case "48h":
case "1w":
case "1m":
case "3m":
case "1y":
return "webdata/DHT22_" + urlParameter + ".xml";
}
return "webdata/DHT22_24h.xml";
}
function GetSerieYAxis(sName)
{
switch(sName)
{
case "hm_dht22": return 1;
}
return 0;
}
function GetSerieName(sName)
{
switch(sName)
{
case "th_cpu": return "CPU";
case "th_dht22": return "Temperature";
case "hm_dht22": return "Humidité";
}
return sName;
}
function GetChartTitle()
{
switch(urlParameter)
{
case "3h":
return "Température des 3 dernières heures";
case "48h":
return "Température des dernières 48 heures";
case "1w":
return "Température de la semaine";
case "1m":
return "Température du mois";
case "3m":
return "Température des 3 derniers mois";
case "1y":
return "Température de l'année dernière";
}
return "Température des dernières 24 heures";
}
function GetNumberOfDays()
{
switch(urlParameter)
{
case "3h":
return 1;
case "48h":
return 2;
case "1w":
return 7;
case "1m":
return 31;
case "3m":
return 0;
case "1y":
return 0;
}
return 1;
}
$(document).ready(function() {
$.ajax({
type: "GET",
url: GetChartXml(),
dataType: "xml",
success: function(xml) {
var series = []
//define series
$(xml).find("entry").each(function() {
var seriesOptions;
seriesOptions = {
name: GetSerieName($(this).text()),
yAxis: GetSerieYAxis($(this).text()),
data: []
}
options.series.push(seriesOptions);
});
//populate with data
$(xml).find("row").each(function() {
var t = parseInt($(this).find("t").text()) * 1000
$(this).find("v").each(function(index) {
var v = parseFloat($(this).text())
v = v || null
if (v != null) {
options.series[index].data.push([t, v])
};
});
});
options.title.text = GetChartTitle();
$.each(series, function(index) {
options.series.push(series[index]);
});
//add sunrise and sunset
options.xAxis.plotBands = []
var nday= GetNumberOfDays();
if(nday>0)
for (var i = nday; i >= 0; i--) {
var d = new Date();
d.setHours(0,0,0,0);
d.setDate(d.getDate()-i);
var sunrise = d.getTime()+computeSunrise(dayOfYear(), true);
var sunset = d.getTime()+computeSunrise(dayOfYear(), false);
options.xAxis.plotBands.push({
from: sunrise,
to: sunset,
color: '#000000'
});
};
chart = new Highcharts.Chart(options);
}
});
});
</script>
</body>
</html>
