Salut à tous
J’ai testé un switch On/Off grace à HtmlDisplay et j’aimerais le transformer en Widget mais je n’y comprends rien.
J’ai essayé avec des exemples de code du core mais je n’y arrive pas.
Je vous remercie par avance si vous pouvez m’aider.
Voila mon code
<style>
.bauble_box .bauble_label {
background: #ed5651;
background-position: 62px 5px;
background-repeat: no-repeat;
background-size: auto 5px;
border: 0;
border-radius: 50px;
box-shadow: inset 0 10px 20px rgba(0,0,0,.4), 0 -1px 0px rgba(0,0,0,.2), inset 0 -1px 0px #fff;
/*box-shadow: inset 0 10px 20px rgba(0,0,0,.4), 0 -1px 0px rgba(0,0,0,.2), inset 0 -1px 0px #fff;*/
cursor: pointer;
display: inline-block;
font-size: 0;
height: 40px;
position: relative;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
width: 90px;
}
.bauble_box .bauble_label:before {
background-color: rgba(255,255,255,.2);
background-position: 0 0;
background-repeat: repeat;
background-size: 30% auto;
border-radius: 50%;
box-shadow: inset 0 -5px 25px #500, 0 10px 20px rgba(0,0,0,.4); /*couleur rouge foncee*/
content: '';
display: block;
height: 30px;
left: 5px;
position: absolute;
top: 6px;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
width: 30px;
z-index: 2;
}
.bauble_box input.bauble_input {
opacity: 0;
z-index: 0;
}
/* Checked */
.bauble_box input.bauble_input:checked + .bauble_label {
background-color: #2dcc22;
}
.bauble_box input.bauble_input:checked + .bauble_label:before {
background-position: 150% 0;
box-shadow: inset 0 -5px 25px #050, 0 10px 20px rgba(0,0,0,.4);/*couleur vert foncee*/
left: calc( 100% - 35px );
}
</style>
<div class="bauble_box">
<input class="bauble_input" id="bauble_check" name="bauble" type="checkbox">
<label class="bauble_label" for="bauble_check" onclick="toggleLumi()">Toggle</label>
</div>
<script>
function toggleLumi() {
var isChecked = document.getElementById('bauble_check').checked;
if (isChecked) {
console.log('Éteindre la lumière');
// Exécuter la commande OFF
jeedom.cmd.execute({ id: '84' });
} else {
console.log('Allumer la lumière');
// Exécuter la commande ON
jeedom.cmd.execute({ id: '85' });
}
}
jeedom.cmd.addUpdateFunction('86', function(_options) {
if (_options.display_value >= 1 || _options.display_value == 'on') document.getElementById('bauble_check').checked = true
else document.getElementById('bauble_check').checked = false
})
jeedom.cmd.refreshValue([{cmd_id :'#id#',display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#'}]);
</script>