<!DOCTYPE html>
<html>
<head>
<title>Värmesytem på Angegatan 6</title>
<style>
.ruta_rubrik_css {
position: absolute;
top: 0px;
left: 0px;;
margin: 0 20px 20px 0;
border: none;
padding: 0 5px 0 5px;
width:800px;
height: 60px;
}
.ruta_panna_css {
position: absolute;
top: 100px;
left: 100px;;
margin: 0 10px 20px 0;
border: 1px solid blue;
padding: 0 5px 0 5px;
width: 120px;
height: 250px;
}
.ruta_tank_css {
position: absolute;
top: 100px;
left: 350px;;
margin: 0 20px 20px 0;
border: 1px solid blue;
padding: 0 5px 0 5 px;
width: 120px;
height: 250px;
}
.ruta_ttupp_css {
position: relative;
top: 10px;
left: 38px;;
border: 0px solid blue;
width: 40px;
height: 30px;
}
.ruta_ttmit_css {
position: relative;
top: 40px;
left: 38px;;
border: 0px solid blue;
width: 40px;
height: 30px;
}
.ruta_ttner_css{
position: relative;
top: 100px;
left: 38px;;
border: 0px solid blue;
width: 40px;
height: 30px;
}
.ruta_forin_css {
position: absolute;
top: 370px;
left: 100px;;
padding: 0 5px 0 5px;
margin: 0 0px 0px 0;
border: 1px solid blue;
width: 140px;
height: 60px;
}
.ruta_instälning_css {
position: absolute;
top: 430px;
left: 100px;;
margin: 10px 20px 20px 0;
border: 1px solid blue;
padding: 0 5px 0 5px;
width:700px;
height: 200px;
}
.ruta_körlägen_css {
position: absolute;
top: 90px;
left: 485px;;
border: 1px solid blue;
padding: 0 5px 0 5px;
width: 95px;
height: 130px;
}
.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: 30px;
left: 15px;;
border: 1px solid blue;
width: 90px;
height: 20px;
}
.IO_box15 {
position: absolute;
top: 60px;
left: 15px;;
border: 1px solid blue;
width:90px;
height: 20px;
}
.ruta_solpan_css {
position: absolute;
top: 250px;
left: 600px;
border: 1px solid blue;
width: 110px;
height: 100px;
}
.ruta_rörpanpump_css {
position: absolute;
top: 300px;
left: 230px;;
border: 1px solid blue;
width: 20px;
height: 2px;
background-color: blue;
}
.ruta_rörpantank_css {
position: absolute;
top: 120px;
left: 230px;;
border: 1px solid red;
width: 120px;
height: 2px;
background-color: red;
}
.ruta_rörtanksolk_css {
position: absolute;
top: 340px;
left: 470px;;
border: 1px solid blue;
width: 130px;
height: 1px;
background-color: blue;
}
.ruta_rörtanksolv_css {
position: absolute;
top: 260px;
left: 470px;;
border: 1px solid red;
width: 130px;
height: 1px;
background-color: red;
}
.ruta_rörrad_css {
position: absolute;
top: 230px;
left: 470px;;
border: 1px solid #de5c40;
width: 200px;
height: 1px;
background-color: #de5c40;
}
.ruta_tid_css {
position: absolute;
top: 90px;
left: 600px;;
border: 1px solid blue;
width:100px;
height: 20px;
}
.ruta_dag_css {
position: absolute;
top: 115px;
left: 600px;;
border: 1px solid blue;
width:100px;
height: 20px;
}
.ruta_datum_css {
position: absolute;
top: 140px;
left: 600px;;
border: 1px solid blue;
width:100px;
height: 20px;
}
.ruta_utetep_css {
position: absolute;
top: 165px;
left: 600px;;
margin: px 0px 0px 0px;
padding: 0px 1px 0px 1px;
border: 1px solid blue;
width:100px;
height: 20px;
}
.ruta_radtemp_css {
position: absolute;
top: 207px;
left: 600px;;
border: 1px solid blue;
width:50px;
height: 20px;
}
.ruta_panpumphus_css {
position: absolute;
margin: 0 10px 20px 0;
padding: 0 5px 0 5px;
top: 285px;
left: 250px;;
border: 1px solid blue;
width:20px;
height: 30px;
}
.ruta_rörpumptank_css {
position: absolute;
top: 300px;
left: 280px;;
border: 1px solid blue;
width: 70px;
height: 2px;
background-color: blue;
}
.ruta_statuspump_css {
position: absolute;
top: 290px;
left: 255px;;
border: 1px solid blue;
width: 20px;
height: 20px;
background-color: gray;
}
.ruta_statuspana_css {
position: absolute;
top: 290px;
left: 150px;;
border: 1px solid blue;
width: 20px;
height: 20px;
background-color: gray;
}
.ruta_temptillpanna_css {
position: absolute;
top: 277px;
left: 290px;;
border: 1px solid blue;
width:50px;
height: 20px;
}
.IO_box33 {
position: absolute;
top: 97px;
left: 235px;;
border: 1px solid blue;
width:50px;
height: 20px;
}
.IO_box34 {
position: absolute;
top: 237px;
left: 475px;;
border: 1px solid blue;
width:50px;
height: 20px;
}
.IO_box35 {
position: absolute;
top: 317px;
left: 475px;;
border: 1px solid blue;
width:50px;
height: 20px;
}
.IO_box36 {
position: absolute;
top: 160px;
left: 300px;;
border: 1px solid blue;
width:49px;
height: 60px;
}
.IO_box37 {
position: absolute;
top: 190px;
left: 315px;;
border: 1px solid blue;
width: 20px;
height: 20px;
background-color: gray;
}
.ruta-rökgas_css {
position: relative;
top: 10px;
left: 10px;;
border: 1px solid blue;
width: 100px;
height: 20px;
}
.ruta-bvrökgas_css {
position: relative;
top: 0px;
left: 250px;;
border: 1px solid blue;
width: 100px;
height: 20px;
}
.IO_box39 {
position: absolute;
top: 415px;
left: 100px;;
border: 0px solid blue;
width: 800px;
height: 20px;
}
.ruta_forintim_css {
position: absolute;
top: 0px;
left: 40px;;
border: 1px solid blue;
width: 30px;
height: 20px;
}
.ruta_forinmin_css {
position: absolute;
top: 0px;
left: 75px;;
border: 1px solid blue;
width: 30px;
height: 20px;
}
.ruta_forinrad1_css {
position: absolute;
top: 30px;
left: 10px;;
border: 0px solid blue;
width: 700px;
height: 30px;
}
.ruta_forinrad11_css {
position: absolute;
top: 0px;
left: 110px;;
border: 0px solid blue;
width: 590px;
height: 30px;
}
.ruta_forinrad2_css {
position: absolute;
top: 55px;
left: 10px;;
border: 0px solid blue;
width: 700px;
height: 30px;
}
.ruta_forinrad3_css {
position: absolute;
top: 80px;
left: 10px;;
border: 0px solid blue;
width: 700px;
height: 30px;
}
.ruta_forinrad4_css {
position: absolute;
top: 105px;
left: 10px;;
border: 0px solid blue;
width: 700px;
height: 30px;
}
.ruta_min3_css {
position: relative;
top: 20px;
left: 10px;;
margin: 0 0px 0px 0;
border: 1px solid black;
padding: 0 0px 0 0px;
width:130px;
height: 120px;
}
.ruta_min2_css {
position: relative;
top: 10px;
left: 10px;;
background-color:white;
margin: 0 0px 0px 0;
border: 1px solid black;
padding: 0 10px 0 10px;
width:110px;
height: 20px;
}
.ruta_min1_css {
position: absolute;
top: 250px;
left: 350px;;
margin: 0 0px 0px 0;
background-color:blue;
border: 1px solid black;
padding: 0 0px 0 0px;
width:150px;
height: 180px;
}
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{
font-size: 80%;
margin: 0px 0px 0px 0px;
padding: 3px 3px 3px 3px;
text-align:center;
}
button {
font-size: 80%;
margin: 0px 0px 0px 0px;
padding: opx opx opx opx;
text-align:center;
}
.button_min {
font-size: 100%;
cursor: pointer;
width: 40px;
height: 30px;
}
</style>
<script>
strLED1 = "";
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;
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('ute')[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;
document.getElementById("TopRokGas").innerHTML = this.responseXML.getElementsByTagName('TopRokGas')[0].childNodes[0].nodeValue;
var spup = this.responseXML.getElementsByTagName('spup')[0].childNodes[0].nodeValue;
var sspan = this.responseXML.getElementsByTagName('sspan')[0].childNodes[0].nodeValue;
var fknap1 = document.getElementById("pknap");
var fknap2 ="";
var fknap3 ="";
var light= spup;
var kantal= 1;
bytafarg(light, fknap1 ,fknap2 ,fknap3 ,kantal )
var fknap1 = document.getElementById("bknap");
var fknap2 ="";
var fknap3 ="";
var light= sspan;
var kantal= 1;
bytafarg(light, fknap1 ,fknap2 ,fknap3 ,kantal )
}
}
}
}
request.open("GET", "ajax_inputs" + nocache, true);
request.send(null);
if(ruta_min.style.visibility == "hidden")
{
setTimeout('GetArduinoInputs()', 100000);
}
}
function bytafarg(light, fknap1, fknap2 ,fknap3 ,kantal)
{
if(kantal>1 )
{
if(light == 0)
{
fknap1.style.backgroundColor = "#ffff4d";
fknap2.style.backgroundColor = "#d3d3d3";
if(kantal==3) {
fknap3.style.backgroundColor = "#d3d3d3";
}
}
if(light == 1)
{
fknap1.style.backgroundColor = "#d3d3d3";
fknap2.style.backgroundColor = "#ffff4d";
if(kantal ==3) {
fknap3.style.backgroundColor = "#d3d3d3";
}
}
if(kantal==3)
{
if(light == 2)
{
fknap1.style.backgroundColor = "#d3d3d3";
fknap2.style.backgroundColor = "#d3d3d3";
fknap3.style.backgroundColor = "#ffff4d";
}
}
if(kantal==3) {
if(light == 99) {
fknap1.style.backgroundColor = "#d3d3d3";
fknap2.style.backgroundColor = "#d3d3d3";
fknap3.style.backgroundColor = "#d3d3d3";
}
}
}
if(kantal==1) {
if(light == 0) {
fknap1.style.backgroundColor = "red";
}
else {
fknap1.style.backgroundColor = "green";
}
}
if(kantal==10) {
if(light == 0) {
fknap1.style.backgroundColor = "#d3d3d3";
}
else {
fknap1.style.backgroundColor = "#ffff4d";
}
}
}
function GetButton(knapnr)
{
strLED1 = "&knap"+knapnr;
if (ruta_min.style.visibility == "visible")
{
minehemta()
}
else if (ruta_instälning_css.visibility == "visible")
{
if(knapnr>28 && knapnr<42) {
forhemta1()
}
if(knapnr>41 && knapnr<55) {
forhemta2()
}
if(knapnr>54 && knapnr<68) {
forhemta3()
}
if(knapnr>67 && knapnr<81) {
forhemta4()
}
}
else
{
knaphemta()
}
}
function GetButtonok()
{
strLED1 = "&knap25";
minehemta()
document.getElementById("ruta_minetal").innerHTML ="-"
ruta_min.style.visibility = "hidden";
GetArduinoInputs()
knaphemta()
}
function visap()
{
var ruta1=document.getElementById("pump_ruta");
var ruta2=document.getElementById("bran_ruta");
var ruta3=document.getElementById("rokgas_ruta");
var ruta4=document.getElementById("forin_ruta")
visaruto(ruta1, ruta2, ruta3, ruta4)
}
function visaruto(ruta1, ruta2, ruta3, ruta4)
{
if(ruta1.style.visibility == "visible")
{
ruta1.style.visibility = "hidden";
} else {
ruta1.style.visibility = "visible";
ruta2.style.visibility = "hidden";
ruta3.style.visibility = "hidden";
ruta4.style.visibility = "hidden";
}
}
function visab()
{
var ruta1=document.getElementById("bran_ruta");
var ruta2=document.getElementById("pump_ruta");
var ruta3=document.getElementById("rokgas_ruta");
var ruta4=document.getElementById("forin_ruta")
visaruto(ruta1, ruta2, ruta3, ruta4)
}
function visaR()
{
var ruta1=document.getElementById("rokgas_ruta");
var ruta2=document.getElementById("pump_ruta");
var ruta3=document.getElementById("bran_ruta");
var ruta4=document.getElementById("forin_ruta")
visaruto(ruta1, ruta2, ruta3, ruta4)
}
function visaFIS()
{
var ruta1=document.getElementById("forin_ruta");
var ruta2=document.getElementById("pump_ruta");
var ruta3=document.getElementById("bran_ruta");
var ruta4=document.getElementById("rokgas_ruta")
visaruto(ruta1, ruta2, ruta3, ruta4)
}
function visatalin(knapnr)
{
strLED1 = "&knap"+knapnr;
minehemta()
visamin()
}
function visamin()
{
if(ruta_min.style.visibility == "visible")
{
ruta_min.style.visibility = "hidden";
} else {
ruta_min.style.visibility = "visible";
}
}
function hemta()
{
document.getElementById("bran_ruta").style.visibility = "hidden";
document.getElementById("pump_ruta").style.visibility = "hidden";
document.getElementById("rokgas_ruta").style.visibility = "hidden";
document.getElementById("ruta_min").style.visibility = "hidden";
document.getElementById("forin_ruta").style.visibility = "hidden";
GetArduinoInputs()
knaphemta()
}
function minehemta()
{
nocache = "&nocache=" + Math.random() * 10000;
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseXML != null) {
document.getElementById("ruta_minetal").innerHTML = this.responseXML.getElementsByTagName('minetal')[0].childNodes[0].nodeValue;
}
}
}
}
// send HTTP GET
request.open("GET", "minehemta" + strLED1 + nocache, true);
request.send(null);
strLED1 = "";
}
function forhemta1()
{
nocache = "&nocache=" + Math.random() * 10000;
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseXML != null) {
var kor1 = this.responseXML.getElementsByTagName('till')[0].childNodes[0].nodeValue;
var fknap1 = document.getElementById("tidonknap1");
var fknap2 = ""
var fknap3 = ""
var light= kor1
var kantal= 10;
bytafarg(light, fknap1 ,fknap2 ,fknap3 ,kantal )
document.getElementById("tidtim1").innerHTML = this.responseXML.getElementsByTagName('sh')[0].childNodes[0].nodeValue;
document.getElementById("tidmin1").innerHTML = this.responseXML.getElementsByTagName('smin')[0].childNodes[0].nodeValue;
var kor1 = this.responseXML.getElementsByTagName('kor')[0].childNodes[0].nodeValue;
var fknap1 = document.getElementById("tidknapN1");
var fknap2 = document.getElementById("tidknapL1");
var fknap3 = document.getElementById("tidknapD1");
var light= kor1
var kantal= 3
bytafarg(light, fknap1 ,fknap2 ,fknap3 ,kantal );
var kor1 = this.responseXML.getElementsByTagName('dag1')[0].childNodes[0].nodeValue;
var fknap1 = document.getElementById("tidkdm1");
var fknap2 = ""
var fknap3 = ""
var light= kor1
var kantal= 10;
bytafarg(light, fknap1 ,fknap2 ,fknap3 ,kantal );
var kor1 = this.responseXML.getElementsByTagName('dag2')[0].childNodes[0].nodeValue;
var fknap1 = document.getElementById("tidkdti1");
var fknap2 = ""
var fknap3 = ""
var light= kor1
var kantal= 10;
bytafarg(light, fknap1 ,fknap2 ,fknap3 ,kantal );
var kor1 = this.responseXML.getElementsByTagName('dag3')[0].childNodes[0].nodeValue;
var fknap1 = document.getElementById("tidkdo1");
var fknap2 = ""
var fknap3 = ""
var light= kor1
var kantal= 10;
bytafarg(light, fknap1 ,fknap2 ,fknap3 ,kantal );
var kor1 = this.responseXML.getElementsByTagName('dag4')[0].childNodes[0].nodeValue;
var fknap1 = document.getElementById("tidkdto1");
var fknap2 = ""
var fknap3 = ""
var light= kor1
var kantal= 10;
bytafarg(light, fknap1 ,fknap2 ,fknap3 ,kantal );
var kor1 = this.responseXML.getElementsByTagName('dag5')[0].childNodes[0].nodeValue;
var fknap1 = document.getElementById("tidkdf1");
var fknap2 = ""
var fknap3 = ""
var light= kor1
var kantal= 10;
bytafarg(light, fknap1 ,fknap2 ,fknap3 ,kantal );
var kor1 = this.responseXML.getElementsByTagName('dag6')[0].childNodes[0].nodeValue;
var fknap1 = document.getElementById("tidkdl1");
var fknap2 = ""
var fknap3 = ""
var light= kor1
var kantal= 10;
bytafarg(light, fknap1 ,fknap2 ,fknap3 ,kantal );
var kor1 = this.responseXML.getElementsByTagName('dag7')[0].childNodes[0].nodeValue;
var fknap1 = document.getElementById("tidkds1");
var fknap2 = ""
var fknap3 = ""
var light= kor1
var kantal= 10;
bytafarg(light, fknap1 ,fknap2 ,fknap3 ,kantal );
}
}
}
}
// send HTTP GET
request.open("GET", "forhemta1" + strLED1 + nocache, true);
request.send(null);
strLED1 = "";
}
function knaphemta()
{
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseXML != null) {
var PanaDriftlage = this.responseXML.getElementsByTagName('PanaDriftlage')[0].childNodes[0].nodeValue;
var forinVerme = this.responseXML.getElementsByTagName('forinVerme')[0].childNodes[0].nodeValue;
var AnlagDriftlage = this.responseXML.getElementsByTagName('AnlagDriftlage')[0].childNodes[0].nodeValue;
var PumpDriftlage = this.responseXML.getElementsByTagName('PumpDriftlage')[0].childNodes[0].nodeValue;
document.getElementById("BVRokgas").innerHTML = this.responseXML.getElementsByTagName('BVRokgas')[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;
var fknap1 = document.getElementById("pumpknapoff");
var fknap2 = document.getElementById("pumpknapon");
var fknap3 = document.getElementById("pumpknapauto");
var light= PumpDriftlage
var kantal= 3
bytafarg(light, fknap1 ,fknap2 ,fknap3 ,kantal )
var fknap1 = document.getElementById("panaknapoff");
var fknap2 = document.getElementById("panaknapon");
var fknap3 = document.getElementById("panaknapauto");
var light= PanaDriftlage
var kantal= 3
bytafarg(light, fknap1 ,fknap2 ,fknap3 ,kantal )
var fknap1 = document.getElementById("ADNormal");
var fknap2 = document.getElementById("ADLag");
var fknap3 = document.getElementById("ADDuscha");
var light= AnlagDriftlage
var kantal= 3
bytafarg(light, fknap1 ,fknap2 ,fknap3 ,kantal )
var fknap1 = document.getElementById("forinknapoff");
var fknap2 = document.getElementById("forinknapon");
var fknap3 = ""
var light= forinVerme
var kantal= 2
bytafarg(light, fknap1 ,fknap2 ,fknap3 ,kantal )
}
}
}
}
// send HTTP GET
request.open("GET", "knaphemta" + strLED1 + nocache, true);
request.send(null);
strLED1 = "";
}
</script>
</head>
<body onload="hemta()">
<div class="ruta_rubrik_css">
<h1>Agnegatan 6 värmesystem</h1>
</div>
<div class="ruta_panna_css">
<h2>Panna</h2>
<div class="ruta-rökgas_css" onclick="visaR()">
<p>Rökgas <span id="temprokgas">***</span></p>
</div>
</div>
<div class="ruta_tank_css">
<h2>Tank</h2>
<div class="ruta_ttupp_css">
<p><span id="temptankupp">**.**</span></p>
</div>
<div class="ruta_ttmit_css">
<p><span id="temptankmitt">**.**</span></p>
</div>
<div class="ruta_ttner_css">
<p><span id="temptankner">**.**</span></p>
</div>
</div>
<div id="pump_ruta" class="ruta_instälning_css">
<H2>Pump </H2>
<button id="pumpknapon" type="button" onclick="GetButton(4)"> ON </button>
<button id="pumpknapoff" type="button" onclick="GetButton(5)"> OFF </button>
<button id="pumpknapauto" type="button" onclick="GetButton(2)"> AUTO </button>
</div>
<div id="forin_ruta" class="ruta_instälning_css">
<H2>förinstäld tid </H2>
<div class="ruta_forinrad1_css">
<button id="tidonknap1" type="button" onclick="GetButton(29)"> ON </button>
<div class="ruta_forintim_css" id="tidtim1" onclick="visatalin(30)">
</div>
<div class="ruta_forinmin_css" id="tidmin1" onclick="visatalin(31)">
</div>
<div class="ruta_forinrad11_css">
<button id="tidknapL1" type="button" onclick="GetButton(32)"> LÅG </button>
<button id="tidknapN1" type="button" onclick="GetButton(33)">NORMAL</button>
<button id="tidknapD1" type="button" onclick="GetButton(34)">DUSCHA</button>
<button id="tidkdm1" type="button" onclick="GetButton(35)">MÅN</button>
<button id="tidkdti1" type="button" onclick="GetButton(36)">TIS</button>
<button id="tidkdo1" type="button" onclick="GetButton(37)">ONS</button>
<button id="tidkdto1" type="button" onclick="GetButton(38)">TOR</button>
<button id="tidkdf1" type="button" onclick="GetButton(39)">FRE</button>
<button id="tidkdl1" type="button" onclick="GetButton(40)">LÖR</button>
<button id="tidkds1" type="button" onclick="GetButton(41)">SÖN</button>
</div>
</div>
<div class="ruta_forinrad2_css">
<button id="tidonknap2" type="button" onclick="GetButton(42)"> ON </button>
<div class="ruta_forintim_css" id="tidtim2" onclick="visatalin(43)">
</div>
<div class="ruta_forinmin_css" id="tidmin2" onclick="visatalin(44)">
</div>
<div class="ruta_forinrad11_css">
<button id="tidknapL2" type="button" onclick="GetButton(45)"> LÅG </button>
<button id="tidknapN2" type="button" onclick="GetButton(46)">NORMAL</button>
<button id="tidknapD2" type="button" onclick="GetButton(47)">DUSCHA</button>
<button id="tidkdm2" type="button" onclick="GetButton(48)">MÅN</button>
<button id="tidkdti2" type="button" onclick="GetButton(49)">TIS</button>
<button id="tidkdo2" type="button" onclick="GetButton(50)">ONS</button>
<button id="tidkdto2" type="button" onclick="GetButton(51)">TOR</button>
<button id="tidkdf2" type="button" onclick="GetButton(52)">FRE</button>
<button id="tidkdl2" type="button" onclick="GetButton(53)">LÖR</button>
<button id="tidkds2" type="button" onclick="GetButton(54)">SÖN</button>
</div>
</div>
<div class="ruta_forinrad3_css">
<button id="tidonknap3" type="button" onclick="GetButton(55)"> ON </button>
<div class="ruta_forintim_css" id="tidtim3" onclick="visatalin(56)">
</div>
<div class="ruta_forinmin_css" id="tidmin3" onclick="visatalin(57)">
</div>
<div class="ruta_forinrad11_css">
<button id="tidknapL3" type="button" onclick="GetButton(58)"> LÅG </button>
<button id="tidknapN3" type="button" onclick="GetButton(59)">NORMAL</button>
<button id="tidknapD3" type="button" onclick="GetButton(60)">DUSCHA</button>
<button id="tidkdm3" type="button" onclick="GetButton(61)">MÅN</button>
<button id="tidkdti3" type="button" onclick="GetButton(62)">TIS</button>
<button id="tidkdo3" type="button" onclick="GetButton(63)">ONS</button>
<button id="tidkdto3" type="button" onclick="GetButton(64)">TOR</button>
<button id="tidkdf3" type="button" onclick="GetButton(65)">FRE</button>
<button id="tidkdl3" type="button" onclick="GetButton(66)">LÖR</button>
<button id="tidkds3" type="button" onclick="GetButton(67)">SÖN</button>
</div>
</div>
<div class="ruta_forinrad4_css">
<button id="tidonknap4" type="button" onclick="GetButton(68)"> ON </button>
<div class="ruta_forintim_css" id="tidtim4" onclick="visatalin(69)">
</div>
<div class="ruta_forinmin_css" id="tidmin4" onclick="visatalin(70)">
</div>
<div class="ruta_forinrad11_css">
<button id="tidknapL4" type="button" onclick="GetButton(71)"> LÅG </button>
<button id="tidknapN4" type="button" onclick="GetButton(72)">NORMAL</button>
<button id="tidknapD4" type="button" onclick="GetButton(73)">DUSCHA</button>
<button id="tidkdm4" type="button" onclick="GetButton(74)">MÅN</button>
<button id="tidkdti4" type="button" onclick="GetButton(75)">TIS</button>
<button id="tidkdo4" type="button" onclick="GetButton(76)">ONS</button>
<button id="tidkdto4" type="button" onclick="GetButton(77)">TOR</button>
<button id="tidkdf4" type="button" onclick="GetButton(78)">FRE</button>
<button id="tidkdl4" type="button" onclick="GetButton(79)">LÖR</button>
<button id="tidkds4" type="button" onclick="GetButton(80)">SÖN</button>
</div>
</div>
</div>
<div id="bran_ruta" class="ruta_instälning_css">
<H2>Bränare</H2>
<button id="panaknapon" type="button" onclick="GetButton(6)"> ON </button>
<button id="panaknapoff" type="button" onclick="GetButton(7)"> OFF </button>
<button id="panaknapauto" type="button" onclick="GetButton(1)"> AUTO </button>
<div class="IO_box12">
<H2>När ska bränaren gå</H2>
<div class="IO_box13" onclick="visatalin(26)">
<p>Till <span id="PanTempGrensTill">***</span> (<span id="BPanTempGrensTill">***</span>) </p>
</div>
<div class="IO_box15" onclick="visatalin(27)">
<p>Från <span id="PanTempGrensfran">***</span> (<span id="BPanTempGrensfran">***</span>) </p>
</div>
</div>
</div>
<div class="ruta_solpan_css">
<h2>solpanel</h2>
<p>på tak <span id="soltak">***</span></p>
</div>
<div class="ruta_rörpanpump_css">
</div>
<div class="ruta_rörpantank_css">
</div>
<div class="ruta_rörtanksolk_css">
</div>
<div class="ruta_rörtanksolv_css">
</div>
<div class="ruta_rörrad_css">
</div>
<div class="ruta_tid_css">
<p><span id="tid">***</span></p>
</div>
<div class="ruta_dag_css">
<p><span id="dag">***</span></p>
</div>
<div class="ruta_datum_css">
<p><span id="datum">***</span></p>
</div>
<div class="ruta_utetep_css">
<p>ute <span id="ute">***</span></p>
</div>
<div class="ruta_radtemp_css">
<p><span id="rad">***</span></p>
</div>
<div class="ruta_panpumphus_css">
</div>
<div class="ruta_rörpumptank_css">
</div>
<div id="pknap" class="ruta_statuspump_css" onclick="visap()">
</div>
<div id="bknap" class="ruta_statuspana_css" onclick="visab()">
</div>
<div class="ruta_temptillpanna_css">
<p><span id="tillpanna">***</span></p>
</div>
<div class="IO_box33">
<p><span id="temppanan">***</span></p>
</div>
<div class="IO_box34">
<p><span id="solin">***</span></p>
</div>
<div class="IO_box35">
<p><span id="solut">***</span></p>
</div>
<div class="IO_box36">
<h2>El</h2>
</div>
<div class="IO_box37" onclick="visab()" >
</div>
<div Id="rokgas_ruta" class="ruta_instälning_css">
<h2>rökgas </h2>
<div class="ruta-bvrökgas_css" onclick="visatalin(28)">
<p>börvärde <span id="BVRokgas">***</span>
</div>
<p><span id="TopRokGas">***</span>
<button type="button" onclick="GetButton(13)"> reset </button>
</div>
<div class="ruta_körlägen_css">
<H2>Körlägen</H2>
<button id="ADLag" type="button" onclick="GetButton(10)"> LÅG </button>
<button id="ADNormal" type="button" onclick="GetButton(11)">NORMAL</button>
<button id="ADDuscha" type="button" onclick="GetButton(12)">DUSCHA</button>
<button type="button" onclick="visaFIS()">FÖRINSTÄLD</button>
</div>
<div class="ruta_forin_css">
<H2>förinstäld värme</H2>
<button id="forinknapon" type="button" onclick="GetButton(9)"> ON </button>
<button id="forinknapoff" type="button" onclick="GetButton(8)"> OFF </button>
</div>
<div class="ruta_min1_css" id="ruta_min">
<div class="ruta_min2_css" >
<p><span id="ruta_minetal">_</span></p>
</div>
<div class="ruta_min3_css">
<button class="button_min" onclick="GetButton(14)">1</button>
<button class="button_min" onclick="GetButton(15)">2</button>
<button class="button_min" onclick="GetButton(16)">3</button>
<button class="button_min" onclick="GetButton(17)">4</button>
<button class="button_min" onclick="GetButton(18)">5</button>
<button class="button_min" onclick="GetButton(19)">6</button>
<button class="button_min" onclick="GetButton(20)">7</button>
<button class="button_min" onclick="GetButton(21)">8</button>
<button class="button_min" onclick="GetButton(22)">9</button>
<button class="button_min" onclick="GetButton(23)">0</button>
<button class="button_min" onclick="GetButton(24)">Del</button>
<button class="button_min" onclick="GetButtonok()">ok</button>
</div>
</div>