| Scroll Ignore | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||
|
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 cases 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 taille des cases cellules dépendra donc du nombre de case choisi dans le paramétrage de la grille ( le paramètre nb_tiles_in_width ) :
- 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.
| Panel |
|---|
|
| Scroll Ignore | ||||
|---|---|---|---|---|
| ||||
| Info |
|---|
La grille n'est pas visible, en revanche, il est possible de visualiser les cases en "cellules" en survolant la grille en mode édition. Cela permet de connaître les coordonnées d'une case cellule à l'emplacement du curseur, ce qui est utile pour configurer les widgets de la météo. |
| Panel |
|---|
|
Voici comment sont calculés les différents aspects de la grille :
- Largeur de la grille :
- Se compte en nombre de cases cellules et est définie par le paramètre nb_tiles_in_width qui est limitée par la largeur de la vue.
- Se compte en nombre de cases 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 cases cellules et est définie par le paramètre nb_tiles_in_height qui n'est pas limitée.
- Se compte en nombre de cases 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_max" et "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 ).
- separation_grid_element_max :
| Panel |
|---|
|
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
| Code Block | ||||
|---|---|---|---|---|
| ||||
...
"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"
... |
| Nom | Type | Défaut | Commentaire | ||||||
|---|---|---|---|---|---|---|---|---|---|
| Nombre | 60 | Nombre de cases cellules disponibles en largeur dans la grille.
| ||||||
| Nombre | 120 | Nombre de cases cellules disponibles en hauteur dans la grille.
| ||||||
| 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 ). | ||||||
| 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. | ||||||
| Nombre | 0 | Taille minimale de la séparation ( en pixels ) entre deux widgets. Quelle que soitPeu 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. | ||||||
| Texte | grid | Type de la grille. Ne pas changer. |
| Anchor | ||||
|---|---|---|---|---|
|
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 "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 case cellule aux coordonnées X, Y de la grille.
- Cela signifie que ce point du widget sera positionné sur la case cellule aux coordonnées X, Y de la grille.
- La hauteur et largeur d'un widget sont aussi calculées en case"cellule"
- ce qui signifie qu'un widget de hauteur 2 et de largeur 5, fera 2 cases cellules de haut et 5 cases cellules de large ( comprenant l'espace de séparation entre les widgets de la grille ).
- ce qui signifie qu'un widget de hauteur 2 et de largeur 5, fera 2 cases cellules de haut et 5 cases cellules de large ( comprenant l'espace de séparation entre les widgets de la grille ).
| Scroll Ignore | ||||
|---|---|---|---|---|
| ||||
| Panel |
|---|
|
Pour plus d'information sur le positionnement, voir la page Concept et paramétrage des widgets - Edition Configurer un widget - Édition JSON - Météo.