[TUTO noodom] Nouveau widget nooCircularSlider (curseur de type action)

[noodom]

Helloo,

Je vous propose un nouveau widget de type Slider action : nooCircularSlider.
Il est donc possible de modifier sa valeur depuis le widget, un scénario ou autre.

Pour illustrer quelques fonctionnalités, voilà un exemple animé :

Les paramètres sont les suivants :

    min (KO) : valeur minimale du slider (0 par défaut)
    max : valeur maximale du slider (100 par défaut)
    step : pas de défilement (1 par défaut)
    size : hauteur et largeur (200px par défaut)
    valueColor : couleur de la valeur (grey par défaut)
    valueCircleColor : couleur de la partie du cercle représentant la valeur (cornflowerblue par défaut)
    circleColor : couleur du tour du cercle complet (hsl(219, 20%, 85%) par défaut)
    backgroundCircleColor : couleur de remplissage de fond du cercle (#FFF par défaut)

Le code et les explications d’installation sont accessibles ici :

Installation immédiate par scénario ici en précisant nooCircularSlider comme valeur du tag widgetName : https://github.com/noodom/jeedom_widgets/tree/master/installation

Comme d’habitude, peu de recul encore et en cours d’améliorations et évolutions, mais les remarques sont bonnes à prendre

[dsigmoun]

Merci @noodom pour cette belle première version.

Après un premier test rapide :

• il semble y avoir un soucis si l’on met un step avec une valeur avec virgule. Exemple avec un step à 0.50
• il doit y avoir un soucis avec le size. J’ai mis une valeur à 150 et cela me donne cela.
  

[noodom]

Je vais regarder pour la gestion des virgules, ça doit pas être prévu pour le gérer à la base.

Pour la taille, il doit y avoir une taille minimale possible (tous les éléments ne sont pas réduits). Je peux tenter de voir pour améliorer les possibilités de réduction.

[dsigmoun]

Cela fonctionne nickel lorsque je ne met pas de min ou max, mais cela cafouille un peu dans le glissé du curseur dès que l’on en met.

[noodom]

Même avec un max seulement ? Comme je précisais dans la doc, le min pose des problèmes en effet. Pour le max, je regarderai plus en profondeur. Tu peux me donner exemples de tests ko, je pourrai les tester de mon côté (ok je viens de voir ta capture donc c’est bien le min qui provoque le problème )

[dsigmoun]

Effectivement, sans le min, c’est OK.

Petite idée : pourrait-on envisager un changement de couleur en fonction de la valeur ?

[dsigmoun]

@noodom ,

Y aurait-il moyen de gérer le fond transparent sur la valeur backgroundCircleColor ?
J’ai essayé avec mettant « transparent » mais cela ne s’affiche pas comme souhaité.

[noodom]

ça n’est pas si simple car cela fait apparaitre les autres éléments qui sont présents sous ce fond (on a des superpositions).

[noodom]

Pour le paramètre size, tu n’as pas saisi le bon format : il faut mettre 150px et non 150.

On obtient alors :

[dsigmoun]

Ok, du coup, je comprends mieux le rendu que cela me faisait avec « transparent ».

J’avais imaginé de mettre un graph en dessus qui ressortirait avec la transparence.

[dsigmoun]

Chez moi, même sans le px, l’affichage n’est pas bon. Faudra voir si d’autres on le même soucis que moi.

[noodom]

C’est le contraire, il faut mettre le px, comme ma capture🙃

[db2p]

bonjour @noodom

trop top tes widgets cependant, moi ca affiche une barre de curseur et non un cercle
bon je dois pas faire comme il faut
je l’ai créé de façon classique comme un widget tiers sans le plugin Pimp my Jeedom

puis ça

et ca me donne ca…

[noodom]

Hello,

Dans la création manuelle, il manque l’ajout du fichier js décrit dans l’installation avec Pimp.

Il faut donc ajouter le fichier data/customTemplates/dashboard/cmd.action.slider.nooCircularSlider/nooCircularSlider.js

[db2p]

Oups quel beta je fais
Merci @noodom
Pour tout ton excellent travail