How to reload a page after deploying

Dashboard
1

I need to create several screens with different information but when I deploy on node-red, the dashboard is updated to the first tab created (localhost: 1880 / ui / #! * 0),
image this is not what I want.
The solution I found is to access the dashboard through a proper node to read the array with the names of each tab and access the url with this data with an iframe.
something like:

image
image759×161 15.3 KB

The problem is:
When doing a node-red deploy, the open pages return to HOME, and this is solved simply by reloading each page.
How do I reload the page when deploying? (with a Node-Red template node)

2

Take a look at the ui control node.

3

I'm lost here I'm afraid. The Dashboard is a Single-Page App (SPA) so those tabs are NOT separate pages however much they may look like it. So I don't understand why you are going to the bother of trying to load them all?

After a deploy, Dashboard reloads the content of the page I believe and it defaults to the default tab. As backman2 says, you can use the ui_control node to change that default.

4

Let's say I need a board with data in one room and another in another place with different information.
I need to show that information on different screens.

I know that the dashboard is a single page, but doing what I did, I can call a dashboard tab from an iframe with the url I want to use.

The only problem was that when modifying a template node of the dashboard, all the nodes were reset to the default tab, but it is solved by reloading each page
however, reloading eachpage every minute for each open url could consume a lot of cpu, so I was interested in reloading the address of this iframe when performing a deploy.

the ui node does not help me in this case,
and don't be afraid ;D I'm just a newbie looking for solutions

5

Hmm, you really are pushing the boundaries I think. Maybe you could add some custom code to a Dashboard Template node (so that it runs in the browser) that is triggered when new data arrives and changes back to the tab that was on the display?

In other words, do it in the front-end rather than the back-end?

6

I was thinking of looking for an element of the dashboard itself, such as the .masonry-container and creating an "OnChange" function for when the dashboard id changes and so I could reload the page at the moment the dashboard id changes.
and I think so, my purpose is to do it in the backend

my current goal is to find a child element of the iframe that changes when changing the dashboard tab id to reload

image
image895×458 26.5 KB

but I can't get it to work

7

Sorry, I don't use Angular any more really so I can't really help.

8

solved with websocket

image
image880×129 13.4 KB 

[{"id":"c49c925c.7fc97","type":"template","z":"e37f7c8e.a78fa","name":"Iframe with ws","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n\n \n    <!-- reload page by time-->\n   <!-- <meta http-equiv=\"Refresh\" content=\"5; url=http://localhost:1880/myDash/{{param}}\" /> -->\n\n<body>\n    <!--button onclick=\"Refresh()\" width=\"20px\">reload</button-->\n    <table><tr><th>\n    <iframe id=\"MyIFrame\"  align=\"left\" > Tu navegador no soporta iframes</iframe> </th>\n    </tr></table>\n</body>\n<style>\n    #MyIFrame {border: 0;  top:0px;  bottom:0px; width:100vw; height:100vh;   overflow:hidden; }\n       \n    html{overflow:hidden;}  \n    body{margin:0px;}\n</style>\n<script>\n\nvar host=window.location.host\nvar dashboardDir=\"ui\"\nvar index={{payload}}\nvar tabName=window.location.href\nconsole.log(tabName)\n\nvar URL=\"http://\"+host+\"/\"+dashboardDir+\"/#!/\"+index;\nconsole.log(URL)\nvar URLtabName=\"http://\"+host+\"/\"+dashboardDir+\"/#!/\"+index;\nvar iframe = document.getElementById(\"MyIFrame\");\niframe.src = URL;\n\nconsole.log(iframe)\nfunction Refresh(){\nwindow.location = location.href;\nlocation = location;\nlocation = window.location;\nlocation = self.location.href;\n}\n\n\nvar server = window.location.href.split(\"http://\")[1].split(\"/\")[0]\nconsole.log(\"Page location is \" + server)\n\nvar ws = new  WebSocket(\"ws://\" + server + \"/ws/mydash\");\nvar message={}\n\nws.onopen = function() {\n   message = {\n    'payload': 'Client connected'\n  };\n  ws.send(JSON.stringify(message));\n};\n\nws.onclose = function(){\n     var message = {\n    'payload': 'Connection closed'\n  };\n  console.log('Connection closed');\n  ws.send(JSON.stringify(message));\n};\n\nws.onerror = function(error) {\n  console.log('Error detected: ' + JSON.stringify(error));\n};\n\nws.onmessage = function(e) {\n  var server_message = e.data;\n   console.log(server_message)\n // responseObject = JSON.parse(server_message);\n\n  //alert(JSON.stringify(responseObject));\n  //Do the required stuff\n  //console.log(responseObject.payload)\n  if (server_message==\"Refresh page\"){\n     Refresh();\n      \n  }\n}\n\n\n\n\n\n\n\n</script>\n\n\n\n","output":"str","x":820,"y":880,"wires":[["3ff4a774.24d0f8"]]}]