====== Comment créer une affiche interactive ? ======
* Porteur(s) du projet : Damien MUTI (Prof. de Numérique)
* Date : 15/03/2018
* Licence : libre !
* Contexte : projets Mars en Baroque et Frac (2017/2018)
* Fichiers :
* {{:wiki:tutoriels:comment-creer-une-affiche-interactive:comment_fabriquer_une_affiche_interactive.pdf|}}
* {{:wiki:tutoriels:comment-creer-une-affiche-interactive:comment_fabriquer_une_affiche_interactive.pptx|}}
* Nouvelle version Processing (2020-...) : {{ :wiki:tutoriels:affiche-interactive:affiche_interactive_1.zip |}}
* Intégration d'un programme quelconque comme animation du programme des affiches interactives (ici Pong multiballes): [[https://drive.google.com/file/d/1WC1Kv12jixm5gR7eoX4upJ0NepZkFdjX/view?usp=sharing|Affiche_interactive_2_0]]
* Ancienne version (2017-2020, incluant la version Raspbery) : {{:wiki:tutoriels:comment-creer-une-affiche-interactive:exemple_programme.zip|}}
* Lien :
* [[wiki:tutoriels:affiche-tactile-cuivre:affiche-tactile-cuivre|AFFICHE TACTILE CUIVRE]]
* [[wiki:tutoriels:raspberry:raspberry]]
===== Description =====
Ce tutoriel vous permets de concevoir de A à Z une affiche interactive du câblage à la programmation des interactions sous Processing en utilisant un PC ou un Mac.
Une version des programmes pour Raspbery est aussi proposée.
===== Matériel =====
Makey-Makey :[[ https://makeymakey.com/]]
Scotch de cuivre adhésif : [[https://www.gotronic.fr/art-cuivre-adhesif-cu155ad-20730.htm]]
Ordinateur + Processing : [[https://www.processing.org/]]
ou
Raspbery : [[http://www.raspberrypi-france.fr/]]
===== Tutoriel =====
==== Le pdf du tutoriel est le suivant : ====
* {{:wiki:tutoriels:comment-creer-une-affiche-interactive:comment_fabriquer_une_affiche_interactive.pdf|}}
* {{:wiki:tutoriels:comment-creer-une-affiche-interactive:comment_fabriquer_une_affiche_interactive.pptx|}}
vous pouvez télécharger tous les programmes Processing sur les liens suivant :
* version 2020 : {{ :wiki:tutoriels:affiche-interactive:affiche_interactive_1.zip |}}
* version 2018-2020 : {{:wiki:tutoriels:comment-creer-une-affiche-interactive:exemple_programme.zip|}}
==== Procédure d'installation ====
ATTENTION, pour faire fonctionner le programme, il convient de suivre la procédure suivante:
- Décompresser le dossier que vous avez téléchargé sur le lien suivant : {{:wiki:tutoriels:comment-creer-une-affiche-interactive:exemple_programme.zip|}}.
- Placer le **dossier "Affiche_interactive"** dans votre dossier de travail.
- Afficher le programme "**Affiche_interactive.pde**" dans l'interface de développement de Processing:
- Si elle ne sont pas déjà installée sur votre machine, **télécharger et installer les librairies suivantes: Video et Sound**. Pour cela aller dans //Sketch > Importer une librairie > Ajouter une librairie//. La fenêtre suivant s'ouvre : {{ :wiki:tutoriels:affiche-interactive:capture_du_2018-11-07_16-12-07.png |}}
- Taper "Video" dans le champ "Filter" (voir image ci-dessus), puis sélectionner la librairie "Video" à installer (normalement l'avant dernière de la liste), et enfin cliquer sur "Install": {{ :wiki:tutoriels:affiche-interactive:capture_du_2018-11-07_16-19-11.png |}}
- Faire de même pour l'installation de la librairie "Sound" : {{ :wiki:tutoriels:affiche-interactive:capture_du_2018-11-07_16-28-14.png |}}
- Le programme "Affiche_interactive.pde" est désormais prêt à fonctionner correctement.
==== Exécution du programme ====
- Lorsque le programme "Affiche_interactive.pde" est affiché dans l'interface de développement de Processing, appuyer sur la flèche (bouton "play"): une fenêtre noire apparaît.
- Avec la sourie, cliquer sur cette fenêtre pour la rendre active.
- Le programme est conçu pour lancer une vidéo ou un son lorsqu'on appuie sur les touches "UP", "DOWN", "LEFT", "RIGHT" du clavier.
==== Modification du programme pour votre projet ====
Le programme est le suivant :
/** Affiche tactile interactive -
* Quand on appuie sur une touche, cela lance une image, une vidéo, une annim, un son, etc...
*/
/// librairies
import processing.sound.*;
import processing.video.*;
// variables globales
PImage im; // une image
SoundFile son; // un son
Movie vid; // une vidéo
// bouton son image active ?
boolean image_active = false;
// bouton son actif ?
boolean son_actif = false;
float tempsDebutSon = 0; // temps du début de la musique a été joué
// bouton video active ?
boolean video_active = false;
void setup() {
size(500, 500);
noStroke();
background(0);
// initialisation des variables globales
im = loadImage("images/chien.jpg");
// chargement du son
son = new SoundFile(this, "sons/beat.aiff");
//println(son.duration());
// chargement de la video
vid = new Movie(this, "videos/affiche.mp4");
}
void draw() {
// gestion du son ////////////////////////////////////////
// test du temps pendant lequel le son est joué
//debug
println("son_actif = "+ son_actif);
// fin debug
if (son_actif){
float tempsEcoute = millis() - tempsDebutSon ;
// debug
println("tempsDebutSon = " + tempsDebutSon);
println("tempsEcoute = " + tempsEcoute);
println("durée du son " + son.duration());
// fin debug
if ( tempsEcoute >= son.duration()*1000){ // si le son est fini
son_actif = false; // bouton son_actif off
}
}
// gestion de la vidéo ////////////////////////////////////////
if (video_active){
image(vid, 0, 0, width, height);
}
else{
background(0); // fond noir
}
// gestion de l'image
if (image_active){
float x = 30 + random(-20,20); // random sur la position
float y = 30 + random(-20,20);
image(im,x,y,200,200);
}
}
void keyPressed() {
if (key == CODED) {
if (keyCode == RIGHT) { // son
if (son_actif==false){ // le son ne joue pas
// arrêter l'autre son qui tourne éventuellement
son.stop();
// chargement du son 1
son = new SoundFile(this, "sons/beat.aiff");
son.play();
tempsDebutSon = millis();
son_actif = true; // bouton son_actif on
}
else { // le son joue
son.stop();
son_actif = false;
}
}
if (keyCode == LEFT) { // son 2
if (son_actif==false){ // le son ne joue pas
// arrêter l'autre son qui tourne éventuellement
son.stop();
// chargement du son 1
son = new SoundFile(this, "sons/Armstrong.wav");
son.play();
tempsDebutSon = millis();
son_actif = true; // bouton son_actif on
}
else { // le son joue
son.stop();
son_actif = false;
}
}
if (keyCode == UP) { // video 1
if (video_active == false){ // la vidéo 1 ne tourne pas
// chargement de la video 1
vid = new Movie(this, "videos/affiche.mp4");
vid.loop();
video_active = true;
}
else{
vid.stop();
clear();
video_active = false;
}
}
if (keyCode == DOWN) { // video 2
if (video_active == false){ // la vidéo 2 ne tourne pas
// chargement de la video 2
//vid = new Movie(this, "videos/transit.mov");
vid = new Movie(this, "videos/ArmstrongAlunissage.mp4");
vid.loop();
video_active = true;
}
else{
vid.stop();
clear();
video_active = false;
}
}
}
if (key == ' ') { // image
image_active = !image_active;
}
}
void movieEvent(Movie movie) {
vid.read();
}
Il est possible de rajouter des touches qui lancent des vidéos ou des sons dans la fonction //keyPressed()//. pour cela voir la documentation sur:
* La méthode //keyPressed()// : [[https://www.processing.org/reference/keyPressed_.html]].
* L'argument //key// : [[https://www.processing.org/reference/key.html]].
* Ainsi que l'argument //keyCode// : [[https://www.processing.org/reference/keyCode.html]]
Il est aussi possible d'introduire une animation dans le code du programme qui serait lancée lorsqu'on appuie sur une touche.
Un exemple est proposé par des étudiants de BTS DG2 en 2017-2018, Mai Quynh Nguyen, Emma BAYLION et Anaïs Aubert pour le projet FRAC 2018:
{{:wiki:tutoriels:comment-creer-une-affiche-interactive:emma_mai_ana_s_frac_glmovie_2.rar|}}.
Un autre exemple est proposé par des étudiants de BTS DG2 en 2017-2018, Mai Quynh Nguyen, Emma BAYLION et Anaïs Aubert pour le projet Mars en Baroque 2018:
{{:wiki:tutoriels:affiche-interactive:affiche_interactive_mb18_mai.zip|}}
}
==== Photos ====
{{ :wiki:tutoriels:comment-creer-une-affiche-interactive:img_2286.jpg?200 |}}
{{ :wiki:tutoriels:comment-creer-une-affiche-interactive:img_20180110_112939.jpg?200 |}}
{{ :wiki:tutoriels:comment-creer-une-affiche-interactive:img_20180110_121454.jpg?200 |}}
{{ :wiki:tutoriels:comment-creer-une-affiche-interactive:programme_processing.jpg?200 |}}
===== Précaution d'installation de l'affiche et médiation ====
Lors du câblage de l'affiche, il est important de bien choisir le coin dans lequel vont sortir les connexion des boutons.
{{ :wiki:tutoriels:affiche-interactive:sortie_connexions_1.jpg?400 |}}
Sur l'image précédente, les connexions sont sur le coin inférieur gauche de l'affiche (ici, sur le coin inférieur droit lorsque l'affiche est retournée).
En effet, il convient de prévoir la position de l'affiche par rapport à l'ordinateur sur lequel est connecté le Makey-Makey, afin que les câbles de connexion entre le Makey-Makey et l'affiche ainsi que le câble de connexion USB entre le Makey-Makey et l'ordinateur ne soient pas trop courts, ne passe pas au milieu de l'affiche, ou ne soient pas esthétiquement dérangeants.
Dans le cadre d'un projet conduit avec la bibliothèque de l'Alcazar en décembre 2018, avec Mme Cleyet-Merle et M Muti Desgrouas, une borne en bois contenant un ordinateur et des haut-parleurs a été placé à gauche de l'affiche. La connexion a donc été effectuée dans le coin inférieur gauche de l'affiche.
{{ :wiki:tutoriels:affiche-interactive:photo_alcazar_1.jpg?400 |}}
Quelques photos du projet :
Câblage de l'affiche:
{{ :wiki:tutoriels:affiche-interactive:capture_du_2019-01-27_11-21-58.png?400 |}}
Positionnement de l'affiche par rapport au meuble contenant l'ordinateur et par rapport à l'image projetée par le vidéo-projecteur:
{{ :wiki:tutoriels:affiche-interactive:img_1773.jpeg?400 |}}
Connexion de l'affiche avec le Makey-Makey:
{{ :wiki:tutoriels:affiche-interactive:capture_du_2019-01-27_11-22-34.png?400 |}}
Positionnement final de l'affiche:
{{ :wiki:tutoriels:affiche-interactive:img_1777.jpeg?400 |}}
Le programme associé à cette affiche est donnée dans la partie "Exemples de programmes" ci-dessous. Il prend en compte la taille de la vidéo par rapport à la taille de la fenêtre d'affichage.
===== Exemples de programme =====
==== FRAC 2018 ====
Voici un exemple de programme réalisé par Mai Quynh Nguyen, Emma BAYLION et Anaïs Aubert pour le projet FRAC 2018, en BTS DG2:
* {{:wiki:tutoriels:comment-creer-une-affiche-interactive:emma_mai_ana_s_frac_glmovie_2.rar|}}
Un autre exemple est proposé par des étudiants de BTS DG2 en 2017-2018, Mai Quynh Nguyen, Emma BAYLION et Anaïs Aubert pour le projet Mars en Baroque 2018:
* {{:wiki:tutoriels:affiche-interactive:affiche_interactive_mb18_mai.zip|}}
==== Mars en Baroque 2018 ====
Voici l'ensemble des programmes développés par Sevan Papazian, alors étudiant de BTS DG2 en 2017-2018, sur les projets Frac 2018 et Mars en Baroque 2018:
* {{:wiki:tutoriels:affiche-interactive:mars_en_baroqe_.zip|}}
* {{:wiki:tutoriels:affiche-interactive:affiche_interactive_sevan_1.zip|}}
==== Alcazar - décembre 2018 ====
Dans le cadre d'un projet conduit avec la bibliothèque de l'Alcazar en décembre 2018, avec Mme Cleyet-Merle et M Muti Desgrouas, une affiche interactive a été développée sur la thématique de mai 68. Le programme proposé permet de gérer la différence de taille entre la fenêtre d'affichage et la vidéo. Il permet entre autre d'ajuster la taille de la vidéo à la taille maximale de la fenêtre d'affichage, si la taille de la vidéo est plus grande que celle de la fenêtre d'affichage. Il permet aussi de centrer la vidéo si celle-ci a une taille plus petite que celle de la fenêtre d'affichage. Le programme est le suivant :
* {{ :wiki:tutoriels:affiche-interactive:affiche_interactive_3.zip |}}
==== Macro Projet - Margot Goutières- 2021 ====
Dans le cadre de son Macro Projet, Margot Goutières propose d'associer un son aléatoire et une vidéo aléatoire à chaque bouton. Chaque bouton est donc associé à un ensemble de son et de vidéo qui sont lues et mémorisé et mémorisé de façon automatique. Lorsqu'on appuie sur un bouton, le programme sélectionne aléatoirement un son et une vidéo dans les ensembles précédents et les joue.
Le programme correspondant est le suivant :
* [[http://88.164.194.158:30960/share/6infoezapiGY0n-j/Affiche_interactive_3.zip|Affiche_Interactive_Poesie_Marseille_Freebox_Damien]]
* [[|Affiche_Interactive_Poesie_Marseille_GD]]
{{ :wiki:tutoriels:affiche-interactive:marseille_affiche_margot_goutiere.png?400 |}}
{{ :wiki:tutoriels:affiche-interactive:affiche_interactive_margot_goutiere.png?800 |}}
===== Intégrer l'animation d'un sketch dans le programmes Affiche_Interactive =====
Un programme Processing (sketch) est une classe particulière de Processing. Il est donc possible de l'intégrer dans n'importe quel programme. Pour cela il est nécessaire de bien comprendre les équivalences suivantes :
* Les **variables globales** d'un sketch représente les **attributs** de la classe correspondante
* La méthode setup() d'un sketch représente le constructeur de la classe correspondante. En effet, c'est dans le setup() que les variables globales (donc les attributs de la classe) sont initialisées. ATTENTION : il faudra éliminer toutes les commande d'initialisation des paramètres d'affichage notamment size().
Une fois la classe (MonAnim) définie dans le programme Affiche_Interactive, il suffit de:
* un nouvel objet "monAnimation" de type MonAnim, dans les variables globales du sketch principal.
* Il faut ensuite instancier la classe dans le seutp() du sketch principal.
* Il faut enfin appeler la méthode draw() du nouvel objet monAnimation précédemment créé, lorsqu'une touche particulière est appelée.
Le programme suivant donne une proposition d'intégration du programme Pong multiballes dans le programme des affiches interactives :
* [[https://drive.google.com/file/d/1WC1Kv12jixm5gR7eoX4upJ0NepZkFdjX/view?usp=sharing|Affiche_interactive_2_0]]
===== Programme Processing sur du Raspbery =====
La transposition du programme sous Raspbery n'est pas immédiate. En effet, la librairie classique "Video" de Processing, ne fonctionne pas sur le système d'exploitation Raspbian (2018) du Raspbery. Les versions suivante de Processing sur Raspbian le permettront sans doute, mais actuellement, ce n'est pas le cas. Il est donc nécessaire d'utiliser une librairie spécifiquement développée pour le raspbery : GLVideo, qui est encore à la version béta. Voir : https://github.com/gohai/processing-glvideo .
==== Précaution d'utilisation: ====
Pour afficher une vidéo en utilisant la librairie GLVideo le raspbery, il convient d'utiliser une vidéo très légère (moins d'1MO) avec une taille d'image réduite, sans certitude de succès.
**Une alternative consiste à transformer la vidéo/gif qui doit être affichée en sa séquence d'images correspondante, puis à charger et afficher de façon récursive chaque image les une après les autres dans la boucle draw() de Processing qui tourne généralement à 30 images/seconde**.
Plusieurs logiciels permettent de réaliser cette opération:
* After Effect (propriétaire).
* Avidemux (libre) : [[http://www.commentcamarche.com/download/telecharger-34055660-avidemux]]. Sous LInux, il est possible d'installer ce logiciel via le Gestionnaire de logiciel.
* VirtualDub (libre) : [[http://www.virtualdub-fr.org/telechargement]]
* VirtualdubMod (libre) : [[http://www.clubic.com/telecharger-fiche45486-virtualdubmod.html]]
* ffmpeg (Libre) : https://www.lemondedustopmotion.fr/news/voir/7/Transformer_une_squence_dimages_en_une_vido_avec_ffmpeg
Enfin, une dernière possibilité est d'utiliser le programme processing suivant "fait sur mesure" :
/* Programme permettant de convertir une vidéo en une séquence d'image au format .jpg.
D'autre formats sont disponibles (TIFF, TARGA, et PNG). Voir l'aide en ligne de la méthode save() de la classe PImage (https://www.processing.org/reference/PImage_save_.html).
Précaution d'emploi: il faut placer la vidéo à déployer dans le dossier "data" du sketch et remplacer le fichier d'exemple "transit.mov" par votre fichier vidéo à la ligne 19.
*/
import processing.video.*;
int indiceImage = 0; // numéro de l'image à enregistrer issue de la vidéo
Movie movie;
void setup() {
size(640, 360);
background(0);
// Load and play the video in a loop
movie = new Movie(this, "transit.mov");
movie.play();
}
void draw() {
image(movie, 0, 0, width, height); // affichage de l'image en cours issue de la vidéo
String nomImage = "data/Sequence/image_"+indiceImage+".jpg"; // nom de l'image à enregistrer
movie.save(nomImage); // sauvegarde de l'image
indiceImage ++; // incrémentation de l'indice de l'image issue de la vidéo
}
void movieEvent(Movie m) {
m.read();
}
le programme et les fichiers vidéo de cet exemple sont téléchargeable ici :
{{:wiki:tutoriels:comment-creer-une-affiche-interactive:video2sequenceimages.zip|}}
====== Affiche interactive en Python sur Raspbery Pi ======
===== Présentation - Pourquoi python ? =====
L'utilisation d'un Raspbery Pi est très cohérent dans la médiation de l'affiche interactive dans un lieu d'exposition (musée, bibliothèque, etc.). En effet, le Raspbery tient peu de place et peut être facilement disposé de façon discrète comparé à une tour d'ordinateur fixe ou un ordinateur portable...
Comme nous l'avons vu dans la partie précédente, le programme de gestion des interactions utilisant un programme Processing sur un Raspbery Pi 3B prend énormément de ressources et est lent à l'exécution. D'autre part, la vidéo est très difficilement gérable.
Une des solutions est de programmer l'algorithme d'interactivité sous Python qui est un langage particulièrement adapté pour le Raspbery...
===== Algorithme =====
__Convention__ : On appelle "média", une image, un son, une vidéo, ou une animation à jouer/afficher.
L'enjeu de l'algorithme est de détecter les interactions "clavier" (c'est-à-dire lorsqu'on appuie sur une touche du clavier). Ainsi, lorsqu'on appuie sur une touche, il faut :
* stopper toutes les médias (son, vidéo, image affichée) qui sont en train de jouer.
* identifier le média correspondant à la touche:
* Si le média est déjà en train de jouer, alors stopper le média,
* sinon, jouer le média.
===== Un programme fonctionnel utilisant la librairie Kivy =====
==== qu'est-ce que la librairie Kivy ? ====
Kivy est une bibliothèque libre et open source pour Python, utile pour créer des applications tactiles pourvues d'une interface utilisateur naturelle. Cette bibliothèque fonctionne sur Android, iOS, GNU/Linux, OS X et Windows. Elle est distribuée gratuitement et sous licence MIT. Pour plus d'information, voir [[https://fr.wikipedia.org/wiki/Kivy|l'article sur la librairie Kivy de Wikipaedia]].
un tutoriel succinct est disponible sur les liens suivants :
* [[https://kivy.org/#home|Site officiel]]
* [[https://www.ukonline.be/cours/python/apprendre-python/chapitre12-1|Uko]]
==== Étapes préalables : Installer Python3 et la librairie Kivy ====
=== Python3 et Mu-editor ===
L'installation de kivy n'est possible que si "python3" est installé sur le Raspbery. Normalement, sur le système d’exploitation Raspbian, Python3 est installé par défaut. Sinon, taper dans un Terminal la ligne de commande suivante :
sudo apt-get install python3
Il existe énormément d'éditeur pour coder. Mu-editor est un des environnement les plus pratiques. La procédure d'installation de Mu-editor sur Raspbian est disponible sur le lien suivant :
* [[https://codewith.mu/en/howto/1.0/install_raspberry_pi|How to install Mu on a Raspberry Pi]]
Sinon, taper directement dans un Terminal la ligne de commande suivante:
sudo apt-get install mu-editor
=== Installer Kivy ===
De manière générale, vous pouvez installer la librairie Kivy sur le site officiel en sélectionnant votre système d'exploitation :
* [[https://kivy.org/#download|Kivy/Download]]
{{ :wiki:tutoriels:affiche-interactive:download_kivy.png?500 |}}
Dans le cas du Raspbery Pi, il faut choisir le système d'exploitation "Raspbery Pi" :
{{ :wiki:tutoriels:affiche-interactive:download_rasp.png?500 |}}
Le manuel d'installation se trouve sur le lien suivant :
* [[https://kivy.org/doc/stable/installation/installation-rpi.html]]
Vous pouvez aussi lancer les lignes de commandes suivantes dans un Terminal :
sudo apt install python3-pip build-essential git python3 python3-dev ffmpeg libsdl2-dev libsdl2-image-dev libsdl2-mixer-dev libsdl2-ttf-dev libportmidi-dev libswscale-dev libavformat-dev libavcodec-dev zlib1g-dev
sudo apt install libgstreamer1.0 gstreamer1.0-plugins-base gstreamer1.0-plugins-good
sudo pip3 install ffpyplayer
sudo pip3 install cython
sudo pip3 install git+https://github.com/kivy/kivy.git@master
Plus simplement :
- Télécharger et décompresser le fichier suivant : {{ :wiki:tutoriels:affiche-interactive:install_kivy.sh.zip |install_kivy_on_rpi.sh }}. Vous retrouvez ce fichier sur la [[https://github.com/olivier-boesch/affiche-interactive/|plateforme GitHub d'Olivier Boesch]].
- Enregistrer //install_kivy_on_rpi.sh// dans votre dossier de travail sur le Raspbery Pi.
- Ouvrir un terminal et changer le chemin d'accès pour vous placer dans votre dossier de travail dans lequel se trouve le fichier //install_kivy_on_rpi.sh//. Par exemple : cd Documents/Damien/Python_Olivier_Boesch/affiche-interactive-master/
- lancer la commande d'installation de toutes les dépendances détaillées dans le script ci-dessus en tapant dans la console : sh install_kivy_on_rpi.sh
==== Programme Pyhton - Olivier Boesch ====
=== Télécharger le code sur GitHub ===
Le code Python permettant de gérer les interactions clavier et de lancer un media grace à la librairie kivy a été développé par Olivier Boesch, professeur de Physique et Informatique au lycée Saint-Exupéry à Marseille. Le code est disponible sur la plateforme GitHub sur le lien suivant :
* [[https://github.com/olivier-boesch/affiche-interactive/]]
Télécharger l'ensemble du projet en cliquant sur "[[https://github.com/olivier-boesch/affiche-interactive/archive/master.zip|Clone or Download]]" :
{{ :wiki:tutoriels:affiche-interactive:github_ob.png?600 |}}
Après avoir décompressé le dossier "affiche-interactive-master", aller dans le sous dossier "src" (source):
{{ :wiki:tutoriels:affiche-interactive:contenu_src.png?400 |}}
Ce dossier est composé de :
* **main.py** : programme principal en Python à lancer
* **afficheinteractive.kv** : script kivy permettant le prototypage de l'interface visuelle
* **key_inspector.py** : programme en Python permettant de visualiser la touche qui est pressée. Ce programme est utile car la librairie Kivy est conçue pour les claviers QWERTY et permet d'être certain du code de la touche qui est véritablement détecté...
* **media** : dossier contenant les images, les sons et un fichier //config.json//
Un fichier JSON (JavaScript Object Notation) est un format de données textuelles dérivé de la notation des objets du langage JavaScript. Il permet de représenter de l’information structurée. Pour plus d'information voir les liens suivants :
* [[https://fr.wikipedia.org/wiki/JavaScript_Object_Notation|Wikipedia]]
* [[https://json.org/json-fr.html|json.org]]
Dans le cas présent, ce fichier JSON permet d'associer à une touche donnée ("a", "down", "up", etc.), un type de média (vidéo, son, image), via la variable //media_type//, et un chemin d'accès dans la mémoire de l'ordinateur ("media/star_trails.mp4") via la variable //src// :
{
"a": {"media_type": "video", "src": "media/text.mp4"},
"z": {"media_type": "image", "src": "media/len_full.jpg"},
"e": {"media_type": "sound", "src": "media/yeah.mp3"},
"up": {"media_type": "sound", "src": "media/ohno.mp3"},
"down": {"media_type": "image", "src": "media/ada.jpg"},
"left": {"media_type": "video", "src": "media/sample.mp4"},
"right": {"media_type": "video", "src": "media/star_trails.mp4"},
"r": {"media_type": "image", "src": "media/hud.png"}
}
=== Customiser le code pour y ajouter ses propres médias ===
== Inclure les images, le son, la vidéo ==
Pour adapter le programme à l'interactivité prévue pour votre affiche, il faut inclure dans le dossier "media" vos images, vos vidéos et vos sons :
{{ :wiki:tutoriels:affiche-interactive:dossier_media.png?400 |}}
== Modifier le fichier config.json ==
Supposons que j'inclue une vidéo intitulée "ma_video.mp4" et que je souhaite l'associer à la touche "up". Il faudra que j'inclue ou que je modifie la ligne suivante dans le fichier //config.json// :
{ ...
"up": {"media_type": "video", "src": "media/ma_video.mp4"},
...
}
On procède de la même manière avec les autres médias.
== Code commenté ==
Le [[https://github.com/olivier-boesch/affiche-interactive/tree/master/src|code]] est composé de 2 parties :
* **main.py** : Programme en Python permettant de gérer l'interactivité via les touches. Son rôle est de lancer un média (vidéo, son, image) lorsqu'une touche donnée est pressée.
* **affiche interactive.kv** : Programme en langage Kivy permettant d'organiser l'interface graphique dans lequel sont affichés les médias.
le programme //main.py// est composé des classes suivantes :
* //class MediaManager(Widget)//: Permet de capturer chaque événement clavier. Analyse le fichier //config.json// et associe la touche détectée au media (image, son, vidéo) correspondant. La classe transmet ensuite le chemin d'accès du média (image ou vidéo) à son "widget" correspondant. Il s'agit d'une "étiquette" le caractérisant de façon unique. Le son est, quant à lui, joué directement.
* //class VideoScreen(Screen)//: Permet d'afficher les vidéos.
* //class ImageScreen(Screen)//: Permet d'afficher les images
* //Builder.load_file('afficheinteractive.kv')//: permet de charger le fichier Kivy (kv) permettant d'organiser l'interface graphique dans lequel sont affichés les médias. Remarque: il s'agit d'une instruction, mais pas d'une classe...
* //class AfficheApp(App)//: Classe principale du programme. Elle appelle dans le bon ordre les classes précédentes pour gérer de façon correcte le lancement des médias lors des événements clavier.
* //if __name__ == '__main__': AfficheApp().run()//: Permet de lancer l'application.
== Lancer l'application ==
Pour lancer le programme, il faut :
* ouvrir un Terminal : {{ :wiki:tutoriels:affiche-interactive:terminal.png?400 |}}
* se placer dans le dossier contenant le fichier //main.py// : cd Documents/Damien/Python_Olivier_Boesch/affiche-interactive-master/src/
{{ :wiki:tutoriels:affiche-interactive:terminal_1.png?500 |}}
* lancer l'application en tapant l'instruction suivante : python3 main.py
{{ :wiki:tutoriels:affiche-interactive:terminal_2.png?500 |}}
===== Un programme fonctionnel utilisant la librairie Pygame - Pas de vidéo =====
==== Présentation du problème ====
Le programme précédent, basé sur la librairie "Kivy" est très fonctionnel. Il nécessite, cependant, d'avoir une très bonne maîtrise du code pour être totalement compris.
Il existe des librairies plus simples d'utilisation pour développer sous python l'algorithme de gestion des événements liés à l'affiche interactive. La librairie "[[https://www.pygame.org/news|Pygame]]", qui a été implémentée pour développer des jeux vidéos en 2D, est une librairie très simple d'utilisation. Elle est largement utilisée au lycée pour des applications multiples. Généralement, les programmes associés sont effectués sur une interface de développement (IDE) très pédagogique appelé "[[https://edupython.tuxfamily.org/|Edupyhthon]]".
Dans les premières versions de Pygame, la vidéo était prise en charge. Cependant, les dernières mises à jour de cette librairie ont évacué la gestion de la vidéo dans les années 2015 (voir le lien suivant sur le [[https://openclassrooms.com/forum/sujet/lire-une-video-sur-python|forum d'OpenClassroom]]).
Par conséquent, le programme proposée dans cette partie ne gère que :
* l'affichage d'une image et
* le lancement d'un son,
* éventuellement le lancement d'une animation (en utilisant les fonctionnalités de Pygame, mais qui nécessite un niveau de programmation relativement élevé comparé à ce qui existe sous Processing). Il y a aussi la possibilité d'appeler sous Python une librairie Processing qui permet de réinvestir les programmes développés sous Processing.
==== La librairie Pygame ====
=== Présentation ===
La page de présentation officielle de la librairie Pygame est accessible sur le lien suivant :
* [[https://www.pygame.org/news|Pygame.org]]
Vous y trouverez :
* Les dernières mises à jour,
* La documentation (voir après),
* La procédure d'installation (voir partie ci-dessous),
* Un certain nombre de tutoriels et d'exemple d'utilisation,
* etc.
=== Installation ===
La procédure d'installation est disponible sur le lien suivant :
* [[https://www.pygame.org/wiki/GettingStarted|installation de Pygame]]
L'installation de Pygame sus un Rapsbery s'effectue en langage Shell dans une console de commande. Il vous suffit de **suivre scrupuleusement les instructions** données pour :
* **Installer Python 3**. Normalement, cette procédure est inutile car la distribution du système d'exploitation Raspbian (dérivée de Debian) inclue déjà Python 3.
* **Installer "pip"**, un utilitaire très pratique pour installer et inclure des librairies python. Vous pourrez installer pip en suivant le tutoriel suivant:
* [[https://pip.pypa.io/en/stable/installing/| pip installation ]]
* Installer la librairie Pygame à l'aide de l'utilitaire "pip".
=== Documentation ===
Une documentation très complète des différentes fonctionnalités de la librairie Pygame est donnée sur le **site officiel** sur le lien suivant :
* [[https://www.pygame.org/docs/|Documentation Pygame]]
Vous y trouverez des explications sur :
* l'installation de Pygame (déjà abordée dans la partie précédente),
* des tutoriels et des exemples,
* le détail de toutes les fonctionnalités de la librairie :
* gestion de l'affichage de l'espace de dessin (idem que Processing)
* gestion de l'affichage des images
* gestion de la couleur
* gestion des événements clavier, d'un joystick,
* etc.
Un **tutoriel** sur l'utilisation de la librairie Pygame est proposé (par Johan Segura, Pr. de Maths et moi-même) sur le site "[[http://mathsoup.xyz/index.html|MathSoup]]" dans le lien suivant :
* [[http://mathsoup.xyz/mathsoup.xyz/content/Informatique/Python/pong-python-documentation.html|Documentation Pygame]]
=== Algorithme et programme adapté au Raspbery Pi ===
== Algorithme ==
__Convention__ : On appelle "média", une image, un son (**au format .wav**), ou une animation à jouer/afficher. **__Attention__ :Nous excluons ici l'utilisation de la vidéo.**
L'enjeu de l'algorithme est de détecter les interactions "clavier" (c'est-à-dire lorsqu'on appuie sur une touche du clavier). Ainsi, lorsqu'on appuie sur une touche, il faut :
* identifier le média correspondant à la touche:
* Si le média est déjà en train de jouer, alors stopper le média,
* sinon, jouer le média.
Le code en Python est le suivant :
#importer les librairies
import pygame, sys
from pygame.locals import *
#from pygame import *
from pygame import mixer
#from pygame import music
#initialiser tous les modules de la librairie pygame
pygame.init()
#pygame.mixer.pre_init(44100, 16, 2, 4096) #frequency, size, channels, buffersize
#pygame.mixer.init(44100, -16, 2, 2048)
pygame.mixer.init()
## variables globales
image_active = False #gestion des images
son_actif=False #gestion du son
son_isPlaying = False # le son est en train de jouer
# charger le nom des sons
nomDuSon = []
nomDuSon.append("data/Sons/wav/ohno.wav")
nomDuSon.append("data/Sons/wav/tiouh.wav")
nomDuSon.append("data/Sons/wav/Kassav - Sye bwa.wav")
#charger le son i
son = pygame.mixer.Sound(nomDuSon[2])
#Ouverture de la fenêtre Pygame
fenetre = pygame.display.set_mode((640, 480))
#Chargement et collage du fond
fond = pygame.image.load("data/Images/background.jpg").convert()
fenetre.blit(fond, (0,0))
#Chargement et collage du personnage
perso = pygame.image.load("data/Images/perso.png").convert_alpha()
#Rafraîchissement de l'écran
pygame.display.flip()
#BOUCLE INFINIE
continuer = 1
while continuer:
#afficher l'image du fond
fenetre.blit(fond, (0,0))
#tester tous les événements clavier
for event in pygame.event.get():
if event.type == QUIT: # croix ou "Stop"
continuer = 0
pygame.display.quit()#ferme la fenêtre
sys.exit() #arrête le programme
if event.type == KEYDOWN:
if event.key == K_UP:#lancer/éteindre un son
print("K_UP")
print(son_isPlaying)
if son_isPlaying == False : # si le son ne joue pas : lancer le son et mettr ela variable son_isPlaying à "True"
son.play()
son_isPlaying = True
else :
son.stop()
son_isPlaying = False
if event.key == K_DOWN: #affichage des images
image_active = not image_active
print("image_active",image_active)
print("KEY_DOWN")
if image_active : #teste si on doit afficher l'image
fenetre.blit(perso, (10,10))
#Rafraîchissement de l'écran
pygame.display.flip()
#vérifier si un son joue
son_isPlaying = pygame.mixer.get_busy()
Vous pouvez le télécharger directement sur ce lien, comprenant aussi tous les médias nécessaires à son bon fonctionnement:
{{ :wiki:tutoriels:affiche-interactive:affiche_interactive_python_tonerkebab.zip |}}