Les widgets en v4

Salon des Développeurs Core V4 (dev)
1

Suite au message sur le blog : https://www.jeedom.com/blog/4368-les-widgets-en-v4/

Serait-il possible d’avoir une description sur la structure à donner sur les codes pour v4 des futurs templates.

Ceci afin d’anticiper la migration des widgets v3 (issue du market) vers cette nouvelle implémentation.

Si je prends l’exemple d’un widget utilisé pour les aspirateurs :

Sur Jeedom sans ajouter de widget custom, on obtient ceci :
image

En v3 il était possible d’appliquer un widget qui apportait plusieurs choses :

  • un côté esthétique
  • une meilleure lisibilité (le petit coté WAF)

38Bsx7Kvcq
Bien évidemment le changement de l’animation est fonction de la valeur d’une commande « info » sur laquelle est appliqué le widget.
Dans le cas de ce plugin, c’est une valeur de type string :
image
Mais pour d’autres widgets cela peut être une valeur numérique, comme les différents modes d’in radiateur, ou d’un widget porte de garage (état fermé/ouvert/en cours d’ouverture/de fermeture/entre-ouvert).

Merci à la team pour les explications utiles à la création de ce type de widget (par exemple la notion de tag introduit pour les widgets)

2

Bonjour,
C’est déjà possible avec les widget multistate j’ai pas encore fait la doc (j’espère trouver le temps dans la semaine) mais le principe est simple. Tu fais un test si c’est ok il affiche l’image/l’icône que tu lui donne sinon il passe au test suivant

3

Il semble donc préférable de te laisser le temps de documenter avant de poser des tonnes de questions.

4

Hello Sbo,
Si çà peut t’aider, voici où j’en suis pour le plugin Kroomba

  • j’ai supprimé la fonction toHtml de la classe et aussi le widget dédié que j’utilisais jusque là
  • J’ai ajouté dans ma classe la fonction
	public static function templateWidget(){
		$return = array('info' => array('string' => array()));
		$return['info']['string']['state'] = array(
			'template' => 'tmplmultistate',
            'replace' => array("#_width_#" => "80","#_height_#" => "80"),
			'test' => array(
				array('operation' => "#value# == 'charge'",'state' => "<img src='plugins/kroomba/docs/images/kroomba_charge.png' title ='" . __('Charging', __FILE__) . "'>"),
				array('operation' => "#value# == 'home'",'state' => "<img src='plugins/kroomba/docs/images/kroomba_home.png' title ='" . __('Returning to dock', __FILE__) . "'>"),
				array('operation' => "#value# == 'run' || #value# == 'hmUsrDock'",'state' => "<img src='plugins/kroomba/docs/images/kroomba_run.png' title ='" . __('Cleaning', __FILE__) . "'>"),
				array('operation' => "#value# == 'stop'",'state' => "<img src='plugins/kroomba/docs/images/kroomba_stop.png' title ='" . __('Stopped', __FILE__) . "'>"),
				array('operation' => "#value# == 'stuck'",'state' => "<img src='plugins/kroomba/docs/images/kroomba_stuck.png' title ='" . __('Stucked !?!', __FILE__) . "'>"),
				array('operation' => "#value# == 'unknown'",'state' => "<img src='plugins/kroomba/docs/images/kroomba_unknown.png' title ='" . __('Unknown', __FILE__) . "'>"),
			)
		);
		return $return;
	}

Je me suis servi pour çà de l’indication donnée par Loîc dans un autre fil de ce forum et aussi de ce que je suis allé piocher dans le code. Cela a défini un template avec le nom state (le nom est libre tu peux prendre ce que tu veux et aussi définir plusieurs templates dans ta fonction).
Ensuite j’ai affecté ce template à ma commande status dans la fonction postSave

    $cmdlogic = kroombaCmd::byEqLogicIdAndLogicalId($this->getId(),'status');
    $cmdlogic->setTemplate('dashboard','kroomba::state');
    $cmdlogic->setTemplate('mobile','kroomba::state');

Et çà marche bien. L’état de l’aspi s’affiche bien dans le widget sous forme d’une image et s’actualise bien. Et plus de widget spécifique à maintenir !

5

Bonjour,

Voila un debut de doc n’hesitez pas a me dire si vous voyez des améliorations possible (le PR sont accepté :slight_smile: )

6

Loic,

Les width et height ne fonctionnent pas :
image

image
Le template définie ces valeurs width et height en max-width et max-height.

En définition en dur les width et/ou height dans la console ca passe.
image

7

Eux ben ça marche chez plein de monde… Ton image peux elle bien faire cette taille ? Le max permet justement de ne pas étirer l’image plus que ça taille

8

C’est du png animé. Je vais tester avec une image statique pour voir
charge-cassee clignote-erreur clignote-orange en_charge repos retour zone

9

Ok je pensais, a tord, que cela permettait le zoom sur l’image. Ecrire que c’est un max size serait mieux devant les champs Width et Height.

perso la possibilité d’avoir un width et Height serait interresant en variable en plus des max

10

y a pas d’action select en template?

11

Non il n’y en a pas

12

Je suis pas d’accord pour plusieurs raison :

  • changer le nom vous obligera a tout refaire la configuration du widget
  • le nom est bien car c’est bien la taille que peut prendre le widget ensuite cela depend de la taille de votre image ce qui me parait logique
13

Possible de le crée?
Je l’utilise assez souvent et du coup je ne peux pas mettre a jours mes widget avec cette méthode

14

Je vois pas l’interet en faite un template c’est quand tu as quelque chose type une image a mettre ou icone specifique a ton plugin/jeedom. Un select c’est du texte

15

Bonjour à tous,

Je rebondis sur cette discussion au sujet des Widgets V4.
Je parle des widgets qu’on programme, ceux qui sont livrés avec un plugin.
Je vais me lancer (à corps perdu) sur la compréhension de ces petites bêtes, cela pour comprendre et créer de beaux widgets (dans un premier temps, pour le PlayerMusic de mon plugin Alexa-Api).
Pourriez vous me dire s’il y a un des plugins qui est le plus avancé sur les widgets V4 ? A regarder pour comprendre, Y a t il des samples ? de la Doc ? En gros, sur quoi s’appuyer ?

Merci à tous,

Pour l’instant, j’ai repéré :
https://www.jeedom.com/blog/4368-les-widgets-en-v4/