Présentation - Widget Titre

Comme son nom l'indique, le widget titre permet d'attribuer un titre à la page :

Pour plus d'informations sur l'affichage des widgets "titre", voir la page : Widget Titre - Détail - Météo

Description

Pour le widget "titre", il faut configurer :

  • Sa position dans la grille et sa taille.
  • Le texte à afficher 


Les options du widget "titre" :

  • Sa partie réservée au texte :
    • la couleur du texte,
    • l'alignement du texte,
    • le pourcentage du zoom de la taille de la police.

Configuration

...    
"grid_elements": [ 
	{
  		"position_x" : 0,
    	"position_y" : 0,
    	"width" : "all",
    	"height" : 2,
    	"content" : {
        	"type" : "title_widget",
        	"layout" : {
            	"information_to_display" : {
            	    "title_area" : {
                    	"label" : "DATACENTER",
                    	"text_color" : "#000000",
						"text_align" : "left",
                        "font_zoom_percent" : 100
                	}
            	}
        	}
    	}
	}
 ]
...

Positionnement et dimensionnement

Pour plus d'explications, regarder la page  Concept et paramétrage de la grille - Édition JSON - Météo

...    
"grid_elements": [
    {
        "position_x": 0,
        "position_y": 3,
        "width"     : "all",
        "height"    : "1",
        ...
     }
]
...
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 titre 

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

Type du widget, dans le cas du widget titre ce paramètre doit être obligatoirement défini à la valeur : title _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 title _widget peut être renseigné.

information_to_display
Clé - La clé information_to_display doit être renseignée dans la clé layout. Elle permet de paramétrer l'affichage des différentes zones du widget. En l'occurrence ( le widget titre n'a qu'une zone ) : title_area.




La zone de titre
...    
"grid_elements": [
	{
		...
    	"content" : {
         	...
        	"layout" : {
            	"information_to_display" : {
                	"title_area" : {
                    	"label" : "DATACENTER",
                    	"text_color" : "#000000",
						"text_align" : "left",
						"font_zoom_percent" : 100
                	}
            	}
        	}
    	}
	}
]
...
NomTypeDéfautCommentaire
label
String -

Texte affiché dans le widget.

Limité à 300 caractères.

text_color
Couleur Web #000000

Couleur d'affichage du texte. 

text_align
String left

Alignement du texte.
Valeurs possibles :

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

Exemple

...    
"grid_elements": [ 
	{
    	"position_x" : 0,
    	"position_y" : 0,
    	"width" : "all",
    	"height" : 2,
    	"content" : {
    	    "type" : "title_widget",
    	    "layout" : {
    	        "information_to_display" : {
    	            "title_area" : {
    	                "label" : "DATACENTER",
    	                "text_color" : "#000000",
						"text_align" : "left",
                        "font_zoom_percent" : 100
    	            }
    	        }
    	    }
    	}
	}
 ]
...

Définir les valeurs par défaut du widget "titre" dans une météo

Dans le chapitre "layouts" de la grille, il suffit de définir / compléter le chapitre "title_widget_layout" :

  • Il ne faut définir que les valeurs pour lesquelles 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.
...    
"grid_elements": [
	...
],
"layouts" : {
	...  
	"title_widget_layout" : {
    	"width" : "default",
    	"height" : "default",
    	"content" : {
        	"layout" : {
        	    "information_to_display" : {
        	        "title_area" : {
        	            "text_color" : "#000000",
						"text_align" : "default",
                      	"font_zoom_percent" : "default"
        	        }
        	    }
        	}
    	}
	} 
	... 
}
...