Bonjour,
Depuis que j’ai mis à jour jeedom recemment, le widget modifé basé sur le code de @Salvialf ne marche plus, lorsque je clique sur une icone, l’etat ne change plus
Si quelqu’un aurait une idée car je ne trouve pas depuis un petit moment…
un grand merci d’avance
voici mon code :
<div class="tooltips cmd cmd-widget" data-type="action" data-subtype="slider" 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 id="switch_3_ways_v2#uid#" class="switch_3_ways_v2#uid#">
</div>
<span class="timeCmd#uid# timeCmd label label-default"></span>
<style>
.button_thp i.fa, .button i.fas, .button i.fab {
line-height:54px
color: grey;
}
.button_thp {
box-sizing: border-box;
border: 3px solid grey;
color: grey;
width: 60px;
height: 60px;
display: block;
text-align: center;
cursor: pointer;
font-size: 30px;
margin: 0;
font-weight:400;
}
.mode_lib_small{
color: white;
border:none;
padding:1px 1px 1px 1px;
border-radius:2px;
box-shadow: 0px 0px 2px 2px rgba(255,255,255,0.5);
font:bold 12px Arial;
vertical-align: middle;
}
.switch_3_ways_v2#uid#{
margin:5px 10px 10px 10px;
color:#D0D0D0;
font-size:1em;
font-weight:bold;
position:relative;
display:block;
vertical-align: middle;
}
.switch2#uid#.block0#uid#,
.switch2#uid#.block1#uid#,
.switch2#uid#.block2#uid#,
.switch2#uid#.block3#uid#,
.switch2#uid#.block4#uid#{
text-align:center;
position:relative;
width:0;
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
transition: 100ms ease-out;
color:white;
vertical-align: middle;
margin-right: 20px;
}
.selector#uid#{
text-align:center;
position:absolute;
width:0;
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
transition: 100ms ease-out;
color:white;
}
</style>
<script>
function hexToRgbA(hex,opacite){
var c;
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
c= hex.substring(1).split('');
if(c.length== 3){
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c= '0x'+c.join('');
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+','+opacite+')';
}
throw new Error('Bad Hex');
}
function setTitleBackGroundColor(myTitleSelector,texte,color,textFont)
{
var myColor = color;
if(myColor == '#FFFFFF' || myColor == '#ffffff')
{
myColor = '#1fe0';
myTitleSelector.innerHTML ="";
myTitleSelector.style.boxShadow ="none";
}
else
{
myTitleSelector.innerHTML = texte;
myTitleSelector.style.boxShadow ="0px 0px 1px 1px " + hexToRgbA(myColor,0.3);
}
myTitleSelector.style.backgroundColor =myColor;
myTitleSelector.style.font = "bold "+textFont+"px Arial";
}
function setTitleBox(myTitleBox,texte,color,textFont)
{
myTitleBox.innerHTML =texte;
myTitleBox.style.color = color;
myTitleBox.style.font = "bold "+textFont+"px Arial";
myTitleBox.style.boxShadow ="none";
}
function setButton(myButton,myIcone,iconName,color,buttonSize,borderSize,iconSize,arrondi)
{
myButton.css("border", borderSize+"px solid "+color);
if(arrondi==1)
{
myButton.css("border-radius", buttonSize+"px");
}
myButton.css("color", color);
myButton.css("width", buttonSize+"px");
myButton.css("height", buttonSize+"px");
myButton.css("font-size", iconSize +"px");
var lineheight = buttonSize - borderSize - borderSize;
myIcone.css("line-height",lineheight+"px");
myIcone.css("color",color);
myIcone.removeClass().addClass(iconName);
}
function addBlockButton(switch_3_ways_v2,numBlock,texte,textBoxSize,buttonSize,isSelector,textBoxHeight)
{
var divBlock = document.createElement('div');
var divTitle = document.createElement('div');
var divTitleBox = document.createElement('div');
var divButton = document.createElement('div');
var divButtonThp = document.createElement('div');
var divIcon = document.createElement('i');
//creation des tags
if(isSelector == 1)
{
divBlock.id = "selector#uid#";
divBlock.className = "selector#uid#";
}
else
{
divBlock.id = 'block'+numBlock+"#uid#";
divBlock.className = "switch2#uid# block"+numBlock+"#uid#";
}
divTitle.style.paddingLeft = (buttonSize-textBoxSize)/2 + "px";
divTitleBox.id = "titlebox"+numBlock+"#uid#";
divTitleBox.className ="mode_lib_small";
divTitleBox.style.width = textBoxSize +"px";
divTitle.id = 'title'+numBlock+"#uid#";
divTitle.style.height = textBoxHeight+"px";
divButton.id = 'button'+numBlock+"-#uid#";
divButtonThp.className = "button_thp";
divIcon.id = 'icon'+numBlock+"-#uid#";
divIcon.className = "fa fa-lock";
//append des tags
divButtonThp.appendChild(divIcon);
divButton.appendChild(divButtonThp);
divTitle.appendChild(divTitleBox);
divBlock.appendChild(divTitle);
divBlock.appendChild(divButton);
switch_3_ways_v2.appendChild(divBlock);
}
jeedom.cmd.update['#id#'] = function(_options){
var buttonSize = is_numeric('#taille#') ? parseFloat('#taille#'):60;
var borderSize = is_numeric('#taille_bordure#') ? parseFloat('#taille_bordure#'):3;
var iconSize = is_numeric('#taille_icone#') ? parseFloat('#taille_icone#'):30;
var arrondi = is_numeric('#arrondi#') ? parseFloat('#arrondi#'):1;
var textBoxSize = ('#textBoxSize#' !='#'+'textBoxSize#') ? "#textBoxSize#":50;
var textFont = ('#textFont#' !='#'+'textFont#') ? "#textFont#":12;
var textBoxHeight = ('#textBoxHeight#' !='#'+'textBoxHeight#') ? "#textBoxHeight#":20;
var value0 = ('#icone0#' !='#'+'icone0#') ? "#icone0#":"fas fa-lock";
var value1 = ('#icone1#' !='#'+'icone1#') ? "#icone1#":"fas fa-lock";
var value2 = ('#icone2#' !='#'+'icone2#') ? "#icone2#":"fas fa-lock";
var value3 = ('#icone3#' !='#'+'icone3#') ? "#icone3#":"fas fa-lock";
var value4 = ('#icone4#' !='#'+'icone4#') ? "#icone4#":"fas fa-lock";
var texte0 = ('#texte0#' !='#'+'texte0#') ? "#texte0#":"texte";
var texte1 = ('#texte1#' !='#'+'texte1#') ? "#texte1#":"texte";
var texte2 = ('#texte2#' !='#'+'texte2#') ? "#texte2#":"texte";
var texte3 = ('#texte3#' !='#'+'texte3#') ? "#texte3#":"texte";
var texte4 = ('#texte4#' !='#'+'texte4#') ? "#texte4#":"texte";
var color0 = ('#color0#' !='#'+'color0#') ? "#color0#":"#FFFFFF";
var color1 = ('#color1#' !='#'+'color1#') ? "#color1#":"#FFFFFF";
var color2 = ('#color2#' !='#'+'color2#') ? "#color2#":"#FFFFFF";
var color3 = ('#color3#' !='#'+'color3#') ? "#color3#":"#FFFFFF";
var color4 = ('#color4#' !='#'+'color4#') ? "#color4#":"#FFFFFF";
var enable0 = ('#enable0#' !='#'+'enable0#') ? "#enable0#":1;
var enable1 = ('#enable1#' !='#'+'enable1#') ? "#enable1#":1;
var enable2 = ('#enable2#' !='#'+'enable2#') ? "#enable2#":1;
var enable3 = ('#enable3#' !='#'+'enable3#') ? "#enable3#":1;
var enable4 = ('#enable4#' !='#'+'enable4#') ? "#enable4#":1;
var blockSize = ('#blockSize#' !='#'+'blockSize#') ? "#blockSize#":60;
var distanceBlock = ('#distanceBlock#' !='#'+'distanceBlock#') ? "#distanceBlock#":20;
var nbBlock = ('#nbBlock#' !='#'+'nbBlock#') ? "#nbBlock#":3;
var showText = ('#showText#' !='#'+'showText#') ? "#showText#":0;
var switch_3_ways_v2 = document.getElementById("switch_3_ways_v2#uid#");
var arrayTexte =[texte0,texte1,texte2,texte3,texte4];
var arrayValue =[value0,value1,value2,value3,value4];
var arrayColor =[color0,color1,color2,color3,color4];
var arrayEnable =[enable0,enable1,enable2,enable3,enable4];
var selectedValue = _options.display_value;{slider: 1}
for (let i = 0; i < nbBlock; i++) {
if (document.getElementById('block'+i+"#uid#")==null)
{
addBlockButton(switch_3_ways_v2,i,arrayTexte[i],textBoxSize,buttonSize,0,textBoxHeight);
setButton($("#button"+i+"-#uid# .button_thp"),$("#button"+i+"-#uid# .button_thp i"),arrayValue[i],'grey',buttonSize,borderSize,iconSize,arrondi);
setTitleBox(document.getElementById("titlebox"+i+"#uid#"),arrayTexte[i],'grey',textFont);
}
}
if (document.getElementById("selector#uid#")==null)
{
addBlockButton(switch_3_ways_v2,'','',textBoxSize,buttonSize,1,textBoxHeight);
}
var selector = document.getElementById("selector#uid#");
var titleSelector = document.getElementById("titlebox#uid#");
if(selectedValue>=nbBlock)
{
selector.style.display ="none";
}
else
{
selector.style.display = "block";
}
if(showText == 0 )
{
for (let i = 0; i < nbBlock; i++) {
$("#title"+i+"#uid#").css('display','none');
}
$("#title#uid#").css('display','none');
}
if ('#vertical#' == "1"){
$('.switch2#uid#').css('margin-bottom',distanceBlock+'px');
$('.switch2#uid#').css('width',blockSize+'px');
selector.style.top = (parseInt(buttonSize)+parseInt(textBoxHeight)+parseInt(distanceBlock))*selectedValue +"px" ;
selector.style.width = blockSize+'px';
setButton($("#button-#uid# .button_thp"),$("#button-#uid# .button_thp i"),arrayValue[selectedValue],arrayColor[selectedValue],buttonSize,borderSize,iconSize,arrondi);
$("#button-#uid# .button_thp").css("box-shadow","0px 0px 2px 2px "+ hexToRgbA(arrayColor[selectedValue],0.7));
setTitleBackGroundColor(titleSelector,arrayTexte[selectedValue],arrayColor[selectedValue],textFont);
}
else
{
$('.switch2#uid#').css('float','left');
$('.switch2#uid#').css('width',blockSize+'px');
$('.switch2#uid#').css('margin-right',distanceBlock+'px');
selector.style.left = (parseInt(blockSize)+parseInt(distanceBlock))*selectedValue +"px" ;
selector.style.width = blockSize+'px';
setButton($("#button-#uid# .button_thp"),$("#button-#uid# .button_thp i"),arrayValue[selectedValue],arrayColor[selectedValue],buttonSize,borderSize,iconSize,arrondi);
$("#button-#uid# .button_thp").css("box-shadow","0px 0px 2px 2px "+ hexToRgbA(arrayColor[selectedValue],0.7));
setTitleBackGroundColor(titleSelector,arrayTexte[selectedValue],arrayColor[selectedValue],textFont);
}
for (let i = 0; i < nbBlock; i++)
{
if(arrayEnable[i]==1){
$('.block'+i+'#uid#').on('click', function(){jeedom.cmd.execute({id: '#id#', value:(i.toString())});});
}
}
if ('#time#' == 'duree') {
jeedom.cmd.displayDuration(_options.valueDate, $('.cmd[data-cmd_id=#id#] .timeCmd'));
}
else if ('#time#' == 'date') {
var date = new Date(_options.valueDate);
var format = $.datepicker.formatDate('D dd/mm', date);
var time = "à "+date.getHours()+":"+(date.getMinutes()<10?'0':'')+date.getMinutes();
$('.cmd[data-cmd_id=#id#] .timeCmd').html(format+'<br>'+time);
}
else if ('#time#' == 'heure') {
var date = new Date(_options.valueDate);
var time = "à "+date.getHours()+":"+(date.getMinutes()<10?'0':'')+date.getMinutes()+":"+(date.getSeconds()<10?'0':'')+date.getSeconds()+"";
$('.cmd[data-cmd_id=#id#] .timeCmd').html(time);
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'})
</script>
</div>
…
