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

...    
"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 ).

...    
"grid_elements": [
	{
		"position_x": 0,
        "position_y": 3,
        "width"     : "all",
        "height"    : 2,
        ...
	}
]
...
NomTypeDéfautCommentaire
position_x
Numéro de cellule

---

Abscisse du point "le plus en haut à gauche" d'un widget :

  • un nombre => Correspond à la case numéro X dans la largeur de la grille ;
  • Doit obligatoirement être défini.
position_y
Numéro de cellule ---

Ordonnée du point "le plus en haut à gauche" d'un widget :

  • un nombre => Correspond à la case numéro Y dans la hauteur de la grille ;
  • Doit obligatoirement être défini.
width
Nombre de cellules ---

Correspond à la largeur du widget :

  • un nombre, entre 1 et le nombre de cases en largeur de la grille ;
  • "all" => Pour prendre toute la largeur de la page :
    • Dans ce cas, sa "position_x" devra être 0.
  • "default" => la valeur sera calculée avec le système de "Calcul de la valeur en cascade" ( voir la page Concept et paramétrage des widgets - Edition - Météo   ).

Si le paramètre "width" n'est pas présent dans la configuration du widget, c'est comme s'il valait "default".

height
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

...    
"grid_elements": [
	{
		...
    	"content" : {
        	"type" : "separator_widget",
        	"layout" : {
            	"information_to_display" : {
                	"left_area" : {
						...
                	},
                	"title_area" : {
						...
                	},
                	"right_area" : {
					 	...
                	}
            	}
        	}
    	}
	}
]
...
NomTypeDéfautCommentaire
type
String -

Type du widget, dans le cas du widget séparateur ce paramètre doit être obligatoirement défini à la valeur : separator_widget.

layout
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é.

information_to_display
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.




La zone de gauche ( left_area )
...    
"grid_elements": [
	{
		...
    	"content" : {
         	...
        	"layout" : {
            	"information_to_display" : {
                	"left_area" : {
                    	"displayed" : true,
                    	"width_percent" : 10
                	},
					...
            	}
        	}
    	}
	}
]
...
NomTypeDéfautCommentaire
displayed
Booléen

true

Affichage ou non de la zone de gauche.

width_percent
Integer 10

Pourcentage du widget occupé par la zone de gauche.

Doit être compris entre 0 et 100

La zone de titre ( title_area )
...    
"grid_elements": [
	{
		...
    	"content" : {
         	...
        	"layout" : {
            	"information_to_display" : {
					...
					"title_area" : {
    					"label" : "DATACENTER FRANCE",
    					"font_zoom_percent" : 100,
    					"text_color" : "000000",
					    "text_align" : "center"
					},      
					...
            	}
        	}
    	}
	}
]
...



NomTypeDéfautCommentaire
label
String -

Texte affiché dans le widget.

Doit obligatoirement être défini.


Limité à 300 caractères.

font_zoom_percent
Integer 100

Zoom en pourcentage de la taille de la police.

  • Doit être supérieur à 0.
  • Une valeur de 200 affiche un texte deux fois plus gros.
  • Une valeur de 50 affiche un texte deux fois plus petit.
  • "default" => la valeur sera calculée avec le système de "Calcul de la valeur en cascade" ( voir la page Concept et paramétrage des widgets - Edition - Météo   ).
text_color
Couleur Web

#000000

Couleur d'affichage du texte. 

text_align
String center

Alignement du texte.

Valeurs possibles :

La zone de droite ( right_area )
...    
"grid_elements": [
	{
		...
    	"content" : {
         	...
        	"layout" : {
            	"information_to_display" : {
					...
                	"right_area" : {
                    	"displayed" : true,
                    	"width_percent" : 10
                	}
            	}
        	}
    	}
	}
]
...
NomTypeDéfautCommentaire
displayed
Booléen true

Affichage ou non de la zone de droite.

width_percent
Integer 10

Pourcentage du widget occupé par la zone de droite.

Doit être compris entre 0 et 100


Exemple

...    
"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
    	            }
    	        }
    	    }
    	}
	}
]
...