Node red dashboard detect and output screen width

Dashboard
1

Hi,
is there any ways for dashboard to detect and output screen width to node output?

2

There is. And many more than just the screen.
Example contains more than just the screen width but you'll get the point.
It fires message on init and is capable also to send same data on demand.

[{"id":"f6a3dd5921436153","type":"ui_template","z":"f8b8c963bdc117f5","group":"55888982bdd0637f","name":"","order":1,"width":0,"height":0,"format":"<script>\n(function(scope) {\n    const getHorizontalDimensions = () => {        \n        return { \n            screen:{\n                width:screen.width,\n                availWidth:screen.availWidth\n            },       \n            window:{\n                innerWidth:window.innerWidth,\n                outerWidth:window.outerWidth\n            },\n            document:{\n                clientWidth:document.documentElement.clientWidth,\n                scrollWidth:document.documentElement.scrollWidth\n            }\n        }\n    }    \n    scope.send({payload:getHorizontalDimensions()})\n    \n    scope.$watch('msg', function(msg) {\n        if (msg) {\n            if(msg.topic == \"get-width\"){\n                scope.send({payload:getHorizontalDimensions()})\n            }\n        }\n    });\n\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":520,"y":380,"wires":[["354adbba6efd0aa1"]]},{"id":"354adbba6efd0aa1","type":"debug","z":"f8b8c963bdc117f5","name":"debug 348","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":710,"y":380,"wires":[]},{"id":"24175006327630b9","type":"inject","z":"f8b8c963bdc117f5","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"get-width","payload":"","payloadType":"date","x":330,"y":380,"wires":[["f6a3dd5921436153"]]},{"id":"55888982bdd0637f","type":"ui_group","name":"1. group","tab":"62083694d0eab7ca","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"62083694d0eab7ca","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
1 Like
3

Great, thanks

4

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