まこと の ブログ

MaKoTo no burogu — Journal de bord…

Aller au contenu | Aller au menu | Aller à la recherche

Rpi-pi_EYE -Fin-

Suite de l'épisode précédent :
demopieye.jpg

  • Me revoici donc avec la finalisation de ce projet !

Faute de compétences suffisantes en python-html-css, je me suis vite retrouvé limité dans la compréhension de webpy pour pouvoir afficher une interface comme je voulais…
Je commençais à partir dans tous les sens, sans rien produire, avec une grosse sensation de perte de temps, un projet devenu un point noir qu'on a plus envie de voir.
Et pourtant je voulais le terminer, il était donc temps de redéfinir mes ambitions, que je sache clairement ce que je voulais faire afin de trouver la bonne méthode.
Abandon de l'idée de boutons d'incrémentation de la position de l'œil, exit donc les boutons de formulaire à côté de l'image de la picamera, ils sont une gêne pour la navigation quand on zoome avec un ordiphone, exit donc aussi le css responsive design, et puis tiens si en plus on pouvait se passer d'image à cliquer tout aussi problématique que les boutons…

  • Table en marbre, abandon de webpy, ce que je veux c'est :

- Afficher l'image de la vidéo.
- Cliquer dans l'image de la vidéo pour bouger la camera, sans que la page soit rechargée.
- Cliquer dans l'image de la vidéo pour allumer une lumière, sans que la page soit rechargée.
- Pouvoir zoomer à volonté dans le navigateur sans que ce soit un problème pour les fonctions précédentes.


Prérequis :

  1. Avoir un serveur web installé sur le Raspberry Pi.
  2. Avoir un stream vidéo MJPG-Streamer de la picamera fonctionnel.
  3. Avoir configuré son routeur pour sortir en publique le stream vidéo et le site web.
  4. Désactiver la saisie du mot de passe sudo à l'appel d'une commande python, pour l'utilisateur www-data :
sudo visudo

Ajouter cette ligne à la fin du fichier :

www-data ALL = NOPASSWD: /usr/bin/python



  • Le site web est disponible en pièce jointe à ce billet, je vais décrire ici son fonctionnement :

Plusieurs scripts en python :

  • Dans chaque scripts, ce qu'il faut pour faire bouger l'œil dans une seule position.

On continue d'utiliser la librairie RPIO décrite dans les billets précédents.
Ici le script centre.py :

#!usr/bin/env/ python

import RPIO, time
from RPIO import PWM
servo = PWM.Servo()

servo.set_servo(17, 2300)
servo.set_servo(18, 1350)
time.sleep(0.5)
PWM.cleanup()


Plusieurs scripts en php :

  • Chaque script contient une commande système permettant d'appeler le scritp python.

Ici le script centre.php :

<?php
system ("sudo python python/centre.py");
?>


  • Le script pour allumer la lumière est un peu différent, il appelle directement des commandes système liées à l'utilisation classique du logiciel wiringpi.
<?php
// allume la led connectée en 2
system ( "gpio mode 2 out" );
system ( "gpio write 2 1" );
sleep(10); // attend 10 secondes
system ( "gpio write 2 0" ); // éteint la led connectée en 2
?>


Un script en JavaScript :

  • Le script va permettre de gérer des actions sur des cliques de souris, sans recharger la page web !

Ici un morceau du script qui permet d'appeler le script centre.php.

function centre()
{
var requestC = new XMLHttpRequest();
requestC.open( "GET" , "centre.php" );
requestC.send(null);
}

J'ai laissé le JavaScript dans la page html…

La page html du site :

  • L'index.html va donc contenir le code JavaScript, l'image de la vidéo de la picamera et des zones cliquables définies par des coordonnées sur cette image.

Je rappelle que pour streamer la vidéo de la picamera, j'utilise MJPG-Streamer version spéciale Pi, le tuto par ici : Le Stream sur IP live avec MJPG-Streamer raspicam.

<!DOCTYPE html>
<html>
	<head>
        	<meta charset="utf-8" />
	        <title>Amy-Channel =^.^=</title>
	</head>

<script type="text/javascript">
function gauche()
{
var requestG = new XMLHttpRequest();
requestG.open( "GET" , "gauche.php" );
requestG.send();
}

function gauche2()
{
var requestG2 = new XMLHttpRequest();
requestG2.open( "GET" , "gauche2.php" );
requestG2.send();
}

function centre()
{
var requestC = new XMLHttpRequest();
requestC.open( "GET" , "centre.php" );
requestC.send(null);
}

function centre2()
{
var requestC2 = new XMLHttpRequest();
requestC2.open( "GET" , "centre2.php" );
requestC2.send(null);
}

function droite()
{
var requestD = new XMLHttpRequest();
requestD.open( "GET" , "droite.php" );
requestD.send(null);
}

function droite2()
{
var requestD2 = new XMLHttpRequest();
requestD2.open( "GET" , "droite2.php" );
requestD2.send(null);
}

function leds()
{
var requestL = new XMLHttpRequest();
requestL.open( "GET" , "leds.php" );
requestL.send(null);
}

</script>

	<body>
        	<center>
<!--  l'image de la picamera --> 
			<img src="http://adresse ip du stream:port/?action=stream" usemap="#panneaux" />
<!--  les zones cliquables, qui appellent chacune le java script correspondant (qui appelle le script php (qui appelle le script python) )  --> 
			<map name="panneaux">
				<area shape="rect" coords="0,0,150,150" onclick="gauche2()" alt="Haut-Gauche"  />
				<area shape="rect" coords="490,0,640,150" onclick="droite2()" alt="Haut-Droite"  />
				<area shape="rect" coords="246,0,395,150" onclick="centre2()" alt="Haut-Centre"  />
				<area shape="rect" coords="0,325,150,480" onclick="gauche()" alt="Bas-Gauche"  />
				<area shape="rect" coords="490,330,640,480" onclick="droite()" alt="Bas-Droite"  />
				<area shape="rect" coords="246,330,395,480" onclick="centre()" alt="Bas-Centre"  />
				<area shape="circle" coords="320,240,50" onclick="leds()" alt="LEDon" />
			</map>
	        </center>
    	</body>
</html>
  • Voici la démo vidéo :


Concernant la barre de lumière :

  • Il s'agit de 6 leds de 13000 mcd (3,2V@20mA) connectées en parallèles, alimentées directement par le 5V du Rpi et pilotées par le GPIO2 (pin19) via par un transistor 'Mosfet'' (BS170), câblé comme suis :

- Le drain est connecté aux cathodes des leds.
- La Grille va à la pin19 du Rpi.
- La Source va à la masse.

  • Voici le schéma mis à jour et des photos du proto soudé sur une plaque à trous :

Rpi_Pi_Eye2_bb.png
dsc00979.jpg dsc00978.jpg

À suivre…

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant une syntaxe wiki simplifiée.

Fil des commentaires de ce billet