Berry web_handler added, how to auto-update page

[MechatronikMonkey]

I implemented a new web-page with the
https://github.com/arendst/Tasmota/blob/development/tasmota/berry/examples/web_handler_demo.be

working just fine, but I dynamically add some variables with

def web_add_handler()
        webserver.on('/mypage', / -> self.http_get(), webserver.HTTP_GET)
        webserver.on('/mypage', / -> self.http_post(), webserver.HTTP_POST)
    end

    def http_get()

        webserver.content_start('My Web UI')
        webserver.content_send_style()

        var data_str = str(self.MyData)  #get value of data from object
        print("http_get trigered! value: %f", self.MyData)  #just for debugging, if this is called
        MyHttpManager().show_data(data_str ) # send html content with webserver.content_send ("<div>..." + data_str + "...</div>")

        webserver.content_stop()
    end

If I initialy load the page, the data_str is updated and the html is send. But once loaded, the value never changes. There is no auto-update feature by default.

How can I add auto update of my values?

[sfromis]

The way Tasmota handles things like the console, or updating sensor values on the front page is to have the page include JavaScript code to poll at intervals.

If comparing to the Berry implementation of the GPIO Viewer, the structure is instead that the browser has JavaScript code in control, with Tasmota emitting updates on the still-open HTTP connection (stream).

[MechatronikMonkey]

Ok thanks.... I found it in the html sources... they implement a wl=f=>window.addEventListener('load',f); and do XMLHttpRequest(); every 2 Seconds. But I cannot figure out how they get the sensor data.

So my first idea was to use the status cmd http://192.168.xxx.xxx/cm?cmnd=status%2010
But every time the sensor status is called like this you get a message in the console about that. If I refresh the page every 2 seconds, the console would be blocked more or less.

So where can I get the sensor date from for my AJAX / Java Script to feed without triggering console?

[sfromis]

If you ask about sensor data on the Tasmota front page, that is done by an internal interface in Tasmota, serving a HTTP endpoint, which will call the sensor drivers to produce HTML bits.

If you mean your own sensor, you can provide a similar endpoint. That endpoint could also execute a tasmota.read_sensors() for the generated JSON (similar to what is in Status 10 output) and do whatever.

[MechatronikMonkey]

Ok, but there is no default JSON String I can get without triggering the console? So if I need a interface I need to implement my own endpoint which delivers a JSON?

[MechatronikMonkey]

What is the best way to provide my endpoint?

The only way I get it to work is this:

webserver.on('/sens_endp', / -> self.http_json_endpoint(), webserver.HTTP_GET)

...

  def http_json_endpoint()
        webserver.content_start("MyEndpointTitle")
        webserver.content_send_style()
        webserver.content_send ("{\"MySensor\":1234}")
        webserver.content_stop()
    end

But this produces some overhead with the title and so on:

But i would love to only deliver, what is necessary, like on the sensors command page:

Is it possible to build up the content like in the sensors command page with berry scripts? Can´t figure it out.

[sfromis]

Tasmota has no API, outside of what it is designed for, MQTT - unless you call commands via HTTP an "API" too. In other words, Tasmota is not RESTful.

When you say "sensors command page" (which Tasmota does not have), do you mean the front page of Tasmota with sensors? Or What?

When it comes to the overhead you'd like to avoid, that is just a question of using the appropriate calls for producing content, which is different from what it takes to build a full html page. Specifically, I'm talking about using webserver.content_response which is directly meant for "a response to a XMLHttpRequest". Reading docs is a better plan than scavenging sample code.

Also, if you create drivers in Berry, part of what the driver is expected to do is to format the values it can provide as both JSON and tagged for the Tasmota front page.

[MechatronikMonkey]

Okay, thanks. That saves me a lot of time from having to look deeper into the source codes.

I wasn't clear about the sensors command page. I mean the mc?=status%2010 endpoint. See screenshot.

Perfect. This webserver.content_response is exactly what I was probably looking for. I'll test it tonight.

