aaribaud/ESPSomfy-RTS
0
0
Fork 0
mirror of https://github.com/rstrouse/ESPSomfy-RTS.git synced 2025-12-13 11:02:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added ui for controlling drapery directions

Browse source
This commit is contained in:
Robert Strouse 2023-09-09 12:39:03 -07:00
parent ac835305cb
commit 7b255e3acb
5 changed files with 97 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
SomfyController.ino.esp32.bin
View file

Binary file not shown.

BIN
SomfyController.littlefs.bin
View file

Binary file not shown.

83
data/icons.css
View file

@ -296,7 +296,12 @@ i.icss-anim:after {
[class*="-hover"].icss-reverse:hover { [class*="-hover"].icss-reverse:hover {
animation-direction: reverse; animation-direction: reverse;
} }
.icss-panel-left {
display:none;
}
.icss-panel-right {
display: none;
}
/* Stack icons */ /* Stack icons */
.icss-stack { .icss-stack {
position: relative; position: relative;
@ -632,14 +637,16 @@ i.icss-ldrapery {
i.icss-ldrapery:after { i.icss-ldrapery:after {
width: var(--shade-position, 0%); width: var(--shade-position, 0%);
height: calc(100% - .05em); height: calc(100% - .05em);
left: 0em; right: calc(100% - var(--shade-position));
left:0em;
top: 0.025em; top: 0.025em;
border-bottom: solid 0.025em gray; border-bottom: solid 0.025em gray;
border-right:solid 0.025em gray; border-right: solid 0.025em gray;
background-image: repeating-conic-gradient(var(--shade-color, currentColor) 0% 25%, rgba(71, 212, 255, 0) 0% 50%); background-image: repeating-linear-gradient(to left, var(--shade-color, currentColor), var(--shade-color, currentColor) 75%, rgba(255,255,255,0) 100%);
background-position: 0 0, 100% 100%; background-position: 0 0, 100% 100%;
background-size: 0.05em 0.05em; background-size: 0.1em 0.1em;
background-color: rgba(71, 212, 255, 0); background-color: rgba(71, 212, 255, 0);
transform:rotate(180deg);
} }
i.icss-rdrapery { i.icss-rdrapery {
width: 1.1em; width: 1.1em;
@ -667,11 +674,62 @@ i.icss-rdrapery {
top: 0.025em; top: 0.025em;
border-bottom: solid 0.025em gray; border-bottom: solid 0.025em gray;
border-left: solid 0.025em gray; border-left: solid 0.025em gray;
background-image: repeating-conic-gradient(var(--shade-color, currentColor) 0% 25%, rgba(71, 212, 255, 0) 0% 50%); background-image: repeating-linear-gradient(to left, var(--shade-color, currentColor), var(--shade-color, currentColor) 75%, rgba(255,255,255,0) 100%);
background-position: 0 0, 100% 100%; background-position: 0 0, 100% 100%;
background-size: 0.05em 0.05em; background-size: 0.1em 0.1em;
background-color: rgba(71, 212, 255, 0); background-color: rgba(71, 212, 255, 0);
} }
i.icss-cdrapery {
width: 1.1em;
height: .9em;
background-color: transparent;
border: .05em solid transparent;
border-width: 0 .1em;
box-shadow: inset 0 0 0 .01em, inset 0 .01em 0 .07em, 0 .07em 0;
margin: .1em 0 .07em;
}
i.icss-cdrapery:before {
width: 1.1em;
height: .2em;
border-bottom: .1em solid transparent;
box-shadow: inset 0 1em, 0 0em 0 -.1em;
top: -.05em;
left: -.09em;
}
i.icss-cdrapery:after {
}
i.icss-cdrapery > span.icss-panel-left {
width: calc(var(--shade-position, 0%) * .5);
height: calc(100% - .05em);
display:inline-block;
position:absolute;
right: calc(50% - (var(--shade-position, 0%) *.5));
left: 0em;
top: 0.025em;
border-bottom: solid 0.025em gray;
border-right: solid 0.025em gray;
background-image: repeating-linear-gradient(to left, var(--shade-color, currentColor), var(--shade-color, currentColor) 75%, rgba(255,255,255,0) 100%);
background-position: 0 0, 100% 100%;
background-size: 0.1em 0.1em;
background-color: rgba(71, 212, 255, 0);
transform: rotate(180deg);
}
i.icss-cdrapery > span.icss-panel-right {
width: calc(var(--shade-position, 0%) * .5);
height: calc(100% - .05em);
display: inline-block;
position: absolute;
left: calc(100% - ((var(--shade-position, 0%) *.5)) - .015em);
top: 0.025em;
border-bottom: solid 0.025em gray;
background-image: repeating-linear-gradient(to left, var(--shade-color, currentColor), var(--shade-color, currentColor) 75%, rgba(255,255,255,0) 100%);
background-position: 0 0, 100% 100%;
background-size: 0.1em 0.1em;
background-color: rgba(71, 212, 255, 0);
}
i.icss-shutter { i.icss-shutter {
width: 1.1em; width: 1.1em;
@ -777,6 +835,17 @@ i.icss-garage {
background-color: rgba(71, 212, 255, 0); background-color: rgba(71, 212, 255, 0);
background-position:left bottom; background-position:left bottom;
} }
i.icss-garage > span.icss-panel-left {
position: absolute;
display:inline-block;
border-radius:50%;
border:solid 1px white;
width: .1em;
height:.05em;
top: calc(var(--shade-position, 0%) - .32em);
background: white;
left: calc(50% - .05em);
}
i.icss-lightbulb-o { i.icss-lightbulb-o {
width: .35em; width: .35em;
height: .1em; height: .1em;

13
data/index.html
View file

@ -3,11 +3,11 @@
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="main.css?v=2.1.5p" type="text/css" /> <link rel="stylesheet" href="main.css?v=2.1.5" type="text/css" />
<link rel="stylesheet" href="widgets.css?v=2.1.5p" type="text/css" /> <link rel="stylesheet" href="widgets.css?v=2.1.5" type="text/css" />
<link rel="stylesheet" href="icons.css?v=2.1.5p" type="text/css" /> <link rel="stylesheet" href="icons.css?v=2.1.5" type="text/css" />
<link rel="icon" type="image/png" href="favicon.png" /> <link rel="icon" type="image/png" href="favicon.png" />
<script type="text/javascript" src="index.js?v=2.1.5p"></script> <script type="text/javascript" src="index.js?v=2.1.5"></script>
</head> </head>
<body> <body>
<div id="divContainer" class="container main" data-auth="false"> <div id="divContainer" class="container main" data-auth="false">
@ -313,7 +313,8 @@
<option value="4">Shutter</option> <option value="4">Shutter</option>
<option value="1">Blind</option> <option value="1">Blind</option>
<option value="2">Drapery (left)</option> <option value="2">Drapery (left)</option>
<option value="7">Drapery (Right)</option> <option value="7">Drapery (right)</option>
<option value="8">Drapery (center)</option>
<option value="3">Awning</option> <option value="3">Awning</option>
<option value="5">Garage (1-button)</option> <option value="5">Garage (1-button)</option>
<option value="6">Garage (3-button)</option> <option value="6">Garage (3-button)</option>
@ -327,7 +328,7 @@
</div> </div>
</div> </div>
<div id="divSomfyButtons" class="shadectl-buttons" style="float:right;margin-top:10px;position:relative"> <div id="divSomfyButtons" class="shadectl-buttons" style="float:right;margin-top:10px;position:relative">
<div style="display:inline-block;margin-right:7px;position:relative;font-size:48px;"><i id="icoShade" class="somfy-shade-icon icss-window-shade" data-shadeid="0" style="--shade-position:0%;vertical-align:middle;"></i><i class="icss-window-tilt" data-tiltposition="0" style="display:none;"></i></div> <div style="display:inline-block;margin-right:7px;position:relative;font-size:48px;"><i id="icoShade" class="somfy-shade-icon icss-window-shade" data-shadeid="0" style="--shade-position:0%;vertical-align:middle;"><span class="icss-panel-left"></span><span class="icss-panel-right"></span></i><i class="icss-window-tilt" data-tiltposition="0" style="display:none;"></i></div>
<div class="button-outline" data-cmd="up" onclick="somfy.sendCommand(parseInt(document.getElementById('spanShadeId').innerText, 10), 'up');"><i class="icss-somfy-up"></i></div> <div class="button-outline" data-cmd="up" onclick="somfy.sendCommand(parseInt(document.getElementById('spanShadeId').innerText, 10), 'up');"><i class="icss-somfy-up"></i></div>
<div class="button-outline" data-cmd="my" onclick="somfy.sendCommand(parseInt(document.getElementById('spanShadeId').innerText, 10), 'my');" style="font-size: 2em; padding: 10px;"><span>my</span></div> <div class="button-outline" data-cmd="my" onclick="somfy.sendCommand(parseInt(document.getElementById('spanShadeId').innerText, 10), 'my');" style="font-size: 2em; padding: 10px;"><span>my</span></div>
<div class="button-outline" data-cmd="down" onclick="somfy.sendCommand(parseInt(document.getElementById('spanShadeId').innerText, 10), 'down');"><i class="icss-somfy-down" style="margin-top:-4px;"></i></div> <div class="button-outline" data-cmd="down" onclick="somfy.sendCommand(parseInt(document.getElementById('spanShadeId').innerText, 10), 'down');"><i class="icss-somfy-down" style="margin-top:-4px;"></i></div>

16
data/index.js
View file

@ -1196,7 +1196,7 @@ class Security {
var security = new Security(); var security = new Security();
class General { class General {
initialized = false; initialized = false;
appVersion = 'v2.1.5'; appVersion = 'v2.1.5';
reloadApp = false; reloadApp = false;
init() { init() {
@ -1982,7 +1982,7 @@ class Somfy {
divCtl += ' icss-window-shade'; divCtl += ' icss-window-shade';
break; break;
} }
divCtl += `" data-shadeid="${shade.shadeId}" style="--shade-position:${shade.flipPosition ? 100 - shade.position : shade.position}%;vertical-align: top;"></i>`; divCtl += `" data-shadeid="${shade.shadeId}" style="--shade-position:${shade.flipPosition ? 100 - shade.position : shade.position}%;vertical-align: top;"><span class="icss-panel-left"></span><span class="icss-panel-right"></span></i>`;
divCtl += shade.tiltType !== 0 ? `<i class="icss-window-tilt" data-shadeid="${shade.shadeId}" data-tiltposition="${shade.tiltPosition}"></i></div>` : '</div>'; divCtl += shade.tiltType !== 0 ? `<i class="icss-window-tilt" data-shadeid="${shade.shadeId}" data-tiltposition="${shade.tiltPosition}"></i></div>` : '</div>';
divCtl += `<div class="indicator indicator-wind"><i class="icss-warning"></i></div><div class="indicator indicator-sun"><i class="icss-sun"></i></div>`; divCtl += `<div class="indicator indicator-wind"><i class="icss-warning"></i></div><div class="indicator indicator-sun"><i class="icss-sun"></i></div>`;
divCtl += `<div class="shade-name">`; divCtl += `<div class="shade-name">`;
@ -2718,10 +2718,22 @@ class Somfy {
document.getElementById('divSunSensor').style.display = ''; document.getElementById('divSunSensor').style.display = '';
break; break;
case 5: case 5:
case 6:
ico.classList.remove('icss-window-shade'); ico.classList.remove('icss-window-shade');
ico.classList.add('icss-garage'); ico.classList.add('icss-garage');
document.getElementById('divSunSensor').style.display = 'none'; document.getElementById('divSunSensor').style.display = 'none';
break; break;
case 7:
ico.classList.remove('icss-window-shade');
ico.classList.add('icss-rdrapery');
document.getElementById('divSunSensor').style.display = '';
break;
case 8:
ico.classList.remove('icss-window-shade');
ico.classList.add('icss-cdrapery');
document.getElementById('divSunSensor').style.display = '';
break;
} }
let tilt = ico.parentElement.querySelector('i.icss-window-tilt'); let tilt = ico.parentElement.querySelector('i.icss-window-tilt');