[SALVIALF] Widget SliderButton (Action/Curseur)

[Salvialf]

Bonjour à tous,

Suite à ce post, nous avons beaucoup échangé avec l’ami @Dankoss sur sa demande de widgets et cela a abouti à un widget tiers, basé sur le widget core « Button », plutôt agréable visuellement et largement personnalisable.

Astuce:

En plus des boutons « - » & « + », il est possible de saisir la valeur en cliquant dessus. Il faut alors soit cliquer en dehors du widget pour valider ou appuyer sur la touche Entrée.

@Dankoss a réalisé l’ensemble des images (34 concernant ce widget), inspiré à la base par des réalisations de @esso1. Il a réalisé en tout 300 images qui permettront de développer d’autres widgets dans le même esprit à l’avenir (commandes de volets, bouton on/off, etc…).

---

Installer et appliquer le widget :

• Télécharger les fichiers: Widget SliderButton.zip

• copier les fichiers dans le dossier data/customTemplates/dashboard à l’aide du plugin Jeexplorer .

• Appliquer le widget sur une commande Action/curseur à partir de l’onglet Affichage de la configuration de la commande, en choisissant Customtemp/SliderButton dans le menu déroulant.

---

Les 8 paramètres optionnels :

• theme

Permet de choisir la couleur du widget (noir | blanc par défaut).

• step

Permet de choisir le « pas » du changement de valeur (0.5 par défaut) .

• minus

Permet de choisir la couleur du bouton - (moins) (bleu par défaut).

• plus

Permet de choisir la couleur du bouton + (plus) (rouge par défaut).

Les 8 couleurs disponibles :

turquoise , green , yellow , orange , red , pink , purple , neutral

• font-color

Permet de choisir la couleur de la valeur au centre.

• height

Valeur en pixels de la hauteur du widget (40 par défaut).

• width

Valeur en pixels de la largeur de la partie centrale (50 par défaut)

• font-size

Valeur en pixels de la taille de la police d’écriture de la valeur (12 par défaut)

• font

Permet de changer la police d’écriture. Les fichiers *.ttf doivent se trouver dans le répertoire Jeedom /data/fonts/ . Seul le nom du fichier est à renseigner sans l’extension .ttf . (“nasalization” par défaut)

• time

Pour visualiser les informations de temps depuis le dernier changement d’état. 3 formats sont possibles: duration affiche la durée, date affiche le jour et l’heure, hour affiche l’heure avec les secondes du dernier changement d’état. (off par défaut)

• CSS-time

Permet de personnaliser la présentation du paramètre time en code CSS.

---

Exemple :

---

Documentation

https://salvialf.github.io/Salvialf-Documentation/SliderButton

---

En espérant que vous apprécierez ce widget qui a été développé de façon collective par des échanges sur le channel #Widgets-salvialf du discord de @Domotech.

Merci à tous et plus particulièrement à @Dankoss pour ses réalisations et la qualité des échanges.

A bientôt

[jerome6994]

Super travail encore une fois
Je suis admiratif
Bravo

[Salvialf]

Merci @jerome6994

ce fut un plaisir à faire car pour une fois j’étais accompagné

[Dankoss]

Avec plaisir cher ami @Salvialf

On remet ça quand tu veut et même si tu augmente ton potentiel de chiantitude

[snoopyfb]

Très très beau widget. Le rendu est assez sympa et je suppose qiue cela représente un gros boulot.

J’ai essayé de réduire la largeur du fichier PNG (la partie centrale) afin de réduite la largeur du bouton, mais cela n’a pas eu d’impact sur le visuel.
Est ce que cela veux dire que la largeur du bouton est défini dans le code ?

[Salvialf]

Oui c’est en dur dans le code.

C’est cette ligne dans la balise <script> :

cmd.find('input.input-SB').css({'background-image':'url(/data/customTemplates/dashboard/cmd.action.slider.SliderButton/SB_'+style+'.png)','background-size': '55px 40px'});

Il faut modifier la valeur 55px.

J’attendais justement des retours sur la taille pour affiner. A voir si je mets un paramètre optionnel… n’hésites pas à me dire quelle valeur tu as mis avec une copie d’écran ça aidera

Et je viens d’apprendre que @Dankoss a retouché les images donc il y aura une mise à jour demain

[snoopyfb]

Lorsque que je change la valeur 55 px, rien ne se passe
Même avec CTRL+F5

[Salvialf]

Il faut redimensionner la tuile sur le dashboard pour que les modifications soient prises en compte.

Ah oui il faut aussi changer la valeur de width plus bas dans la balise <style>:

input.input-SB {
  height: 40px;
  width: 55px;

[iPapy]

Hello @Salvialf

Comme d’habitude magnifique, beau travail

[MrPatate]

Super travail en effet, moi qui cherche depuis quelques temps à me créer un design ce widget semble tout a fait approprié.
Existe il parmi les création de la communauté un widget de type curseur ou on déplacerais un curseur (permettant par exemple de faire varier l’intensité d’une lumière)?

[jerome6994]

C’est un widget qui va très vite vouloir se décliner sous la forme du :

• Juste le +
• Juste le -
• Le + et le - maïs sans valeur au centre car elle sera ailleurs

Lais je peux me tromper

[pj66]

Salut,

Je crois que je peux mettre sur chaque page de mes design en bas à droite : « Designed by Salvialf »

Bravo ! de la balle komdab !

[PanoLyon]

Merci beaucoup à toute cette équipe.

[Salvialf]

MISE A JOUR

• 3 nouveaux paramètres optionnels:

  1. hauteur : hauteur du widget
  2. largeur : largeur de la partie centrale
  3. font-size : taille de l’écriture de la valeur

• optimisation générale des images (taille, qualité, uniformisation) - merci @Dankoss

[snoopyfb]

Personnellement je ne comprends pas ce qui se passe.

Avec la version mise à jour de ce matin, et une valeur de largeur = 30, j’obtiens un affichage comme ci dessous

[drs]

@Salvialf on dirait que tu lis dans mes pensées, c’est exactement ce que je voulais!!

Ceci dit, j’ai un petit souci (mais je ne suis pas certain d’avoir la bonne version du widget…

J’ai paramétré comme ceci:

Et j’obtiens ce résultat:

Qu’est ce que j’ai mal fait encore?

Merci

[Salvialf]

Merci pour les retours je corrige j’ai essayé plus grand que 40 mais pas plus petit

[drs]

@pj66

Je crois que je peux mettre sur chaque page de mes design en bas à droite : « Designed by Salvialf »

Pour ma part, c’est pareil. Je vais finir par lui donner un accès à mon jeedom et le laisser faire mes designs

[Salvialf]

@snoopyfb & @drs ,

Merci pour le retour express !

Normalement c’est corrigé il faut télécharger à nouveau et remplacer le fichier cmd.action.slider.SliderButton.html.

Éventuellement redimensionner la tuile sur le dashboard pour que le nouveau code soit pris en compte.

Vous confirmez ?

[drs]

Oui je crois que je peux confirmer

C’est trop excellent, merci!