Concept

Le widget "titre" permet aux administrateurs Shinken de donner une identité à chaque météo.

Il est possible de modifier les aspects suivants du widget "titre" :

  • sa taille et sa position,
  • son texte et la taille de son texte,
  • la couleur de son texte.


Important : 

  • Ce type de widget doit être unique dans la météo, ce qui signifie qu'il peut y avoir qu'un seul widget "titre" pour chaque vue météo.
  • Il servira de nom pour la création des favoris.

( voir la page Widget Titre - Édition visuelle - Météo, pour plus d'informations sur l'édition  ).

Dans cet exemple ci-dessous, le widget "titre" se trouve en haut à gauche de l'écran.



Description

Le texte

Le comportement du texte suit les règles suivantes :

  • Le texte n'est pas limité en taille, 
    • mais s'il n'a pas la place de s'afficher, il sera tronqué ( avec une "ellipsis"   :  une série de trois petits points ) pour éviter un retour à la ligne.
  • Il sera sur une seule ligne.
  • La taille de la police va se définir automatiquement en fonction de la largeur de la vue ( Taille du navigateur, ou taille d'affichage dans un autre site web ) et du pourcentage de zoom de la police paramétré ( "font_zoom_percent" : 100 ).
    • Pour pouvoir être responsive, la taille de police du texte s'adapte à la taille de la vue afin de pouvoir être affichée sur toutes les tailles d'écran.
      Cela permet une meilleure intégration sur un portail tiers d'un site web.
      Elle est adaptée de manière à pouvoir mettre environ 55 lettres en majuscule dans le texte avant que le texte du titre ne dépasse. Si le pourcentage de zoom de la police  ( "font_zoom_percent" : 100 ) est paramétré à 100% .

      La police utilisée n'a pas une taille de caractère fixe, donc suivant les lettres présentes dans le texte, le nombre de caractères affichés pourra être différent de 55 ( pour des i minuscules par exemple ).
    • Shinken a volontairement fait le choix de ne se baser que sur la taille de la vue et pas celle du widget.

Voici une liste de taille de "font" selon la taille du navigateur 

Taille de la vue ( en pixel )Taille de la police ( en pixel ), pour un pourcentage de zoom de la police à 50%Taille de la police ( en pixel ), pour un pourcentage de zoom de la police à 100%
25602857
19202040
15001531
12001225
10001020
800714
60049

Dans l'exemple 2 :

  • La valeur du titre du widget titre est "METEO DES SERVICES COMPLETE DES DATACENTER DES VILLES DE FRANCE ET D'OUTREMER" qui est trop longues pour qu'il puisse s'afficher en entier.
  • La fin du titre est alors remplacée par "..." pour ne pas dépasser.

Dans les exemples 1 et 2, le widget "titre" est configuré pour prendre toute la largeur de l'écran ( "width" : "all" ).

Dans l'exemple 3:

  • La largeur du widget vaut 15 cases ( "width" : 15 ), pour un nombre total de 60 cases dans la grille ( "nb_tiles_in_width" : 60 ).

Changement de la couleur du texte

Le widget "titre" a sa propre couleur :

  • La couleur par défaut du texte du widget "titre" est noir ( si non précisé ),
    • mais la couleur par défaut pourra avoir été changée par l'administrateur Shinken dans la configuration du module de météo des services.


Dans l'exemple suivant, la couleur du texte est en vert ( "text_color" : "green"  ou  "text_color" : "#008000" ou  "text_color" : "rgb(0,128,0)" ).


 

( voir la page Widget Titre - Édition JSON - Météo )

Comportement du widget lors d'un redimensionnement du navigateur

Exemples de redimensionnement



Sur cette capture d'écran, la largeur du navigateur a été réduite à 600 pixels et la configuration de la météo n'a pas été changée, mais la taille de la police d'écriture est passée à 9 pixels :

Affichage avec une Erreur et un Avertissement