mirror of
https://github.com/rstrouse/ESPSomfy-RTS.git
synced 2025-12-13 02:52:11 +01:00
Added ui for controlling drapery directions
This commit is contained in:
Robert Strouse
parent
ac835305cb
commit
7b255e3acb
5 changed files with 97 additions and 15 deletions
|
|
@ -296,7 +296,12 @@ i.icss-anim:after {
|
|||
[class*="-hover"].icss-reverse:hover {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.icss-panel-left {
|
||||
display:none;
|
||||
}
|
||||
.icss-panel-right {
|
||||
display: none;
|
||||
}
|
||||
/* Stack icons */
|
||||
.icss-stack {
|
||||
position: relative;
|
||||
|
|
@ -632,14 +637,16 @@ i.icss-ldrapery {
|
|||
i.icss-ldrapery:after {
|
||||
width: var(--shade-position, 0%);
|
||||
height: calc(100% - .05em);
|
||||
left: 0em;
|
||||
right: calc(100% - var(--shade-position));
|
||||
left:0em;
|
||||
top: 0.025em;
|
||||
border-bottom: 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%);
|
||||
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.05em 0.05em;
|
||||
background-size: 0.1em 0.1em;
|
||||
background-color: rgba(71, 212, 255, 0);
|
||||
transform:rotate(180deg);
|
||||
}
|
||||
i.icss-rdrapery {
|
||||
width: 1.1em;
|
||||
|
|
@ -667,11 +674,62 @@ i.icss-rdrapery {
|
|||
top: 0.025em;
|
||||
border-bottom: 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-size: 0.05em 0.05em;
|
||||
background-size: 0.1em 0.1em;
|
||||
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 {
|
||||
width: 1.1em;
|
||||
|
|
@ -777,6 +835,17 @@ i.icss-garage {
|
|||
background-color: rgba(71, 212, 255, 0);
|
||||
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 {
|
||||
width: .35em;
|
||||
height: .1em;
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="main.css?v=2.1.5p" type="text/css" />
|
||||
<link rel="stylesheet" href="widgets.css?v=2.1.5p" type="text/css" />
|
||||
<link rel="stylesheet" href="icons.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.5" 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" />
|
||||
<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>
|
||||
<body>
|
||||
<div id="divContainer" class="container main" data-auth="false">
|
||||
|
|
@ -313,7 +313,8 @@
|
|||
<option value="4">Shutter</option>
|
||||
<option value="1">Blind</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="5">Garage (1-button)</option>
|
||||
<option value="6">Garage (3-button)</option>
|
||||
|
|
@ -327,7 +328,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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="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>
|
||||
|
|
|
|||
|
|
@ -1196,7 +1196,7 @@ class Security {
|
|||
var security = new Security();
|
||||
|
||||
class General {
|
||||
initialized = false;
|
||||
initialized = false;
|
||||
appVersion = 'v2.1.5';
|
||||
reloadApp = false;
|
||||
init() {
|
||||
|
|
@ -1982,7 +1982,7 @@ class Somfy {
|
|||
divCtl += ' icss-window-shade';
|
||||
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 += `<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">`;
|
||||
|
|
@ -2718,10 +2718,22 @@ class Somfy {
|
|||
document.getElementById('divSunSensor').style.display = '';
|
||||
break;
|
||||
case 5:
|
||||
case 6:
|
||||
ico.classList.remove('icss-window-shade');
|
||||
ico.classList.add('icss-garage');
|
||||
document.getElementById('divSunSensor').style.display = 'none';
|
||||
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');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue