@Salvialf le paramètrage offset est une TUERIE !
ca fonctionne du feu de dieu c’est un MUST have en domotique pour une tablette !
BRAVO !
Salut,
Donc pour ceux qui voit le verre à moitié vide ou les volets à 50% fermés 
je veux bien que vous testiez ce code svp avant de partager les modifs dans le zip (@lukijecy, @Ludovic_Rayon - @kermit je ne sais pas si tu es concerné aussi ? )
Remplacer le code que vous trouverez dans Outils → Widgets, code puis sélectionner dashboard sur la gauche et cmd.action.slider.ShutterSlider.html.
Le code du widget va apparaitre dans la fenêtre, remplacer le par celui-ci:
<!-- ############ ShutterSlider ############## -->
<!-- ********* Paramètres Optionnels ********* -->
<!-- hauteur = hauteur de l'image en pixels (85 par défaut) -->
<!-- largeur = largeur de l'image en pixels (65 par défaut) -->
<!-- image = nom de l'image de fond (baie_blanc par défaut) --> <!-- baie_blanc|baie_blanc2|baie_noir|baie_noir2|baie_bois|baie_bois2|fenetre|fenetre1,2,3,4|velux|garage|garage1,2,3 -->
<!-- selecteur = couleur du sélecteur (blanc | bois | noir par défaut) -->
<!-- lames = couleur des lames (bois | noir | blanc par défaut) -->
<!-- offset = valeur du pourcentage de décollement (désactivé par défaut) -->
<!-- invert= inverser la position (1 | on | désactivé par défaut) -->
<!-- position= désactiver l'affichage de la position (off | on par défaut) -->
<!-- ########### by @SALVIALF ;) ############# -->
<div style="margin:5px;" class="cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div id="shutterSlider" class="vertical-slider" value="#state#">
<span id="custom-handle" class="ui-slider-handle"></span>
</div>
<div class="value sliderValue"></div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var cmd = $('.cmd[data-cmd_id=#id#]');
var valueH = is_numeric('#hauteur#') ? parseFloat('#hauteur#'):85;
var valueL = is_numeric('#largeur#') ? parseFloat('#largeur#'):65;
var couleurLames = ('#lames#' !='#'+'lames#') ? '#lames#' : 'blanc';
var couleurSelecteur = ('#selecteur#' !='#'+'selecteur#') ? '#selecteur#' : 'noir';
var image = ('#image#' !='#'+'image#') ? '#image#' : 'baie_blanc';
var position = ('#invert#' !='#'+'invert#' && '#invert#' != '') ? 99-parseInt(_options.display_value) : parseInt(_options.display_value);
var hauteurLames = (image.search("garage")) ? '9px' : '15px';
var offset = ('#offset#' !='#'+'offset#' && '#offset#' != '' && '#offset#' >= 1) ? '#offset#' : false;
('#position#' == 'off') ? cmd.find('.sliderValue').hide() : '';
if (offset != false) {
if (position >= 1 && position <= offset) {
position = 1;
} else if (position > offset) {
var D = offset;
var E = (99-D)/4;
var P = D/4;
position = Math.trunc(((position-D)*P/E)+position-D);
} else { position = 0; }
}
cmd.find('#shutterSlider').slider({
classes: {
"ui-slider-range": "square"
},
min: 0,
max: 99,
value: position,
orientation: 'vertical',
animate: "slow",
range: "max",
slide: function(event,ui) {
if (offset != false) {
if (ui.value < 1) {
cmd.find('.sliderValue').text('Fermé');
} else if (ui.value >= 1 && ui.value <= offset) {
cmd.find('.sliderValue').text(1+' #unite#');
} else if (ui.value >= 99) {
cmd.find('.sliderValue').text('Ouvert');
} else {
var D = offset;
var E = (99-D)/4;
var P = D/4;
cmd.find('.sliderValue').text(Math.trunc(((ui.value-D)*P/E)+ui.value-D)+' #unite#');
}
}
else if (ui.value < 1) {
cmd.find('.sliderValue').text('Fermé');
} else if (ui.value >= 99) {
cmd.find('.sliderValue').text('Ouvert');
} else {
cmd.find('.sliderValue').text(ui.value+' #unite#');
}
}
})
cmd.attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate);
cmd.find('#shutterSlider').attr("style", "height: "+valueH+"px; width: +"+valueL+"px!important;"+
"background: url(data/customTemplates/dashboard/cmd.action.slider.ShutterSlider/"+image+".png) no-repeat !important;"+
"background-position: bottom center !important;"+
"background-size: "+valueL+"px "+valueH+"px !important;");
cmd.find('#custom-handle').css({"width": valueL+"px", "background": "url(data/customTemplates/dashboard/cmd.action.slider.ShutterSlider/selecteur_"+couleurSelecteur+".png) center"});
cmd.find('.ui-slider-range').css({'background': 'url(data/customTemplates/dashboard/cmd.action.slider.ShutterSlider/lame_'+couleurLames+'.png) center','background-size': +valueL+'px '+hauteurLames+''});
if (position >= 99) {
position = 'Ouvert';
} else if (position < 1) {
position = 'Fermé';
cmd.find('.ui-slider-range').css({'background': 'url(data/customTemplates/dashboard/cmd.action.slider.ShutterSlider/lamepleine_'+couleurLames+'.png) center','background-size': +valueL+'px '+hauteurLames+''});
} else { position = position+' #unite#'; }
cmd.find('.sliderValue').text(position);
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#'});
$(".cmd[data-cmd_uid=#uid#] #shutterSlider").on('slidestop', function (event,ui) {
jeedom.cmd.execute({id: '#id#', value: {slider: ui.value}});
});
</script>
<style>
#custom-handle {
height: 9px;
border-radius: 0 0 4px 4px!important;
margin-left: 5px;
}
.sliderValue {
position:relative;
margin-top:9px;
}
</style>
</div>
2 nouveaux paramètres optionnels:
inverser la position du volet pour que 0% = Ouvert et 100% = Fermé (Mettre la valeur 1 ou on | désactivé par défaut).
Permet de cacher l’affichage de la valeur de la position sous le widget (off | on par défaut).
J’attends vos retours !! Merci par avance 
1 « J'aime »
Alors on est bon au niveau de l’affichage. Les commande invert et position sont ok.
Pacontre au niveau de la commande envoyé au volet ça reste inversé !
Je sais pas si je me suis bien fait comprendre !
…J’ai du mal à réfléchir en pourcentage de fermeture 
ça veut dire que quand tu positionne le sélecteur à 75% le volet s’ouvre à 25% ? donc ets fermé à 75% ?
…Je vais y regarder plus en détail demain j’ai balancé un truc à l’arrache là pour vous laisser faire le debug justement
Oui, c’est ça . Ou si tu veux en mode inversé quand je clique pour l’ouvrir à 25% il me l’ouvre à 75% ! lol
En tout cas merci pour ce que tu fais !
Faut remercier @Bison
Si tu veux bien expliquer de quelle manière tu as réglé ton offset éventuellement ? et la qualité du rendu ? Merci
Alors je suis comme ça :
Et ensuite , ça me donne ça :
Si j’ouvre légèrement le bas de « l’icône » volet, mon volet s’ouvre jusqu’à être fermé légèrement !
En faite, si je lui demande d’ouvrir à 25 % , il me le met à 25% fermé
Mon widget est configuré comme ça :
Merci ça fait des exemples mais je répondais à @PHB_fr qui attendait le paramètre offset avec impatience !
C’est vrai qu’au milieu de tous ces remerciements on s’y perd
Je suis a 14 % sur un des volets faut que je mesure le décollement de chacun en fonction du poids du volet et sa taille les vitesses ne sont pas les mêmes …
Tout petit défaut quand on fait un slide avec la souris il ne tient pas compte du décollage mais si on fait un clic sur la zone que l’on veut ouvrir ça semble Ok !
Petit défaut sur l’affichage quand on est a 15% en bas tu sembles afficher 1% et coup c’est plus la valeur de l’état.
Bref c’est du cosmétique dans sa version actuelle c’est déjà parfait.
Salut,
Tu peux regarder le pourcentage qui s’affiche quand tu slides car il tient compte de l’offset. A la fin de la l’action il se recale.
Si tu as défini un offset à 14%, tant que tu es entre 1% et 14 % il affiche 1% pour signifier que c’est avant la phase de décollage. Ensuite à 15% le calcul doit donner… 1%.
@Salvialf, à la rigueur à la place de 1% si on est en dessous de l’offset, tu pourrais pas afficher un texte style « ajouré » ?
2 « J'aime »
Pouvez-vous essayer avec ce code et me faire un retour svp ?:
<!-- ############ ShutterSlider ############## -->
<!-- ********* Paramètres Optionnels ********* -->
<!-- hauteur = hauteur de l'image en pixels (85 par défaut) -->
<!-- largeur = largeur de l'image en pixels (65 par défaut) -->
<!-- image = nom de l'image de fond (baie_blanc par défaut) --> <!-- baie_blanc|baie_blanc2|baie_noir|baie_noir2|baie_bois|baie_bois2|fenetre|fenetre1,2,3,4|velux|garage|garage1,2,3 -->
<!-- selecteur = couleur du sélecteur (blanc | bois | noir par défaut) -->
<!-- lames = couleur des lames (bois | noir | blanc par défaut) -->
<!-- offset = valeur du pourcentage de décollement (désactivé par défaut) -->
<!-- invert= inverser la position (1 | on | désactivé par défaut) -->
<!-- position= désactiver l'affichage de la position (off | on par défaut) -->
<!-- ########### by @SALVIALF ;) ############# -->
<div style="margin:5px;" class="cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div id="shutterSlider" class="vertical-slider" value="#state#">
<span id="custom-handle" class="ui-slider-handle"></span>
</div>
<div class="value sliderValue"></div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var cmd = $('.cmd[data-cmd_id=#id#]');
var valueH = is_numeric('#hauteur#') ? parseFloat('#hauteur#'):85;
var valueL = is_numeric('#largeur#') ? parseFloat('#largeur#'):65;
var couleurLames = ('#lames#' !='#'+'lames#') ? '#lames#' : 'blanc';
var couleurSelecteur = ('#selecteur#' !='#'+'selecteur#') ? '#selecteur#' : 'noir';
var image = ('#image#' !='#'+'image#') ? '#image#' : 'baie_blanc';
var position = ('#state#' == '') ? 0 : parseInt(_options.display_value);var hauteurLames = (image.search("garage")) ? '9px' : '15px';
var offset = ('#offset#' !='#'+'offset#' && '#offset#' != '' && '#offset#' >= 1) ? '#offset#' : false;
('#position#' == 'off') ? cmd.find('.sliderValue').hide() : '';
('#invert#' !='#'+'invert#' && '#invert#' != '') ? position=99-position : '';
if (offset != false) {
if (position >= 1 && position <= offset) {
position = 1;
} else if (position > offset) {
var D = offset;
var E = (99-D)/4;
var P = D/4;
position = Math.trunc(((position-D)*P/E)+position-D);
} else { position = 0; }
}
cmd.find('#shutterSlider').slider({
classes: {
"ui-slider-range": "square"
},
min: 0,
max: 99,
value: position,
orientation: 'vertical',
animate: "slow",
range: "max",
slide: function(event,ui) {
if (offset != false) {
if (ui.value < 1) {
cmd.find('.sliderValue').text('Fermé');
} else if (ui.value >= 1 && ui.value <= offset) {
cmd.find('.sliderValue').text(1+' #unite#');
} else if (ui.value >= 99) {
cmd.find('.sliderValue').text('Ouvert');
} else {
var D = offset;
var E = (99-D)/4;
var P = D/4;
cmd.find('.sliderValue').text(Math.trunc(((ui.value-D)*P/E)+ui.value-D)+' #unite#');
}
}
else if (ui.value < 1) {
cmd.find('.sliderValue').text('Fermé');
} else if (ui.value >= 99) {
cmd.find('.sliderValue').text('Ouvert');
} else {
cmd.find('.sliderValue').text(ui.value+' #unite#');
}
}
})
cmd.attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate);
cmd.find('#shutterSlider').attr("style", "height: "+valueH+"px; width: +"+valueL+"px!important;"+
"background: url(data/customTemplates/dashboard/cmd.action.slider.ShutterSlider/"+image+".png) no-repeat !important;"+
"background-position: bottom center !important;"+
"background-size: "+valueL+"px "+valueH+"px !important;");
cmd.find('#custom-handle').css({"width": valueL+"px", "background": "url(data/customTemplates/dashboard/cmd.action.slider.ShutterSlider/selecteur_"+couleurSelecteur+".png) center"});
cmd.find('.ui-slider-range').css({'background': 'url(data/customTemplates/dashboard/cmd.action.slider.ShutterSlider/lame_'+couleurLames+'.png) center','background-size': +valueL+'px '+hauteurLames+''});
if (position >= 99) {
position = 'Ouvert';
} else if (position < 1) {
position = 'Fermé';
cmd.find('.ui-slider-range').css({'background': 'url(data/customTemplates/dashboard/cmd.action.slider.ShutterSlider/lamepleine_'+couleurLames+'.png) center','background-size': +valueL+'px '+hauteurLames+''});
} else { position = position+' #unite#'; }
cmd.find('.sliderValue').text(position);
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#'});
$(".cmd[data-cmd_uid=#uid#] #shutterSlider").on('slidestop', function (event,ui) {
jeedom.cmd.execute({id: '#id#', value: {slider: ('#invert#' !='#'+'invert#' && '#invert#' != '') ? 99-ui.value : ui.value}});
});
</script>
<style>
#custom-handle {
height: 9px;
border-radius: 0 0 4px 4px!important;
margin-left: 5px;
}
.sliderValue {
position:relative;
margin-top:9px;
}
</style>
</div>
C’est nickel ! ça marche beaucoup mieux. Merci
MISE A JOUR
-
Ajout du paramètre
invertpermettant d’inverser la position (1 | on | désactivé par défaut). -
Ajout du paramètre
positionpermettant de cacher l’affichage de la valeur de la position sous le widget (off | on par défaut). -
La taille par défaut est passée à 90px*90px. (@jpty
) -
Lorsque le paramètre
offsetest renseigné le widget afficheAjouréau lieu de1%(@Bison )
1 « J'aime »
Bonsoir … Super ca fonctionne correctement avec le flag INVERT
Merci pour ce boulot.
J’ai une petite requête si possible. Serait-il possible de changer la taille ou la couleur de l’affichage de la POSITION ?
Encore merci pout tes Widgets qui sont très utiles et performants .
1 « J'aime »
Merci pour le retour 
Oui c’est possible en personnalisation CSS avancée (Réglages → système → personnalisation avancée => case de droite CSS)
avec cette base de code à adapter:
/* Taille et couleur valeur position ShutterSlider */
div.value.sliderValue {
font-size: 18px !important;
color: red !important;
}
Super Ca Marche encore merci pour cette astuce ; utiliser la personnalisation CSS pour les affichages des valeurs Widgets
Merci
Bonjour, J’ai installer le widget avec comme option offset 0, mais cela fonctionne sur 2 volet roulant sur 5 qui m’afficher 1%, même fermer entièrement il affiche 1%.
J’ai fait une mauvaise manipulation, je comprend pas trop ce probleme.
Salut,
Comment ça offset 0 ?
Tu n’as pas du comprendre le principe du coup.
Le but de l’offset c’est de dire définir à quelle pourcentage (vue du module) le volet décolle du bas. Le reste du temps il est juste ajouré.
Donc pour le définir :
- supprimes offset
- positionnes « à la main » ton volet juste avant qu’il ne décolle du bas et regarde la valeur de pourcentage qu’indique le widget
- ajoutes la valeur offset avec cette valeur ou cette valeur+1 par exemple
Je pense aussi je vais essayer, je début grave dans jeedom.
J’ai fait ça mon tous mais équipement :
Pourtant sur 5 volet j’en ais 2 qui fonctionne bien afficher fermer, et les 3 autres quand fermer m affiche 1%.
Bisard
Quelle est la valeur de la commande en cliquant sur « Tester » lorsque le volet est fermé?