[TUTO noodom] Nouveau widget nooSlider

Utilisation du core de Jeedom Widgets
,
1

Bonsoir,

Je vous propose un nouveau widget de type Slider : nooSlider.

Pour illustrer quelques fonctionnalités, voilà quelques exemples :

nooSliderDemo

Les paramètres sont les suivants :

type : 'button' / 'images', format d’affichage (‹ button › par défaut)
immediateChange : 0: prise en compte de la nouvelle valeur du changement à l’arrêt du défilement, 1: prise en compte de la nouvelle valeur immédiate à chaque changement (0 par défaut)
paddingStart : décalage à gauche en % (0 à 1) si slider coupé (0.1 par défaut, soit 10%)
paddingEnd : décalage à droite en % (0 à 1) si slider coupé (0.1 par défaut, soit 10%)
handleZoom : zoom à appliquer sur les valeurs survolées par le bouton ou sur la taille de l’image zoomée (1 par défaut)
handleSize : taille du bouton en % de la taille totale du slider (% de la largeur pour slider horizontal, % de la hauteur pour slider vertical)
animationDelay : temps de l’animation de déplacement en ms du bouton suite à un changement de valeur (100 par défaut)

// type button
orientation : ‹ horizontale ›/‹ verticale ›, affichage horizontal ou vertical (‹ horizontale › par défaut)
width : largeur en pixels
height : hauteur en pixels
min : 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)
minRange : valeur minimale accessible (valeur min par défaut)
maxRange : valeur maximale accessible (valeur max par défaut)
fixedHandle : bouton de slider fixe, 0:non fixe / 1:fixe (0 par défaut)
addPlus : 0:pas de ‹ + › devant valeur positive / 1: ‹ + › devant valeur positive (0 par défaut)
cursorColor : couleur du curseur de position
cursorLeftPos : position à gauche en % du bouton (par défaut 40%)
cursorTopPos : position en % depuis le haut du bouton, 0 à 10 (par défaut 40%)
displayedValues : valeurs visibles sous slider (ex : ‹ 0,20,40,60,80,100 ›)
centerValue : valeur de la position séparant le slider pour définir les couleurs à gauche et droite (vide par défaut)
rightColor = couleur à gauche du curseur de séparation (‹ red › par défaut)
leftColor = couleur à droite du curseur de séparation (‹ green › par défaut)

// type image
images : liste des images à mettre en fond dans le mode image (ex: ‹ presence.png,presence_int.png,presence_no.png,presence_prog.png ›)
imageWidth : hauteur de chaque image de fond pour le type image (60 par défaut)
imageHeight : hauteur de chaque image pour le type image (40 par défaut)

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

Peu de recul encore et en cours d’améliorations et évolutions, mais les remarques sont bonnes à prendre :slight_smile:

6 « J'aime »
2

Bonjour,

Très réussi visuellement.
J’imaginerai bien un double :heure et minutes ou triple date : année, mois, jour.
Je ne sais pas dire si c’est complexe, c’est donc juste une digression (comme disait mon prof de phylo)

3

Super comme toujours :clap::clap::clap::clap:

Il faudrait les intégrer à pimp my Jeedom comme ceux de JAG ce serait top

1 « J'aime »
4

Merci :slightly_smiling_face:
Pour la saisie multiple, les widgets ne sont pas prévus pour a la base. C’est possible de contourner en faisant 2-3 commandes de ce type dans un virtuel.

Sinon ça voudrait dire un dérivé de ce virtuel avec concaténation de 3 sliders. Pourquoi pas, à voir la complexité et le temps nécessaire :wink:

5

Bonjour @noodom et merci pour ton travail.

Quand j’apporte un changement au widget, a la sauvegarde il repasse le slider à 50, ce qui pour moi donne 50% du volume, et ca a du reveiller les voisins du coup :confused:

edit : ca se produit aussi si je rafraichie la page

6

Salut,

Il se remet ensuite à la bonne valeur par lui même ou tu dois intervenir pour changer sa valeur ?

Je vais faire des tests.
Je peux mettre par défaut au min mais normalement il récupère au lancement les valeurs courantes et l’affecte au widget.

7

Je dois le repasser a la bonne valeur, et au démarrage de jeedom, il se met aussi a 50 par defaut

8

Et ensuite si tu modifies ta commande hors widget, c’est bien pris en compte dans le widget ?
(Event dans scénario par exemple)

9

pas de soucis si je modifie autrement, le widget suis
Par defaut au mini ca perdrait tout autant son interet a mon avis, par defaut c’est qu’il garde sa valeur sans bouger l’ideal :wink:

10

Oui bien sûr, ma question c’est pour comprendre le bug😉

L’idée c’est de le créer avec valeur à mini et mettre ensuite à sa valeur de sauvegarde au chargement.

11

oki oki

Si t’as besoin de plus d’info/test, fais le savoir :slight_smile:

12

Si tu fais F12 tu as des erreurs js dans la console ?

13

non je vois pas d’erreurs

14

Tu peux tester avec cette modification dans le code ?

                    $cmd#id#.rsSliderLens({
                        value: #state#,
                        orientation: orientation,

(ajout de la ligne value: #state#, )

15

apres ajout :

$cmd#id#.rsSliderLens({
                        value: #state#,
                        orientation: orientation,

le volume fait le yoyo 7 ou 8 fois entre 13 (mon volume) et 50, avant de rester a 13

16

tu n’as que cette commande qui utilise le widget ?

17

pour l’instant oui, je voulais deja tester sur une commande avant de generaliser.
Pour info, peut etre important, cette commande gere le volume de toute mes enceintes

18

la commande est pas mise à jour par les enceintes ? (ou autre)

19

elle n’a pas de retour d’etat de base, je lui en ai créée une avec l’etat d’une enceinte

20

tu n’as pas mis immediateChange à 1 dans les paramètres optionnels ?

Tu peux envoyer ton paramétrage ?