HTML Button Code to trigger GPIO 12 (Sonoff S20)
Moderators: grovkillen, Stuntteam, TD-er
HTML Button Code to trigger GPIO 12 (Sonoff S20)
Hello Community,
i am new to this board and i hope i got help to my simple question. I am using the Sonoff S20 WIFi Switch and use the firmware to ESP Easy R120 . All worked fine and i am exited about this great software. Now I am looking for a simple HTML Website solution to trigger my GPIO 12.
I can access my Switch with "http://192.168.XXX.XXX/control?cmd=pulse,12,1,350 and the relay send the puls to my ELTAKO Garage light switch and on my Web explorer i got the HTMl result/log screen. So far so good.
I like to have a clean, small Webpage with a button that triggers the GPIO 12 without using any MQTT or any other protocol. HTML Button click and the light goes on, without the Log Result " {"log": "GPIO 12 Pulsed for 350 mS","plugin": 1,"pin": 12,"mode": "output","state": 1}.
Is there a setting in ESPEASY to prevent the result, or jump back to the website with the button ? Or do someone of you have the correct HTML coding for me. Would be great if someone of you can help me.
Thank you for your help
best regards
tom
I tried this code snipped in a webpage, it worked but jumped to the result page...
INPUT TYPE="button" value="Garage" onClick="parent.location='http://192.168.XXX.XXX/control?cmd=puls ... 0'"></FORM>
i am new to this board and i hope i got help to my simple question. I am using the Sonoff S20 WIFi Switch and use the firmware to ESP Easy R120 . All worked fine and i am exited about this great software. Now I am looking for a simple HTML Website solution to trigger my GPIO 12.
I can access my Switch with "http://192.168.XXX.XXX/control?cmd=pulse,12,1,350 and the relay send the puls to my ELTAKO Garage light switch and on my Web explorer i got the HTMl result/log screen. So far so good.
I like to have a clean, small Webpage with a button that triggers the GPIO 12 without using any MQTT or any other protocol. HTML Button click and the light goes on, without the Log Result " {"log": "GPIO 12 Pulsed for 350 mS","plugin": 1,"pin": 12,"mode": "output","state": 1}.
Is there a setting in ESPEASY to prevent the result, or jump back to the website with the button ? Or do someone of you have the correct HTML coding for me. Would be great if someone of you can help me.
Thank you for your help
best regards
tom
I tried this code snipped in a webpage, it worked but jumped to the result page...
INPUT TYPE="button" value="Garage" onClick="parent.location='http://192.168.XXX.XXX/control?cmd=puls ... 0'"></FORM>
Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)
Hello,
you could try this:
with some small adjustments it should fit your needs
you could try this:
Code: Select all
<html>
<head>
<script>
function lampAan() {
var request = new XMLHttpRequest();
var url = "http://192.168.12.113/control?cmd=gpio,12,1";
request.open("GET", url, true);
request.send(null);
}
function lampUit() {
var request = new XMLHttpRequest();
var url = "http://192.168.12.113/control?cmd=gpio,12,0";
request.open("GET", url, true);
request.send(null);
}
</script>
</head>
<body>
<input type="button" value="lamp aan" onClick="lampAan()">
<input type="button" value="lamp uit" onClick="lampUit()">
</body>
</html>
Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)
Hello,
thank you very much for your help. This will work perfectly for my needs !
best regards
Tom
thank you very much for your help. This will work perfectly for my needs !
best regards
Tom
Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)
Thank you, your solution was helpful for me as well.
Can you give a hint on another point? What code in html could report actual status of the switch?
I know that it is possible - it is done in this application: viewtopic.php?f=2&t=3447
Like on = green square, off = red square (or dot - whatever).
Can you give a hint on another point? What code in html could report actual status of the switch?
I know that it is possible - it is done in this application: viewtopic.php?f=2&t=3447
Like on = green square, off = red square (or dot - whatever).
Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)
Has someone a solution/example for this question of macmeup.
I use a small IIS server for home-automation, and use no MQTT or ifttt, only html.
I use the commands:
http://192.168.2.xx/control?cmd=gpio,12,1
http://192.168.2.xx/control?cmd=gpio,12,0
http://192.168.2.xx/control?cmd=status,GPIO,12
I get responce back in Json format! (catching it in a frame.src)
I just do not know how to handle the json string for making my Led-image go from red to green.
Please advice.
I use a small IIS server for home-automation, and use no MQTT or ifttt, only html.
I use the commands:
http://192.168.2.xx/control?cmd=gpio,12,1
http://192.168.2.xx/control?cmd=gpio,12,0
http://192.168.2.xx/control?cmd=status,GPIO,12
I get responce back in Json format! (catching it in a frame.src)
I just do not know how to handle the json string for making my Led-image go from red to green.
Please advice.
- grovkillen
- Core team member
- Posts: 3621
- Joined: 19 Jan 2017, 12:56
- Location: Hudiksvall, Sweden
- Contact:
Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)
You need to give us more on the hardware setup of yours.
ESP Easy Flasher [flash tool and wifi setup at flash time]
ESP Easy Webdumper [easy screendumping of your units]
ESP Easy Netscan [find units]
Official shop: https://firstbyte.shop/
Sponsor ESP Easy, we need you
ESP Easy Webdumper [easy screendumping of your units]
ESP Easy Netscan [find units]
Official shop: https://firstbyte.shop/
Sponsor ESP Easy, we need you
Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)
I have at home a Workstation 24/7 on which my website is running.
Via that website i want to switch SonOff s20 devices.
So I make a selection of what I want to turn on or off via that website, and that site executes the commands to the relevant sonoffs.
see a small example below:
<!-- http://localhost/sonoff/sonofflamp.htm -->
<html>
<head>
<script>
function lampAan() {
var request = new XMLHttpRequest();
var url = "http://192.168.2.xxx/control?cmd=gpio,12,1";
request.open("GET", url, true);
request.send(null);
}
function lampUit() {
var request = new XMLHttpRequest();
var url = "http://192.168.2.xxx/control?cmd=gpio,12,0";
var r;
request.open("GET", url, true);
request.send(null);
}
function lampStatus() {
var url = "http://192.168.2.xxx/control?cmd=Status,GPIO,12";
var frame = document.createElement("iframe");
frame.src = url;
frame.id = "status";
frame.style.left = "100px"; // positie on screen
frame.style.backgroundColor = "#F00"; // red
frame.style.width = "450px";
frame.style.height = "35px";
document.body.appendChild(frame); // voeg frame toe aan het huidige blad
var x = document.getElementById("status").innerHTML
alert(document.getElementById("status"));
// the json string i get returned i want to use for letting a .jpg file LampOn or Lampoff showing
// I do not know how to handle the string
// Maybe the whole approach is wrong!
}
</script>
</head>
<body>
<input type="button" value="Lamp aan" onClick="lampAan()">
<input type="button" value="Lamp uit" onClick="lampUit()">
<br />
<br />
<input type="button" value="Lamp Status" onClick="lampStatus()">
<br />
<br />
<!-- Here show a right LampOn or LampOff image -->
</body>
</html>
I hope this is enough to give me an advice to come to a good solution (so without having to use external "internet" servers)
Please advice.
Via that website i want to switch SonOff s20 devices.
So I make a selection of what I want to turn on or off via that website, and that site executes the commands to the relevant sonoffs.
see a small example below:
<!-- http://localhost/sonoff/sonofflamp.htm -->
<html>
<head>
<script>
function lampAan() {
var request = new XMLHttpRequest();
var url = "http://192.168.2.xxx/control?cmd=gpio,12,1";
request.open("GET", url, true);
request.send(null);
}
function lampUit() {
var request = new XMLHttpRequest();
var url = "http://192.168.2.xxx/control?cmd=gpio,12,0";
var r;
request.open("GET", url, true);
request.send(null);
}
function lampStatus() {
var url = "http://192.168.2.xxx/control?cmd=Status,GPIO,12";
var frame = document.createElement("iframe");
frame.src = url;
frame.id = "status";
frame.style.left = "100px"; // positie on screen
frame.style.backgroundColor = "#F00"; // red
frame.style.width = "450px";
frame.style.height = "35px";
document.body.appendChild(frame); // voeg frame toe aan het huidige blad
var x = document.getElementById("status").innerHTML
alert(document.getElementById("status"));
// the json string i get returned i want to use for letting a .jpg file LampOn or Lampoff showing
// I do not know how to handle the string
// Maybe the whole approach is wrong!
}
</script>
</head>
<body>
<input type="button" value="Lamp aan" onClick="lampAan()">
<input type="button" value="Lamp uit" onClick="lampUit()">
<br />
<br />
<input type="button" value="Lamp Status" onClick="lampStatus()">
<br />
<br />
<!-- Here show a right LampOn or LampOff image -->
</body>
</html>
I hope this is enough to give me an advice to come to a good solution (so without having to use external "internet" servers)
Please advice.
Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)
Hello again,
I found a solution, but its only working localy not remotely. And the problem is CORS
Note: my webserver is 192.168.2.100 and a sonoff S20 is on 192.168.2.52
In debug window from Chrome i find:
Failed to load http://192.168.2.52/control?cmd=status,GPIO,12: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.2.100' is therefore not allowed access.
sonofflamp_json.htm:1
IE11 debug window:
SEC7120: Oorspronkelijke http://192.168.2.100 niet gevonden in Access-Control-Allow-Origin-header.
SCRIPT7002: XMLHttpRequest: Netwerkfout 0x80700013, Kan deze bewerking niet voltooien door fout 80700013.
I found as a (posible) solution:
To change my IIS server web.config file and append the line "Access-Control-Allow-Origin *" for testing, but no positive result.
The function for get the json data is as follows:
function lampStatusJSON() {
// alert("Execute the lampStatusJSON function");
// return;
$.getJSON('http://192.168.2.52/control?cmd=Status,GPIO,12', function(data) {
// Set status of the LED On or Off
if (data.state == "1"){ // If status = 1 then LED on
document.getElementById("led1").src = "SonOff_Plaatjes/LEDa.JPG";
}else{ // else LED off
document.getElementById("led1").src = "SonOff_Plaatjes/LEDu.JPG";
}
// what are the values in the json string
document.getElementById("status").innerHTML = ("logging: "+data.log
+"<br>plugin: "+data.plugin
+"<br>pinnmr: "+data.pin
+"<br>mode: "+data.mode
+"<br>status: "+data.state);
});
}
Hope someone can give me a hint for a good solution for this!
I found a solution, but its only working localy not remotely. And the problem is CORS
Note: my webserver is 192.168.2.100 and a sonoff S20 is on 192.168.2.52
In debug window from Chrome i find:
Failed to load http://192.168.2.52/control?cmd=status,GPIO,12: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.2.100' is therefore not allowed access.
sonofflamp_json.htm:1
IE11 debug window:
SEC7120: Oorspronkelijke http://192.168.2.100 niet gevonden in Access-Control-Allow-Origin-header.
SCRIPT7002: XMLHttpRequest: Netwerkfout 0x80700013, Kan deze bewerking niet voltooien door fout 80700013.
I found as a (posible) solution:
To change my IIS server web.config file and append the line "Access-Control-Allow-Origin *" for testing, but no positive result.
The function for get the json data is as follows:
function lampStatusJSON() {
// alert("Execute the lampStatusJSON function");
// return;
$.getJSON('http://192.168.2.52/control?cmd=Status,GPIO,12', function(data) {
// Set status of the LED On or Off
if (data.state == "1"){ // If status = 1 then LED on
document.getElementById("led1").src = "SonOff_Plaatjes/LEDa.JPG";
}else{ // else LED off
document.getElementById("led1").src = "SonOff_Plaatjes/LEDu.JPG";
}
// what are the values in the json string
document.getElementById("status").innerHTML = ("logging: "+data.log
+"<br>plugin: "+data.plugin
+"<br>pinnmr: "+data.pin
+"<br>mode: "+data.mode
+"<br>status: "+data.state);
});
}
Hope someone can give me a hint for a good solution for this!
Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)
Hello,
Does someone have a solution in HTML to read the status of a sonoff S20 device via windows IIS.
I want to use it to read it from my windows iis, without the 'Access-Control-Allow-Origin' errors
function lampStatus() {
var url = "http://192.168.2.50/control?cmd=Status,GPIO,12";
var frame = document.createElement("iframe");
frame.src = url;
frame.id = "status";
// frame.style.position = "relative";
frame.style.left = "100px"; // positie die we niet op het scherm zien haha.. -9999px
frame.style.backgroundColor = "#F00"; // rood
frame.style.width = "450px";
frame.style.height = "35px";
document.body.appendChild(frame); // voeg frame toe aan het huidige blad
}
Other way, with a iframe i get "No access" errors
If someone has a solution for it, please can you give me a copy of that html?
Thanks in advance,
Leo
Does someone have a solution in HTML to read the status of a sonoff S20 device via windows IIS.
I want to use it to read it from my windows iis, without the 'Access-Control-Allow-Origin' errors
function lampStatus() {
var url = "http://192.168.2.50/control?cmd=Status,GPIO,12";
var frame = document.createElement("iframe");
frame.src = url;
frame.id = "status";
// frame.style.position = "relative";
frame.style.left = "100px"; // positie die we niet op het scherm zien haha.. -9999px
frame.style.backgroundColor = "#F00"; // rood
frame.style.width = "450px";
frame.style.height = "35px";
document.body.appendChild(frame); // voeg frame toe aan het huidige blad
}
Other way, with a iframe i get "No access" errors
If someone has a solution for it, please can you give me a copy of that html?
Thanks in advance,
Leo
Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)
You can have a look at the code in the WebServer.ino file related to handling JSON.
See https://github.com/letscontrolit/ESPEas ... r.ino#L214
If you add that to the page which handles your command, then you will no longer get these errors.
You will have to rebuild it yourself.
See https://github.com/letscontrolit/ESPEas ... r.ino#L214
Code: Select all
WebServer.sendHeader(F("Access-Control-Allow-Origin"),"*");
You will have to rebuild it yourself.
Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)
Sorry, but i have no access or do not know how to access that page in my sonoff's.
I only have access to my html page on my IIS.
Is there maby another way to see the status of the sonoff without the cors (Access-Control-Allow-Origin) give me problems?
many thanks in advance!
I only have access to my html page on my IIS.
Is there maby another way to see the status of the sonoff without the cors (Access-Control-Allow-Origin) give me problems?
many thanks in advance!
Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)
In theorie pretty easy. Don't trigger the device via a predefined event. Using the rules of the requested device create your own event and use SendToHTTP to send an answer with which content you ever want.
Example:
Request from server:
Rule on requested device:
To step deeper into the pretty environment of rules in ESPEasy just visit https://www.letscontrolit.com/wiki/inde ... rial_Rules
Example:
Request from server:
Code: Select all
http://192.168.xxx.xxx/control?cmd=event,SendState
Code: Select all
On SendState do
SendToHTTP 192.168.xxx.xxx,80,/Relay.php?state=[Relay#State]
endon
Code: Select all
pi@raspberrypi:~ $ man woman
No manual entry for woman
pi@raspberrypi:~ $
Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)
For Wiki,
It took a while but it works great, thanks for your time and this good tip
It took a while but it works great, thanks for your time and this good tip
Who is online
Users browsing this forum: No registered users and 114 guests