maybe easier to use Dashboard replacement

Moderators: grovkillen, Stuntteam, TD-er

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

maybe easier to use Dashboard replacement

#1 Post by chromo23 » 22 Oct 2021, 19:58

For the Weekend a new Dashboard
It was hard but i learned a lot and fortunately had help. I´ll try to do a bit more documentation later....

Feautures:
-listing the all devices
-value updates in realtime
-easy access to node
- easy blacklisting devices in the code

Code: Select all

 //Blacklist Devices e.g. ["Display", "Sensor"]
        const blackList = [];
-and of course dynamic colors :)

Screenshots:
Bildschirmfoto 2021-10-22 um 19.43.45.png
Bildschirmfoto 2021-10-22 um 19.43.45.png (52.5 KiB) Viewed 59385 times
Bildschirmfoto 2021-10-22 um 19.44.16.png
Bildschirmfoto 2021-10-22 um 19.44.16.png (74.47 KiB) Viewed 59385 times
Bildschirmfoto 2021-10-22 um 19.45.34.png
Bildschirmfoto 2021-10-22 um 19.45.34.png (51.96 KiB) Viewed 59385 times
Code:

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 {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin: auto;
        padding: 10%;
        flex-wrap: nowrap
    }

    #sensorList {
        display: inline-grid;
        grid-template-columns: auto auto auto;
        grid-column-gap: 2vh;
        grid-row-gap: 2vh;
        position: absolute;
        top: 75%
    }

    .sensorset {
        display: inline-flex;
        justify-items: stretch;
        flex-direction: column;
        padding: 4.2px;
        flex-wrap: nowrap;
        border-radius: 5px;
        align-items: stretch
    }

    .sensors {
        text-align: left;
        text-transform: capitalize;
        padding-bottom: 5%
    }

    .values {
        display: inline-grid;
        grid-template-columns: auto auto;
        grid-column-gap: 20px
    }

    .sensorset,
    .sensors,
    .values,
    .values div {
        background-color: #ebebeb;
        color: black
    }

    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 {
        top: 88%;
        min-width: 200px;
        max-width: 257px;
        display: flex;
        width: 100%;
        position: fixed;
        justify-content: space-around
    }

    #opener,
    #opener span {
        background: transparent;
    }

    .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;
        color: white;
        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 screen and (max-width: 450px) {
        #sensorList {
            grid-template-columns: auto auto;
            grid-column-gap: 1vh;
            grid-row-gap: 1vh
        }

        .sensors {
            padding-bottom: 2%
        }
    }

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

        .sensorset,
        .sensors,
        .values,
        .values div {
            background-color: #444;
            color: #b3b3b3;
        }

        element.style {}

        .sidenav a {
            color: white
        }

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


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

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

<!--Run the function when the site is loaded-->

<body onload="fetchJson()">

    <script>
        //Blacklist Devices e.g. ["Display", "Sensor"]
        const blackList = [];
        async function fetchJson() {
            response = await fetch("json");
            myJson = await response.json();
            let html = '';
            unit = myJson.WiFi.Hostname;
            document.getElementById("unitId").innerHTML = unit;
            myJson.Sensors.forEach(sensor => {
                // Has the entry TaskValues
                // uand is is not in Blacklist?  
                if (sensor.TaskValues && !blackList.includes(sensor.TaskName)) {
                    firstItem = true;
                    sensor.TaskValues.forEach(item => {
                        // is it the first value of a sensor?
                        if (firstItem) {
                            firstItem = false;
                            // add container with name to HTML h:
                            html += '<div  class="sensorset">' + '<div  class="sensors" style="font-weight:bold;font-size: 14pt;">' + sensor.TaskName + '</div>';
                        } else {
                            // add empty container to HTML:
                            html += '<div></div>';
                        }
                        // add container with name and value to HTML:
                        html += '<div class="values">' + '<div style="text-align: left;">' + item.Name + '</div>' + '<div style="text-align: right;">' + item.Value + '</div>' + '</div>';
                        console.log(sensor.TaskName + ':' + item.Name + '=' + item.Value);
                    });
                    html += '</div>';
                    console.log(html);
                    document.getElementById('sensorList').innerHTML = html;
                } else if (!blackList.includes(sensor.TaskName)) { html += '<div  class="sensorset">' + '<div class="sensors" style="font-weight:bold;font-size: 14pt;">' + sensor.TaskName + '</div>' + '<div></div>' + '<div></div>' + '</div>'; }
            });
            setTimeout(fetchJson, 5000);  //how often fetch the data in ms 
        }
    </script>


    <script>
        //function to get all the node is only called when clicking the menu button
        //is a node missing open and close the menu sveral times or put it in a loop
        async function getNodes() {
            response = await fetch("json");
            myJson = await response.json();
            let html2 = '';
            myJson.nodes.forEach(node => {
                html2 += `<a id="${node.name}" onclick="window.location.href = 'http://${node.ip}'">${node.name}</a>`;
            })
            document.getElementById('menueList').innerHTML = html2;
        }
    </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">&nbsp;</a>
    </div>

    <div id="container">
        <div id="unitId">&nbsp;</div>
        <div id="sensorList">&nbsp;</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>
Last edited by chromo23 on 23 Oct 2021, 10:21, edited 1 time in total.

