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

**URL:** <https://discourse.nodered.org/t/how-to-do-a-cleaning-mode-for-touch-screens/58905>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [24 February 2022 06:41 UTC](https://discourse.nodered.org/t/how-to-do-a-cleaning-mode-for-touch-screens/58905 "2022-02-24T06:41:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nico25](https://avatars.discourse-cdn.com/v4/letter/n/d2c977/32.png) [@nico25](https://discourse.nodered.org/u/nico25)\
**Post date:** [24 February 2022 06:41 UTC](https://discourse.nodered.org/t/how-to-do-a-cleaning-mode-for-touch-screens/58905/1 "2022-02-24T06:41:16Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/6/96edd2f55bbc3b3b3acf93e4c310675bc94e4a8f.png)

```auto

<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>

```

---

<div class="post-metadata">

**Author:** ![nico25](https://avatars.discourse-cdn.com/v4/letter/n/d2c977/32.png) [@nico25](https://discourse.nodered.org/u/nico25)\
**Post date:** [24 February 2022 08:07 UTC](https://discourse.nodered.org/t/how-to-do-a-cleaning-mode-for-touch-screens/58905/2 "2022-02-24T08:07:38Z")

</div>

This works for me:

```auto
[
    {
        "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
    }
]

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 March 2022 08:08 UTC](https://discourse.nodered.org/t/how-to-do-a-cleaning-mode-for-touch-screens/58905/3 "2022-03-10T08:08:14Z")

</div>

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