martedì 29 ottobre 2013

Personalizzazione di Webiopi

Il sistema di gestione Web delle porte GPIO di Raspberry presentato in questo post puo' essere anche customizzato nell'aspetto dell'interfaccia per esempio per mostrare un solo pulsante



Un esempio viene riportato al Wiki di Google Code ...peccato che sia sbagliato

Dopo un po' di ricerche ecco una pagina funzionante che accende e spenge il solo pin GPIO 25. L'aspetto fondamentale e' che prima di usare il pin questo deve essere dichiarato come output
Il file deve essere posizionato in /usr/share/webiopi/htdocs
------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" /> 
        <title>WebIOPi | Demo</title>

        <script type="text/javascript" src="/webiopi.js"></script>
        <script type="text/javascript">
        webiopi().ready(function() {
webiopi().setFunction(25,"out");

                var content, button;
                content = $("#content");
                               
                button = webiopi().createGPIOButton(25, "SWTICH");
                content.append(button); // append button to content div
                       
           

webiopi().refreshGPIO(true);
                
        });
                
        function mousedown() {
                webiopi().digitalWrite(7, 1);
        }
        
        function mouseup() {
                webiopi().digitalWrite(7, 0);
        }
        
        function outputSequence() {
                var sequence = "01010100110011001100101010" // S.O.S. morse code or whatever you want
                // output sequence on gpio 7 with a 100ms period
                webiopi().outputSequence(7, 100, sequence, sequenceCallback);
        }
        
        function sequenceCallback(gpio, data) {
                alert("sequence on " + gpio + " finished with " + data);
        }
        
        function callMacro() {
                var args = [1,2,3] // or whatever you want
                // call myMacroWithArgs(arg)
                webiopi().callMacro("myMacroWithArgs", args, macroCallback);
        }
        
        function macroCallback(macro, args, data) {
                alert(macro + " returned with " + data);
        }
        
        </script>
        <style type="text/css">
                button {
                        display: block;
                        margin: 5px 5px 5px 5px;
                        width: 160px;
                        height: 45px;
                        font-size: 24pt;
                        font-weight: bold;
                        color: black;
                }
                
                input[type="range"] {
                        display: block;
                        width: 160px;
                        height: 45px;
                }
                
                #gpio7.LOW {
                        background-color: White;
                }
                
                #gpio7.HIGH {
                        background-color: Red;
                }
        </style>
</head>
<body>
        <div id="content" align="center"></div>
</body>
</html>