How do i set a var# from the dashboard

Message

Zodiac69 · #1 Post by **Zodiac69** » 19 Oct 2021, 21:31

Hi All
I would like to set var#1 value from the "Dashboard".
How do is set the value of a variable from the dashboard html page?

Ath · #2 Post by **Ath** » 19 Oct 2021, 22:13

You can use the Tools tab, where you can enter commands and submit them:

Code: Select all

let,<varnr>,<value>

TD-er · #3 Post by **TD-er** » 19 Oct 2021, 23:16

N.B. after submitting the command from the tools page command field, you can see how it was formatted in the URL bar.
This can be used as a HTTP GET call.
Not sure how you should do it in JavaScript, to make sure the page doesn't show the result of this call, but I guess it shouldn't be too hard.

chromo23 · #4 Post by **chromo23** » 20 Oct 2021, 00:16

Code: Select all

<a class='button' href="dashboard.esp?cmd=let,<varnr>,<value>">Text</a>

Zodiac69 · #5 Post by **Zodiac69** » 20 Oct 2021, 21:11

I am using my ESP as a kWh meter using the generic pulse counter.
I have a "Pre-Pay" meter and i would like to load the kWh value of my pre-Pay meter every time i purchase electricity.
I can then subtract from this "Loaded" value as the ESP counts the meter pulses.

I was using an ESP with "MicroPython" doing this, but had issues with the ESP not coming back online after a loss of power.
With ESPEasy, i am not experiencing this issue, so it is stable, unlike the ESP running MicroPython.

This is the part of the http page i am trying to understand on how to adapt it to ESPEasy "Dashboard"

Code: Select all

Set remaining kWh
      <form action"/" method="post">
        <label for="kwh">kWh:</label>
        <input type="number" min="0" step="0.01" value="0" name="kwh" id="kwh">
        <input type="submit" value="Save">
      </form>

Here is the full html part:

Code: Select all

<html>
  <head> 
    <title>Power meter server</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="data:,"> 
    <style>
      html {{font-family: Helvetica; display:inline-block; margin: 0px auto; text-align: center;}}
      h1{{color: #0F3376; padding: 2vh;}}
      p{{font-size: 1.5rem;}}
  </style>
  </head>
  <body>
    <h1>Power meter server</h1>
    <p>
      kWh remaining: <strong>[var#1]</strong>
    </p>
    <p>
      Set remaining kWh
      <form action"/" method="post">
        <label for="kwh">kWh:</label>
        <input type="number" min="0" step="0.01" value="0" name="kwh" id="kwh">
        <input type="submit" value="Save">
      </form>
    </p>
  </body>
</html>

chromo23 · #6 Post by **chromo23** » 20 Oct 2021, 23:37

You can do it with some javascript:

here you need to enter the Json Values for the sensor

Code: Select all

kwRem = myJson.Sensors[5].TaskValues[0].Value;

here the value for var 1 will be set:

Code: Select all

xhr.open('get', 'control?cmd=let,1,' + kwhvalue, true);

here the whole 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 {
        height: 100vh;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        min-height: 500px;
        margin: auto;
        padding: 20%
    }

    input#kwhV {
        text-align: center
    }

    a {
        display: inline-block
    }

    div {
        text-align: center
    }

    .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 sensors() {
            response = await fetch("json");
            myJson = await response.json();
            kwRem = myJson.Sensors[5].TaskValues[0].Value;
            document.getElementById("kwRId").innerHTML = kwRem;

        }, 1000);
</script>
<script type="text/javascript">
    function submitKwh() {
        var kwhvalue = document.getElementById("kwhV").value;
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
            }
        }
        xhr.open('get', 'control?cmd=let,1,' + kwhvalue, true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.send();
          // uncomment the line below if you want the input to be cleared after pressing the button
       // kwhV.value = ''; 
    }
</script>
<div id="container">
    <div class="kwR">
        <a> kWh remaining:</a>
        <br>
        <span style="font-size:60px" id="kwRId">0</span>
    </div>
    <br>
    <br>
    <div class="kwh">
        <a> kWh:</a>
        <br>
        <input type="number" min="0" step="0.01" value="" name="kwhV" id="kwhV">
        <a class="button" onclick="submitKwh()">Submit</a>
        <br>
        <span style="font-size:30px;cursor:pointer" onclick="window.location.href = '/tools';">&#8962;</span>
    </div>
</div>

