How to color Berry Buttons?

[ullix]

I create a green button in Berry with:

def web_add_main_button()
    webserver.content_send("<button  style='background-color:green; color:white;' onclick='la(\"&start_geiger=99\");'>Start Geiger Counter</button>")
end

I can act on clicks via web_sensor(), ok. But I can't find a way to change the bg-color, to indicate status, like red/green for on/off.

Once the button is created, it seems out of reach. If CSS gives a solution, I don't see how?

[ullix]

If changing the color of a button is not an option, can I at least change the writing on the lable, like e.g. change "Start" to "Stop" and reverse?

[sfromis]

In both cases, you can force a whole-page refresh at short intervals by injecting a bit of Javascript code. Yes, I don't like that either 😉

Or with a more Javascript-heavy approach do targeted page updates. The "LED Animation Console" (DSL Code Editor/Compile) is an example of the latter, to disable/enable buttons.
https://github.com/arendst/Tasmota/blob/development/lib/libesp32/berry_animation/src/webui/animation_web_ui.be
Yeah, that's "a bit much" to handle a dialog.

It does not look like you can do much responding to the web_sensor callback, where the associated tasmota.web_send and tasmota.web_send_decimal calls are only for the specially formatted string, which is part of the standard refresh cycle (2.345 seconds intervals by default). Of course, it could be doable to have some Javascript thing watching details of that response to do something.

To be clear, I'm not declaring "that's it", instead only reporting details I've spotted.

[ullix]

Good Grief! My Belly buttons are really yelling for Help!

[sfromis]

You can stop bellyaching now....

With AI help, I found a simple approach, only slightly kludgy, having the web_sensor callback respond with
tasmota.web_send(f"<img src='data:x,' style='display:none' onerror=\"let obj=eb('{sliderid}');if (obj) obj.{value=};this.remove();\">")
That "image" is guaranteed to fail loading (will not ask the server), hence the onerror will be executed. And the slider jumped.
Does not work with tasmota.web_send_decimal

That was for a slider, but should work as well for other types of DOM updates.

[ullix]

Was no help to me. what values are needed for "sliderid" and for "value"? I tried random values, but without result.

I googled for the exact string, but that does not exist. Perhaps an on-the-fly AI result?

I see here eb() and previosuly saw la(). Javascript functions, but what are they doing, and where are they defined, what's their code?

[sfromis]

In my example, "sliderid" is simply a variable holding whatever id a slider has. And the "value" is a variable holding whatever position to move to. Just normal Berry syntax for f-strings. Such a helper function may be useful to illustrate:

  def DOMupdate(id, value)
    # This trick allows DOM updates, while <script> tags would be blocked for security reasons
    return f"<img src='data:x,' style='display:none' onerror=\"let obj=eb('{id}');if (obj) obj.{value=};this.remove();\">"
  end

And the web_sensor callback could then have something along the lines of:
tasmota.web_send(self.DOMupdate('myslider', newposition))

However if/when your use case is not a slider, but you instead want to do other DOM updates (like button colors), you need to replace as appropriate for your specific wants. My point was to illustrate how you can do DOM updates from Berry code.

Not tested, but maybe something like one of these in the Javascript code:

obj.style.backgroundColor = 'blue'; 
obj.style.backgroundColor = '#3498db';

Obviously using an argument like "value" in my example to have the value, instead of hardcoded in js.

Tasmota provides a number of predefined Javascript functions to facilitate compact code, where eb is to do getElementById and la to do XMLHttpRequest (with some additional processing).
You can find the bits in:
https://github.com/arendst/Tasmota/tree/development/tasmota/html_uncompressed

[ullix]

Oh, I see now - almost straight forward :-/

First you create a new button to add to the (main) page with web_add_main_button(). It gets an onclick() to signal a page reload with a new condition. Don't forget to add a DOM-ID, like id='geigerbtn'!

Then in web_sensor() you check whether this button has been clicked. If it has then you flip the status of the button flag, and build the page accordingly.

But before building you change the DOM of the page.

In the DOMchange(id, text, color) routine you create a new element to the page, an image. But you fake the image, and prevent its showing. But as the fake creates an error, you use that for a Javascript onerror() function to search for the DOM-ID you had defined for the button, and, if found, change its text and bg-color. Don't forget to finally remove your fake image!

Net effect: your button has changed color and text. Nothing else.

