Added stubs for light controls

This commit is contained in:
Robert Strouse 2023-08-28 17:49:28 -07:00
parent cf156ed4ce
commit 64d7abdc16
7 changed files with 81 additions and 6 deletions

View file

@ -714,7 +714,34 @@ i.icss-garage {
background-color: rgba(71, 212, 255, 0);
background-position:left bottom;
}
i.icss-lightbulb-o {
width: .35em;
height: .1em;
border-radius: .1em;
margin: .7em .325em .2em;
box-shadow: 0 .13em, 0 .19em 0 -.03em, 0 .22em 0 -0.035em;
}
i.icss-lightbulb-o:before {
width: .65em;
height: .65em;
border-width: 0.068em;
border-style: solid;
border-radius: 100% 100% 100% .2em;
background-color: transparent;
left: 50%;
transform: translateX(-50%) rotate(-45deg);
bottom: .11em;
}
i.icss-lightbulb-o:after {
width: .25em;
height: .2em;
border-radius: 100%;
box-shadow: inset -0.05em 0.05em;
left: .1em;
top: -.5em;
}
i.icss-upload {
width: 1em;
height: .6em;
@ -932,6 +959,32 @@ i.icss-sun-o {
transform: translate(-50%, -50%) rotate(45deg);
box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
}
div.button-light {
position:absolute;
margin-left:-30px;
cursor:pointer;
}
div.button-light[data-on=false] i.icss-lightbulb-o:before {
background-color:lightgray;
}
div.button-light[data-on=true] i.icss-lightbulb-o:before {
background-color: yellow;
}
div.button-light > i.icss-lightbulb-c {
position: absolute;
font-size: 18px;
color: orange;
left: 6px;
top: 7px;
}
div.button-light > i.icss-lightbulb-o {
position: absolute;
font-size: 32px;
color: gray;
}
div.button-sunflag {
position: relative;
@ -942,7 +995,6 @@ div.button-sunflag {
background-image: radial-gradient(ellipse at center, gainsboro 1%, #ccc 39%, silver 39%, gray 100%);
}
div.button-sunflag > i.icss-sun-c {
position: absolute;
font-size: 18px;

View file

@ -378,6 +378,12 @@
<label for="cbHasSunSensor" style="display:block;font-size:1em;margin-top:0px;margin-left:7px;display:inline-block;">Has Sun Sensor</label>
</div>
</div>
<div id="divLightSwitch" style="margin-top:-10px;">
<div class="field-group">
<input id="cbHasLight" name="hasLight" data-bind="light" type="checkbox" style="" />
<label for="cbHasLight" style="display:block;font-size:1em;margin-top:0px;margin-left:7px;display:inline-block;">Has Light</label>
</div>
</div>
<div style="margin-top:-10px;">
<div class="field-group" style="display:inline-block">
<input id="cbFlipCommands" name="flipCommands" data-bind="flipCommands" type="checkbox" style="" />

View file

@ -1983,6 +1983,7 @@ class Somfy {
}
divCtl += '</div>';
divCtl += `<div class="shadectl-buttons" data-shadeType="${shade.shadeType}">`;
divCtl += `<div class="button-light cmd-button" data-cmd="light" data-shadeid="${shade.shadeId}" data-on="${shade.flags & 0x08 ? 'true' : 'false'}" style="${!shade.light ? 'display:none' : ''}"><i class="icss-lightbuld-c"></i><i class="icss-lightbulb-o"></i></div>`;
divCtl += `<div class="button-sunflag cmd-button" data-cmd="sunflag" data-shadeid="${shade.shadeId}" data-on="${shade.flags & 0x01 ? 'true' : 'false'}" style="${!shade.sunSensor ? 'display:none' : ''}"><i class="icss-sun-c"></i><i class="icss-sun-o"></i></div>`;
divCtl += `<div class="button-outline cmd-button" data-cmd="up" data-shadeid="${shade.shadeId}"><i class="icss-somfy-up"></i></div>`;
divCtl += `<div class="button-outline cmd-button my-button" data-cmd="my" data-shadeid="${shade.shadeId}" style="font-size:2em;padding:10px;"><span>my</span></div>`;
@ -2010,6 +2011,9 @@ class Somfy {
if (new Date().getTime() - this.btnDown > 2000) event.preventDefault();
else this.sendCommand(shadeId, cmd);
}
else if (cmd === 'light') {
event.currentTarget.setAttribute('data-on', !makeBool(event.currentTarget.getAttribute('data-on')));
}
else if (cmd === 'sunflag') {
if (makeBool(event.currentTarget.getAttribute('data-on')))
this.sendCommand(shadeId, 'flag');
@ -2040,6 +2044,7 @@ class Somfy {
}, 2000);
}
}
else if (cmd === 'light') return;
else if (cmd === 'sunflag') return;
else if (makeBool(elShade.getAttribute('data-tilt'))) {
this.btnTimer = setTimeout(() => {
@ -2420,6 +2425,7 @@ class Somfy {
let sel = document.getElementById('selShadeType');
let tilt = parseInt(document.getElementById('selTiltType').value, 10);
let sun = true;
let light = false;
let ico = document.getElementById('icoShade');
let type = parseInt(sel.value, 10);
document.getElementById('somfyShade').setAttribute('data-shadetype', type);
@ -2459,6 +2465,7 @@ class Somfy {
if (ico.classList.contains('icss-awning')) ico.classList.remove('icss-awning');
if (ico.classList.contains('icss-shutter')) ico.classList.remove('icss-shutter');
if (!ico.classList.contains('icss-garage')) ico.classList.add('icss-garage');
light = true;
sun = false;
tilt = false;
break;
@ -2476,6 +2483,7 @@ class Somfy {
document.getElementById('divLiftSettings').style.display = tilt === 3 ? 'none' : '';
document.querySelector('#divSomfyButtons i.icss-window-tilt').style.display = tilt ? '' : 'none';
document.getElementById('divSunSensor').style.display = sun ? '' : 'none';
document.getElementById('divLightSwitch').style.display = light ? '' : 'none';
}
onShadeBitLengthChanged(el) {
document.getElementById('somfyShade').setAttribute('data-bitlength', el.value);