From 7b255e3acb21e830a517d1cf94da17b509dd282b Mon Sep 17 00:00:00 2001
From: Robert Strouse <rstrouse@truepointsolutions.com>
Date: Sat, 9 Sep 2023 12:39:03 -0700
Subject: [PATCH] Added ui for controlling drapery directions

---
 SomfyController.ino.esp32.bin | Bin 1102736 -> 1102736 bytes
 SomfyController.littlefs.bin  | Bin 1441792 -> 1441792 bytes
 data/icons.css                |  83 +++++++++++++++++++++++++++++++---
 data/index.html               |  13 +++---
 data/index.js                 |  16 ++++++-
 5 files changed, 97 insertions(+), 15 deletions(-)

diff --git a/SomfyController.ino.esp32.bin b/SomfyController.ino.esp32.bin
index 39984f8d13dcae53fccae248c1e36482a3ac7435..061212a7eb57892a75d2deb147f0654e48d2ed34 100644
GIT binary patch
delta 148
zcmbQR+<5{JZBU3?&6oUt=SClmtdFLN+ZEeq{N5^Owf1VV^mCT0oM|(5On#^w(5%4N
zuD}SwOhC*G#4JF}3dC$c%nrmHK+FlmTtLhX#5_RE3&eat%)ecMQNaI_;-$%dF7Irb
hs=a4%9m^t-sF`dvZ!f&r`SVB(kL0!KNAJy_0|1ZwHf8_-

delta 148
zcmbQR+<5{JZBV$hCh(xsEXDS1Y|Lttj-A@owVI1p=grlnvznhDJXK$OYw|<ofMx~8
zb_GTdW&&bnAZ7t#Rv=~rVs;?r0Afxc<^p1FAm#yLULfWJV*c$4i~|0b6eUt-$i4Zb
hc5QY}hToc*RcCdUnbsc`UVq}(_x#<{T^^o%1pxIPHyQu{

diff --git a/SomfyController.littlefs.bin b/SomfyController.littlefs.bin
index db83d88674170708b947ba65054eaed67704e23c..a510fb7a0fe3f6989c334b450c89a66b8824c6fa 100644
GIT binary patch
delta 3915
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
J`Qk3r{~K}9??nIr

delta 2650
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
Paw;R_dbF%XdgOlr=RHm9

diff --git a/data/icons.css b/data/icons.css
index 36727d4..4d4d89d 100644
--- a/data/icons.css
+++ b/data/icons.css
@@ -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;
diff --git a/data/index.html b/data/index.html
index 1a8cd7f..ed27df2 100644
--- a/data/index.html
+++ b/data/index.html
@@ -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>
diff --git a/data/index.js b/data/index.js
index f4f9b28..26a312e 100644
--- a/data/index.js
+++ b/data/index.js
@@ -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');