Inverser l'animation du volet roulant

Utilisation du core de Jeedom Widgets
1

Bonjour à tous.
j’essaye de créer un slider pour volet roulant avec l’animation du volet à la position du slider, mais je n’arrive pas à inverser la position du volet par rapport au slider. Voici les 2 images pour plus de compréhension:
Sur l’image, mon slider est à 99%, mon volet est ouvert, mais l’image du volet est fermée
img99
Sur l’image, mon slider est à 0%, mon volet est fermé, mais l’image du volet est ouvert
img0

Voici le code:

<div class="cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" >
  
  <div class="title #hide_name#">
  
        <div class="cmdName" style="#hideCmdName#"></div>
    </div>
    	
  <div id="Valeur" style="display: none;"></div> 
 
   
     <div class="baie#id# black size-m">
   <div class="roller"></div>
   <span class="background"></span>
   
  <div class="rangesliderVolet#id#">
  <input id="write#id#" class="customrange#id#" type="range" orient="horizontal" data-step="1" min="#minValue#" max="#maxValue#" >
    <span class="custom-rangeslider__tooltip" style="font-size:15px;
  font-family: verdana; color:black;font-weight: bold;" id="bulle#id#"></span>
    
      <div class="range-slider__bar3"></div>
    <div class="range-slider__thumb3"></div> 
     <div id="volet#id#" class="output#id#" style="display: none;" ></div> <!-- ne pas afficher la valeur de output#id#" -->
  </div>   
  
  
    <script>
      
//action de simulation d'ouverture et fermeture des ouvrants
$(".baie#id#").dblclick(function(e) {
	$(this).toggleClass("slide", "");
	$(".tooltip.dbclic").fadeOut(); //tooltip
});
        
    </script>
 
<style>

 

/* dimension des ouvrants */

.size-m {
  width: 200px;
  height: 150px;
}


.baie#id#{
  position: relative;
  display: block;
  background: transparent;
  padding: 5px;
  margin: 20px 40px 35px;
  transform-style: preserve-3d;
  perspective: 300px;
  z-index: 10;
  float: left;
}

/* vitre de baie & fenetre */
.baie#id#:before,
.baie#id#:after{
  display: block;
  position: absolute;
  content: "";
  border: 10px solid black;
  width: 47.25%;
  height: calc(100% - 10px);
  top: 5px;
  margin: 0;
	box-shadow: 0 1px 2px black, inset 0 0 5px rgba(0, 0, 0, 0.75);
  z-index: 20;
  background: linear-gradient(
      135deg,
      rgba(183, 222, 237, 0.25) 0%,
      rgba(255, 255, 255, 0.35) 20%,
      rgba(113, 206, 239, 0.25) 50%,
      rgba(33, 180, 226, 0.15) 51%,
      rgba(183, 222, 237, 0.15) 100%
    ),
    linear-gradient(
      -165deg,
      rgba(224, 243, 250, 0.45) 0%,
      rgba(216, 240, 252, 0.25) 50%,
      rgba(184, 226, 246, 0.35) 51%,
      rgba(182, 223, 253, 0.35) 100%
    );
  
}

.baie#id#:before,
.baie#id#:after {
  width: 50% !important;
}
.baie#id#:after {
  height: calc(100% - 9px) !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 0 5px rgba(0, 0, 0, 0.75);
}
.baie#id#:before {
  box-shadow: 0 1px 2px transparent, inset 0 0 5px rgba(0, 0, 0, 0.75);
  border: 10px solid #f1f0f0;
}

.baie#id#:before{
  left: 5px;
  transition: all 1s ease;
}
.baie#id#:after {
  right: 5px;
  transition: all 1s ease;
}
/* état ouvert */
.baie#id#.slide:after {
  right: 40%;
  transition: all 1s ease;
}

/* couleurs */
.black {
   border: 5px solid #353535;
  box-shadow: inset 0 0 0 5px #2d2d2d, 0 1px 2px 0px rgba(0, 0, 0, 0.75);
}

.black:before,
.black:after {
  border: 10px solid #353535!important;
}

