Bonjour
Tu as bien pris le dernier code ?
Il me semblait avoir corrigé ce problème
Sinon je regarde la semaine prochaine, je suis en vacances 
Je pense oui. C’est bien celui qui se trouve au début de ce post ?
Ok, Je regarde la semaine prochaine
Merci. Bonnes vacances 
1 « J'aime »
salut, désolé reprise un peu compliquée
je viens de tester, j’ai pas de soucis avec les baies en 90
voici mon code, peux tu tester
<div style="padding:10px; min-width:30px; min-height:30px;" class="cmd cmd-widget container-fluid cursor #history#" data-type="info" data-subtype="binary" data-template="Ouvertures_2D" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm">
<div class="iconCmdBaie#id#">
<div class="design_baie#uid#" style="transform-origin: top left;"></div>
</div>
<div class="iconCmdPorte#id#">
<div class="design_porte#uid#" style="transform-origin: top left;"></div>
</div>
<div class="iconCmdFenetre#id#">
<div class="design_fenetre#uid# design_fenetre_l#uid#" style="transform-origin: top left; display:inline-block; width:50%;"></div>
<div class="design_fenetre#uid# design_fenetre_r#uid#" style="transform-origin: top right; display:inline-block; width:50%;"></div>
</div>
<div class="iconCmdGarage#id#">
<div class="design_garage#uid#"></div>
</div>
</div>
<div class="DEBUG#uid#"></div>
<style>
div.design_baie#uid#{
height:10px;
transition: all 1s ease-out;
}
div.design_baie_fermee#uid#{
background-color:var(--al-success-color);
}
div.design_baie_ouverte#uid#{
background-color:var(--al-danger-color);
border-radius: 2px;
animation-duration: .8s;
animation-name: clignoter;
animation-iteration-count: infinite;
transition: none;
}
div.design_porte#uid#{
height:10px;
transition: all 1s ease-out;
}
div.design_porte_fermee#uid#{
background-color:var(--al-success-color);
}
div.design_porte_ouverte#uid#{
background-color:var(--al-danger-color);
border-radius: 2px;
}
div.design_fenetre#uid#{
height:10px;
transition: all 1s ease-out;
}
div.design_fenetre_fermee#uid#{
background-color:var(--al-success-color);
}
div.design_fenetre_ouverte#uid#{
background-color:var(--al-danger-color);
border-radius: 2px;
}
div.design_garage#uid#{
height:10px;
transition: all 1s ease-out;
}
div.design_garage_ouvert#uid#{
background: repeating-linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0) 20px, #f00 20px, #f00 40px);
}
div.design_garage_ferme#uid#{
background-color:var(--al-success-color);
}
@keyframes clignoter {
0% { opacity:1; }
40% {opacity:0; }
100% { opacity:1; }
}
</style>
<script>
jeedom.cmd.update['#id#'] =function(_options){
// type (porte, baie, fenetre, garage), orientation, taille a définir dans les options d'affichage de la commande
// Récupération des valeurs des paramètres
var orientation = is_numeric('#orientation#') ? parseFloat('#orientation#'):0;
var taille = is_numeric('#taille#') ? parseFloat('#taille#'):100;
var type = ('#type#' !='#'+'type#') ? "#type#":"porte";
var cmd = $('.cmd[data-cmd_id=#id#]');
//$('.cmd[data-cmd_uid=#uid#] .DEBUG#uid#').text('orientation:'+orientation+', taille:'+taille+', type:'+type);
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
if ( type == "baie" ) {
$('.cmd[data-cmd_uid=#uid#] .iconCmdPorte#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .iconCmdFenetre#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .iconCmdGarage#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .design_baie#uid#').css('width',''+taille+'px');
if (_options.display_value == '1') {
$('.cmd[data-cmd_uid=#uid#] .design_baie#uid#').removeClass('design_baie_fermee#uid#').addClass('design_baie_ouverte#uid#');
$('.cmd[data-cmd_uid=#uid#] .design_baie#uid#').css('transform','rotate('+orientation+'deg)');
}else {
$('.cmd[data-cmd_uid=#uid#] .design_baie#uid#').removeClass('design_baie_ouverte#uid#').addClass('design_baie_fermee#uid#');
$('.cmd[data-cmd_uid=#uid#] .design_baie#uid#').css('transform','rotate('+orientation+'deg)');
}
}
if ( type == "porte" ) {
$('.cmd[data-cmd_uid=#uid#] .iconCmdBaie#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .iconCmdFenetre#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .iconCmdGarage#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .design_porte#uid#').css('width',''+taille+'px');
if (_options.display_value == '1') {
$('.cmd[data-cmd_uid=#uid#] .design_porte#uid#').removeClass('design_porte_fermee#uid#').addClass('design_porte_ouverte#uid#').css('transform','rotate(-45deg)');
$('.cmd[data-cmd_uid=#uid#] .iconCmdPorte#id#').css('transform','rotate('+orientation+'deg)');
}else {
$('.cmd[data-cmd_uid=#uid#] .design_porte#uid#').removeClass('design_porte_ouverte#uid#').addClass('design_porte_fermee#uid#').css('transform','rotate(0deg)');
$('.cmd[data-cmd_uid=#uid#] .iconCmdPorte#id#').css('transform','rotate('+orientation+'deg)');
}
}
if ( type == "fenetre" ) {
$('.cmd[data-cmd_uid=#uid#] .iconCmdBaie#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .iconCmdPorte#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .iconCmdGarage#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .design_fenetre#uid#').css('width',''+taille+'px');
if (_options.display_value == '1') {
$('.cmd[data-cmd_uid=#uid#] .design_fenetre_l#uid#').removeClass('design_fenetre_fermee#uid#').addClass('design_fenetre_ouverte#uid#').css('transform','rotate(-45deg)');
$('.cmd[data-cmd_uid=#uid#] .design_fenetre_r#uid#').removeClass('design_fenetre_fermee#uid#').addClass('design_fenetre_ouverte#uid#').css('transform','rotate(45deg)');
$('.cmd[data-cmd_uid=#uid#] .iconCmdFenetre#id#').css('transform','rotate('+orientation+'deg)');
}else {
$('.cmd[data-cmd_uid=#uid#] .design_fenetre#uid#').removeClass('design_fenetre_ouverte#uid#').addClass('design_fenetre_fermee#uid#').css('transform','rotate(0deg)');
$('.cmd[data-cmd_uid=#uid#] .iconCmdFenetre#id#').css('transform','rotate('+orientation+'deg)');
}
}
if ( type == "garage" ) {
$('.cmd[data-cmd_uid=#uid#] .iconCmdPorte#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .iconCmdFenetre#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .iconCmdBaie#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .design_garage#uid#').css('width',''+taille+'px');
if (_options.display_value == '1') {
$('.cmd[data-cmd_uid=#uid#] .design_garage#uid#').removeClass('design_garage_ferme#uid#').addClass('design_garage_ouvert#uid#');
}else {
$('.cmd[data-cmd_uid=#uid#] .design_garage#uid#').removeClass('design_garage_ouvert#uid#').addClass('design_garage_ferme#uid#');
}
$('.cmd[data-cmd_uid=#uid#] .design_garage#uid#').css('transform','rotate('+orientation+'deg)');
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Salut,
Oui pas facile le retour de congés…
Je viens de coller ton code, et en effet cela fonctionne mieux.
Merci d’avoir pris du temps pour moi.
1 « J'aime »
bel exemple bravo
Hello,
Je me suis permis de modifier le code pour jouer sur la hauteur.
Ainsi, la modification est possible avec les 2 paramètres largeur et hauteur.
<div style="padding:10px; min-width:30px; min-height:30px;" class="cmd cmd-widget container-fluid cursor #history#" data-type="info" data-subtype="binary" data-template="Ouvertures_2D" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm">
<div class="iconCmdBaie#id#">
<div class="design_baie#uid#" style="transform-origin: top left;"></div>
</div>
<div class="iconCmdPorte#id#">
<div class="design_porte#uid#" style="transform-origin: top left;"></div>
</div>
<div class="iconCmdFenetre#id#">
<div class="design_fenetre#uid# design_fenetre_l#uid#" style="transform-origin: top left; display:inline-block; width:50%;"></div>
<div class="design_fenetre#uid# design_fenetre_r#uid#" style="transform-origin: top right; display:inline-block; width:50%;"></div>
</div>
<div class="iconCmdGarage#id#">
<div class="design_garage#uid#"></div>
</div>
</div>
<div class="DEBUG#uid#"></div>
<style>
div.design_baie#uid#{
height:10px;
transition: all 1s ease-out;
}
div.design_baie_fermee#uid#{
background-color:var(--al-success-color);
}
div.design_baie_ouverte#uid#{
background-color:var(--al-danger-color);
border-radius: 2px;
animation-duration: .8s;
animation-name: clignoter;
animation-iteration-count: infinite;
transition: none;
}
div.design_porte#uid#{
height:10px;
transition: all 1s ease-out;
}
div.design_porte_fermee#uid#{
background-color:var(--al-success-color);
}
div.design_porte_ouverte#uid#{
background-color:var(--al-danger-color);
border-radius: 2px;
}
div.design_fenetre#uid#{
height:10px;
transition: all 1s ease-out;
}
div.design_fenetre_fermee#uid#{
background-color:var(--al-success-color);
}
div.design_fenetre_ouverte#uid#{
background-color:var(--al-danger-color);
border-radius: 2px;
}
div.design_garage#uid#{
height:10px;
transition: all 1s ease-out;
}
div.design_garage_ouvert#uid#{
background: repeating-linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0) 20px, #f00 20px, #f00 40px);
}
div.design_garage_ferme#uid#{
background-color:var(--al-success-color);
}
@keyframes clignoter {
0% { opacity:1; }
40% {opacity:0; }
100% { opacity:1; }
}
</style>
<script>
jeedom.cmd.update['#id#'] =function(_options){
// type (porte, baie, fenetre, garage), orientation, taille a définir dans les options d'affichage de la commande
// Récupération des valeurs des paramètres
var orientation = is_numeric('#orientation#') ? parseFloat('#orientation#'):0;
var largeur = is_numeric('#largeur#') ? parseFloat('#largeur#'):100;
var hauteur = is_numeric('#hauteur#') ? parseFloat('#hauteur#'):10;
var type = ('#type#' !='#'+'type#') ? "#type#":"porte";
var cmd = $('.cmd[data-cmd_id=#id#]');
//$('.cmd[data-cmd_uid=#uid#] .DEBUG#uid#').text('orientation:'+orientation+', taille:'+taille+', type:'+type);
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
if ( type == "baie" ) {
$('.cmd[data-cmd_uid=#uid#] .iconCmdPorte#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .iconCmdFenetre#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .iconCmdGarage#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .design_baie#uid#').css('width',''+largeur+'px');
$('.cmd[data-cmd_uid=#uid#] .design_baie#uid#').css('height',''+hauteur+'px');
if (_options.display_value == '1') {
$('.cmd[data-cmd_uid=#uid#] .design_baie#uid#').removeClass('design_baie_fermee#uid#').addClass('design_baie_ouverte#uid#');
$('.cmd[data-cmd_uid=#uid#] .design_baie#uid#').css('transform','rotate('+orientation+'deg)');
}else {
$('.cmd[data-cmd_uid=#uid#] .design_baie#uid#').removeClass('design_baie_ouverte#uid#').addClass('design_baie_fermee#uid#');
$('.cmd[data-cmd_uid=#uid#] .design_baie#uid#').css('transform','rotate('+orientation+'deg)');
}
}
if ( type == "porte" ) {
$('.cmd[data-cmd_uid=#uid#] .iconCmdBaie#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .iconCmdFenetre#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .iconCmdGarage#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .design_porte#uid#').css('width',''+largeur+'px');
$('.cmd[data-cmd_uid=#uid#] .design_porte#uid#').css('height',''+hauteur+'px');
if (_options.display_value == '1') {
$('.cmd[data-cmd_uid=#uid#] .design_porte#uid#').removeClass('design_porte_fermee#uid#').addClass('design_porte_ouverte#uid#').css('transform','rotate(-45deg)');
$('.cmd[data-cmd_uid=#uid#] .iconCmdPorte#id#').css('transform','rotate('+orientation+'deg)');
}else {
$('.cmd[data-cmd_uid=#uid#] .design_porte#uid#').removeClass('design_porte_ouverte#uid#').addClass('design_porte_fermee#uid#').css('transform','rotate(0deg)');
$('.cmd[data-cmd_uid=#uid#] .iconCmdPorte#id#').css('transform','rotate('+orientation+'deg)');
}
}
if ( type == "fenetre" ) {
$('.cmd[data-cmd_uid=#uid#] .iconCmdBaie#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .iconCmdPorte#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .iconCmdGarage#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .design_fenetre#uid#').css('width',''+largeur+'px');
$('.cmd[data-cmd_uid=#uid#] .design_fenetre#uid#').css('height',''+hauteur+'px');
if (_options.display_value == '1') {
$('.cmd[data-cmd_uid=#uid#] .design_fenetre_l#uid#').removeClass('design_fenetre_fermee#uid#').addClass('design_fenetre_ouverte#uid#').css('transform','rotate(-45deg)');
$('.cmd[data-cmd_uid=#uid#] .design_fenetre_r#uid#').removeClass('design_fenetre_fermee#uid#').addClass('design_fenetre_ouverte#uid#').css('transform','rotate(45deg)');
$('.cmd[data-cmd_uid=#uid#] .iconCmdFenetre#id#').css('transform','rotate('+orientation+'deg)');
}else {
$('.cmd[data-cmd_uid=#uid#] .design_fenetre#uid#').removeClass('design_fenetre_ouverte#uid#').addClass('design_fenetre_fermee#uid#').css('transform','rotate(0deg)');
$('.cmd[data-cmd_uid=#uid#] .iconCmdFenetre#id#').css('transform','rotate('+orientation+'deg)');
}
}
if ( type == "garage" ) {
$('.cmd[data-cmd_uid=#uid#] .iconCmdPorte#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .iconCmdFenetre#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .iconCmdBaie#id#').hide();
$('.cmd[data-cmd_uid=#uid#] .design_garage#uid#').css('width',''+largeur+'px');
$('.cmd[data-cmd_uid=#uid#] .design_garage#uid#').css('height',''+hauteur+'px');
if (_options.display_value == '1') {
$('.cmd[data-cmd_uid=#uid#] .design_garage#uid#').removeClass('design_garage_ferme#uid#').addClass('design_garage_ouvert#uid#');
}else {
$('.cmd[data-cmd_uid=#uid#] .design_garage#uid#').removeClass('design_garage_ouvert#uid#').addClass('design_garage_ferme#uid#');
}
$('.cmd[data-cmd_uid=#uid#] .design_garage#uid#').css('transform','rotate('+orientation+'deg)');
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Mathieu
Hello,
Comment faire pour supprimer l’espace entre les 2 traits lorsque la fenêtre est fermée ?
Merci
Bonjour,
Est-ce que ce widget dynamique fonctionne sous la dernière version 4.4 ? J’ai beaucoup de problèmes de design avec la nouvelle mise à jour, et je voudrais trouver un widget dynamique fonctionnel.
Merci !