Bandeau dynamique via feuille de calcul en local

Principe & Fonctionnement

Cet outil se présente sous la forme d’un bandeau avec une rotation d’informations (programme, réseaux sociaux…), le tout géré par une feuille de calcul en local (ici Libre Office Calc).

Le bandeau de bas d’écran affiche les réseaux sociaux de la personne (Twitch, Facebook, Instagram…) en rotation, en allant chercher les infos sur la feuille de calcul.
Le bandeau de bas d’écran affiche les réseaux sociaux de la personne (Twitch, Facebook, Instagram…) en rotation, en allant chercher les infos sur la feuille de calcul.

Il y a deux parties distinctes pour cet outil :

  • La feuille de calcul où l’on doit détailler ses réseaux sociaux. Cela ne propose à l’heure actuelle qu**’une petite partie des réseaux connus, pour le test**. Il suffit ensuite d’activer les réseaux que l’on veut afficher avec une croix sur la case devant et sauvegarder le fichier.
  • Un fichier HTML qui va chercher les infos sur la feuille de calcul. Ensuite une animation va opérer automatiquement la rotation sur le bandeau. Il ne reste qu’à insérer le fichier HTML dans OBS et tout est bon.

A terme, si je finis ce outil, j’aimerais bien le proposer à un événement de stream (par exemple, un marathon caritatif) en l’adaptant à la charte graphique.

La seule contrainte est d’avoir un logiciel type Excel ou Libre Office calc sur l’ordinateur, mais au-délà de ça, chacun-e pourrait remplir son fichier à sa manière assez rapidement et la mise en place est simplifiée.

Création & Dev

Les exemples ici reprennent la charte graphique de Speedons, car j’ai eu l’idée en regardant l’événement en 2023 (c’était bien).

J’ai commencé par prendre quelques notes pour reprendre la charte graphique, puis j’ai attaqué avec un exemple tout simple, afficher un seul élément avec une légère animation d’opacité.

Le premier prototype qui affiche en rotation uniquement “Element 1”, “Element 2” etc…
Le premier prototype qui affiche en rotation uniquement “Element 1”, “Element 2” etc…

J’ai ensuite poussé les tests pour un affichage de “programme” d’un événement. J’en ai profité pour jouer un peu avec du GSAP pour gérer les animations. Pour les icônes, je me base sur le kit de Font Awesome.

Une déclinaison du bandeau, pour afficher les différents moments du programme d’un événement (en cours, à suivre…)

Il y a encore du boulot sur cet outil, notamment pour lui donner un petit coup de propre visuellement, mais il est déjà fonctionnel.

Outils & technologies