Widget récupérer la valeur précédente d'un état

Salut,

Je me demande s’il est possible de récupérer dans le code d’un widget, la valeur d’un état avant l’état en cours ?

Je reformule, on change un état de 10 à 50, le widget s’exécute et récupère le 50. Est-ce qu’il y a un moyen de récupérer la valeur 10 de l’état ?

Bonjour,

En partant du principe que le virtuel peut exécuter n’importe quoi :

  • En utilisant un scénario oui (variable locale ou variable)
  • En utilisant le plugin mode oui (retour au mode précédent)

Hum, tu veux dire que je peux exécuter un scénario avant l’envoi de la commande pour récupérer l’état courant (oldValue = 10) et donc exploiter cette variable dans le widget qui aura alors accès à la newValue = 50 (normal) ET à la variable oldValue ?

Ça me paraît trop usine à gaz là.

Le but étant de faire ça pour des états de volets.

Je pense effectivement à cela.
Ecriture de l’état actuel, changement et ainsi de suite.

Du coup, je vais suivre les autres propositions.

J’ai essayé plusieurs choses et lu pas mal de posts concernant les widgets mais rien à faire, je pige pas.

Il faudrait une sorte de fonction qui puisse s’exécuter avant le vrai update puisque de ce que j’ai compris c’est cette fonction « jeedom.cmd.update » qui gère :

