HTML Button Code to trigger GPIO 12 (Sonoff S20)

Moderators: grovkillen, Stuntteam, TD-er

Post Reply
Message
Author
macmeup
Normal user
Posts: 2
Joined: 10 Dec 2017, 00:01

HTML Button Code to trigger GPIO 12 (Sonoff S20)

#1 Post by macmeup » 10 Dec 2017, 00:40

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>

remcodj
Normal user
Posts: 3
Joined: 11 Dec 2017, 12:19

Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)

#2 Post by remcodj » 11 Dec 2017, 16:36

Hello,

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>
with some small adjustments it should fit your needs

macmeup
Normal user
Posts: 2
Joined: 10 Dec 2017, 00:01

Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)

#3 Post by macmeup » 11 Dec 2017, 22:20

Hello,
thank you very much for your help. This will work perfectly for my needs !

best regards
Tom

VanRaiks
Normal user
Posts: 1
Joined: 20 Dec 2017, 18:35

Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)

#4 Post by VanRaiks » 20 Dec 2017, 18:41

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).

Leo
Normal user
Posts: 6
Joined: 18 Jul 2018, 08:59

Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)

#5 Post by Leo » 18 Jul 2018, 11:29

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.

User avatar
grovkillen
Core team member
Posts: 3304
Joined: 19 Jan 2017, 12:56
Location: Hudiksvall, Sweden
Contact:

Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)

#6 Post by grovkillen » 18 Jul 2018, 11:40

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 :idea: :idea: :idea:

Leo
Normal user
Posts: 6
Joined: 18 Jul 2018, 08:59

Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)

#7 Post by Leo » 26 Jul 2018, 14:35

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.

Leo
Normal user
Posts: 6
Joined: 18 Jul 2018, 08:59

Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)

#8 Post by Leo » 31 Jul 2018, 12:52

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!

Leo
Normal user
Posts: 6
Joined: 18 Jul 2018, 08:59

Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)

#9 Post by Leo » 03 Oct 2018, 09:46

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

TD-er
Core team member
Posts: 1818
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)

#10 Post by TD-er » 03 Oct 2018, 16:15

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

Code: Select all

WebServer.sendHeader(F("Access-Control-Allow-Origin"),"*");
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.

Leo
Normal user
Posts: 6
Joined: 18 Jul 2018, 08:59

Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)

#11 Post by Leo » 02 Nov 2018, 20:08

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!

Wiki
Normal user
Posts: 146
Joined: 23 Apr 2018, 17:55

Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)

#12 Post by Wiki » 03 Nov 2018, 00:54

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:

Code: Select all

http://192.168.xxx.xxx/control?cmd=event,SendState
Rule on requested device:

Code: Select all

On SendState do
  SendToHTTP 192.168.xxx.xxx,80,/Relay.php?state=[Relay#State]
endon
To step deeper into the pretty environment of rules in ESPEasy just visit https://www.letscontrolit.com/wiki/inde ... rial_Rules

Leo
Normal user
Posts: 6
Joined: 18 Jul 2018, 08:59

Re: HTML Button Code to trigger GPIO 12 (Sonoff S20)

#13 Post by Leo » 19 Nov 2018, 13:28

For Wiki,
It took a while but it works great, thanks for your time and this good tip :)

Post Reply

Who is online

Users browsing this forum: No registered users and 17 guests