Dear all,
based on Roller Shutter Template I tried to improve the CSS to become compatible with the current iOS 14.3 on iPhones.
With the existing code from the above mentioned thread it looks like
.So I started to rewrite the CSS and a working flow can be found below with a sample input to see the shutters driving. One more below you can find the CSS/HTML for direct copy into a ui_template node.
While this works fine overall in Firefox, iOS only shows a proper view until the first update of the shutter position (msg.payload
). After this, the roller shutter disappears...
Since I'm not a CSS expert I kindly request your help here!
[
{
"id": "b6538c04.d58a1",
"type": "tab",
"label": "Shutter",
"disabled": false,
"info": ""
},
{
"id": "585b3fc.401864",
"type": "ui_template",
"z": "b6538c04.d58a1",
"group": "bcb3f34b.b11338",
"name": "Shutter",
"order": 4,
"width": 2,
"height": 2,
"format": "<style>\n:root {\n --rollade-color: #097479;\n}\n\n.container {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n height: 100vh;\n}\n\n.item {\n display: inline-block;\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n\n.rollade__fenster {\n flex-grow: 1;\n position: relative;\n z-index: 1;\n}\n\n.rollade__rollade {\n flex-grow: 1;\n position: relative;\n z-index: 10;\n transition: all 1s;\n}\n\n.rollade__fenster path {\n stroke: var(--rollade-color);\n fill: none !important;\n stroke-width: 6px;\n}\n\n.rollade__rollade path.line {\n stroke: white;\n fill: none;\n stroke-width: 1.5px;\n}\n\n.rollade__rollade path.bg {\n fill: var(--rollade-color);\n}\n\n</style>\n\n<div class=\"container\">\n <h3>{{msg.topic}} </h3>\n <div class=\"item\">\n <svg class=\"rollade__fenster\" height=\"100%\" width=\"100%\" viewBox=\"0 0 170 188\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xml:space=\"preserve\" xmlns:serif=\"http://www.serif.com/\" style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;\">\n <g transform=\"matrix(1,0,0,1,-15.909,-45.6212)\">\n <g transform=\"matrix(0.989904,0,0,0.992491,4.03539,0.837446)\">\n <path d=\"M180.329,56.389C180.329,51.839 176.626,48.145 172.064,48.145L23.291,48.145C18.729,48.145 15.025,51.839 15.025,56.389L15.025,222.454C15.025,227.004 18.729,230.698 23.291,230.698L172.064,230.698C176.626,230.698 180.329,227.004 180.329,222.454L180.329,56.389Z\" />\n </g>\n <g transform=\"matrix(1,0,0,1.38253,3.04599,-37.9811)\">\n <path d=\"M97.589,64.432L97.589,191.286\" />\n </g>\n <g transform=\"matrix(1,0,0,1,2.84135,56.1777)\">\n <path d=\"M18.74,83.189L177.463,84.189\" />\n </g>\n </g>\n </svg>\n\n <svg class=\"rollade__rollade\" width=\"100%\" height=\"100%\" viewBox=\"0 0 181 190\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xml:space=\"preserve\" xmlns:serif=\"http://www.serif.com/\" style=\"top: calc(-200% + {{msg.payload}}%); fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;\">\n <g transform=\"matrix(1.35281,0,0,1.35281,-45.3041,-102.109)\">\n <path class=\"bg\" d=\"M167.134,82.161C167.134,78.473 164.14,75.479 160.452,75.479L40.171,75.479C36.483,75.479 33.489,78.473 33.489,82.161L33.489,208.93C33.489,212.618 36.483,215.612 40.171,215.612L160.452,215.612C164.14,215.612 167.134,212.618 167.134,208.93L167.134,82.161Z\" />\n <g transform=\"matrix(1.69574,0,0,1,18.3547,-9)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,1)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,11)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,21)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,31)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,41)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,51)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,61)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,71)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,81)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,91)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,101)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n <g transform=\"matrix(1.69574,0,0,1,18.3547,111)\">\n <path class=\"line\" d=\"M13.383,95.652L84.46,95.652\" />\n </g>\n </g>\n </svg>\n </div>\n</div>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"x": 480,
"y": 180,
"wires": [
[]
]
},
{
"id": "b4d819c9.65065",
"type": "inject",
"z": "b6538c04.d58a1",
"name": "",
"props": [],
"repeat": "2",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"topic": "",
"x": 180,
"y": 180,
"wires": [
[
"168975fa.1766c2"
]
]
},
{
"id": "168975fa.1766c2",
"type": "function",
"z": "b6538c04.d58a1",
"name": "",
"func": "msg.payload = Math.floor(Math.random() * Math.floor(100));\nmsg.topic = \"Office\"\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"x": 340,
"y": 180,
"wires": [
[
"585b3fc.401864"
]
]
},
{
"id": "bcb3f34b.b11338",
"type": "ui_group",
"name": "Group 1",
"tab": "6cb665ff.08153c",
"order": 1,
"disp": true,
"width": 6
},
{
"id": "6cb665ff.08153c",
"type": "ui_tab",
"name": "Test",
"icon": "dashboard",
"order": 12,
"disabled": false,
"hidden": false
}
]
<style>
:root {
--rollade-color: #097479;
}
.container {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100vh;
}
.item {
display: inline-block;
flex: 1;
min-height: 0;
overflow: hidden;
}
.rollade__fenster {
flex-grow: 1;
position: relative;
z-index: 1;
}
.rollade__rollade {
flex-grow: 1;
position: relative;
z-index: 10;
transition: all 1s;
}
.rollade__fenster path {
stroke: var(--rollade-color);
fill: none !important;
stroke-width: 6px;
}
.rollade__rollade path.line {
stroke: white;
fill: none;
stroke-width: 1.5px;
}
.rollade__rollade path.bg {
fill: var(--rollade-color);
}
</style>
<div class="container">
<h3>{{msg.topic}} </h3>
<div class="item">
<svg class="rollade__fenster" height="100%" width="100%" viewBox="0 0 170 188" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g transform="matrix(1,0,0,1,-15.909,-45.6212)">
<g transform="matrix(0.989904,0,0,0.992491,4.03539,0.837446)">
<path d="M180.329,56.389C180.329,51.839 176.626,48.145 172.064,48.145L23.291,48.145C18.729,48.145 15.025,51.839 15.025,56.389L15.025,222.454C15.025,227.004 18.729,230.698 23.291,230.698L172.064,230.698C176.626,230.698 180.329,227.004 180.329,222.454L180.329,56.389Z" />
</g>
<g transform="matrix(1,0,0,1.38253,3.04599,-37.9811)">
<path d="M97.589,64.432L97.589,191.286" />
</g>
<g transform="matrix(1,0,0,1,2.84135,56.1777)">
<path d="M18.74,83.189L177.463,84.189" />
</g>
</g>
</svg>
<svg class="rollade__rollade" width="100%" height="100%" viewBox="0 0 181 190" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="top: calc(-200% + {{msg.payload}}%); fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g transform="matrix(1.35281,0,0,1.35281,-45.3041,-102.109)">
<path class="bg" d="M167.134,82.161C167.134,78.473 164.14,75.479 160.452,75.479L40.171,75.479C36.483,75.479 33.489,78.473 33.489,82.161L33.489,208.93C33.489,212.618 36.483,215.612 40.171,215.612L160.452,215.612C164.14,215.612 167.134,212.618 167.134,208.93L167.134,82.161Z" />
<g transform="matrix(1.69574,0,0,1,18.3547,-9)">
<path class="line" d="M13.383,95.652L84.46,95.652" />
</g>
<g transform="matrix(1.69574,0,0,1,18.3547,1)">
<path class="line" d="M13.383,95.652L84.46,95.652" />
</g>
<g transform="matrix(1.69574,0,0,1,18.3547,11)">
<path class="line" d="M13.383,95.652L84.46,95.652" />
</g>
<g transform="matrix(1.69574,0,0,1,18.3547,21)">
<path class="line" d="M13.383,95.652L84.46,95.652" />
</g>
<g transform="matrix(1.69574,0,0,1,18.3547,31)">
<path class="line" d="M13.383,95.652L84.46,95.652" />
</g>
<g transform="matrix(1.69574,0,0,1,18.3547,41)">
<path class="line" d="M13.383,95.652L84.46,95.652" />
</g>
<g transform="matrix(1.69574,0,0,1,18.3547,51)">
<path class="line" d="M13.383,95.652L84.46,95.652" />
</g>
<g transform="matrix(1.69574,0,0,1,18.3547,61)">
<path class="line" d="M13.383,95.652L84.46,95.652" />
</g>
<g transform="matrix(1.69574,0,0,1,18.3547,71)">
<path class="line" d="M13.383,95.652L84.46,95.652" />
</g>
<g transform="matrix(1.69574,0,0,1,18.3547,81)">
<path class="line" d="M13.383,95.652L84.46,95.652" />
</g>
<g transform="matrix(1.69574,0,0,1,18.3547,91)">
<path class="line" d="M13.383,95.652L84.46,95.652" />
</g>
<g transform="matrix(1.69574,0,0,1,18.3547,101)">
<path class="line" d="M13.383,95.652L84.46,95.652" />
</g>
<g transform="matrix(1.69574,0,0,1,18.3547,111)">
<path class="line" d="M13.383,95.652L84.46,95.652" />
</g>
</g>
</svg>
</div>
</div>