/* Volet roulant */
.roller {
  display: block;
  position: absolute;
  width: calc(100% - 10px);
  height: 0%;
  max-height: calc(100% - 10px);
  margin: 0px;
  padding: 0;
  left: 5px;
  right: 5px;
  top: 5px;
  border-bottom: 4px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  transform: translateZ(-10px);
  background-size: 10px 15px !important;
	transition:height 1.75s ease .75s ;
}

.black .roller {
  background: linear-gradient(0deg, #292929 10%, transparent 25%) 5px 0,
    linear-gradient(0deg, transparent 45%, #383838 76%),
    linear-gradient(
      0deg,
      transparent 26%,
      #222 38%,
      #252525 59%,
      transparent 60%
    ),
    #2f2f2f;
}

.black .roller {
  border: 4px solid #464646;
  border-left: 2px solid #232323;
  border-right: 2px solid #232323;
}


/* control slider pour volet roulant */
.rangesliderVolet#id# {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 20px;
  margin-top: 0px;
  transition: all 1s ease;
  margin-left: 5px;
  height: 100%;
  padding: 0;
}

.windows#id#.open .rangesliderVolet#id#{
  margin-left: -130px;
}





/* fond de fenêtre */
.background {
  display: block;
  background-image: url('data/customTemplates/dashboard/cmd.action.other.Multi-action-Defaut/fenetre/Back02.png');/* unique image ;) */
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  transform: translateZ(-11px);
  animation: day 360s infinite;
  box-shadow: inset 0 0 20px 10px rgba(0, 0, 0, 0.25);
}


/* Deuxieme Slider */



 .rangesliderVolet#id# {
	 display: block;
    margin-left: -105px;
   margin-top:-85px;
  
	 width: 150px;
	 position: relative;
	 text-align: center;
	 height: 50px;
	 max-height: 100%;
   transform: rotate(-90deg);
   
     
}

 .range-slider__thumb3 {
	  position: absolute;
	 /*left: 7.5px; /* position de la bulle à gauche */
	 width: 25px;
	 height: 25px;
	 line-height: 25px;
	 background: white; /* couleur du fond de la bulle */
	 color: black; /* Couleur du texte de la bulle*/
	 font-size: 100%; /* Taille du texte de la bulle*/
	 box-shadow: 0 0 0 4px #80FF00; /* Couleur et taille du contour de la bulle*/
	 border-radius: 50%;
	 pointer-events: none;
   transform: translate(30%, -155%) rotate(90deg);
}
 .range-slider__bar3 {
	  left: 7px;
	 bottom: 21px; /* position de la barre de défilement par raport au haut */
	 position: absolute;
   
	
    /* couleur de la barre de défilement*/
   background: linear-gradient(#000, #000) no-repeat, linear-gradient(45deg, rgba(0, 0, 0, .55) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .55) 75%), linear-gradient(45deg, rgba(0, 0, 0, .55) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .55) 75%), linear-gradient(0deg, #C8FE2E, #01DF01);
	 background-position: 50% 0, 0 0, 0.1875em 0.1875em;
	 background-size: 0% 100%, 0.375em 0.375em, 0.375em 0.375em, 100% 100%;
   /* couleur de la barre de défilement*/
   
      
   
	 pointer-events: none;
   height: 8px;
	 width: 150px;
	 border-radius: 10px;
}
 .rangesliderVolet#id# input[type=range][orient=horizontal] {
	 position: relative;
	 margin: 0;
	 height: 100%;
	 width: 100%;
	 display: inline-block;
	 position: relative;
	 writing-mode: horizontal-bt;
   
	 -webkit-appearance: slider-horizontal;
}
 .rangesliderVolet#id# input[type=range][orient=horizontal]::-webkit-slider-runnable-track, .rangesliderVolet#id# input[type=range][orient=horizontal]::-webkit-slider-thumb {
	 -webkit-appearance: none;
}
 .rangesliderVolet#id# input[type=range][orient=horizontal]::-webkit-slider-runnable-track {
	 /*box-sizing: border-box;*/
	 border: solid 1px #000;
	 width: 150px;
	 height: 22px;
	 box-shadow: 0 1px 1px rgba(119, 119, 119, .4), inset 0 0.325em 0.25em #0c0c0b, inset 0 0 0 0.375em #2a2a29, inset 0 0 0 0.5em #000;
	 border-radius: 0.95em;
	 background: #000;
   
     
    background: linear-gradient(27deg, #151515 0.125em, transparent 0.125em) 0 0.125em, linear-gradient(207deg, #151515 0.125em, transparent 0.125em) 0.25em 0px, linear-gradient(27deg, #222 0.125em, transparent 0.125em) 0px 0.25em, linear-gradient(207deg, #222 0.125em, transparent 0.125em) 0.25em 0.125em, linear-gradient(90deg, #1b1b1b 0.25em, transparent 0.25em), linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424) #131313;
	 
   background-size: 0.5em 0.5em;
	    
   cursor:pointer;
}

 
 .rangesliderVolet#id# input[type=range][orient=horizontal]::-webkit-slider-thumb {
	 width: 30px;
	 height: 30px;
	 opacity: 0;
   cursor:pointer;
}
 

   .custom-rangeslider__tooltip {
    
	 line-height: 10px;
	 position: absolute;
	 height: 30px; /*Hauteur de la bulle */
	 width: 50px; /*Largeur de la bulle */
	 background-color: #fff; /* couleur du fond de la bulle */
	 padding: 8px 4px;
	 border: 3px #80FF00 solid;
	 top: -40px; /*Position de la bulle */
	 left: 0;
	 text-align: center;
   
	 
	 border-radius: 13px;
	 -webkit-touch-callout: none;
	 -webkit-user-select: none;
	 -khtml-user-select: none;
	 user-select: none;
	 pointer-events: none;
  	opacity:0;
    
   
}


 .custom-rangeslider__tooltip:after {
	 display: block;
	 content: '';
	 background: #fff;
	 position: absolute;
	 border: 3px #80FF00 solid;
	 border-top: 0;
	 border-left: 0;
	 width: 10px;
	 height: 10px;
	 left: calc(95% - 0px);
	 bottom: 7px;
	 transform: rotate(-45deg);
  
}
  
  
   /* Survol du slider Afficher la bulle */
  .rangesliderVolet#id#:hover #bulle#id# {
  
  opacity:1;
    
        box-shadow: 0 0px 25px rgba(130, 250, 88, .7);
   
}
  
  
 .custom-rangeslider__label {
	 width: 100%;
	 display: block;
  
   
}


