Bonjour,
Ma bibliothèque d’images commençant à devenir pléthotique, je cherche un moyen d’en réduire le nombre au maximum.
Ma question est la suivante, savez-vous s’il est possible de superposer des images dans un même widget?
Mon idée est de n’avoir que des bandeaux d’état et des accessoires et de les superposer par transparence dans le widget.
Comme je ne crée que des png avec des fonds transparents, le rendu devrait être correct. C’est déjà comme ça que je crée mes images à afficher.
Ainsi pour 3 equipements on-off, au lieu d’avoir 6 images, j’aurais 2 bandeaux et 3 accessoires.
Et plus le nombre d’accessoires grandira, plus le nombre d’images diminuera.
Par avance, merci de votre aide.
Bonne journée
Oui tu peux gérer ca en CSS dans tes propres widget
+1 pour avoir placé PléthoRique 
Pas de problème, c’est cadeau.
Mais pour en revenir au sujet, je sais coder mais je ne me suis pas encore intéressé au CSS.
Pourrais me fournir le bout code qui me permettrait de faire cette juxtaposition ?
Par avance, merxi
je peux te donner un exemple
div.IMGZone#uid# {
height: 25px;
width: 25px;
position: absolute;
display: inline-block;
border-radius: 100%;
border: 2px solid orange;
text-align: center;
font-weight: bold;
color: orange;
z-index: 2;
}
le z-index permet de jouer sur la profondeur
Merci, je vais m’y mettre mais je ne vois pas où apparait le nom de l’image.
De ce que j’ai commencé à lire, il faudrait un champ background-image
normalement ton image tu vas le gérer dans ton code SCRIPT
avec ce genre de code
// WIFI
if ( wifiabs < 30 ) $('.cmd[data-cmd_uid=#uid#] .IMGwifi#uid#').empty().attr('src', rep+'wifi_high.png');
else if ( wifiabs <= 80 ) $('.cmd[data-cmd_uid=#uid#] .IMGwifi#uid#').empty().attr('src', rep+'wifi_medium.png');
else if ( wifiabs > 80 ) $('.cmd[data-cmd_uid=#uid#] .IMGwifi#uid#').empty().attr('src', rep+'wifi_low.png');
else $('.cmd[data-cmd_uid=#uid#] .IMGwifi#uid#').hide();
Bon ben je pense que je n’ai pas franchement compris.
Dans ma feuille de style, j’ai ajouté ce que tu m’as indiqué, à savoir:
div.ImgFond#uid# {
height: 60px;
width: 60px;
position: absolute;
display: inline-block;
border-radius: 100%;
border: 2px solid orange
text-align: center;
font-weight: bold;
color: orange;
z-index: 2;
}Dans mon script, en fonction des cas, je mets une ligne différente du type:
$(".ImgFond#id#").css( "background-image:url(srcFond + "fo_jaune.png)");srcFond étant initialisé au nom du dossier où sont stockés les fonds.
En fin de script, j’ajoute:
$('.icone#uid#').empty().append('<img src="'+srcImg+'sp_pisctemp.png" width="85px">');qui correspond à l’image de premier niveau.
Et au final, j’ai une magnifique tuile blanche avec en plus une erreur js:
Uncaught SyntaxError: missing ) after argument list
Et si je regarde dans la console, j’ai ça:
Uncaught SyntaxError: missing ) after argument list
at b (jquery.min.js?md5=220afd743d9e9643852e31a135a9f3ae:2)
at Ie (jquery.min.js?md5=220afd743d9e9643852e31a135a9f3ae:2)
at k.fn.init.append (jquery.min.js?md5=220afd743d9e9643852e31a135a9f3ae:2)
at k.fn.init.<anonymous> (jquery.min.js?md5=220afd743d9e9643852e31a135a9f3ae:2)
at _ (jquery.min.js?md5=220afd743d9e9643852e31a135a9f3ae:2)
at k.fn.init.html (jquery.min.js?md5=220afd743d9e9643852e31a135a9f3ae:2)
at Object.success (getResource.php?file=core/js/eqLogic.class.js&md5=8fc22441616f3eec69e2d38f42bc7aca&lang=fr_FR:404)
at Object.success (getResource.php?file=core/js/private.class.js&md5=b8db8507901b84d70b6da0fc7ba03668&lang=fr_FR:117)
at c (jquery.min.js?md5=220afd743d9e9643852e31a135a9f3ae:2)
at Object.fireWith [as resolveWith] (jquery.min.js?md5=220afd743d9e9643852e31a135a9f3ae:2)Pas franchement lisible.
Donc, c’est pas gagné.
Y-aurait-il une âme suffisamment charitable pour m’indiquer ce que j’ai loupé?
Par avance, merci
Je ne fais pas de la même manière
voici le code complet d’un de mes widget qui utilise la superposition d’images
<div style="padding:0px;min-width:170px;min-height:130px;" class="cmd #history# container-fluid tooltips cmd-widget" data-type="info" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-subtype="string" data-cmd_id="#id#" data-cmd_uid="#uid#">
<div style="position:relative;">
<div style="position:relative;z-index:1">
<div class="BANDEAU#uid#" style="padding:5px;"><img class="IMG#uid#" src="" style="width:170px;" /></div>
</div>
<div class="TITRE#uid#"></div>
<span class="timeCmd#uid#"></span>
<center><span class="timeCmdLIGHT#uid#"></span></center>
<img class="IMGbatterie#uid#" src="" />
<img class="IMGwifi#uid#" src="" />
<div class="IMGZone#uid#" style="top:110px;left:150px;"></div>
<img class="BORDURE#uid#" src="" style="width:170px;" />
<div class="DEBUG#uid#"></div>
</div>
<style>
div.TITRE#uid# {
position:absolute;
width: 90%;
padding: 3px;
border-radius: 4px;
margin: 0;
top: 5px;
left: 50%;
transform: translate(-50%, 0%);
font-size: 12px;
font-weight: bold;
color: white;
text-align: center;
z-index: 2;
}
span.timeCmd#uid# {
position: relative;
background-color: #cmdColor# !important;
padding: 3px;
border-radius: 4px;
margin: 0;
top: 2px;
font-size:12px;
font-weight: bold;
color: white;
z-index: 2;
}
span.timeCmdLIGHT#uid# {
width: 130px;
height :15px;
position: relative;
padding: 3px;
border-radius: 4px;
margin: 0;
top: -25px;
font-size:12px;
font-weight: bold;
text-align: center;
color: white;
z-index: 2;
}
img.IMGbatterie#uid# {
width: 30px;
height :15px;
position: absolute;
top: 30px;
left: 15px;
z-index: 3;
}
img.IMGwifi#uid# {
width: 20px;
height: 15px;
position: absolute;
top: 30px;
left: 50px;
z-index: 3;
}
div.IMGZone#uid# {
height: 25px;
width: 25px;
position: absolute;
display: inline-block;
border-radius: 100%;
border: 2px solid orange;
text-align: center;
font-weight: bold;
color: orange;
z-index: 2;
}
img.BORDURE#uid# {
position: absolute;
display: inline-block;
padding:5px;
top: 0px;
left: 0px;
z-index: 2;
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options){
// Récupération des valeurs de la commande
var state = _options.display_value;
var teststate = state.indexOf(",");
if ( teststate > 0 && teststate < 3 ) {
var stateListe = state.split(",");
var etat = stateListe[0];
var etattexte = stateListe[1].replace("\"","");
etattexte = etattexte.replace("\"","");
var batterie = stateListe[2];
var wifi = stateListe[3];
var wifiabs = Math.abs(wifi);
var zone = stateListe[4];
var timer = stateListe[5];
var prise = stateListe[6];
} else {
var etat = "UNDEFINED";
var etattexte = "UNDEFINED";
}
// Récupération des valeurs des paramètres
var taille = is_numeric('#taille#') ? parseFloat('#taille#'):170;
var name = ('#name#' !='#'+'name#') ? "#name#":"OUI";
var info = ('#info#' !='#'+'info#') ? "#info#":"NON";
var bord = ('#bord#' !='#'+'bord#') ? "#bord#":"NON";
var rep = "plugins/widget/core/template/dashboard/cmd.info.string.WorkAndroid/";
// Variables
var hauteur = (parseInt(taille)/100)*80;
var topinfo = parseInt(hauteur-10);
var debug = 0;
// GESTION IMAGE
var name99 = "Prise arrêtée";
var name0 = "Inactive";
var name1 = "Sur sa base"; // 2 = "Séquence de démarrage"
var name4 = "Suit le câble";
var name5 = "Cherche base";
var name6 = "Cherche câble";
var name7 = "Tonte en cours"; // 3 = "Quitte la base"
var name8 = "Soulevée";
var name9 = "Coincée";
var name10 = "Lames bloquées";
var name30 = "Retour à la base";
var name31 = "Création de zones";
var name32 = "Coupe la bordure";
var name33 = "Départ vers zone de tonte";
var name34 = "Pause";
// 11 = "Debug"
// 12 = "Remote control"
//GESTION cas particuliers
if ( teststate == -1 ) {
var TITRE = "Prb Configuration";
var IMG = "workandroid_noinfo.png";
}
if ( teststate > 2 ) {
var TITRE = "Prb Configuration";
var IMG = "workandroid_prbconf.png";
}
if ( prise == 0 ) {
// GESTION PRISE
TITRE = name99;
IMG = "workandroid_arret.png";
} else if ( etattexte == "Communication timeout" ) {
// CAS DU TIMEOUT
TITRE = etattexte;
IMG = "workandroid_cnxout.png";
} else {
// GESTION des etat
if ( etat == 1 || etat == 2 ) {
if ( batterie == 100 ) {
TITRE = name1;
IMG = "workandroid_base.png";
} else {
TITRE = name1+" (en charge)";
IMG = "workandroid_charge.png";
}
} else if ( etat == 0 ) {
TITRE = name0;
IMG = "workandroid_inactive.png";
} else if ( etat == 4 ) {
TITRE = name4;
IMG = "workandroid_ligne.png";
} else if ( etat == 5 ) {
TITRE = name5;
IMG = "workandroid_findbase.png";
} else if ( etat == 6 ) {
TITRE = name6;
IMG = "workandroid_findligne.png";
} else if ( etat == 7 || etat == 3 ) {
TITRE = name7;
IMG = "workandroid_move.png";
} else if ( etat == 8 ) {
TITRE = name8;
IMG = "workandroid_top.png";
} else if ( etat == 9 ) {
TITRE = name9;
IMG = "workandroid_block.png";
} else if ( etat == 10 ) {
TITRE = name10;
IMG = "workandroid_lame.png";
} else if ( etat == 30 ) {
TITRE = name30;
IMG = "workandroid_home.png";
} else if ( etat == 31 ) {
TITRE = name31;
IMG = "workandroid_ligne.png";
} else if ( etat == 32 ) {
TITRE = name32;
IMG = "workandroid_bordure.png";
} else if ( etat == 33 ) {
TITRE = name33;
IMG = "workandroid_ligne.png";
} else if ( etat == 34 ) {
TITRE = name34;
IMG = "workandroid_pause.png";
} else if ( etat >= 0) {
TITRE = "NON IDENTIFIE";
IMG = "workandroid_inactive.png";
}
}
// GESTION IMAGE
$('.cmd[data-cmd_uid=#uid#] .IMG#uid#').empty().attr("src", rep+IMG);
$('.cmd[data-cmd_uid=#uid#] .IMG#uid#').attr("style", "width:"+taille+"px;height:"+hauteur+"px;");
$('.cmd[data-cmd_uid=#uid#] .BANDEAUG#uid#').empty().attr("style", "width:"+(taille+10)+"px;height:"+(hauteur+10)+"px;");
// GESTION BORDURE
if ( bord == "BLANC" ) {
var BORDURE = "workandroid_bordblanc.png";
} else if ( bord == "ORANGE" ) {
var BORDURE = "workandroid_bordorange.png";
} else {
var BORDURE = "workandroid_bordsans.png";
}
$('.cmd[data-cmd_uid=#uid#] .BORDURE#uid#').empty().attr("src", rep+BORDURE);
$('.cmd[data-cmd_uid=#uid#] .BORDURE#uid#').empty().attr("style", "width:"+(taille+10)+"px;height:"+(hauteur+10)+"px;");
$('.cmd[data-cmd_uid=#uid#] .BORDURE#uid#').attr('title','Etat:'+etattexte+'('+etat+')-Batterie:'+batterie+'-Wifi:'+wifiabs+'-Zone:'+zone+'-Timer:'+timer+'-Prise:'+prise+'-TestStat:'+teststate+' : Valeur du '+_options.valueDate);
// GESTION TITRE
if ( name == "OUI" ) {
$('.cmd[data-cmd_uid=#uid#] .TITRE#uid#').empty().text(TITRE);
}
if ( debug == 1 ) {
$('.cmd[data-cmd_uid=#uid#] .DEBUG#uid#').text('etat:'+etat+', etattexte:'+etattexte+', batterie:'+batterie+', wifi:'+wifi+'-'+wifiabs+', zone:'+zone+', timer:'+timer+', prise:'+prise+', state:'+state+', teststate:'+teststate);
} else {
$('.cmd[data-cmd_uid=#uid#] .DEBUG#uid#').hide();
}
if ( prise == 0 ) {
batterie = "undefinied";
wifi = "undefinied";
wifiabs = "undefinied";
}
// BATTERIE
if ( batterie > 99 ) $('.cmd[data-cmd_uid=#uid#] .IMGbatterie#uid#').empty().attr('src', rep+'batterie_full.png');
else if ( batterie > 75 ) $('.cmd[data-cmd_uid=#uid#] .IMGbatterie#uid#').empty().attr('src', rep+'batterie_high.png');
else if ( batterie > 50 ) $('.cmd[data-cmd_uid=#uid#] .IMGbatterie#uid#').empty().attr('src', rep+'batterie_medium.png');
else if ( batterie > 25 ) $('.cmd[data-cmd_uid=#uid#] .IMGbatterie#uid#').empty().attr('src', rep+'batterie_low.png');
else if ( batterie > 5 ) $('.cmd[data-cmd_uid=#uid#] .IMGbatterie#uid#').empty().attr('src', rep+'batterie_highlow.png');
else $('.cmd[data-cmd_uid=#uid#] .IMGbatterie#uid#').hide();
$('.cmd[data-cmd_uid=#uid#] .IMGbatterie#uid#').attr('title','Charge : '+batterie+' %');
// WIFI
if ( wifiabs < 30 ) $('.cmd[data-cmd_uid=#uid#] .IMGwifi#uid#').empty().attr('src', rep+'wifi_high.png');
else if ( wifiabs <= 80 ) $('.cmd[data-cmd_uid=#uid#] .IMGwifi#uid#').empty().attr('src', rep+'wifi_medium.png');
else if ( wifiabs > 80 ) $('.cmd[data-cmd_uid=#uid#] .IMGwifi#uid#').empty().attr('src', rep+'wifi_low.png');
else $('.cmd[data-cmd_uid=#uid#] .IMGwifi#uid#').hide();
$('.cmd[data-cmd_uid=#uid#] .IMGwifi#uid#').attr('title','Signal : '+wifi+' db');
// GESTION ZONE
if ( zone > 0 && etat == 7 ) {
$('.cmd[data-cmd_uid=#uid#] .IMGZone#uid#').empty().text(zone);
$('.cmd[data-cmd_uid=#uid#] .IMGZone#uid#').attr('style', 'left:'+(taille-30)+'px;top:'+(hauteur-25)+'px;');
} else {
$('.cmd[data-cmd_uid=#uid#] .IMGZone#uid#').hide();
}
// GESTION INFO
if ( timer > 0 ) {
var timerminute = Math.floor(timer / 60);
var j = Math.floor(timerminute / 1440);
var h = Math.floor(timerminute % 1440 / 60);
var m = Math.floor(timerminute % 60);
var timeraffiche = ((j > 0 ? j + "j " : "") + (h > 0 ? h + "h " : "") + (m > 0 ? (h > 0 && m < 10 ? "0" : "") + m + "min" : "0 min"));
$('.cmd[data-cmd_uid=#uid#] .timeCmd#uid#').text(timeraffiche);
$('.cmd[data-cmd_uid=#uid#] .timeCmdLIGHT#uid#').text(timeraffiche);
} else {
jeedom.cmd.displayDuration('#valueDate#', $('.timeCmdLIGHT#uid#'));
jeedom.cmd.displayDuration('#valueDate#', $('.timeCmd#uid#'));
}
if ( info == "NON" ) {
$('.cmd[data-cmd_uid=#uid#] .timeCmd#uid#').hide();
$('.cmd[data-cmd_uid=#uid#] .timeCmdLIGHT#uid#').hide();
} else if ( info == "LIGHT" ) {
// LIGHT
$('.cmd[data-cmd_uid=#uid#] .timeCmd#uid#').hide();
} else {
// NORMAL
$('.cmd[data-cmd_uid=#uid#] .timeCmdLIGHT#uid#').hide();
}
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Merci, je vois ça quand je rentre.
Bonne fin d’après-midi.
Au fait, peux-tu me dire ce qu’il fait et si c’est un widget info numérique?
C’est vraiment trop compliqué sans connaître le contexte.
J’ai l’impression qu’il s’agit d’un robot tondeuse mais j’ai l’impression que chaque commande peut remonter plusieurs informations.
Ceci étant, je ne suis pas sûr de vraiment comprendre.
Je ne voudrais pas abuser mais aurais-tu par hasard un exemple plus simple parce que là je patauge complètement?
Un truc du genre info binaire avec 2 états possibles à mettre dans un widget pour que je puisse essayer de comprendre.
Par avance, merci.
A bientôt
Salut,
Tu ne vas pas avoir d’autre choix que d’apprendre au moins html/css/Javascript (c’est d’ailleurs marqué dans la doc jeedom)… Tu ne pourras pas éternellement assembler le code des autres. Quid du maintien du code par ailleurs?
En plus les premiers cours de Css concernent souvent le positionnement 
!
1 « J'aime »
oui c’est un widget qui n’a rien à voir avec ton besoin, si ce n’est l’utilisation de la superposition d’images
tu peux prendre par exemple, la partie concernant le wifi, ca affiche une icone en fonction de la puissance du wifi sur l’image de tondeuse
Ok, je te remercie
1 « J'aime »
@Nemeraud
Bonsoir,
Bon, j’ai presque réussi.
Sauf qu’au lieu que les deux images se superposent, elles se juxtaposent, il y en a une au-dessus de l’autre et le texte est bien sur le fond.
L’indexation a l’air correct 1 pour le fond, 2 pour le logo à superposer, 3 pour le texte.
J’ai essayé de déplacer le logo sur plusieurs positions pour finalement le mettre en absolu en 10 10.
Mais rien n’y fait, le fond reste systématiquement au-dessus du logo.
La code de l’image est ainsi:
img.logo#uid# {
width: 20px;
height: 15px;
position: absolute;
top: 10px;
left: 10px;
z-index:2;
}et celui de l’affichage du fond et du logo est ainsi:
$('.fond#uid#').empty().append('<img src="'+srcImg+'fo_rouge.png" width="85px">');
$('.logo#uid#').empty().append('<img src="'+srcFld+'sp_pisctemp.png" width="50px">');Et voilà le résultat:
Si tu as une piste à me proposer, n’hésite surtout pas.
Par avance, merci
Si tu mets en absolue, l’image se mettra forcément en dessous
Il faudrait l’ensemble du code
Tu mets le div du fond en absolue
Le div de l’image en relatif index 1
Le div du texte en relatif index 2
Je pensais avoir fait ce que tu dis mais je n’ai pas dû comprendre.
Auparavant, j’avais le fond et le texte en position absolue et ça marchait, index 1 pour le fond, 2 pour le texte.
J’ai donc ajouter le logo en le mettant en relatif index 1, le texte index 2, le fond index 3.
Malheureusement, le comportement est strictement identique.
Donc, forcément, j’ai loupé un truc.
Voici le code en question, s’il te faut le script, dis-le moi:
<div class="fond#uid#" style="z-index:3"> </div>
<div class="logo#uid#" style="z-index:1"> </div>
<div style="z-index:2; background-color:#cmdColor#!important;">
<div class="NomCmd#id#">#name_display#</div>
<div class="unite#id#">#unite#</div>
<div class="pariteentiere#id#"></div>
<div class="paritedecimale#id#"></div>
</div>
<style>
img.logo#uid# {
width: 20px;
height: 15px;
position: relative;
top: 10px;
left: 10px;
z-index:1;
}
div.pariteentiere#id# {
font-size:38px;
font-weight:bold;
position:absolute;
top:23px;
right:10px;
width:85px;
height:85px;
z-index:2;
letter-spacing:0px;
}
div.paritedecimale#id# {
font-size:25px;
font-weight:bold;
position:absolute;
top:26px;
right:-22px;
width:85px;
height:85px;
z-index:2;
letter-spacing:0px;
}
</style>Merci encore pour ton aide.
envoi tout le contenu du widget que je le test chez moi ca sera plus simple
C’est parti en MP.
A bientôt