have fun playing around with it!
EDIT: You must name this file other than dashboard.esp because it won´t work.
EDIT2: May i suggest this additional file for a better visual experience?:

esp.css.zip: (2.94 KiB) Downloaded 322 times

chromo23 · #7 Post by **chromo23** » 21 Oct 2021, 11:49

Here the same code with the option to use the return key as well to submit and with the toasting funktion

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: center;
        flex-direction: column;
        align-items: center;
        min-height: 500px;
        margin: auto;
        padding: 20%
    }

    input#kwhId {
        text-align: center
    }

    a {
        display: inline-block
    }

    div {
        text-align: center
    }

    .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 type="text/javascript">
function toasting() {
    var x = document.getElementById('toastmessage');
    x.innerHTML = 'Submitted';
    x.className = 'show';
    setTimeout(function() {
        x.innerHTML = '';
        x.className = x.className.replace('show', '');
    }, 2000);
}
</script>

<script onload="setInterval()">
    setInterval(
        async function sensors() {
            response = await fetch("json");
            myJson = await response.json();
            kwRem = myJson.Sensors[5].TaskValues[0].Value;
            document.getElementById("kwRId").innerHTML = kwRem;

        }, 1000);
</script>

<script type="text/javascript">
    function pressKey() {
        if (event.which == 13 || event.keyCode == 13) {
            document.getElementById("button").click();
        }
    }
</script>

<script type="text/javascript">
    function submitKwh() {
        var kwhvalue = document.getElementById("kwhId").value;
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
            }
        }
        xhr.open('get', 'control?cmd=let,1,' + kwhvalue, true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.send();
        // clearing input
        kwhId.value = '';

    }
</script>

<div id="container">
    <div class="kwR">
        <a> kWh remaining:</a>
        <br>
        <span style="font-size:60px" id="kwRId">0</span>
    </div>
    <br>
    <br>
    <div class="kwh">
        <a> kWh:</a>
        <br>
        <input type="number" min="0" step="0.01" value="" name="kwhV" id="kwhId" onkeypress="pressKey()">
        <a class="button" id="button" onclick="submitKwh(); toasting()">Submit</a>
        <div class="" id="toastmessage"></div>
        <br>
        <span style="font-size:30px;cursor:pointer" onclick="window.location.href = '/tools';">&#8962;</span>
    </div>
</div>

Zodiac69 · #8 Post by **Zodiac69** » 21 Oct 2021, 21:21

Hi chromo23

When i try to run your example, my ESP load goes to 100%.
The web page eventually time-out and then the esp idle at about 15%.
I am using this build - ESP_Easy_mega_20211005_normal_ESP8266_4M1M

I load the esp.css and dashboard.esp files as i normally do, but this is not working for me.

chromo23 · #9 Post by **chromo23** » 21 Oct 2021, 21:29

EDIT: You must name this file other than dashboard.esp because it won´t work.

Name the file dashboard.html or something with html

i had no problems running it here. i use the same build

edit: it should look like this (maybe in white. depending on your system colors ):

: Bildschirmfoto 2021-10-21 um 21.37.53.png (21.49 KiB) Viewed 8686 times

Zodiac69 · #10 Post by **Zodiac69** » 21 Oct 2021, 22:35

Hi chromo23

Do you mind sharing your setup?

chromo23 · #11 Post by **chromo23** » 21 Oct 2021, 23:04

I have wemos d1 mini with a bme280 a relay and a display attached....

Code: Select all

kwRem = myJson.Sensors[5].TaskValues[0].Value;

at this place in my setup is the sensors temperature value. thats why you see a 18 in the screenshot and thats why i turned up the heating

Does the page load?
if yes > is there a value?

when you don´t see a value please open the developer tools in your browser and look in the error/problems or log tab if there is an error message...
can you send your json output: yourespip/json and the values you entered in the code above....

Zodiac69 · #12 Post by **Zodiac69** » 23 Oct 2021, 11:05

Hi chromo23

Yes, the page is loading now after i rename the file to x.html
I can see that the variable is getting set, %v1% is the value that i enter and set.
I can also see that in the "Devices" window, the value is displayed.

I changed - kwRem = myJson.Sensors[5].TaskValues[0].Value - to kwRem = myJson.Sensors[0].TaskValues[2].Value based on what my json output is, see below, but the value on the ESP page stay "0".

Code: Select all

