Les écrans Live

Utilisez toute la puissance de Wiclax pour projeter vos résultats en temps réel.

L'application G-Live permet la conception d'écrans personnalisés qui afficheront les données de la course en temps réel, selon vos besoins. Ils seront utiles dans différentes situations :

• le public doit suivre l'évolution de la course, sur un écran géant ou sur leurs smartphones

• vous voulez mettre en avant certaines courses ou certains pointages pour le speaker

Grâce à leur conception basée sur les standards HTML et CSS ils offrent des possibilités de personnalisation infinies. Nous nous efforçons d'en rendre le maximum accessibles aisément et sans connaissances approfondies. Néanmoins certaines tâches plus complexes pourront demander une maîtrise minimale des technologies Web.

Le menu G-Live / Ecrans donne accès à tous les modèles d'écrans définis sur votre poste et à leur conception.

Les modèles d'écran peuvent être partagés via les fonctions d'import/export qui manipulent des fichiers d'extension .screenconfig. Ils peuvent également être sauvegardés et réimportés en association avec votre compte utilisateur dans le cloud.

Pour aider à découvrir certaines possibilités ou profiter de nos inspirations, pensez à jeter un œil aux exemples disponibles depuis le même menu.

Conception

L'outil de conception permet de construire un écran intégralement selon vos besoins.

Ses propriétés générales sont la couleur de fond, une dimension indicative dans le cas où l'afficheur final a une résolution fixe.

Le contenu de l'écran est ensuite bâti sur l'utilisation de "widgets".

En mode conception un aperçu de l'écran tel qu'il sera projeté est toujours disponible, rempli dans la mesure du possible avec des données de test. Vous pouvez sélectionner, déplacer, redimensionner des widgets directement depuis cet aperçu.

Les widgets

Les widgets sont des composants logiques et graphiques. On les ajoute/supprime/duplique/édite via la liste présente à droite de l'aperçu de l'écran et au panneau de propriétés en vis à vis. N'hésitez pas à leur donner un nom pour vous faciliter le travail.

Les types de widgets disponibles sont les suivants :

Horloge

Destiné à l'affichage d'un temps course ou bien de l'heure du jour. Peut être utilisé comme un compte à rebours pour une épreuve à durée déterminée - il représente dans ce cas le temps de course restant.

Label

Destiné à l'affichage d'un contenu de texte. Ce texte peut lui-même être composé de variables, qu'on insère grâce au bouton situé en contrebas. Par exemple le nombre de finishers, le nom de la course active, ...

Image

Pour l'incorporation de graphismes, par exemple le logo de la course.

Liste de résultats

Une liste de résultats permet d'afficher un tableau. Le type de liste que vous lui associez déterminera son contenu et son comportement :

• Passages récents : le tableau se remplit dynamiquement avec les données des athlètes au moment où ils franchissent une ligne de chronométrage (arrivée ou intermédiaire)

• Classement : le tableau présente les premiers d'un classement individuel, soit après arrivée soit pour un pointage intermédiaire ou encore pour un tronçon.

• Classement général : le tableau présente les premiers du classement général de l'épreuve (course à étapes)

• Classement par équipes : le tableau présente les premières équipes au classement principal par équipes, final ou pour un pointage intermédiaire/tronçon particulier

• Liste des engagés : utilisable lorsque l'épreuve/la série en cours présente un nombre limité de concurrents, le tableau présente les participants

• Concurrents au départ, Concurrents en course : spécifiques au mode contre-la-montre, le tableau liste les concurrents en fonction de leur heure de départ (éventuellement prédéfinie). Ceux attendus pour les prochains départs dans le premier cas, et ceux attendus sur la ligne d'arrivée dans le second. Leur chronomètre et leur classement virtuel s'actualise en temps réel.

• Ligne Contre-la-montre :

Un ensemble de paramètres sont disponibles pour personnaliser une liste, les principaux étant :

Nombre de lignes : le nombre maximum de lignes affichables dans le tableau

Titre : Le titre de la liste - si renseigné - se place au-dessus de celle-ci. Il peut inclure des variables. Du style CSS à lui appliquer peut être spécifié en le saisissant séparé par un point-virgule. Par exemple : Classement;font-size:120%;font-weight:bold

