Jouer des habillages OGraf avec AppSport¶

AppSport héberge vos modèles OGraf sur le poste de régie. Une source navigateur OBS ou vMix affiche les animations et reçoit les données du match ouvert dans AppSport.

À la fin de ce guide : votre sortie transparente dispose d’une URL fixe, un bouton SYNTHE joue un modèle et ses champs suivent le match.

Avant de commencer : utilisez AppSport avec une sortie OGraf disponible, votre projet .appsport et les écrans web correspondants. Préparez un modèle OGraf et l’ensemble de ses ressources. OGraf est un format de graphismes web de diffusion défini par l’EBU.

Préparer les cartes du championnat dans un navigateur¶

Vous pouvez configurer OGraf depuis le site sans AppSport et sans connexion au serveur OGraf. La connexion au site et les droits de gestion du championnat restent nécessaires.

1. Ouvrez Championnat → Modifier le championnat → Sources → LIVE OUTPUT → Configurer. L’adresse peut être /futsal/match?championship_id=7&section=pre_live : l’absence de match_id indique la configuration commune aux matchs.
2. Cliquez sur le bouton à préparer, puis choisissez Type → OGraf dans sa carte. Logiciel de sortie → OGraf permet aussi de choisir ce type pour les nouvelles cartes.
3. Renseignez le Nom, le Calque (1–99) et les commandes des trois gestes.
4. Dans Modèle OGraf, saisissez le fichier tel qu’il sera installé sous SOURCE/TEMPLATES/OGRAF en régie : score.ograf.zip, score.ograf ou score/score.ograf.json, par exemple. Le chemin doit être relatif à ce dossier. Nom de sortie cible une connexion AppSport précise ; vide, il utilise la première sortie OGraf activée.
5. Si vous connaissez le manifeste, renseignez son Nombre d’étapes : 3 pour les étapes 0, 1, 2 ; 0 pour un modèle autonome ; -1 pour un nombre dynamique. Laisser ce champ vide reporte la vérification au modèle installé dans AppSport.
6. Dépliez Données du modèle pour saisir les valeurs fixes et associations, puis cliquez sur Enregistrer les cartes.

La liste des modèles et leurs champs ne peut pas être consultée sans le serveur de régie. Utilisez les noms de champs fournis par l’auteur du modèle. Valeurs fixes (JSON) accepte un objet, par exemple {"home":"Paris","score":0}. Associations (JSON) relie les champs aux données disponibles, par exemple {"score":"export.HOME_SCORE"} pour le score domicile au futsal. Les variables disponibles dépendent du sport et du bouton.

Un même bouton peut mélanger les cartes vMix, CasparCG et OGraf grâce au champ Type, dans le navigateur comme dans AppSport. L’enregistrement sur le site accepte jusqu’à 64 cartes par bouton, dont 32 OGraf. Il conserve les noms des cartes et des sorties, la référence du modèle, les commandes et les données. Cliquez sur ? pour consulter l’aide d’un champ. Voir une configuration de cartes mixtes.

Le package OGraf n’est pas transféré : installez ses fichiers dans le projet de régie comme indiqué ci-dessous.

Dans AppSport, ouvrez ensuite le match avec une sortie OGraf activée. Les cartes du site retrouvent la connexion indiquée dans Nom de sortie, ou la première sortie OGraf activée si ce champ est vide, et le modèle grâce au chemin saisi. Gardez le même nom et le même emplacement du fichier. Utilisez Tester avec une source OBS/vMix ouverte pour valider le rendu et les étapes.

Une configuration propre au match remplace les cartes du championnat pour ce bouton, y compris si elle est vide. Les anciennes cartes propres au match, une sauvegarde explicite locale dans AppSport ou une association OGraf locale déjà existante gardent leur priorité. Jouer une carte du site ne crée pas cette exception locale : les changements web seront repris à la prochaine ouverture du match. Vous pouvez cibler plusieurs sorties en renseignant leurs noms dans le navigateur ou en les choisissant dans AppSport.

1. Installer les modèles dans votre projet¶

1. Dans AppSport settings → Project, vérifiez les dossiers Source et Cache.
2. Placez les modèles dans Source\TEMPLATES\OGRAF. Avec un dossier Source nommé SOURCE, cela donne SOURCE\TEMPLATES\OGRAF.
3. Conservez les images, polices, scripts et autres fichiers du modèle avec celui-ci.

Le catalogue accepte les archives .ograf.zip ou .ograf, ainsi que les dossiers contenant un manifeste .ograf.json. Un titre vMix .gtzip doit être converti avant d’être utilisé comme modèle OGraf.

Les fichiers du modèle sont préparés dans le cache. Ils doivent rester disponibles dans Source pour un prochain chargement ou une actualisation du catalogue.