User avatar
ThomasB
Normal user
Posts: 1064
Joined: 17 Jun 2018, 20:41
Location: USA

Re: Easy to use Dashboard replacement

#2 Post by ThomasB » 22 Oct 2021, 22:33

Thanks, your custom esp looks useful. I'd like to try it. Seems some code is missing, as well as the css file. Can you post a complete file set?

- Thomas

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

Re: Easy to use Dashboard replacement

#3 Post by chromo23 » 22 Oct 2021, 22:53

There is actually no code missing....
But here are the files:
files.zip
(5.12 KiB) Downloaded 585 times
Edit: removed unnecessary code...
Last edited by chromo23 on 23 Oct 2021, 10:08, edited 1 time in total.

User avatar
ThomasB
Normal user
Posts: 1064
Joined: 17 Jun 2018, 20:41
Location: USA

Re: Easy to use Dashboard replacement

#4 Post by ThomasB » 23 Oct 2021, 01:11

Thanks for the zip file.
There is actually no code missing....
The reason I mentioned this is because I didn't find the closing tags </html> and </body>. I'm not an html expert but I thought those are required.

But more importantly, it seems I don't know what I'm doing. I assumed your code was intended to be loaded in ESPEasy's SPIFFS (saved as dashboard.esp and esp.css). But your zip file contains dashboard.html, which suggests it is a standalone browser file. So I'm a bit confused.

What I am experiencing is a hint that your dashboard should be loaded in the device's SPIFFS. I've done that; When I browse to http://<ESPEasyIP>/dashboard.html, ESPEasy posts the file's html source text instead of running the code.

So it would be great if you provided instructions on how to install/use your custom ESPEasy dashboard.

- Thomas
Last edited by ThomasB on 23 Oct 2021, 02:07, edited 1 time in total.

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

Re: Easy to use Dashboard replacement

#5 Post by TD-er » 23 Oct 2021, 02:03

Try renaming it to .htm

Maybe I could also add the proper content-type for .html files too when saving it, but I think there was a reason not to do it like that.
Not sure right now why not though.

User avatar
ThomasB
Normal user
Posts: 1064
Joined: 17 Jun 2018, 20:41
Location: USA

Re: Easy to use Dashboard replacement

#6 Post by ThomasB » 23 Oct 2021, 02:15

Try renaming it to .htm
That indeed changes the browser's behavior. Now I get a blank page instead of the html source text.

I thought that custom ESPEasy pages needed to be named as a .esp file. So it is interesting to learn that .htm and .html is allowed.

- Thomas

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

Re: Easy to use Dashboard replacement

#7 Post by TD-er » 23 Oct 2021, 02:18

The dashboard files need to be called .esp indeed, as they will be dealt with a bit different.

I have not yet looked at the code of this dashboard, so I assumed it may have been a HTML file with JavaScript in it.
But if it needs the typical dashboard functionality, you probably need to rename it to .esp.

User avatar
ThomasB
Normal user
Posts: 1064
Joined: 17 Jun 2018, 20:41
Location: USA

Re: Easy to use Dashboard replacement

#8 Post by ThomasB » 23 Oct 2021, 02:32

But if it needs the typical dashboard functionality, you probably need to rename it to .esp.
That's the very first thing I did, before the zip file was posted. It didn't work. I get a white page with an empty drop-down box, along with two inoperative buttons ("<" and ">").

After reviewing the originally posted html code I concluded that some of the source text was missing (see my comment about the closing tags). But the zip file is the same, so that busted that conclusion.

I saw some hard coded commands for three events called down, up, and boost. Those would be user defined events that trigger actions found in the device's rule file. So it appears that this dashboard needs to be customized for each device. That might be why it doesn't work on my device.

Sometimes "Easy to Use" needs a bit of hand holding to make it work. Quite often, easy to use is easy to break.

So that's why I'm sending the bat signal to Chromo23.

- Thomas

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

Re: Easy to use Dashboard replacement

#9 Post by chromo23 » 23 Oct 2021, 09:30

Hey Thomas.
The reason I mentioned this is because I didn't find the closing tags </html> and </body>. I'm not an html expert but I thought those are required.
I am no expert either. :) I just started to deal with html, css and javascript. Html and Body tags are not necessary from what i read.

