mirror of
https://github.com/rstrouse/ESPSomfy-RTS.git
synced 2025-12-13 11:02:12 +01:00
Add functionality for awnings and sun flag. #54
This commit is contained in:
Robert Strouse
parent
cc418c63ff
commit
3ee5bb45c8
6 changed files with 189 additions and 18 deletions
147
data/icons.css
147
data/icons.css
|
|
@ -716,3 +716,150 @@ i.icss-awning {
|
|||
background-image: repeating-linear-gradient(90deg, var(--shade-color, currentColor), var(--shade-color, currentColor) calc(25% - 4px), black calc(25% - 2px), var(--shade-color, currentColor) calc(25% - 2px));
|
||||
background-color: rgba(71, 212, 255, 0);
|
||||
}
|
||||
i.icss-sun-c {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
background-image: radial-gradient(ellipse at center, #fd0 1%, #fb0 39%, #fb0 39%, #d61 100%);
|
||||
box-shadow: 0 0 .06em .03em rgba(255, 107, 0, 0.4), 0 0 22px 11px rgba(255, 203, 0, 0.13);
|
||||
background-position: -.7em -.6em;
|
||||
background-size: 165%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
i.icss-sun-c:before {
|
||||
}
|
||||
|
||||
i.icss-sun-c:after {
|
||||
}
|
||||
|
||||
i.icss-sun {
|
||||
width: .6em;
|
||||
height: .6em;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
border: 0.03em solid transparent;
|
||||
box-shadow: inset 0 0 0 .5em;
|
||||
margin: .2em;
|
||||
}
|
||||
|
||||
i.icss-sun:before {
|
||||
width: .1em;
|
||||
height: .1em;
|
||||
background-color: transparent;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
|
||||
}
|
||||
|
||||
i.icss-sun:after {
|
||||
width: .1em;
|
||||
height: .1em;
|
||||
background-color: transparent;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
|
||||
}
|
||||
i.icss-sun-o {
|
||||
width: .6em;
|
||||
height: .6em;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
border: 0.03em solid transparent;
|
||||
box-shadow: inset 0 0 0 .065em;
|
||||
margin: .2em;
|
||||
}
|
||||
|
||||
i.icss-sun-o:before {
|
||||
width: .1em;
|
||||
height: .1em;
|
||||
background-color: transparent;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
|
||||
}
|
||||
|
||||
i.icss-sun-o:after {
|
||||
width: .1em;
|
||||
height: .1em;
|
||||
background-color: transparent;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
|
||||
}
|
||||
i.icss-sun-c {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
background-image: radial-gradient(ellipse at center, #fd0 1%, #fb0 39%, #fb0 39%, #d61 100%);
|
||||
box-shadow: 0 0 .06em .03em rgba(255, 107, 0, 0.4), 0 0 22px 11px rgba(255, 203, 0, 0.13);
|
||||
background-position: -.7em -.6em;
|
||||
background-size: 165%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
i.icss-sun-c:before {
|
||||
}
|
||||
|
||||
i.icss-sun-c:after {
|
||||
}
|
||||
|
||||
i.icss-sun-o {
|
||||
width: .6em;
|
||||
height: .6em;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
border: 0.03em solid transparent;
|
||||
box-shadow: inset 0 0 0 .065em;
|
||||
margin: .2em;
|
||||
}
|
||||
|
||||
i.icss-sun-o:before {
|
||||
width: .1em;
|
||||
height: .1em;
|
||||
background-color: transparent;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
|
||||
}
|
||||
|
||||
i.icss-sun-o:after {
|
||||
width: .1em;
|
||||
height: .1em;
|
||||
background-color: transparent;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
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-sunflag {
|
||||
position: relative;
|
||||
margin-left:-30px;
|
||||
cursor:pointer;
|
||||
}
|
||||
div.button-sunflag[data-on=false] i.icss-sun-c {
|
||||
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;
|
||||
color: orange;
|
||||
left: 6px;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
div.button-sunflag > i.icss-sun-o {
|
||||
position: absolute;
|
||||
font-size: 32px;
|
||||
color: orange;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1075,9 +1075,10 @@ class Somfy {
|
|||
divCtl += `<span class="shadectl-name">${shade.name}</span>`;
|
||||
divCtl += `<span class="shadectl-mypos"><label>My: </label><span id="spanMyPos">${shade.myPos > 0 ? shade.myPos + '%' : '---'}</span>`
|
||||
if (shade.myTiltPos > 0) divCtl += `<label> Tilt: </label><span id="spanMyTiltPos">${shade.myTiltPos > 0 ? shade.myTiltPos + '%' : '---'}</span>`
|
||||
divCtl += '</div>'
|
||||
divCtl += '</div>';
|
||||
|
||||
divCtl += `<div class="shadectl-buttons">`;
|
||||
divCtl += `<div class="button-sunflag cmd-button" data-cmd="sunflag" data-shadeid="${shade.shadeId}" data-on="${shade.flags & 0x01 ? 'true' : 'false'}" style="${shade.shadeType !== 3 ? '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>`;
|
||||
divCtl += `<div class="button-outline cmd-button" data-cmd="down" data-shadeid="${shade.shadeId}"><i class="icss-somfy-down" style="margin-top:-4px;"></i></div>`;
|
||||
|
|
@ -1101,6 +1102,12 @@ class Somfy {
|
|||
if (new Date().getTime() - this.btnDown > 2000) event.preventDefault();
|
||||
else this.sendCommand(shadeId, cmd);
|
||||
}
|
||||
else if (cmd === 'sunflag') {
|
||||
if (makeBool(event.currentTarget.getAttribute('data-on')))
|
||||
this.sendCommand(shadeId, 'flag');
|
||||
else
|
||||
this.sendCommand(shadeId, 'sunflag');
|
||||
}
|
||||
else this.sendCommand(shadeId, cmd);
|
||||
}, true);
|
||||
btns[i].addEventListener('mousedown', (event) => {
|
||||
|
|
@ -1299,6 +1306,12 @@ class Somfy {
|
|||
tilts[i].setAttribute('data-tiltposition', `${state.tiltPosition}`);
|
||||
}
|
||||
}
|
||||
let flags = document.querySelectorAll(`.button-sunflag[data-shadeid="${state.shadeId}"]`);
|
||||
for (let i = 0; i < flags.length; i++) {
|
||||
flags[i].style.display = state.type === 3 ? '' : 'none';
|
||||
flags[i].setAttribute('data-on', state.flags & 0x01 === 0x01 ? 'true' : 'false');
|
||||
|
||||
}
|
||||
let divs = document.querySelectorAll(`.somfyShadeCtl[data-shadeid="${state.shadeId}"]`);
|
||||
for (let i = 0; i < divs.length; i++) {
|
||||
divs[i].setAttribute('data-direction', state.direction);
|
||||
|
|
@ -1412,10 +1425,19 @@ class Somfy {
|
|||
case 1:
|
||||
document.getElementById('divTiltSettings').style.display = '';
|
||||
if (ico.classList.contains('icss-window-shade')) ico.classList.remove('icss-window-shade');
|
||||
if (ico.classList.contains('icss-awning')) ico.classList.remove('icss-awning');
|
||||
if (!ico.classList.contains('icss-window-blind')) ico.classList.add('icss-window-blind');
|
||||
break;
|
||||
case 3:
|
||||
document.getElementById('divTiltSettings').style.display = 'none';
|
||||
if (ico.classList.contains('icss-window-shade')) ico.classList.remove('icss-window-shade');
|
||||
if (ico.classList.contains('icss-window-blind')) ico.classList.remove('icss-window-blind');
|
||||
if (!ico.classList.contains('icss-awning')) ico.classList.add('icss-awning');
|
||||
break;
|
||||
|
||||
default:
|
||||
if (ico.classList.contains('icss-window-blind')) ico.classList.remove('icss-window-blind');
|
||||
if (ico.classList.contains('icss-awning')) ico.classList.remove('icss-awning');
|
||||
if (!ico.classList.contains('icss-window-shade')) ico.classList.add('icss-window-shade');
|
||||
document.getElementById('divTiltSettings').style.display = 'none';
|
||||
tilt = false;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue