Post Reply
kenotron
Posts: 27
Joined: Sun Jul 01, 2012 5:42 pm

button en html pour gpio

Wed Aug 21, 2013 2:33 pm

Bonjour
CA serait sympa ! pour aider a faire une commande en html ver gpio

exp: flèche avent en pressant : gpio -g mode 7 out
la meme flèche avent en de-pressant : gpio mode 7 in

en html ou java ,

ces pour faire une direction: avent recule arrêt droite gauche pour un 4x4 :

merci cordialement a vous..
User avatar
Yaug
Posts: 126
Joined: Thu Jan 03, 2013 1:52 pm
Location: France, Moselle
Contact: Website

Re: button en html pour gpio

Wed Aug 21, 2013 4:03 pm

bonjour,

en HTML, vous ne pourrez qu'afficher votre bouton,
il vous faudra un vrai langage derrière, que ce soit php ou java pour interagir avec les gpios via le systèm
Organisateur d'aPiro : http://forum.raspfr.org/viewtopic.php?id=6
Domotique DIY : http://ydle.fr
Communauté française : http://forum.raspfr.org/
RaspberryGeek / http://manuel-esteban.com
kenotron
Posts: 27
Joined: Sun Jul 01, 2012 5:42 pm

Re: button en html pour gpio

Wed Aug 21, 2013 10:41 pm

Merci
je prendrai bien des conseille en php !
vous pouver m aides pour une flèche..
Kracus
Posts: 11
Joined: Sat Mar 31, 2012 8:35 am

Re: button en html pour gpio

Wed Aug 21, 2013 10:55 pm

il te faut une librairie php capable d'interfacer avec le GPIO https://github.com/ronanguilloux/php-gpio (jamais utilisé)
donc à l'envoie de ton formulaire tu pourras activer/désactiver tes pin GPIO
si tu veux l'améliorer tu peux passer à l'ajax et utiliser des bouton on/off en css http://tympanus.net/codrops/2012/09/13/ ... fanciness/
kenotron
Posts: 27
Joined: Sun Jul 01, 2012 5:42 pm

Re: button en html pour gpio

Thu Aug 22, 2013 12:56 pm

La formule html , java, ou autre l impotence!
je veut le monter dans le serveur raspberry pi...merci..

/\
/av\
----
||
/| ---- |\
/d|= / \ =|g\
\r|= | stop | =|a/
\| \____/ |/
||
----
\re/
\/
gpio -g mode 9 out (Pour av) quand je j appui
gpio -g mode 9 in (Pour av arrêt) quand je relâché
----------------------------------
gpio -g mode 11 out (Pour re)
gpio -g mode 11 in (Pour re arrêt)
-------------------------------------
gpio reset (arret total)
-----------------------------------
gpio -g mode 8 out (Pour dr)
gpio -g mode 8 in (Pour dr arrêt)
----------------------------------
gpio -g mode 7 out (Pour ga)
gpio -g mode 7 in (Pour ga arrêt)

Car le montage et monter sur des relais.

(N.B mon véhicule 4x4 fonctionnelle il me manque le coter soft..)
ToOnS
Posts: 492
Joined: Sat Mar 23, 2013 10:29 am

Re: button en html pour gpio

Thu Aug 22, 2013 1:10 pm

Salut , il y'a Daniel (danjperron) qui a fait ca avec webiopi de trouch, je retrouve plus le post dont je me souvient mais il y'a aussi celui la : http://www.raspberrypi.org/phpBB3/viewt ... 89#p353089
ou y'a ca : https://github.com/ronanguilloux/php-gpio (comme a dit Kracus)
danjperron
Posts: 3502
Joined: Thu Dec 27, 2012 4:05 am
Location: Québec, Canada

Re: button en html pour gpio

Mon Aug 26, 2013 11:09 am

Salut Kenotron,

regarde ce post http://www.raspberrypi.org/phpBB3/viewt ... 61#p349861

J'ai un code python pour mon véhicule qui utilise les touches clavier.

Sur ce même post , un peut plus bas, tu trouveras du code html pour utiliser des boutons (non les touches). L'avantage des boutons c'est que tu peux utiliser ton portable, laptop ou tablette .


J'utilisais le code python en SSH remote.


Daniel
danjperron
Posts: 3502
Joined: Thu Dec 27, 2012 4:05 am
Location: Québec, Canada

Re: button en html pour gpio

Mon Aug 26, 2013 11:12 am

Il est aussi possible d'intercepter les touches clavier en javascript

Code: Select all

<script type="text/javascript">

var charfield=document.getElementById("char")
charfield.onkeydown=function(e){
var e=window.event || e;
alert(e.keyCode);
}

</script>
</head>

<body id="char">

</body>
</html>
Donc un peut de manipulation et tu devrais être capable d'ajouter les touches sur le code html avec webiopi.

Daniel
kenotron
Posts: 27
Joined: Sun Jul 01, 2012 5:42 pm

Re: button en html pour gpio

Sat Oct 05, 2013 5:19 pm

je voudrait !
gpio mode 11 out <-------sur le rasp serveur
boutton allumer <----------html .


ce qui donne click de sourie ou clavier exp: click html-------serveur rasp gpio allumee diode !

car le rasp fonctionne direct console ssh putty mes pas en html firefox...

jai fait tous les test rien fonctionne...
ToOnS
Posts: 492
Joined: Sat Mar 23, 2013 10:29 am

Re: button en html pour gpio

Sat Oct 05, 2013 6:11 pm

Je voudrait !
une ferrarie jone
accelerateur ====> 350 km/h
feu rouge ====> ca passe au vers
mes sa marche pa ....
kenotron
Posts: 27
Joined: Sun Jul 01, 2012 5:42 pm

Re: button en html pour gpio

Sun Oct 06, 2013 11:29 am

Ta fumer due bon!!
danjperron
Posts: 3502
Joined: Thu Dec 27, 2012 4:05 am
Location: Québec, Canada

Re: button en html pour gpio

Sun Oct 06, 2013 12:47 pm

Salut Kenotron,

Ok allons par étape.

1- GPIO 11 , pin 23 du gpio, est utilisée avec le SPI donc il faut vérifier que le SPI n'est pas en fonction. (black-list)

Code: Select all

pi@raspberrypi /etc $ sudo cat /etc/modprobe.d/raspi-blacklist.conf 
# blacklist spi and i2c by default (many users don't need them)

blacklist spi-bcm2708
blacklist i2c-bcm2708
N.B. Si il n'était pas en "black-list", il faudra redémarrer le RPI.



2- Créons des scripts python pour vérifier que le GPIO11 fonctionne.

Code: Select all

pi@raspberrypi ~ $ cat ON.py
#!/usr/bin/python
import RPi.GPIO as GPIO
LED = 23
GPIO.setwarnings(False)
GPIO.setmode(GPIO.BOARD)
GPIO.setup(LED , GPIO.OUT)
GPIO.output(LED, True)

Code: Select all

pi@raspberrypi ~ $ cat OFF.py
#!/usr/bin/python
import RPi.GPIO as GPIO
LED = 23
GPIO.setwarnings(False)
GPIO.setmode(GPIO.BOARD)
GPIO.setup(LED , GPIO.OUT)
GPIO.output(LED, False)

Code: Select all

 sudo chmod +x ON.py
sudo chmod +x OFF.py
Maintenant exécuter ./ON.py ou ./OFF.py devrait actionner GPIO11 ON ou OFF.

3 - Installons webiopi

Code: Select all

wget http://webiopi.googlecode.com/files/WebIOPi-0.6.0.tar.gz
tar xvzf WebIOPi-0.6.0.tar.gz
cd WebIOPi-0.6.0
sudo ./setup.sh

3- Démarrons webiopi

Code: Select all

sudo /etc/init.d/webiopi start


4- Trouvons l'IP de notre Raspberry Pi.

Code: Select all

sudo ifconfig
5 - À partir de firefox, nous allons ouvrir la page web suivante http://RasberryPi_IP:8000/app/gpio-header

Remplaçons "RaspberryPi_IP" par l'IP de notre Raspberry PI.

Maintenant nous pouvons changer n'importe quelle GPIO.


OK. à partir de la . Nous allons modifier le startup de webiopi pour ajouter notre fichier python contenant nos macros.

6- Dans le fichier /etc/init.d/webiopi modifions deux lignes.

Code: Select all

#HOME=/usr/share/webiopi/htdocs
#DAEMON_ARGS="-m webiopi -l $LOG_FILE -c $CONFIG_FILE"
DAEMON_ARGS="/usr/share/webiopi/htdocs/onoff.py"
HOME Indique le root de la page web. (Il n'a pas été modifié mais je vous le montre).
DAEMON_ARGS pointe sur le fichier python avec mes macros.

7- Ajoutons notre code python

Code: Select all

pi@raspberrypi ~ $ sudo nano /usr/share/webiopi/htdocs/onoff.py

Code: Select all

#!/usr/bin/env python
from time import sleep
import webiopi
import RPi.GPIO as GPIO

GPIO.setwarnings(False)
GPIO.setmode(GPIO.BOARD)

GPIO11= 23
GPIO.setup(GPIO11, GPIO.OUT)

def TurnON():
   GPIO.output(GPIO11,True)

def TurnOFF():
   GPIO.output(GPIO11,False)

server = webiopi.Server(port=8000, login="webiopi", password="framboise")

server.addMacro(TurnON)
server.addMacro(TurnOFF)

webiopi.runLoop()
server.stop()

Code: Select all

 sudo chmod +x /usr/share/webiopi/htdocs/onoff.py
8- Créons la page web

Code: Select all

pi@raspberrypi ~ $ sudo nano /usr/share/webiopi/htdocs/onoff.html

Code: Select all

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ON_OFF sur le GPIO 11</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">

function init() {
}

function TurnON() {
      webiopi().callMacro("TurnON");
}

function TurnOFF() {
      webiopi().callMacro("TurnOFF");
}


webiopi().ready(init);

</script>
</head>
<body>
<button type="button" onclick="TurnON()">ON</button>
<button type="button" onclick="TurnOFF()">OFF</button>
</body>
</html>
9- Redémarrons webiopi

Code: Select all

 sudo /etc/init.d/webiopi restart
10- Ouvrons firefox sur la page "RaspberryPI:8000/onoff.html"


Et voila

Daniel
kenotron
Posts: 27
Joined: Sun Jul 01, 2012 5:42 pm

Re: button en html pour gpio

Mon Oct 07, 2013 12:28 pm

Grand merci.
le on.py ,off.py fonctionne a l envers jai changer le true et le false. la ca fonctionne,
mes le onoff.html il fonctionne pas ! car les bouton reste gris (non actif) ,
avec cette exemple ca ma donner un super coup pouce pour mon projet .
danjperron
Posts: 3502
Joined: Thu Dec 27, 2012 4:05 am
Location: Québec, Canada

Re: button en html pour gpio

Mon Oct 07, 2013 12:57 pm

Salut kenotron,

tout dépend comment tu actives la sortie . Si c'est par la masse , oui c'est inversée.

En ce qui concerne la page onoff.html, je n'ai aucune idée. Est-elle root owner?

Daniel
danjperron
Posts: 3502
Joined: Thu Dec 27, 2012 4:05 am
Location: Québec, Canada

Re: button en html pour gpio

Mon Oct 07, 2013 2:53 pm

Salut Kenotron,

pour l'aspect des boutons, ils sont gérés par le fichier webiopi.css donc il est possible que leurs apparences ne soient pas normalle. Renomme le fichier webiopi.css par autre chose et redémarre webiopi, les boutons auront l'apparence normale.

Daniel
kenotron
Posts: 27
Joined: Sun Jul 01, 2012 5:42 pm

Re: button en html pour gpio

Mon Oct 07, 2013 3:52 pm

la onoff.html fonctionne maintenant ! mait les touche reste gris ?
soi que je trouve metre de la couleur ou voir les touche agir ,
(comme je pousse gpio 11 on et quand je relache gpio 11 off ou gpio reset !)

comme ca je peut faire toute mes direction de 4.4

merci..
danjperron
Posts: 3502
Joined: Thu Dec 27, 2012 4:05 am
Location: Québec, Canada

Re: button en html pour gpio

Mon Oct 07, 2013 4:18 pm

oui les boutons reste gris. C'est la fonction normale.

Si tu veux de la couleur pour te dire l'état, il va falloir coder en javascript.

Donc une bonne séance d'apprentissage.

bonne chance,

Daniel
danjperron
Posts: 3502
Joined: Thu Dec 27, 2012 4:05 am
Location: Québec, Canada

Re: button en html pour gpio

Tue Oct 08, 2013 2:25 am

Voici un exemple pour passer plus d'un paramètre avec ces fonctions plus universelles.

le code python

Code: Select all

#!/usr/bin/env python
from time import sleep
import webiopi
import RPi.GPIO as GPIO

    
# Enable debug output
webiopi.setDebug()


GPIO.setwarnings(False)
GPIO.setmode(GPIO.BOARD)


def ModeIO( Pin , Mode):
  # only 2 possibilities
  if Mode in ["OUT"]:
    GPIO.setup(int(Pin), GPIO.OUT)
  if Mode in ["IN"]:
    GPIO.setup(int(Pin), GPIO.IN)

def SetIO( Pin, Value):
   #only 4  possibilities
   if Value in ["true","false","0","1"]:
     GPIO.output(int(Pin), Value in ["true","1"])

server = webiopi.Server(port=8000, login="webiopi", password="framboise")

server.addMacro(ModeIO)
server.addMacro(SetIO)

webiopi.runLoop()
server.stop()
et la page web

Code: Select all

html>
<head>
<title>ON_OFF sur le GPIO 11</title>

</style>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">

// declaration des Pins
var GPIO11=23;

// declaration des modes In/Out
var OUT = "OUT";
var IN = "IN";

// Les fonctions 

function init()
{
 // init sortie
  ModeIO(GPIO11,OUT);
}

function ModeIO(Pin, Mode){
     webiopi().callMacro("ModeIO",[Pin,Mode]);
}

function SetIO(Pin,Value) {
      webiopi().callMacro("SetIO",[Pin,Value]);
}

webiopi().ready(init);

</script>
</head>
<body>
<button type="button" onclick="SetIO(GPIO11,true)">ON</button>
<button type="button" onclick="SetIO(GPIO11,false)">OFF</button>
</body>
</html>
Utilises les "brackets" pour passer plus d'un paramètre. Les paramètres sont passés en texte.
True ou False en javascript n'existe pas , c'est true ou false. Si tu utilises True , il retournera 0 puisqu'il pense que c'est une variable.

IN et OUT sont des variables que j'ai initialiser en chaine de texte et le code python l'interprète.

Le mode entrée/sortie est initialisé dans la fonction init() de la page web au lieu du fichier python.

Daniel
kenotron
Posts: 27
Joined: Sun Jul 01, 2012 5:42 pm

Re: button en html pour gpio

Sun Dec 15, 2013 9:01 pm

re-salut

il reste gris car il y na pas d activer sur les bouton onoff.html

ci je utiliser en mode manuel= exp: sudo python onoff.py ca fonctionne !

je tourne on rond plus je cherche plus doit pas être imposible a executer en mode html...
danjperron
Posts: 3502
Joined: Thu Dec 27, 2012 4:05 am
Location: Québec, Canada

Re: button en html pour gpio

Sun Dec 15, 2013 9:55 pm

Salut Kenotron,

Code: Select all

il reste gris car il y na pas d activer sur les bouton onoff.html
Peux-tu être plus descriptif . J'ai de la misère à comprendre le sens de la phrase.

Les boutons ne changent pas de couleur. Si tu as utilisé mon code.

Daniel
kenotron
Posts: 27
Joined: Sun Jul 01, 2012 5:42 pm

Re: button en html pour gpio

Sun Dec 15, 2013 10:33 pm

ce que je veut dire dans le onoff.html <---- il y a pas exécutable gpio .


sudo python on.py <---- fonctionne dans ssh manuel

mait la ligue de comande en html ?

car en html quand on clic sur (on) rien ce passe ,il reste gris...

merci..
danjperron
Posts: 3502
Joined: Thu Dec 27, 2012 4:05 am
Location: Québec, Canada

Re: button en html pour gpio

Mon Dec 16, 2013 3:02 am

Salut Kenotron,

J'ai vérifié mon code . J'ai même refait une carte SD pour être sur. Tout est ok.

Tu peux démarrer webiopi directement.

ex: sur un de mes derniers Post, j'ai le code python avec le fichier web.

Nomme le code python test.py et la page web test.html.
Enregistre les deux fichiers sur /home/pi et exécute l'application

Code: Select all

sudo ./test.py


Soit certain que le service webiopi ne fonctionne pas avant de lâcher l'application

Code: Select all

sudo service webiopi stop
Voici un vidéo ( Un image vaut mille mots alors un vidéo vaut ....)
https://dl.dropboxusercontent.com/u/488 ... gpio11.mp4

P.S. Le vidéo sur l'écran enregistré est pris de la caméra web de mon petit robot avec un Rpi. et le robot roule webiopi et mjpeg_streamer pour la webcam.

Daniel
kenotron
Posts: 27
Joined: Sun Jul 01, 2012 5:42 pm

Re: button en html pour gpio

Mon Dec 16, 2013 2:07 pm

Merci, la ces ok dans le ssh

2013-12-16 13:57:42 - HTTP - DEBUG - "POST /macros/SetIO/23,true HTTP/1.1" 200
2013-12-16 13:58:07 - HTTP - DEBUG - "POST /macros/SetIO/23,false HTTP/1.1" 200

La jais toujours pas de sortie de led allumer !

peut être, il a quelle-que chose a faire dans le test.py.
kenotron
Posts: 27
Joined: Sun Jul 01, 2012 5:42 pm

Re: button en html pour gpio

Mon Dec 16, 2013 2:23 pm

Encore moi

la ces rock & roll

dans le html pas le pin 23 mai bien 26 je croie que les numéro par rapport ver board rasp...

je suis trep content ta fait un super boulot gros merci la il me resque les autre 3 led pour mes direction

(N.B) Dernier petit truc j aimerait que tous les led se ferme :genre STOP.
danjperron
Posts: 3502
Joined: Thu Dec 27, 2012 4:05 am
Location: Québec, Canada

Re: button en html pour gpio

Mon Dec 16, 2013 5:47 pm

Salut Kenotron,

Tu as deux méthodes.

1- Tu peux ajouter une fonction dans le code python pour tout arrêter.
2- Ou ajouter le code dans le fichier web en javascript. Puisque les fonctions "ModeIO" et "SetIO" s'appliquent pour tout les GPIOs alors voici le nouveau fichier html.

Regarde la nouvelle fonction Javascript "StopAll()"

J'ai changé le CSS du dernier bouton pour lui donner un look normal.

Code: Select all

pi@raspberrypi ~ $ cat test.html
    <html>
    <head>
    <title>ON_OFF sur le GPIO 11</title>

    <style type="text/css">
        .btn{width: auto; height: auto; padding: 0;font:normal 14px/20px helvetica,arial,sans-serif;
                color: #000000;border: #d0d0d0;border-style: outset;border-width: 3px;}
    </style>

    <script type="text/javascript" src="/webiopi.js"></script>
    <script type="text/javascript">

    // declaration des Pins
    var GPIO11=23;
    var GPIO23=16;
    var GPIO24=18;
    // declaration des modes In/Out
    var OUT = "OUT";
    var IN = "IN";

    // Les fonctions

    function init()
    {
     // init sortie
      ModeIO(GPIO11,OUT);
      ModeIO(GPIO23,OUT);
      ModeIO(GPIO24,OUT);
    }

    function ModeIO(Pin, Mode){
         webiopi().callMacro("ModeIO",[Pin,Mode]);
    }

    function SetIO(Pin,Value) {
          webiopi().callMacro("SetIO",[Pin,Value]);
    }

    function StopAll() {
          webiopi().callMacro("SetIO",[GPIO11,false]);
          webiopi().callMacro("SetIO",[GPIO23,false]);
          webiopi().callMacro("SetIO",[GPIO24,false]);
     }

    webiopi().ready(init);

    </script>
    </head>
    <body>
    GPIO11&nbsp;&nbsp;<button type="button" onclick="SetIO(GPIO11,true)">ON</button>
    <button type="button" onclick="SetIO(GPIO11,false)">OFF</button><br>
    GPIO23&nbsp;&nbsp;<button type="button" onclick="SetIO(GPIO23,true)">ON</button>
    <button type="button" onclick="SetIO(GPIO23,false)">OFF</button><br>
    GPIO24&nbsp;&nbsp;<button type="button" onclick="SetIO(GPIO24,true)">ON</button>
    <button type="button" onclick="SetIO(GPIO24,false)">OFF</button><br>
    <button class="btn" type="button" onclick="StopAll()"> STOP ALL </button>
    </body>
    </html>
Deux choses a tenir compte. Initialisation et spécification des GPIOs. Initialiser les GPIOs en entrée ou sortie et définir la bonne broche de sortie.

P.S. Dans le javascript, je définie les GPIOs en BCM mode mais en réalité la valeur est en BOARD mode. donc GPIO11 est la pin 23.

Si pour toi GPIO11 est 26 , change la définition pour
GPIO11=26
dans le fichier html

Daniel
Post Reply

Return to “Français”