Shutter Slider - Evolution constatée 4.0.61 vs 4.1.16

[Eridani78]

Bonjour,
J’ai deux Raspberry Pi4B avec les configurations suivantes:
RPi4B-1 : Buster 32-bit - Jeedom V4.0.61
RPi4B-2 : Buster 64-bit - Jeedom V4.1.16

Je migre mon système petit à petit de l’un à l’autre.

Après duplication du code d’un widget (basé sur un code publié par @Salvialf) pour mes volets roulants, j’obtiens cette différence :

V4.0.61

V4.1.16

Il semblerait que le traitement des lames de volet soit différent, peut être une différence d’orientation de 90°. Je ne sais pas.

Une idée ?
Une évolution d’une Class entre les deux versions de Jeedom peut être ?

Pour alléger ce message, je publie le code html pour investigations si cela est demandé.

Merci d’avance

[Salvialf]

Salut,

J’ai revu le code de ce widget par rapport à ce que tu remontes déjà. De mémoire le code sur github et dans le plugin pimp my jeedom est à jour.

Édit:

Jeedom V4.1 : Widget ShutterSlider

Bonjour SALVIALF, Je test la version jeedom v4.1 actuellement, mais sur le [SALVIALF] Widget ShutterSlider (Action/Curseur) il y as un décalage du coup et plus le rideau. [image] Cordialement.

[Eridani78]

OK merci pour ta réponse.
Je vais investiguer selon ta réponse et probablement, si j’ai bien compris, modifier mon code html.

[Salvialf]

C’est ici :

Salvialf/JEEDOM-Widget-ShutterSlider/blob/master/cmd.action.slider.ShutterSlider.html

J’ai revu le code pour générer les différents backgrounds via des variables CSS et non plus en js. Le code n’en es que plus propre je trouve

[mld.sebastien]

La modification fonctionne très bien, même mieux je trouve.

[Eridani78]

Bonsoir @Salvialf,
J’essaye de réadapter mon code widget en repartant du code que tu m’as donné en lien dans ton message précédent.
J’espère que je ne vais pas faire le boulet en te disant que je galère un peu car pour adapter, il faut que je comprenne ce que tu as fait.

J’ai les remarques suivantes :

1. Dans la feuille de style CSS, il y a les classes .shutterSlider et .ui-slider-vertical
   Comment elles interviennent car pas dans les balises du code du widget ?

2. L’id=« shutterSlider » porte le même nom que la class .shutterSlider
   C’est confus pour moi. Peut-on renommer l’ID qui n’est appelé qu’une fois dans le code ou est-ce qu’il y a une astuce que je ne vois pas ?

3. Dans le code, la variable backgroundPath n’est pas déclarée il me semble.

Ton avis si tu veux bien. Je te remercie.

[Salvialf]

Bonjour @Eridani78,

1. La classe .shutterSlider correspond à la div complète du widget de la commande. Cela permet d’isoler le CSS du widget du CSS du reste du core. Elle est appelée dès le début du code :

<div class="shutterSlider cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#".........

.ui-slider-vertical est une classe propre aux sliders Jquery.

2. Oui tu peux renommer l’id du slider.

3. la variable backgroundPath est bien définie (j’aurai pu la déclarer au préalable oui) :

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

Mais effectivement ce code est utile pour l’utilisation dans le plugin Pimp my Jeedom (permet de prendre en compte les images ajoutées dans le répertoire data/img/ShutterSlider en + du dossier du widget) mais pas en installation manuelle, je vais revoir cette partie.
Dans ton cas, à priori pas besoin du if, ceci doit être suffisant :

backgroundPath = 'data/customTemplates/dashboard/cmd.action.slider.ShutterSlider';

[Eridani78]

Bonjour @Salvialf,

Avant toute chose, merci pour ta patience et ta réponse rapide matinale.

1. La classe .shutterSlider : j’avais cherché partout sauf dans la div principale. C’est rusé mais il est vrai qu’a cet endroit, j’avais pris l’habitude de n’y trouver que les déclarations des éléments du core.

.ui-slider-vertical est une classe propre aux sliders Jquery : merci, grace à toi, je progresse sur Jquery

2. ID et class du même nom, je préferre renommer l’ID shutterSliderID pour m’éviter toute confusion.

3. La variable backgroundPath : je voulais dire pas déclarée en effet. Dans le if (que je conserve, ca gêne pas) j’écris alors var backgroundPath = '...';

A la lumière de tes explications, je vais reprendre ma migration avec une meilleure vision.

Je te souhaite une bonne journée et encore un grand merci pour le travail réalisé sur ce widget (qui est vraiment très beau et très utile) et merci aussi pour ton support.