<!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: relative;
top: 100px;
left: 38px;;
border: 0px solid blue;
width: 40px;
height: 30px;
}
.IO_box7 {
position: absolute;
top: 150px;
left: 280px;;
margin: 0 20px 20px 0;
border: 1px solid blue;
padding: 0 5px 0 5px;
width: 100px;
height: 80px;
}
.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: 35px;
left: 10px;;
padding: 0 5px 0 5px;
margin: 0 20px 20px 0;
border: 1px solid blue;
width:180px;
height: 100px;
}
.IO_box10 {
position: absolute;
top: 105px;
left: 230px;;
padding: 0 5px 0 5px;
margin: 0 20px 20px 0;
border: 1px solid blue;
width:100px;
height: 60px;
}
.IO_box11 {
position: absolute;
top: 35px;
left: 230px;;
padding: 0 5px 0 5px;
margin: 0 20px 20px 0;
border: 1px solid blue;
width:100px;
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:150px;
height: 100px;
}
.IO_box13 {
position: absolute;
top: 20px;
left: 5px;;
border: 0px solid blue;
width:50px;
height: 20px;
}
.IO_box14 {
position: absolute;
top: 25px;
left: 70px;;
border: 0px solid blue;
width:100px;
height: 20px;
}
.IO_box15 {
position: absolute;
top: 50px;
left: 5px;;
border: 0px solid blue;
width:50px;
height: 20px;
}
.IO_box16 {
position: absolute;
top: 55px;
left: 70px;;
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: 50%;
color: White;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
strLED1 = "";
strLED2 = "";
strLED3 = "";
strLED4 = "";
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;
document.getElementById("sspan").innerHTML =
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("driftlage").innerHTML =
this.responseXML.getElementsByTagName('driftlage')[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;
if (spup == 0) {
document.getElementById("pknap").style.backgroundColor = "red";
}
if (spup == 1) {
document.getElementById("pknap").style.backgroundColor = "green";
}
if (sspan == 0) {
document.getElementById("bknap").style.backgroundColor = "red";
}
if (sspan == 1) {
document.getElementById("bknap").style.backgroundColor = "green";
}
}
}
}
}
request.open("GET", "ajax_inputs" + strLED1 + nocache, true);
request.send(null);
setTimeout('GetArduinoInputs()', 1000);
strLED1 = "";
strLED2 = "";
strLED3 = "";
strLED4 = "";
}
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";
}
</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_box7">
<p>Pannan är <span id="sspan">***</span></p>
<p>pumpen är <span id="spup">***</span></p>
</div>
<div class="IO_box8">
<h2>Instäningar</h2>
<div class="IO_box9">
<H2>Anlägningen är i </H2>
<p><span id="driftlage">***</span></p>
<button type="button" onclick="GetButton1()"> AUTO </button>
<button type="button" onclick="GetButton2()"> MAN </button>
<button type="button" onclick="GetButton3()"> OFF </button>
</div>
<div class="IO_box10">
<H2>Pump </H2>
<button type="button" onclick="GetButton4()"> ON </button>
<button type="button" onclick="GetButton5()"> OFF </button>
</div>
<div class="IO_box11">
<H2>Bränare</H2>
<button type="button" onclick="GetButton6()"> ON </button>
<button type="button" onclick="GetButton7()"> OFF </button>
</div>
<div class="IO_box12">
<H2>När ska bränaren gå</H2>
<div class="IO_box13">
<p>Till <span id="PanTempGrensTill">***</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></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>
</body>