Colonnes : les colonnes de la liste qui sont personnalisables. Vous pouvez en ajouter/supprimer, les retailler et les réordonner. La donnée correspond à ce qui sera affiché dans cette colonne.

Comme dans le cas du titre, l'intitulé (entête) d'une colonne si on le renseigne peut être complété par une instruction de style.

Des coordonnées X,Y peuvent être renseignées en option, pour réaliser par exemple un affichage multilignes (c'est à dire plusieurs lignes de données sur une même ligne de tableau).

Filtre Hommes/Femmes : en complément du filtre général sur les courses et pointages, il est possible de demander les données spécifiquement pour les hommes ou pour les dames.

Animations : le mode défilement automatique peut être activé pour la liste. En jouant sur ses paramètres - délai entre 2 avancements, distance et direction d'avancement en pixels, vitesse d'exécution, il est possible de réaliser des animations avancées.

Mise en page : possibilité d'étalement des données sur plusieurs blocs/colonnes, organisés verticalement ou horizontalement. Et dans le cas de passages récents si on souhaite que les derniers passés soient en haut ou en bas de la liste.

Générique

Pour des besoins plus pointus, le widget générique permet d'intégrer un contenu HTML quelconque.

Styles et graphisme

Chaque widget ou colonne d'une liste peut être simplement personnalisé en spécifiant des couleurs de fond et de texte ou encore une police de caractères.

Les widgets liste peuvent être rapidement stylés en appliquant un modèle prédéfini :

Toutes les autres personnalisations seront possibles en ajoutant des règles de style CSS.

CSS

Le langage CSS (pour Cascading Style Sheet) est un standard largement documenté sur Internet. Sur un écran vous avez la possibilité d'en rajouter principalement à 3 niveaux :

• au niveau général : ici les règles peuvent s'appliquer à tous les widgets. Par exemple pour ajouter une bordure à toutes les horloges de l'écran en une seule définition

• au niveau d'un widget : les règles saisies ne s'appliqueront qu'à celui-ci

• au niveau d'une colonne d'un widget liste

Les règles peuvent s'appuyer sur les classes qui caractérisent les éléments de l'écran, que vous découvrirez plus aisément en utilisant la console de développement d'un navigateur. Par exemple une ligne de tableau qui concerne une concurrente féminine, faire clignoter une donnée pour quelqu'un de qualifié ou qui vient de battre le meilleur temps au tour... Quelques idées (simplifiées) donnant l'étendue des possibilités :

• .row.female {color: red} /* texte en rouge pour les féminines d'une liste */

• .row>div:first-child {background: yellow} /* première colonne de la liste en jaune */

• .flag {border-radius: 50%} /* des drapeaux arrondis */

• body[race='10K'] #w536453 {font-size: 200% !important} /* style d'un widget adapté lorsque la course active est le 10Km */

Les unités applicables aux éléments pour leur taille et leur position ne sont pas limitées aux pixels. En utilisant par exemple les vw et vh qui sont des pourcentages des dimensions visibles à l'écran, vous pourrez créer des contenus dits responsive, c'est à dire qui s'adaptent aux différents contextes (taille d'une TV, smartphone,...).

Les polices proposées par défaut sont les polices Google, afin de simplifier le processus de déploiement. Notamment si vos écrans doivent être accessibles sur le web.

Le rendu des écrans fait usage de la librairie Less, ce qui vous permet entre autres de déclarer des variables de style réutilisables.

La directive !important est parfois nécessaire, pour forcer l'activation d'une règle de style par rapport à une autre plus prioritaire.

Affichage, projection

Ecran seul

Le mode conception affiche l'adresse à laquelle un écran peut être chargé, depuis n'importe quel navigateur connecté au réseau local. L'adresse est celle du G-Live agrémentée de l'identifiant de l'écran demandé. Vous pouvez la copier ou demander son ouverture dans un navigateur sur le même PC.

La session de Live doit être démarrée pour qu'un écran soit accessible. En cliquant sur Ouvrir la page du live dans le menu G-Live celui-ci se lancera automatiquement et la page s'ouvrira dans un navigateur.