{"System":{
"Load":17.93,
"Load LC":1203,
"Build":20115,
"Git Build":"pygit2_not_installed",
"System Libraries":"ESP82xx Core 2843a5ac, NONOS SDK 2.2.2-dev(38a443e), LWIP: 2.1.2 PUYA support",
"Plugin Count":47,
"Plugin Description":"[Normal]",
"Local Time":"2021-10-23 11:04:30",
"Time Source":"NTP",
"Time Wander":132.205,
"Use NTP":"true",
"Unit Number":1,
"Unit Name":"kWh",
"Uptime":18,
"Uptime (ms)":1072386,
"Last Boot Cause":"Soft Reboot",
"Reset Reason":"Software/System restart",
"CPU Eco Mode":"false",
"Heap Max Free Block":10864,
"Heap Fragmentation":21,
"Free RAM":13872,
"Free Stack":3072,
"Sunrise":"7:40",
"Sunset":"19:47",
"Timezone Offset":120,
"Latitude":0.00,
"Longitude":0.00
},
"WiFi":{
"Hostname":"kWh",
"IP Config":"DHCP",
"IP Address":"192.168.2.196",
"IP Subnet":"255.255.255.0",
"Gateway":"192.168.2.1",
"STA MAC":"BC:DD:C2:27:5C:94",
"DNS 1":"192.168.2.10",
"DNS 2":"(IP unset)",
"SSID":"Zodiac",
"BSSID":"18:E8:29:E1:DF:73",
"Channel":6,
"Encryption Type":"WPA2/PSK",
"Connected msec":1068000,
"Last Disconnect Reason":1,
"Last Disconnect Reason str":"(1) Unspecified",
"Number Reconnects":0,
"Configured SSID1":"Zodiac",
"Configured SSID2":"",
"Force WiFi B/G":"false",
"Restart WiFi Lost Conn":"false",
"Force WiFi No Sleep":"false",
"Periodical send Gratuitous ARP":"false",
"Connection Failure Threshold":0,
"Max WiFi TX Power":17.50,
"Current WiFi TX Power":0.00,
"WiFi Sensitivity Margin":3,
"Send With Max TX Power":"false",
"Extra WiFi scan loops":0,
"Periodical Scan WiFi":"true",
"Use Last Connected AP from RTC":"false",
"RSSI":-36
},
"Sensors":[
{
"TaskValues": [
{"ValueNumber":1,
"Name":"avg_1min",
"NrDecimals":2,
"Value":4140.00
},
{"ValueNumber":2,
"Name":"acc_kWh",
"NrDecimals":3,
"Value":360.577
},
{"ValueNumber":3,
"Name":"remain_kwh",
"NrDecimals":2,
"Value":157.99
}],
"DataAcquisition": [
{"Controller":1,
"IDX":0,
"Enabled":"true"
},
{"Controller":2,
"IDX":0,
"Enabled":"false"
},
{"Controller":3,
"IDX":0,
"Enabled":"false"
}],
"TaskInterval":60,
"Type":"Generic - Pulse counter",
"TaskName":"powermeter",
"TaskDeviceNumber":3,
"TaskEnabled":"true",
"TaskNumber":1
}
],
"TTL":60000
}

chromo23 · #13 Post by **chromo23** » 23 Oct 2021, 14:11

Hmmmm.. it should work. analyzed your json and the values are correct.... maybe a typo?
try it with this file... i already entered the right values and tested it:

kw.html.zip: (1.32 KiB) Downloaded 269 times

chromo23 · #14 Post by **chromo23** » 23 Oct 2021, 14:59

If you like this more:

: Bildschirmfoto 2021-10-23 um 14.57.34.png (39.75 KiB) Viewed 8603 times

go for it:

kw2.html.zip: (2.86 KiB) Downloaded 321 times

Zodiac69 · #15 Post by **Zodiac69** » 25 Oct 2021, 19:07

Hi chromo23

Thank you for your time and effort, it is working 100%

How do i set a var# from the dashboard

How do i set a var# from the dashboard

Re: How do i set a var# from the dashboard

Re: How do i set a var# from the dashboard

Re: How do i set a var# from the dashboard

Re: How do i set a var# from the dashboard

Re: How do i set a var# from the dashboard

Re: How do i set a var# from the dashboard

Re: How do i set a var# from the dashboard

Re: How do i set a var# from the dashboard

Re: How do i set a var# from the dashboard

Re: How do i set a var# from the dashboard

Re: How do i set a var# from the dashboard

Re: How do i set a var# from the dashboard

Re: How do i set a var# from the dashboard

Re: How do i set a var# from the dashboard

Who is online