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

Logo de Light4Events
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é

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

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