Automatically Fullscreen dashboard?

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:

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

1 Like

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

[{"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}]
1 Like

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

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

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

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

Regards mark

2 Likes

This should do the trick.

[{"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}]
3 Likes

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

1 Like

Thanks, it solved the problem

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