2. Démarrer la sortie¶

1. Ouvrez Configuration → AppSport settings… → Outputs.
2. Sélectionnez une connexion ou cliquez sur + Add.
3. Renseignez Output name, par exemple OGraf principal.
4. Activez Output enabled, puis choisissez Software → OGraf-server.
5. Conservez Output port → 18767 pour votre première sortie, ou choisissez un port disponible.
6. Cliquez sur Save to .appsport pour appliquer et conserver ces réglages.
7. Dans OGraf templates, utilisez Templates folder puis Refresh templates si nécessaire.
8. Vérifiez Running et le nombre de modèles détectés.

Chaque serveur OGraf ajouté doit utiliser un port distinct. Plusieurs pages ouvrant une même sortie utilisent son URL et ses calques ; elles affichent le même programme.

3. Copier l’URL dans OBS ou vMix¶

1. Dans Output IP address, choisissez This computer · 127.0.0.1 si OBS ou vMix tourne sur le PC AppSport.
2. Cliquez sur Copy URL.
3. Collez-la dans une source navigateur OBS ou une entrée Web Browser vMix.
4. Réglez la taille et la cadence selon le modèle et la régie. Pour un modèle en Full HD à 50 images/s, utilisez 1920 × 1080 et 50 images/s.
5. Gardez la source chargée lorsqu’elle est masquée pour conserver ses ressources préparées.

L’URL locale par défaut est http://127.0.0.1:18767/ograf/output.html. Elle reste identique lorsque vous changez de match, tant que vous conservez ce port.

La page est transparente. Aucun habillage n’est visible avant une commande In : ouvrez un match et testez une carte à l’étape suivante.

Pour un autre ordinateur de la régie¶

Choisissez l’adresse réseau du PC AppSport dans Output IP address, puis copiez cette URL sur le second PC. 127.0.0.1 désigne toujours le PC qui ouvre la page.

L’adresse réseau doit être joignable et le port OGraf autorisé par le pare-feu de la régie. Vous pouvez ouvrir plusieurs lecteurs, localement ou sur le réseau. Ils chargent les ressources et réalisent chacun leur rendu dans leur navigateur.

Protéger l’accès à la sortie¶

Utilisez un réseau de régie de confiance. La sortie et ses médias sont accessibles aux postes pouvant joindre ce port, et le transport HTTP n’est pas chiffré. N’exposez pas le port OGraf sur Internet par une redirection de votre routeur. Si une règle de pare-feu est nécessaire, limitez-la au port de la sortie et aux postes ou au réseau de la régie.

Un modèle OGraf contient du JavaScript exécuté dans le navigateur de sortie. Installez uniquement des modèles provenant d’une source de confiance et testez-les hors antenne avant de les utiliser.

4. Relier les données et les images¶

1. Ouvrez un match dans AppSport, avec Project → Generator coché pour le direct. Le guide AppSport explique ce réglage et la génération des projets.
2. Passez en édition depuis le badge Live Output et cliquez sur le bouton SYNTHE à configurer.
3. Ajoutez une carte de Type → OGraf, choisissez votre Sortie, le Modèle OGraf et son Calque.
4. Dépliez Données du modèle.
5. Vérifiez les associations Automatique. Un champ nommé T2_FULL, par exemple, peut reprendre la variable du même nom sans réglage supplémentaire.
6. Pour un champ différent, choisissez une variable dans sa liste. Pour une donnée constante, choisissez Valeur fixe et renseignez Valeurs fixes (JSON).
7. Cliquez sur Enregistrer les cartes.

Les variables disponibles suivent le sport, le match et le bouton. Consultez le catalogue des variables pour leurs noms et leur contenu.

Les textes associés sans valeur deviennent vides et les images manquantes deviennent transparentes. Les nombres, booléens et listes associés reçoivent respectivement 0, false et une liste vide. Une valeur fixe garde le contenu que vous avez configuré.

Vérifier les données en temps réel¶

Les changements de données reçus par la page de match sont regroupés brièvement puis transmis aux sorties OGraf connectées. Une vérification périodique complète cette transmission, notamment pour le chrono et les fichiers remplacés sous le même nom. Une mise à jour de score ou de texte conserve l’étape du modèle : elle ne relance pas son animation d’entrée.

Pour vérifier cette liaison hors antenne :

1. Affichez le modèle avec In, puis modifiez une donnée du match.
2. Vérifiez que le champ utilise Automatique ou la bonne variable, plutôt que Valeur fixe.
3. Contrôlez la nouvelle valeur dans la sortie sans cliquer à nouveau sur In.
4. Si elle reste figée, vérifiez Project → Generator, les droits de modification du match et la connexion du lecteur. Attendez aussi la fin du chargement des données après l’ouverture du match.

