pulsante html e css

**romimmo** · 07-04-2015, 10:16

Ciao a tutti, ho trovato in rete del codice in html e css per realizzare un pulsante on/off stile smartphone che dovrebbe eseguire un comando in python. Il mio problema è che non so dove devo indicare che quando sta su on deve eseguire il comando

codice:

sudo python /var/www/on.py

e quando sta su off il comando

codice:

sudo python /var/www/off.py

. Segue il codice che ho trovato in rete
CSS

codice:

.onoffswitch {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    border: 2px solid #999999; border-radius: 20px;
    position: absolute; top: 0; bottom: 0; right: 56px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}

HTML

codice:

<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for="myonoffswitch">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>

**Al_katraz984** · 07-04-2015, 11:24

in pyton? dove gira il tuo script?? hai provato con javascript?

**romimmo** · 07-04-2015, 15:52

Lo script in python è per raspberry py. Ho creato un file index.html con questo codice in cui c'è anche il riferimento dello script

codice:

<html>
<head>
<!--index.php-->
</head>
<body>
<!--GPIO17-->
<form action="" method="post">
ACCENSIONE LUCI GPIO 17&nbsp;
<input type="submit" name="luce1on" value="Accendi luce">
<input type="submit" name="luce1off" value="Spegni luce">

</body>
</html>
<?php
// Funciones PHP del pin GPIO 17

if ($_POST[luce1on]) {
$a- exec("sudo python /var/www/leds/gpio/17/luce1on.py");
echo $a;
}
if ($_POST[luce1off]) {
$a- exec("sudo python /var/www/leds/gpio/17/luce1off.py");
echo $a;
}
// Fin de las funciónes del pin GPIO 17

?>

Il tutto funziona ma volevo inserire uno switch più carino come quello che ho postato

**Al_katraz984** · 07-04-2015, 16:31

mi ci è voluto un po' ma alla fine ho decodificato la tua richiesta..

Se vuoi modificare lo switch e mettere quello che hai postato prima devi conoscere javascript

Codice PHP:


<form action="" method="post">
ACCENSIONE LUCI GPIO 17&nbsp;
<input type="submit" name="luce1on" value="Accendi luce">
<input type="submit" name="luce1off" value="Spegni luce">

in questo form usi 2 "submit" che possono nativamente inviare i dati del form alla action prestabilita.
Quando tu clicchi su uno dei due pulsanti, il form reagisce e richiama nuovamente la pagina popolando l'array POST con il nome=valore del pulsante premuto

nello switch che vuoi inserire invece:

Codice PHP:


<div class="onoffswitch">
 <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
 <label class="onoffswitch-label" for="myonoffswitch">
  <span class="onoffswitch-inner"></span>
  <span class="onoffswitch-switch"></span>
 </label>
</div>

non ci sono pulsanti di submit che inviano il form.
Lo puoi fare associando un evento javascript alla checkbox che in base all'opzione selezionata effettui l'invio del form

tipo

Codice PHP:


var checkbox = document.getElementById( 'myonoffswitch' );
if ( checkbox.checked ) {
//on
 } else {
//off
}

in alternativa cambi lo switch

**romimmo** · 07-04-2015, 17:09

Spero di non dire una castroneria, in caso affermativo scusatemi in anticipo ma sono ignorante in materia e solo un grande appasionato. In pratica per la seconsa ipotesi mi coinsigli di creare un file in java che mette in esecuzione lo script in python???

**Al_katraz984** · 07-04-2015, 17:52

ciao, javascript != java

java è diverso da javascript
javascript non è lo stesso linguaggio di java

molti fanno confusione non preoccuparti

ti serve un file .js che caricherai nel documento html con il quale dovrai gestire la checkbox

**romimmo** · 07-04-2015, 18:03

Ho capito, ma è dal file .js che devo lanciare lo scrip python??

**romimmo** · 07-04-2015, 19:26

Penso di aver fatto dei progressi o quanto meno capito il funzionamento, se allo script dello switch collego il file .js come questo

codice:

function changeSwitch() {
     var checked = document.getElementById("myonoffswitch").checked;
     if(checked)
     {
          //do what ever you need here when checked
         alert('It is checked')
     }
    else
    {
         //do what ever you need when not checked
        alert('Not Checked');
    }
}

Cliccando sullo switch ottengo i rispettivi allert quindi ho provato a fare la stessa cosa per eseguire i due file python ma non funziona. Ecco il mio file.js modificato

codice:

function changeSwitch() {
     var checked = document.getElementById("myonoffswitch").checked;
     if(checked)
     {
$a- exec("sudo python /var/www/leds/gpio/17/luce1on.py");
echo $a;
}
    else
    {
        $a- exec("sudo python /var/www/leds/gpio/17/luce1on.py");
echo $a;
    }
}

Dove sbaglio???

**Al_katraz984** · 08-04-2015, 10:31

non funziona perchè i "comandi" exec sono relativi a PHP sul server.

js serve solo da ponte tra il browser e la pagina php quindi all'interno dell'if checked, puoi inserire la pagina PHP da caricare. Alla pagina passerai un valore "on" se accendi oppure "off" se spegni. Sarà il server poi che lancia il file pyton

Puoi scegliere di avere 2 pagine oppure gestire il tutto con 1 pagina

**romimmo** · 08-04-2015, 11:07

Penso di aver capito, in rete ho trovato un meccanismo simile ma lo switch è diverso anzi forse non è uno switch. In pratica c'è:
a- file html per la parte grafica
b- file js che fa da ponte tra html-php
c- file php chiamato action.php dove ci sono le informazioni per eseguire il file in python
Non so se posso postare il link.

Discussione: pulsante html e css

Strumenti discussione

Ricerca discussione

Visualizza

pulsante html e css

Permessi di invio