Slide to confirm button

Dashboard
1

Hi, I', looking to create a touch interface that has reset buttons. I'd like to use slide to confirm ie:
example

There is quite a lot of those here for example, but I don't really know how to integrate..

Has anybody already done that?
I guess I could make a slider with only two values and set it back to 0 with a delay, but looking for some other opinions?

Thanks

1 Like
2

For the moment I have created a logic that works with the original slider node + modified css a bit:

image
image1210×328 33.5 KB 

[{"id":"e19847deb1e85087","type":"ui_chart","z":"452ab868.195118","name":"","group":"da746eb3a7a1ff66","order":0,"width":0,"height":0,"label":"","chartType":"line","legend":"false","xformat":"HH:mm","interpolate":"bezier","nodata":"","dot":false,"ymin":"0","ymax":"","removeOlder":"12","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#fff76b","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":550,"y":280,"wires":[[]]},{"id":"cbe79e1ca18d6cc0","type":"ui_slider","z":"452ab868.195118","name":"","label":"","tooltip":"","group":"da746eb3a7a1ff66","order":1,"width":0,"height":0,"passthru":false,"outs":"end","topic":"","min":"0","max":"10","step":"0.1","x":130,"y":240,"wires":[["3c96b8d2203f7a25","7aaa14f2a1ec7808"]]},{"id":"8d54589ffedf0878","type":"change","z":"452ab868.195118","name":"set 0","rules":[{"t":"set","p":"payload","pt":"msg","to":"0","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":130,"y":200,"wires":[["cbe79e1ca18d6cc0"]]},{"id":"3c96b8d2203f7a25","type":"delay","z":"452ab868.195118","name":"delay","pauseType":"delay","timeout":"1","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":270,"y":240,"wires":[["8d54589ffedf0878"]]},{"id":"7aaa14f2a1ec7808","type":"switch","z":"452ab868.195118","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"10","vt":"num"},{"t":"lt","v":"10","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":270,"y":280,"wires":[["4e12b2467f6ba1e4"],[]],"outputLabels":["10","null"]},{"id":"4e12b2467f6ba1e4","type":"change","z":"452ab868.195118","name":"10 > [ ]","rules":[{"t":"change","p":"payload","pt":"msg","from":"10","fromt":"num","to":"[]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":280,"wires":[["e19847deb1e85087"]]},{"id":"da746eb3a7a1ff66","type":"ui_group","name":"A","tab":"6e7f9da.d28aee4","order":1,"disp":true,"width":"8","collapse":true},{"id":"6e7f9da.d28aee4","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

swipe_to_reset2

The problem
The whole track is touch/click sensitive, not only the touch target. So accidental reset can still happen, as no sliding/swiping movement is necessary.

3

Maybe need a sequence of tests eg >=3 and <=5, then 6 and 8. And then 10

1 Like
4

Hi, thank you for the suggestion!
Right now the switch node is configured to discard (send to empty junction) all results that are under 10.

image
image968×382 8.7 KB

It seems that the behavior of the slider stays the same if I add the additional tests.

5

Also the slider has 100 steps for smoothness, if I only gave it two values it would snap to max after 51% of sliding.

6

It is very hard to get such thing working smoothly.
I did something but it is not reliable. Many times the slider just does not like to be dragged, it loses the focus and the state is unknown.
I have no more time to play with it. But you may try ..

[
    {
        "id": "bdc44b29.79d388",
        "type": "ui_template",
        "z": "98fb9802851faeed",
        "group": "20ae1040.3cf58",
        "name": "confirm slider based on md-slider",
        "order": 1,
        "width": "6",
        "height": "1",
        "format": "<div class=\"confirm-slider-container\" >\n    \n    <md-slider id=\"{{'slider_'+$id}}\" ng-mousedown=\"down()\" ng-model=\"slidervalue\" step=\"0.01\" min=\"0\" max=\"1\" value=\"0.1\" aria-label=\"confirm-slider\"></md-slider>\n<div class=\"confirm-slider-label\">Slide to confirm</div>\n</div>\n<style>\n.confirm-slider-container{\n    position:relative;\n}\n.confirm-slider-label{\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    text-align: center;\n    line-height: 29px;\n    pointer-events: none;\n\n}\n.confirm-slider-container > md-slider{\n    height:40px;\n    margin-left: 8px;\n    margin-right: 8px;\n    top:0px;\n    pointer-events:none;\n}\n.confirm-slider-container > md-slider .md-track-container {\n    width: 100%;\n    position: absolute;\n    top: 0px;\n    height: 32px;    \n}\n.confirm-slider-container > md-slider .md-track.md-track{\n    border-radius:32px;   \n    background: gray;\n}\n.confirm-slider-container > md-slider .md-track.md-track-fill{\n    position:relative;\n    background:green;\n    border-radius:32px;\n    pointer-events:all;\n    min-width:40px;\n}\n.confirm-slider-container > md-slider .md-track.md-track-fill:after{\n    position:absolute;\n    content:'➪';\n    top:4px;\n    right:10px;\n\n}\n.confirm-slider-container > md-slider .md-thumb:after {\n    visibility:hidden;    \n}\n.confirm-slider-container > md-slider .md-focus-ring{\n    visibility:hidden !important;\n}\n.confirm-slider-container > md-slider .md-thumb {\n    transform: scale(1) !important;\n    background:transparent;\n    pointer-events: all;\n}\n</style>\n\n<script>\n(function(scope) {\n\n    let isDown = false\n    scope.slidervalue = 0.1\n\n    scope.$watch('slidervalue', function(slidervalue) {\n        if (slidervalue) {        \n            if(slidervalue < 0.1){\n                scope.slidervalue = 0.1\n            }\n        }\n    })\n    scope.down = function(){\n        if(isDown){\n            return\n        }\n\n        isDown = true\n        scope.send({payload:'moving',topic:'confirm-slider'})\n        document.addEventListener('mouseup', scope.up);\n    }\n\n    scope.up = function(){        \n        document.removeEventListener('mouseup', scope.up);        \n        if(scope.slidervalue >= .9){            \n            scope.send({payload:'confirm',topic:'confirm-slider'}) \n            scope.slidervalue = 1\n        }\n        else{\n            scope.send({payload:'try again',topic:'confirm-slider'})\n            scope.slidervalue = 0.1\n        } \n        isDown = false       \n    }\n    \n    \n  scope.$watch('msg', function(msg) {\n    if (msg) {\n        if(msg.topic=='confirm-slider'){//ignore internal messages\n            return\n        }        \n        scope.slidervalue = 0.1\n    }\n  });\n})(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 330,
        "y": 610,
        "wires": [
            [
                "b2c4f7a71c209c35",
                "30bfa6e3bb0d3110"
            ]
        ]
    },
    {
        "id": "b2c4f7a71c209c35",
        "type": "ui_text",
        "z": "98fb9802851faeed",
        "group": "20ae1040.3cf58",
        "order": 3,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "status",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "className": "",
        "x": 600,
        "y": 610,
        "wires": []
    },
    {
        "id": "30bfa6e3bb0d3110",
        "type": "switch",
        "z": "98fb9802851faeed",
        "name": "if confirm",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "confirm",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 240,
        "y": 710,
        "wires": [
            [
                "d9fd9d3359222623"
            ]
        ]
    },
    {
        "id": "1df23dbb63e2937c",
        "type": "trigger",
        "z": "98fb9802851faeed",
        "name": "reset 2s",
        "op1": "",
        "op2": "reset",
        "op1type": "nul",
        "op2type": "str",
        "duration": "2",
        "extend": true,
        "overrideDelay": false,
        "units": "s",
        "reset": "",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 560,
        "y": 710,
        "wires": [
            [
                "bdc44b29.79d388"
            ]
        ]
    },
    {
        "id": "d9fd9d3359222623",
        "type": "change",
        "z": "98fb9802851faeed",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "reset",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 400,
        "y": 710,
        "wires": [
            [
                "1df23dbb63e2937c"
            ]
        ]
    },
    {
        "id": "20ae1040.3cf58",
        "type": "ui_group",
        "name": "Slider",
        "tab": "6b520bda.e997a4",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "6b520bda.e997a4",
        "type": "ui_tab",
        "name": "Testing",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

EDIT: Made it a bit bigger and added a label to maybe indicate behavior.

image

1 Like
7

Ok, aitäh!
On safari 15.6.1 macos it works as it should, on safari ios not really. My target machine is MS Surface + Chrome, but I haven't aquired it yet so can't test yet.

8

Nice!
It seems that it did have some hiccups while I was modifying it, but now it seems to be stable. Nice that I can put many on the same page.

I did modify the CSS a bit to hide the "Slide to confirm" text behind the green curtain (the slider label is now behind everything, but the slider track background is almost transparent, so it shows through)

[{"id":"751182213762fbb9","type":"ui_template","z":"56b086a7341ea71f","group":"20ae1040.3cf58","name":"confirm slider based on md-slider","order":1,"width":"6","height":"1","format":"<div class=\"confirm-slider-container\" >\n   \n    <md-slider id=\"{{'slider_'+$id}}\" ng-mousedown=\"down()\" ng-model=\"slidervalue\" step=\"0.01\" min=\"0\" max=\"1\" value=\"0.1\" aria-label=\"confirm-slider\"></md-slider>\n    <div class=\"confirm-slider-label\">Slide to confirm</div>\n</div>\n<style>\n.confirm-slider-container{\n    position:relative;\n}\n.confirm-slider-label{\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    text-align: center;\n    line-height: 29px;\n    pointer-events: none;\n   z-index:0;\n\n}\n.confirm-slider-container > md-slider{\n    height:40px;\n    margin-left: 8px;\n    margin-right: 8px;\n    top:0px;\n    pointer-events:none;\n    z-index:1;\n}\n.confirm-slider-container > md-slider .md-track-container {\n    width: 100%;\n    position: absolute;\n    top: 0px;\n    height: 32px;    \n}\n.confirm-slider-container > md-slider .md-track.md-track{\n    border-radius:32px;   \n    background: rgba(12 12 12 .2);\n}\n.confirm-slider-container > md-slider .md-track.md-track-fill{\n    position:relative;\n    background:green;\n    border-radius:32px;\n    pointer-events:all;\n    min-width:40px;\n}\n.confirm-slider-container > md-slider .md-track.md-track-fill:after{\n    position:absolute;\n    content:'➡︎';\n    font-size:20px;\n    top:5px;\n    right:10px;\n\n}\n.confirm-slider-container > md-slider .md-thumb:after {\n    visibility:hidden;    \n}\n.confirm-slider-container > md-slider .md-focus-ring{\n    visibility:hidden !important;\n}\n.confirm-slider-container > md-slider .md-thumb {\n    transform: scale(1) !important;\n    background:transparent;\n    pointer-events: all;\n    \n}\n</style>\n\n<script>\n(function(scope) {\n\n    let isDown = false\n    scope.slidervalue = 0.1\n\n    scope.$watch('slidervalue', function(slidervalue) {\n        if (slidervalue) {        \n            if(slidervalue < 0.1){\n                scope.slidervalue = 0.1\n            }\n        }\n    })\n    scope.down = function(){\n        if(isDown){\n            return\n        }\n\n        isDown = true\n        scope.send({payload:'moving',topic:'confirm-slider'})\n        document.addEventListener('mouseup', scope.up);\n    }\n\n    scope.up = function(){        \n        document.removeEventListener('mouseup', scope.up);        \n        if(scope.slidervalue >= .99){            \n            scope.send({payload:'confirm',topic:'confirm-slider'}) \n            scope.slidervalue = 1\n        }\n        else{\n            scope.send({payload:'try again',topic:'confirm-slider'})\n            scope.slidervalue = 0.1\n        } \n        isDown = false       \n    }\n    \n    \n  scope.$watch('msg', function(msg) {\n    if (msg) {\n        if(msg.topic=='confirm-slider'){//ignore internal messages\n            return\n        }        \n        scope.slidervalue = 0.1\n    }\n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":260,"y":720,"wires":[["b2eca3d6531783de","02147c29040fd6df"]]},{"id":"b2eca3d6531783de","type":"ui_text","z":"56b086a7341ea71f","group":"20ae1040.3cf58","order":3,"width":0,"height":0,"name":"","label":"status","format":"{{msg.payload}}","layout":"row-spread","x":530,"y":720,"wires":[]},{"id":"02147c29040fd6df","type":"switch","z":"56b086a7341ea71f","name":"if confirm","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"confirm","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":170,"y":820,"wires":[["944e3df19515e711"]]},{"id":"4f617b24a045bb07","type":"trigger","z":"56b086a7341ea71f","name":"reset 2s","op1":"","op2":"reset","op1type":"nul","op2type":"str","duration":"2","extend":true,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":490,"y":820,"wires":[["751182213762fbb9"]]},{"id":"944e3df19515e711","type":"change","z":"56b086a7341ea71f","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"reset","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":330,"y":820,"wires":[["4f617b24a045bb07"]]},{"id":"20ae1040.3cf58","type":"ui_group","name":"Slider","tab":"6b520bda.e997a4","order":1,"disp":true,"width":"6","collapse":false},{"id":"6b520bda.e997a4","type":"ui_tab","name":"Testing","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
9

If you are using more than one, it is reasonable to move the styles out to separated template. Otherwise you are declaring same styles all over and over. Well, the last one wins of course but if you ever need to change something, it takes to change it for all of them. And if you make some mistakes, it is too hard to find.

Example with two and separated CSS and a small bonus :wink:

[
    {
        "id": "bdc44b29.79d388",
        "type": "ui_template",
        "z": "98fb9802851faeed",
        "group": "20ae1040.3cf58",
        "name": "confirm slider based on md-slider",
        "order": 1,
        "width": "6",
        "height": "1",
        "format": "<div class=\"confirm-slider-container\" >\n    <div class=\"confirm-slider-label\">Slide to confirm</div>\n    <md-slider id=\"{{'slider_'+$id}}\" ng-mousedown=\"down()\"  data-conent=\"OK\" ng-model=\"slidervalue\" step=\"0.01\" min=\"0\" max=\"1\" value=\"0.1\" aria-label=\"confirm-slider\"></md-slider>\n</div>\n\n<script>\n(function(scope) {\n    let isDown = false\n    scope.slidervalue = 0.01  \n    scope.$watch('slidervalue', function(slidervalue) {\n        if (slidervalue) {        \n            if(slidervalue < 0.1){\n                scope.slidervalue = 0.1\n            }\n            let c = scope.slidervalue >= 1 ? '✓' : '➪'\n            $(\"#slider_\"+scope.$id).find('.md-track-fill').attr('data-content',c);\n        }\n    })\n    scope.down = function(){\n        if(isDown){\n            return\n        }\n\n        isDown = true\n        scope.send({payload:'moving',topic:'confirm-slider'})\n        document.addEventListener('mouseup', scope.up);\n    }\n\n    scope.up = function(){        \n        document.removeEventListener('mouseup', scope.up);        \n        if(scope.slidervalue >= .9){            \n            scope.send({payload:'confirm',topic:'confirm-slider'}) \n            scope.slidervalue = 1;\n            \n            \n        }\n        else{\n            scope.send({payload:'try again',topic:'confirm-slider'})\n            scope.slidervalue = 0.1\n           \n        } \n        isDown = false       \n    }\n    \n    \n  scope.$watch('msg', function(msg) {\n    if (msg) {\n        if(msg.topic=='confirm-slider'){//ignore internal messages\n            return\n        }        \n        scope.slidervalue = 0.1\n    }\n  });\n})(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 330,
        "y": 610,
        "wires": [
            [
                "b2c4f7a71c209c35",
                "30bfa6e3bb0d3110"
            ]
        ]
    },
    {
        "id": "b2c4f7a71c209c35",
        "type": "ui_text",
        "z": "98fb9802851faeed",
        "group": "20ae1040.3cf58",
        "order": 3,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "status",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "className": "",
        "x": 600,
        "y": 610,
        "wires": []
    },
    {
        "id": "30bfa6e3bb0d3110",
        "type": "switch",
        "z": "98fb9802851faeed",
        "name": "if confirm",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "confirm",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 260,
        "y": 700,
        "wires": [
            [
                "d9fd9d3359222623"
            ]
        ]
    },
    {
        "id": "1df23dbb63e2937c",
        "type": "trigger",
        "z": "98fb9802851faeed",
        "name": "reset 2s",
        "op1": "",
        "op2": "reset",
        "op1type": "nul",
        "op2type": "str",
        "duration": "2",
        "extend": true,
        "overrideDelay": false,
        "units": "s",
        "reset": "",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 580,
        "y": 700,
        "wires": [
            [
                "bdc44b29.79d388"
            ]
        ]
    },
    {
        "id": "d9fd9d3359222623",
        "type": "change",
        "z": "98fb9802851faeed",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "reset",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 420,
        "y": 700,
        "wires": [
            [
                "1df23dbb63e2937c"
            ]
        ]
    },
    {
        "id": "4490bd001d2c33ee",
        "type": "ui_template",
        "z": "98fb9802851faeed",
        "group": "20ae1040.3cf58",
        "name": "confirm-slider CSS",
        "order": 9,
        "width": 0,
        "height": 0,
        "format": "<style>\n    .confirm-slider-container {\n        position: relative;\n    }\n\n    .confirm-slider-label {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        text-align: center;\n        line-height: 29px;\n        pointer-events: none;\n        z-index: 0;\n\n    }\n\n    .confirm-slider-container>md-slider {\n        height: 40px;\n        margin-left: 8px;\n        margin-right: 8px;\n        top: 0px;\n        pointer-events: none;\n        z-index: 1;\n    }\n\n    .confirm-slider-container>md-slider .md-track-container {\n        width: 100%;\n        position: absolute;\n        top: 0px;\n        height: 32px;\n    }\n\n    .confirm-slider-container>md-slider .md-track.md-track {\n        border-radius: 32px;\n        background: rgba(12 12 12 .2);\n    }\n\n    .confirm-slider-container>md-slider .md-track.md-track-fill {\n        position: relative;\n        background: green;\n        border-radius: 32px;\n        pointer-events: all;\n        min-width: 40px;\n    }\n\n    .confirm-slider-container>md-slider .md-track.md-track-fill:after {\n        position: absolute;\n        content: attr(data-content);\n        font-size: 20px;\n        top: 2px;\n        right: 10px;\n\n    }\n\n    .confirm-slider-container>md-slider .md-thumb:after {\n        visibility: hidden;\n    }\n\n    .confirm-slider-container>md-slider .md-focus-ring {\n        visibility: hidden !important;\n    }\n\n    .confirm-slider-container>md-slider .md-thumb {\n        transform: scale(1) !important;\n        background: transparent;\n        pointer-events: all;\n\n    }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 280,
        "y": 560,
        "wires": [
            []
        ]
    },
    {
        "id": "83a24a1d30e1135e",
        "type": "ui_template",
        "z": "98fb9802851faeed",
        "group": "20ae1040.3cf58",
        "name": "confirm slider based on md-slider",
        "order": 1,
        "width": "6",
        "height": "1",
        "format": "<div class=\"confirm-slider-container\" >\n    <div class=\"confirm-slider-label\">Slide to right to confirm</div>\n    <md-slider id=\"{{'slider_'+$id}}\" ng-mousedown=\"down()\"  data-conent=\"OK\" ng-model=\"slidervalue\" step=\"0.01\" min=\"0\" max=\"1\" value=\"0.1\" aria-label=\"confirm-slider\"></md-slider>\n</div>\n\n<script>\n(function(scope) {\n    let isDown = false\n    scope.slidervalue = 0.01  \n    scope.$watch('slidervalue', function(slidervalue) {\n        if (slidervalue) {        \n            if(slidervalue < 0.1){\n                scope.slidervalue = 0.1\n            }\n            let c = scope.slidervalue >= 1 ? '✓' : '➪'\n            $(\"#slider_\"+scope.$id).find('.md-track-fill').attr('data-content',c);\n        }\n    })\n    scope.down = function(){\n        if(isDown){\n            return\n        }\n\n        isDown = true\n        scope.send({payload:'moving',topic:'confirm-slider'})\n        document.addEventListener('mouseup', scope.up);\n    }\n\n    scope.up = function(){        \n        document.removeEventListener('mouseup', scope.up);        \n        if(scope.slidervalue >= .9){            \n            scope.send({payload:'confirm',topic:'confirm-slider'}) \n            scope.slidervalue = 1;\n            \n            \n        }\n        else{\n            scope.send({payload:'try again',topic:'confirm-slider'})\n            scope.slidervalue = 0.1\n           \n        } \n        isDown = false       \n    }\n    \n    \n  scope.$watch('msg', function(msg) {\n    if (msg) {\n        if(msg.topic=='confirm-slider'){//ignore internal messages\n            return\n        }        \n        scope.slidervalue = 0.1\n    }\n  });\n})(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 330,
        "y": 740,
        "wires": [
            [
                "99ac61604c06bc59",
                "e7d804325b4d0c00"
            ]
        ]
    },
    {
        "id": "99ac61604c06bc59",
        "type": "ui_text",
        "z": "98fb9802851faeed",
        "group": "20ae1040.3cf58",
        "order": 3,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "status",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "className": "",
        "x": 600,
        "y": 740,
        "wires": []
    },
    {
        "id": "e7d804325b4d0c00",
        "type": "switch",
        "z": "98fb9802851faeed",
        "name": "if confirm",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "confirm",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 260,
        "y": 830,
        "wires": [
            [
                "1db7ed42401c5184"
            ]
        ]
    },
    {
        "id": "a920f5344520a12e",
        "type": "trigger",
        "z": "98fb9802851faeed",
        "name": "reset 2s",
        "op1": "",
        "op2": "reset",
        "op1type": "nul",
        "op2type": "str",
        "duration": "2",
        "extend": true,
        "overrideDelay": false,
        "units": "s",
        "reset": "",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 580,
        "y": 830,
        "wires": [
            [
                "83a24a1d30e1135e"
            ]
        ]
    },
    {
        "id": "1db7ed42401c5184",
        "type": "change",
        "z": "98fb9802851faeed",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "reset",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 420,
        "y": 830,
        "wires": [
            [
                "a920f5344520a12e"
            ]
        ]
    },
    {
        "id": "20ae1040.3cf58",
        "type": "ui_group",
        "name": "Slider",
        "tab": "6b520bda.e997a4",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "6b520bda.e997a4",
        "type": "ui_tab",
        "name": "Testing",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]
2 Likes
10

Aitäh! Good idea for the separate css, didn't think of it allthough I already have one to avoid selecting text by accident:

body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html {
touch-action: none;
}

For some reason the checkmarks don't show in safari macos nor firefox / chrome on windows!

11

You may try some other characters or maybe "OK" or something then. I don't have any I device to try ..

1 Like
12

It was all in your explanation! As I kept my original modified node on the same layout it's css overrode the new css :grimacing:

1 Like
13

Lesson learned :smiley:

1 Like
14

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