My old dashboard.esp: My new "dashboard".html: As you can see, the svg image is missing in the new version because i don't know how to load an image depending on the status of a value.
With the old code it was easy: (the value is either 0 or 1 so i named the images Lamp0.svg and Lamp1.svg)
Code: Select all
<center>
<table>
<tr><img src="Lamp[dummy#boost].svg" width="70" height="70" alt>
<br><br>
<td><a class='button' href="dashboard.esp?cmd=event,boost">Boost</a>
</table>
</center>
I am a real beginner with this and before i spend more hours than i already have i thought i could ask for help....
Here the code of the new dashboard:
Code: Select all
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="esp.css">
<meta name="viewport" content="width=width=device-width, initial-scale=1">
<STYLE>
* {
font-family: sans-serif;
font-size: 14pt;
background-color: #2b2a2a;
color: #fff;
}
.button {
margin: 4px;
padding: 14px 60px;
color: #FFF;
text-decoration: none;
border-radius: 14px
}
</STYLE>
<head>
<script onload="setInterval()">
setInterval(async function () {
response = await fetch("json?view=sensorupdate");
myJson = await response.json();
tempSoll = myJson.Sensors[5].TaskValues[0].Value;
document.getElementById("tempSollId").innerHTML = tempSoll;
tempVar = myJson.Sensors[7].TaskValues[0].Value;
document.getElementById("tempVarId").innerHTML = tempVar;
humVar = myJson.Sensors[7].TaskValues[1].Value;
document.getElementById("humVarId").innerHTML = humVar;
}, 1000);
</script>
</head>
<body>
<div style="overflow-x:auto;">
<br><br>
<br><br>
<center>
<table>
<tr>
<td style=font-size:30px;"> Soll:</td>
<td style=font-size:30px;" id="tempSollId">Tsoll</td>
<td style=font-size:30px;">℃</td>
</tr>
</table>
</center>
<center>
<table>
<tr>
<td style="text-align:right;"><a class='button' onclick="submitdown()">-</a>
<td style="text-align:left;"><a class='button' onclick="submitup()">+</a>
</tr>
<br><br>
</table>
</center>
<br><br>
<center>
<table>
<tr style="text-align:center;">Aktuell:</tr>
<tr>
<td>Temperature:</td>
<td id="tempVarId">Temp</td>
<td>℃</td>
</tr>
<tr>
<td style="text-align:right;">Humidity:</td>
<td id="humVarId">Hum<td style="text-align:left;" >%</td> </td>
</tr>
</table>
</center>
<br><br>
<center>
<table>
<tr>
<img src="Lamp[dummy#boost].svg" width="70" height="70" alt>
<br><br>
<br><br>
<td><a class='button' onclick="submitboost()">Boost</a>
</tr>
</table>
</center>
<br><br>
<script type="text/javascript">
function submitdown() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
}
}
xhr.open('get', 'control?cmd=event,down', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send();
}
</script>
<script type="text/javascript">
function submitup() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
}
}
xhr.open('get', 'control?cmd=event,up', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send();
}
</script>
<script type="text/javascript">
function submitboost() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
}
}
xhr.open('get', 'control?cmd=event,boost', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send();
}
</script>
</div >