- Tue May 24, 2016 3:49 am
#47920
This should be handy for small-screen displays such as mobile phones etc.
Change the button size by specifying different font-size:
If you browse here you will see how to change many other different properties.
http://www.w3schools.com/css/css3_buttons.asp
If you come up with any interesting button designs please be good enough to post them here also, for the benefit of others.
The example script below is configured for the Sonoff switched mains unit, but of course an led will do instead of the relay, so it can be configured to run on anything - but if you use an led instead of a relay you will probably need to change the relaylogic from 0 to 1.
Change the button size by specifying different font-size:
If you browse here you will see how to change many other different properties.
http://www.w3schools.com/css/css3_buttons.asp
If you come up with any interesting button designs please be good enough to post them here also, for the benefit of others.
The example script below is configured for the Sonoff switched mains unit, but of course an led will do instead of the relay, so it can be configured to run on anything - but if you use an led instead of a relay you will probably need to change the relaylogic from 0 to 1.
Code: Select all
' BIG COLOURED TOGGLE BUTTON
let ledpin = 13 ' Sonoff LED pin, change to suit for others
let relaypin = 12 ' Sonoff Relay pin, change to suit for others
let ledlogic = 1 'Default led pin off state (allows configuring led pin for active high or active low operation)
let relaylogic = 0 'Default relay pin off state (allows configuring relay pin for active high or active low operation)
io(po,ledpin,ledlogic)
io(po,relaypin,relaylogic)
[HOME]
cls
wprint "<BR><BR><BR><BR><BR><BR>"
wprint |<!DOCTYPE html>|
wprint |<html>|
wprint |<head>|
wprint |<style>|
wprint | .button, input[type="button"], input[type="submit"] { |
wprint | display: inline-block;|
wprint | padding: 15px 25px;|
wprint | font-size: 32px;|
wprint | cursor: pointer;|
wprint | text-align: center;|
wprint | color: #fff;|
if io(laststat,relaypin)=0 then wprint |background-color: #4CAF50;| else wprint |background-color: #f44336; /* Red */|
wprint | border: 2px solid black;|
wprint | border-radius: 15px;|
'wprint | box-shadow: 0 9px #999;|
wprint |}|
wprint |</style>|
wprint |</head>|
wprint |<body>|
wprint |<div style="text-align: center;">|
if io(laststat,relaypin) = 0 then button "ON" [TOGGLE] else button "OFF" [TOGGLE]
wprint |</div>|
wprint |</body>|
wprint |</html>|
wait
[TOGGLE]
if io(laststat,relaypin) = 0 then io(po,relaypin,1) else io(po,relaypin,0)
if io(laststat,ledpin) = 0 then io(po,ledpin,1) else io(po,ledpin,0)
goto [HOME] 
