.esp dashboard reload on ios

Moderators: grovkillen, Stuntteam, TD-er

Post Reply
Message
Author
supersjimmie
Normal user
Posts: 13
Joined: 09 Oct 2020, 15:19

.esp dashboard reload on ios

#1 Post by supersjimmie » 21 Dec 2020, 15:34

I tried the suggestions on:
https://www.letscontrolit.com/wiki/inde ... _Dashboard
and
viewtopic.php?t=7038

What I want to create is a simple page for setting my thermostat, which is a Level Control plugin via a mini dashboard, that also shows the current temperature which is updates every minute.
I do get either the Level Control setting from [thermostat#getLevel] working OR the current temperature updated via the json and the script.

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;
    }
 
</style>
 
<head>
    <script onload="setInterval()">
        var tempVarInterval = 1000;

        setInterval(async function () {

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


    </script>
 
</head>
 
<body>
 
    <h1 style="color:Red; font-size:30px;">Temperatuur</h1>
 
    <div style="overflow-x:auto;">
        <table>
            <tr>
                <th>Huidige</th>
                <th id="tempId">t</th>
            </tr>
 
			<tr>
				<th>Thermostaat </th>
				<th>[thermostat#getLevel]</th>
			</tr>
			
			<tr>
				<th><a class='button link' href="thermostat.esp?cmd=event,tempup">Hoger</a></th>
			</tr>
			<tr>
				<th><a class='button link' href="thermostat.esp?cmd=event,tempdown">Lager</a></th>
			</tr>

        </table>
    </div>
	

</body>
</html>
When I call the file dashboardt.esp, the [thermostat#getLevel] piece displays the current state of the Level Control plugin. But the <script> piece does not work (so here it just says 't').
When I call the file dashboardt.htm, the script updates the id="tempId piece but the [thermostat#getLevel] simply shows "[thermostat#getLevel]" instead of becoming the current pluging setting.

To add: it does seem to work on my laptop with chrome and the file called thermostat.esp but not on my iPhone.
And yes, I want it on my iPhone since that is the most easy remote-control.

From what I understand, the [thermostat#getLevel] is only rendered if the page is ending with .esp.
And on my iPhone an .esp file does not run the script?


EDIT:
It does seem to come from this piece in the LoadFromFS.cpp:

Code: Select all


  if (path.endsWith(F(".src"))) { path = path.substring(0, path.lastIndexOf(".")); }
  else if (path.endsWith(F(".htm")) || path.endsWith(F(".html")) || path.endsWith(F(".htm.gz")) || path.endsWith(F(".html.gz"))) { dataType = F("text/html"); }
  else if (path.endsWith(F(".css")) || path.endsWith(F(".css.gz"))) { dataType = F("text/css"); }
  else if (path.endsWith(F(".js")) || path.endsWith(F(".js.gz"))) { dataType = F("application/javascript"); }
  else if (path.endsWith(F(".png")) || path.endsWith(F(".png.gz"))) { dataType = F("image/png"); }
  else if (path.endsWith(F(".gif")) || path.endsWith(F(".gif.gz"))) { dataType = F("image/gif"); }
  else if (path.endsWith(F(".jpg")) || path.endsWith(F(".jpg.gz"))) { dataType = F("image/jpeg"); }
  else if (path.endsWith(F(".ico"))) { dataType = F("image/x-icon"); }
  else if (path.endsWith(F(".svg"))) { dataType = F("image/svg+xml"); }
  else if (path.endsWith(F(".json"))) { dataType = F("application/json"); }
  else if (path.endsWith(F(".txt")) ||
           path.endsWith(F(".dat"))) { dataType = F("application/octet-stream"); }
#ifdef WEBSERVER_CUSTOM
  else if (path.endsWith(F(".esp"))) { return handle_custom(path); }
#endif
This tells to only handle .esp files as custom files in such a way that the [themostat#getLevel] is rendered.
However, I think I should not just modify this to also handle .htm / .html files in that same way...
Would it be wise to add something to the top of this list that makes a path that endsWith "mycustom.htm" also a custom file?
(and then call my file mycustom.htm)
Last edited by supersjimmie on 21 Dec 2020, 15:59, edited 1 time in total.

User avatar
Ath
Normal user
Posts: 3416
Joined: 10 Jun 2018, 12:06
Location: NL

Re: .esp dashboard reload on ios

#2 Post by Ath » 21 Dec 2020, 15:58

supersjimmie wrote: 21 Dec 2020, 15:34 To add: it does seem to work on my laptop with chrome and the file called thermostat.esp but not on my iPhone.
And yes, I want it on my iPhone since that is the most easy remote-control.
Have you considered installing Chrome on your iPhone to try and see if that works as intended?
/Ton (PayPal.me)

supersjimmie
Normal user
Posts: 13
Joined: 09 Oct 2020, 15:19

Re: .esp dashboard reload on ios

#3 Post by supersjimmie » 21 Dec 2020, 16:16

Actually yes and no.
I would like this to work, out of the iphone-box.
We have a couple of iphones here and all keep using the default Safari just as usual.

In the meantime, I tried my own suggestion.
The mycustom.htm is now filled with the #getLevel piece as expected (20.30) but the current temperature is still 't' instead of e.g. 20.23.
So I guess this is not really tied to the file being called *.htm but something else that breaks between espeasy, the script and the browser on the iphones.

EDIT:
On my own phone I installed chome, but no result.
The first value remains 't'. (while it works still on Chrome on my Windows laptop)

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

Re: .esp dashboard reload on ios

#4 Post by chromo23 » 12 Oct 2021, 16:09

Hi,

since i had the same problem for a while i decided to make my dashboard better.
I figured out, that you have to use a html in order to work.

Here my example. called it dashboard.html
Bildschirmfoto 2021-10-12 um 15.49.08.png
Bildschirmfoto 2021-10-12 um 15.49.08.png (31.28 KiB) Viewed 4217 times

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: 12pt;
        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>
        <br><br>
        <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>
        <br><br>
        <center>
            <table>
                <tr>
                    <td> Temperature:</td>
                    <td id="tempVarId">Temp</td>
                    <td>&#8451;</td>
                </tr>
                <tr>
                    <td> Humidity:</td>
                    <td style="text-align:right;" id="humVarId">Hum</td>
                    <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', 'dashboard.esp?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', 'dashboard.esp?cmd=event,up', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                xhr.send();
            }

        </script>
        </script>
        <script type="text/javascript">
            function submitboost() {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                    }
                }
                xhr.open('get', 'dashboard.esp?cmd=event,boost', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                xhr.send();
            }

    </div >
I did this mostly with copy´n´paste because I've never really dealt with it. I guest it can be done nicer code wise but it works except the part with loading the svg. But this will be a story for another thread.

Post Reply

Who is online

Users browsing this forum: No registered users and 28 guests