.custom-rangeslider__label span {
	 display: block;
  
  
}
 .custom-rangeslider__label-min {
	 float: left;
}
 .custom-rangeslider__label-max {
	 float: right;
}
 .custom-rangeslider__label:after {
	 content: "";
	 display: table;
	 clear: both;
}


  
 

   </style>
  
  
 
   
   
   <script>
  
   			var Value;
     jeedom.cmd.update['#id#'] = function(_options){
      	
        volet#id#.innerHTML = _options.display_value;
    		$('#write#id#').val(_options.display_value);
       
       
       
      		Value = this.value; 
      		Valeur.innerHTML = Value;
         
       

$("input.customrange#id#").change("input", function() {
	$(this)
		.parent()
		.siblings(".roller")
		.css("height", $(this).val() + "%")
		
});
       
       
       $("input.customrange#id#").load("input", function() {
	$(this)
		.parent()
		.siblings(".roller")
		.css("height", $(this).val() + "%")
		
});

//action de simulation d'ouverture et fermeture des ouvrants
/*$(".windows").dblclick(function(e) {
	$(this).toggleClass("open", "");
	$(".tooltip.dbclic").fadeOut(); //tooltip
});*/







  let app = (() => {

  function updateSlider(element) {
    if (element) {
      let parent = element.parentElement,
        lastValue = parent.getAttribute('data-slider-value');

      if (lastValue === element.value) {
        return; // No value change, no need to update then
      }

       parent.setAttribute('data-slider-value', element.value);
      let $thumb = parent.querySelector('.range-slider__thumb3'),
        $bar = parent.querySelector('.range-slider__bar3'),
        pct = (element.value - element.min) / element.max * 100 * ((parent.clientWidth - $thumb.clientWidth) / parent.clientWidth);

      $thumb.style.left = `${pct}%`;
      $bar.style.width = `calc(${pct}% + ${$thumb.clientWidth/2}px)`;
      $thumb.textContent = '' + (element.value / (element.dataset.step || 1));
    }
  }
  return {
    updateSlider: updateSlider
  };

})();

(function initAndSetupTheSliders() {
  const inputs = [].slice.call(document.querySelectorAll('.rangesliderVolet#id# input'));
  inputs.forEach(input => input.setAttribute('value', ''));
  inputs.forEach(input => app.updateSlider(input));
  // Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
  inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
  inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
})();
       
       
       
       //Script tooltip//

(function(win, dom){
    'use strict';
  
    // Check for .rangeControl class
    var rangeControlList = dom.getElementsByClassName('customrange#id#');
  
    // Inits components
    var init = function(){
      
      // Loop all controls
      for (var i = 0; i < rangeControlList.length; i++) {
        
        // Apply inital
        updateController(rangeControlList[i]);
        // Update when changed
        rangeControlList[i].addEventListener('input', function() {
          updateController(this);
        });
        // Update when changed ( for older browsers )
        rangeControlList[i].addEventListener('change', function() {
          updateController(this);
        });
      }
    }
    
    // Updates components
    var update = function(){
      for (var i = 0; i < rangeControlList.length; i++) {
         updateController(rangeControlList[i]);
      }
    }

    // Update controller
    var updateController = function(obj){
      // Thumb Position
      var thumbPos = getThumbPercentage(obj);
      var thumPosPX = getThumbPosition(obj);
      if(obj.getAttribute("data-tooltip") != "false"){
        updateTooltip(obj.nextElementSibling, obj.value, thumPosPX, thumbPos);
      }else{
        obj.nextElementSibling.style.display = "none";
      }
      //updateProgress(obj, 'transparent', ('#C8FE2E, #01DF01'), thumbPos);
    }

    // Retun range slider pixel position according to offset
    // obj : target object
    var getThumbPosition = function(obj){
      return Math.round((obj.offsetWidth / 100) * obj.value); // Pixel
    }

    // Retun range slider percentage to thumb position
    // obj : target object
    var getThumbPercentage = function(obj){
      return Math.round(100 * obj.value/obj.getAttribute("max")); // Percentage
    }
    
    // Updated range slider tooltip
    // obj : target object
    // text : tooltip label
    // position : absolute position
    // percentage : percentage of current value
    var updateTooltip = function(obj, text, position, percentage){
      obj.innerHTML = text; // Tooltip text
      obj.style.left = position + 'px'; // Tooltip position

      // Tooltip Position
      var tooltipStartPos = 8;
      var tooltipPosFix = percentage / 1.8;
      if(percentage > 50){
        tooltipPosFix = percentage / 2.2;
      }
      obj.style.transform = 'translate(-'+ (tooltipStartPos + tooltipPosFix) +'%, 0) rotate(90deg)';
      //Rotation du texte de la bulle
    }
    
    // Updated background progress bar of range slider
    // obj : target object
    // progressBgColor : background color
    // progressFillColor : fill color
    // percentage : percentage of current value
    var updateProgress = function(obj, progressBgColor, progressFillColor, percentage){
      var rangeBg = 'linear-gradient(to right,  '+ progressFillColor +' 0%, '+ progressFillColor +' '+ percentage +'%, '+ progressBgColor +' '+ percentage +'%, '+ progressBgColor +' 100%)';
      var cssRule = '#'+ obj.id +'::-webkit-slider-runnable-track { background : '+ rangeBg +' } ';
      cssRule += '#'+ obj.id +'::-moz-range-track { background : '+ rangeBg +' } ';
      cssRule += '#'+ obj.id +'::-ms-track { background : '+ rangeBg +' } ';
      var applyStyle = function(styleName, cssText) {
          var styleElement = dom.getElementById(styleName);
          if (styleElement) dom.getElementsByTagName('head')[0].removeChild(styleElement);
          
          styleElement = dom.createElement('style');
          styleElement.type = 'text/css';
          styleElement.id = styleName;
          styleElement.innerHTML = cssText;
          dom.getElementsByTagName('head')[0].appendChild(styleElement);
      }
      applyStyle('range_'+ obj.id, cssRule);
    }
    
  // Refresh on resize
  var fireOnceOnResize;
  win.addEventListener('resize', function () {
    fireOnceOnResize = setTimeout(update, 100);
  });
  
  // Init Component
  init();
  
}(window, document));

    

       
       
       
    
		         	
        }
   
        
	var customrange#id# = document.getElementById("write#id#");
    var output#id# = document.getElementById("volet#id#");
	output#id#.innerHTML = customrange#id#.value;

	customrange#id#.oninput = function() {
 	output#id#.innerHTML = this.value;
}
     
	
    	write#id#.oninput = function() {
      		Value = this.value; 
      		Valeur.innerHTML = Value;
         
       
      
		}
        
        
    /*  var customrange = document.getElementById("write#id#");  
      var output#id# = document.getElementById("volet#id#");
      output#id#.innerHTML = customrange.value;
 	  
      customrange.onmousemove = function() {
  	  output#id#.innerHTML = this.value; 
   }     */
     
     
     var customrange#id# = document.getElementById("write#id#");  
      var output#id# = document.getElementById("volet#id#");
      output#id#.innerHTML = customrange#id#.value;

      customrange#id#.onchange = function() {
      output#id#.innerHTML = this.value;
           
            
 
   jeedom.cmd.execute({id: '#id#', value: {slider: Value}});
    
  
}

    	
   
    	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
    </script>
  
  

  
