| 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 cellules dépendra donc du nombre de case choisie choisi dans la 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 cellules dépendra donc du nombre de case choisie choisi dans la 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 une au uns aux autres, une un espacement entre les widgets est mise 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 "cellules" en survolant la grille en mode édition. En plus de pouvoir la grille, cela 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. |
| Panel |
|---|
|
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 qui est limitée par la largeur de la vue.
- Se compte en nombre de cellules et est définie par le paramètre "nb_tiles_in_width" qui 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 qui n'est pas limitée.
- Se compte en nombre de cellules et est définie par le paramètre "nb_tiles_in_height" qui 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 Définit la taille maximale en pixels dde l'espacement entre les widgets.
- separation_grid_element_min :
- Valeur fixe définie dans les paramètres de la grille.
- Défini Définit la taille minimale en pixels dde 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 cellules disponibles en largeur dans la grille.
| ||||||
| Nombre | 120 | Nombre de 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 minimumminimale 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 "cellulescellule" 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.
- 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 "cellulescellule"
- 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 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 cellules de haut et 5 cellules de large ( plus ou moins la comprenant l'espace de séparation entre les widgets de la grille ).
| Scroll Ignore | ||||
|---|---|---|---|---|
| ||||
| Panel | ||||
| draw.io Diagram | simpleViewer |
| ||
| diagramName | widget_positionning |
|
| |
| links | auto | |||
| tbstyle | top | |||
| lbox | true | |||
| diagramWidth | 739 | |||
| revision | 2 | |||
| Panel |
|---|
|
Pour plus d'information sur le positionnement, voir la page Concept et paramétrage de la grille - Edition Configurer un widget - Édition JSON - Météo.