Tasmota: [How to?] HTTP page with ON/OFF Button

Created on 6 Jan 2019 · 10Comments · Source: arendst/Tasmota

Hello,

I have now 3 sonoff basic flashed with TASMOTA.

I would like to write an HTML page and store it in a server to ease the access with simple ON and OFF buttons for all the sonoffs.

I can access them via WAN and LAN.

Could you please point me in that direction? What would be my HTML code?

This would avoid the need to access to the admin page, for each and then use the page buttons...

Cheers and thanks in advance!

question

Source

Lusitanv

All 10 comments

Try TasmoAdmin

curzon01 on 6 Jan 2019

Closing this issue as it has been answered.

Support Information

See Wiki for more information.
See Chat for more user experience.

andrethomas2 on 6 Jan 2019

Why was this closed?

I understand the first "solution" but I simply would like to know the html code to add a button to a page to send the following commands:

http://sonoff/cm?cmnd=Power%20TOGGLE
http://sonoff/cm?cmnd=Power%20On
http://sonoff/cm?cmnd=Power%20off
http://sonoff/cm?user=admin&password=joker&cmnd=Power%20Toggle

This would allow me to have a simple webpage with ON or OFF and thats it

Lusitanv on 8 Jan 2019

'cause this is a issue list, not a forum - your question has nothing to do with Tasmota; it's a question related to html.
Please use the Chat linked above for that

curzon01 on 8 Jan 2019

👍1

Makes sense.
Will do.

Lusitanv on 8 Jan 2019

@Lusitanv did you manage to create the html page ?? :)

cgd1 on 28 Jul 2020

maybe this is a start?

<html>
        <head>
        </head>
        <body>
                <form method="post" action="http://192.168.1.120/cm">
                        <input type="submit" name="cmnd" value="Power On">
                        <input type="submit" name="cmnd" value="Power Off">
                </form>
        </body>
</html>

joba-1 on 28 Jul 2020

👍1

There is a possibility with the scripter. https://tasmota.github.io/docs/Scripting-Language/

_{Sent with GitHawk}

kugelkopf123 on 28 Jul 2020

👍1

thank you bot kindly for replies :+1:

@joba-1 I like your way however I found it a little constricting because it redirects to response

I made a script for the html to do the call in the end, I guess its a more mature way to do it

<html>
        <head>
        </head>        
        <body>
        <input id="contact-submit" type="button" class="btn btn-transparent" value="Submit" onclick="toggle()" />
        </body>
<script>
function toggle() {
    var http = new XMLHttpRequest();
    var url = 'http://192.168.1.187/cm?cmnd=Power%20TOGGLE';
    http.open('POST', url, true);
    http.onreadystatechange = function() {//Call a function when the state changes.
        if(http.readyState == 4 && http.status == 200) {
            //alert(http.responseText);
        }
    }
    //content you could return as alert?
    //var content = {"POWER" : "On"};
    //http.send(JSON.stringify(content));
    http.send();
}
<script>
</html>

cgd1 on 28 Jul 2020

More advanced HTML version. :-)

<html>
  <head>
    <style type="text/css">
      button {height: 80px; width: 300px;}
      button.on {background-color: green;}
      button.off {background-color: red;}
      button.toggle {background-color: orange;}
    </style>
  </head>
  <body> 
    <a href="http://192.168.0.1/">Tasmota GUI</a>
    <div id="192.168.0.1">
      <button class="On" onclick="tasmota(this)">On</button>
      <button class="Off" onclick="tasmota(this)">Off</button>
      <button class="Toggle" onclick="tasmota(this)">Toggle</button>
    </div>
  </body>
<script>
// All Tasmota commands: https://tasmota.github.io/docs/Commands/
// Open: http://192.168.0.1/cs?
// CORS " = disable CORS (Cross Origin Resource Sharing) (default)
//      * = enable CORS for all locations
function tasmota(element) {
    var http = new XMLHttpRequest();
    var url = 'http://' + element.parentNode.id + '/cm?cmnd=Power%20' + element.className;
    //alert (url); // debug
    http.open('post', url, true);
    http.onload = function() { alert (http.responseText); } // success case
    http.onerror = function() { alert (http.responseText); } // failure case
    http.send();
}
</script>
</html>