The dashboard.esp is a standard site in espeasy. wich can be overwritten by a custom dashboard.esp
Problem is, that it somehow doesn’t execute javascript.
since i wanted asynchronous features like fetching the data without constantly reloading the page i decided to make my own html page.
My page uses javascript to fetch data via espeasy´s json and send commands via http-request (only the .eps page can translate and display the data tags like [var#1] )
Html/htm sites loaded to espeasy can be called from a browser because espeasy acts as a webserver.

I tested the page with every modern browser on a desktop computer as well as android and ios.
The only thing i can imagine why it doesn’t work for you is that you are using a old browser which doesn't handle javascript so well.

Edit: If you try to rename it to dashboard.esp it will redirect you to the internal standard dashboard.esp (because the format is unsupported i guess)
Edit2: Does the css work for you?
Edit3:
I saw some hard coded commands for three events called down, up, and boost.
Oh. I forgot to remove these because the page is based on my personal dashboard (viewtopic.php?f=6&t=8792).

Edit4: You could even store the page somewhere else an call it from there. then you need to direct it to the esp you want to get data from:

Code: Select all

 async function fetchJson() {
            response = await fetch("ip_of_your_esp/json");
Edit5:
Try renaming it to .htm
I always asked myself about the difference of html and htm. Here is the answer: https://stackoverflow.com/questions/116 ... nd-which-f
Edit6: changed the thread title because easy in this context is definitely a matter of perspective.... :)

User avatar
ThomasB
Normal user
Posts: 1064
Joined: 17 Jun 2018, 20:41
Location: USA

Re: maybe easier to use Dashboard replacement

#10 Post by ThomasB » 23 Oct 2021, 20:44

I tested the page with every modern browser on a desktop computer as well as android and ios.
The only thing i can imagine why it doesn’t work for you is that you are using a old browser which doesn't handle javascript so well.
Same here, I tried it on the latest versions of FF, Edge, Chrome, and IE.

But what's weird is that today your dashboard is working. I have no idea what may have changed after I abandoned it last night. Perhaps the browser cache was getting in the way. My apologies for the extra hand holding.

Maybe it is safe to revert the title back to being "Easy to Use." Thank You for sharing your work.

- Thomas

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

Re: maybe easier to use Dashboard replacement

#11 Post by chromo23 » 23 Oct 2021, 23:12

i‘m happy to hear that it eventually works for you. it is nevertheless work in progress so there will be changes in future versions. i‘d also be happy to get a pm if you find problems or have suggestions…

User avatar
ThomasB
Normal user
Posts: 1064
Joined: 17 Jun 2018, 20:41
Location: USA

Re: maybe easier to use Dashboard replacement

#12 Post by ThomasB » 24 Oct 2021, 02:05

i‘d also be happy to get a pm if you find problems or have suggestions…
I believe that providing installation instructions will go a long ways to making it "easy to use."

Here's how I installed it on my ESP_Easy_mega_20210201 device:

Code: Select all

1. Unzip the dashboard file set into a temporary folder. Do Not change any file names or extensions.
2. Use a browser and open your ESPEasy Device at http://<ESP_DEVICE_IP>
    Note: replace <ESP_DEVICE_IP> with your device's Local IP Address.
3. Go to the "Tools" Tab
4. Select the "Filesystem->File browser" button.
5. Press the "Upload" button.
6. Press the "Browse..." button and select the dashboard.html file.
7. Press the "Upload" button.
8. Repeat steps 4-7 for the esp.css file.

Browse the files again and confirm that the two uploaded files (dashboard.html and esp.css) are present.
For example:
.
File Browse, after uploading files.
File Browse, after uploading files.
espeasy_dashboard.jpg (62.38 KiB) Viewed 59211 times
.
Congrats You have completed the file installation into ESPEasy's SPIFFS memory.

Code: Select all

9.  Now reboot the device using Tools->Reboot (or press its reset button).
10. Use your browser to view the new dashboard: http://<ESP_DEVICE_IP>/dashboard.html
You should now see all the ESPEasy device tasks and states.

- Thomas

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

Re: maybe easier to use Dashboard replacement

#13 Post by chromo23 » 12 Jan 2022, 14:27

Finally i had some energy to make some additions to the alternative dashboard:

I always wanted to have the fields that named "button" clickable to trigger an event... so i did

Code: Select all

if ((sensor.TaskName).includes("utton")) {  //if a task contains "utton" as part of Button it generates an onclick event
Here you can see, that i used the phrase "utton" to determine if there is a button in the list (i used utton because i did not know how ignore upper case of B :D )

So every Task consisting the name button gets an event called: "nameofthebutton"event
eg: for button1 ---->

Code: Select all

button1event
Have fun!
(Best to be used as index.htm and with my custom css )
fetch_button.zip
(5.53 KiB) Downloaded 524 times
Last edited by chromo23 on 12 Jan 2022, 15:42, edited 2 times in total.

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

Re: maybe easier to use Dashboard replacement

#14 Post by TD-er » 12 Jan 2022, 14:39

Not tested your code yet, but just based on what you're telling, it sounds cool :)
Generating an event based on the name of the task + generate a button on the page.

Only "objection" is that "button" does add a lot of letters to the task name.
Especially when using display plugins like Framed OLED, those fields are rather short so you then need to use rather short task names.
Maybe "btn" is better (or match on both) ?

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

Re: maybe easier to use Dashboard replacement

#15 Post by chromo23 » 12 Jan 2022, 14:54

I am not sure what you mean.

i add "event" to the taskname button
Bildschirmfoto 2022-01-12 um 14.50.43.png
Bildschirmfoto 2022-01-12 um 14.50.43.png (49.91 KiB) Viewed 57224 times
Bildschirmfoto 2022-01-12 um 14.50.55.png
Bildschirmfoto 2022-01-12 um 14.50.55.png (38.42 KiB) Viewed 57224 times
And when i click on button the event is called:
Bildschirmfoto 2022-01-12 um 14.51.21.png
Bildschirmfoto 2022-01-12 um 14.51.21.png (13.51 KiB) Viewed 57224 times

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

Re: maybe easier to use Dashboard replacement

#16 Post by chromo23 » 12 Jan 2022, 14:58

And you can always change the phrase to your liking or even add more phrases

Code: Select all

if ((sensor.TaskName).includes("utton") || (sensor.TaskName).includes("btn")) {  //if a task contains "utton" as part of Button  or "btn" it generates an onclick event

An here the link is created:

Code: Select all

<script type="text/javascript">
    function buttonClick(utton) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
            }
        }
        xhr.open('get', 'control?cmd=event,'+ utton + 'event', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.send();
        fetchJson();
    }
</script>
In this line you can change the eventname:

Code: Select all

 xhr.open('get', 'control?cmd=event,'+ utton + 'event', true);
Last edited by chromo23 on 12 Jan 2022, 15:54, edited 2 times in total.

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

Re: maybe easier to use Dashboard replacement

#17 Post by chromo23 » 12 Jan 2022, 15:05

TD-er wrote: 12 Jan 2022, 14:39 Generating an event based on the name of the task + generate a button on the page.
I guess now i understand.
This is only an addition to the dashboard.html that generates tiles of every devicetask. (unless you have blacklisted them manually as described before)
The addition simply generates an event for the buttontile so that it is clickable.

It is just an generic landing page for beginner that gives basic overview and functionality for using a esp device standalone or as nodes connected to each other

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

Re: maybe easier to use Dashboard replacement

#18 Post by chromo23 » 12 Jan 2022, 17:22

Update: Buttons got hover and active effects:
fetch_button.zip
(5.68 KiB) Downloaded 486 times

Edit: a version with colored buttons:
fetch_colored_button.zip
(5.72 KiB) Downloaded 511 times
fetchgif.gif
fetchgif.gif (243.01 KiB) Viewed 57203 times

User avatar
iron
Normal user
Posts: 221
Joined: 24 Sep 2016, 08:37
Location: Greece
Contact:

Re: maybe easier to use Dashboard replacement

#19 Post by iron » 12 Jan 2022, 22:17

Just FYI the Rule ButtonEvent (on your image example) :

Code: Select all

On Buttonevent do
  if [Relaystate]=0
    gpio,13,1
  else
   gpio,13,0
 end if
endon
can be :

Code: Select all

On Buttonevent do
GPIOtoggle,13
endon
Makes things much easier

https://espeasy.readthedocs.io/en/lates ... ernal-gpio
-D


User avatar
iron
Normal user
Posts: 221
Joined: 24 Sep 2016, 08:37
Location: Greece
Contact:

Re: maybe easier to use Dashboard replacement

#21 Post by iron » 12 Jan 2022, 22:45

Next suggestion is an option to change the color of the button / task depending on its state e.g. green = ON / red = OFF or so.

Even further assign an uploaded image to the state of the of the button / task

Just thinking out loud
-D

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

Re: maybe easier to use Dashboard replacement

#22 Post by chromo23 » 12 Jan 2022, 23:19

iron wrote: 12 Jan 2022, 22:45 Next suggestion is an option to change the color of the button / task depending on its state e.g. green = ON / red = OFF or so.
The Button just provides an eventname. for what you use this button is totally up to you and highly individual so i can not make a general script for changing the color depending on a state.
(at least i see no easy solution to this problem since you would have to announce a state change to the dashboard. so any help is appreciated )
Even further assign an uploaded image to the state of the of the button / task
This is not going to happen because of the limited space of the esp8266

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

Re: maybe easier to use Dashboard replacement

#23 Post by TD-er » 12 Jan 2022, 23:27

You can take a look at the JavaScript running on the Devices page.
This does fetch a JSON with the task values and does refresh based on the TTL value in that JSON.
You could use the actual state of a "button" and construct a HTML class from it.
Then the CSS can act on the class of the button.

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

Re: maybe easier to use Dashboard replacement

#24 Post by chromo23 » 12 Jan 2022, 23:37

the buttons shown in the pictures are all linked to hardware pushbuttons (sonoff s20) so there is just for a fraction of seconds a state change....but :D
i just had an idea... if you name a dummy device button and put a taskvalueset depending on the state in the rules than it works....

Code: Select all

On Buttonevent do
  if [Relaystate]=0
    gpio,13,1
    taskvalueset,3,1,1
  else
   gpio,13,0
   taskvalueset,3,1,0
 end if
endon
i´ll do an a script for that in the next days
Edit: and probably a howto

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

Re: maybe easier to use Dashboard replacement

#25 Post by chromo23 » 12 Jan 2022, 23:54

TD-er wrote: 12 Jan 2022, 23:27 You can take a look at the JavaScript running on the Devices page.
This does fetch a JSON with the task values and does refresh based on the TTL value in that JSON.
You could use the actual state of a "button" and construct a HTML class from it.
Then the CSS can act on the class of the button.
this is basically how my hole page works. you should take a look at it ;)

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

Re: maybe easier to use Dashboard replacement

#26 Post by chromo23 » 13 Jan 2022, 13:36

I crated two versions for virtual buttons with visual feedback.
fetch_colored_button.zip
(5.89 KiB) Downloaded 523 times
fetch_colored_button2.zip
(5.93 KiB) Downloaded 532 times
- Every tile acts now as a button and calls an event (Taskname+event)
- and as written in the beginning of this thread you can blacklist tiles by their name. therefore you have to edit the html file and add the Device names in the Blacklist field:

Code: Select all

const blackList = []; //Blacklist Devices e.g. ["Display", "Sensor"]
- devices that are switches and called buttons (determined by the phrase "utton") are blue*
(*it is impossible to create a feedback for a switch button since the state is determined by state of the hardware because there is no virtual state that is fetchable via json of this device)

Code: Select all

if ((sensor.TaskName).includes("utton")) {  //if a task contains "utton" as part of Button it generates an onclick event
- dummy devices (determined by the phrase "ummy") that are called buttons (determined by the phrase "utton") and! have a value name called "State" are colored red if State=0 and green if State=1

Code: Select all

if ((sensor.Type).includes("ummy") && (item.Name).includes("State")) { //Look for dummy devices that have a valuename called State

Create a virtual button with a dummy device:
dummy button.png
dummy button.png (150.29 KiB) Viewed 57095 times
and make a rule for the state change: e.g.

Code: Select all

On Button2event do
  if [Button2#State]=0
    Taskvalueset,6,1,1
  else
     Taskvalueset,6,1,0
  endif
endon

And here are some screenshots of version1:
v1.png
v1.png (292.19 KiB) Viewed 57095 times
and version2:
v2.png
v2.png (285.94 KiB) Viewed 57095 times
Edit: the colors of the on/of buttons are not perfect..i will change that later
Edit2: i made also a colorless one..my favorite
fetch_button_dot.zip
(5.86 KiB) Downloaded 512 times
v3.png
v3.png (29.21 KiB) Viewed 57084 times

User avatar
iron
Normal user
Posts: 221
Joined: 24 Sep 2016, 08:37
Location: Greece
Contact:

Re: maybe easier to use Dashboard replacement

#27 Post by iron » 13 Jan 2022, 19:39

Your effort and quick responses is much appreciated and I do not mean to discourage you

I know you mean well, and I am sorry to say that, but the logic of this approach is not wise.

If there is one relay you should not need one tab for the relay as an output and another for a button to turn on/off the relay.
Only need one button that changes the status of the relay and gets colored accordingly.

State value of this (TaskValue1) is also published on json

[
{"ValueNumber":1,
"Name":"State",
"NrDecimals":0,
"Value":1
}],
Last edited by iron on 13 Jan 2022, 20:17, edited 1 time in total.
-D

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

Re: maybe easier to use Dashboard replacement

#28 Post by chromo23 » 13 Jan 2022, 20:06

iron wrote: 13 Jan 2022, 19:39 If there is one relay you should not need one tab for the relay as an output and another for a button to turn on/off the relay.
Only need one button that changes the status of the relay and gets colored accordingly.
everything is fine... just blacklist the relay.. e.g.:

Code: Select all

const blackList = ["Relay"]; //Blacklist Devices e.g. ["Display", "Sensor"]
Edit2: or blacklist the "Button" and call the Relay Button.. be creative. as i wrote every tile calls now an event...

this page is a dynamically generated overview of all the devices in the device tab. Buttons are a nice extra but you should see it as a more modern dashboard replacement.
i made this for people who don’t want do create their own pages just for a basic functionality...
It is also totally independent from the espeasy development so i have to use what i get to generate the site

Edit: I use this page to administrate my dozens of devices on my mobile. this page is much better suited for this task than the original dashboard or the corresponding site on espeasy itself (in terms of a node overview)
Edit3: and i also have to figure out with which type of page i continue and how i can involve buttonstatecolors even more dynamically (Eg: every tile with the value "State" can become a button with colorstatechange)
it´s in constant flux and i also have fun with playing around because i started this whole javascript css html stuff nearly with the beginning of this thread... ;)

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

Re: maybe easier to use Dashboard replacement

#29 Post by chromo23 » 13 Jan 2022, 20:33

State value of this (TaskValue1) is also published on json

[
{"ValueNumber":1,
"Name":"State",
"NrDecimals":0,
"Value":1
}],
as i said before. this state is wired to the inputstate of the microcontroller. and this specific button is a pushbutton of a sonoff s20. it changes the state only momentarily so you don´t need to use it...just use a "virtual" dummy-button. your dashboard looks probably different anyway.
what you see is only an example...

edit: i just blacklisted the button on my device. button2 is such a dummy button. you don´t have to use it for the relay. you could also send a command to another device
123.png
123.png (21.35 KiB) Viewed 57038 times

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

Re: maybe easier to use Dashboard replacement

#30 Post by chromo23 » 14 Jan 2022, 10:34

because of the comments i am not sure if i explained this project correctly (i am really bad in explaining people say. :shock: ).
this html page is basically a one big java script, that takes all the devices in the devices tab and makes tiles out of them (via json). it is a simpler overview of the devices tab. together with the node overview (the button on the bottom of the page next to the house button) it makes a fine dashboard replacement or an even better index.htm (at least for me)
so the pictures i posted are from my ESPs and it looks different on your ESPs.
the tiles are arranged by the order in the devices tab. so you can change this by reordering them in the devices tab or hide them completely by blacklist them in the script section of the code (better would be a checkmark in the devices tab for hiding which would generate a flag in json)
every tile calls an corresponding event if you click on them. so it sometimes doesn’t seem to make sense to have a button and a relay next to each other but since they both are calling different events you can use them not necessarily linked to each other or you can hide one them. there are many, many possibilities.

User avatar
iron
Normal user
Posts: 221
Joined: 24 Sep 2016, 08:37
Location: Greece
Contact:

Re: maybe easier to use Dashboard replacement

#31 Post by iron » 14 Jan 2022, 14:40

I use this button for a relay on GPIO12 @ task#1. No need to use any dummy devices nor "blacklist" anything.
If only I could get the color to change based on the State given this is readily available on the IP/json ?
Attachments
button.jpg
button.jpg (84.83 KiB) Viewed 56979 times
-D

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

Re: maybe easier to use Dashboard replacement

#32 Post by chromo23 » 14 Jan 2022, 15:02

I understand but the button on my device is connected to a real button and therefore reflects the state of the gpio input...so i wanted to make these kind of buttons look different (and i have to have this button for the hardwarebutton to work and i have to blacklist it if i don’t want to see it).
And a task called Relay as a tile is still an valid option because it can be swiched in many different ways and a relay that looks like a button can be missleading.
So what do you suggest? i could do state-colored button like this: TaskName has the phrase "utton" and at least one TaskValue is called "State". i am open for suggestions to find the best general approach.
And which color scheme for the buttons do you prefer?

Edit: and please keep in mind, that this is more an overview of devices than a button only page

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

Re: maybe easier to use Dashboard replacement

#33 Post by Ath » 14 Jan 2022, 15:32

I have been trying this out, but there are some issues with the html code, both 'fetch_button_dot.html' and 'fetch_colored_button2.html' are missing a closing </body> and </html> tag.
After fixing that it is still a bit of hit & miss, 'fetch_button_dot.html' does display the configured devices, but clicking the button object or the relay object (using a Sonoff S20 with a somewhat older (~1 year) build of ESPEasy) does not cause a state change. I've been using Chrome (latest, x64) on a Windows 10 laptop, no script blockers or such.
'fetch_colored_button2.html' does show some json-like data (after I renamed to 'colored_button2.html', using original filename didn't display anything), and the bottom buttons, but no objects like your screenshots (same Sonoff device).
I have been using the original filenames, not 'index.html'
I have not uploaded 'esp.css' to keep the regular ESPEasy color scheme.
/Ton (PayPal.me)

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

Re: maybe easier to use Dashboard replacement

#34 Post by chromo23 » 14 Jan 2022, 15:39

The missing tags shouldn’t be a problem..they are not necessary.(at least that´s what i read)
and i had also issues with this build: ESP_Easy_mega_20201023_normal_ESP8266_1M there the site does not work at all with no error message....

all the tiles call events!

you have to implement them in rules:

Code: Select all

On Buttonevent do
GPIOtoggle,13
endon
Or like @iron did in post #157
if you want to have a visual feedbackbutton you have to read the last posts how this is done since this is wip

Edit: Right now button coloring logic is explained in post #186
Try to create a dummy device call it button & call a value state then do a rule like this:

Code: Select all

On Buttonevent do
  if [Button#State]=0
    Taskvalueset,1,1,1 //set state of the dummy device as a feedback 
  else
     Taskvalueset,1,1,0
  endif
endon
Last edited by chromo23 on 14 Jan 2022, 16:09, edited 4 times in total.

User avatar
iron
Normal user
Posts: 221
Joined: 24 Sep 2016, 08:37
Location: Greece
Contact:

Re: maybe easier to use Dashboard replacement

#35 Post by iron » 14 Jan 2022, 15:48

called "State" not "tate" ? :)

Sure that sounds great !!!

#4BD864 Green and #E4E4E4 Grey is ok to boot, then the user can change it to their desired by editing the file, no ?
-D

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

Re: maybe easier to use Dashboard replacement

#36 Post by chromo23 » 14 Jan 2022, 15:55

Ath wrote: 14 Jan 2022, 15:32 I have been trying this out, but there are some issues with the html code, both 'fetch_button_dot.html' and 'fetch_colored_button2.html' are missing a closing </body> and </html> tag.
just looked at my files... they all have a closing </body> tag... and the html tag is not necessary but i will add it

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

Re: maybe easier to use Dashboard replacement

#37 Post by Ath » 14 Jan 2022, 16:01

I downloaded the .zip files from here, of course, and they didn't have checksum errors, so I don't know what happened. Editing with Notepad++ (and that is quite reliable)
/Ton (PayPal.me)

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

Re: maybe easier to use Dashboard replacement

#38 Post by chromo23 » 14 Jan 2022, 16:06

Ath wrote: 14 Jan 2022, 16:01 I downloaded the .zip files from here, of course, and they didn't have checksum errors, so I don't know what happened. Editing with Notepad++ (and that is quite reliable)
That is super strange! :shock: i also just downloaded the fetch_button_dot.zip from here and opened the html file:
Bildschirmfoto 2022-01-14 um 16.05.06.png
Bildschirmfoto 2022-01-14 um 16.05.06.png (89.87 KiB) Viewed 56941 times
i use visual studio code

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

Re: maybe easier to use Dashboard replacement

#39 Post by chromo23 » 14 Jan 2022, 16:12

iron wrote: 14 Jan 2022, 15:48 called "State" not "tate" ? :)

Sure that sounds great !!!

#4BD864 Green and #E4E4E4 Grey is ok to boot, then the user can change it to their desired by editing the file, no ?
i actually meant which one of the three version i offered you like the best: fetch_button_dot ,fetch_button_colored or fetch_button_colored2?

Edit: @ath
looks better with this...
esp.css_light_only.zip
(2.44 KiB) Downloaded 519 times

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

Re: maybe easier to use Dashboard replacement

#40 Post by Ath » 14 Jan 2022, 17:11

chromo23 wrote: 14 Jan 2022, 16:06
Ath wrote: 14 Jan 2022, 16:01 I downloaded the .zip files from here, of course, and they didn't have checksum errors, so I don't know what happened. Editing with Notepad++ (and that is quite reliable)
That is super strange! :shock: i also just downloaded the fetch_button_dot.zip from here and opened the html file:

Bildschirmfoto 2022-01-14 um 16.05.06.png

i use visual studio code
Well, that </body> is to terminate the <body> tag on line 335 in your screenshot, there is also a <body> tag near the beginning of the file, that one is not closed, and also the </html> tag is missing.

I use a lot of xml in my daily job, so am a bit picky on properly closing sections/tags, if you say it work for you, then no problem, but after adding those 2 tags it displayed the expected objects, where it first showed an empty screen.

I didn't add the event handlers in rules yet, but if that is needed, then that's fine, I just didn't read your instructions close enough. This will make it harder for new users to adopt this type of dashboard, though.

A suggestion for your rules example:
chromo23 wrote: 14 Jan 2022, 15:39

Code: Select all

On Buttonevent do
  if [Button#State]=0
    Taskvalueset,1,1,1 //set state of the dummy device as a feedback 
  else
     Taskvalueset,1,1,0
  endif
endon
can also be written a bit more portable, like:

Code: Select all

On Buttonevent do
  TaskValueSet,Button2,State,![Button#State]
endon
/Ton (PayPal.me)

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

Re: maybe easier to use Dashboard replacement

#41 Post by chromo23 » 14 Jan 2022, 17:22

Thank you ton! you are right. the first one i missed :oops:
Edit: i always use three different browser(safari chrome firefox) to test (on an mac) and never got an error in the console. also visual studio code never gave me an error regarding this. does notepad++?
And also thanks for the rule advice... :)

Yeah.. it would be great if i could gather the infos on top of this thread but it seems not possible in this forum.
It is way to clustered right now

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

Re: maybe easier to use Dashboard replacement

#42 Post by chromo23 » 14 Jan 2022, 17:37

All in one package..
-added the missing tags
-renamed the files
fetch.zip
(14.28 KiB) Downloaded 540 times
And an important addition:
These html files make use of

Code: Select all

@media (prefers-color-scheme: dark) {
so if you have the standard css or my css_light you´ll probably not see the menu buttons on the bottom when you have enabled a system wide dark mode!!

User avatar
iron
Normal user
Posts: 221
Joined: 24 Sep 2016, 08:37
Location: Greece
Contact:

Re: maybe easier to use Dashboard replacement

#43 Post by iron » 14 Jan 2022, 18:36

chromo23 wrote: 14 Jan 2022, 17:37 All in one package..
-added the missing tags
-renamed the files
fetch.zip
Does not seem to make any changes in my example...
-D

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

Re: maybe easier to use Dashboard replacement

#44 Post by chromo23 » 14 Jan 2022, 18:52

But it does somehow on older versions of espeasy.

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

Re: maybe easier to use Dashboard replacement

#45 Post by chromo23 » 14 Jan 2022, 19:29

@iron
if you like to test:
fetch3.html.zip
(2.88 KiB) Downloaded 523 times
I think i go with this coloring. "off" is gray like every other button and only "on" is green. so no extra colors for different types...
the logic:

Code: Select all

if a TaskName is "Button" or "Btn" (this if for @TD-er  ;) ) and has a TaskValue that is called "State" and State=1 then a "Tile" becomes green

User avatar
iron
Normal user
Posts: 221
Joined: 24 Sep 2016, 08:37
Location: Greece
Contact:

Re: maybe easier to use Dashboard replacement

#46 Post by iron » 14 Jan 2022, 19:44

chromo23 wrote: 14 Jan 2022, 19:29 @iron
if you like to test:
fetch3.html.zip

I think i go with this coloring. "off" is gray like every other button and only "on" is green. so no extra colors for different types...
the logic:

Code: Select all

if a TaskName is "Button" or "Btn" (this if for @TD-er  ;) ) and has a TaskValue that is called "State" and State=1 then a "Tile" becomes green
Works as expected now.

Kudos !!!
-D

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

Re: maybe easier to use Dashboard replacement

#47 Post by chromo23 » 16 Jan 2022, 16:37

Because i want to replace the last of my tasmota devices with espeasy i added a range slider:
Edit: IMPORTANT: i forgot to add the firefox support for the silder. i´ll do this next week. right now it looks shitty..
fetch_sl.zip
(9.12 KiB) Downloaded 532 times
ezgif.com-gif-maker.gif
ezgif.com-gif-maker.gif (997.89 KiB) Viewed 56507 times

Logic behind it:
If a TaskName of a Dummy-Device is "Slider" a slider is generated with following output

Code: Select all

/event,"Slider"event=sliderValue

To read the value Back to the Slider you have to put the Value to the Dummy device
The Rules:

Code: Select all

On sliderevent do
Taskvalueset,slider,1,%eventvalue%
endon
And i think i´ll replace the green of the buttons with the blue....
Last edited by chromo23 on 17 Jan 2022, 13:45, edited 5 times in total.

User avatar
iron
Normal user
Posts: 221
Joined: 24 Sep 2016, 08:37
Location: Greece
Contact:

Re: maybe easier to use Dashboard replacement

#48 Post by iron » 16 Jan 2022, 18:13

Should a non-button tile be clickable ?

Makes no difference but could be misleading as someone might be expecting an action
Attachments
tila.jpg
tila.jpg (37.83 KiB) Viewed 56488 times
-D

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

Re: maybe easier to use Dashboard replacement

#49 Post by chromo23 » 16 Jan 2022, 18:39

that's intentional. you can click all titles and they call an event. but only a button with a state=1 gets a color

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

Re: maybe easier to use Dashboard replacement

#50 Post by chromo23 » 19 Jan 2022, 19:15

Important! Don’t use the files i provided before. Some timersettings where incorrect and led to a pile up of json requests causing the esp to become unresponsive!
What´s new:
- Tiles with "BigValues"
- new trigger for Buttons, Sliders
- two options for Buttons and Slider.

Examples:

-Buttons:
As you can see in the picture there are two sensors a relay and a dummy-device.
the relay and the dummy-device i want to use as buttons. therefore i simply need to change the value-name to btnState and for the feeback i add a rule to set the state:

Code: Select all

On Lightevent do
  TaskValueSet,Light,1,![Light#btnState]
endon

On Relayevent do
GPIOtoggle,12
endon
as you can see, the buttons call events named after the task-name.
If i now press the buttons i get a visual feedback depending on the state.
1.png
1.png (127.24 KiB) Viewed 56232 times

-Slider:
Let’s add two slider. therefore i create two dummy devices. To get them recognized as slider the value-name need to be slVal or noslVal(if you don’t want the valuenumber displayed).(Hint: slider are always on top of the other tiles) To pass the slidervalues to an event you need rules. Here an example:

Code: Select all

On Led1event do
Taskvalueset,Led1,1,%eventvalue% //writes the eventvalue to slVal to give the value back to the Slider on the webpage
let,1,1023-[Led1#slVal] //the rest of the code dims the internal led of a wemos d1mini depending on the slider value
pwm,2,[var#1]
endon
2.png
2.png (140.86 KiB) Viewed 56232 times
-BigNumbers
With a dummy-device called state we are able to make some values bigger for better readability. Therefore name a dummy-device bigVal. (Hint: BigNumbers are always displayed on top of everything.)
3.png
3.png (154.33 KiB) Viewed 56232 times

- Temperature control with colored buttons
Let´s put all the options to good use: I removed everything apart from the sensors.
Now i create two dummy-devices and call them down and up. To make them recognized as buttons i give the the value-name btnStateC instead of btnState because they need no feedback in terms of on(blue) and off(gray). So with btnStateC they will always be blue.
In the dummy-device bigVal i have two values. "Temperature" gets the value from a sensor and "Set" displays the desired Temperature.
Now i connect the "Up" and "Down" buttons to "Set" with rules and i also add the Plugin "Regulator - Level Control" to permanently store "Set":

Code: Select all

On System#Boot do
 TaskValueSet,bigVal,1,[Tempset#GetLevel] //send the Setlevel after a Reboot back to bigVal 
Endon

On Downevent do  //decrease the Setpoint by 1
 Let,2,[var#2]-1
 TaskValueSet,bigVal,1,[var#2]
 TimerSet,1,10
endon

On Upevent do //Increase the Setpoint by 1
 Let,2,[var#2]+1
 TaskValueSet,bigVal,1,[var#2]
 TimerSet,1,10
endon

On Rules#Timer=1 do  //after 10 seconds send the Value to the "Regulator - Level Control"
config,task,Tempset,SetLevel,[var#2]  //otherwise every buttonpress would cause a flashwrite
endon
5.png
5.png (153.65 KiB) Viewed 56226 times

- All the others
Every "Tile" calls en event when you click on it. If you e.g. would click on the "Sensor" tile you could use the event like this:

Code: Select all

On Sensorevent do
  //your code here...
endon
If not they are just simple tiles.

-Hide Tiles
There a two options:
1. If you disable the corresponding Task of course
2. you have to edit the fetch.html and find this Line:

Code: Select all

const blackList = []; /*Blacklist Devices e.g. ["Display", "Sensor"]*/
There you can add tasks that are still active but you don’t want to have on the webpage.

So a lot of possibilities to make an individual page.

One file to fetch them all:
ThomasB has already written something on how to get use of these files: viewtopic.php?p=55560#p55560
fetch.zip
(8.91 KiB) Downloaded 520 times
Edit: minified version:
fetch_minified.zip
(7.25 KiB) Downloaded 491 times
Last edited by chromo23 on 19 Jan 2022, 21:55, edited 1 time in total.

Post Reply

Who is online

Users browsing this forum: No registered users and 30 guests