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

Je nach zustand einer Variable Bild dynamisch laden

chromo23

Neues Mitglied
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:
Werbung:
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:
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.
 
Werbung:
Aber wie generiere ich nun daraus das Menü.
Aus der Anzahl der Nodes soll die Anzahl Menüeinträge generiert werden.

Also ungefähr so:
Code:
 setInterval(async function () {
            response = await fetch("json?view=nodes");
            myJson = await response.json();
            nrNodes = myJson.nodes.length;
            nodeVar[nr] = myJson.nodes[nr].name;
            document.getElementById("nodeVar[nr]Id").innerHTML = nodeVar[nr];
            nodeIp[nr] = myJson.nodes[nr].ip;
            document.getElementById("nodeIp[nr]Id").innerHTML = nodeIp[nr];
        }, 1000);
        
---Dann anhand nrNodes die Anzahl der Menüeinträge

<a id="nodeVar[nr]Id" onclick="window.location.href = 'nodeIp[nr]'">nr</a>
 
Danke nochmals! Besonders die Verweise zum Nachlesen finde ich sehr hilfreich.
Der Code von dir funktionierte fast auf Anhieb nur ")" fehlte am Ende von forEach

Hier noch für dich eine visuelles Feedback:

IMG_9910.GIF
 
Zurück
Oben