Widget Curseur vertical

Adefx · Décembre 12, 2023, 4:57

Bonjour à tous.
Dans ma quête actuelle de perfectionnement de l’interface, :
Y a t’il quelqu’un de la communauté capable de créer ce widget slider vertical ?
Cela a pour but d’améliorer les sliders de lampe équipée d’un dimmer

Voila comment je vois le fonctionnement :
Les touche + et - modifient la valeur du curseur, avec un pas réglable

Pour infos :
Police Roboto condensed
Couleur
Fond Touches : d1d1d1
Fond curseur : ececec
Couleur Barre : 7e7e7e
Couleur police: 7e7e7e

Simple fonctionnel mais inexistant ?
Merci à vous

Phpvarious · Décembre 14, 2023, 9:50

Bonsoir,

Voici un widget qui ce rapproche de la demande :

action.slider.vertical_button_v1_visuel

https://phpvarious.github.io/documentation/widget/fr_FR/action/slider/cmd.action.slider.vertical_button_v1/

Adefx · Décembre 14, 2023, 10:22

qui se rapproche ?? tu veux rire , c’est exactement ce que je demande / décrit Au top !

Capture d'écran 2023-12-14 231805

Par contre dans mon cas la police ne se centre pas
Settings

Autre behavior étrange qui doit avoir un rapport avec le css mais lors que des valeurs de style de la case sont saisies cela influe sur les Values du widget ( Couleur du texte / fond etc )

RE.Edit, a coup sur du Css, le widget est dans 2 tuiles lumières différentes dans le même objet/pièces.
L’appui du + / - sur le deuxième widget fait bouger le fond du premier mais pas le deuxieme!
Si les tuiles ne sont pas dans le meme objet/pieces alors aucun soucis, behavior correct

Phpvarious · Décembre 15, 2023, 6:08

Il manque le #

J’ai poussé une nouvelle version sur le git.

Je suis pas sûr que cela va résoudre le fait que la value ne soit pas centrée, mais il devrait résoudre le problème d’interaction entre widgets.

Teste la nouvelle version, et corrige le paramètre optionnel.
Vu que tu travail certainement en onglets multiples dans ton navigateur, hésite pas a refresh la page du dashboard a chaque fois que tu fais une modif dans ton équipement.

Adefx · Décembre 15, 2023, 9:30

Après correction des variables et le Push le problème d’interaction est corrigé. par contre on a toujour un petit soucis niveau centrage ( caractere et iconne + - )

avec ces variables

