# Automatically Fullscreen dashboard?

**URL:** <https://discourse.nodered.org/t/automatically-fullscreen-dashboard/66444>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, function-node\
**Created:** [15 August 2022 12:11 UTC](https://discourse.nodered.org/t/automatically-fullscreen-dashboard/66444 "2022-08-15T12:11:39Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![marllondutra12](https://avatars.discourse-cdn.com/v4/letter/m/90ced4/32.png) [@marllondutra12](https://discourse.nodered.org/u/marllondutra12)\
**Post date:** [15 August 2022 12:11 UTC](https://discourse.nodered.org/t/automatically-fullscreen-dashboard/66444/1 "2022-08-15T12:11:39Z")

</div>

Hello,

Is it possible the dashboard automatically gets fullscreen when connected? I can do this with a button, but not automatically.

My node red version: Node-RED v2.1.6

Code to get full screen when pressed a button:

```auto
<script>
var elem = document.documentElement;
// or overwrite value in your callback function ...
this.scope.action = function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}
</script>
<md-button ng-click="send({payload:action()})">
    Fullscreen
</md-button>

```

Thanks a lot.

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [15 August 2022 12:19 UTC](https://discourse.nodered.org/t/automatically-fullscreen-dashboard/66444/2 "2022-08-15T12:19:07Z")

</div>

Try this template node.  
It will send a payload when the page got loaded.

```auto
[{"id":"5c44f2a0.32158c","type":"ui_template","z":"55e959fa.db8a18","group":"68df9665.0c5c7","name":"Page Got Loaded","order":1,"width":0,"height":0,"format":"<script>\n(function() {\n (function(scope) {\n scope.send({payload: \"preload\"}); // this gets sent when the view is opened in the browser\n })(scope);\n})();\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":230,"y":160,"wires":[["3ae472d6.3465d6","51aa3f58.9ae478","d1c0ab33.9ac408"]]},{"id":"68df9665.0c5c7","type":"ui_group","name":"Toon","tab":"2f2447.bd4babba","order":1,"disp":true,"width":"6"},{"id":"2f2447.bd4babba","type":"ui_tab","name":"Toon","icon":"fa-thermometer-full","order":20}]

```

---

<div class="post-metadata">

**Author:** ![marllondutra12](https://avatars.discourse-cdn.com/v4/letter/m/90ced4/32.png) [@marllondutra12](https://discourse.nodered.org/u/marllondutra12)\
**Post date:** [15 August 2022 14:26 UTC](https://discourse.nodered.org/t/automatically-fullscreen-dashboard/66444/3 "2022-08-15T14:26:23Z")

</div>

Hi Edje, It does not work for me, yet...

Could you see whats going wrong with my flow? Thanks.

```auto
[
    {
        "id": "263e918745d2056c",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "c02f582a5721daef",
        "type": "ui_ui_control",
        "z": "263e918745d2056c",
        "name": "",
        "events": "all",
        "x": 440,
        "y": 100,
        "wires": [
            [
                "43a755440f4c3170"
            ]
        ]
    },
    {
        "id": "1ab71925c572b4d2",
        "type": "debug",
        "z": "263e918745d2056c",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 930,
        "y": 100,
        "wires": []
    },
    {
        "id": "43a755440f4c3170",
        "type": "ui_template",
        "z": "263e918745d2056c",
        "group": "68df9665.0c5c7",
        "name": "",
        "order": 2,
        "width": 0,
        "height": 0,
        "format": "<script>\nvar elem = document.documentElement;\n// or overwrite value in your callback function ...\nthis.scope.action = function openFullscreen() {\n if (elem.requestFullscreen) {\n elem.requestFullscreen();\n } else if (elem.mozRequestFullScreen) { /* Firefox */\n elem.mozRequestFullScreen();\n } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */\n elem.webkitRequestFullscreen();\n } else if (elem.msRequestFullscreen) { /* IE/Edge */\n elem.msRequestFullscreen();\n }\n}\n</script>\n<md-button ng-click=\"send({payload:action()})\">\n Fullscreen\n</md-button>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 580,
        "y": 100,
        "wires": [
            [
                "2250bc57b04994ca"
            ]
        ]
    },
    {
        "id": "2250bc57b04994ca",
        "type": "ui_template",
        "z": "263e918745d2056c",
        "group": "68df9665.0c5c7",
        "name": "Page Got Loaded",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<script>\n(function() {\n (function(scope) {\n scope.send({payload: \"action\"}); // this gets sent when the view is opened in the browser\n })(scope);\n})();\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 750,
        "y": 100,
        "wires": [
            [
                "1ab71925c572b4d2"
            ]
        ]
    },
    {
        "id": "68df9665.0c5c7",
        "type": "ui_group",
        "name": "Toon",
        "tab": "2f2447.bd4babba",
        "order": 1,
        "disp": true,
        "width": "6"
    },
    {
        "id": "2f2447.bd4babba",
        "type": "ui_tab",
        "name": "Toon",
        "icon": "fa-thermometer-full",
        "order": 20
    }
]

```

---

<div class="post-metadata">

**Author:** ![Vonksmurf](https://avatars.discourse-cdn.com/v4/letter/v/5daacb/32.png) [@Vonksmurf](https://discourse.nodered.org/u/Vonksmurf)\
**Post date:** [15 August 2022 15:23 UTC](https://discourse.nodered.org/t/automatically-fullscreen-dashboard/66444/4 "2022-08-15T15:23:51Z")

</div>

If you search for your brower how to start the kiosk mode then it starts full screen when you actived

> <https://superuser.com/questions/716426/running-latest-chrome-for-windows-in-kiosk-mode>

> **[Launch Web Browsers In Kiosk Mode (Full Screen) From CLI - OSTechNix](https://ostechnix.com/launch-web-browsers-in-kiosk-mode-full-screen-from-cli/)**
>
> In this guide, we will see how to launch web browsers in kiosk mode (full screen) from command line in Linux.

Regards mark

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [15 August 2022 19:20 UTC](https://discourse.nodered.org/t/automatically-fullscreen-dashboard/66444/5 "2022-08-15T19:20:45Z")

</div>

This should do the trick.

```auto
[{"id":"43a755440f4c3170","type":"ui_template","z":"263e918745d2056c","group":"68df9665.0c5c7","name":"","order":2,"width":0,"height":0,"format":"<script>\n\n(function() {\n (function(scope) {\n if (elem.requestFullscreen) {\n elem.requestFullscreen();\n } else if (elem.mozRequestFullScreen) { /* Firefox */\n elem.mozRequestFullScreen();\n } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */\n elem.webkitRequestFullscreen();\n } else if (elem.msRequestFullscreen) { /* IE/Edge */\n elem.msRequestFullscreen();\n }\n })(scope);\n})();\n\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":580,"y":100,"wires":[[]]},{"id":"68df9665.0c5c7","type":"ui_group","name":"Toon","tab":"2f2447.bd4babba","order":1,"disp":true,"width":"6"},{"id":"2f2447.bd4babba","type":"ui_tab","name":"Toon","icon":"fa-thermometer-full","order":20}]

```

---

<div class="post-metadata">

**Author:** ![9toejack](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/9toejack/32/56868_2.png) [@9toejack](https://discourse.nodered.org/u/9toejack)\
**Post date:** [16 August 2022 06:58 UTC](https://discourse.nodered.org/t/automatically-fullscreen-dashboard/66444/6 "2022-08-16T06:58:35Z")

</div>

If you create a shortcut link on desktop for the url it opens full screen on my end. have you tried that ?

---

<div class="post-metadata">

**Author:** ![marllondutra12](https://avatars.discourse-cdn.com/v4/letter/m/90ced4/32.png) [@marllondutra12](https://discourse.nodered.org/u/marllondutra12)\
**Post date:** [16 August 2022 12:58 UTC](https://discourse.nodered.org/t/automatically-fullscreen-dashboard/66444/7 "2022-08-16T12:58:28Z")

</div>

Thanks, it solved the problem

---

<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:** [30 August 2022 12:58 UTC](https://discourse.nodered.org/t/automatically-fullscreen-dashboard/66444/8 "2022-08-30T12:58:55Z")

</div>

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