Comment créer un gabarit de clip météo

Un exemple de création d'un gabarit de clip météo dans l'éditeur de gabarit

 

 

Créer un nouveau gabarit
Ajouter une source de données de météo
Création du visuel

 

Créer un nouveau gabarit

Sur le Studio ITESLIVE cliquez sur l'onglet nommé paramètres et sélectionnez la gestion des gabarits.

Naviguez au dossier dans lequel vous désirez créer le gabarit et cliquez sur le bouton « nouveau gabarit ».

Avant de faire la création du visuel, il faut fournir les informations suivantes.

• Nom: Identifiant unique pour le gabarit
• Nom Anglais: Le nom qui sera affiché lorsque le Studio est utilisé en Anglais
• Nom Français: Le nom qui sera affiché lorsque le Studio est utilisé en Français
• Type: Dans ce cas-ci, nous devons sélectionner le type de gabarit nommé Météo
  
• Météo Icon set : Cliquez le bouton « Sélectionner » et sélectionnez un style d'icône qui sera utiliser pour la diffusion des conditions météorologique.
• Dimensions: La résolution du gabarit doit être identique à la résolution de la zone 
• Icône: Un fichier que vous pouvez sélectionner qui servira de "Thumbnail" pour le gabarit
• Langue: Détermine le nombre de langues disponibles dans le gabarit
• Transition de l'introduction (facultatif): L'animation de la transition utilisée pour le gabarit s'il y a une transition
• Durée la transition de l'introduction (facultatif): La durée en secondes pour la transition de l'introduction
• Durée de l'introduction: La durée en secondes pour l'introduction

Une fois que les informations ont été entrées, cliquez sur le bouton accepter.

Ajouter une source de données de Météo

Une fois que les configurations ont été appliquées, le Studio ITESLIVE ouvrira automatiquement l'éditeur de gabarit. Cliquez sur l'icône qui représente un disque dur dans le coin supérieur gauche de l'éditeur de gabarit.

Dans la fenêtre de sélection de sources de données, cliquez sur le « + » pour ajouter une nouvelle source de données.

Sélectionnez la source de données désirée, et cliquez sur le bouton « Sélectionner ».

La source de données sélectionnée sera affichée du côté droit de la fenêtre de sélection de sources de données, vous devez maintenant spécifier les configurations qui seront utilisées pour la source de données. 

• Est optionnel: Si cette case à cocher est activée, le clip météo va être diffusé même s'il n'y a pas de données. Il est donc préférable de laisser cette configuration inactive pour éviter de diffuser un clip de météo vide dans le cas où il n'y a plus de données temporairement dans le flux.
• Éléments par clip: Dans cet exemple, vous allez créer un clip qui diffuse la prévision météorologique des 3 prochains jours, il faut donc activer la case à cocher « Tout ».
• Traitements des listes vides: Vous pouvez simplement laisser cette configuration par défaut avec la valeur « Hériter » qui donnera le comportement par défaut pour les données de la météo.
• Noeud principal: Le noeud principal représente l'emplacement où les données seront situées dans le service de météo. Naviguez dans la structure de données et sélectionnez le champ suivant.
  forecast -> Days

Une fois que les configurations ont été appliquées, cliquez sur l'icône qui représente une disquette dans le coin supérieur droit de la fenêtre.

Une fois que la source de données est visible du côté gauche de la fenêtre, cliquez sur l'icône qui représente un X dans le coin supérieur droit de la fenêtre.

Création du visuel

Création d'un arrière-plan

Cliquez sur l'outil d'image dans la liste du côté gauche de l'éditeur de gabarit.

Cliquez dans l'espace blanc du gabarit et déplacez votre souris en maintenant le clic afin de placer l'outil.

Vous pouvez utiliser les cercles autour de l'outil d'image ou les contrôles pour la position et la taille de la forme pour placer l'outil. Voici les valeurs utilisés dans cet exemple.

• x: 0
• y: 0
• w (longeur): 1920
• h (hauteur): 1080

Une fois que l'outil a été placé, double-cliquez sur celui-ci afin de configurer son contenu.