Pour corriger l’alignement du + et moins j’ai modifié le padding du bouton

   .btn#id# {
      display: inline-block;
      color: var(--bt-color#id#) !important;
      background-color: var(--bt-background#id#) !important;
      width: var(--width#id#);
      height: 28px;
      padding: 6px 8px;
      line-height: 16px;
      font-size: 18px;
    }

devient

   .btn#id# {
      display: inline-block;
      color: var(--bt-color#id#) !important;
      background-color: var(--bt-background#id#) !important;
      width: var(--width#id#);
      height: 28px;
      padding: 6px 6px;
      line-height: 16px;
      font-size: 18px;
    }

Adefx · Décembre 15, 2023, 12:02

Idem pour la police

    .value#id# {
      position: absolute;
      top: 50%;
      z-index: 2;
      background-color: transparent !important;
      width: var(--width7698) !important;
      font-size: var(--font-size#id#) !important;
      color: var(--text-color#id#) !important;
      text-align: center;
      font-weight: bold;
      line-height: 0px;
    }

On change la position en relative au lieu d’absolute

    .value#id# {
      position: relative;
      top: 50%;
      z-index: 2;
      background-color: transparent !important;
      width: var(--width7698) !important;
      font-size: var(--font-size#id#) !important;
      color: var(--text-color#id#) !important;
      text-align: center;
      font-weight: bold;
      line-height: 0px;
    }

Adefx · Décembre 15, 2023, 12:31

Pour conclure voici le code corrigé et les valeurs pour obtenir la meme chose que chez moi

C’est a dire cela
Capture d'écran 2023-12-15 132931

code widget

<div class="cmd cmd-widget" data-type="action" data-subtype="slider" data-template="button" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <!-- ################ Slider Vertical Button v1 ################ 
  Widget name : cmd.action.slider.vertical_button_v1
  Author : Phpvarious
  Version : 2023/12/15 07h00
  Link : https://phpvarious.github.io/documentation/widget/fr_FR/action/slider/cmd.action.slider.vertical_button_v1/
  Tested with Jeedom V4.3.20
-->
  <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
  <div class="content-sm">
    <center>
    <input type="text" class="input-sm form-control in_value#id# hidden" value="#state#" disabled/>
    <a class="btn#id# btn-top#id# bt_plus"><i class="fa fa-plus"></i></a>
    <div id="slider-vertical#id#" class="slider slider#id#">
      <div class="value#id#">#state#</div>
    </div>
    <a class="btn#id# btn-bottom#id# bt_minus"><i class="fas fa-minus"></i></a>
    </center>
  </div>
  <style>
    :root {
      --width#id# : 40px;
      --height#id# : 100px;
      --bt-background#id# : var(--btnEq-default-color);
      --bt-color#id# : var(--link-color);
      --background#id# : var(--el-defaultColor);
      --slider-background#id# : var(--link-color);
      --text-color#id# : var(--txt-color);
      --font-size#id# : 18px;
      --notif-color#id# : var(--logo-primary-color);
    }
    .slider#id# {
      position: relative;
      margin: 0 32px !important;
      height: var(--height#id#) !important;
      display: block;
      width: var(--width#id#) !important;
      border-radius: 0px;
    }
    .slider#id# div.ui-slider-range {
      display: block;
      height: 250px;
      -moz-border-radius: 250px;
      -webkit-border-radius: 250px;
      border-radius: 250px;
    }
    .slider#id#.ui-slider div.ui-slider-range {
      background-color: var(--slider-background#id#) !important;
      /* box-shadow: inset 0 0 4px rgba(0, 85, 151, 0.8), inset 0 0 2px rgba(0, 0, 0, 0.5); */
    }
    .slider#id# .ui-slider-handle.ui-corner-all.ui-state-default {
      display: none;
    }
    .slider#id#.ui-slider.ui-slider-vertical .ui-slider-range {
      left: unset !important;
      width: 100% !important;
    }
    .slider#id#.ui-slider .ui-slider-range, .slider#id#.ui-slider .ui-corner-all.ui-slider-range {
      border-radius: 0px !important;
    }
    .slider#id#.slider.ui-slider {
      background: var(--background#id#) !important;
      cursor: pointer;
    }
    .btn#id# {
      display: inline-block;
      color: var(--bt-color#id#) !important;
      background-color: var(--bt-background#id#) !important;
      width: var(--width#id#);
      height: 23px;
      padding: 4px 4px;
      line-height: 16px;
      font-size: 15px;
    }
    .btn-top#id# {
      border-radius: 6px 6px 0px 0px;
    }
    .btn-bottom#id# {
      border-radius: 0px 0px 6px 6px;
    }
    .value#id# {
      position: relative;
      top: 50%;
      z-index: 2;
      background-color: transparent !important;
      width: var(--width7698) !important;
      font-size: var(--font-size#id#) !important;
      color: var(--text-color#id#) !important;
      text-align: center;
      font-weight: bold;
      line-height: 0px;
    }
  </style>
  <template>
    <div>width : Largeur du slider. [ défaut : 40 ]</div>
    <div>height : Hauteur du slider. [ défaut : 100 ]</div>
    <div>step : Pas utilisé pour le changement de valeur. [ défaut : 1 ]</div>
    <div>backgroundBt : Couleur de fond des boutons. [ défaut : couleur du Core ]</div>
    <div>colorBt : Couleur des icones des boutons. [ défaut : couleur du Core ]</div>
    <div>backgroundSlider : Couleur de fond du slider. [ défaut : couleur du Core ]</div>
    <div>colorCurseur : Couleur du slider. [ défaut : couleur du Core ]</div>
    <div>colorValue : Couleur du texte. [ défaut : couleur du Core ]</div>
    <div>sizeValue : Taille du texte de la valeur. [ défaut : 18 ]</div>
    <div>hideValue : Masque la valeur lorsque qu'il n'y a pas de mouvement du curseur. [ défaut : 0 ]</div>
    <div>notifUpdate : Change la couleur de la valeur lors d'un update. [ défaut : 1 ]</div>
    <div>notifUpdateColor : Couleur de la valeur lors d'un update. [ défaut : #96c927 ]</div>
  </template>
  <script>
    var step#id# = 1
    var showValue#id# = true
    var notifUpdate#id# = true
    if (is_numeric('#width#')) document.documentElement.style.setProperty('--width#id#', '#width#' + 'px')
    if (is_numeric('#height#')) document.documentElement.style.setProperty('--height#id#', '#height#' + 'px')
    if ($.issetWidgetOptParam('#step#', 'step')) step#id# = parseFloat('#step#')
    if ($.issetWidgetOptParam('#backgroundBt#', 'backgroundBt')) document.documentElement.style.setProperty('--bt-background#id#', '#backgroundBt#')
    if ($.issetWidgetOptParam('#colorBt#', 'colorBt')) document.documentElement.style.setProperty('--bt-color#id#', '#colorBt#')
    if ($.issetWidgetOptParam('#backgroundSlider#', 'backgroundSlider')) document.documentElement.style.setProperty('--background#id#', '#backgroundSlider#')
    if ($.issetWidgetOptParam('#colorCurseur#', 'colorCurseur')) document.documentElement.style.setProperty('--slider-background#id#', '#colorCurseur#')
    if ($.issetWidgetOptParam('#colorValue#', 'colorValue')) document.documentElement.style.setProperty('--text-color#id#', '#colorValue#')
    if (is_numeric('#sizeValue#')) document.documentElement.style.setProperty('--font-size#id#', '#sizeValue#' + 'px')
    if (is_numeric('#hideValue#') && '#hideValue#' == '1') {
      showValue#id# = false
      $('.cmd[data-cmd_uid=#uid#]').find('.value#id#').hide()
    }
    if (is_numeric('#notifUpdate#') && '#notifUpdate#' == '0') notifUpdate#id# = false
    if ($.issetWidgetOptParam('#notifUpdateColor#', 'notifUpdateColor')) document.documentElement.style.setProperty('--notif-color#id#', '#notifUpdateColor#')
    
    $( "#slider-vertical#id#" ).slider({
      orientation: "vertical",
      range: "min",
      min: #minValue#,
      max: #maxValue#,
      value: ('#state#' == '') ? #minValue# : '#state#',
      unite: '#unite#',
      step: step#id#,
      slide: function( event, ui ) {
        $('.cmd[data-cmd_uid=#uid#] .in_value#id#').val(ui.value)
        $('.cmd[data-cmd_uid=#uid#]').find('.value#id#').empty().append(ui.value)
      },
      start: function( event, ui ) {
        if (!showValue#id#) $('.cmd[data-cmd_uid=#uid#]').find('.value#id#').show()
      },
      stop: function( event, ui ) {
        jeedom.cmd.execute({id: '#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .in_value#id#').val()}})
      }
    })
    
    jeedom.cmd.addUpdateFunction('#id#', function(_options) {
      let sliderValue = $( "#slider-vertical#id#" ).slider( "option", "value" )
      let cmd = $('.cmd[data-cmd_uid=#uid#]')
      let position = _options.value
      let minValue = ('#minValue#' == '') ? 0 : parseInt('#minValue#')
      let maxValue = ('#maxValue#' == '') ? 100 : parseInt('#maxValue#')
      if (!showValue#id#) $('.cmd[data-cmd_uid=#uid#]').find('.value#id#').hide()
      
      if(!isset(_options.trigger) && showValue#id# && notifUpdate#id#) {
        $('.cmd[data-cmd_uid=#uid#]').find('.value#id#').attr('style', 'color: var(--notif-color#id#) !important');
        setTimeout(function () {
          $('.cmd[data-cmd_uid=#uid#]').find('.value#id#').attr('style', 'color: null');
        }, 900)
      }
      if (position != sliderValue) {
        $( "#slider-vertical#id#" ).slider( "value", position );
        $('.cmd[data-cmd_uid=#uid#] .in_value#id#').val(position)
        $('.cmd[data-cmd_uid=#uid#]').find('.value#id#').empty().append(position)
      }
    });
    
    $('.cmd[data-cmd_uid=#uid#] .bt_plus').on('click', function () {
      let max = ('#maxValue#' == '') ?  100 : parseFloat('#maxValue#')
      let step = (isNaN(parseFloat('#step#'))) ?  1 : parseFloat('#step#')
      if (parseFloat($('.cmd[data-cmd_uid=#uid#] .in_value#id#').val()) <= max - step ) {
        jeedom.cmd.refreshValue([{cmd_id :'#id#',value: parseFloat($('.cmd[data-cmd_uid=#uid#] .in_value#id#').val()) + step, trigger :'bt_plus'}] )
        $('.cmd[data-cmd_uid=#uid#] .in_value#id#').trigger('change')
      }
    })
    
    $('.cmd[data-cmd_uid=#uid#] .bt_minus').on('click', function () {
      let min = ('#minValue#' == '') ? 0 : parseFloat('#minValue#')
      let step = (isNaN(parseFloat('#step#'))) ?  1 : parseFloat('#step#')
      if (parseFloat($('.cmd[data-cmd_uid=#uid#] .in_value#id#').val()) >= min + step) {
        jeedom.cmd.refreshValue([{cmd_id :'#id#',value: parseFloat($('.cmd[data-cmd_uid=#uid#] .in_value#id#').val()) - step, trigger :'bt_minus'}])
        $('.cmd[data-cmd_uid=#uid#] .in_value#id#').trigger('change')
      }
    })
    
    $('.cmd[data-cmd_uid=#uid#] .in_value#id#').on('change', function () {
      if (!showValue#id#) $('.cmd[data-cmd_uid=#uid#]').find('.value#id#').show()
      if (typeof timerHandle#uid# !== 'undefined') {
        clearTimeout(timerHandle#uid#)
      }
      timerHandle#uid# = setTimeout(function() {
        jeedom.cmd.execute({id: '#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .in_value#id#').val()}})
      }, 1000)
    })
    
    jeedom.cmd.refreshValue([{cmd_id:'#id#', value: '#state#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#', trigger :'init'}])
  </script>
</div>

et les valeurs à appliquer

Phpvarious · Décembre 15, 2023, 9:13

Hello,

En faite c’est parce que tu utilise un width (27px) < a la taille des icones (18px) + padding (2x8px).

J’ai plutot changé le padding par un padding-top et ajouté un mini de 18px pour le width

La c’est moi qui a certainement fait une coquille, j’ai laisser trainer une valeur d’id a moi dans le code :

Dans la dernière version du widget j’ai fixé ces 2 bug, j’ai aussi ajouté un contrôle pour avoir un max size de la valeur en fonction de la taille du widget.

Adefx · Décembre 16, 2023, 7:30

Au top, je test ça a mon retour dimanche !

Adefx · Décembre 18, 2023, 9:08

C’est Impec, j’ai juste modifié un poil les Borders radius du btn-top et btn-bottom pour 6 au lieu de 10 pour donner un côté moins rond.
J’ai testé aujourd’hui en condition réelle ( interface telephone) et c’est parfait !

Pour Rappel le code est ici :
https://github.com/Phpvarious/WIDGET_cmd.action.slider.vertical_button_v1

Je ne clos pas le topic au cas ou quelqu’un ait des questions.

Silkarion · Décembre 18, 2023, 10:23

Bonjour,
Super le widget!
Installation et ça a fonctionné du 1er coup!
J’y vois plein d’applications chez moi
Bonne soirée…
Silkarion

Adefx · Décembre 19, 2023, 8:39

Est ce que l’on abuse du talent de @Phpvarious en lui demandant une version horizontale ??

Phpvarious · Décembre 19, 2023, 8:41

C’était dans ma todo , surtout qu’il n’y a pas grand chose a modifier. Je regarde peut-être ce soir.

Adefx · Décembre 19, 2023, 10:33

Petite question, est ce possible de faire une version non cliquable sur le curseur ?
car cela fait double emploi avec les + et - , et lorsque le widget est petit, le risque de missclick est présent ( cf les gros doigts de ma main )

Silkarion · Décembre 19, 2023, 5:24

Bonsoir,
De ma vision, c’est un gros plus la fonction cliquable. A ne pas enlever ou a inhiber via un paramétrage…
Il existe déjà de beaux widgets avec uniquement le + et le -.
Silkarion

Phpvarious · Décembre 20, 2023, 7:04

J’aurait pas du dire cette phrase .

J’ai poussé une nouvelle version :

Possibilité de passer le slider en horizontal.
Possibilité de désactiver le slider.

Adefx · Décembre 20, 2023, 9:28

Haha, cette même phrase qui me perd face a ma femme !
Je test ca immediatement

[EDIT] De toute Beautéeeeee !
Je viens de tester le horizontal, c’est nikel.

Juste la valeur sizeValue qui ne semble plus fonctionner mais c’est peut être avec le mes bricolages de design