Place to put your Basic demos and examples

Moderator: Mmiscool

User avatar
By Electroguard
#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.

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]
User avatar
By Electroguard
#47936 Hah, I'm 'webby-challenged' and feeling my way around in the dark as well pal, so I'm afraid it's just a case of the blind leading the blind... but I think we seem to be stumbling along in the right sort of direction.

We could do with someone a bit more experienced to show us how to apply different inline css styles to just individual buttons though, cos at the moment the same style affects all buttons on that page.