Pulse Button and Touch Hold Button for MCP23017 + nice design Buttons

[Julian]

Hi everyone,

I thought I'd share this with you - a simple script which creates 2 buttons, triggering a defined pulse on one of the outputs of a MCP23017
and which also creates a third button, that - as long as you touch it (works only on touch screens - not for mouse clicks) it turns on another MCP-output.
(I haven't yet found out, how I can make this work for mouse AND touch devices, without having it triggering twice ...)

The python script only initializes the MCP(s).

Please excuse my rough html, JS and python programming - I am actually not a programmer, but I got this together with the help of a friend
and the CSS-styles are from this website, where you can design your own buttons:

http://www.cssbuttongenerator.com/

For me, this contains the basic functions that I was looking for in the beginning, when I started with WebIOPi
and I can imagine, others may be looking for the same.

I hope it helps and together with the official examples also helps to show, how you can make WebIOPi work for yourself.

Thanks to everyone, who helped to make WebIOPi !! Its fantastic guys :-)

Julian

[Andreas Riegg]

Julian,

thanks for the link to the button generator, looks to be a helpful tool. :-)

Concerning yor script, what is the reason for the sleep(1) instructions? And, if you don't need loop() and destroy() in your script, just delete/omit them, they are optional. Especially for loop(), WebIOPi already has a sleep(1) default implemented if you have no loop() in your script, so this is really redundant. Only reason may be if you would like to sleep longer than 1 second for something that's in your loop. Or shorter.

Andreas

[Toshi Bass]

Hi Julian

Good job with the buttons, so please don't take this in any way as a criticism, just some hints:

This line in your code

                // automatically refresh UI each seconds

                setInterval(updateUI, 500);

is currently not doing anything, actually you need this statement to call a function called    function updateUI()    which needs to check the state of the outputs every time set interval comes around, this function will enable you to say open a second browser at the same time and each button press will be mirrored it keeps everything in sync this is important as you add more buttons especially if there standard On / Off buttons.

I added the following:

        function updateUI() {

// Call MCP.digitalRead 0 to 7 to check state REST APP

if (mcp.isReady()) {

for (var i=0;i<8;i++)

mcp.digitalRead(i, DigitalCallback); }

}

This checks the state of pins 0 - 8 on the mcp23017 so good for future buttons but you could put in separate lines to check just pin 4,5,& 6 only.

I modified a bit your DigitalCallback code to utilize channel number instead of specific elements like Garage, heater & Hold just makes it more efficient and easier to add to.

And I added a example of Hold button using mousedown mouseup events.. ,

Oh and if you like the blue focus line around your buttons when you press them just remove the line   *:focus {     outline: none; }  personally I hate them.

Hope the hints give you some more understanding.

Toshi

  

 

[Julian]

Hi Toshi,

thanks so much for your feedback !
I wouldn't take it as criticism at all and I really thank you for taking the time to explain and make things better ! :-)
Will get my head around this tonight hopefully... ;-)

Cheers Julian

[Julian]

Hi Andreas,

thanks for pointing out, that loop and destroy are optional.
That makes sense :-)

When I left away the sleep (1) instructions, I got an error message,
but that was only, because I still left the def loop (): instruction there...
Thats why I thought, ok, it needs at least a "do nothing" command in each section.
But much easier, like you said:
I just leave them away - thanks heaps ! :-)

Julian