Un bandeau dynamique pour OBS piloté par une feuille de calcul

Lors d’un événement diffusé via OBS Studio, il est fréquent d’avoir besoin d’afficher les réseaux sociaux, le programme ou des informations pratiques à l’écran. Plutôt que de modifier manuellement plusieurs sources texte, j’ai développé un bandeau dynamique alimenté par une simple feuille de calcul.

Comment assurer une rotation d’informations facilement sur l’overlay, sans avoir à manipuler sans cesse OBS ?

Comment fonctionne ce bandeau dynamique ?

L’overlay fonctionne comme une Source Navigateur d’OBS Studio, ce qui permet d’utiliser une interface HTML, CSS et JavaScript sans plugin supplémentaire.

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).

L’objectif est que n’importe quel bénévole (ou soi-même) puisse modifier le contenu du bandeau sans toucher au code ni à OBS Studio. Une simple sauvegarde de la feuille de calcul met immédiatement le bandeau à jour.

Architecture

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 comme Source Navigateur dans OBS Studio.

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.

Animation avec GSAP

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.

Les animations sont réalisées avec GSAP afin d’enchaîner automatiquement chaque information. Une timeline contrôle l’apparition, le maintien à l’écran puis la disparition des différents éléments (icône, texte et horaire), avant de passer à l’entrée suivante de la feuille de calcul.

Principe de fonctionnement

• Lecture de la feuille de calcul.
• Mise à jour des textes et de l’icône.
• Animation du bandeau avec GSAP.
• Passage automatique à la ligne suivante.
• Reprise de la boucle.

En pratique

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é.

Ce prototype montre qu’il est possible de piloter un overlay OBS uniquement à partir d’une feuille de calcul. Une approche simple qui facilite la mise à jour des informations pendant un direct, sans avoir à modifier l’overlay lui-même.