CSS issue roller shutter template

Mortimer · 12 January 2021 14:21

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}}&nbsp;</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}}&nbsp;</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>

c4yolli · 18 January 2021 12:55

Sorry for my late answer. I have tested your code. But why do you want to use flex? My solution works on iOS 14.3, too. I have an iPhone, and my solution works very well.

Mortimer · 19 January 2021 12:07

Hi Oliver,

unfortunately, for me it looks different. I have the latest nodered and nodered-dashboard running, as well as an iPhone with iOS 14.3. So it seems, that either the shutter or the window has a wrong size.

A minimal example to verify this I added below.

[
    {
        "id": "ea72d81d.b9d09",
        "type": "tab",
        "label": "Shutter",
        "disabled": false,
        "info": ""
    },
    {
        "id": "9ea30454.76726",
        "type": "inject",
        "z": "ea72d81d.b9d09",
        "name": "",
        "props": [],
        "repeat": "2",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "x": 180,
        "y": 180,
        "wires": [
            [
                "72c9347b.5b613c"
            ]
        ]
    },
    {
        "id": "72c9347b.5b613c",
        "type": "function",
        "z": "ea72d81d.b9d09",
        "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": [
            [
                "282e6923.e2f5ae"
            ]
        ]
    },
    {
        "id": "282e6923.e2f5ae",
        "type": "ui_template",
        "z": "ea72d81d.b9d09",
        "group": "bcb3f34b.b11338",
        "name": "Shutter",
        "order": 4,
        "width": 2,
        "height": 2,
        "format": "<style>\n        :root {\n            --rollade-color: #097479;\n            --rollade-width: 90px;\n        }\n        .rollade__container {\n            width: var(--rollade-width);\n            overflow: hidden;\n            position: relative;\n        }\n        .rollade__fenster {\n            position: relative;\n            overflow: hidden;\n            z-index: 1;\n        }\n        .rollade__fenster path {\n            stroke: var(--rollade-color);\n            fill:none!important;\n            stroke-width:6px;\n        }\n        .rollade__rollade {\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            left: 0px;\n            z-index: 10;\n            transition: all 1s;\n        }\n        .rollade__rollade path.line {\n            stroke: white;\n            fill: none;\n            stroke-width: 1.5px;\n        }\n        .rollade__rollade path.bg {\n            fill: var(--rollade-color);\n        }\n        \n    </style>\n\n    <h3>TITLE</h3>\n    <div class=\"rollade__container\">\n        <svg class=\"rollade__fenster\" width=\"100%\" height=\"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        <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((-1) * {{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  ",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 480,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "bcb3f34b.b11338",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "6cb665ff.08153c",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": true
    },
    {
        "id": "6cb665ff.08153c",
        "type": "ui_tab",
        "name": "Test",
        "icon": "dashboard",
        "order": 12,
        "disabled": false,
        "hidden": false
    }
]

c4yolli · 19 January 2021 13:34

Do you know, that your CSS in your template affects other templates, too? Possibly you have CSS in other templates that affect your shutter template?

Mortimer · 19 January 2021 13:56

Hi Oliver,

even if I deactivate all flows except the shutter flow, the issue persists.

system · 18 February 2021 13:57

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Roller Shutter Template Dashboard	2	2652	20 April 2020
Roller Shutter GUI on Dashboard (Up-Half..-STOP-Half...-Down) Dashboard	7	1019	26 April 2022
A "simple" CSS position issue? General	4	539	18 December 2020
CSS question - template / ui-template node CSS Dashboard node-red-dashboard	2	59	22 August 2024
Dashboard 2 template vertical slider height Dashboard dashboard-2	7	222	9 March 2024

CSS issue roller shutter template

Related topics