Bonjour,
Je me suis mis au travail, et si vous voulez faire ca:
La solution est en dessous
2 « J'aime »
Il faut donc creer un virtuel avec une seule info, et autant d’actions que vous le souhaitez (pas 50 non plus, svp), il faut que l’info du virtuel ne soit pas historisé sinon cela va creer un conflit au moment du click.
Ensuite, vous copier dans Réglage/Système/Personalisation avancé la partie ci dessous dans le code css:
.equipementActionMenu {
border: 2px;
border-color: #aaaaaa;
border-radius: 8px;
border-style: outset;
padding: 10px;
}
Et cette partie dans le javascript,
const ACTION_MENU_PADDING = 10; // espace entre les bouttons
const equipementWidget = function(equipementId){
return $('.eqLogic-widget[data-eqLogic_id="'+equipementId+'"]');
}
const closeMenu = function(equipementId, nbAction, direction){
var equipWidget = equipementWidget(equipementId);
var width = +equipWidget.css('width').slice(0, -2); // slice pour enlever px
var height = +equipWidget.css('height').slice(0, -2);
var majorSize = direction === "right" ? width : height;
var secondSize = direction === "right" ? height : width;
majorSize = (majorSize - ACTION_MENU_PADDING*2*(nbAction+1))/(nbAction+1);
secondSize = secondSize - 20 - ACTION_MENU_PADDING;
equipWidget.removeClass('equipementActionMenu');
equipWidget.attr('style', 'background-color: transparent !important');
equipWidget.css('width', (direction === "right" ? majorSize : secondSize)+'px');
equipWidget.css('height', (direction === "right" ? secondSize : majorSize)+'px');
}
const openMenu = function(equipementId, nbAction, direction){
var equipWidget = equipementWidget(equipementId);
var width = +equipWidget.css('width').slice(0, -2); // slice pour enlever px
var height = +equipWidget.css('height').slice(0, -2);
var majorSize = direction === "right" ? width : height;
var secondSize = direction === "right" ? height : width;
majorSize = majorSize*(nbAction+1) + ACTION_MENU_PADDING*2*(nbAction+1);
secondSize = secondSize + 20 + ACTION_MENU_PADDING;
equipWidget.addClass('equipementActionMenu');
equipWidget.attr('style', 'background-color: #000000 !important');
$('.cmd[data-eqLogic_id="'+equipementId+'"][data-type="action"').css('padding', ACTION_MENU_PADDING+'px');
equipWidget.css('width', (direction === "right" ? majorSize : secondSize)+'px');
equipWidget.css('height', (direction === "right" ? secondSize : majorSize)+'px');
}
// direction can be right or down
const cmdWithMenu = function(equipementId, nbAction, direction){
// Pour l'equipement cache et affiche les choix des commandes
var info = $('.cmd[data-eqLogic_id="'+equipementId+'"][data-type="info"]');
info.addClass('cursor');
$('.cmd[data-eqLogic_id="'+equipementId+'"][data-type="action"').click(function() {
closeMenu(equipementId, nbAction, direction);
});
info.click(function () {
var widgetParent = equipementWidget(equipementId);
if (!widgetParent.hasClass('equipementActionMenu')) openMenu(equipementId, nbAction, direction);
else closeMenu(equipementId, nbAction, direction);
});
}
$(document).ready (function(){
setTimeout(function(){
// ICI on va ajouter tous les equipements avec leur nombre de bouttons 3 bouttons actions
// et le parametre "right" pour avoir le menu a droite ou "down" pour avoir le menu vers le bas
cmdWithMenu(106, 3, "right"); // Equipement Alarme
cmdWithMenu(326, 2, "right"); // Equipement Portail (Voiture/Piéton)
}, 2000);
});
puis vous n’avez qu’a changé tout en bas du script les lignes
cmdWithMenu(106, 3, « right »); // Equipement Alarme
cmdWithMenu(326, 2, « right »); // Equipement Portail (Voiture/Piéton)
106 et 326 correspondent aux Id de mes virtuels (vous pouvez les avoirs dans l’url lorsque vous l’edité) ensuite 3 et 2 correspondent aux nombre d’actions dans mon virtuel
« right » indique que je veux que le menu apparaisse vers la droite, on peut mettre « down » pour aller vers le bas.
Et c’est tout.
2 « J'aime »
Salut,
Ca m’intéresse grandement, ton truc.
Mais je ne suis pas arrivé à le faire fonctionner 
Voila ce que ca rend chez moi :
Et quand je clique :
Voila mon virtuel :
J’ai un widget avec les différentes images :
Widget qui est bien affecté à l’info.
Qu’est ce que je rate ?
Ps : les possibilités de ton truc sont extra. On peut imaginer que ca fonctionne avec un swipe du doigt, que ca toggle entre les options au clic, etc. C’est top top top !!
Pour info, j’avais une toute petite erreur dans mon script, je viens de le remettre a jour, il manquait l’argument direction a l’appel de closeMenu. Reprend la nouvelle version.
De ce que je vois dans ton design, il faut diminuer la fenetre de l’equipement Clim Salon pour ne voir que l’icone, il faut que tu caches tous les bouttons. De plus comme tu peux le voir dans mon exemple, je n’ai pas de boutton avec un nom, je n’utilise que des icones qui ont toutes la meme taille.
Il faudrait que tu trouves des icones pour tes bouttons « Automatique », « climatisation », « chauffage ».
Ceci-dit, comme les textes des bouttons ont a peu pret la meme taille que l’icone de ton info, peut etre que ca fonctionne un peu, a essayer
Les boutons ne me genent pas pour l’instant.
Je n’ai pas d’icone, ce sont des images pour chaque mode.
Mon souci, c’est que je n’ai pour l’instant aucune de ces images qui s’affichent.
Tu peux mettre quelques screenshots de ton virtuel et de ton widget, que j’essaye de dupliquer ?
Merci.
Je t’ai fait un exemple minimaliste, je n’ai meme pas mis d’icone pour te montrer le principe, j’ai tout laissé par defaut
Voici mon virtuel
Et voici comment le placer dans un design
Dans mon script pour que ca marche, j’ai juste rajouter: cmdWithMenu(290, 3, « right »);
290 est l’id de mon virtuel (tu peux l’avoir dans l’url quand tu le crées)
3 c’est parce qu’il y a 3 boutons
et right c’est pour avoir le menu qui s’agrandit par la droite
@axelpg Je viens de modifié le script pour ne plus avoir a positionné la taille des icones (le 70px). Maintenant c’est automatique.
Si tu as des actions de largeur differences, je pourrais faire une méthode pour que ce soit toi qui positionne la largeur/hauteur du menu, et ce ne sera plus calculé en fonction du nombre de bouton.
Super, merci !
Du coup, pour mettre la maison, tu as créé une icone sympa à partir d’une image, c’est ça ?
Oui j’avais modélisé la maison en 3d. J’en ai fait une image que j’ai réduit. Et je l’utilise pour l’icône. J’ai rajouté des caméras pour indiquer qu’elle est en mode Surveillance et en gris pour m’indiquer le mode nuit.
C’est ce passage là que je n’ai pas. Tu fais un widget pour ajouter l’icone ?
(PS : merci pour les explications, c’est impec )
