Concept

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 cellules 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 "cellules" en survolant la grille en mode édition.

Cela permet de connaître les coordonnées d'une cellule à 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 cellules 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 cellules 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_min et separation_grid_element_max.
      • Si la valeur n'est pas entre ces deux paramètres, alors elle est ajustée pour être 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. Il est possible d'éditer ces paramètres avec l'édition visuels ( voir la page Configurer la grille - Édition visuelle - Météo )

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 cellules disponibles en largeur dans la grille.

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

La largeur et la hauteur de chaque cellule 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 cellule sera donc un carré de 20 pixels sur 20 pixels ( =1200 / 60 )

Limité à 300 maximum.



nb_tiles_in_height
Nombre 120

Nombre de cellules disponibles en hauteur dans la grille.

Limité à 1000 maximum.

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.

Peu importe 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 "cellule" 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 cellule aux coordonnées X, Y de la grille.

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



Pour plus d'information sur le positionnement, voir la page Configurer un widget - Édition JSON - Météo.