I feel my bellyaches coming back :-(

def web_add_main_button()
    webserver.content_send("<p></p><button id='geigerbtn' style='background-color:grey;' onclick='la(\"&start_geiger=1\");'>Geiger Off</button>")
end

def DOMchange(id, text, color)
    return string.format("<img src='' style='display:none' onerror=\"let obj=eb('%s'); if (obj) {obj.innerHTML='%s'; obj.style.backgroundColor='%s';};;this.remove();\">", id, text, color)
end

def web_sensor()
    if webserver.has_arg("start_geiger")
        global.flag_geiger = !global.flag_geiger
        if global.flag_geiger   tasmota.web_send(self.DOMchange('geigerbtn', "Geiger On",  "#0b0"))
        else                    tasmota.web_send(self.DOMchange('geigerbtn', "Geiger Off", "grey"))
        end
    end

    var msg
    if flag_geiger
        self.HistTS = tasmota.rtc()['local']                                # timestamp
        var DT      = tasmota.strftime("%Y-%m-%d %H:%M:%S", self.HistTS)    # DateTime
        msg = string.format("{s}Geiger DateTime        {m}%s{e}"
                            "{s}Geiger CPM             {m}%0.0f{e}"
                            "{s}Geiger CPS             {m}%0.0f{e}"
                            "{s}Geiger CPS (10s avg)   {m}%0.1f{e}"
                            "{s}Geiger Counter Pin     {m}%s{e}",
                                DT, self.cpm, self.cps, self.cps10s, global.pin_counter1)
    else
        msg = string.format("{s}Geiger is stopped{m} to start click 'Geiger' button%s{e}", "")
    end
    tasmota.web_send_decimal(msg)
end

[sfromis]

What are you bellyaching over now? Just a little bit of tweaking code, instead of the long piece I linked to earlier 😉

What I mean is that when there is no encapsulation framework for producing the HTML and JS bits, doing DOM modification is just how the world works. The trickery with the fake image was just to allow the JS to come from the server, instead of having it all predefined in Javascript code from the web_add_main_button callback.

In principle, I'd prefer modifying just textContent when the html parsing inherent with innerHTML is not needed.

[ullix]

Spoiled by the cleanliness of Tasmota with Berry :-//

Though the web pages do seem to present more problems. I'd like some more space on the "main" page, for my own buttons. But there seems to be no way to e.g. relocate the "Firmware Upgrade" button onto the "Tools" page?

And is creating a new page possible? I'd want something like the "Information" page, but specific to my Geiger data?

[sfromis]

Right, there is no API for modifying existing Tasmota pages, outside of specific simple additions (like adding buttons). Of course, it's always possible to do "dirty tricks" with messy browser-side DOM modifications, which can do extensive things.

Sure, creating a new page is a standard thing to do. Here's a demo doing that:
https://github.com/arendst/Tasmota/blob/development/tasmota/berry/examples/web_handler_demo.be
You can then have a form button to activate it, like:

  def web_add_main_button()
    import webserver
    webserver.content_send("<p></p><form id=hellopage action='hellopage' style='display: block;' method='get'><button>Say Hello</button></form>")
  end

Of course, your new page will not be born with the Javascript helper functions you have on the main page.

[ullix]

Works, Thx!

One question: what am I doing with this : Driver when defining class GLInfoPage : Driver ?

[sfromis]

You can just delete it. Or keep it. Whatever you like.
It was needed in the very beginning, but now it makes no difference.

More generally, the meaning of that syntax with colon and another class name is to have a superclass (in this case Driver) which can be extended by other classes. That way the subclasses get methods and instance variables from the superclass in the same way as if they were part of the subclass. And with some extra ways of handling the inheritance (which the concept is called in object-oriented programming). This can be handy if having different classes sharing the same basic design, but with variations.

Like having a super class for temperature in general, with common methods for this. Then sub classes for Celsius, Fahrenheit, Kelvin, Rankine, Delisle, Newton, Réaumur, Rømer, Wedgwood or whatever unit you may prefer. Yes, all of those are real temperature units, but most are hardly used now.

In more complex scenarios, inheritance hierarchies can get to be a tangled mess, where a cleaner approach sometimes recommended is to favor composition over inheritance. Composition means that the "subclass" instead has a member (instance variable) for the "superclass", and delegates calls. This is more flexible, but also takes more coding to setup.