Salut à tous ,
Depuis le passage en 4.4 , je ne parviens pas à placer mes volets dans mon design à l’endroit voulu.
A l’époque j’avais suivi ce tuto qui a toujours bien fonctionné.
En attendant j’ai mis un autre widget mais bon ; si quelqu’un peut me dire si c’est modifiable ?
J’ai laissé un message à son auteur au cas ou …
merci
Bonjour
Il faudrait mettre le code du widget en question car c’est lui qui a un bug la
De passage, voici le code du widget de @pj66 que j’ai trouvé via le lien plus haut
<!--
Widget name : rollershutter_window_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-volet-roulant-pour-votre-design-jeedom/
Inspiration : https://codepen.io/Barrydreamt/pen/MZEMRO
Last Update : 20200418 - creation
-->
<style>
:root{
--width-window: 100px;
--height-window: 100px;
--thickness-window:5px;
--window-color: #1b1a1a;
--window-bg-color: #99B2B7;
}
body {}
.window {
height: var(--height-window);
width: var(--width-window);
box-sizing: border-box;
}
.window .blinds_container, .window .panes_container{
height: var(--height-window);
width: var(--width-window);
position:absolute;
top:0;
left:0;
}
.window .blinds_container {
z-index:5;
}
.window .panes_container {
z-index:1;
background: var(--window-color);
}
.window .blinds {
height: calc(var(--height-window) - var(--thickness-window));
width: calc(var(--width-window) - var(--thickness-window) - var(--thickness-window));
background: repeating-linear-gradient(#00416A 20%, #E4E5E6 20%, #111 25%, #00416A 20%) no-repeat 50% 50% / 100% 100%;
float: left;
transition: all 1000ms ease;
}
.window .left-edge {
height: calc(var(--height-window) - var(--thickness-window));
background: #1b1a1a;
width: var(--thickness-window);
float: left;
position: relative;
}
.window .right-edge {
height: calc(var(--height-window) - var(--thickness-window));
background: var(--window-color);
width: var(--thickness-window);
float: right;
position: relative;
}
.window .top-edge {
height: var(--thickness-window);
background: var(--window-color);
width: var(--width-window);
float: left;
position: relative;
}
.window .bottom-edge {
height: var(--thickness-window);
background: var(--window-color);
width: var(--width-window);
float: left;
position: relative;
}
@media (max-width: calc(var(--width-window) - var(--thickness-window) - var(--thickness-window))) {
.window .blinds {
max-width: 360px;
margin-right: 10px;
margin-left: 10px;
}
}
.window input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 100;
opacity: 0;
}
.window input[type=checkbox]:checked ~ div.blinds {
top: 0px;
height: 0px;
transition: all 1000ms ease-out;
}
.window .pane {
float: left;
width: 46%;
height: 46%;
margin: 2%;
background: var(--window-bg-color);
}
</style>
<div class="window cmd cmd-widget #history#" data-type="info" data-subtype="binary" data-template="badge" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="blinds_container">
<input id="check#id#" type="checkbox" />
<div class="top-edge"></div>
<div class="left-edge"></div>
<div class="blinds"></div>
<div class="right-edge"></div>
<div class="bottom-edge"></div>
</div>
<div class="panes_container">
<div class="pane"></div>
<div class="pane"></div>
<div class="pane"></div>
<div class="pane"></div>
</div>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
var cmd = $('.cmd[data-cmd_id=#id#]');
var open = _options.display_value;
if (open == '1') {
document.getElementById('check#id#').checked = true;
} else {
document.getElementById('check#id#').checked = false;
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
Et en version : Widget version baie vitrée
<!--
Widget name : rollershutter_bay-window_mmi
Author : geqr
Website : www.ma-maison-intelligente.fr
Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-volet-roulant-pour-votre-design-jeedom/
Inspiration : https://codepen.io/Barrydreamt/pen/MZEMRO
Last Update : 20200418 - creation
-->
<style>
:root{
--width-bay-window: 100px;
--height-bay-window: 100px;
--thickness-bay-window:5px;
--bay-window-color: #1b1a1a;
--bay-window-bg-color: #99B2B7;
}
body {
}
.bay-window {
height: var(--height-bay-window);
width: var(--width-bay-window);
box-sizing: border-box;
}
.bay-window .blinds_container, .bay-window .panes_container{
height: var(--height-bay-window);
width: var(--width-bay-window);
position:absolute;
top:0;
left:0;
}
.bay-window .blinds_container {
z-index:5;
}
.bay-window .panes_container {
z-index:1;
background: var(--bay-window-color);
}
.bay-window .blinds {
height: calc(var(--height-bay-window) - var(--thickness-bay-window));
width: calc(var(--width-bay-window) - var(--thickness-bay-window) - var(--thickness-bay-window));
background: repeating-linear-gradient(#00416A 20%, #E4E5E6 20%, #111 25%, #00416A 20%) no-repeat 50% 50% / 100% 100%;
float: left;
transition: all 1000ms ease;
}
.bay-window .left-edge {
height: calc(var(--height-bay-window) - var(--thickness-bay-window));
background: #1b1a1a;
width: var(--thickness-bay-window);
float: left;
position: relative;
}
.bay-window .right-edge {
height: calc(var(--height-bay-window) - var(--thickness-bay-window));
background: var(--bay-window-color);
width: var(--thickness-bay-window);
float: right;
position: relative;
}
.bay-window .top-edge {
height: var(--thickness-bay-window);
background: var(--bay-window-color);
width: var(--width-bay-window);
float: left;
position: relative;
}
.bay-window .bottom-edge {
height: var(--thickness-bay-window);
background: var(--bay-window-color);
width: var(--width-bay-window);
float: left;
position: relative;
}
@media (max-width: calc(var(--width-bay-window) - var(--thickness-bay-window) - var(--thickness-bay-window))) {
.bay-window .blinds {
max-width: 360px;
margin-right: 10px;
margin-left: 10px;
}
}
.bay-window input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 100;
opacity: 0;
}
.bay-window input[type=checkbox]:checked ~ div.blinds {
top: 0px;
height: 0px;
transition: all 1000ms ease-out;
}
.bay-window .pane {
float: left;
width: 46%;
height: 98%;
margin: 2%;
background: var(--bay-window-bg-color);
}
</style>
<div class="bay-window cmd cmd-widget #history#" data-type="info" data-subtype="binary" data-template="badge" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="blinds_container">
<input id="check#id#" type="checkbox" />
<div class="top-edge"></div>
<div class="left-edge"></div>
<div class="blinds"></div>
<div class="right-edge"></div>
<div class="bottom-edge"></div>
</div>
<div class="panes_container">
<div class="pane"></div>
<div class="pane"></div>
</div>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
var cmd = $('.cmd[data-cmd_id=#id#]');
var open = _options.display_value;
if (open == '1') {
document.getElementById('check#id#').checked = true;
} else {
document.getElementById('check#id#').checked = false;
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
Merci