Je nach zustand einer Variable Bild dynamisch laden

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

chromo23

Neues Mitglied
14 Oktober 2021
3
0
1
40
Hallo,
ich bin neu hier und habe leider überhaupt keine Ahnung, versuche aber immer bevor ich etwas frage zu recherchieren ob das Thema nicht schon existiert. Aber bisher habe ich nichts gefunden deshalb nun eine Frage hier im Forum.
Ich habe mir eine kleine Seite gebastelt die auf einem "webserver" liegt (esp8266). Dort sind neben einer css datei auch zwei svg bilder, die eine Lampe darstellen.
(Lampe0.svg und Lampe1.svg) Diese beiden sollen optisch den Zustand einer Sache wiedergeben. Der Zustand wird per json Abfrage ermittelt. Je nachdem ob eine 0 oder 1 das Ergebnis ist soll das entsprechende Bild geladen werden.
Bis jetzt ist das der Platzhalter:
Code:
<img src="Lamp[Variable].svg" width="70" height="70" alt>
Wie würde entsprechender Code dafür aussehen?

Hier der Code dazu:
(die Seite habe ich leidlich zusammengeklickt da ich wie schon erwähnt Anfänger bin und noch nicht so richtig die Ahnung habe)
Code:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="/esp.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<STYLE>
    * {
        font-family: sans-serif;
        font-size: 14pt;
        background-color: #ffffff
      
    }

    .button {
        margin: 4px;
        padding: 14px 60px;
        text-decoration: none;
        border-radius: 14px
    }
    .button:hover {background-color: #44607a}

.button:active {
  background-color: rgb(72, 147, 221);
  transform: scale(1.1, 1.1)
}
    @media (prefers-color-scheme: dark) {
        * {
        background-color: #222
    }

    }
</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;">&#8451;</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>&#8451;</td>
                </tr>
            </center>
        </table>
          
            <center>
                <table>
                <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[Variable].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 >

So soll das dann aussehen:
Bildschirmfoto 2021-10-14 um 18.15.06.png
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Wie würde entsprechender Code dafür aussehen?
Zunächst dem img-Tag eine ID geben:
Code:
<img id="lamp" width="70" height="70" alt>
Dann kannst Du mit dieser Anweisung das Bild anzeigen:
Code:
document.getElementById('lamp').src = 'Lamp' + Variable +'.svg';
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
BTW: Dein HTML ist nicht ganz auf der Höhe der Zeit, so wäre es besser:
HTML:
    <div id="container">
        <div class="temp soll">
            <span> Soll:</span>
            <span id="tempSollId">31</span>
            <span>&#8451;</span>
        </div>
        <div id="plusminus">
            <a class="button" onclick="submitdown()">-</a>
            <a class="button" onclick="submitup()">+</a>
        </div>
        <div class="aktuell">
            Aktuell:
            <div>
                <span>Temperature:</span>
                <span id="tempVarId">31</span>
                <span>&#8451;</span>
            </div>
            <div class="hum">
                <span>Humidity:</span>
                <span id="humVarId">70</span>
                <span>&#8451;</span>
            </div>
        </div>
        <img src="images/lion-saved.svg" width="70" height="70" alt>
        <a class="button" onclick="submitboost()">Boost</a>
    </div>
und dann dieses zusätzliche CSS:
CSS:
        body {
            margin: 0;
        }

        #container {
            height: 100vh;
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            align-items: center;
        }

        a {
            display: inline-block;
        }

        div {
            text-align: center;
        }

        .temp.soll span {
            font-size: 30px;
        }
 

chromo23

Neues Mitglied
14 Oktober 2021
3
0
1
40
Wow, dass ist ja im Nachhinein betrachtet gar nicht so kompliziert. :)
Vielen lieben Dank!!! Jetzt funktioniert es ganz hervorragend....

Edit: Kann ich auf diese Art und Weise auch den Style eines z.B. Textes verändern? Also, dass er je nach Variable z.B. weiß oder rot ist oder kann man sogar ein array erstellen wo die mehre Variablenwerte bestimmten Farben zugeordnet sind?
 
Zuletzt bearbeitet:

chromo23

Neues Mitglied
14 Oktober 2021
3
0
1
40
Ich habe noch eine Frage bezüglich die er konkreten Seite:

Hiermit hol ich mir ja die Werte via Json:
Code:
 <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>

Nun möchte ich gerne die Namen und die Anzahl der Verbundenen Nodes abrufen um sie in ein dynamisches Menü zu packen. So sieht das im Json Format aus:

Code:
"nodes":[
{"nr":0,
"name":"Junkers",
"build":20115,
"platform":"ESP Easy Mega",
"ip":"192.168.1.111",
"age":1
},{"nr":1,
"name":"testesp",
"build":20112,
"platform":"ESP Easy Mega",
"ip":"192.168.1.102",
"age":1
},{"nr":3,
"name":"esp1x",
"build":20114,
"platform":"ESP Easy Mega",
"ip":"192.168.1.103",
"age":0
}],

Die Auflistung der Nodes im Seitenmenü sieht so aus:
Code:
<div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">node1</a>
    <a href="#">node2</a>
    <a href="#">node3</a>
    <a href="#">node4</a>
</div>

Also den Namen samt IP zu bekommen und sie zu einem Menüeintrag machen bekomme ich ja zur Not noch hin.
Aber ich weiß nicht wie ich die Anzahl der Nodes abfrage (diese ist veränderlich) um damit dann die Menüeinträge generieren zu lassen.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Die Anzahl der Nodes kannst Du mit length ermitteln:
Code:
        setInterval(async function () {
            response = await fetch("json?view=nodes");
            myJson = await response.json();
            nrNodes = myJson.nodes.length;
        }, 1000);