<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Brainbox Energy</title>
<link href="styles/MetroJs.css" rel="stylesheet" type="text/css">
<link href="styles/main.css" rel="stylesheet" type="text/css">
<link href="styles/odometer-theme-train-station.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="icon/energy.png">
<style>
.odometer {
font-size: 25px;
}
.tile-title {
text-align: center ;
}
.live-tile p {
color: black ;
line-height: 0.7em ;
}
.live-tile .tile-header {
font-size:60% ;
}
.live-tile .myUnit {
font-size:50% ;
}
</style>
<script src="scripts/jquery-3.2.0.min.js"></script>
<script src="scripts/jquery.flot.min.js"></script>
<script src="scripts/jquery.flot.time.min.js"></script>
<script src="scripts/odometer.min.js"></script>
<script src="scripts/MetroJs.min.js"></script>
<script>
var mode = 'home'; // default mode
var submode = '' // used for year month day hour minute and current icon
var myInterval ;
var myIntervalHome ;
var myIntervalWeerNU ;
var myIntervalMinMax ;
var blnJSONFlotReady = true ;
var blnJSONHomeReady = true ;
var blnJSONMinMaxReady = true ;
var blnJSONWeerNuReady = true ;
window.odometerOptions = {
format: '(dd.dd.ddd),ddd'
};
// start when document is ready
$( document ).ready(function() {
setIconState() ;
$(".live-tile").liveTile();
startHome() ;
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
});
function setIconState() {
// reset alle achtergrondkleuren van de icondiv
$('#homeicon').css('background-color', 'lightblue');
$('#electricityicon').css('background-color', 'lightblue');
$('#gasicon').css('background-color', 'lightblue');
$('#weathericon').css('background-color', 'lightblue');
$('#pressureicon').css('background-color', 'lightblue');
$('#windicon').css('background-color', 'lightblue');
$('#minmaxicon').css('background-color', 'lightblue');
$('#weernuicon').css('background-color', 'lightblue');
$('#yearicon').css('background-color', 'lightblue');
$('#monthicon').css('background-color', 'lightblue');
$('#dayicon').css('background-color', 'lightblue');
$('#houricon').css('background-color', 'lightblue');
$('#minuteicon').css('background-color', 'lightblue');
$('#currenticon').css('background-color', 'lightblue');
// zet nu de iconen aan die aan moeten staan.
switch (mode) {
case 'home' :
$('#homeicon').css('background-color', '#0099ff');
break ;
case 'electricity' || 'current' :
$('#electricityicon').css('background-color', '#0099ff');
break ;
case 'gas':
$('#gasicon').css('background-color', '#0099ff');
break ;
case 'weather':
$('#weathericon').css('background-color', '#0099ff');
break ;
case 'pressure':
$('#pressureicon').css('background-color', '#0099ff');
break ;
case 'wind':
$('#windicon').css('background-color', '#0099ff');
break ;
case 'minmax':
$('#minmaxicon').css('background-color', '#0099ff');
break ;
case 'weernu':
$('#weernuicon').css('background-color', '#0099ff');
break ;
}
switch (submode) {
case 'year' :
$('#yearicon').css('background-color', '#0099ff');
break ;
case 'month' :
$('#monthicon').css('background-color', '#0099ff');
break ;
case 'day' :
$('#dayicon').css('background-color', '#0099ff');
break ;
case 'hour' :
$('#houricon').css('background-color', '#0099ff');
break ;
case 'minute' :
$('#minuteicon').css('background-color', '#0099ff');
break ;
case 'current' :
$('#currenticon').css('background-color', '#0099ff');
break ;
}
// Zet de laatste 5 icons op visible
$('#yearicon').show() ;
$('#monthicon').show() ;
$('#dayicon').show() ;
$('#houricon').show() ;
$('#minuteicon').show() ;
$('#currenticon').show() ;
// nu icons eventueel uitzetten
// current icon alleen bij electriciteit
if (mode != 'electricity' && mode != 'home') $('#currenticon').hide() ;
// minute icon alleen bij gas en electriciteit
if (mode != 'electricity' && mode != 'gas') $('#minuteicon').hide() ;
// year mont day hour icon uit bij weernu en minmax
if (mode == 'minmax' || mode == 'weernu') {
$('#yearicon').hide() ;
$('#monthicon').hide() ;
$('#dayicon').hide() ;
$('#houricon').hide() ;
}
// Zet nu alle pannels uit
$('#homePanel').hide() ;
$('#imageInfo1').hide() ;
$('#currentPanel').hide() ;
$('#minmaxPanel').hide() ;
$('#weernuPanel').hide() ;
// Zet nu het juiste paneel weer aan
if (mode == 'home') $('#homePanel').show() ;
if (mode == 'current') $('#currentPanel').show() ;
if (mode == 'minmax') $('#minmaxPanel').show() ;
if (mode == 'weernu') {
$('#weernuPanel').attr("src","weernu.html").show() ;
}
if (submode == 'year' || submode == 'month' || submode == 'day' || submode == 'hour' || submode == 'minute') {
$('#imageInfo1').show() ;
}
if (submode == 'current') {
$('#currentPanel').show() ;
}
}
function clickImage(name) {
// Bij elke klik de interval timers resetten
if (myInterval) clearInterval(myInterval) ;
if (myIntervalHome) clearInterval(myIntervalHome) ;
if (myIntervalMinMax) clearInterval(myIntervalMinMax) ;
if (myIntervalWeerNU) clearInterval(myIntervalWeerNU) ;
if (name != 'current') {
timer = null;
}
switch (name) {
case 'home':
mode = 'home';
$('#imageInfo1').attr('src', '');
startHome() ;
submode = '' ;
break;
case 'electricity':
mode = 'electricity' ;
$('#homePanel').hide() ;
submode = '' ;
break;
case 'gas':
mode = 'gas';
$('#imageInfo1').attr('src','');
$('#homePanel').hide() ;
submode = '' ;
break;
case 'weather':
mode = 'weather';
submode = '' ;
break ;
case 'pressure':
mode = 'pressure';
submode = '' ;
break ;
case 'wind':
mode = 'wind';
submode = '' ;
break ;
case 'minmax' :
mode = 'minmax' ;
submode = '' ;
startMinMax() ;
break ;
case 'weernu' :
mode = 'weernu' ;
submode = '' ;
break ;
case 'year':
if (mode == 'home') mode = 'electricity';
if (mode == 'electricity') {
$('#imageInfo1').attr('src', 'images/PerYear.png?timestamp=' + new Date().getTime());
}
if (mode == 'gas') {
$('#imageInfo1').attr('src', 'images/GasPerYear.png?timestamp=' + new Date().getTime());
}
if (mode == 'weather') {
$('#imageInfo1').attr('src', 'images/WeerPerYearTemp.png?timestamp=' + new Date().getTime());
}
if (mode == 'pressure') {
$('#imageInfo1').attr('src', 'images/WeerPerYearPressure.png?timestamp=' + new Date().getTime());
}
if (mode == 'wind') {
$('#imageInfo1').attr('src', 'images/WeerPerYearWindspeed.png?timestamp=' + new Date().getTime());
}
submode = 'year' ;
$('#homePanel').hide() ;
break;
case 'month':
if (mode == 'home') mode = 'electricity';
if (mode == 'electricity') {
$('#imageInfo1').attr('src', 'images/PerMonth.png?timestamp=' + new Date().getTime());
}
if (mode == 'gas') {
$('#imageInfo1').attr('src', 'images/GasPerMonth.png?timestamp=' + new Date().getTime());
}
if (mode == 'weather') {
$('#imageInfo1').attr('src', 'images/WeerPerMonthTemp.png?timestamp=' + new Date().getTime());
}
if (mode == 'pressure') {
$('#imageInfo1').attr('src', 'images/WeerPerMonthPressure.png?timestamp=' + new Date().getTime());
}
if (mode == 'wind') {
$('#imageInfo1').attr('src', 'images/WeerPerMonthWindspeed.png?timestamp=' + new Date().getTime());
}
submode = 'month' ;
$('#homePanel').hide() ;
break;
case 'day':
if (mode == 'home') mode = 'electricity';
if (mode == 'electricity') {
$('#imageInfo1').attr('src', 'images/PerWeek.png?timestamp=' + new Date().getTime());
}
if (mode == 'gas') {
$('#imageInfo1').attr('src', 'images/GasPerWeek.png?timestamp=' + new Date().getTime());
}
if (mode == 'weather') {
$('#imageInfo1').attr('src', 'images/WeerPerWeekTemp.png?timestamp=' + new Date().getTime());
}
if (mode == 'pressure') {
$('#imageInfo1').attr('src', 'images/WeerPerWeekPressure.png?timestamp=' + new Date().getTime());
}
if (mode == 'wind') {
$('#imageInfo1').attr('src', 'images/WeerPerWeekWindspeed.png?timestamp=' + new Date().getTime());
}
submode = 'day' ;
$('#homePanel').hide() ;
break;
case 'hour':
if (mode == 'home') mode = 'electricity';
if (mode == 'electricity') {
$('#imageInfo1').attr('src', 'images/PerHour.png?timestamp=' + new Date().getTime());
}
if (mode == 'gas') {
$('#imageInfo1').attr('src', 'images/GasPerHour.png?timestamp=' + new Date().getTime());
}
if (mode == 'weather') {
$('#imageInfo1').attr('src', 'images/WeerPerDayTemp.png?timestamp=' + new Date().getTime());
}
if (mode == 'pressure') {
$('#imageInfo1').attr('src', 'images/WeerPerDayPressure.png?timestamp=' + new Date().getTime());
}
if (mode == 'wind') {
$('#imageInfo1').attr('src', 'images/WeerPerDayWindspeed.png?timestamp=' + new Date().getTime());
}
submode = 'hour' ;
$('#homePanel').hide() ;
break;
case 'minute':
if (mode == 'home') mode = 'electricity';
if (mode == 'electricity') {
$('#imageInfo1').attr('src', 'images/PerMinute.png?timestamp=' + new Date().getTime());
}
if (mode == 'gas') {
$('#imageInfo1').attr('src', 'images/GasPerMinute.png?timestamp=' + new Date().getTime());
}
submode = 'minute' ;
$('#homePanel').hide() ;
break;
case 'current':
mode = 'electricity'; // switch altijd naar electriciteit
if (mode == 'electricity') {
$('#imageInfo1').attr('src', '');
startTimer();
}
submode = 'current' ;
$('#homePanel').hide() ;
break;
}
setIconState() ;
}
function startTimer() {
getAndPlotCurrentData();
myInterval = window.setInterval(doInterval, 1000) ;
}
function doInterval() {
$("#heartbeat").css("background-color", "#ff0000");
heartbeattimer = window.setTimeout(function() {
$("#heartbeat").css("background-color", "#00ff00");
},100) ;
getAndPlotCurrentData() ;
}
function getAndPlotCurrentData() {
//console.log(document.getElementById("lstInterval").selectedIndex)
switch (document.getElementById("lstInterval").selectedIndex) {
case 0:
interval = "?interval=minute";
break;
case 1:
interval = "?interval=fiveminutes";
break;
case 2:
interval = "?interval=tenminutes";
break;
case 3:
interval = "?interval=thirtyminutes";
break;
case 4:
interval = "?interval=hour";
break;
case 5:
interval = "?interval=fourhours";
break;
case 6:
interval = "?interval=12hours";
break;
case 7:
interval = "?interval=24hours";
break;
}
//console.log(document.getElementById('lstInterval').selectedIndex) ;
if (blnJSONFlotReady) {
blnJSONFlotReady = false ;
$.getJSON("meter.php" + interval , function (data) {
var allPoints = [] ;
var points = [];
currentRate = 0 ;
//console.log(data.length) ;
$.each(data, function (i, item) {
var d = new Date(item['Datum']);
if (item['Rate'] != currentRate) {
// There was a rate change
if (points.length > 0) {
// Store the points
points.push([d.getTime(), 1000*item['Cur_Used']]) ;
allPoints.push({data: points, color: (currentRate == 1) ? "green" : "red"}) ;
points = [] ;
} else {
}
currentRate = item['Rate'];
}
points.push([d.getTime(), 1000*item['Cur_Used']]) ;
});
allPoints.push({data: points, color: (currentRate == 1) ? "green" : "red"}) ;
plotCurrent(allPoints) ;
}, function() {
//console.log("first succes");
}).done(function() {
//console.log("second succes");
blnJSONFlotReady = true ;
});
}
}
function plotCurrent(data) {
if (interval.contains("24hours")) {
var tick = [2, "hour"];
} else if (interval.contains("12hour")) {
var tick = [60, "minute"];
} else if (interval.contains("fourhours")) {
var tick = [1, "hour"];
} else if (interval.contains("hour")) {
var tick = [5, "minute"];
} else if (interval.contains("thirtyminutes")) {
var tick = [10, "minute"];
} else if (interval.contains("tenminutes")) {
var tick = [1, "minute"];
} else if (interval.contains("fiveminutes")) {
var tick = [30, "second"];
} else {
var tick = [10, "second"];
}
var options = {
lines: {
show: true
},
points: {
show: true
},
xaxis: {
mode: "time",
tickSize: tick,
timezone: "browser",
font: {
size:20,
color: "black"
}
},
yaxis: {
min: 0,
font: {
size:20,
color: "black"
}
}
};
if ($('#currentGraph').length)
$.plot("#currentGraph", data, options);
}
window.onresize = function () {
if ($('#currenticon').css('background-color') == 'rgb(0, 153, 255)') getAndPlotCurrentData();
}
String.prototype.contains = function(str) {
if (this.indexOf(str) > -1) {
return true;
} else {
return false;
}
}
function startHome() {
myIntervalHome = window.setInterval(doHome, 1000) ;
}
function doHome(){
if (blnJSONHomeReady) {
blnJSONHomeReady = false ;
$.getJSON("home.php", function (data) {
$.each(data, function (i, item){
$("#T1_Used").text(item["T1_Used"]) ;
$("#T2_Used").text(item["T2_Used"]) ;
$("#Gas_Used").text(item["Gas_Used"]) ;
$("#Cur_Used").text(1000 * item["Cur_Used"]) ;
if (item["Rate"] == 1) {
//dal tarief
$("#dalLabel").css("font-weight", "bold").css("color", "#00ff00") ;
$("#piekLabel").css("font-weight", "normal").css("color", "#333333") ;
} else {
//piek tarief
$("#piekLabel").css("font-weight", "bold").css("color", "#ff0000") ;
$("#dalLabel").css("font-weight", "normal").css("color", "#333333") ;
}
}) ;
}).done(function() {
blnJSONHomeReady = true ;
}) ;
}
}
function startMinMax() {
if (blnJSONMinMaxReady) {
blnJSONMinMaxReady = false ;
$.getJSON("weerMinMax.php", function (data) {
$.each(data, function (i, item){
$("#MaxTemp1Day").text(item["MaxTemp1Day"] + "°") ;
$("#MaxTemp7Day").text(item["MaxTemp7Day"] + "°") ;
$("#MaxTemp31Day").text(item["MaxTemp31Day"] + "°") ;
$("#MaxTemp365Day").text(item["MaxTemp365Day"] + "°") ;
$("#MaxTemp1DayDate").text(item["MaxTemp1DayDate"]) ;
$("#MaxTemp7DayDate").text(item["MaxTemp7DayDate"]) ;
$("#MaxTemp31DayDate").text(item["MaxTemp31DayDate"]) ;
$("#MaxTemp365DayDate").text(item["MaxTemp365DayDate"]) ;
$("#MinTemp1Day").text(item["MinTemp1Day"] + "°") ;
$("#MinTemp7Day").text(item["MinTemp7Day"] + "°") ;
$("#MinTemp31Day").text(item["MinTemp31Day"] + "°") ;
$("#MinTemp365Day").text(item["MinTemp365Day"] + "°") ;
$("#MinTemp1DayDate").text(item["MinTemp1DayDate"]) ;
$("#MinTemp7DayDate").text(item["MinTemp7DayDate"]) ;
$("#MinTemp31DayDate").text(item["MinTemp31DayDate"]) ;
$("#MinTemp365DayDate").text(item["MinTemp365DayDate"]) ;
// Pressure
$("#MaxPress1Day").text(item["MaxPress1Day"] + " hPa") ;
$("#MaxPress7Day").text(item["MaxPress7Day"] + " hPa") ;
$("#MaxPress31Day").text(item["MaxPress31Day"] + " hPa") ;
$("#MaxPress365Day").text(item["MaxPress365Day"] + " hPa") ;
$("#MaxPress1DayDate").text(item["MaxPress1DayDate"]) ;
$("#MaxPress7DayDate").text(item["MaxPress7DayDate"]) ;
$("#MaxPress31DayDate").text(item["MaxPress31DayDate"]) ;
$("#MaxPress365DayDate").text(item["MaxPress365DayDate"]) ;
$("#MinPress1Day").text(item["MinPress1Day"] + " hPa") ;
$("#MinPress7Day").text(item["MinPress7Day"] + " hPa") ;
$("#MinPress31Day").text(item["MinPress31Day"] + " hPa") ;
$("#MinPress365Day").text(item["MinPress365Day"] + " hPa") ;
$("#MinPress1DayDate").text(item["MinPress1DayDate"]) ;
$("#MinPress7DayDate").text(item["MinPress7DayDate"]) ;
$("#MinPress31DayDate").text(item["MinPress31DayDate"]) ;
$("#MinPress365DayDate").text(item["MinPress365DayDate"]) ;
// Wind
$("#MaxWind1Day").text(item["MaxWind1Day"] + " knopen") ;
$("#MaxWind7Day").text(item["MaxWind7Day"] + " knopen") ;
$("#MaxWind31Day").text(item["MaxWind31Day"] + " knopen") ;
$("#MaxWind365Day").text(item["MaxWind365Day"] + " knopen") ;
$("#MaxWind1DayDate").text(item["MaxWind1DayDate"]) ;
$("#MaxWind7DayDate").text(item["MaxWind7DayDate"]) ;
$("#MaxWind31DayDate").text(item["MaxWind31DayDate"]) ;
$("#MaxWind365DayDate").text(item["MaxWind365DayDate"]) ;
}) ;
}).done(function() {
blnJSONMinMaxReady = true ;
}) ;
}
}
</script>
</head>
<body>
<div id="iconrow">
<div id="homeicon" class="icon">
<img id="homeimage" onclick="clickImage('home')" class="iconimage" src="icon/home.png" />
</div>
<div id="emptyicon" class="iconempty">
<span> </span>
</div>
<div id="electricityicon" class="icon">
<img id="electricityimage" onclick="clickImage('electricity')" class="iconimage" src="icon/electricity.png" />
</div>
<div id="gasicon" class="icon">
<img id="gasimage" onclick="clickImage('gas')" class="iconimage" src="icon/gas.png" />
</div>
<div id="weathericon" class="icon">
<img id="weatherimage" onclick="clickImage('weather')" class="iconimage" src="icon/weather.png" />
</div>
<div id="pressureicon" class="icon">
<img id="pressureimage" onclick="clickImage('pressure')" class="iconimage" src="icon/pressure.png" />
</div>
<div id="windicon" class="icon">
<img id="windimage" onclick="clickImage('wind')" class="iconimage" src="icon/wind.png" />
</div>
<div id="minmaxicon" class="icon">
<img id="minmaximage" onclick="clickImage('minmax')" class="iconimage" src="icon/minmax.png" />
</div>
<div id="weernuicon" class="icon">
<img id="weernuimage" onclick="clickImage('weernu')" class="iconimage" src="icon/weernu.png" />
</div>
<div id="emptyicon" class="iconempty">
<span> </span>
</div>
<div id="yearicon" class="icon">
<img id="yearimage" onclick="clickImage('year')" class="iconimage" src="icon/year.png" />
</div>
<div id="monthicon" class="icon">
<img id="monthimage" onclick="clickImage('month')" class="iconimage" src="icon/month.png" />
</div>
<div id="dayicon" class="icon">
<img id="dayimage" onclick="clickImage('day')" class="iconimage" src="icon/week.png" />
</div>
<div id="houricon" class="icon">
<img id="hourimage" onclick="clickImage('hour')" class="iconimage" src="icon/hour.png" />
</div>
<div id="minuteicon" class="icon">
<img id="minuteimage" onclick="clickImage('minute')" class="iconimage" src="icon/minute.png" />
</div>
<div id="currenticon" class="icon">
<img id="currentimage" onclick="clickImage('current')" class="iconimage" src="icon/current.png" />
</div>
</div>
<div id="info">
<img class="infoimage" id="imageInfo1" src="" />
</div>
<div id="currentPanel">
<div id="intervalSelection">
Verbruik per
<select id="lstInterval" onchange="getAndPlotCurrentData()">
<option value="0">1 minuut</option>
<option value="1">5 minuten</option>
<option value="2">10 minuten</option>
<option value="3">30 minuten</option>
<option value="4">1 uur</option>
<option value="5">4 uur</option>
<option value="6">12 uur</option>
<option value="7">24 uur</option>
</select>
in Watt
<div id="heartbeat"></div>
</div><br />
<div id="currentGraph"></div>
</div>
<div id="homePanel" class="home">
<br />
<div id="dalLabel" class="odoLabel1">Dal </div><div class="odometer" id="T1_Used"></div><div class="odoLabel2"> Kwh</div>
<br clear=both />
<div id="piekLabel" class="odoLabel1">Piek</div><div class="odometer" id="T2_Used"></div><div class="odoLabel2"> Kwh</div>
<br clear=both />
<br clear=both />
<div class="odoLabel1">Nu  </div><div class="odometer" id="Cur_Used"></div><div class="odoLabel2"> Watt</div>
<br clear=both />
<br clear=both />
<div class="odoLabel1">Gas </div><div class="odometer" id="Gas_Used"></div><div class="odoLabel2"> m<sup><small>3</small></sup></div>
<br clear=both />
<br clear=both />
</div>
<div id="minmaxPanel" class="myTiles">
<table id="MaxTemp" class="MinMaxTable">
<thead>
<tr>
<th colspan="3">Maximale temperaturen</th>
</tr>
<tr>
<th class="MinMaxPeriode">Periode</th>
<th class="MinMaxDatum">Datum</th>
<th Class="MinMaxTemp">Temp</th>
</tr>
<tr>
<th colspan="3"> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Laatste 24 uur</td>
<td id="MaxTemp1DayDate"></td>
<td id="MaxTemp1Day"></td>
</tr>
<tr>
<td>Laatste 7 dagen</td>
<td id="MaxTemp7DayDate"></td>
<td id="MaxTemp7Day"></td>
</tr>
<tr>
<td>Laatste maand</td>
<td id="MaxTemp31DayDate"></td>
<td id="MaxTemp31Day"></td>
</tr>
<tr>
<td>Laatste jaar</td>
<td id="MaxTemp365DayDate"></td>
<td id="MaxTemp365Day"></td>
</tr>
</tbody>
</table>
<table id="MinTemp" class="MinMaxTable">
<thead>
<tr>
<th colspan="3">Minimale temperaturen</th>
</tr>
<tr>
<th class="MinMaxPeriode">Periode</th>
<th class="MinMaxDatum">Datum</th>
<th Class="MinMaxTemp">Temp</th>
</tr>
<tr>
<th colspan="3"> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Laatste 24 uur</td>
<td id="MinTemp1DayDate"></td>
<td id="MinTemp1Day"></td>
</tr>
<tr>
<td>Laatste 7 dagen</td>
<td id="MinTemp7DayDate"></td>
<td id="MinTemp7Day"></td>
</tr>
<tr>
<td>Laatste maand</td>
<td id="MinTemp31DayDate"></td>
<td id="MinTemp31Day"></td>
</tr>
<tr>
<td>Laatste jaar</td>
<td id="MinTemp365DayDate"></td>
<td id="MinTemp365Day"></td>
</tr>
</tbody>
</table>
<table id="MaxPress" class="MinMaxTable">
<thead>
<tr>
<th colspan="3">Maximale luchtdrukken</th>
</tr>
<tr>
<th class="MinMaxPeriode">Periode</th>
<th class="MinMaxDatum">Datum</th>
<th Class="MinMaxPress">Luchtdruk</th>
</tr>
<tr>
<th colspan="3"> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Laatste 24 uur</td>
<td id="MaxPress1DayDate"></td>
<td id="MaxPress1Day"></td>
</tr>
<tr>
<td>Laatste 7 dagen</td>
<td id="MaxPress7DayDate"></td>
<td id="MaxPress7Day"></td>
</tr>
<tr>
<td>Laatste maand</td>
<td id="MaxPress31DayDate"></td>
<td id="MaxPress31Day"></td>
</tr>
<tr>
<td>Laatste jaar</td>
<td id="MaxPress365DayDate"></td>
<td id="MaxPress365Day"></td>
</tr>
</tbody>
</table>
<table id="MinPress" class="MinMaxTable">
<thead>
<tr>
<th colspan="3">Minimale luchtdrukken</th>
</tr>
<tr>
<th class="MinMaxPeriode">Periode</th>
<th class="MinMaxDatum">Datum</th>
<th Class="MinMaxPress">Luchtdruk</th>
</tr>
<tr>
<th colspan="3"> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Laatste 24 uur</td>
<td id="MinPress1DayDate"></td>
<td id="MinPress1Day"></td>
</tr>
<tr>
<td>Laatste 7 dagen</td>
<td id="MinPress7DayDate"></td>
<td id="MinPress7Day"></td>
</tr>
<tr>
<td>Laatste maand</td>
<td id="MinPress31DayDate"></td>
<td id="MinPress31Day"></td>
</tr>
<tr>
<td>Laatste jaar</td>
<td id="MinPress365DayDate"></td>
<td id="MinPress365Day"></td>
</tr>
</tbody>
</table>
<table id="MaxWind" class="MinMaxTable">
<thead>
<tr>
<th colspan="3">Maximale windsnelheden</th>
</tr>
<tr>
<th class="MinMaxPeriode">Periode</th>
<th class="MinMaxDatum">Datum</th>
<th Class="MinMaxPress">Windsnelheid</th>
</tr>
<tr>
<th colspan="3"> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Laatste 24 uur</td>
<td id="MaxWind1DayDate"></td>
<td id="MaxWind1Day"></td>
</tr>
<tr>
<td>Laatste 7 dagen</td>
<td id="MaxWind7DayDate"></td>
<td id="MaxWind7Day"></td>
</tr>
<tr>
<td>Laatste maand</td>
<td id="MaxWind31DayDate"></td>
<td id="MaxWind31Day"></td>
</tr>
<tr>
<td>Laatste jaar</td>
<td id="MaxWind365DayDate"></td>
<td id="MaxWind365Day"></td>
</tr>
</tbody>
</table>
</div>
<iframe id="weernuPanel" height="100%" width="100%" frameborder="0" class="tiles">
WeerNu
</iframe>
</body>
</html>