MyVera – Les Custom Control

Il est désormais possible d’ajouter les modules dans une vue sous forme d’objet et pas seulement d’icône. Les premiers types d’objets disponibles sont des sliders. Mise à jour: disponible dans la dernière béta : un slider vertical avec des images. Ajout d’un paramètre « Min » (valeur minimum du slider), plus de paramétrage des sliders circulaires

Le slider horizontal ou vertical:

vslidersliderh

Le paramétrage :

– définir un module (un volet, une lumière avec variateur, le plugin sonos pour pouvoir changer le volume, un slider pour la température…) comme étant de catégorie Custom control,
– choisir la sous-catégorie Horizontal Slider ou Vertical Slider
– dans Variable Etat, mettre la variable à utiliser (par exemple level ou volume),
– dans Commande, mettre le service, action et targetvalue à utiliser (par exemple urn:upnp-org:serviceId:Dimming1|SetLoadLevelTarget|newLoadlevelTarget ou urn:upnp-org:serviceId:RenderingControl|SetVolume|DesiredVolume)
– dans Incr.|Min.|Max, indiquer le pas d’incrémentation du slider (par exemple 1 pour une variation unitaire et 0.1 pour une décimale) et le minium et maximum du slider (exemple 1|0|100 pour un incrément de un et une plage de 0 à 100 pour la valeur du slider)
– dans largeur (ou hauteur, pour un slider vertical), mettre la taille du slider sur la vue (par exemple 200)
–  dans Suffixe Texte, vous pouvez indiquer le texte à écrire après le texte qui affiche la valeur du slider.
– dans Couleur texte, il est possible de changer la couleur de ce texte.
– dans Taille texte, vous pouvez changer la taille de ce texte (par défaut à 10px).

– Il faut comme d’habitude le positionner sur une vue.

Le slider vertical avec image

Il est possible de définir un slider vertical et de l’habiller avec des images. Ces images sont stockées dans resources/images/imgslider.

Voyons un premier exemple de paramètrage pour obtenir ce slider:

imgslider0

– Choisir la sous-catégorie Img. Vert. Slider.
– Ici, ce sont les images avec le numéro 0 (fond0.png, clipper0.png et thumb0.png) qui sont utilisées. Dans le paramètre Image, il faut indiquer 0. L’image fond0.png permet de dessiner le slider avec la valeur max. Clipper0.png vient se superposer sur fond0.png (c’est la partie bleu-vert du slider ci-dessus), thumb0.png est l’image du curseur (ici, c’est le rond).
Les images fond et clipper doivent avoir la même taille. Thumb doit avoir la même largeur que ces images.
– Le paramétrage pour la taille est le suivant : dans hauteur et largeur, mettre la hauteur et la largeur de fond0.png (ici, c’est 205 et 48),  dans la troisième partie du paramètre Incr.|Min.|Max|Th., mettre la hauteur de Thumb0.png (ici, c’est 48, le début fonctionne comme le paramètre Incr.|Max vu précédemment, par exemple pour un incrément de 1, un maximum de 40, mettre 1|0|40|48)

Vous pouvez définir Variable Etat, Commande, Suffixe TexteCouleur texteTaille texte comme précédemment.

Un slider en forme de volet avec image à 1, hauteur:110, largeur:128, thumb:10 (le curseur (thumb) est transparent).

imgslider1

Avec image à 2 et le même paramétrage, vous obtenez un slider de volet de même taille mais avec une image au format retina (hauteur et largeur sont à 110 et 128 mais fond2.png fait 256×220, soit deux fois cette taille…).

Un autre exemple: avec Incr.|Min|Max|Th. = 1|20|120|27, Hauteur = 200, Largeur=3 et Image=3imgslider3

Le slider circulaire

cslider
Les paramètres sont comparables avec quelques différences:

L’image du fond et du curseur doivent être des carrés.
Elles sont dans resources\images\cslider. Par exemple en mettant le paramètre image à 0, ce sont les images fond0.png et thumb0.png qui seront utilisées (j’ai mis un fichier psd pour aider à le personnaliser…).

Pour l’exemple de l’image ci-dessous, c’est fond2.png et thumb2.png qui sont utilisés. Il faut donc que le paramètre Image soit égal à 2.
fond2.png fait 416x416px. Il est utilisé pour être compatible Retina, avec un ratio de 2x. Le paramètre largeur est donc 208.
Thumb2.png fait 240x240px. Pour la compatibilité Retina, sa largeur sera déclaré comme faisant 120px.
Aussi, pour une incrémentation de 1, un minimum de 0 et maximum de 100 pour le slider, le paramètre Incr.|Min|Max|Th. est 1|0|100|120.

cslider2

Enfin ici Suffixe Texte=Hz, Couleur Texte=Teal et Taille Texte=25px.

Exemple de configuration avec Image=0, Largeur=100, Incr.|Min|Max|Th.=1|0|100|30  (compatible Retina également)

cslider0

(Pour le tableau de bord l’icône l111_0.png est utilisé (il est possible de mettre un numéro d’icône pour le personnaliser)… Un clic sur l’icône ouvre le slider en popup)

4 réflexions sur “MyVera – Les Custom Control

  1. Pingback: MyVera - Les Custom Control | Domotique, roboti...
    • Bonjour,
      Je développe cette interface pour la box Vera de Micasaverde car c’est celle que j’ai.
      La plupart des autres box ont une API pour permettre une communication par http. Potentiellement MyVera serait donc adaptable à ces box. Il faudrait avoir le temps et ces box à disposition pour le faire. Des volontaires?…

      • De mon coté mon projet est DIY, donc aucune box juste un Raspberry Pi pour héberger l’IHM du arduino et autres techno low cost.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s