Bonjour,
J’utilise plusieurs widget dans mon design Jeedom v4.
Lorsqu’on clique sur l’état d’une commande (imagé ou non par un widget) l’historique du capteur est alors affiché.
Est il possible de changer l’url de destination, pour afficher par exemple un second design par le biais de son url directe ?
Je n’ai pas l’impression que cela soit paramétrable via « Paramètres optionnels widget » dans « Configuration de commande »
Merci à vous,
Salut,
Pourquoi vouloir passer par une commande pour changer de design?
Un simple menu html permet de changer de design. Regarde le code de ce sujet qui est une évolution V4 du très populaire menu de @f$b33:
onClick="planHeader_id=1; displayPlan();"
Le numéro du design se récupère dans la barre d’adresse
bonjour
c’est dans le widget que tu peux faire
qu’un paramètre soit l’id de l’ouverture d’un design en désactivant l’historique en plus
@Salvialf exemple un résumé ton chauffage est en marche ou pas et paf si tu clic dessus te voilà dans le design chauffage
Ah oui j’avais pas pensé à ça mais maintenant que tu le dis je comprend mieux la demande 
Citation exemple un résumé ton chauffage est en marche ou pas et paf si tu clic dessus te voilà dans le design chauffage
C’est en effet exactement cela que je veux faire.
Par contre, côté codage dans le widget je ne sais pas trop faire, pourriez vous m’indiquer ou je dois placer le lien du design ?
J’utilise ce widget qui génère un encadrement de couleur prédéfini en fonction de l’état d’un virtuel, qui lui même est placé dedans.
<!--
https://github.com/NextDom/nextdom-theme-design/blob/master/widgets/blinkingBorderEvent.html?fbclid=IwAR1K0b6NVH8Eo84ucZ9zaQbnDh0nDzWct2wqsxDg2V13NYEvlnFAcbeHF_c
https://www.youtube.com/watch?v=KIjyTIQINRI&fbclid=IwAR35C5R4Y-BKiKSyrHrK-A5ujjsNVbvo4iryoO89L8b8EjunmV027Z6HMik
- Pour l'installation du Widget (V4) :
- sélectionner le menu Outils/widget
- sélectionner le bouton Gestion/Code
- sélectionner le bouton Nouveau pour créer un nouveau widget
de version Dashboard de type Info et sous-type Autre,
puis donner un nom au widget
et sélectionner Créer
- depuis la zone d'édition, copier le code de cette page
- sélectionner le bouton Sauvegarder (retenir le nom du widget cmd.info.string.nomWidget.html)
- appliquer le widget (Customtemp/nomWidget) à la commande info du virtuel précédent (roue dentée, Affichage)
- dans une page de design, ajouter le virtuel et rafraichir la page
- Utilisation :
- créer un virtuel avec une commande info de sous-type Info/Autre
- mettre la commande (#[objet][commande][commande info]#) qui va déclencher le clignotement comme valeur de cette commande
- depuis la configuration avancée de la commande info du virtuel (puis onglet Affichage), ajouter les paramètres optionnels :
- largeur, hauteur, epaisseur
- couleurBord, couleurBordAlerte, couleurBordClignotante
- titre, couleurTitre, CouleurTitreAlerte, couleurTitreFond
- urlLogo, urlImageFond
- Paramètres :
- renseigner la commande info (permettant de commande le clignotement) comme valeur de la commande info du virtuel
- Paramètres optionnels
- largeur : largeur du cadre, 300 par défaut (ne pas mettre px, juste la valeur numérique)
- hauteur : hauteur du cadre, 300 par défaut (ne pas mettre px, juste la valeur numérique)
- epaisseur : épaisseur du cadre (en pixels)
- couleurBord : couleur du cadre
- couleurBordAlerte : couleur du cadre sur événement déclenché
- couleurBordClignotante : couleur du cadre clignotant
- titre : choix du titre
- couleurTitre : couleur du titre si pas d'événement en cours
- CouleurTitreAlerte : couleur du titre sur événement déclenché
- couleurTitreFond : couleur du fond du titre sur événement déclenché
- urlLogo : logo (si non précisé, pas de logo affiché)
- urlLogoAlerte : logo sur clignotement (si non précisé, urlLogo restera affiché même en clignotement / si urlLogo non précisé, pas de logo affiché)
- urlImageFond : image de fond
-->
<style>
:root {
--blinking-border-color#uid#: #ff0000;
--border-color#uid#: #33b8cc;
--border-alert-color#uid#: #ff0000;
--border-color-width#uid#: "300";
--border-color-height#uid#: "300";
--border-color-depth#uid#: "2";
--title#uid#: "Titre";
--title-color#uid#: "rgba(255,255,255,1.0)";
--title-alert-color#uid#: #ff0000;
--title-background-color#uid#: "rgba(241,7,7,0.2)";
}
@-webkit-keyframes glow#uid# {
to {
box-shadow: 0 0 35px var(--blinking-border-color#uid#);
}
}
#myGlower#uid# {
width: var(--border-color-width#uid#);
height: var(--border-color-height#uid#);
margin: 0px;
border: var(--border-color-depth#uid#) solid var(--border-color#uid#);
border-radius: 10px 10px 10px 10px;
animation-play-state: paused;
}
#title#uid# {
color: var(--title-color#uid#);
font-size: 16px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background-color: var(--title-background-color#uid#);
padding-top: 5px;
font-family:Arial;
text-align: center;
height: 26px;
}
#divLogo#uid# {
height: 30px;
width: 30px;
position: absolute;
margin-top: 6px;
margin-left: 5px;
opacity: 1.0;
max-width: 100%;
height: auto;
}
#logo#uid# {
width: 30px;
height: 30px;
}
#bg#uid# {
opacity: 0.5;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
</style>
<div style="padding:0px;width:auto;height:auto;" class="cmd #history# tooltips cmd-widget container-fluid"
data-type="info" data-subtype="string" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#"
title="#collectDate#">
<div id="myGlower#uid#">
<!-- logo -->
<div id="divLogo#uid#">
<img id="logo#uid#" src="var(--logo-path#uid#)">
</div>
<!-- title -->
<div id="title#uid#">
Title
</div>
<!-- background -->
<div id="divBackground#uid#">
<img id="bg#uid#" src="var(--background-path#uid#)" />
</div>
</div>
<script language="javascript">
jeedom.cmd.update['#id#'] = function (_options) {
// récupération des paramètres
// largeur : largeur du cadre (en pixels)
let borderWidth = is_numeric('#largeur#') ? parseFloat('#largeur#') : 300;
document.documentElement.style.setProperty('--border-color-width#uid#', borderWidth + 'px');
// hauteur : hauteur du cadre (en pixels)
let borderHeight = is_numeric('#hauteur#') ? parseFloat('#hauteur#') : 300;
document.documentElement.style.setProperty('--border-color-height#uid#', borderHeight + 'px');
// epaisseur : épaisseur du cadre (en pixels)
let borderDepth = is_numeric('#epaisseur#') ? parseFloat('#epaisseur#') : 2;
document.documentElement.style.setProperty('--border-color-depth#uid#', borderDepth + 'px');
// couleurBord : couleur du cadre
let borderColor = ('#couleurBord#' != '#' + 'couleurBord#') ? "#couleurBord#" : '#ffffff';
document.documentElement.style.setProperty('--border-color#uid#', borderColor);
// couleurBordAlerte : couleur du cadre sur événement déclenché
let borderColorAlert = ('#couleurBordAlerte#' != '#' + 'couleurBordAlerte#') ? "#couleurBordAlerte#" : '#ff0000';
document.documentElement.style.setProperty('--border-alert-color#uid#', borderColorAlert);
// couleurBordClignotante : couleur du cadre clignotant
let borderColorBlinking = ('#couleurBordClignotante#' != '#' + 'couleurBordClignotante#') ? "#couleurBordClignotante#" : '#ff0000';
document.documentElement.style.setProperty('--blinking-border-color#uid#', borderColorBlinking);
// titre : choix et couleurs du titre
let title = ('#titre#' != '#' + 'titre#') ? "#titre#" : '';
document.getElementById('title#uid#').innerHTML = title;
// couleurTitre : couleur du titre si pas d'événement en cours
let titleColor = ('#couleurTitre#' != '#' + 'couleurTitre#') ? "#couleurTitre#" : 'rgba(255,255,255,1.0)';
document.documentElement.style.setProperty('--title-color#uid#', titleColor);
// couleurTitreAlerte : couleur du titre sur événement déclenché
let titleColorAlert = ('#couleurTitreAlerte#' != '#' + 'couleurTitreAlerte#') ? "#couleurTitreAlerte#" : '';
document.documentElement.style.setProperty('--title-alert-color#uid#', titleColorAlert);
// couleurTitreFond : couleur du fond du titre sur événement déclenché
let titleColorBackground = ('#couleurTitreFond#' != '#' + 'couleurTitreFond#') ? "#couleurTitreFond#" : '';
document.documentElement.style.setProperty('--title-background-color#uid#', titleColorBackground);
// urlLogo: logo (ex : 'montheme/images/cadres/alarmLogo.png')
// urlLogoAlerte: logo si événement en cours (ex : 'montheme/images/cadres/sirene.gif')
let logoPath = '';
let logoAlertPath = '';
if ('#urlLogo#' != '#' + 'urlLogo#') {
logoPath = "#urlLogo#";
document.getElementById("logo#uid#").setAttribute("src", logoPath);
//document.getElementById('title#uid#').height = 40;// Math.max(document.getElementById('title#uid#').height, document.getElementById('logo#uid#').height);
logoAlertPath = ('#urlLogoAlerte#' != '#' + 'urlLogoAlerte#') ? "#urlLogoAlerte#" : logoPath;
}
else {
document.getElementById('divLogo#uid#').hidden = true;
}
// urlImageFond: image de fond (ex : 'montheme/images/cadres/alarmBackground.png')
if ('#urlImageFond#' != '#' + 'urlImageFond#') {
document.getElementById('bg#uid#').setAttribute("src", "#urlImageFond#");
}
else {
document.getElementById('bg#uid#').hidden = true;
}
document.getElementById('bg#uid#').setAttribute("width", (borderWidth - 2 * borderDepth) + 'px');
document.getElementById('bg#uid#').setAttribute("height", (borderHeight - 2*borderDepth - 26) + 'px');
// Actions sur récupération de valeur de commande
var cmdValue = _options.display_value;
/* A compléter pour la possibilité future de contrôler plusieurs commandes
var checkValue = cmdValue.indexOf(",");
if (checkValue) {
var cmdParams = cmdValue.split(",");
var updateCmd = cmdParams[0];
}
else {
// Mauvais paramétrage
}
*/
let updateCmd = parseInt(cmdValue[0]);
if (updateCmd == 0) {
// cadre non clignotant
$('#title#uid#').css('color', titleColor);
document.getElementById("logo#uid#").setAttribute("src", logoPath);
$('#myGlower#uid#').css('border', 'var(--border-color-depth#uid#) solid var(--border-color#uid#)');
$('#myGlower#uid#').css('animation', 'none');
} else {
// cadre clignotant
$('#title#uid#').css('color', titleColorAlert);
document.getElementById("logo#uid#").setAttribute("src", logoAlertPath);
$('#myGlower#uid#').css('border', 'var(--border-color-depth#uid#) solid var(--border-alert-color#uid#)');
$('#myGlower#uid#').css('animation', 'glow#uid# 0.5s infinite alternate');
}
}
jeedom.cmd.update['#id#']({
display_value: '#state#',
valueDate: '#valueDate#',
collectDate: '#collectDate#',
alertLevel: '#alertLevel#'
});
</script>
</div>
Tu veux changer de design au clic sur le logo du cadre (facile) ou vraiment sur l’équipement qui est dedans (plus compliqué)
En fait, dans le design j’utilise 2 widgets qui se superposent : le cadre coloré (code ci-dessus) + le widget d’un virtuel qui affiche l’état d’un capteur.
Dans le design ces 2 widget sont paramétrés avec profondeurs différentes dans « Paramètres d’affichage » → « Profondeur » .
Donc si le cadre à une profondeur a 1 est que le widget qui affiche l’état à une profondeur à 0, normalement si le cadre coloré est lié à une URL , normalement je pourrai aller sur celle ci en cliquant n’important ou dans le cadre ?
Ok donc changement de design au clic n’importe ou sur le cadre.
Tu peux essayer en ajoutant
onClick="planHeader_id=1; displayPlan();"
Sur cette ligne:
<div id="myGlower#uid#">
Ce qui donne :
<div id="myGlower#uid#" onClick="planHeader_id=XX; displayPlan();">
en remplaçant XX par le numéro du design à afficher que tu peux récupérer dans la barre d’adresse du design concerné.
@noodom tu dois pouvoir enlever title="#collectDate#" sur la 1ère ligne à priori c’est inutile
@Salvialf je sais pas… l’auteur et tes remerciements ont été retirés du code du widget😥
Bon je regarde quand même 
Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.
Bonjour,
Le lien vers un autre design fonctionne avec ce que tu proposes, mais il faut bien cliquer que sur la bordure colorée sinon c’est l’historique du capteur présent dans le cadre qui s’ouvre .
J’ai essayé de jouer avec les profondeurs (0 à3) du widget du capteur présent dans le cadre coloré mais c’est systématiquement son historique qui s’ouvre en plus du lien vers le design (grâce au onclick ajouté)
Même en passant le onclick sur le 1er div, le résultat reste identique.
Je te remercie,
Ps : je ne connais pas l’auteur de ce widget
Il faut désactiver l’historique alors si c’est pareil en mettant le onclick sur la 1ère div.
L’auteur du widget était stipulé dans les commentaires qui ont été supprimés au début du code, il s’agit de @noodom
J’essayerai de faire des essais éventuellement, à voir si @noodom n’a pas déjà une procédure de contournement ?
D’où l’intérêt (entre autre…) de ne pas le supprimer des commentaires de ‹ copyright › pendant le copier-coller du code😉
Si j’ai bien compris le problème, le clic ne prend en compte que le bordure ?
À voir en JavaScript si un closest sur l’élément que tu veux cliquer ne suffirait pas (remontée de l’événement clic sur un élément parent)
Oui, c’est bien cela il faut cliquer sur la bordure pour avoir le lien de redirection , sinon à l’intérieur du cadre c’est l’historique du capteur qui s’ouvre.
Je ne sais pas comment faire cela en Javascript
Alors il va falloir te contenter de ça ou désactiver l’historique de la commande…
En désactivant l’historique ça fonctionne bien donc c’est parfait.
Serait il possible de passer en option / parametre du widget l’ID du design a ouvrir, cela afin d’utiliser le widget avec plusieurs virtuels tous avec un lien de redirection différent ?
Oui, bien sûr c’est possible.
Par contre, ce n’est pas à l’ordre du jour pour l’instant car débordé sur pas mal de sujets en parallèle. Je ne peux pas te dire quand.
Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.