How to do a "cleaning-mode" for touch screens?

General
1

Hi all,

is there a way to disable inputs in the browser(firefox, chrome) for a certain amount of time?
Or show a certain overlay?
So that you have like a 1minute window where you can clean the touch screen, without pressing anything by accident?

Here is what i tried:

grafik
grafik718×230 15.3 KB 


<html>
<style>
body, html {
  height: 100%;
  margin: 0;
}

.bgimg {
  background-image: url('/home/pi/Pictures/clean.jpg');
  height: 100%;
  background-position: center;
  background-size: cover;
  position: relative;
  color: white;
  font-family: "Courier New", Courier, monospace;
  font-size: 25px;
}

.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}

.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

hr {
  margin: auto;
  width: 40%;
}
</style>
<body>

<div class="bgimg">
  <div class="topleft">
    <p>Logo</p>
  </div>
  <div class="middle">
    <h1>Bildschirm kann gereinigt werden</h1>
    <hr>
    <p>Overlay schließt in 60s</p>
  </div>
  <div class="bottomleft">
    <p></p>
  </div>
</div>

</body>
</html>
2

This works for me:

[
    {
        "id": "571b093b4e821c7e",
        "type": "inject",
        "z": "f6c346cb44030a48",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payloadType": "date",
        "x": 2200,
        "y": 1660,
        "wires": [
            [
                "54b7066ea10ce923",
                "37db03d8076295ad"
            ]
        ]
    },
    {
        "id": "37db03d8076295ad",
        "type": "delay",
        "z": "f6c346cb44030a48",
        "name": "",
        "pauseType": "delay",
        "timeout": "60",
        "timeoutUnits": "seconds",
        "rate": "1",
        "nbRateUnits": "1",
        "rateUnits": "second",
        "randomFirst": "1",
        "randomLast": "5",
        "randomUnits": "seconds",
        "drop": false,
        "allowrate": false,
        "outputs": 1,
        "x": 2390,
        "y": 1720,
        "wires": [
            [
                "ceda38d7e9b140f8"
            ]
        ]
    },
    {
        "id": "54b7066ea10ce923",
        "type": "template",
        "z": "f6c346cb44030a48",
        "name": "send clean",
        "field": "template",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<!DOCTYPE html>\n\n\n<html>\n<head>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<style>\n#overlay {\n  position: fixed;\n  display: none;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0,0,0,0.5);\n  z-index: 99;\n  cursor: pointer;\n}\n\n#text{\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  font-size: 50px;\n  color: white;\n  transform: translate(-50%,-50%);\n  -ms-transform: translate(-50%,-50%);\n}\n</style>\n</head>\n<body>\n\n\n\n<div id=\"overlay\" onclick=//>\n  <div id=\"text\">Reinigungsmodus - Rückkehr in 60s</div>\n</div>\n\n<script>\ndocument.getElementById(\"overlay\").style.display = \"block\";\n</script>\n\n\n\n   \n</body>\n</html> ",
        "output": "str",
        "x": 2490,
        "y": 1660,
        "wires": [
            [
                "891854e1f21749da"
            ]
        ]
    },
    {
        "id": "ceda38d7e9b140f8",
        "type": "template",
        "z": "f6c346cb44030a48",
        "name": "empty template",
        "field": "template",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "",
        "output": "str",
        "x": 2640,
        "y": 1720,
        "wires": [
            [
                "891854e1f21749da"
            ]
        ]
    },
    {
        "id": "891854e1f21749da",
        "type": "ui_template",
        "z": "f6c346cb44030a48",
        "group": "347f47ea43c8cdc7",
        "name": "",
        "order": 17,
        "width": "1",
        "height": "1",
        "format": "",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 2820,
        "y": 1660,
        "wires": [
            []
        ]
    },
    {
        "id": "347f47ea43c8cdc7",
        "type": "ui_group",
        "name": "Group 50",
        "tab": "8d534dc079a8b4e9",
        "order": 50,
        "disp": false,
        "width": "1",
        "collapse": false,
        "className": ""
    },
    {
        "id": "8d534dc079a8b4e9",
        "type": "ui_tab",
        "name": "Werkzeuge",
        "icon": "mi-construction",
        "order": 3,
        "disabled": false,
        "hidden": false
    }
]
3

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