And another dashboard probelm with layout


#1

(This also has a bit of code in it which is also not seeming to be working for reasons explained below)

I have got the ui_LED node working. Alas it isn't that easy. :frowning:
Here is a layout (series of pictures) of the flow, dashboard screen and what I see.

There is also a problem with the flow which I shall mention shortly.

First off pictures of the layout problem.
Oh, and yeah, I know the order is mixed up (see picture) but that is nothing compared to the layout.

I have tried moving the entries in the list and it only makes it worse in that...
(I'll continue after the pictures)

Picture 1:
So you see I have them laid out on the edit side of the browser as:
Main
PiNet
MusicPi

They didn't show on the screen that way. (I forget the exact order) but I think it was (from the column on the right)
Main
MusicPi
PiNet

So I reversed the two offending nodes and tried again.
Now look at the second picture.

Pic 2:
That is how they are presenting on the dashboard/GUI side of things.

I give up.


#2

Hi @Trying_to_learn

For each of the ui_led nodes you have in the WAP group, can you

  1. select the node
  2. export it to your clipboard
  3. share it here

To begin to explain the layout issues, we need to see how those nodes are configured - specifically some of their internal properties that you don't set yourself.


#3

Main LED:

[{"id":"206a31b2.c9b2e6","type":"ui_led","z":"c636aa5a.cc34","group":"2461b077.b59bb8","order":1,"label":"Main","name":"Main","x":3190,"y":2120,"wires":[]},{"id":"2461b077.b59bb8","type":"ui_group","z":"","name":"WAP","tab":"1c792414.600e94","order":4,"disp":true,"width":"3","collapse":false},{"id":"1c792414.600e94","type":"ui_tab","z":"","name":"Telemetry","icon":"dashboard","order":2}]

PiNet LED

[{"id":"bcb3f9b9.c03f1","type":"ui_led","z":"c636aa5a.cc34","group":"2461b077.b59bb8","order":3,"label":"PiNet","name":"PiNet","x":3190,"y":2180,"wires":[]},{"id":"2461b077.b59bb8","type":"ui_group","z":"","name":"WAP","tab":"1c792414.600e94","order":4,"disp":true,"width":"3","collapse":false},{"id":"1c792414.600e94","type":"ui_tab","z":"","name":"Telemetry","icon":"dashboard","order":2}]

MusicPi:

[{"id":"21ceb162.34f746","type":"ui_led","z":"c636aa5a.cc34","group":"2461b077.b59bb8","order":2,"label":"MusicPi","name":"MusicPi","x":3200,"y":2240,"wires":[]},{"id":"2461b077.b59bb8","type":"ui_group","z":"","name":"WAP","tab":"1c792414.600e94","order":4,"disp":true,"width":"3","collapse":false},{"id":"1c792414.600e94","type":"ui_tab","z":"","name":"Telemetry","icon":"dashboard","order":2}]

The layout has changed again to the way I want.

But that is not reflected by the list order. But it is in the order they are in the edit part of the page where you see the nodes.
(Do you want the screen shots?)


#4

Thanks. I wanted to see the order property of each of those nodes.

There have previously been issues where those order properties don't get set properly and can cause a mismatch between what the dashboard sidebar shows and what ends up appearing in the actual dashboard.

In this instance, I see they all have an order property and their values match the order you have in the dashboard sidebar:

Main LED has order 1
MusicPi has order 2
PiNet has order 3

Unfortunately this doesn't explain why the order has switched in the dashboard itself, but it does rule out one possible explanation.

I"m not clear what you mean by the order they are in the edit part of the page. There are three things to consider:

  1. the workspace where you add nodes and wire them together
  2. the dashboard sidebar with its tree-view of your tabs/groups/nodes
  3. the dashboard webpage itself

Of these three, you only set the order of nodes in the dashboard sidebar by reordering the nodes in the list. The physical position of the nodes in the workspace has no bearing on their position in the dashboard.


#5

I shall agree with you 100% there.

But to put all the cards on the table, I have noticed things when building web pages.

Say I put a new gui thing in a group.
It is not always the first, but if it part of a list of things I've seen this happen:
Node #1 goes in.
I copy/paste it and rename as needed.
I paste again and rename as needed.
(repeat until done)
All the nodes are in a nice "line" on the right side of the browser in the column after the first one.

Other times when I do this and not copy/paste, but drag the new nodes from the left: they get put anywhere in the list after I set their location.

For clarity on my

See the pictures. Not to be difficult, but to show you what I am seeing.

The GUI is how I want it.
Which - as I only mentioned - is how the buttons are in the edit part of the page. Not the right side column.
This is only to confirm what I am seeing and want, compared to what the program is showing me.
I am saying this because I don't want this to be taken the wrong way.
(Had a bad day interacting with people and hope I am over it and not still argo about it and letting it affect what I am saying. (Got a few alarms saying it may be happening now.))


#6

And_another_dashboard_probelm_with_layout_-Dashboard-_Node-RED_Forum

Just to be clear. There is absolutely no relationship between the vertical order of the nodes as they appear on the left and the order they appear in the list on the right.

Moving the nodes around on the left will not change anything about how they appear on the right.

When you copy and paste a node, its 'order' property will also get copied. This means you could end up with two nodes with the same order value. That can lead to unexpected results when viewing the dashboard.

The best way to try to resolve it is, after you copy and paste a node, drag it to a new position in the dashboard sidebar, and then drag it to the position you want it in. That will ensure the order property is properly set.


#7

Yes, ok.

And again: I agree. I'm just mentioning things I have seen/noticed while building GUIs.

Anyway, as it is, the LEDs are in their right places.

I think I will let it alone and not provoke anything else to happen.

Getting the LEDs to work (or more correctly: finding out they have now decided to work) and are now in the right place. I think I'd better stop while I'm ahead.

Other than that other dashboad problem with the and node suddenly creating stuff/empty space on the GUI..... All is good.

Again: Thanks.