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 cellules dépendra donc du nombre de case choisie dans la paramétrage de la grille ( le paramètre nb_tiles_in_width )
    • => Largeur de la météo en pixel / 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 une au autres, une espacement entre les widgets est mise 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.

En plus de pouvoir la grille, 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éfini la taille maximale en pixels d'espacement entre les widgets.

    • separation_grid_element_min :
      • Valeur fixe définie dans les paramètres de la grille.
      • Défini la taille minimale en pixels d'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 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 cellules disponibles en largeur dans la grille

Ce paramètre permet de définir la taille de vos 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 le navigateur a une taille de 1200 pixels, chaque cellule sera donc un carté de 20 pixels sur 20 pixels ( =1200 / 60 )




nb_tiles_in_height


Nombre 120

Nombre de cellules disponibles en hauteur dans la grille.

Si toute la hauteur disponible n'est pas utilisée lors de la configuration de votre météo, seulement la partie utilisée sera affichée.

La totalité s'affichera uniquement lorsque vous serez en train d'éditer la météo.



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 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 minimum de la séparation ( en pixels ) entre deux widgets. Quelle que soit la taille 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 "cellules" 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 "cellules"
    • ce qui signifie qu'un widget de hauteur 2 et de largeur 5, fera 2 cellules de haut et 5 cellules de large ( plus ou moins la séparation entre les widgets de la grille ).









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