jeedom.cmd.update['#id#'] = function(_options){
 var testvalue = parseInt(_options.display_value);
 console.log("value : ", testvalue); 

Ici je récupère bien une valeur mais c’est la nouvelle.

Je suis quasiment sûr qu’il y a moyen de le faire mais je suis vraiment trop mauvais en JS.

Je voulais essayer en « interceptant » le click d’un bouton avec une methode onclick mais comme ce bouton est en dehors du widget je ne vois pas du tout comment m’y prendre.

image

Si un codeur fou passe par là me donner la technique (ou pas fou même) :wink:

bonjour, dés lors que tu est la c’est que la valeur a déjà changée …
tu ne peut a ce niveau que stocker cette valeur dans une variable pour qu’au prochain appel tu puisse t’en servir.

Bonne journée

1 « J'aime »

bonjour sans widget tu peux aussi

Sans-titre4 (1)
valeur historisé sans lisage

lastBetween(#[test][date][sum2]#,yesterday, -2sec)

2 « J'aime »

@Salvialf, @ajja17orange merci pour vos réponses.

Je voulais éviter de repasser encore par la définition d’une autre commande.

Je suis passé finalement par localStorage.setItem et localStorage.getItem, ça a l’air de faire le job.

Salvialf j’ai essayé d’introduire la notion du temps de mouvement sur ShutterSlider, qu’en penses-tu ?

Par contre j’ai une soucis que je ne comprends pas car la notion de transition a bien l’air de s’appliquer sur un élément mais pas forcement sur les 2. L’élément du bas a l’air de faire la transition correctement mais pas forcement le volet en lui même. Est-ce un problème de navigateur ou est-ce lié au code que j’ai rajouté ?

Le code en entier (il y a des console.log dedans) :

<div class="shutterSlider cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
 <!-- ############ ShutterSlider ##############
 ********* Paramètres Optionnels ********* 
 height = hauteur de l'image en pixels (90 par défaut)
 width = largeur de l'image en pixels (90 par défaut)
 image = nom de l'image de fond (baie_blanc par défaut)
** bay_white|bay_white2|bay_black|bay_black2|bay_wood|bay_wood2|window|window1,2,3,4|velux|garage|garage1,2,3 **
 handle = couleur du sélecteur (light | wood | dark par défaut)
 lames = couleur des lames (wood | dark | light 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)
 time = affiche la durée (duration | date | hour | off par défaut)
 CSS-time = personnalisation time en CSS
 ########### by @SALVIALF ;) ############# -->
   <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
    <div id="shutterSlider" class="square" value="#state#">
  	  <span class="ui-slider-handle"></span>
  </div>
    <div class="sliderValue"></div>
    <span class="timeCmd #value_history#" data-type="info" data-cmd_id="#value_id#"></span>
  <script>
      
  
     jeedom.cmd.update['#id#'] = function(_options){
      let cmd = $('.cmd[data-cmd_id=#id#]');
      let maxValue = parseInt('#maxValue#');
      let height = is_numeric('#height#') ? parseFloat('#height#'):90;
      let width = is_numeric('#width#') ? parseFloat('#width#'):90;
      let couleurLames = ('#rails#' !='#'+'rails#') ? '#rails#' : 'light';
      let couleurSelecteur = ('#handle#' !='#'+'handle#') ? '#handle#' : 'dark';
      let image = ('#image#' !='#'+'image#') ? '#image#' : 'bay_white';
      let images = ["bay_white","bay_white2","bay_black","bay_black2","bay_wood","bay_wood2","window","window1","window2","window3","window4","velux","garage","garage1","garage2","garage3"];
      let hauteurLames = (image.search("garage")) ? '9px' : '15px';
      let movementTime = is_numeric('#movementTime#') ? parseFloat('#movementTime#'):1;
      let offset = ('#offset#' !='#'+'offset#' && '#offset#' != '' && '#offset#' > 1) ? '#offset#' : false;
      ('#position#' == 'unchecked') ? cmd.find('.sliderValue').remove() : '';
      ('#invert#' == 'checked') ? position = maxValue - position : '' ;
      ('#CSS-time#' != '#'+'CSS-time#' && '#CSS-time#' != '') ? cmd.find('.timeCmd').attr('style','#CSS-time#') : '';
      let position = ('#state#' == '') ? 0 : parseInt(_options.display_value);
    
       var lastPosition#id# = localStorage.getItem('lastPosition#id#');
	   if (lastPosition#id# == null) {
           console.log("lastPosition existe pas");
       } else {
           console.log("lastPosition : ", lastPosition#id#);
           movementTime = Math.abs(Math.round((lastPosition#id#-position)*movementTime/100));
           console.log("movementTimeCalcul : ", movementTime);
       }
    
      localStorage.setItem('lastPosition#id#',position);
     console.log("position demandée : ", position); 
   	if (offset != false) {
     if (position >= 1 && position <= offset) {
       	position = 1;
     } else if (position > offset) {
     	position = Math.round(100*(position-offset)/(maxValue-offset));
     } else { position = 0; }
    }

      console.log("position corrigée : ", position); 
     
      cmd.find('#shutterSlider').slider({
        classes: {
          "ui-slider": "square",
  			"ui-slider-range": "square"
             },
        min: 0,
        max: maxValue,
        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('Ajouré');
          	} else if (ui.value >= maxValue) {
              cmd.find('.sliderValue').text('Ouvert');
          	} else {
				cmd.find('.sliderValue').text(Math.trunc(100*(ui.value-offset)/(maxValue-offset))+' #unite#');
            }
          }
          else if (ui.value < 1) {
              cmd.find('.sliderValue').text('Fermé');
            } else if (ui.value >= maxValue) {
              cmd.find('.sliderValue').text('Ouvert');
          	} else {
        	cmd.find('.sliderValue').text(ui.value+' #unite#');
          }
          }
      }).on('slidestop', function (event,ui) {
      jeedom.cmd.execute({id: '#id#', value: {slider: ('#invert#' == 'checked') ? maxValue-ui.value : ui.value}});
    });

    if (images.includes(image)) {
      backgroundPath = 'data/customTemplates/dashboard/cmd.action.slider.ShutterSlider';
    } else {
      backgroundPath = 'data/img/ShutterSlider';
    }

    cmd.attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate);
    cmd.css('--shutterSlider-height', height+'px');
    cmd.css('--shutterSlider-width', width+'px');
    cmd.css('--shutterSlider-lames-height', hauteurLames);
    cmd.css('--shutterSlider-image', 'url('+backgroundPath+'/'+image+'.png');
    cmd.css('--shutterSlider-lames', 'url(data/customTemplates/dashboard/cmd.action.slider.ShutterSlider/lame_'+couleurLames+'.png)');
    cmd.css('--shutterSlider-handle', 'url(data/customTemplates/dashboard/cmd.action.slider.ShutterSlider/selecteur_'+couleurSelecteur+'.png)');
    cmd.css('--shutterSlider-movementTime', movementTime+'s');
     
     if (position >= maxValue) {
       position = 'Ouvert';
     } else if (position < 1) {
        position = 'Fermé';
        cmd.css('--shutterSlider-lames', 'url(data/customTemplates/dashboard/cmd.action.slider.ShutterSlider/lamepleine_'+couleurLames+'.png)');
     } else if (offset != false && position == 1) {
       position = 'Ajouré';
     } else { position = position + ' #unite#'; }

      cmd.find('.sliderValue').text(position);

      if (isset(_options.valueDate)) {
        if ('#time#' == 'duration') {
          jeedom.cmd.displayDuration(_options.valueDate,cmd.find('.timeCmd'));
      } else if ('#time#' == 'date') {
          let week = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
          let date = new Date(_options.valueDate.replace(' ', 'T'));
          let t = _options.valueDate.split(/[- :]/);
          let format = week[date.getDay()]+" "+t[2]+"/"+t[1];
          let time = "à "+t[3]+":"+t[4];
          cmd.find('.timeCmd').html(format+'<br>'+time);
      } else if ('#time#' == 'hour') {
          let t = _options.valueDate.split(/[- :]/);
          let time = "à "+t[3]+":"+t[4]+":"+t[5];
          cmd.find('.timeCmd').html(time);
        } else {
          cmd.find('.timeCmd').remove();
        }
      }

    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#'});
</script>
<style>
.shutterSlider {
  --shutterSlider-height: 90px;
  --shutterSlider-width: 90px;
  --shutterSlider-image: url(data/customTemplates/dashboard/cmd.action.slider.ShutterSlider/bay_white.png);
  --shutterSlider-lames: url(data/customTemplates/dashboard/cmd.action.slider.ShutterSlider/lame_light.png);
  --shutterSlider-lames-height: 9px;
  --shutterSlider-handle: url(data/customTemplates/dashboard/cmd.action.slider.ShutterSlider/selecteur_dark.png);
  margin:5px;
}
.shutterSlider .ui-slider-vertical {
  height: var(--shutterSlider-height);
  width: var(--shutterSlider-width)!important;
  background: var(--shutterSlider-image) no-repeat !important;
  background-position: bottom center !important;
  background-size: var(--shutterSlider-width) var(--shutterSlider-height)!important;
}
.shutterSlider .ui-slider .ui-slider-range {
  width:100%;
  background-color: unset!important;
  background-image: unset!important;
  background: var(--shutterSlider-lames) center!important;
  background-size: var(--shutterSlider-width) var(--shutterSlider-lames-height)!important;
  left: unset;
  transition: all var(--shutterSlider-movementTime)!important;
  transition-timing-function: linear!important;
}
.shutterSlider .ui-slider-handle {
  width: 100%;
  height: 9px;
  background: var(--shutterSlider-handle) center!important;
  border-radius: 0 0 4px 4px!important;
  left: unset!important;
  transition: all var(--shutterSlider-movementTime)!important;
  transition-timing-function: linear!important;
}
.shutterSlider .sliderValue {
  font-weight:bold;
  position:relative;
  margin-top:9px;
}
.shutterSlider .timeCmd {
  font-size:11px;
  padding:2px 4px 2px 4px;
  margin-top:4px;
  line-height:1em!important;
  display:inline-block!important;
}
</style>
</div>

La partie ou j’ai introduis les effets de transition qui n’ont pas l’air de s’appliquer chaque fois …

.shutterSlider .ui-slider .ui-slider-range {
  width:100%;
  background-color: unset!important;
  background-image: unset!important;
  background: var(--shutterSlider-lames) center!important;
  background-size: var(--shutterSlider-width) var(--shutterSlider-lames-height)!important;
  left: unset;
  transition: all var(--shutterSlider-movementTime)!important;
  transition-timing-function: linear!important;
}
.shutterSlider .ui-slider-handle {
  width: 100%;
  height: 9px;
  background: var(--shutterSlider-handle) center!important;
  border-radius: 0 0 4px 4px!important;
  left: unset!important;
  transition: all var(--shutterSlider-movementTime)!important;
  transition-timing-function: linear!important;

Merci !

Pas d’idées ?

Je peux tenter une autre approche pour voir si ça marche mieux en stockant la dernière valeur dans une commande info via un scénario comme proposé au départ mais je ne trouve pas comment lire cette information depuis le script du widget.

Est-ce que quelqu’un sait ?

Comment peut-on accéder à un Etat2 depuis un widget qui a été déclenché via update de la commande Etat ?