<!DOCTYPE html>
<html>
<head>
<title>Värmesytem på Angegatan 6</title>
<style>
.IO_box1 {
position: absolute;
top: 0px;
left: 0px;;
margin: 0 20px 20px 0;
border: none;
padding: 0 5px 0 5px;
width:800px;
height: 60px;
}
.IO_box2 {
position: absolute;
top: 100px;
left: 100px;;
margin: 0 10px 20px 0;
border: 1px solid blue;
padding: 0 5px 0 5px;
width: 120px;
height: 250px;
}
.IO_box3 {
position: absolute;
top: 100px;
left: 450px;;
margin: 0 20px 20px 0;
border: 1px solid blue;
padding: 0 5px 0 5 px;
width: 120px;
height: 250px;
}
.IO_box4 {
position: relative;
top: 10px;
left: 38px;;
border: 0px solid blue;
width: 40px;
height: 30px;
}
.IO_box5 {
position: relative;
top: 40px;
left: 38px;;
border: 0px solid blue;
width: 40px;
height: 30px;
}
.IO_box6 {
position: rela]tive;
top: 100px;
left: 38px;;
border: 0px solid blue;
width: 40px;
height: 30px;
}
.IO_box7 {
position: absolute;
top: 35px;
left: 20px;;
padding: 0 5px 0 5px;
margin: 0 0px 0px 0;
border: 1px solid blue;
width: 130px;
height: 60px;
}
.IO_box8 {
position: absolute;
top: 390px;
left: 100px;;
margin: 10px 20px 20px 0;
border: 1px solid blue;
padding: 0 5px 0 5px;
width:600px;
height: 200px;
}
.IO_box9 {
position: absolute;
top: 150px;
left: 290px;;
border: 1px solid blue;
padding: 0 5px 0 5px;
width: 80px;
height: 110px;
}
.IO_box10 {
position: absolute;
top: 105px;
left: 170px;
padding: 0 5px 0 5px;
margin: 0 0px 0px 0;
border: 1px solid blue;
width:160px;
height: 60px;
}
.IO_box11 {
position: absolute;
top: 35px;
left: 170px;
padding: 0 5px 0 5px;
margin: 0 0px 0px 0;
border: 1px solid blue;
width:160px;
height: 60px;
}
.IO_box12 {
position: absolute;
top: 35px;
left: 370px;;
padding: 0 5px 0 5px;
margin: 0 20px 20px 0;
border: 1px solid blue;
width:180px;
height: 100px;
}
.IO_box13 {
position: absolute;
top: 20px;
left: 5px;;
border: 0px solid blue;
width: 80px;
height: 20px;
}
.IO_box14 {
position: absolute;
top: 25px;
left: 100px;;
border: 0px solid blue;
width:100px;
height: 20px;
}
.IO_box15 {
position: absolute;
top: 50px;
left: 5px;;
border: 0px solid blue;
width:80px;
height: 20px;
}
.IO_box16 {
position: absolute;
top: 55px;
left: 100px;;
border: 0px solid blue;
width:100px;
height: 20px;
}
.IO_box17 {
position: absolute;
top: 250px;
left: 600px;
border: 1px solid blue;
width: 110px;
height: 100px;
}
.IO_box18 {
position: absolute;
top: 300px;
left: 230px;;
border: 1px solid blue;
width: 50px;
height: 2px;
background-color: blue;
}
.IO_box19 {
position: absolute;
top: 120px;
left: 230px;;
border: 1px solid red;
width: 220px;
height: 2px;
background-color: red;
}
.IO_box20 {
position: absolute;
top: 340px;
left: 570px;;
border: 1px solid blue;
width: 30px;
height: 1px;
background-color: blue;
}
.IO_box21 {
position: absolute;
top: 260px;
left: 570px;;
border: 1px solid red;
width: 30px;
height: 1px;
background-color: red;
}
.IO_box22 {
position: absolute;
top: 230px;
left: 570px;;
border: 1px solid #de5c40;
width: 140px;
height: 1px;
background-color: #de5c40;
}
.IO_box23 {
position: absolute;
top: 360px;
left: 100px;;
border: 1px solid blue;
width:100px;
height: 30px;
}
.IO_box24 {
position: absolute;
top: 360px;
left: 210px;;
border: 1px solid blue;
width:100px;
height: 30px;
}
.IO_box25 {
position: absolute;
top: 360px;
left: 320px;;
border: 1px solid blue;
width:100px;
height: 30px;
}
.IO_box26 {
position: absolute;
top: 360px;
left: 600px;;
border: 1px solid blue;
width:100px;
height: 30px;
}
.IO_box27 {
position: absolute;
margin: 0 10px 20px 0;
padding: 0 5px 0 5px;
top: 197px;
left: 600px;;
border: 1px solid blue;
width:50px;
height: 30px;
}
.IO_box28 {
position: absolute;
margin: 0 10px 20px 0;
padding: 0 5px 0 5px;
top: 280px;
left: 280px;;
border: 1px solid blue;
width:40px;
height: 40px;
}
.IO_box29 {
position: absolute;
top: 300px;
left: 330px;;
border: 1px solid blue;
width: 120px;
height: 2px;
background-color: blue;
}
.IO_box30 {
position: absolute;
top: 290px;
left: 295px;;
border: 1px solid blue;
width: 20px;
height: 20px;
background-color: gray;
}
.IO_box31 {
position: absolute;
top: 290px;
left: 150px;;
border: 1px solid blue;
width: 20px;
height: 20px;
background-color: gray;
}
h1 {
font-size: 300%;
color: blue;
margin: 0 0 10px 0;
text-align:center;
}
h2 {
font-size: 100%;
color: #5734E6;
margin: 5px 0 5px 0;
text-align:center;
}
p, form, button {
font-size: 80%;
color: #252525;
text-align:center;
}
.small_text {
font-size: 100%;
text-align: center
}
</style>
<script>
strLED1 = "";
var light=0
function GetArduinoInputs()
{
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseXML != null) {
// extract XML data from XML file (containing switch states and analog value)
document.getElementById("temptankupp").innerHTML =
this.responseXML.getElementsByTagName('temptankupp')[0].childNodes[0].nodeValue;
document.getElementById("tillpanna").innerHTML =
this.responseXML.getElementsByTagName('tillpanna')[0].childNodes[0].nodeValue;
document.getElementById("temptankmitt").innerHTML =
this.responseXML.getElementsByTagName('temptankmitt')[0].childNodes[0].nodeValue;
document.getElementById("temppanan").innerHTML =
this.responseXML.getElementsByTagName('temppanan')[0].childNodes[0].nodeValue;
document.getElementById("temprokgas").innerHTML =
this.responseXML.getElementsByTagName('temprokgas')[0].childNodes[0].nodeValue;
document.getElementById("temptankner").innerHTML =
this.responseXML.getElementsByTagName('temptankner')[0].childNodes[0].nodeValue;
var spup = this.responseXML.getElementsByTagName('spup')[0].childNodes[0].nodeValue;
var sspan = this.responseXML.getElementsByTagName('sspan')[0].childNodes[0].nodeValue;
document.getElementById("PanTempGrensTill").innerHTML =
this.responseXML.getElementsByTagName('PanTempGrensTill')[0].childNodes[0].nodeValue;
document.getElementById("PanTempGrensfran").innerHTML =
this.responseXML.getElementsByTagName('PanTempGrensfran')[0].childNodes[0].nodeValue;
document.getElementById("soltak").innerHTML =
this.responseXML.getElementsByTagName('soltak')[0].childNodes[0].nodeValue;
document.getElementById("solin").innerHTML =
this.responseXML.getElementsByTagName('solin')[0].childNodes[0].nodeValue;
document.getElementById("solut").innerHTML =
this.responseXML.getElementsByTagName('solut')[0].childNodes[0].nodeValue;
document.getElementById("tid").innerHTML =
this.responseXML.getElementsByTagName('tid')[0].childNodes[0].nodeValue;
document.getElementById("dag").innerHTML =
this.responseXML.getElementsByTagName('dag')[0].childNodes[0].nodeValue;
document.getElementById("datum").innerHTML =
this.responseXML.getElementsByTagName('datum')[0].childNodes[0].nodeValue;
document.getElementById("rad").innerHTML =
this.responseXML.getElementsByTagName('rad')[0].childNodes[0].nodeValue;
document.getElementById("ute").innerHTML =
this.responseXML.getElementsByTagName('temputomhus')[0].childNodes[0].nodeValue;
var PumpDriftlage = this.responseXML.getElementsByTagName('PumpDriftlage')[0].childNodes[0].nodeValue;
var PanaDriftlage = this.responseXML.getElementsByTagName('PanaDriftlage')[0].childNodes[0].nodeValue;
var forinVerme = this.responseXML.getElementsByTagName('forinVerme')[0].childNodes[0].nodeValue;
document.getElementById("BPanTempGrensTill").innerHTML =
this.responseXML.getElementsByTagName('BPanTempGrensTill')[0].childNodes[0].nodeValue;
document.getElementById("BPanTempGrensfran").innerHTML =
this.responseXML.getElementsByTagName('BPanTempGrensfran')[0].childNodes[0].nodeValue;
var AnlagDriftlage = this.responseXML.getElementsByTagName('AnlagDriftlage')[0].childNodes[0].nodeValue;
var knap = document.getElementById("pknap");
if(spup == 0) {
knap.style.backgroundColor = "red";
} else {
knap.style.backgroundColor = "green";
}
var knap = document.getElementById("bknap");
if(sspan == 0) {
knap.style.backgroundColor = "red";
} else {
knap.style.backgroundColor = "green";
}
// var fknap1 = document.getElementById("pumpknapoff");
// var fknap2 = document.getElementById("pumpknapon");
// var fknap3 = document.getElementById("pumpknapauto");
// light= PumpDriftlage
// bytafarg(light)
// var fknap1 = document.getElementById("panaknapoff");
// var fknap2 = document.getElementById("panaknapon");
// var fknap3 = document.getElementById("panaknapauto");
// light= PanaDriftlage
// bytafarg(light) }
var knap = document.getElementById("forinknapon");
if(forinVerme == 1) {
knap.style.backgroundColor = "#ffff4d";
} else {
knap.style.backgroundColor = "#b3b3b3";
}
var knap = document.getElementById("forinknapoff");
if(forinVerme == 0) {
knap.style.backgroundColor = "#ffff4d";
} else {
knap.style.backgroundColor = "#b3b3b3";
} }
// var fknap1 = document.getElementById("AnlagDriftlageOff");
// var fknap2 = document.getElementById("AnlagDriftlageOn");
// var fknap3 = document.getElementById("AnlagDriftlageAuto");
// light= AnlagDriftlage
// bytafarg(light)
}
}
}
}
request.open("GET", "ajax_inputs" + strLED1 + nocache, true);
request.send(null);
setTimeout('GetArduinoInputs()', 1000);
strLED1 = "";
}
// function bytafarg(light)
// {
// if(light == 0) {
// fknap1.style.backgroundColor = "#ffff4d";
// fknap2.style.backgroundColor = "#b3b3b3";
// fknap3.style.backgroundColor = "#b3b3b3";
// }
// if(light == 1) {
// fknap1.style.backgroundColor = "#ffff4d";
// fknap2.style.backgroundColor = "#b3b3b3";
// fknap3.style.backgroundColor = "#b3b3b3";
// }
// if(light == 3) {
// fknap1.style.backgroundColor = "#ffff4d";
// fknap2.style.backgroundColor = "#b3b3b3";
//fknap3.style.backgroundColor = "#b3b3b3";
// }
// }
function GetButton1()
{
strLED1 = "&knap1";
}
function GetButton2()
{
strLED1 = "&knap2";
}
function GetButton3()
{
strLED1 = "&knap3";
}
function GetButton4()
{
strLED1 = "&knap4";
}
function GetButton5()
{
strLED1 = "&knap5";
}
function GetButton6()
{
strLED1 = "&knap6";
}
function GetButton7()
{
strLED1 = "&knap7";
}
function GetButton8()
{
strLED1 = "&knap8";
}
function GetButton9()
{
strLED1 = "&knap9";
}
function GetButton10()
{
strLED1 = "&knap10";
}
function GetButton11()
{
strLED1 = "&knap11";
}
function GetButton12()
{
strLED1 = "&knap12";
}
function GetButton13()
{
strLED1 = "&knap13";
}
function GetButton14()
{
strLED1 = "&knap14";
}
function GetButton15()
{
strLED1 = "&knap15";
}
function GetButton16()
{
strLED1 = "&knap16";
}
</script>
</head>
<body onload="GetArduinoInputs()">
<div class="IO_box1">
<h1>Agnegatan 6 värmesystem</h1>
</div>
<div class="IO_box2">
<h2>Panna</h2>
<p>Från pannan <span id="temppanan">***</span></p>
<p>Rökgas <span id="temprokgas">***</span></p>
<p>Till pannan <span id="tillpanna">***</span></p>
</div>
<div class="IO_box3">
<h2>Tank</h2>
<div class="IO_box4">
<p><span id="temptankupp">**.**</span></p>
</div>
<div class="IO_box5">
<p><span id="temptankmitt">**.**</span></p>
</div>
<div class="IO_box6">
<p><span id="temptankner">**.**</span></p>
</div>
</div>
<div class="IO_box8">
<h2>Instäningar</h2>
<div class="IO_box7">
<H2>förinstäld värme</H2>
<button id="forinknapon" type="button" onclick="GetButton13()"> ON </button>
<button id="forinknapoff" type="button" onclick="GetButton12()"> OFF </button>
</div>
<div class="IO_box10">
<H2>Pump </H2>
<button id="pumpknapon" type="button" onclick="GetButton4()"> ON </button>
<button id="pumpknapoff" type="button" onclick="GetButton5()"> OFF </button>
<button id="pumpknapauto" type="button" onclick="GetButton2()"> AUTO </button>
</div>
<div class="IO_box11">
<H2>Bränare</H2>
<button id="panaknapon" type="button" onclick="GetButton6()"> ON </button>
<button id="panaknapoff" type="button" onclick="GetButton7()"> OFF </button>
<button id="panaknapauto" type="button" onclick="GetButton1()"> AUTO </button>
</div>
<div class="IO_box12">
<H2>När ska bränaren gå</H2>
<div class="IO_box13">
<p>Till <span id="PanTempGrensTill">***</span> (<span id="BPanTempGrensTill">***</span>) </p>
</div>
<div class="IO_box14">
<button type="button" onclick="GetButton8()"> + </button>
<button type="button" onclick="GetButton9()"> - </button>
</div>
<div class="IO_box15">
<p>Från <span id="PanTempGrensfran">***</span> (<span id="BPanTempGrensfran">***</span>)</p>
</div>
<div class="IO_box16">
<button type="button" onclick="GetButton10()"> + </button>
<button type="button" onclick="GetButton11()"> - </button>
</div>
</div>
</div>
<div class="IO_box17">
<p>sol tak <span id="soltak">***</span></p>
<p>sol in <span id="solin">***</span></p>
<p>sol ut <span id="solut">***</span></p>
</div>
<div class="IO_box18">
</div>
<div class="IO_box19">
</div>
<div class="IO_box20">
</div>
<div class="IO_box21">
</div>
<div class="IO_box22">
</div>
<div class="IO_box23">
<p><span id="tid">***</span></p>
</div>
<div class="IO_box24">
<p><span id="dag">***</span></p>
</div>
<div class="IO_box25">
<p><span id="datum">***</span></p>
</div>
<div class="IO_box26">
<p>ute <span id="ute">***</span></p>
</div>
<div class="IO_box27">
<p><span id="rad">***</span></p>
</div>
<div class="IO_box28">
</div>
<div class="IO_box29">
</div>
<div id="pknap" class="IO_box30">
</div>
<div id="bknap" class="IO_box31">
</div>
<div class="IO_box9">
<H2>Körlägen</H2>
<button id="AnlagDriftlageOn" type="button" onclick="GetButton(14)"> LÅG </button>
<button id="AnlagDriftlageOff" type="button" onclick="GetButton(15)">NORMAL</button>
<button id="AnlagDriftlageAuto" type="button" onclick="GetButton(16)">DUSCHA</button>
</div>
</body>