mini dashboard reload

Moderators: grovkillen, Stuntteam, TD-er

Post Reply
Message
Author
ingoiot
Normal user
Posts: 39
Joined: 15 Aug 2019, 22:09

mini dashboard reload

#1 Post by ingoiot » 19 Sep 2019, 23:11

hi,

is there an option to reload the value of a sensor like [ds18b20#Temperature]
automatically without reloading the whole page?

User avatar
grovkillen
Core team member
Posts: 3284
Joined: 19 Jan 2017, 12:56
Location: Hudiksvall, Sweden
Contact:

Re: mini dashboard reload

#2 Post by grovkillen » 20 Sep 2019, 07:59

Yes you can by using JavaScript
ESP Easy Flasher [flash tool and wifi setup at flash time]
ESP Easy Webdumper [easy screendumping of your units]
ESP Easy Netscan [find units]
Official shop: https://firstbyte.shop/
Sponsor ESP Easy, we need you :idea: :idea: :idea:

ingoiot
Normal user
Posts: 39
Joined: 15 Aug 2019, 22:09

Re: mini dashboard reload

#3 Post by ingoiot » 20 Sep 2019, 11:58

i´ve tried some code, but somehow it doesnt work:

Code: Select all

<br><br>
<H3>DISTANZ:</h3>
<br onload="meineFunktion()">

<script>

function meineFunktion()
{

setInterval(document.write("[s04#Distance]"), 1000);
}

</script>
<br>
</HTML>
the inspector in firefox is shown in the db2pic.png

the following code shows the value twice in the code inspector
(once on the site itself)
but i dont understand why the value shows two times in this example,
and why document.write displays nothing.
(inpector db3pic.png)

Code: Select all

<br><br>
<H3>DISTANZ:</h3>
<br>
<script>

document.write("[s04#Distance]");

</script>
<br>
</HTML>
Attachments
db3pic.PNG
db3pic.PNG (5.28 KiB) Viewed 1553 times
db2pic.PNG
db2pic.PNG (7.61 KiB) Viewed 1553 times

User avatar
grovkillen
Core team member
Posts: 3284
Joined: 19 Jan 2017, 12:56
Location: Hudiksvall, Sweden
Contact:

Re: mini dashboard reload

#4 Post by grovkillen » 20 Sep 2019, 12:15

You need to fetch the data from the /JSON endpoint.
ESP Easy Flasher [flash tool and wifi setup at flash time]
ESP Easy Webdumper [easy screendumping of your units]
ESP Easy Netscan [find units]
Official shop: https://firstbyte.shop/
Sponsor ESP Easy, we need you :idea: :idea: :idea:

ingoiot
Normal user
Posts: 39
Joined: 15 Aug 2019, 22:09

Re: mini dashboard reload

#5 Post by ingoiot » 20 Sep 2019, 18:06

tnx,
i'll try that.

does it make a performance or memory difference using
<espeasyip>/json

or only
<espeasyip>/json?tasknr=<tasknumber>&view=sensorupdate

?

User avatar
grovkillen
Core team member
Posts: 3284
Joined: 19 Jan 2017, 12:56
Location: Hudiksvall, Sweden
Contact:

Re: mini dashboard reload

#6 Post by grovkillen » 20 Sep 2019, 18:09

No you need to fetch it. You can study the device page how I do the fetch.
ESP Easy Flasher [flash tool and wifi setup at flash time]
ESP Easy Webdumper [easy screendumping of your units]
ESP Easy Netscan [find units]
Official shop: https://firstbyte.shop/
Sponsor ESP Easy, we need you :idea: :idea: :idea:

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

Re: mini dashboard reload

#7 Post by TD-er » 20 Sep 2019, 18:42

Please do not query the json url too often. It will cause a queue in the ESP which will eventually crash.

Continuous F5 in the browser is a good way to crash the ESP.
So I would say, don't go below 1x per sec.
There is also a suggested time to retry in the JSON as used on the device tab to refresh the values.
This suggested retry time is the expected time a new value will be present.

ingoiot
Normal user
Posts: 39
Joined: 15 Aug 2019, 22:09

Re: mini dashboard reload

#8 Post by ingoiot » 09 Oct 2019, 18:48

i tried to fetch it this way:

Code: Select all

const response1 = await fetch('http://192.168.3.10/json');
const myJson1 = await response1.json();
console.log(JSON.stringify(myJson1));
but firefox tells me:
"Content Security Policy: The page's settings blocked the loading of a recource http....

is this set in espeasy?

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

Re: mini dashboard reload

#9 Post by TD-er » 09 Oct 2019, 22:07

Hmm, that looks like a cross-site scripting protection.
As far as I know, we do set a flag which allows the JSON URL's to be used in cross-site scripts.

Or it could be your browser does not accept mixed content from HTTPS and HTTP url's?

ingoiot
Normal user
Posts: 39
Joined: 15 Aug 2019, 22:09

Re: mini dashboard reload

#10 Post by ingoiot » 11 Oct 2019, 18:33

tnx,
looks like it was a Problem with the Browser - on an other computer it works.

now i have a little Problem with my code maybe someone can point me in the right direction.
I think it might have something to do with scope, but im not sure.

code part:

Code: Select all

<head>
    <script>

        object.onload = function tempSet() {
            const response = await fetch("/json?view=sensorupdate");
            const myJson = await response.json();
            let tempVar = myJson.Sensors[5].TaskValues[0].Value;
            document.getElementById("tempId").innerHtml = tempVar;
        }


    </script>
</head>

<body>

    <h1 style="color:Red; font-size:30px;">Temperaturen</h1>

    <div style="overflow-x:auto;">
        <table>
            <tr>
                <th>Temperatur 1</th>
                <th id="tempId">Temperatur 1wert</th>
            </tr>

        </table>
    </div>

</body>
whole file:

Code: Select all

<meta name="viewport" content="width=width=device-width, initial-scale=1">
<STYLE>
    * {
        font-family: sans-serif;
        font-size: 16pt;
    }

    .button {
        margin: 4px;
        padding: 4px 16px;
        background-color: #07D;
        color: #FFF;
        text-decoration: none;
        border-radius: 4px
    }
</STYLE>

</HTML>

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td,
    h1 {
        text-align: center;
        padding: 8px;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
</style>

<head>
    <script>

        object.onload = function tempSet() {
            const response = await fetch("/json?view=sensorupdate");
            const myJson = await response.json();
            let tempVar = myJson.Sensors[5].TaskValues[0].Value;
            document.getElementById("tempId").innerHtml = tempVar;
        }


    </script>
</head>

<body>

    <h1 style="color:Red; font-size:30px;">Temperaturen</h1>

    <div style="overflow-x:auto;">
        <table>
            <tr>
                <th>Temperatur 1</th>
                <th id="tempId">Temperatur 1wert</th>
            </tr>

        </table>
    </div>

</body>

</html>
</body>

</html>

ingoiot
Normal user
Posts: 39
Joined: 15 Aug 2019, 22:09

Re: mini dashboard reload

#11 Post by ingoiot » 13 Oct 2019, 11:42

i just optimized the code a little, and noticed that when i view the source code in the browser,
the square brackets of the array are cut off, and the console shows variable not declared. Why is that?

Code: Select all

<head>
    <script>
 
 
       window.addEventListener("load", () => {
            const response = await fetch("/json?view=sensorupdate");
            const myJson = await response.json();
            let tempVar = myJson.Sensors[3].TaskValues[0].Value;
            document.getElementById("tempId").innerHTML = tempVar;
        })
 
    </script>
 
</head>
<head>
<script>


window.addEventListener("load", () => {
const response = await fetch("/json?view=sensorupdate");
const myJson = await response.json();
let tempVar = myJson.Sensors.TaskValues.Value;
document.getElementById("tempId").innerHTML = tempVar;
})

</script>

</head>

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

Re: mini dashboard reload

#12 Post by TD-er » 13 Oct 2019, 20:41

The only reason I can think of right now is that the script may be sent through the template replacement routines to be able to have some system variables replaced in the source.
But it should only replace the things it can replace and not remove the [] from the code when it cannot replace parts.

Nestitherapy
Normal user
Posts: 2
Joined: 09 Sep 2019, 09:19

Re: mini dashboard reload

#13 Post by Nestitherapy » 14 Oct 2019, 08:15

You should fetch and check the display page on how to fetch it.

ingoiot
Normal user
Posts: 39
Joined: 15 Aug 2019, 22:09

Re: mini dashboard reload

#14 Post by ingoiot » 15 Oct 2019, 20:43

i think im doing pretty much exact that.

when i save the file as .html the browser shows the sqaure brackets where they should be,
but unfortunately the site is shown as plain text, no idea why.

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

Re: mini dashboard reload

#15 Post by TD-er » 15 Oct 2019, 21:59

Rename the file to .htm (without the L)

ingoiot
Normal user
Posts: 39
Joined: 15 Aug 2019, 22:09

Re: mini dashboard reload

#16 Post by ingoiot » 15 Oct 2019, 22:58

man - that was just too easy :(..

now the source code looks good, but the console throws
SyntaxError: await is only valid in async functions and async generators
at me.

when i insert this to the console:

Code: Select all

             const response = await fetch("/json?view=sensorupdate");
            const myJson = await response.json();
            let tempVar = myJson.Sensors[3].TaskValues[0].Value;
            document.getElementById("tempId").innerHTML = tempVar;

it does exactly what i want.
i just dont understand why and where async should be needed when i use this:

Code: Select all

 window.addEventListener("load", () => {
            const response = await fetch("/json?view=sensorupdate");
            const myJson = await response.json();
            let tempVar = myJson.Sensors[3].TaskValues[0].Value;
            document.getElementById("tempId").innerHTML = tempVar;

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

Re: mini dashboard reload

#17 Post by TD-er » 16 Oct 2019, 02:10

Well I don't speak JavaScript, especially not at this hour :)
But I can imagine await is needed to have some callback on a function which does return immediately but does its task in the background and at finish calls your await'ed function.
I've heard people talk about 'promises' in JavaScript, so maybe that's a good Google term for looking into this?

So given the warning you get, I would say the await does actually do nothing in your case, since the function before it will only return when the task was done.

ingoiot
Normal user
Posts: 39
Joined: 15 Aug 2019, 22:09

Re: mini dashboard reload

#18 Post by ingoiot » 16 Oct 2019, 20:36

got it! (i think)

if someone is interested:

Code: Select all

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=width=device-width, initial-scale=1">
<STYLE>
    * {
        font-family: sans-serif;
        font-size: 16pt;
    }
 
    .button {
        margin: 4px;
        padding: 4px 16px;
        background-color: #07D;
        color: #FFF;
        text-decoration: none;
        border-radius: 4px
    }
 
    table {
        border-collapse: collapse;
        width: 100%;
    }
 
    th,
    td,
    h1 {
        text-align: center;
        padding: 8px;
    }
 
    tr:nth-child(even) {
        background-color: #f200f2;
    }
</style>
 
<head>
    <script onload="setInterval()">
 
 
 setInterval (async function() {
 
            response = await fetch("/json?view=sensorupdate");
            myJson = await response.json();
            tempVar = myJson.Sensors[1].TaskValues[0].Value;
            document.getElementById("tempId").innerHTML = tempVar;
        },1000);

        
    </script>
 
</head>
 
<body>
 
    <h1 style="color:Red; font-size:30px;">Temperaturen</h1>
 
    <div style="overflow-x:auto;">
        <table>
            <tr>
                <th>Temperatur 1</th>
                <th id="tempId">Temperatur 1wert</th>
            </tr>
 
        </table>
    </div>

User avatar
grovkillen
Core team member
Posts: 3284
Joined: 19 Jan 2017, 12:56
Location: Hudiksvall, Sweden
Contact:

Re: mini dashboard reload

#19 Post by grovkillen » 16 Oct 2019, 21:09

Yes that works but it will fetch the value once every second even if you have the interval of the sensor set to once per 10, 30 or 60 seconds.
ESP Easy Flasher [flash tool and wifi setup at flash time]
ESP Easy Webdumper [easy screendumping of your units]
ESP Easy Netscan [find units]
Official shop: https://firstbyte.shop/
Sponsor ESP Easy, we need you :idea: :idea: :idea:

ingoiot
Normal user
Posts: 39
Joined: 15 Aug 2019, 22:09

Re: mini dashboard reload

#20 Post by ingoiot » 16 Oct 2019, 22:39

man - and i thought i was done^^

Code: Select all

    <script onload="setInterval()">
        var tempVarInterval = 1000;

        setInterval(async function () {

            response = await fetch("/json?view=sensorupdate");
            myJson = await response.json();
            tempVar = myJson.Sensors[1].TaskValues[0].Value;
            tempVarInterval = myJson.Sensors[1].TaskInterval;
            document.getElementById("tempId").innerHTML = tempVar;
        }, tempVarInterval);


    </script>
seems to fix this.

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

Re: mini dashboard reload

#21 Post by TD-er » 17 Oct 2019, 00:58

The suggested interval is also given in the JSON as a TTL value.
You can have a look at the JavaScript made by Grovkillen in the Device tab page.

ingoiot
Normal user
Posts: 39
Joined: 15 Aug 2019, 22:09

Re: mini dashboard reload

#22 Post by ingoiot » 17 Oct 2019, 19:02

i dont quite grasp the utility of "suggested interval"
(does TTL mean time to live?).

is there any difference between using TTL and TaskInterval?

User avatar
grovkillen
Core team member
Posts: 3284
Joined: 19 Jan 2017, 12:56
Location: Hudiksvall, Sweden
Contact:

Re: mini dashboard reload

#23 Post by grovkillen » 17 Oct 2019, 19:52

Since you're only interested in one value you can use the individual interval. But if you want to get ALL the values you should use the TTL since that one is suggesting when the next value will be updated.
ESP Easy Flasher [flash tool and wifi setup at flash time]
ESP Easy Webdumper [easy screendumping of your units]
ESP Easy Netscan [find units]
Official shop: https://firstbyte.shop/
Sponsor ESP Easy, we need you :idea: :idea: :idea:

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

Re: mini dashboard reload

#24 Post by TD-er » 17 Oct 2019, 23:04

The TTL value is more dynamic and indeed based on all tasks.
It is roughly -what Grovkillen also said- an indicator when to expect a new value.

Still, if the "interval timer" of all plugins is set to the default 60 seconds, then it will take roughly 30 seconds on average before you'll see a switch value being updated after pressing the button.

Post Reply

Who is online

Users browsing this forum: No registered users and 11 guests