How to show variable value on Custom Html??

[arimukhlas]

Hi @cotestatnt ,
I have some question,

1. After connected to SSID, we dont know the giving IP Address from router, is possible to add status of ESP? connected or not connected and IP address? so we can go back to the page if we know the IP.

2. Is possible to edit the Wifi Setup page? I read this but I fail, can you give hint more detail to generate setup_htm.h

3. Give me hint how to print or show value of variable on customElement.h? for example, I have x variable, and i want to show value of x to customHTML page.

Thanks, you are great!!

[cotestatnt]

Hi @arimukhlas

I try to answer your questions:

1. This is a nice idea. I will implement as soon as I can;
2. I replied to you in detail on the other issue. Let me know if you are still having problems, maybe I have some npm module installed as global and need to add to dependencies;
3. Use an AJAX call to get the values you need from ESP and then fille the HTML elements with received data.

For example in the simpleServer.ino example, in the index.htm source there is this JavaScript script

      function toggleLed() {
        const pars = new URLSearchParams({
          val:  document.getElementById('toggle-led').checked ? '1' : '0'
        });
        
        fetch('/led?' + pars )                // Do the request
        .then(response => response.text())    // Parse the response 
        .then(text => {                       // DO something with response
          console.log(text);
          document.getElementById('esp-response').innerHTML = text + ' <i>(Builtin LED is ON with a low signal)</i>';
        });
      }
      
      // Add event listener to the LED checkbox (the function will be called on every change)
      document.getElementById('toggle-led').addEventListener('change', toggleLed );

The function toggleLed() is defined and tied to the HTML switch element with id = toggle-led (the last istruction)

In this way on every 'change' event of 'toggle-led' element, the function will be called and send a GET request to ESP with a parameter built according to the HTML switch element state.
Once we have a reply from ESP webserver, the HTML element 'esp-response' will be fitted with esp response (+ some other text).

You need to write a similar HTML code and use as shown in customHTML.ino example.

[arimukhlas]

1. Excellent

2. Still error, cant find module 'node"zlib', what is your node.js version?
3. Thanks for hint, i will try

[cotestatnt]

Good morning @arimukhlas
I've just tested to build again deleting first all my global installed npm modules and it works.
This is my actual npm and node.js version (on Windows machine).

• npm: 9.6.4
• node.js: v19.6.0

Anyway, if you install the zlib modules, it works?

[arimukhlas]

Good morning @arimukhlas I've just tested to build again deleting first all my global installed npm modules and it works. This is my actual npm and node.js version (on Windows machine).

* npm: 9.6.4

* node.js: v19.6.0

Anyway, if you install the zlib modules, it works?

Done, didnt work on Win7 Ultimate, but perfectly work on Win10, Thanks