Versions Compared

Old Version 3

changes.mady.by.user Jroy

Saved on

compared with

New Version Current

changes.mady.by.user Soubrié Grégoire

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Make by tools (01.00.01) - action=clean_macro_parameter
Scroll Ignore
scroll-viewporttrue
scroll-pdftrue
scroll-officetrue
scroll-chmtrue
scroll-docbookhtmltruefalse
scroll-eclipsehelpdocbooktrue
scroll-epubeclipsehelptrue
scroll-htmlepubtrue
Panel
titleSommaire

Table of Contents
stylenone

Présentation

Concept

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

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

  • Sa sa taille et sa position,
  • La la position du texte,
  • Son son alignement horizontal,Son
  • son texte et la taille de son texte,
  • La la couleur de son texte.
InfoPour plus d'informations sur comment définir ces aspects, veuillez vous référer à

( voir la page

suivante :

Widget Séparateur -

Edition

É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 de le du widget "titre", et occupe toute la largeur de la vue.

Panel
titleBGColortransparent
titleExemple 1
Image Removed

Image Added

Description

Le texte

Le comportement du texte suit les règles suivantes :

  • Le le texte n'est pas limité en taille, 
    • mais s'il 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 il sera sur une seule ligne.,
  • La la taille de la police va se définir automatiquement en fonction de la largeur de la vue ( c.a.d taille 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é affichée sur toutes les tailles d'écran.
      Cela permet une meilleure intégration sur un dans le portail tiers d'un site web.
      Elle est adaptée de manière façon à pouvoir mettre environ 90 55 lettres en majuscules dans dans le texte avant que le texte du titre ne dépassecelui-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 une de taille de caractère fixe, donc suivant les lettres présentes dans votre le texte, le nombre de caractères affichés pourra être différent de 90 ( Si vous utilisez des i 55 ( pour des i minuscules par exemple ).

    • Nous avons Shinken a volontairement fait le choix de ne se baser que uniquement sur la taille de la vue et pas non celle du widget.
400
Note

Voici une liste de taille de "font" selon la taille de votre navigateur 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 Vue
Taille de la police ( en pixel ), pour un pourcentage de zoom de la police à 100%
2560
42
2856
1920
31
1939
1500
24
1530
120012
19
25
100010
16
20
8007
12
14
600
9
49
3009
info

Nous prévoyons une évolution ou vous pourrez choisir la taille de la police de référence ( prévu dans une prochaine version ).

Dans l'exemple 2:

  • la La valeur du texte du widget "séparateur" est trop longue pour qu'il puisse s'afficher en entier.
  • la La fin du titre texte est alors remplacée par "..." pour ne pas dépasser.
Panel
titleBGColortransparent
titleexemple 2
Image Removed

Image Added

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 La largeur du widget vaut 15 cases, pour un nombre totale total de 60 cases dans la vuegrille.
Panel
titleBGColortransparent
titleexemple 3

Image RemovedImage Added

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 :

Panel
titleBGColortransparent
titleAlignement du texte à gauche ( text_align: left )

Image Added

Image Removed

Panel
titleBGColortransparent
titleAlignement du texte au centre ( text_align: center )

Image AddedImage Removed

Panel
titleBGColortransparent
titleAlignement du texte à droite ( text_align: right )

Image Added

Image Removed

Dimension de la zone de texte

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

Panel

Image Added

Scroll Ignore
scroll-pdftrue
scroll-htmlfalse



Par défaut, le début et la fin du texte sont tous les deux positionnés à 10% du bord la partie gauche et droite utilise 10% chacune de la taille du widget.

Vous allez donc pouvoir choisir le pourcentage occupé par le séparateur :

  • pour le côté gauche, 
  • et le côté droit.
  • Le reste sera
donc
  • occupé par la
zone de texte.

Pour les deux exemples ci-dessous, le widget séparateur à cette configuration :

  • Il prend toute la place sur la page.
  • Le texte est aligné au centrepartie réservée au texte.

Exemple 1 : Les valeurs de la taille définies pour la zone de début et de fin du texte sont élevées ( 40 % chacune ) :partie gauche et la partie droite sont paramétrées à 37% chacune :

  • Les 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.
Panel
Image Removed

Image Added

Exemple 2 : Les valeurs de la taille définies pour la zone de début et de fin du texte sont basses ( 5 % chacune ) 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
  • widget, ne prennent qu'une petite partie de la taille de la page.
Panel

Image Added

  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.
Panel

Image Added

  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.
Panel

Image Added

Image Removed

Changement de la couleur du texte

Chaque séparateur peut avoir sa propre couleur :

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


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

Image Removed
Panel

Image Added

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

Comportement du widget lors d'un redimensionnement du navigateur

Exemples de redimensionnement

Panel
titleBGColortransparent
titleLargeur du navigateur de 1200 pixels avec une taille de texte de 29 25 pixels
Image Removed

Image Added

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 à 10 9 pixels :


Panel
titleBGColortransparent
titleLargeur du navigateur de 600 pixels avec une taille de texte de 9 pixels

Image Removed

Image Added

Affichage avec une Erreur et un Avertissement

Panel

Image Added

Note

Il existe une taille minimale pour la police d'écriture du widget séparateur qui est de 9 pixels, en dessous de cette taille, on décrète que les textes ne sont plus lisibles.