</div>

Merci à tous pour votre aide.

2

Salut,

Heu pourquoi ne pas simplement afficher l’image du volet qui va bien en fonction de la position sur la commande Etat liée (info/numérique) ? Tu obtiendrais le même résultat sans toute cette usine à gaz…

3

C’est vrais que c’est une usine a gaz mais bon faut bien commencer un jour…

bon mais en gros tu récupère dans l’update jeedom disons par exemple une valeur qui va de 0 a 100
pour inversé tu fait :

valeur = 100 - valeur ;

4

Merci, mais en fait, lorsque je bouge mon slider, le volet roulant s’anime jusqu’à la position souhaitée, ce n’est pas une image. Le seul hic,c’est que c’est inversé.
Merci

5

Merci, mais te serait-il possible de corriger le code, car je n’y arrive pas?

6

J’avais bien compris pour l’animation… la Smart arrive à suivre un tel widget sur plusieurs commandes?

7

Oui, j’ai 7 volets et ça fonctionne nickel, à par l’inversion.

8

En plus, je ne sais pas si tu as essayé, mais lorsque l’on double click sur la fenêtre, elle s’ouvre. Cela me servira plus tard pour contrôler l’état de mes ouvrants. (le code n’est pas de moi mais de Christophe Molina B. disponible sur codepen à cette adresse:https://codepen.io/10tribu/pen/xXgNvN.

9

C’est sûr c’est propre ! C’était surtout avec le curseur perso en + que ça m’inquiétait mais si la Smart encaisse sans broncher c’est tant mieux

10

Non je fait pas les devoir des autres, si je le faisait tu n’apprendrait rien …
On peut aider guider orienter mais pour moi ça s’arrête la .

Repart d’une version qui fonctionne puis par petite touches de modification cherche la solution.

indice la valeur arrive dans cette fonction juste après ca :

 jeedom.cmd.update['#id#'] = function(_options){

et il serait plus logique d’écrire aprés ca :

var Value = _options.display_value;

et de travailler avec Value …

1 « J'aime »
11

Merci, j’essaye, mais pour le moment sans grands résultats…A suivre.
Merci pour le coup de pouce.

12

Merci olive pour tes conseils et ta motivation pour m’obliger à trouver la solution moi-même. L’effort a payé et j’ai pu finaliser mon slider volet roulant.
Encore merci.

13

Ben je suis super content et tu doit l’être encore plus d’avoir trouvé par toi même la solution.

14

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.