WebUI: standalone Buttons inside form

[ChrisVonFrosta]

I am building a configuration page for various actuators. The form and data transfer work. Now, I wanted to place a test button next to the form for each row (i.e., per actor). For this, I placed it in the table and within the form. Initially, I had the problem that these test buttons also triggered the submission of the form.

To circumvent this, I gave these test buttons the attribute type='button'. Now, the form no longer triggers, but web_sensor() does not respond to it. What am I overlooking or what am I doing wrong?

I cannot understand the behavior in the browser console either. The first button does react, but the parameter does not appear in the Web Console. When you click on the error message and go back, a second line appears that contains the sought-after parameter (test_button=0). Unfortunately, the second attempt (button) does not react at all.

Furthermore, I do not understand the principle of:
" #- the onclick function 'la' takes the function name and the respective value you want to send as an argument -#"
The only information I could find is this comment.

runable test.be

import webserver

class AktorWeb : Driver 

    # The config page
    def web_page_config()
        var test_index=0
        var test_value=20
        if !webserver.check_privileged_access() return nil end
    
        # read configuration
        # var conf = self.read_persist()
    
        webserver.content_start("Configuration")  # title of the web page
        webserver.content_send_style()  # send standard Tasmota styles
        webserver.content_send("<fieldset>")
        webserver.content_send("<legend><b>Feature 1</b></legend>")
    
        webserver.content_send("<p><form id='form1' style='display: block;' action='/form1' method='post'>")

        # Pump configuration
        webserver.content_send("<p><b>AktorList:</b></p>")    

        webserver.content_send(
            f"<table style='width:100%%'>"
            "<tr>"
            "<td style='width:150px'>AktorName</td>"
            "<td>Duration</td>"
            "</tr>"

            "<tr>"      #first row, usually several rows come out of for-loop

            "<td style='width:150px'>"
            "<input type='text' id='name1' name='name{test_index}' value='{test_index}'><br>" 
            "</td>"
            
            "<td>"
            "<input type='number' min='0' step='0.1' id='time{test_index}' name='time{test_index}' value='{test_value}'><br>" 
            "</td>"
            
            "<td>"
            "<p></p><button type='button'  onclick='la(\"&test_button={test_index}\");'>10 Sek Test</button>"
            "<p></p><button type='button' onclick='test_button={test_index}'>10 Sek Test</button>"
            "</td>"
            
            "</tr>"


            "</table>"
            "<hr>"
        )

        # button
        webserver.content_send("<button name='dosierpumpen_settings' class='button bgrn'>Anwenden und Speichern</button>")
        webserver.content_send("</form></p>")
    
        webserver.content_send("<p></p></fieldset><p></p>")
        webserver.content_button(webserver.BUTTON_CONFIGURATION)
        webserver.content_stop()
    end

     #- create a method for adding a button to the configuration menu-#
     def web_add_config_button()
        #- the onclick function "la" takes the function name and the respective value you want to send as an argument -#
        # webserver.content_send("<p></p><button onclick='/aktorconfig'>Aktor Config</button>")  # this needs webserver.has_arg()
        webserver.content_send("<p><form id=aktorconfig action='/aktorconfig' style='display: block;' method='get'><button>Configure PhradioDose</button></form></p>")
    end

    def web_sensor()
        if webserver.has_arg("test_button") # takes a string as argument name and returns a boolean

            # we can even call another function and use the value as a parameter
            var myValue = int(webserver.arg("test_button")) # takes a string or integer(index of arguments) to get the value of the argument
            print(myValue)
            
        end
    end

    def web_add_handler()
        #- we need to register a closure, not just a function, that captures the current instance -#
        webserver.on("/aktorconfig", / -> self.web_page_config(), webserver.HTTP_GET)
        # webserver.on("/dosierpumpen_settings", / -> self.handle_post_request(), webserver.HTTP_POST)
    end
end

#- create and register driver in Tasmota -#
aktor_web_instance = AktorWeb()
tasmota.add_driver(aktor_web_instance)
aktor_web_instance.web_add_handler()

first klick,on first button:

klicked on error message:

back to console:

klicked on new error line:

[s-hadinger]

Javascript la() function is only defined in Tasmota's main page, not other pages. Just do a normal HTML FORM and encode the relative URL. There are examples in Partition_Wizard.

[sfromis]

Again, you already said it yourself, and I confirmed:

As JavaScript runs in the browser, and Berry on the server (Tasmota), there is indeed no direct path.

And the only path available is via network requests, where talking to the web server (Tasmota) is the most straightforward.

[ChrisVonFrosta]

I misspoke earlier. I understood from your previous explanation that I could create a JavaScript function to parse arguments without using web_add_handler(). However, I do not understand the information you provided on how to implement this behavior.

[sfromis]

Well, as what you posted looks like you are already implementing the behavior you want, to me it looked like you merely wanted to ask about doing it without using XMLHttpRequest (in your own la() function or the one already provided by Tasmota on the front page).

And no, I confirmed "that the clients side js can't access berry functions". The communication has to be via a network protocol, where the common way of doing this is to use XMLHttpRequest.

Since you posted Berry code to have your own JavaScript la() function as part of html, I posted the existing Tasmota one to demonstrate that you were already on track. Not to suggest that you could do it "better" in a different way.

[ChrisVonFrosta]

i still don't get it. sorry. Maybe i have to go with several paths from web_add_handler() :/

i do understand,that i can't execute berry fucntion from js function. I understood that la() is only on main page.
I think I understood, that there is a way to have the same behavior like la() that doesn't have to use `web_add_handler().
But I have no idea what i have to write in my js function or what kind of berry function i need been recongnized as type of la()-function?

I am sure, that you tried to help me. Thank you anyway

[sfromis]

Again, you can create your own JavaScript la() function (maybe with another name), when you build the html code you put into each page. And you clearly demonstrated that you have a good idea about how to do that. Yes! I saw that.

What I do not understand is what your problem with web_add_handler() is. If you want to create your own full page, you need to add a handler to make that page known to Tasmota. If you instead simply want to have a widget on an existing Tasmota page, you do not. In both cases web_sensor is the gateway into the Berry code.

Here's a working example for how I just took the standard la() function, I already posted a link to, stripped it down to remove the page refresh logic, and used it to add a slider on the config page (which does not already have a la() function). For good measure, I gave it a different name. The code is from a class, where self.id is the name of the slider, and other instance variables are used in the f-string for the slider.

  def web_add_config_button()
    import webserver
    webserver.content_send(
      "<script>"
      "function myla(p){"
        "x=new XMLHttpRequest();"
        "x.open('GET','.?m=1'+(p||''),true);"
        "x.send();"
      "}"
      "</script>"
      + f'<input type="range" class="slider" id="{self.id}" min={self.min} max=${self.max} value={self.value} onchange=myla("&{self.id}="+value)>')
  end

  def web_sensor()
    import webserver
    if webserver.has_arg(self.id)
      self.setvalue(int(webserver.arg(self.id)))
    end
  end

This is basically very similar to the JavaScript code you already posted yourself, just with the request format to match the existing logic working with the Tasmota webserver module.

This will support multiple widgets, and I'd expect (untested) it to work on multiple pages, as long as the widget names are unique across pages.