I need help with my dashboard

Moderators: grovkillen, Stuntteam, TD-er

Post Reply
Message
Author
User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

I need help with my dashboard

#1 Post by chromo23 » 12 Oct 2021, 16:23

I made me a new dashboard since i needed modern functions like async and sending requests in background rather then loading the hole page.

My old dashboard.esp:
Bildschirmfoto 2021-10-12 um 15.46.39.png
Bildschirmfoto 2021-10-12 um 15.46.39.png (43.79 KiB) Viewed 5978 times
My new "dashboard".html:
Bildschirmfoto 2021-10-12 um 15.49.08.png
Bildschirmfoto 2021-10-12 um 15.49.08.png (31.28 KiB) Viewed 5978 times
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>
But how do i implement this in my new version.
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;">&#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>
                <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 >

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Problem solved: dynamic dashboard

#2 Post by chromo23 » 15 Oct 2021, 10:23

Problem solved:
Dynamic image loading for the indicator lamp now works and switching between light and dark mode too...
IMG_9896.GIF
IMG_9896.GIF (1.12 MiB) Viewed 5900 times
i got the info from another forum and i was also told, that the html is not quite up to date so i changed it. :)

Code: Select all

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="/esp.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<STYLE>
    body {
        margin: 0;
    }

    #container {
        height: 70vh;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
        padding-top: 20%
    }

    #plusminus {
        display: flex
    }
    .boost {
        padding-top: 10%
    }
    .aktuell {
        padding-top: 5%
    }
    a {
        display: inline-block;
    }

    div {
        text-align: center;
    }

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

    .button {
        margin: 4px;
        padding: 14px 60px;
        text-decoration: none;
        border-radius: 14px;
        display: block
    }

    .button:hover {
        background-color: #07D;
        display: block;

    }

    .button:active {
        background-color: #44607a;
        display: block;
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transition: 0.1s
    }

    @media (prefers-color-scheme: dark) {
        * {
            background-color: #222
        }
        .button:hover {
        background-color: #44607a
     }
    }
</STYLE>




<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;
        boostVar = myJson.Sensors[6].TaskValues[0].Value;
        document.getElementById('lamp').src = 'Lamp' + boostVar + '.svg';
    }, 1000);


</script>

<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 id="container">
    <div class="temp soll">
        <a> Soll:</a>
        <br>
        <span style="font-size:60px" id="tempSollId">0</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">0</span>
            <span>&#8451;</span>
        </div>
        <div class="hum">
            <span>Humidity:</span>
            <span id="humVarId">0</span>
            <span>&#8451;</span>
        </div>
    </div>
    <div class="boost">
    <img id="lamp" src="Lamp0.svg" width="80" height="80" alt>
    <a class="button" onclick="submitboost()">Boost</a>
</div>
</div>

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: I need help with my dashboard

#3 Post by TD-er » 15 Oct 2021, 12:50

That's looking good.
Can I use your code to add it to the ReadTheDocs documentation as an example for the dashboard feature?

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: I need help with my dashboard

#4 Post by chromo23 » 15 Oct 2021, 12:51

TD-er wrote: 15 Oct 2021, 12:50 That's looking good.
Can I use your code to add it to the ReadTheDocs documentation as an example for the dashboard feature?
You are very welcome to do so!

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: I need help with my dashboard

#5 Post by chromo23 » 15 Oct 2021, 14:28

Next step could be this:

IMG_9898.GIF
IMG_9898.GIF (709.57 KiB) Viewed 5874 times

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: I need help with my dashboard

#6 Post by chromo23 » 15 Oct 2021, 15:10

@TD-er

this is used to fetch the units right?

Code: Select all

<script><
            function dept_onchange(frmselect) { frmselect.submit(); }
            </script>
Can you show me how to implement this that it displays the units like this:

Code: Select all

<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>

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: I need help with my dashboard

#7 Post by TD-er » 15 Oct 2021, 15:33

Actually, I have no idea as I have not yet done a lot with this dashboard functionality.
Also I don't speak JavaScript very well. As soon as Stackoverflow is down, I completely loose my ability to do anything JavaScript related.
I have programmed in a lot of computer languages, but somehow I never got the hang of JavaScript. It's a real shame.

But this is really something which is way too much underappreciated as the dashboard functionality is really quite powerful.
So if you can dive into this and help get it clear (read: document it :) ) I would really appreciate it.

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: I need help with my dashboard

#8 Post by chromo23 » 15 Oct 2021, 16:57

TD-er wrote: 15 Oct 2021, 15:33 Actually, I have no idea as I have not yet done a lot with this dashboard functionality.
Also I don't speak JavaScript very well. As soon as Stackoverflow is down, I completely loose my ability to do anything JavaScript related.
I have programmed in a lot of computer languages, but somehow I never got the hang of JavaScript. It's a real shame.

