Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Scroll Ignore
scroll-pdftrue
scroll-officetrue
scroll-chmtrue
scroll-docbooktrue
scroll-eclipsehelptrue
scroll-epubtrue
scroll-htmltrue


Panel
titleSommaire

Table of Contents
stylenone



Présentation - Widget Séparateur

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.

Plus d'informations sur les widgets séparateurs dans cette page : Widget Séparateur - Détail Edition - 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
  • sa position : X, Y, largeur et hauteur;
  • son texte ainsi que ses propriétés :
    • sa couleur,
    • le pourcentage du début de la zone du texte,
    • le pourcentage du zoom de la fin taille de la zone du texte,son positionnementpolice.

Configuration

  • Sa partie droite :
    • l'afficher ou la cacher,
    • la taille ( en pourcentage ) que prendra la zone affichée dans le widget.

Configuration


Code Block
languagejs
titleExemple d'un widget séparateur
Code Block
languagejs
titleExemple d'un widget séparateur
...    
"grid_elements": [
	{
		"position_x": 0,
        "position_y": 3,
        "width"     : "all",
        "height"    : 12,
        "content"   : {
        			"type"        : "separator_widget",
		    "layout" : {
        "title		"information_to_display" : {
     :  "DATACENTER FRANCE",
		 	"text_color"  : "#000000",
			"start_zone_text_percentleft_area" : 10,
{
                "end_zone_text_percent		"displayed" : 10true,
            "text_align    		"width_percent" : "center"10
          }   
		}
]
...

Positionnement et dimensionnement

Code Block
languagejs
titleConfiguration du positionnement
...    
"grid_elements": [
	{
		"position_x": 0,,
            		"title_area" : {
        "position_y": 3,
        		"widthlabel"     : "allDATACENTER France",
        "height"    : 1,
    		"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

NomTypeDéfautCommentaire
Code Block
position_x
Numéro de cellule

---

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

  • Correspond à la case numéro X dans la largeur de la grille;
  • Doit obligatoirement être défini.
Code Block
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.
Code Block
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".
    Code Block
    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

    Code Block
    languagejs
    titleConfiguration du positionnement
    ...    
    "grid_elements": [
    	{
    		"position_x": 0,
            "position_y": 3,
            "width"     : "all",
    Code Block
    languagejs
    titleConfiguration du contenu
    ...    
    "grid_elements": [
    	{
    		...
            "content"   : {
            	"typeheight"        : "separator_widget"2,
                "title"       : "DATACENTER FRANCE",
    		 	"text_color"  : "#000000",
    			"start_zone_text_percent" : 10,
                "end_zone_text_percent" : 10,
                "text_align" : "center"
            }   
    	}
    ]
    ......
    	}
    ]
    ...



    NomTypeDéfautCommentaire


    Code Block
    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.


    Code Block
    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.


    Code Block
    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" =
    NomTypeDéfautCommentaire
    Code Block
    type
    String-

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

    Code Block
    title
    String-

    Texte affiché dans le widget.

    Code Block
    text_color
    Couleur au format hexadécimal

    #000000

    Couleur d'affichage du texte. 

  • Le format de la valeur est une couleur web ( Voir : https://en.wikipedia.org/wiki/Web_colors )
  • "default" =

    Si le paramètre "

    text_color

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


    Code Block
    start_zone_text_percent
    Integer10
    height


    Nombre de cellules ---

    Correspond à la hauteur du widget :

    • un nombre, non limité, car la hauteur de la grille n'est pas limité;
    Pourcentage de la largeur à laquelle la zone de texte commence.

    Si le paramètre "

    start_zone_text_percent

    height" n'est pas présent dans la configuration du widget, c'est comme s'il valait

    "default".
    Code Block
    end_zone_text_percent
    Integer10

    Pourcentage de la largeur à laquelle la zone de texte fini.

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

    Code Block
    text_align
    Stringcenter

    Alignement du texte
    Valeurs possibles :

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

    Exemple

    "default".



    Contenu du widget séparateur


    Code Block
    languagejs
    titleConfiguration du contenu
    ...    
    "grid_elements": [
    	{
    		...
        	"content" : {
            	"type" : "separator_widget",
            	"layout" : {
                	"information_to_display" : {
                    	"left_area" : {
    						...
                    	},
                    	"title_area" : {
    						...
                    	},
                    	"right_area" : {
    					 	...
                    	}
                	}
            	}
        	}
    	}
    ]
    ...



    NomTypeDéfautCommentaire


    Code Block
    type


    String -

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


    Code Block
    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é.


    Code Block
    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.






    Panel

    Image Added


    La zone de gauche ( left_area )


    Code Block
    languagejs
    titleConfiguration du contenu
    ...    
    "grid_elements": [
    	{
    		...
        	"content" : {
             	...
            	"layout" : {
                	"information_to_display" : {
                    	"left_area" : {
                        	"displayed" : true,
                        	"width_percent" : 10
                    	},
    					...
                	}
            	}
        	}
    	}
    ]
    ...



    NomTypeDéfautCommentaire


    Code Block
    displayed


    Booléen

    true

    Affichage ou non de la zone de gauche.


    Code Block
    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 )


    Code Block
    languagejs
    titleConfiguration du contenu
    ...    
    "grid_elements": [
    	{
    		...
        	"content" : {
             	...
            	"layout" : {
                	"information_to_display" : {
    					...
    					"title_area" : {
        					"label" : "DATACENTER FRANCE",
        					"font_zoom_percent" : 100,
        					"text_color" : "000000",
    					    "text_align" : "center"
    					},      
    					...
                	}
            	}
        	}
    	}
    ]
    ...



    NomTypeDéfautCommentaire


    Code Block
    label


    String -

    Texte affiché dans le widget.

    Doit obligatoirement être défini.


    Code Block
    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


    Code Block
    text_color


    Couleur Web

    #000000

    Couleur d'affichage du texte. 


    Code Block
    text_align


    String center

    Alignement du texte
    Valeurs possibles :


    La zone de droite ( right_area )


    Code Block
    languagejs
    titleConfiguration du contenu
    ...    
    "grid_elements": [
    	{
    		...
        	"content" : {
             	...
            	"layout" : {
                	"information_to_display" : {
    					...
                    	"right_area" : {
                        	"displayed" : true,
                        	"width_percent" : 10
                    	}
                	}
            	}
        	}
    	}
    ]
    ...



    NomTypeDéfautCommentaire


    Code Block
    displayed


    Booléen true

    Affichage ou non de la zone de droite.


    Code Block
    width_percent


    Integer 10

    Pourcentage du widget occupé par la zone de droite.

    Doit être compris entre 0 et 100



    Exemple


    Code Block
    languagejs
    titleExemple d'un widget séparateur
    ...    
    "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

    Image Added


    Anchor
    SeparateurDefinirValeurLayout
    SeparateurDefinirValeurLayout

    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.
    • Si vous utilisez la valeur "default" pour un paramètre qui l'accepte, la valeur sera alors celle présente dans le fichier de configuration du module "webui-module-service-weather".


    Code Block
    languagejs
    titleExemple d'un widget séparateur
    ...    
    "grid_elements": [
    	...
    ],
    "layouts" : {
    	... 
    	"separator_widget_layout" : {
    	   	"width" : "default",
        	"height" : "default",
    		"content" : {
    	
    Code Block
    languagejs
    titleExemple d'un widget séparateur
    ...    
    "grid_elements": [
    	{
    		"position_x": 0,
            "position_ylayout" : 3,{
    	            "information_to_display" : {
    	  "width"     : "all",
            "heightleft_area"    : 1,{
    	        "content"   : {
            	"typedisplayed" : true,
    	      : "separator_widget",
                  "title"width_percent" : 10
    	          : "DATACENTER FRANCE",
    		 	"text_color"  : "#000000"},
    			"start_zone_text_percent" : 10,
                    "end_zone_text_percenttitle_area" : 10,
            {
    	    "text_align" : "center"
            }   
    	}
    ]
    ...
    Panel

    Image Removed

    AnchorSeparateurDefinirValeurLayoutSeparateurDefinirValeurLayout

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

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

    • il ne faut définir que 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,
      • title.
    • Si vous utilisez la valeur "default" pour un paramètre qui l'accepte, la valeur sera alors celle présente dans le fichier de configuration du module "webui-module-service-weather".
    Code Block
    languagejs
    titleExemple d'un widget séparateur
    ...    
    "grid_elements": [
    	...
    ],
    "layouts" : {
    	...
    	"separator_widget_layout": {
         "font_zoom_percent" : 100,
    	                    "text_color" : "#000000",
    	                    "text_align" : "center"
    	                },
    	          "width"     : "20",
    right_area" : {
    	        "height"    : 1,
            "contentdisplayed"   : {true,
    		 	"text_color"       : "#000000",
                "start_zone_textwidth_percent" : 10,
    	            "end_zone_text_percent" : 10,
       }
    	         "text_align" : "center"         
     }
    	        }
    	    }   
    	
    	},
     	... 
    }
    ...