Dashboards et Graphics : le côté navigateur

Rentrons maintenant dans le cœur de NodeCG : les Dashboards et les Graphics.

Même s’ils ont des rôles très différents, ils reposent tous les deux sur les mêmes technologies que celles utilisées pour créer une page web classique : HTML, CSS et JavaScript.

La différence se trouve principalement dans leur utilisation :

le Graphic est une page web destinée à être affichée, notamment dans OBS, grâce à son navigateur web en interne
le Dashboard est une page web destinée à être utilisée par la personne qui contrôle le live

Retenons cette idée très simple :

Le Dashboard contrôle, le Graphic affiche.

Il est important de garder à l’esprit que ce sont deux pages web distinctes. Elles possèdent chacune leur propre HTML, leur propre JavaScript et leur propre contexte d’exécution.

Elles ne partagent donc pas automatiquement leurs variables JavaScript. NodeCG fournit justement des mécanismes permettant de faire communiquer ces différentes parties, que nous découvrirons plus tard.

Les “Graphics”

Un Graphic est l’élément visuel de votre projet et peut prendre énormément de formes :

un scoreboard
un lower-third
une liste de joueurs
un classement
un compteur
une animation
une scène graphique complète
ou simplement une page HTML affichée dans OBS

Développer un “Graphic”

Pour développer un élément graphique, il faut travailler dessus comme n’importe quelle page web.

soit directement un fichier HTML unique qui contient également le CSS et le JavaScript
soit un dossier avec les éléments à part : le fichier HTML, la feuille de style CSS et le script en JavaScript

On peut donc avoir une structure comme :

Directorynodecg-initiation/
- Directorygraphics/
  - scoreboard.html (qui contient aussi le CSS et le JS)
  - Directoryscoreboard/ (chaque fichier séparé)
    index.html
    style.css
    script.js
- …

Déclarer un “Graphic”

Pour que ce Graphic puisse être exploiable, il faut indiquer à NodeCG que le fichier existe, en le déclarant dans la section graphics du fichier package.json

"graphics": [

    // Si c'est un fichier
          {
        "file": "scoreboard.html",
        "width": 1920,
        "height": 1080,
        "singleInstance": false
      },

    // Ou si c'est un dossier, bien renseigner le chemin
      {
        "file": "scoreboard/index.html",
        "width": 1920,
        "height": 1080,
        "singleInstance": false
      }
    ]

Ici on renseigne :

file : le chemin vers le fichier HTML
width et height : les dimensions du Graphic, exprimées en pixels. Pour un projet destiné à une sortie Full HD, 1920 × 1080 est un choix courant.
singleInstance (false, par defaut) : indique si une seule instance du Graphic peut être ouverte à la fois. false permet d’en ouvrir plusieurs instances.

Ajouter un “Graphic” dans OBS

L’intégration avec OBS est finalement assez simple.

Lancer NodeCG et ouvrir OBS
Ajouter une source Navigateur Internet
Entrer l’url de votre Graphic (par exemple : http://localhost:9090/bundles/nodecg-initiation/graphics/scoreboard/index.html )
Définir la largeur et la hauteur de l’élement (par defaut : 1920x1080)
Configurer éventuellement le nombre d’images par seconde (30 ou 60 pour plus de fluidité)

OBS ouvrira ce lien comme n’importe quelle page web.

Dashboard

Là où le Graphic est destiné à être affiché à l’écran, le Dashboard est destiné à être utilisé par la personne qui contrôle le live. C’est donc une interface d’administration.

On peut y retrouver :

champs de texte
boutons
des sélecteurs
des cases à cocher
des compteurs
des listes
des contrôles permettant de déclencher des actions

Développer et déclarer un “Dashboard”

Pour développer un Dashboard, c’est la même procédure que pour un Graphic : soit un fichier unique, soit un dossier avec le HTML, CSS et JavaScript séparés.

Pour les déclarer, c’est quasiment même chose mais certaines informations diffèrent :

"dashboardPanels": [

    // Si c'est un fichier
          {
        "name": "scoreboard",
        "title": "Scoreboard",
        "file": "scoreboard.html",
        "width": 3,
        "workspace": "Espace de travail",
        "headerColor": "#525F78",
        "fullbleed": false
      },

    // Ou si c'est un dossier, bien renseigner le chemin
     {
        "name": "scoreboard",
        "title": "Scoreboard",
        "file": "scoreboard/index.html",
        "width": 3,
        "workspace": "Espace de travail",
        "headerColor": "#525F78",
        "fullbleed": false
      }

    ]

Ici on renseigne :

name : le nom du Dashboard
title : le nom du Dashboard qui apparaitra sur l’interface
file : le chemin vers le fichier HTML
width : la largeur de l’élément Dashboard (le calcul est un peu bizarre, à vous de tester selon votre projet)
workspace : dans quel onglet apparaitre votre élément. Vous pouvez ranger vos outils dans différents onglets de l’interface
headerColor : la couleur de l’en-tête de votre élément (je laisse par défaut)
fullbleed (false, par defaut) : pour que votre élément prenne tout l’écran

N’oubliez pas de relancer NodeCG en cas de modification des informations ou déclaration de nouveau fichier.

Pendant le développement

Comme les Dashboards et les Graphics sont des pages web, vous pouvez les développer et les tester comme n’importe quelle autre page web.

De la même manière, les outils de développement du navigateur permettent d’inspecter le HTML, de vérifier les styles CSS et de consulter les éventuelles erreurs JavaScript.

Pendant la création d’un Graphic, il peut notamment être pratique de l’ouvrir directement dans votre navigateur pour vérifier rapidement le rendu, sans passer systématiquement par OBS (OBS ne recharge pas automatiquement la page)

Vous pouvez également utiliser le bouton de rafraîchissement disponible dans l’interface graphique de NodeCG, dans la partie Graphics

Faire communiquer le Dashboard et le Graphic

Ces différentes parties doivent pouvoir échanger des informations. Comme vous l’avez, les graphics et les dashboard ne partagent pas leur variables JavaScript comme ça.

Pour permettre ces échanges, NodeCG fournit deux mécanismes : les Replicants et les Messages.

Les Replicants servent principalement à partager des données entre les différentes parties de NodeCG et à s’assurer qu’elles utilisent la même information.
Les Messages (utilisés moins souvent) servent principalement à envoyer des événements ou des commandes d’une partie à une autre.

Prenons l’exemple du score :

On modifie le score dans le Dashboard qui envoie l’information au Replicant.
NodeCG avertit tous les éléments qui utilisent ce Replicant que la valeur a changé.
Le Graphic reçoit cette nouvelle information et affiche immédiatement le score mis à jour dans OBS.

Nous verrons leur fonctionnement plus en détail dans un prochain article.