Projet #2 : Slideshow avec effet Time Lapse

SlideShow effet Timelapse picamera - Creativpi.fr

Pour ce deuxième Projet, je vous propose un Slideshow avec effet Time Lapse et une Pi Camera.
J’en profite, pour expliquer un peu plus ces projets. L’idée est toute simple, c’est de partir d’un morceau de code tout simple pour l’enrichir afin que celui-ci devient plus complexe.

Slideshow avec effet Time Lapse, on fait ça comment ?

Branchez votre PiCamera si ce n’est pas déjà fait et en même temps activez-la dans le menu config, plus d’info avec l’Astuce #3. On va se rendre dans le dossier /var/www/ pour afficher notre Slideshow dans notre navigateur. Il existe 2 versions de la page web pour l’afficher soit en php ou en html. Pour le HTML, on le sait, on peut exécuter la page un peu ou on veut sur notre Raspberry Pi !

Code Python

On commence avec le code python pour faire nos photos et définir le timing entre 2 prises de vues.

Nous allons créer une image par seconde avec la Pi Camera en utilisant ce code Python.

On lance notre script : sudo python picount.py

Nous avons nos photos pour notre Slideshow, nous allons à présent les afficher dans une page web. Comme je le disais plus haut, on a 2 choix soit avec une page static en HTML ou en dynamique avec le PHP. La seul différence, dans la version PHP, on liste le dossier où se trouve les images pour l’afficher dans le slideshow. Cela évite en fin de compte d’ajouter une balise pour chaque photos.

CSS
Pour le CSS on l’ajoute dans la balise style dans le HEAD.

HTML
Coté HTML, on ajoute notre div avec une class="timelapse". Chaque images que vous désirez afficher dans le slideshow, vous devez ajouter la balise prise en sandwich entre 2 LI.

JS
Pour le JS, rien de plus simple, on ajoute l’adresse du CDN de jQuery.

$(".timelapse ul").animate({opacity:0.99},100,function(){
Vous pouvez modifier la temps de l’animation en changeant le 100.

}, 1);
On peut encore donner plus de vitesse à notre animation mais déjà 1 est assez rapide.

PHP

Encore un peu de patience, juste une dernière commande à faire dans notre terminal :
 
sudo cp -R /var/www/SlideShow---Effect-Timelapse/*.jpg img/
 
On copie les photos dans un dossier img pour avoir un projet bien structuré.

Rendez-vous dans votre navigateur à cette adresse : http://raspberrypi.local/SlideShow—Effect-Timelapse/timelapse.php et votre SlideShow avec un effet Timelapse est prêt ! Attention tout de même le Slideshow peut tout de même être un peu trop rapide.
slideshow avec un effet Timelapse - Creativpi.fr
Je vais refaire la screenshot

Conclusion

Ce n’est pas le projet de l’année ! Mais ça peut vous donner des idées pour utiliser la Pi Camera et une page web autrement. La prochaine étape de ce projet, c’est une version entièrement en Javascript avec son package PiCamera. J’attends vos retour !

A propos de l'auteur

Intégrateur Web de métier et accro au Raspberry Pi !

Partagez sur les réseaux sociaux

Laisser un commentaire

2 réponses pour l'article “Projet #2 : Slideshow avec effet Time Lapse

  1. j’apprécie votre video et je vous encourages a en faire plus surtout sur la camera pi par exemple une voiture et sa camera qui parcour la maison pour trouver son chat qui a peur du robot voiture et qui ce caches voila sympa continuer merci

Scroll Up