From c39f0e2ed8a407b54bdc4460e579486d364fe656 Mon Sep 17 00:00:00 2001
From: Robert Strouse <rstrouse@truepointsolutions.com>
Date: Sun, 19 Feb 2023 11:55:42 -0800
Subject: [PATCH] CSS cleanup for touch screens and Apple products

* Employ flex elements for shade control
* Disable the annoying Apple context menu
* Fix text overruns for smaller screens
* Time mouse and touch commands so that they can coexist
---
 SomfyController.littlefs.bin | Bin 1441792 -> 1441792 bytes
 data/index.html              |  38 +++++++++-------
 data/main.css                |  81 +++++++++++++++++++++++++++++++++++
 3 files changed, 104 insertions(+), 15 deletions(-)

diff --git a/SomfyController.littlefs.bin b/SomfyController.littlefs.bin
index 5780d26b8390b31a2ad6f3c8cffc35bb9f6e09b4..be37d65861e42f78536e41bc37b30a4c10dcf202 100644
GIT binary patch
delta 3096
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

delta 1825
zcmZ8h4Qx|&5MR63t{d<E?d%5I7~}Ef5Nv6cG3bDGg1`hy3qvq$xVm*~p|p?nu?^Jm
z0G-I^U~z{;lM&Hq45muRpAZwP2^bBq4!@DW0MV&aH={-{g7-S3(I%Jl-Tm%&AOE{k
z)zzxHI=<5?3TJd_a{0ha_2}-CoxPTOI}=txyuEj*uJO?U$HcG4jPBG)j)OVFx`t^3
zj%}}$^=P_Icg}pv4{2#>VS5@e^v`^J_vGWl41~6wyG#uIj&jG%B`Jp7VO_(te#c??
z${|g+!=3w#J6A`dCrKv}NDL%Kk_-|PNhV1a$q4Sw6${VuvscCG3}636EJSHgtP;*s
z3S1c!_n0wW16FiDB<7*CQWUZKXP9BCkJj}N;ymgGAs-WWgK**?M9esL44CltLNKC|
z4*6XQ{c&1g9wZ4IYF-rG5b#FAIPQ*^i_!xi@Gc9iGh<6NjKT>LJd)W<I1QU3wqpEu
z$izhx!OV|JP;JKUsbIj7(_lPKbwDLtAY@gOKN4G7xndb+PlIB9)S=;`^Pmv>5JqES
zxkwCdaF{+Ku;##9-7rPOqcWS2<0_R~%Nn8)#TE-~3Am=uq)(LIXCra$Q!FD>iOMcp
ziKg4?g>iWL66B)W0~UUB2}nAPq7Vl>gkHOp8HEyu+=>U9VJw1&y5RLd0XolswZL8y
z*icp%4M&??u~4`<&{S3*ipgRBW*4sYvBIL3U`PqrVzR$3;EF_Bn*4HEOQ>E6x-`Zz
z40)hjA5&1?CFa@wP1boI8OP6^9riyK2um?#b2u<({C}d1$I~7-B796m<CP_pjk=85
z5|o+spERxbXA33#{W7X-jt{a7o8;nq%5Z3}ScD0gWuRSQQ?a^<F`VfI8E@^Smn)93
z3cTorO_-&yR=&>%FYAY&Ggt*(dQ8|s#JQ`W1V>jv9(F6DfJG~z4inRvf!C~t!|9l;
z0uwK(hGIQ-tf18Ptp(@*9kmHTqC9E&gi6rL(B3aKnbJyV)8WQdkb_$*SvK~V!GiHa
zVBo*`fx?~o7LY#>gtv4!xdAFBgaZvqnG$GKZ2oYlG2%*n*KKNw(VNK8P(%qd;Z{AH
zgqB9Q3vV>Q+rtI@7=pWuD9F$(e5$okXNO$AUxtll{7$7R_f<m{7O7Bc`i#se$N?YK
zd|8D&{)P(6&8Y5zS?D+guFOa@@;RXb#pt|7{Z{wDEdF5!%rK*+Ni?PcV$wttKeij{
z#4iY{!BeC|FTzxQtQ%Gk7GMrm#9@|jk*wT#5*B9QPd9*}x|sT9$%AqH7Y?Ec9rHy4
zesCBjVR9m^!qNmdO<$6a=7-rH(Td57FoM63fO<35d`dN5(ipcSq1}uLpjFH7gN<E%
zkYfz`>jRbb_-;rXg^tD4;5$2LDNpsm0yDaAfeYsj!ffHPMyxIXJ0{|=pO+572Mo)-
z0H`Lx^xPQcH(eo!20PKlwwtkljs%Xeuo|I{bo|Z&QJ0Ce2VpWEE1;nmd;&_b+fJ`~
zGoNJ`@!5xI`g$G~ow)u<TI)3uD;BSkqvo87edI}TF+V4<`>7rqYZk7N0q<-VxA8w5
z%wW#g(6HGaiiB{e7K+g3W<Jw(LTD)7=GGE|^)yV08b$-VjCrup%dEmznt6+tQBy7j
zSr!)5vasa_DK&%Un+omQ!p3#^SUykGGPhY5L*LWPj+UKtB5JoW5!c9Utl?`yD|q#3
zb`K^!tdP@+xy^<ZT6gh{=h+l2RoOz*H-yrVyiL_|5;|D3t{-(?mZM!@6YuO`8|W<8
zGAGXIW)E7wC2arSKFtBT2{e;6>zKq}>t^SSFVV5@inGIlL_hS!Y5R}ISt)<%II9uy
z-UPGqQ3>{{Uie-M`ObT+0&ssXGjf(>C-m6^q}41zTU{^|uAh8AO1*3nAG*NWM&R=6
tEEhYkv153K{_)1^>{s2J6{>E#)Gq1TC4IY;-YyC4lA&EPz9MBve*qDPQH}rr

diff --git a/data/index.html b/data/index.html
index 678a35f..58f840d 100644
--- a/data/index.html
+++ b/data/index.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="icons.css" type="text/css" />
     <link rel="icon" type="image/png" href="favicon.png" />
     <script>
+        document.oncontextmenu = (event) => { event.preventDefault(); event.stopPropagation(); return false; }
         class General {
             async init() {
                 this.setAppVersion();
@@ -445,17 +446,17 @@
                     divCfg += '</div>';
 
                     divCtl += `<div class="somfyShadeCtl" data-shadeId="${shade.shadeId}" data-direction="${shade.direction}" data-remoteaddress="${shade.remoteAddress}" data-position="${shade.position}" data-target="${shade.target}" data-mypos="${shade.myPos}">`;
-                    divCtl += `<div style="display:inline-block;padding:7px;font-size:48px;vertical-align:middle;margin-top:-5px;" data-shadeid="${shade.shadeId}">`;
+                    divCtl += `<div class="shade-icon" data-shadeid="${shade.shadeId}">`;
                     divCtl += `<i class="somfy-shade-icon icss-window-shade" data-shadeid="${shade.shadeId}" style="--shade-position:${shade.position}%;vertical-align:top;" onclick="event.stopPropagation(); console.log(event); somfy.openSetPosition(${shade.shadeId});"></i></div >`;
-                    divCtl += `<div style="display:inline-block;vertical-align:middle;width:50px;">`;
-                    divCtl += `<span class="shadectl-name" style="font-size:1.5em;color:silver;display:block;vertical-align:middle;white-space:nowrap;width:50px;">${shade.name}</span>`;
-                    divCtl += `<span style="white-space:nowrap;font-size:12px;"><label style="color:silver;">My: </label><span id="spanMyPos">${shade.myPos !== 255 ? shade.myPos + '%' : '---'}</span>`
+                    divCtl += `<div class="shade-name">`;
+                    divCtl += `<span class="shadectl-name">${shade.name}</span>`;
+                    divCtl += `<span class="shadectl-mypos"><label>My: </label><span id="spanMyPos">${shade.myPos !== 255 ? shade.myPos + '%' : '---'}</span>`
                     divCtl += '</div>'
                    
-                    divCtl += `<div class="shadectl-buttons" style="float:right;">`;
-                    divCtl += `<div class="button-outline" onclick="somfy.sendCommand(${shade.shadeId}, 'up');" style="display:inline-block;padding:7px;cursor:pointer;"><i class="icss-somfy-up"></i></div>`;
-                    divCtl += `<div class="button-outline my-button" data-shadeid="${shade.shadeId}" style="display:inline-block;font-size:2em;padding:10px;cursor:pointer;"><span>my</span></div>`;
-                    divCtl += `<div class="button-outline" onclick="somfy.sendCommand(${shade.shadeId}, 'down');" style="display:inline-block;padding:7px;cursor:pointer;"><i class="icss-somfy-down" style="margin-top:-4px;"></i></div>`;
+                    divCtl += `<div class="shadectl-buttons">`;
+                    divCtl += `<div class="button-outline" onclick="somfy.sendCommand(${shade.shadeId}, 'up');"><i class="icss-somfy-up"></i></div>`;
+                    divCtl += `<div class="button-outline my-button" data-shadeid="${shade.shadeId}" style="font-size:2em;padding:10px;"><span>my</span></div>`;
+                    divCtl += `<div class="button-outline" onclick="somfy.sendCommand(${shade.shadeId}, 'down');"><i class="icss-somfy-down" style="margin-top:-4px;"></i></div>`;
                     divCtl += '</div></div>';
                 }
                 document.getElementById('divShadeList').innerHTML = divCfg;
@@ -467,6 +468,7 @@
                     btns[i].addEventListener('mouseup', (event) => {
                         console.log(this);
                         console.log(event);
+                        console.log('mouseup');
                         if (this.btnTimer) {
                             clearTimeout(this.btnTimer);
                             this.btnTimer = null;
@@ -481,8 +483,12 @@
 
                     }, true);
                     btns[i].addEventListener('mousedown', (event) => {
+                        if (this.btnTimer) return;
                         console.log(this);
                         console.log(event);
+
+                        console.log('mousedown');
+                                               
                         let shadeId = parseInt(event.currentTarget.getAttribute('data-shadeid'), 10);
                         let el = event.currentTarget.closest('.somfyShadeCtl');
                         this.btnDown = new Date().getTime();
@@ -499,6 +505,8 @@
                     btns[i].addEventListener('touchstart', (event) => {
                         let shadeId = parseInt(event.currentTarget.getAttribute('data-shadeid'), 10);
                         let el = event.currentTarget.closest('.somfyShadeCtl');
+                        console.log('touchstart');
+
                         this.btnDown = new Date().getTime();
                         if (parseInt(el.getAttribute('data-direction'), 10) === 0) {
                             this.btnTimer = setTimeout(() => {
@@ -509,7 +517,9 @@
                             }, 2000);
                         }
                     }, true);
+                    /*
                     btns[i].addEventListener('touchend', (event) => {
+                        event.preventDefault();  // Make sure the idiot 
                         console.log(this);
                         console.log(event);
                         if (this.btnTimer) {
@@ -523,12 +533,9 @@
                         else {
                             this.sendCommand(shadeId, 'my');
                         }
-
                     }, true);
-
-
+                    */
                 }
-
             };
             closeShadePositioners() {
                 let ctls = document.querySelectorAll('.shade-positioner');
@@ -549,13 +556,14 @@
                         let myPos = parseInt(shade.getAttribute('data-mypos'), 10);
                         let elname = shade.querySelector(`.shadectl-name`);
                         let shadeName = elname.innerHTML;
-                        let html = `<div class="shade-name">${shadeName}</div>`;
+                        let html = `<div class="shade-name">${shadeName}`;
+                        if (myPos !== 255)
+                            html += `<div style="float:right;vertical-align:top;cursor:pointer;font-size:14px;margin-top:4px;" onclick="document.getElementById('slidShadeTarget').value = ${myPos}; document.getElementById('slidShadeTarget').dispatchEvent(new Event('change'));"><span>Current: </span><span>${myPos}</span><span>%</span></div>`
+                        html += `</div >`;
                         html += `<input id="slidShadeTarget" name="shadeTarget" type="range" min="0" max="100" step="1" value="${currPos}" oninput="document.getElementById('spanShadeTarget').innerHTML = this.value;" />`;
                         html += `<label for="slidShadeTarget"><span>Target Position </span><span><span id="spanShadeTarget" class="shade-target">${currPos}</span><span>%</span></span></label>`;
                         html += `<hr></hr>`;
                         html += '<div style="text-align:right;width:100%;">'
-                        if (myPos !== 255)
-                            html += `<div style="float:left;text-align:left;cursor:pointer;" onclick="document.getElementById('slidShadeTarget').value = ${myPos}; document.getElementById('slidShadeTarget').dispatchEvent(new Event('change'));"><span>Current: </span><span>${myPos}</span><span>%</span></div>`
                         if (myPos === currPos)
                             html += `<button id="btnSetMyPosition" type="button" onclick="somfy.sendShadeMyPosition(${shadeId}, document.getElementById('slidShadeTarget').value);" style="background:orangered;width:auto;display:inline-block;padding-left:10px;padding-right:10px;margin-top:0px;margin-bottom:10px;margin-right:7px;">Clear My Position</button>`;
                         else
diff --git a/data/main.css b/data/main.css
index d344315..11a5c4a 100644
--- a/data/main.css
+++ b/data/main.css
@@ -8,9 +8,46 @@ input[type="range"] {
     accent-color: #00bcd4;
     outline:none;
 }
+
     input[type="range"]:active {
         outline: dotted 1px silver;
     }
+.button-outline {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+    .button-outline:active {
+        -webkit-animation: flicker .5s infinite linear;
+        animation: flicker .5s infinite linear;
+    }
+@keyframes flicker {
+    0% {
+        transform: rotate(-4deg);
+        -webkit-transform: rotate(-4deg);
+    }
+
+    20% {
+        transform: rotate(1deg);
+    }
+
+    40% {
+        transform: rotate(-8deg);
+    }
+
+    60% {
+        transform: rotate(4deg) scaleY(1.04);
+    }
+
+    80% {
+        transform: rotate(-7deg) scaleY(0.92);
+    }
+
+    100% {
+        transform: rotate(7deg);
+    }
+}
 body {
     color: #434343;
     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
@@ -515,7 +552,50 @@ div.waitoverlay > .lds-roller {
     height:60px;
     border-bottom:dotted 2px gainsboro;
     position:relative;
+    display:flex;
+    vertical-align:middle;
 }
+    .somfyShadeCtl .shade-icon {
+        display: inline-block;
+        padding-top: 7px;
+        padding-bottom: 7px;
+        padding-left: 0px;
+        padding-right: 0px;
+        vertical-align: middle;
+        margin-top: -5px;
+        font-size: 48px;
+    }
+.somfyShadeCtl .shade-name {
+    display:inline-block;
+    padding:7px;
+    vertical-align:middle;
+    width:100%;
+}
+    .somfyShadeCtl .shadectl-name {
+        font-size: 1.5em;
+        color: silver;
+        display: block;
+        vertical-align: middle;
+        white-space: nowrap;
+        width: 100%;
+    }
+    .somfyShadeCtl label {
+        color:silver;
+    }
+    .somfyShadeCtl .shadectl-mypos {
+        white-space: nowrap;
+        font-size: 12px;
+    }
+.somfyShadeCtl .shadectl-buttons {
+    float:right;
+    white-space:nowrap;
+}
+    .somfyShadeCtl .shadectl-buttons .button-outline {
+        display: inline-block;
+        padding: 7px;
+        cursor: pointer;
+    }
+
 .shade-positioner {
     position:absolute;
     width:100%;
@@ -525,6 +605,7 @@ div.waitoverlay > .lds-roller {
     top:0px;
     padding-left:7px;
     padding-right:7px;
+    z-index:100;
 }
 .shade-positioner .shade-name {
     display:block;