But this is really something which is way too much underappreciated as the dashboard functionality is really quite powerful.
So if you can dive into this and help get it clear (read: document it :) ) I would really appreciate it.
At least you are the one-eyed among the blind in this thread.... ;)

I try to dive into it but i am beginning from zero so it probably takes some time or maybe someone is coming for the rescue...

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: I need help with my dashboard

#9 Post by chromo23 » 15 Oct 2021, 21:18

I added a sidebar for easy node access and a "homebutton"....

IMG_9903.GIF
IMG_9903.GIF (1.34 MiB) Viewed 5849 times

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: I need help with my dashboard

#10 Post by TD-er » 16 Oct 2021, 01:01

Cool :)

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: I need help with my dashboard

#11 Post by chromo23 » 16 Oct 2021, 14:16

That's it .. I´ll do now a little bit of weekend.
I can´t really get my head wrapped around these syntaxes... :?
I´t works so have Fun with testing if you like.
It´s missing a node highlight in the menu as an indicator where you at right now and the json requests need to be optimized.

Code: Select all

<!DOCTYPE html>
<html lang='en'>
<link rel="stylesheet" href="/esp.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<STYLE>
    body {
        margin: 0;
    }

    #container {
        height: 100vh;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
        min-height: 500px;
        margin: auto;
        padding: 20%
    }

    #plusminus {
        display: flex
    }

    .boost {
        padding-top: 10%
    }

    .aktuell {
        padding-top: 5%
    }

    a {
        display: inline-block
    }

    div {
        text-align: center
    }

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

    .button {
        margin: 4px;
        padding: 14px 60px;
        text-decoration: none;
        border-radius: 14px;
        display: block
    }

    .button:hover {
        background-color: #07D;
        display: block
    }

    .button:active {
        background-color: #44607a;
        display: block;
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transition: 0.1s
    }

    #opener {
        padding: 20px;
        min-width: 150px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center
    }

    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111111d9;
        overflow-x: hidden;
        transition: 0.5s;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }

    .sidenav a {
        padding: 8px 8px 8px 8px;
        text-decoration: none;
        font-size: 25px;
        display: block;
        transition: 0.3s;
        background: transparent
    }

    .sidenav a:hover {
        color: #f1f1f1
    }

    .sidenav .closebtn {
        position: sticky;
        top: 90%;
        right: 0px;
        font-size: 36px;
        margin-left: 69%
    }

    @media screen and (max-height: 450px) {
        .sidenav {
            padding-top: 15px;
        }

        .sidenav a {
            font-size: 18px;
        }
    }

    @media (prefers-color-scheme: dark) {
        * {
            background-color: #222
        }

        .button:hover {
            background-color: #44607a
        }
    }
</STYLE>


<script>
    function openNav() {
        document.getElementById("mySidenav").style.width = "250px";
    }

    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
    }
</script>

<script>
   async function getSoll() {
    response = await fetch("json");
    myJson = await response.json();
    tempSoll = myJson.Sensors[5].TaskValues[0].Value;
    document.getElementById("tempSollId").innerHTML = tempSoll;
   }
</script>

<script onload="setInterval()">
    setInterval(
        async function sensors() {
            response = await fetch("json");
            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;
            boostVar = myJson.Sensors[6].TaskValues[0].Value;
            document.getElementById('lamp').src = 'Lamp' + boostVar + '.svg';
        }, 1000);
</script> 


<script>
        async function getNodes() {
        response = await fetch("json");
        myJson = await response.json();
        let html = '';
        myJson.nodes.forEach(node => {
            html += `<a id="${node.name}" onclick="window.location.href = 'http://${node.ip}'">${node.name}</a>`;})
                document.getElementById('menueList').innerHTML = html;
    }
</script>

<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 id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a id="menueList">1</a>
</div>


<div id="container">
    <div class="temp soll">
        <a> Soll:</a>
        <br>
        <span style="font-size:60px" id="tempSollId">0</span>
        <span>&#8451;</span>
    </div>
    <div id="plusminus">
        <a class="button" onclick="submitdown(); getSoll()">-</a>
        <a class="button" onclick="submitup(); getSoll()">+</a>
    </div>
    <div class="aktuell">
        Aktuell:
        <div>
            <span>Temperature:</span>
            <span id="tempVarId">0</span>
            <span>&#8451;</span>
        </div>
        <div class="hum">
            <span>Humidity:</span>
            <span id="humVarId">0</span>
            <span>&#8451;</span>
        </div>
    </div>
    <div class="boost">
        <img id="lamp" width="80" height="80" alt>
        <!--*src="Lamp0.svg"-->
        <a class="button" onclick="submitboost()">Boost</a>
    </div>
    <div id="opener">
        <span style="font-size:30px;cursor:pointer" onclick="openNav(); getNodes()">&#9776;</span>
        <span style="font-size:30px;cursor:pointer" onclick="window.location.href = '/tools';">&#8962;</span>
    </div>
</div>

Post Reply

Who is online

Users browsing this forum: Bing [Bot], Google [Bot] and 41 guests