Responsive Dashboard

Dashboard
1

Hello guys, I'm making a panel to show my data .. how can this be responsive on the phone or tablet?

2

What have you tried?

Is it not already responsive?

Show us you screen shots and flow and I'm certain someone will be able to help.

3

When I open it on my phone, it is not responsive ):

tela
tela1366Ă—768 50.4 KB

4

Ah ok. So you have put everything in one group.

Try adding groups and putting your items / gauges etc into groups.

5

I'm sorry, I don't understand ... Do I have to organize the elements' arrangement differently?

6

Here is my weather dashboard;

weather
weather693Ă—572 58.4 KB

The layout is a 'weather' tab with 2 groups, displayed side by side on a laptop screen. Group 1 is 'Current Conditions' & Group 2 is 'Forecast'.

dash

The width of each individual group fits my phone's browser, and therefore are displayed one group below the other when viewed on my phone.

Is that helpful @eduardoluiztodero ?

6 Likes
7

Really cool, how did you manage to use these different elements?

8

I don't understand what you are asking??

9

Which node package did you install to use this layout? https://flows.nodered.org/node/node-red-dashboard This package does not have these graphics available

10

There are some unique Dashboard nodes out there, just search for "ui" to find them. However you will probably find what you are really asking about is custom CSS. Check out this thread for example ... Making a professional dashboard

11

Yes it does, you just need learn how to format the dashboard nodes. For example, see this quick flow;

[{"id":"c4c35632.87bd58","type":"ui_template","z":"a444a9ff.e7a408","group":"61d2dced.3db8f4","name":"icon image","order":1,"width":2,"height":2,"format":"<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"wi wi-darksky-cloudy fa-4x\"></i>\n</div>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":650,"y":1950,"wires":[[]]},{"id":"8382565b.4fa298","type":"ui_template","z":"a444a9ff.e7a408","group":"61d2dced.3db8f4","name":"icon image","order":1,"width":2,"height":2,"format":"<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"wi wi-darksky-rain fa-4x\"></i>\n</div>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":650,"y":1990,"wires":[[]]},{"id":"61d2dced.3db8f4","type":"ui_group","z":0,"name":"flowtest","tab":"3c94630c.13381c","order":1,"disp":true,"width":22,"collapse":false},{"id":"3c94630c.13381c","type":"ui_tab","z":0,"name":"Test","icon":"dashboard","order":9}]
12

Hi! I'm in a similar situation, but I have just one tab and 1 group, where i linked a Grafana dashboard.
Unfortunately, it doesn't resize when i load it in my spartphone.
Suggestion?
Thanks

13

Instead of linking an entire Grafana Dashboard, why not create more NR groups, and link to different components from within the Grafana dashboard to each of the groups.
Then you can piece the groups together to construct your node-RED dashboard, which will then resize on different screens (as they will move around).
For example, add a grafana chart to group #1, add a grafana gauge to group #2, etc.

Here is a mobile screenshot from my phone of a grafana chart embedded in a node-RED group. Above and below it are other groups which contain other grafana components, as well as node-RED dashboard nodes.

graf
graf1920Ă—1080 313 KB

1 Like
14

I'm trying to play with height and width in html code of every template. Anyway, when I try to see it on mobile screen, this is the results

image
image338Ă—655 61.1 KB

Another weird thing is the follow:
In grafaan, i set my graphs with a particular time scale (last 30days for PM10 and 2.5 day average, and last 2 days for the graph with all the lectures. This is the result on grafana dashboard:

image
image1851Ă—830 111 KB

If i embeded the panels in NR, those setup are lost:

image
image1669Ă—874 116 KB

15

This is what I'm injecting into a ui_template node. You should be able to work out from my example, the iframe styling needed to display a chart like my screenshot above.
Note that I'm using buttons in the node-RED dashboard to select the time period for the chart.

var time = msg.payload.time;
var d = new Date();
var current = d.getTime();
var panelid=2;

msg.fromdate = "now-" + time;
msg.enddate = "now";
msg.refresh = msg.payload.refresh;

msg.template= "<iframe "+
"id=\"powerchart\" "+
"style=\"width:100%; height:100%; overflow:hidden;  margin:auto; border:none;\" "+
"src=https://mydashboard.com:8444/d/zGx-37WRz/realtime-power?orgId=1"+
"&amp;refresh="+ msg.refresh +
"&amp;theme=dark"+
"&amp;from="+ msg.fromdate +
"&amp;to="+ msg.enddate +
"&amp;panelId="+panelid +
"&amp;fullscreen"+
"&amp;kiosk"+"> </iframe>";

return msg;
1 Like
16

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