Button Version 1
( Here Ajax is sending Get reqest with ON/OFF u could add button id also for particular gpio, Lua webserver parses this and turns the GPIO on/off)
Button Version 2
(Pure CSS Graphics copy css code in html for easier buf copy.)
Button.html
Lua Web Server ( Based on Button 1)
See the youtube Video for demonstration
https://www.youtube.com/watch?v=CeKbD82FhKY
( Here Ajax is sending Get reqest with ON/OFF u could add button id also for particular gpio, Lua webserver parses this and turns the GPIO on/off)
<html>It Toggles color on pressing it.
<head>
<script language="javascript">
function colorchange(id)
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
if(document.getElementById(id).value == 'OFF' )
{
document.getElementById(id).style.background = '#ff0000';
document.getElementById(id).value = 'ON';
xmlhttp.open("GET","button.htm?ON",true);
xmlhttp.send();
}
else
{
document.getElementById(id).style.background = '#00ff00';
document.getElementById(id).value = 'OFF';
xmlhttp.open("GET","button.htm?OFF",true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<input type="button" id="btn" onclick="colorchange('btn');" value ="OFF" style="background:#00ff00;"/>
</body>
</html>
Button Version 2
(Pure CSS Graphics copy css code in html for easier buf copy.)
Button.html
<html>Button2.css
<head>
<title> New Document </title>
<meta name="Author" content="Alok Prasad">
<script language="javascript">
function colorchange(id)
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
if(document.getElementById(id).name == 'OFF' )
{
document.getElementById(id).name = 'ON';
xmlhttp.open("GET","a.htm?ON",true);
xmlhttp.send();
}
else
{
document.getElementById(id).name= 'OFF';
xmlhttp.open("GET","a.htm?OFF",true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<link rel="stylesheet" href="button2.css">
<input type="checkbox" id="switch" name="OFF" onclick="colorchange('switch');">
<label for="switch" class="switch"></label>
</body>
</html>
*, *:after, *:before {Screenshot
box-sizing: border-box;
}
#switch {
visibility:hidden;
clip:rect(0 0 0 0);
position: absolute;
left: 9999px;
}
.switch {
display: block;
width: 130px;
height: 60px;
margin: 70px auto;
position: relative;
background: #ced8da; /* Old browsers */
background: -moz-linear-gradient(left, #ced8da 0%, #d8e0e3 29%, #ccd4d7 34%, #d4dcdf 62%, #fff9f4 68%, #e1e9ec 74%, #b7bfc2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ced8da), color-stop(29%,#d8e0e3), color-stop(34%,#ccd4d7), color-stop(62%,#d4dcdf), color-stop(68%,#fff9f4), color-stop(74%,#e1e9ec), color-stop(100%,#b7bfc2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%); /* IE10+ */
background: linear-gradient(to right, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ced8da', endColorstr='#b7bfc2',GradientType=1 ); /* IE6-9 */
transition: all 0.2s ease-out;
cursor: pointer;
border-radius: 0.35em;
box-shadow:
0 0 1px 2px rgba(0,0,0,0.7),
inset 0 2px 0 rgba(255,255,255,0.6),
inset 0 -1px 0 1px rgba(0,0,0,0.3),
0 8px 10px rgba(0,0,0,0.15);
}
.switch:before {
display:block;
position: absolute;
left: -35px; right: -35px;
top: -25px; bottom: -25px;
z-index: -2;
content: "";
border-radius: 0.4em;
background: #d5dde0;
background: linear-gradient(#d7dfe2, #bcc7cd);
box-shadow:
inset 0 2px 0 rgba(255,255,255,0.6),
inset 0 -1px 1px 1px rgba(0,0,0,0.3),
0 0 8px 2px rgba(0,0,0,0.2),
0 2px 4px 2px rgba(0,0,0,0.1);
pointer-events: none;
transition: all 0.2s ease-out;
}
.switch:after {
content: "";
position: absolute;
right: -25px;
top: 50%;
width: 16px;
height: 16px;
border-radius: 50%;
background: #788b91;
margin-top: -8px;
z-index: -1;
box-shadow:
inset 0 -1px 8px rgba(0,0,0,0.7),
inset 0 -2px 2px rgba(0,0,0,0.2),
0 1px 0 white,
0 -1px 0 rgba(0,0,0,0.7),
-47px 32px 15px 13px rgba(0,0,0,0.25);
}
#switch:checked ~ .switch {
background: #b7bfc2; /* Old browsers */
background: -moz-linear-gradient(left, #b7bfc2 0%, #e1e9ec 26%, #fff9f4 32%, #d4dcdf 38%, #ccd4d7 66%, #d8e0e3 71%, #ced8da 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b7bfc2), color-stop(26%,#e1e9ec), color-stop(32%,#fff9f4), color-stop(38%,#d4dcdf), color-stop(66%,#ccd4d7), color-stop(71%,#d8e0e3), color-stop(100%,#ced8da)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%); /* IE10+ */
background: linear-gradient(to right, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7bfc2', endColorstr='#ced8da',GradientType=1 ); /* IE6-9 */
}
#switch:checked ~ .switch:after {
background: #b1ffff;
box-shadow:
inset 0 -1px 8px rgba(0,0,0,0.7),
inset 0 -2px 2px rgba(0,0,0,0.2),
0 1px 0 white,
0 -1px 0 rgba(0,0,0,0.5),
-110px 32px 15px 13px rgba(0,0,0,0.25);
}
Lua Web Server ( Based on Button 1)
wifi.setmode(wifi.SOFTAP)
print(wifi.sta.getip())
led1 = 3
led2 = 4
gpio.mode(led1, gpio.OUTPUT)
gpio.mode(led2, gpio.OUTPUT)
srv=net.createServer(net.TCP)
srv:listen(80,function(conn)
conn:on("receive", function(client,request)
local buf = "";
local _, _, method, path, vars = string.find(request, "([A-Z]+) (.+)?(.+) HTTP");
if(method == nil)then
_, _, method, path = string.find(request, "([A-Z]+) (.+) HTTP");
end
local _GET = {}
if (vars ~= nil)then
for k, v in string.gmatch(vars, "(%w+)=(%w+)&*") do
_GET[k] = v
end
end
buf = buf.."<head> <script language=\"javascript\">";
buf = buf.."function colorchange(id) { var xmlhttp; xmlhttp=new XMLHttpRequest();";
buf = buf.."if(document.getElementById(id).value == \'OFF\' )";
buf = buf.."{ document.getElementById(id).style.background = \'#ff0000\'; ";
buf = buf.."document.getElementById(id).value = \'ON\';";
buf = buf.."xmlhttp.open(\"GET\",\"a.htm?pin=ON2\",true);xmlhttp.send();}";
buf = buf.."else { document.getElementById(id).style.background = \'#00ff00\'; ";
buf = buf.."document.getElementById(id).value = \'OFF\'; xmlhttp.open(\"GET\",\"a.htm?pin=OFF2\",true);xmlhttp.send();}}";
buf = buf.." </script></head> <body>";
buf = buf.."<input type=\"button\" id=\"btn\" onclick=\"colorchange(\'btn\');\" value =\"OFF\" style=\"background:#00ff00;\"></body></html>";
local _on,_off = "",""
if(_GET.pin == "ON1")then
gpio.write(led1, gpio.HIGH);
elseif(_GET.pin == "OFF1")then
gpio.write(led1, gpio.LOW);
elseif(_GET.pin == "ON2")then
gpio.write(led2, gpio.HIGH);
elseif(_GET.pin == "OFF2")then
gpio.write(led2, gpio.LOW);
end
client:send(buf);
client:close();
collectgarbage();
end)
end)
See the youtube Video for demonstration
https://www.youtube.com/watch?v=CeKbD82FhKY
in this "local _, _, method, path, vars = string.find(request, "([A-Z]+) (.+)?(.+) HTTP"); " i don't know what does the "local_,_ " mean? The underscore is a variable or not?
ReplyDeletesite très bien fait, beaucoup d'informations utiles , il serait formidable si vous accompagner ces cours avec des schémas électroniques. Bon courage et meci
ReplyDelete