| Scroll Ignore | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||
|
Concept
Pour éviter Le widget séparateur permet d'avoir à configurer toutes les valeurs, la plupart des champs de configuration utilisent une configuration par défaut.
- Le premier niveau est défini par l'administrateur Shinken dans des fichiers de configuration, qui sera utilisé pour toutes les météos.
( voir la page Configuration de la disposition par défaut des widgets - webui-module-service-weather )
- Le deuxième niveau se situe au niveau de la météo pour définir le comportement du widget séparateur pour cette météo uniquement.
Définir les valeurs par défaut du widget "séparateur" dans une météo
Dans le chapitre "layouts" de la grille, il suffit de définir / compléter le chapitre "separator_widget_layout" :
- il faut seulement définir les valeurs pour lesquels on souhaite mettre un paramètre par défaut;
- certains paramètres ne peuvent pas avoir de valeur par défaut :
- position_x,
- position_y,
- type,
- label.
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": [ { ... ], "layouts "content" : { ... "layout" : { "separator_widget_layoutinformation_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, "heightwidth" : "defaultall", "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#030303", "text_align" : "center" }, "right_area" : { "displayed" : true, "width_percent" : 10 } } } } }, ... } ] ... |
| Panel |
|---|

