mini dashboard reload
Moderators: grovkillen, Stuntteam, TD-er
mini dashboard reload
hi,
is there an option to reload the value of a sensor like [ds18b20#Temperature]
automatically without reloading the whole page?
is there an option to reload the value of a sensor like [ds18b20#Temperature]
automatically without reloading the whole page?
- grovkillen
- Core team member
- Posts: 3621
- Joined: 19 Jan 2017, 12:56
- Location: Hudiksvall, Sweden
- Contact:
Re: mini dashboard reload
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
ESP Easy Webdumper [easy screendumping of your units]
ESP Easy Netscan [find units]
Official shop: https://firstbyte.shop/
Sponsor ESP Easy, we need you
Re: mini dashboard reload
i´ve tried some code, but somehow it doesnt work:
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 onload="meineFunktion()">
<script>
function meineFunktion()
{
setInterval(document.write("[s04#Distance]"), 1000);
}
</script>
<br>
</HTML>
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 (5.28 KiB) Viewed 16255 times
-
- db2pic.PNG (7.61 KiB) Viewed 16255 times
- grovkillen
- Core team member
- Posts: 3621
- Joined: 19 Jan 2017, 12:56
- Location: Hudiksvall, Sweden
- Contact:
Re: mini dashboard reload
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
ESP Easy Webdumper [easy screendumping of your units]
ESP Easy Netscan [find units]
Official shop: https://firstbyte.shop/
Sponsor ESP Easy, we need you
Re: mini dashboard reload
tnx,
i'll try that.
does it make a performance or memory difference using
<espeasyip>/json
or only
<espeasyip>/json?tasknr=<tasknumber>&view=sensorupdate
?
i'll try that.
does it make a performance or memory difference using
<espeasyip>/json
or only
<espeasyip>/json?tasknr=<tasknumber>&view=sensorupdate
?
- grovkillen
- Core team member
- Posts: 3621
- Joined: 19 Jan 2017, 12:56
- Location: Hudiksvall, Sweden
- Contact:
Re: mini dashboard reload
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
ESP Easy Webdumper [easy screendumping of your units]
ESP Easy Netscan [find units]
Official shop: https://firstbyte.shop/
Sponsor ESP Easy, we need you
Re: mini dashboard reload
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.
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.
Re: mini dashboard reload
i tried to fetch it this way:
but firefox tells me:
is this set in espeasy?
Code: Select all
const response1 = await fetch('http://192.168.3.10/json');
const myJson1 = await response1.json();
console.log(JSON.stringify(myJson1));
"Content Security Policy: The page's settings blocked the loading of a recource http....
is this set in espeasy?
Re: mini dashboard reload
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?
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?
Re: mini dashboard reload
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:
whole file:
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>
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>
Re: mini dashboard reload
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?
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>
Re: mini dashboard reload
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.
But it should only replace the things it can replace and not remove the [] from the code when it cannot replace parts.
-
- New user
- Posts: 2
- Joined: 09 Sep 2019, 09:19
Re: mini dashboard reload
You should fetch and check the display page on how to fetch it.
Re: mini dashboard reload
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.
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.
Re: mini dashboard reload
Rename the file to .htm (without the L)
Re: mini dashboard reload
man - that was just too easy ..
now the source code looks good, but the console throws
when i insert this to the console:
it does exactly what i want.
i just dont understand why and where async should be needed when i use this:
now the source code looks good, but the console throws
at me.SyntaxError: await is only valid in async functions and async generators
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;
Re: mini dashboard reload
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.
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.
Re: mini dashboard reload
got it! (i think)
if someone is interested:
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>
- grovkillen
- Core team member
- Posts: 3621
- Joined: 19 Jan 2017, 12:56
- Location: Hudiksvall, Sweden
- Contact:
Re: mini dashboard reload
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
ESP Easy Webdumper [easy screendumping of your units]
ESP Easy Netscan [find units]
Official shop: https://firstbyte.shop/
Sponsor ESP Easy, we need you
Re: mini dashboard reload
man - and i thought i was done^^
seems to fix this.
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>
Re: mini dashboard reload
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.
You can have a look at the JavaScript made by Grovkillen in the Device tab page.
Re: mini dashboard reload
i dont quite grasp the utility of "suggested interval"
(does TTL mean time to live?).
is there any difference between using TTL and TaskInterval?
(does TTL mean time to live?).
is there any difference between using TTL and TaskInterval?
- grovkillen
- Core team member
- Posts: 3621
- Joined: 19 Jan 2017, 12:56
- Location: Hudiksvall, Sweden
- Contact:
Re: mini dashboard reload
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
ESP Easy Webdumper [easy screendumping of your units]
ESP Easy Netscan [find units]
Official shop: https://firstbyte.shop/
Sponsor ESP Easy, we need you
Re: mini dashboard reload
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.
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.
Who is online
Users browsing this forum: No registered users and 119 guests