| Scroll Ignore | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||
|
Concept
Le widget séparateur permet d'organiser les autres widgets dans la météo.
- Il peut par exemple être utilisé pour définir des sections ou des groupes de widget météo.
( voir la page Widget Séparateur - Détail - Météo )
Description
Pour le widget séparateur, il faut configurer :
- Sa position dans la grille et sa taille.
- Le texte à afficher
Les options du widget séparateur
- Sa partie gauche :
- l'afficher ou la cacher,
- la taille ( en pourcentage ) que prendra la zone affichée dans le widget.
- Sa partie réservée au texte :
- l'alignement du texte,
- la couleur du texte,
- le pourcentage du zoom de la taille de la police.
- Sa partie droite :
- l'afficher ou la cacher,
- la taille ( en pourcentage ) que prendra la zone affichée dans le widget.
Configuration
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
...
"grid_elements": [
{
"position_x": 0,
"position_y": 3,
"width" : "all",
"height" : 2,
"content" : {
"type" : "separator_widget",
"layout" : {
"information_to_display" : {
"left_area" : {
"displayed" : true,
"width_percent" : 10
},
"title_area" : {
"label" : "DATACENTER France",
"font_zoom_percent" : 100,
"text_color" : "#000000",
"text_align" : "center"
},
"right_area" : {
"displayed" : true,
"width_percent" : 10
}
}
}
}
}
]
... |
Positionnement et dimensionnement
Pour plus d'explication, regarder la page de configuration d'un widget ( voir la page Configurer un widget - Édition JSON - Météo ).
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
...
"grid_elements": [
{
"position_x": 0,
"position_y": 3,
"width" : "all",
"height" : 2,
...
}
]
... |
| Nom | Type | Défaut | Commentaire | ||
|---|---|---|---|---|---|
| Numéro de cellule | --- | Abscisse du point "le plus en haut à gauche" d'un widget :
| ||
| Numéro de cellule | --- | Ordonnée du point "le plus en haut à gauche" d'un widget :
| ||
| Nombre de cellules | --- | Correspond à la largeur du widget :
Si le paramètre "width" n'est pas présent dans la configuration du widget, c'est comme s'il valait "default". | ||
| Nombre de cellules | --- | Correspond à la hauteur du widget :
Si le paramètre "height" n'est pas présent dans la configuration du widget, c'est comme s'il valait "default". |
Contenu du widget séparateur
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
...
"grid_elements": [
{
...
"content" : {
"type" : "separator_widget",
"layout" : {
"information_to_display" : {
"left_area" : {
...
},
"title_area" : {
...
},
"right_area" : {
...
}
}
}
}
}
]
... |
| Nom | Type | Défaut | Commentaire | ||
|---|---|---|---|---|---|
| String | - | Type du widget, dans le cas du widget séparateur ce paramètre doit être obligatoirement défini à la valeur : separator_widget. | ||
| Clé | - | La clé layout permet de gérer la disposition et l'affichage du widget. Seul la clé information_to_display pour le widget de type separator_widget peut être renseigné. | ||
| Clé | - | La clé information_to_display doit être renseigné dans la clé layout. Elle permet de paramétrer l'affichage des différentes zones du widget. En l'occurrence : left_area, title_area et right_area. | ||
| Panel |
|---|
|
La zone de gauche ( left_area )
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
...
"grid_elements": [
{
...
"content" : {
...
"layout" : {
"information_to_display" : {
"left_area" : {
"displayed" : true,
"width_percent" : 10
},
...
}
}
}
}
]
... |
| Nom | Type | Défaut | Commentaire | ||
|---|---|---|---|---|---|
| Booléen | true | Affichage ou non de la zone de gauche.
| ||
| Integer | 10 | Pourcentage du widget occupé par la zone de gauche. Doit être compris entre 0 et 100
|
La zone de titre ( title_area )
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
...
"grid_elements": [
{
...
"content" : {
...
"layout" : {
"information_to_display" : {
...
"title_area" : {
"label" : "DATACENTER FRANCE",
"font_zoom_percent" : 100,
"text_color" : "000000",
"text_align" : "center"
},
...
}
}
}
}
]
... |
| Nom | Type | Défaut | Commentaire | ||||
|---|---|---|---|---|---|---|---|
| String | - | Texte affiché dans le widget. Doit obligatoirement être défini.
| ||||
| Integer | 100 | Zoom en pourcentage de la taille de la police.
| ||||
| Couleur Web | #000000 | Couleur d'affichage du texte.
| ||||
| String | center | Alignement du texte.
|
La zone de droite ( right_area )
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
...
"grid_elements": [
{
...
"content" : {
...
"layout" : {
"information_to_display" : {
...
"right_area" : {
"displayed" : true,
"width_percent" : 10
}
}
}
}
}
]
... |
| Nom | Type | Défaut | Commentaire | ||
|---|---|---|---|---|---|
| Booléen | true | Affichage ou non de la zone de droite.
| ||
| Integer | 10 | Pourcentage du widget occupé par la zone de droite. Doit être compris entre 0 et 100
|
Exemple
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
...
"grid_elements": [
{
"position_x" : 0,
"position_y" : 2,
"width" : "all",
"height" : 2,
"content" : {
"type" : "separator_widget",
"layout" : {
"information_to_display" : {
"left_area" : {
"displayed" : true,
"width_percent" : 10
},
"title_area" : {
"label" : "DATACENTER FRANCE",
"font_zoom_percent" : 100,
"text_color" : "#030303",
"text_align" : "center"
},
"right_area" : {
"displayed" : true,
"width_percent" : 10
}
}
}
}
}
]
... |
| Panel |
|---|
|
