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

Un widget est un élément permettant d'afficher une ou plusieurs informations.

L'affichage d'un widget se fait via une grille ( Voir la page Concept et paramétrage de la grille - Edition - Météo ).

Il existe plusieurs types de widgets :

Description

Ajout d'un nouveau widget

Dans le format, JSON, le rajout d'un nouveau widget se fait au niveau de la partie "grid_elements".

Code Block
...    
"grid_elements": [
	{
		DEFINITION DU WIDGET 1
    },
	{
        DEFINITION DU WIDGET 2
    },
    ...
]
...


Définition d'un Widget

Paramètres des widgets

Les widgets vont être définis à l'aide de paramètres composés d'une clé et d'une valeur.


Code Block
...
    {
		"position_x": 0,
        "position_y": 3,
        ...
        }
	},
...


Un paramètre peut être non défini, mais avoir une valeur :

  • Si le paramètre n'est pas présent dans le JSON ou s'il existe, mais que sa valeur est égale à "default", la météo va le considérer comme ayant une valeur non définie et va calculer sa valeur par défaut ( voir le chapitre Calcul de la valeur par défaut ).

Anchor
MeteoCalculValeurEnCascade
MeteoCalculValeurEnCascade

Calcul de la valeur d'un paramètre en cascade

La valeur d'un paramètre peut être définie à 3 niveaux différents :

  • Dans le widget ( servira uniquement pour ce widget ) ;
  • Dans le niveau "layout" d'une grille ( servira de valeur par défaut pour ce paramètre dans cette grille ) ;
  • Dans les fichiers de configurations de la météo ( servira de valeur par défaut pour ce paramètre dans toutes les météos ) ;


La valeur d'un paramètre sera déterminée en parcourant les 3 niveaux dans l'ordre jusqu'à ce qu'il trouve une valeur définie

  1. le niveau "widget",
  2. le niveau "layout" de la grille,
  3. le niveau "fichier de configuration".


Info

Remarque :

  • Le module de météo dispose de valeur par défaut. Si un paramètre n'est défini dans aucun des trois niveaux précédents, le module de météo utilisera sa valeur par défaut.
  • Il est donc déconseillé de se baser dessus, car au fil des livraisons, nous pourrions être amenés à changer ces valeurs.


Définition des valeurs par défauts d'une météo

Les valeurs par défaut pour une météo vont être définies dans le chapitre "layouts".

  • 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.
    Ce sera mentionné dans la page spécifique à chaque widget.
    Exemple :
    • position_x ;
    • position_y ;

Il y a un chapitre spécifique pour chaque type de widget :

Code Block
... 
"layouts" : { 
    "title_widget_layout": {
    ... 
    },

    "separator_widget_layout": {
	... 
    },

    "weather_widget_layout" : {
     ...
	},
},
...

Le contenu de ces 3 chapitres est décrit dans les pages de chaque widget.

Voir les pages d’édition : 


Exemple

Dans cet exemple : 

  • La couleur du texte du titre sera "blue", car même si elle est définie à "black" dans le niveau "layout", puisqu'elle est définie dans l'objet, la valeur définie dans le "layout" sera ignorée.
  • La hauteur sera 2, parce qu'elle est définie uniquement dans le niveau "layout" ( non définie dans le widget ).
  • La largeur sera celle définie dans le fichier de configuration .


Code Block
...     
"grids": [
    {
      "nb_tiles_in_width": "default",
      "type": "grid",
      "grid_elements": [
        {
          "position_x": 0,
          "position_y": 0,
          "content": {
            "type": "title_widget",
            "layout" : {
				"information_to_display" : {
					"title_area" : {
						"label" : "DATACENTER",
					 	"text_color" : "default",
				  		"font_zoom_percent" : "default"
					}
				}
			}
          }
        }
      ],
      "layouts": {
        "title_widget_layout": {
          "height": 2,
          "content": {
		  	"layout" : {
				"information_to_display" : {
					"title_area" : {
						"text_color" : "blue",
					 	"font_zoom_percent" : "default"
					}
				
				}
			}
          }
        }
      }
    }
  ],
 ...