Dans la fenêtre de configuration, cliquez sur l'onglet « Statique », ensuite, cliquez sur le bouton « Sélectionner ».

Sélectionnez l'image que vous désirez utiliser comme arrière-plan et cliquez sur le bouton « Sélectionner ».

Cliquez sur le bouton « Sauvegarder » pour appliquer votre sélection

Création du contenu

Assurez-vous d'ajouter un second calque, comme le contenu du gabarit sera directement au-dessus de l'arrière-plan ceci facilitera la mise à jour ou la maintenance de votre gabarit. Nous vous recommandons également d'identifier de façon claire les objets contenus dans le calque avec les noms utilisés.

Cliquez sur l'outil de liste dans la liste du côté gauche de l'éditeur de gabarit.

Cliquez dans le gabarit et déplacez votre souris en maintenant le clic afin de placer l'outil.

Vous pouvez utiliser les cercles autour de l'outil de liste ou les contrôles pour la position et la taille de la forme pour placer l'outil.

Voici les configurations appliquées sur la liste pour l'exemple que vous créez dans cet article.

• X: 0
  
• Y: 303
• W: 1920
• H: 567
• Lignes: 1
• Colonnes: 3
• Espacement horizontal: 0
• Espacement vertical: 0
• Direction des éléments: Vertical
• Méthode de défilement: Aucun
• Source de données: Météo
• Noeud principal: days (forecast -> days)

Une fois que la liste est configurée, double-cliquez sur l'outil afin de créer son contenu.

Une fois dans le contexte de la liste, vous devez encore une fois créer des calques pour les différents objets qui seront à l'intérieur de celle-ci. Pour l'exemple que vous allez créer dans cet article vous devez créer deux calques.

• Arrière-plan
• Contenu

Sélectionnez le calque nommé « Arrière-plan » et cliquez sur l'outil de forme du côté gauche de l'éditeur.

Cliquez dans le gabarit et déplacez votre souris en maintenant le clic afin de placer l'outil.

Vous pouvez utiliser les cercles autour de l'outil de liste ou les contrôles pour la position et la taille de la forme pour placer l'outil.

Une fois que l'outil a été placé, cliquez sur le contrôle pour la couleur de la forme dans le coin inférieur gauche de la fenêtre et spécifiez la couleur de la forme.

Voici les configurations appliqués pour la position et la couleur de l'arrière-plan des données de météo dans l'exemple de cet article.

• X: 0
• Y: 303
• W: 630
• H: 567
• Couleur: #097bce (format hexadécimal)

Ajoutez maintenant un calque nommé « Données ».

Sélectionnez l'outil de texte dans la liste du côté gauche de l'éditeur de gabarit.

Placez l'outil en cliquant dans le gabarit et en maintenant votre clic.

Voici les valeurs utilisées pour l'outil de texte contenant la journée.

• X: 0
  
• Y: 324
• W: 626
• H: 100
• Famille de la police: Helvetica
• Style de la police: Regular
• Taille de la police: 40 points
• Transformation du texte: Première majuscule
• Alignement horizontal du texte: Centre
• Alignement vertical du texte: Millieu
• Couleur de la police: #ffffff

Double cliquez sur l'outil par la suite pour configurer son contenu.

Cliquez sur l'icône qui représente un disque dur pour sélectionner le champ dans les données qui contient le nom de la journée.

Voici le champ à utiliser à cet endroit.

Meteo -> Days -> DayFr

Cliquez sur la liste déroulante et sélectionnez la source de données que vous aviez associée au gabarit plus tôt. Cliquez sur le champ mentionné ci-dessus, ensuite cliquez sur le bouton « Sauvegarder ».

Une fois que le champ sélectionné est visible dans la fenêtre de configuration de l'outil de texte, cliquez sur le bouton « Sauvegarder ».

Répétez ses étapes pour configurer des outils de texte avec les informations suivantes.