La cadence de rendu, par exemple 50 images/s, concerne les animations. Elle ne signifie pas que le score est transmis 50 fois par seconde. Une sortie surchargée ou un lecteur réseau lent peut retarder les mises à jour.

Images du projet et séquences¶

Les images peuvent venir des ressources du modèle, de Source ou du Cache du projet. Un chemin relatif tel que IMAGES/GRAPHICS/LOGO/D1/D1_00000.png est recherché dans les ressources locales du projet. AppSport fournit une URL accessible à la sortie, y compris sur un autre PC.

Conservez les dossiers et les noms attendus par vos variables. Un chemin local vers un autre disque du poste n’est pas automatiquement accessible au lecteur réseau : placez la ressource dans Source ou Cache.

Les séquences d’images prises en charge par les modèles convertis sont préparées avant leur lecture. Un modèle OGraf natif doit lui-même prévoir la lecture de ses séquences ; afficher un PNG dans un simple champ image ne crée pas une animation.

5. Tester In, Next et Out¶

1. Choisissez Clic gauche → In, puis cliquez sur Tester hors antenne.
2. Contrôlez le modèle, les textes, les images et le bon calque dans la sortie.
3. Préparez la conduite souhaitée : In, Next, Out, Aller à une étape, Suite d’actions, Alterner In / Out ou In / Next / Out automatique.
4. Enregistrez les cartes et quittez le mode édition.
5. Testez les clics et la séquence complète depuis le bouton du match.

Le guide des boutons Live Output propose une séquence avec un clic d’entrée et un clic de sortie. Deux modèles peuvent être superposés sur deux calques ; un calque accueille un seul habillage à la fois.

Lire le tally du bouton¶

Le tally du bouton de match s’allume dès que le lecteur OGraf rend le calque visible, pendant l’animation d’entrée. Il reste allumé pendant une sortie animée et s’éteint lorsque le lecteur masque ou efface le calque. Le chargement initial, effectué sur un calque masqué, ne l’allume pas. Une commande refusée rétablit l’état précédent.

Ce tally indique la visibilité du calque dans le lecteur OGraf. Si le modèle masque lui-même son contenu ou prévoit un délai interne, le calque peut rester déclaré visible. Pour vérifier la présence réelle à l’antenne, contrôlez également le programme dans OBS ou vMix.

Si le tally attend encore la fin de l’entrée après une mise à jour, rechargez hors antenne la page de match et la source navigateur OBS/vMix afin qu’elles utilisent le lecteur et l’interface à jour.

Comprendre les étapes du modèle¶

Le Step model décrit les états prévus par le modèle OGraf. La première étape porte le numéro 0. Le nombre d’étapes est indiqué par stepCount dans son manifeste.

Avec deux étapes, le cycle est donc In → étape 0, Next → étape 1, puis Out. Une étape peut conserver une animation en mouvement : elle attend une commande pour changer d’état.

Pour sauter une étape, utilisez Aller à une étape avec son numéro, ou Suite d’actions → in, goto:2, out : un clic pour l’étape 0, un clic pour l’étape 2, puis un clic pour la sortie. Le modèle doit annoncer au moins trois étapes, ou un nombre dynamique. Voir les réglages et la capture de la suite.

Les numéros commencent à 0 et Out reste une commande distincte. goto:2 demande directement l’état 2, avec la transition prévue par le modèle ; cette demande n’impose pas le détail des images de son animation. Un nombre d’étapes fixe limite les numéros de 0 à stepCount - 1.

Les étapes du modèle et les cartes du bouton sont deux réglages distincts. Next dans la commande OGraf avance dans le modèle ; Next, AutoNext, Break et Reset dans Action séquence règlent l’enchaînement des cartes. Consultez Choisir la suite des cartes.

Préparer la lecture avant l’antenne¶

Gardez la source navigateur ouverte, puis testez les modèles et leurs séquences avant le direct. Le premier chargement prépare les ressources ; les lectures suivantes réutilisent celles déjà disponibles. Une résolution élevée, plusieurs lecteurs et de longues séquences consomment des ressources sur chaque poste de rendu.

Recharger le même match conserve la lecture et ses dernières données. Changer de match, de projet ou quitter la page de match réinitialise les habillages.

Restart server est disponible dans AppSport settings → Outputs. L’URL reste la même et les lecteurs se reconnectent. Les habillages visibles sont coupés : relancez les boutons nécessaires après le redémarrage.

Dépannage¶

Sauvegardez Source, cache\OGRAF et cache\LIVEOUTPUT avec votre fichier .appsport. Les modèles et les cartes locales ne sont pas transférés automatiquement à un autre poste. Les cartes préparées dans le navigateur restent sur le site ; chaque poste AppSport doit disposer des modèles correspondants.