Bonjour à tous
Je vous propose un widget « Bandeau » inspiré du design de @ [Djal94] (https://www.jeedom.com/forum/memberlist.php?mode=viewprofile&u=5979)
Merci à lui pour son autorisation
C’est un widget pour info binaire
Options :
- name : texte du bandeau, sinon Display_name
- coloron : Couleur ON sous la forme #xxxxx, sinon VERT
- coloroff : Couleur OFF sous la forme #xxxxx, sinon ROUGE
- imgon : Image ON avec répertoire (Obligatoire)
- imgoff : Image ON avec répertoire (Obligatoire)
<div style="padding:0px; width:90px; height:90px" class="cmd #history# container-fluid tooltips cmd-widget" data-type="info" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#">
<div class="ruban#uid#" style="#hideCmdName#"><span class="rubantext#uid#"></span></div>
<div class="contour#uid#">
<div class="fenetre#uid#">
<img class="image#uid#" style="transform:translate(-50%,-50%);" />
<span class="timeCmd#uid#"></span>
</div>
</div>
<style>
img.image#uid# {
position: absolute;
margin-top: 2px;
margin-left: 2px;
top: 40%;
left: 50%;
width: 80%;
z-index: 2;
}
.contour#uid# {
border-left: solid 1px black;
border-right: solid 1px black;
border-top: solid 2px #BEBEBE;
border-bottom: solid 1px black;
width: 100% ;
height: 100%;
text-align: center;
color: white;
text-transform: uppercase;
display: flex;
background-color: #BEBEBE;
border-radius: 0px 0px 5px 5px;
opacity: 0.9;
box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);
}
.fenetre#uid# {
margin: auto;
margin-top: 3px;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 5px;
width: 95%;
height: 95%;
border-radius: 2px;
background-color: #BEBEBE;
opacity: 0.9;
box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
}
.fenetre#uid# span {
position: absolute;
font-size: 10px;
font-weight: bold;
color: #FFF;
text-align: center;
color: black;
bottom: 2px;
left: 0px;
width: 100%;
z-index: 2;
}
div.ruban#uid# {
position: absolute;
left: -5px;
top: -5px;
z-index: 2;
overflow: hidden;
width: 75px;
height: 75px;
text-align: right;
}
.ruban#uid# span {
font-size: 12px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
/*background-color: #79A70A;*/
background: linear-gradient(#2989d8 0%, #1e5799 100%);
position: absolute;
top: 19px;
left: -21px;
}
.ruban#uid# span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #1e5799;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #1e5799;
}
.ruban#uid# span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #1e5799;
border-bottom: 3px solid transparent;
border-top: 3px solid #1e5799;
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options){
// Récupération de la valeur
var value = _options.display_value;
// Récupération des options
/*
name : texte du bandeau, sinon Display_name
coloron : Couleur ON sous la forme #xxxxx, sinon VERT
coloroff : Couleur OFF sous la forme #xxxxx, sinon ROUGE
imgon : Image ON avec répertoire
imgoff : Image ON avec répertoire
*/
var valueName = ('#name#' !='#'+'name#') ? "#name#":"";
if (valueName != "" ) {
$(".rubantext#uid#").text(valueName);
} else {
$(".rubantext#uid#").text('#name_display#');
}
var valueCouleurOn = ('#coloron#' !='#'+'coloron#') ? "#coloron#":"#61FC94";
var valueCouleurOff = ('#coloroff#' !='#'+'coloroff#') ? "#coloroff#":"#FC6361";
var valueImgOn = ('#imgon#' !='#'+'imgon#') ? "#imgon#":"";
var valueImgOff = ('#imgoff#' !='#'+'imgoff#') ? "#imgoff#":"";
// TEST PRESENCE IMAGE ON/OFF
if ( valueImgOn == "" || valueImgOff == "" ) { $(".rubantext#uid#").empty().text("ERROR IMG"); }
// TEST 0 ou 1 de la valeur
if ( value == 0) {
var srcIMAGE = valueImgOff;
} else {
var srcIMAGE = valueImgOn;
}
$('.image#uid#').attr('src', srcIMAGE);
// FENETRE COULEUR
if ( value == 0) { var couleurFenetre = valueCouleurOff; } else { var couleurFenetre = valueCouleurOn; }
$('.fenetre#uid#').css("background-color", couleurFenetre);
// FENETRE INFO
$('.fenetre#uid#').css('height', '75%');
jeedom.cmd.displayDuration(_options.valueDate, $('.timeCmd#uid#'));
$('.cmd[data-cmd_id=#id#]').attr('title','srcState du '+_options.valueDate+', collectée le '+_options.collectDate);
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
