Concept

Le widget séparateur a pour but de faire de la mise en forme de la vue "Météo des services".

Il est possible de modifier les aspects suivants du widget séparateur :

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

( voir la page Widget Séparateur - Édition visuelle - Météo, pour plus d'information sur l'édition )

Dans l'exemple ci-dessous, le widget séparateur est juste en dessous du widget "titre", et occupe toute la largeur de la vue.

Description

Le texte

Le comportement du texte suit les règles suivantes :

  • le texte n'est pas limité en taille, 
    • mais si le texte 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é.
    • 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 dans le portail d'un site web.
      Elle est adaptée de façon à pouvoir mettre environ 55 lettres en majuscules dans le texte avant que celui-ci ne dépasse ( si le pourcentage de zoom de la police est paramétré à 100% et que la taille de la partie gauche et droite font 10% de la vue ).

      La police utilisée n'a pas de 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 se baser uniquement sur la taille de la vue et non 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%
25602856
19201939
15001530
12001225
10001020
800714
60049

Dans l'exemple 2:

  • La valeur du texte du widget "séparateur" est trop longue pour qu'il puisse s'afficher en entier.
  • La fin du texte est alors remplacée par "..." pour ne pas dépasser.

Dans les exemples 1 et 2, le widget "séparateur" est configuré pour prendre toute la largeur de la vue.

Dans l'exemple 3:

  • La largeur du widget vaut 15 cases, pour un nombre total de 60 cases dans la grille.

Changement de l'alignement du texte

Le texte peut être aligné :

  • au centre ( Par défaut ),
  • à gauche,
  • à droite.


Les 3 exemples ci-dessous montrent les 3 différents positionnements :

Dimension de la zone de texte

Le widget "séparateur" est divisé en trois parties : 



Par défaut, la partie gauche et droite utilise 10% chacune de la taille du widget. Le reste sera occupé par la partie réservée au texte.

Exemple 1 : Les valeurs de la taille définies pour la partie gauche et la partie droite sont paramétrées à 37% chacune :

  • Les barres de séparations, se situant des deux côtés du texte du Widget, prennent la majeure partie de la taille de la page.

Exemple 2 : Les valeurs de la taille définies pour la partie gauche et la partie droite sont paramétrées à 5% chacune :

Dans cet exemple, les barres de séparations, se situant des deux côtés du texte du widget, ne prennent qu'une petite partie de la taille de la page.

  Exemple 3 : La partie de gauche n'est pas affichée et la valeur de la taille de la partie droite est paramétrée à 70% :

Dans cet exemple, seule la barre de séparation se situant du côté droit du texte du widget prend une grande partie de la taille de la page.

  Exemple 4 : La partie de droite n'est pas affichée et la valeur de la taille de la partie de gauche est paramétrée à 70% :

Dans cet exemple, seule la barre de séparation se situant du côté gauche du texte du widget prend une grande partie de la taille de la page.

Changement de la couleur du texte

Chaque séparateur peut avoir sa propre couleur :

  • La couleur par défaut du texte du widget "séparateur" est noir ( si non précisé ),
    • mais la couleur par défaut pourra être 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 Séparateur - É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