Présentation

Pour organiser les widgets, la météo des services se repose sur un système de grille où sont disposés de manière ordonnée les différents widgets.

Description

La grille est conçue pour faciliter le placement des éléments sur la vue ( appelés des widgets ).

  • Elle va automatiquement prendre 100% de la largeur de la vue
    • La taille des cases dépendra donc du nombre de case choisi dans le paramétrage de la grille ( le paramètre nb_tiles_in_width )
    • => Largeur de la météo en pixels / nombre de cases => largeur d'une casse.
    • => les cases sont des carrés donc la largeur équivaut à la hauteur.
  • La largeur de la grille est donc limitée par la largeur de la vue, en revanche, sa hauteur n'est pas limitée.
  • Pour éviter que les widgets soient collés, les uns aux autres, un espacement entre les widgets est mis automatiquement
    • Il est calculé en fonction de la largeur de la vue, mais peut être ajusté dans les paramètres de la grille.




La grille n'est pas visible, en revanche, il est possible de visualiser les cases en survolant la grille en mode édition.

Cela permet de connaître les coordonnées d'une case à l'emplacement du curseur, ce qui est utile pour configurer les widgets de la météo.



Voici comment sont calculés les différents aspects de la grille :

  • Largeur de la grille :
    • Se compte en nombre de cases et est définie par le paramètre nb_tiles_in_width qui est limitée par la largeur de la vue.

  • Hauteur de la grille :
    • Se compte en nombre de cases et est définie par le paramètre nb_tiles_in_height qui n'est pas limitée.

  • Espacement entre les widgets : Cette valeur est calculée grâce à plusieurs facteurs :
    • separation_grid_element_max :
      • Valeur fixe définie dans les paramètres de la grille.
      • Définit la taille maximale en pixels de l'espacement entre les widgets.

    • separation_grid_element_min :
      • Valeur fixe définie dans les paramètres de la grille.
      • Définit la taille minimale en pixels de l'espacement entre les widgets.

    • separation_grid_element_percent :
      • Représente un pourcentage fixe de la largeur de la vue ( par exemple 1% de 1200 pixels = 12 pixels ).
      • C'est cette valeur qui est prise comme espacement par défaut entre les widgets, mais elle doit rester entre "separation_grid_element_max" et "separation_grid_element_max".
      • Si la valeur n'est pas entre ces deux paramètres, alors elle est ramenée au min ou au max ( à la plus proche ).


Paramètres de la grille

Pour éditer le contenu de la vue météo, il est possible de modifier les paramètres de la grille, afin de personnaliser la taille et l'affichage de la grille

Description des paramètres

...
"grids" : [
      {
          "nb_tiles_in_width": 60, 
          "nb_tiles_in_height": 50,
          "separation_grid_element_max": 20,
	      "separation_grid_element_min": 10, 
	      "separation_grid_element_percent": 1,
          "type": "grid"
      ...
NomTypeDéfautCommentaire
nb_tiles_in_width
Nombre 60

Nombre de cases disponibles en largeur dans la grille

Ce paramètre permet de définir la taille de vos cases, en largeur et en hauteur.

La largeur et la hauteur de chaque case sera donc de la largeur de l'écran divisé par "nb_tiles_in_width"

Par exemple si la page du navigateur a une taille ( largeur )  de 1200 pixels, chaque case sera donc un carré de 20 pixels sur 20 pixels ( =1200 / 60 )



nb_tiles_in_height
Nombre 120

Nombre de cases disponibles en hauteur dans la grille.

separation_grid_element_percent
Pourcentage 0.5 Pourcentage de la largeur de la page à utiliser pour calculer la taille de la séparation entre deux widgets ( avec au minimum separation_grid_element_min et au maximum separation_grid_element_max ).
separation_grid_element_max
Nombre unlimited

Taille maximale de la séparation ( en pixels ) entre deux widgets. Quelle que soit la taille de la page du navigateur, la largeur de la séparation entre deux widgets ne pourra pas dépasser cette valeur.

La valeur unlimited indique qu'il n'y a pas de valeur maximum

separation_grid_element_min
Nombre 0 Taille minimale de la séparation ( en pixels ) entre deux widgets. Quelle que soit la taille de la page du navigateur, la largeur de la séparation entre deux widgets ne pourra pas être en dessous de cette valeur.
type
Texte grid

Type de la grille.

Ne pas changer.

Positionnement des widgets sur la grille

Comment est positionné un widget

Pour tous les widgets, il est possible de configurer leur taille et leur positionnement sur la grille.

  • L’unité du positionnement des widgets est en case et la position du widget est calculée avec son point "le plus en haut à gauche".
    • Cela signifie que ce point du widget sera positionné sur la case aux coordonnées X, Y de la grille.

  • La hauteur et largeur d'un widget sont aussi calculées en case
    • ce qui signifie qu'un widget de hauteur 2 et de largeur 5, fera 2 cases de haut et 5 cases de large ( comprenant l'espace de séparation entre les widgets de la grille ).



Pour plus d'information sur le positionnement voir la page Concept et paramétrage des widgets - Edition - Météo