• Température ressentie minimum et maximum

  • X: 331
    
  • Y: 507
  • W: 295
  • H: 186
  • Famille de la police: Helvetica
  • Style de la police: Regular
  • Taille de la police: 40 points
  • Transformation du texte: Normal
  • Alignement horizontal du texte: Gauche
  • Alignement vertical du texte: Millieu
  • Couleur de la police: #ffffff
  • Contenu de l'outil de texte: MAX : [Meteo:Days.MaxTemperature]°c
    MIN : [Meteo:Days.MinTemperature]°c

Lorsque vous ajouter les champs de données pour la température minimum et maximum attendu pour la journée. Cliquez sur l'icône qui représente un disque dur pour ajouter la donnée.

Sélectionnez le champ désiré (soit le minimum ou le maximum) et cliquez sur le bouton format de nombre.

Assurez-vous que le champ « Style » est configuré à « Decimal » et que les fractions minimum et maximum sont à 0. Ceci fera en sorte que les températures ne seront pas affiché avec des virgules.

• Condition attendue pour la journée
  • X: 102
    
  • Y: 735
  • W: 426
  • H: 106
  • Famille de la police: Helvetica
  • Style de la police: Regular
  • Taille de la police: 40 points
  • Transformation du texte: Normal
  • Alignement horizontal du texte: Centre
  • Alignement vertical du texte: Millieu
  • Couleur de la police: #ffffff
  • Contenu de l'outil de texte: [Meteo:Days.Condition.ConditionFr]

Cliquez maintenant sur l'outil d'image dans la liste d'outil du côté gauche de l'éditeur de gabarit. Placez l'outil dans le gabarit en cliquant dans le gabarit et déplacez votre souris tout en maintenant votre clic.

Voici les configurations utilisées pour l'outil dans cet exemple.

• X: 102
  
• Y: 735
• W: 426
• H: 106
• Alignement horizontal: Centre
• Alignement vertical: Milieu
• Méthode de redimension: Contenir

Double-cliquez maintenant sur l'outil pour configurer son contenu, une fois dans la fenêtre de configuration de l'outil cliquez l'onglet « Externe ».

Cliquez sur la liste déroulante et sélectionnez la source de données « Meteo », ensuite sélectionnez le champ suivant dans la liste d'information en dessous de la liste déroulante.
forecast -> Days -> Condition -> IconPath

Finalement, cliquez sur le bouton « Sauvegarder » pour appliquer la sélection du champ.

Pour retourner au contexte du gabarit, cliquez sur le nom du gabarit dans le coin supérieur gauche de l'éditeur.

Cliquez sur l"outil de texte dans la liste d'outil du côté gauche de l'éditeur de gabarit et placez-le en cliquant dans le gabarit et en déplaçant votre souris tout en maintenant le clic.

Voici les configurations de l"outil pour cet exemple.

• X: 208
  
• Y: 99
• W: 1400
• H: 119
• Famille de la police: Helvetica
• Style de la police: Gras (Bold)
• Taille de la police: 74 points
• Transformation du texte: Majuscules
• Alignement horizontal du texte: Gauche
• Alignement vertical du texte: Millieu
• Couleur de la police: #ffffff
• Maximum de lignes à afficher: 1
• Espacement entre les charatères: -10
• Rayon de la bordure: 100
• Couleur du texte: #ffffff
• Couleur de l'arrière-plan: #097bce

Pour que l'arrière-plan de l'outil de texte couvre l'ensemble de l'espace derrière le texte, vous devez cliquer sur le bouton « Espacement » dans le haut de l'éditeur.

Entrée les informations suivantes pour configurer l'espacement de l'arrière-plan de l'outil de texte.

• Haut: 20
• Bas: 20
• Gauche: 80 
• Droite: 80

Cliquez sur le bouton « Ok » pour appliquer vos modifications.

Double cliquez maintenant sur l'outil pour configurer son contenu, une fois que la fenêtre de configuration de l'outil est ouverte, entrez le texte suivant pour l'entête.

Météo

Une fois que le texte est visible dans la fenêtre de configuration, cliquez sur le bouton « Sauvegarder ».

Finalement, sauvegardez le gabarit en cliquant sur l'icône sous forme de disquette dans le coin supérieur gauche de l'éditeur.

Voici un exemple du visuel final diffusé lorsque le gabarit est utilisé dans un affichage.