Le bouton rafraîchir situé à côté de l'adresse permet de remettre les écrans ouverts à jour après une modification de structure. L'équivalent d'un rechargement de la page dans le navigateur, mais déclenché depuis Wiclax.

Intégré au G-Live

Il est aussi possible d'associer un écran à un événement Wiclax, de manière à le rendre accessible à travers l'application G-Live standard. L'avantage dans ce cas est que l'adresse d'accès est unique, simplement celle du G-Live. L'association se fait depuis l'écran de mise en ligne de l'épreuve. On peut relier plusieurs écrans, et choisir si la présentation standard du Live reste proposée ou pas.

On peut aussi obtenir l'onglet Live seul via une adresse de type http://192.168.8.39/live

Sur le Web

Si l'écran live est intégré à l'événement, on peut l'obtenir seul en ajoutant l'argument live=1 à l'URL d'accès au G-Live.

Dans le cas contraire, l'adresse doit être construite sur le modèle de celle affichée par Wiclax, à adapter à l'adresse de votre site web et à sa structure. Important : le fichier de configuration de l'écran (extension .screenconfig) doit être uploadé préalablement dans le dossier public du G-Live, sur le serveur.

Les sessions de live sur le web ne fonctionneront que si l'option Services web est associée à votre licence en cours.

Projection

En règle générale un PC indépendant sera utilisé pour la transmission de l'écran vers un afficheur Led.

Cette étape, indépendante de Wiclax, consiste à transmettre l'image du navigateur Web vers l'afficheur via le logiciel et l'électronique fournis.

Il existe ensuite 2 moyens d'agir sur l'écran projeté :

• Via l'écran de contrôle qui s'ouvre lorsqu'un navigateur a chargé la page de l'écran. La fenêtre affiche une réplique de l'écran ainsi que la liste des widgets sur lesquels vous pouvez agir : les rendre visible ou invisible, modifier les courses et pointages qu'ils affichent.

• Via la télécommande intégrée à l'écran. Dans ce cas on peut agir directement depuis le navigateur sans avoir accès à Wiclax si on se trouve sur un autre poste. La télécommande s'affiche en bas à droite de la page simplement en cliquant sur l'écran.

Courses et pointages

Chaque widget de l'écran peut être indépendamment lié à une course et/ou à un pointage. Par exemple on peut vouloir afficher le classement de la course 10Km au pointage intermédiaire 2,5km.

L'affectation des courses et pointages peut être effectuée à plusieurs endroits :

• en conception, pour une pré-définition des données demandées

• depuis l'écran de contrôle de l'écran, pour une modification dynamique en fonction de l'avancement de l'épreuve

Règle d'association course/widget

La règle est la suivante : la course identifiée pour un widget est prioritairement celle qui lui est affectée. Dans le cas où il n'y en a pas à ce niveau - course du widget = toutes - alors c'est la course associée à l'écran qui est prise en compte.

Dans le cas où on ne s'intéresse qu'à une course à la fois, il sera judicieux de laisser les widgets sans filtre course et de moduler la course associée à l'écran globalement. De cette manière on pourra effectuer un changement de course en une seule opération et tous les widgets suivront.

La sélection de la course active pour l'écran se fait depuis la fenêtre de contrôle qui s'ouvre lorsque l'écran est chargé dans un navigateur :

Une liste de type classement restera vide si l'épreuve comporte plusieurs courses et qu'aucune course n'est identifiée pour le widget

L'écran ou un widget peut être associé à la course focus. Dans ce cas le passage d'une course à une autre se fera automatiquement au moment où une nouvelle course est désignée comme course focus.

Une liste de passages récents peut demander l'affichage d'une sélection multiple de courses. Par défaut, elle affichera l'ensemble des passages en direct et donc potentiellement un mélange de courses.

Dépannage

Dans le cas où une liste reste vide malgré vos essais, pensez à vérifier les points suivants :

• la liste est un classement mais aucune course n'est éligible pour le widget

• la liste concerne les passages récents : s'assurer que des passages sont présents dans l'historique pour le pointage, notamment suite à une réouverture du fichier. Éventuellement en remettre en saisissant un temps manuellement

• le filtre Hommes/Femmes peut être activé sur le widget