Light4Events : implémentation des fonctionnalités en JS.

Light4Events, liste des fonctionnalités à implémenter en JS

Les pages suivantes vont présenter les différentes fonctionnalités à implémenter en JS pour Light4Events. Des liens vers des références sont proposés.
Pour déclencher les événements nous utiliserons la page Admin Ines.
Sur les applications (Light4Events sur Android et IOS, nous utiliserons l'événement privé avec le mot clé : "ines".
Le client web actuel est disponible ici.

L'objectif du stage est d'implémenter un maximum de fonctionnalités dans la liste suivante.

Fonction générale

Garder l'écran allumé

Référence : https://davidwalsh.name/wake-lock-shim
État d'implémentation : TODO

Fonctions simples

Couleur

Description : affichage d'une couleur fixe plein écran.
Mot clé de la fonction : "FC"
Paramètres
- color : La couleur à afficher.
- fading : NONE / CHAIN : Type de fondu : aucun, fondu enchaîné.
- duration : durée de la transition.

Exemple :


{"type":"action","parameters":{"name":"FC","parameters":{"color":"#832325","fading":"NONE","duration":0}}}
{"type":"action","parameters":{"name":"FC","parameters":{"color":"#9C27B0","fading":"CHAIN","duration":"2000"}}}

État d'implémentation : partielle.

Couleur de fond

Description : affichage d'une couleur de fond, sans retirer l'affichage d'une image, vidéo, ...
Mot clé de la fonction : "BGC"
Paramètres
- color : La couleur à afficher en fond d'écran.
- fading : NONE / CHAIN : Type de fondu : aucun, fondu enchaîné.
- duration : durée de la transition.

Exemple :


{"type":"action","parameters":{"name":"BGC","parameters":{"color":"#0000FF"}}}
{"type":"action","parameters":{"name":"BGC","parameters":{"color":"#9C27B0","fading":"CHAIN","duration":"2000"}}}

État d'implémentation : partielle.

Images

Description : Affichage d'une image fixe ou animée (gif) en plein écran, peu importe la taille de l'écran.
Mot clé de la fonction : "IMG"
Paramètres :
- url : l'URL de l'image à afficher.
- bg_color : La couleur de fond à afficher.
- fading : NONE / CHAIN : Type de fondu : aucun, fondu enchaîné.
- duration : durée de la transition.

Exemple :


{"type":"action","parameters":{"name":"IMG","parameters":{"url":"http://tristan-salaun.com/l4e/content/imgs/logo_light4events.png"}}}
{"type":"action","parameters":{"name":"IMG","parameters":{"url":"http://tristan-salaun.com/l4e/go19/grand_opening.jpg","bg_color":"#4787cf"}}}

État d'implémentation : TODO

Son

Description : Joue un son.
Mot clé de la fonction : "PLAYSOUND"
Paramètres :
- url : l'adresse du son à jouer.

Exemple :


{"type":"action","parameters":{"name":"PLAYSOUND","parameters":{"url":"http://tristan-salaun.com/l4e/content/sound/chien_02.mp3"}}}

État d'implémentation : TODO

Son MIDI

Description : Joue un son au format MIDI.
Mot clé de la fonction : "MIDI"
Paramètres :
- url : l'adresse du son MIDI à jouer.

Exemple :


{"type":"action","parameters":{"name":"MIDI","parameters":{"url":"http://tristan-salaun.com/l4e/content/midi/tetris.mid"}}}

État d'implémentation : TODO

Sons

Description : Joue des sons : aléatoirement, plusieurs fois, ...
Mot clé de la fonction : "ASOUND"
Paramètres :
- is_random_sounds : Est ce que les sons sont joués dans l'ordre (FALSE) ou aléatoirement (TRUE).
- is_first_pause : Est ce que la première chose est une pause (TRUE), ou l'on joue directement du son (FALSE).
- min_time_pause : Temps de pause minimum.
- max_time_pause : Temps de pause maximum.
- repeat : Nombre de répétitions (-1 = illimité).
- sounds : Tableau contenant la liste des sons à jouer (une ou plusieurs valeurs peuvent êtres vides).

Exemple :


{"type":"action","parameters":{"name":"ASOUND","parameters":{"is_random_sounds":false,"is_first_pause":false,"min_time_pause":3000,"max_time_pause":3000,"repeat":5,"sounds":["http://tristan-salaun.com/l4e/content/sound/tonerre.mp3","http://tristan-salaun.com/l4e/content/sound/grillons.mp3"]}}}
{"type":"action","parameters":{"name":"ASOUND","parameters":{"is_random_sounds":false,"is_first_pause":true,"min_time_pause":3000,"max_time_pause":10000,"repeat":3,"sounds":["http://tristan-salaun.com/l4e/content/sound/tonerre.mp3"]}}}
{"type":"action","parameters":{"name":"ASOUND","parameters":{"is_random_sounds":true,"is_first_pause":false,"min_time_pause":1000,"max_time_pause":5000,"repeat":10,"sounds":["http://tristan-salaun.com/l4e/content/sound/city/ambulance.mp3","http://tristan-salaun.com/l4e/content/sound/city/ambulance2.mp3","http://tristan-salaun.com/l4e/content/sound/city/carrbrake.mp3","http://tristan-salaun.com/l4e/content/sound/city/car_door.mp3","http://tristan-salaun.com/l4e/content/sound/city/construction.mp3","http://tristan-salaun.com/l4e/content/sound/city/jackhammer1.mp3","http://tristan-salaun.com/l4e/content/sound/city/police.mp3","http://tristan-salaun.com/l4e/content/sound/city/traffic.mp3","http://tristan-salaun.com/l4e/content/sound/city/traffichorns.mp3","http://tristan-salaun.com/l4e/content/sound/city/trafficjam.mp3","http://tristan-salaun.com/l4e/content/sound/city/truckhorn.mp3"]}}}

État d'implémentation : TODO

Vidéo

Description : Joue une vidéo.
Mot clé de la fonction : "VIDEO"
Paramètres :
- url : L'URL de la vidéo à jouer.
- background_color : Couleur de fond de la vidéo.
Référence : https://www.programmation-facile.com/player-video-html5-google-chrome-firefox-safari-internet-explorer/
Référence : https://developer.mozilla.org/fr/docs/Web/HTML/Element/video

Exemple :


{"type":"action","parameters":{"name":"VIDEO","parameters":{"url":"http://tristan-salaun.com/l4e/content/videos/anooki_nakina.mp4"}}}
{"type":"action","parameters":{"name":"VIDEO","parameters":{"url":"https://tristan-salaun.com/l4e/content/videos/anooki_nakina.mp4","background_color":"#FF0000"}}}

État d'implémentation : TODO

Watermark

Description : Affichage d'une image fixe en transparence, de manière permanente.
Mot clé de la fonction : "WM"
Paramètres :
- url : L'URL de l'image à afficher en transparence.

Exemple :


{"type":"action","parameters":{"name":"WM","parameters":{"url":"http://tristan-salaun.com/l4e/content/imgs/watermark_insu_logo_translucent_white.png"}}}

État d'implémentation : TODO

Texte

Description : Affichage d'un texte simple.
Mot clé de la fonction : "TEXT"
Paramètres :
- text : Le texte à afficher.
- text_color : La couleur du texte à affichier.
- background_color : La couleur de fond du texte à affichier.
- text_size : La taille du texte à afficher.

Exemple :


{"type":"action","parameters":{"name":"TEXT","parameters":{"text":"Un petit texte de test","text_color":"#00FF00","background_color":"#FF0000","text_size":25}}}
{"type":"action","parameters":{"name":"TEXT","parameters":{"text":"Un petit texte de test","background_color":"#00000000"}}}
{"type":"action","parameters":{"name":"TEXT","parameters":{"text":"Un petit texte de test"}}}

État d'implémentation : TODO

HTML

Description : Affichage d'une page en HTML.
Mot clé de la fonction : "HTML"
Paramètres :
- content : le contenu HTLM à afficher.

Exemple :


{"type":"action","parameters":{"name":"HTML","parameters":{"content":"<body bgcolor=#000><h1><font color=#FFFFFF>Test titre</font></h1></body>"}}}

État d'implémentation : TODO

URL

Description : Affichage d'un site web.
Mot clé de la fonction : "URL"
Paramètres :
- url : L'url de la page/site à afficher.

Exemple :


{"type":"action","parameters":{"name":"URL","parameters":{"url":"https://light4events.com"}}}

Toast

Description : Affichage d'un message temporairement.
Mot clé de la fonction : "TOAST"
Paramètres :
- text : Le contenu du message à afficher.
- text_duration : Affichage long (long) ou court (short).
Référence : https://www.w3schools.com/howto/howto_js_snackbar.asp

Exemple :


{"type":"action","parameters":{"name":"TOAST","parameters":{"text":"Un petit texte de test."}}}
{"type":"action","parameters":{"name":"TOAST","parameters":{"text":"Un petit texte de test.","text_duration":"long"}}}
{"type":"action","parameters":{"name":"TOAST","parameters":{"text":"Un petit texte de test.","text_duration":"short"}}}

État d'implémentation : TODO

Flash

Description : Utilisation du flash en mode scintillement.
Mot clé de la fonction : "FLASH"
Paramètres :
- time_off : Durée d'extinction du flash.
- time_on : Durée d'allumage.
- repeat : Nombre de répétition (cycle allumage, extinction).
Référence : https://www.oberhofer.co/mediastreamtrack-and-its-capabilities/

Exemple :


{"type":"action","parameters":{"name":"FLASH","parameters":{"time_off":2000,"time_on":500,"repeat":5}}}
{"type":"action","parameters":{"name":"FLASH","parameters":{"time_off":1000,"time_on":1000,"repeat":5}}}

État d'implémentation : TODO

Vibrations

Description : Utilisation du vibreur.
Mot clé de la fonction : "VIB"
Paramètres :
- pattern : Tableau des durées de vibration et de pause, en commençant par la durée de la pause avant de lancer le vibreur.
Référence : https://developer.mozilla.org/fr/docs/Web/API/Vibration_API

Exemple :


{"type":"action","parameters":{"name":"VIB","parameters":{"pattern":"0,1000"}}}
{"type":"action","parameters":{"name":"VIB","parameters":{"pattern":"0,50,50,50,50,50,50,50,50,50,50,50"}}}
{"type":"action","parameters":{"name":"VIB","parameters":{"pattern":"0,100,100,100,100,100,100,300,100,300,100,300,100,100,100,100,100,100"}}}

État d'implémentation : TODO

Luminosité

Description : Réglage de la luminosité de l'écran.
Mot clé de la fonction : "B"
Paramètres :
- brightness : La valeur entre 0 et 100 de la luminosité de l'écran.

Exemple :


{"type":"action","parameters":{"name":"B","parameters":{"brightness":10}}}
{"type":"action","parameters":{"name":"B","parameters":{"brightness":90}}}
{"type":"action","parameters":{"name":"B","parameters":{"brightness":100}}}

État d'implémentation : TODO

Volume sonore

Description : Réglage du volume sonore.
Mot clé de la fonction : "VOL"
Paramètres :
- volume : Le volume à définir.
- display_ui : Affichage (ou non) du changement de volume.
Référence : https://www.w3schools.com/tags/av_prop_volume.asp

Exemple :


{"type":"action","parameters":{"name":"VOL","parameters":{"volume":10}}}
{"type":"action","parameters":{"name":"VOL","parameters":{"volume":10,"display_ui":true}}}
{"type":"action","parameters":{"name":"VOL","parameters":{"volume":100,"display_ui":true}}}

État d'implémentation : TODO

Fonctions avancées

Couleurs dynamiques

Description : Affichage de couleurs dynamiques.
Mot clé de la fonction : "AC"
Paramètres :
- fading : Le type de changement de couleur à utiliser (NONE : aucun).
- is_random_colors : Est ce qie l'ordre des couleurs est prise aléatoirement (TRUE) ou dans l'ordre de la liste (FALSE).
- is_random_time : Est ce que la durée d'allumage et d'extinction est aléatoire ?
- time_off : Durée d'extinction.
- time_on : Durée d'allumage.
- min_time_off : (Si is_random_time = FALSE) : Minimum que la durée aléatoire d'extinction peut prendre.
- max_time_off : (Si is_random_time = FALSE) : Maximum que la durée aléatoire d'extinction peut prendre.
- min_time_on : (Si is_random_time = TRUE) : Minimum que la durée aléatoire d'allumage peut prendre.
- max_time_on : (Si is_random_time = TRUE) : Maximum que la durée aléatoire d'allumage peut prendre.
- colors : Liste des couleurs à utiliser (si pas de couleurs, utiliser une valeur aléatoire).

Couleurs dynamiques (suite)

Exemple :


{"type":"action","parameters":{"name":"AC","parameters":{"fading":"NONE","is_random_colors":"Y","is_random_time":"N","time_off":500,"time_on":1000,"colors":["#0000FF","#FFFFFF","#FF0000"]}}}
{"type":"action","parameters":{"name":"AC","parameters":{"fading":"NONE","is_random_colors":"N","is_random_time":"N","time_off":0,"time_on":1000,"colors":["#0000FF","#FFFFFF","#FF0000","#000000"]}}}
{"type":"action","parameters":{"name":"AC","parameters":{"fading":"NONE","is_random_colors":"N","is_random_time":"Y","min_time_off":2000,"max_time_off":5000,"min_time_on":100,"max_time_on":500,"colors":["#FFFFFF"]}}}
{"type":"action","parameters":{"name":"AC","parameters":{"fading":"NONE","is_random_colors":"Y","is_random_time":"Y","min_time_off":2000,"max_time_off":5000,"min_time_on":100,"max_time_on":500,"colors":["#0000FF","#FFFFFF","#FF0000"]}}}

État d'implémentation : TODO

Réaction au volume sonore : couleur

Description : La couleur scintille entre deux valeurs (couleur min et couleur max) en fonction du niveau sonore capté par le micro.
Mot clé de la fonction : "ASC"
Paramètres :
- min_color : La couleur quand le niveau sonore est au minimum.
- max_color : La couleur quand le niveau sonore est au maximum.
Référence : https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API

Exemple :


{"type":"action","parameters":{"name":"ASC","parameters":{"min_color":"#000000","max_color":"#FF0000"}}}
{"type":"action","parameters":{"name":"ASC","parameters":{"min_color":"#FF0000","max_color":"#FFFFFF"}}}

État d'implémentation : TODO

Réaction au volume sonore : flash

Description : Le flash scintille en fonction du niveau sonore capté par le micro.
Mot clé de la fonction : "ASF"
Paramètres :
- trigger_level : La valeur de déclenchement du flash (0.5 : niveau moyen : au dessus on allume, au dessous on éteint).

Exemple :


{"type":"action","parameters":{"name":"ASF","parameters":{}}}
{"type":"action","parameters":{"name":"ASF","parameters":{"trigger_level":"0.5"}}}
{"type":"action","parameters":{"name":"ASF","parameters":{"trigger_level":"0"}}}

État d'implémentation : TODO

Hola lumineuse

Description : Une vague de lumière circule à travers les participants.
Mot clé de la fonction : ""
Paramètres :
Exemple :
État d'implémentation : TODO

Synthèse vocale

Description : Permet "parler" un texte.
Mot clé de la fonction : "TTS"
Paramètres :
- text : Le texte à synthétiser / prononcer.
- locale : La locale du moteur de synthèse vocale à utiliser.
Référence : https://developer.mozilla.org/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API

Exemple :


{"type":"action","parameters":{"name":"TTS","parameters":{"text":"Un petit texte de test."}}}
{"type":"action","parameters":{"name":"TTS","parameters":{"text":"Un petit texte de test.","locale":"FR"}}}

État d'implémentation : TODO

Fonctions plus avancées

Logo

Description : Affichage d'un logo ou chaque téléphone est un point.
Mot clé de la fonction : "LOGO"
Paramètres :
- url : L'URL de l'image à afficher en découpé.
- logo_width
- logo_height
- default_color

Exemple :


{"type":"action","parameters":{"name":"LOGO","parameters":{"url":"http://tristan-salaun.com/l4e/content/imgs/flag_fr.png","logo_width":1,"logo_height":1,"default_color":"#555555"}}}
{"type":"action","parameters":{"name":"LOGO","parameters":{"url":"http://tristan-salaun.com/l4e/content/imgs/flag_tanzania.png","logo_width":9,"logo_height":5,"default_color":"#555555"}}}

État d'implémentation : TODO

Sondage

Description : Questions à choix multiple.
Mot clé de la fonction : ""
Paramètres :
Exemple :
État d'implémentation : TODO

Questions ouvertes

Description : Questions ouvertes.
Mot clé de la fonction : ""
Paramètres :
Exemple :
État d'implémentation : TODO