Yeah, yeah... RTFM... you all never get tired of saying that 😆 There are other things in life besides coding, and it's nice to have a friendly and helpful community that quickly assists without making you feel bad for potentially being too lazy to read the manual.
😜

But thank you very much for your suggestion to read the documentation... it's often quicker to copy a few code snippets together and see if it runs quickly... so you definitely have a point 😅

Speaking of documentation, I find that Tasmota lacks a proper API description or at least some Doxygen... so you always have to dig deep into the source code to see what Tasmota is doing.

Where did you find documentation on the Berry commands, couldn´t find any... ?

My plan now is to create an endpoint that provides the required sensor data as a JSON string and then use AJAX/JavaScript to periodically fetch the values and update them on the page.

Thnaks so far. I will provide the end result here in a few days.

[sfromis]

Can you guess where I find Berry docs for it's integration with Tasmota? In the docs!
https://tasmota.github.io/docs/Berry/
And Berry language, outside of the Tasmota context:
https://berry.readthedocs.io/en/latest/index.html

The word "API" is not very meaningful, unless you mention what type of info you're after. But the docs has a lot of pages covering many topics. Better start there instead of assuming that the source code is easy to glean details from....

When it comes to the "non-API" commands via HTTP, that's unsurprisingly mentioned on the docs page about commands. The only thing which can be called a commands page is in the docs, as there is no web page for commands as such, unless you count the various means of issuing commands, like console, MQTT, serial, HTTP, LoRa, rules/Berry/scripter.
https://tasmota.github.io/docs/Commands/#with-web-requests

[MechatronikMonkey]

Ah, you like to weigh your words carefully, don't you? Haha... yes, you mighty intelligent and magnificent programmer. I am unworthy and thank you for taking me under your wing. Haha... lol lol... thanks for clarifying once again what an API is... I'm such a fool and you're such a great hero. Thank you thank you thank you...

[MechatronikMonkey]

To make an auto-update I added the following java script to the created web-page:

<script>
        // Shortened form for document.getElementById - but is already included from tasmota, so no need to add again.
        //const eb = s => document.getElementById(s);

        // Function to fetch data via AJAX
        function fetchData() {
            // Create a new XMLHttpRequest object
            const xhr = new XMLHttpRequest();

            // Define what happens when the request is successful
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // Process the response data
                    const data = JSON.parse(xhr.responseText);

                    // Check if TankPerc is defined and update the progress display
                    if (data.TankPerc !== undefined) {
                        // Update the content of the div element with id 'progress-bar'
                        eb('progress-bar').innerText = `${data.TankPerc}%`;
                        
                        // Update the width of the bar based on TankPerc
                        eb('progress-bar').style.width = `${data.TankPerc}%`;
                    }
                }
            };

            // Open the request (GET request to the endpoint)
            xhr.open('GET', '/shr', true);

            // Send the request
            xhr.send();
        }

        // Call fetchData every 5 seconds (5000 milliseconds)
        setInterval(fetchData, 5000);

        // Initial call to fetchData function to avoid waiting 5 seconds for the first update
        fetchData();
    </script>

This can be injected by the follwoing call sequence of the webserver in my berry script

    def http_get()
        webserver.content_start('My Web UI')
        #incject the auto reload script in head/script
        MyHttpManager().inject_auotReloadScript()
        webserver.content_send_style()
        #get tank percentage as string and deliver to the show_tank method
        var tank_str = string.format("%i", self.tank_data)
        MyHttpManager().show_tank(tank_str)
        webserver.content_stop()
    end

also I added a new endpoint shr to deliver the data

    `webserver.on('/shr', / -> self.http_json_endpoint(), webserver.HTTP_GET)`

and provide a function for this endpoint to deliver the data as json string.

def http_json_endpoint()

        # get sensordata and provide through http
        var MysensorData = tasmota.read_sensors()
        webserver.content_response(MysensorData)
    end