Dashboard - wish for better layout options

[Walter Kraembring]

Hi,

After working a bit with the dashboard I realize there are limits in creating layouts. The ui elements are "self-organized & ordered" a bit too much. I would wish for having a possibility for "drag & drop" and "snap to grid" 

[Walter Kraembring]

...for some reason my message was posted to quick

I would like to be able to move each single ui element to a specific position. Without this, I feel I have to revert to a traditional web page/websocket solution.

If you look at the below example, it is not user friendly. Maybe a grid and a "snap to grid" feature is already in the plans or existing ideas?

Best regards, Walter

[Colin Law]

Provided you define  a specific size for each element (not auto) and make sure that you do not leave any  spaces in each row then the order you specify should be followed. At least that works for me.

Colin

On 10 Nov 2016 6:26 a.m., "Walter Kraembring" <walter.k...@gmail.com> wrote:

Hi,

After working a bit with the dashboard I realize there are limits in creating layouts. The ui elements are "self-organized & ordered" a bit too much. I would wish for having a possibility for "drag & drop" and "snap to grid" 

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/538e422f-8226-4ac5-8d1a-c666c6f5b3a2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Dave C-J]

Hi Walter, 

you seem to have opted for one widget per group. Is there a reason not to arrange them into groups which will give better control, indeed worst case create one large group then the width can be fixed and the order within will stay.

But apart from that, there aren't any current short term plans to allow drag drop composition on the UI side. 

We would like to get to it one day, but the Node-RED core is our primary focus, and by the time we get to this I'm sure Angular won't be the answer anymore :-)

Of course this is not the only dashboard out there, and we are happy for others to create and offer up a better one.

 

[Stephen Mann]

I also wish for more control over the dashboard.  I've looked at other solutions, such as HomeAssistant, and keep coming back to Node-Red.  If there is no improvement to the dashboard control in the works, at least give us better instructions and tips of how to arrange widgets.  For example, I discovered quite by accident that I could insert HTML tags into my strings in a function and in the "label" and "Value Format" fields of the node edit.

On the style, why isn't there a custom style where the user can define their own style sheet?

Just thinkin'.

[Dave C-J]

Indeed the docs for dashboard are lacking, but we will gladly accept help creating some if someone wishes to make a contribution to the project.

As per previous comments there are no immediate plans to enhance the layout options. 

Re style - the Theme tab does allow your to change things like colours for most of the elements and base font, and the Site tab allows you to change sizes of widgets and spacing etc. Most of the css classes can be over-ridden by using a ui_template and then setting them in there.

[Toshi Bass]

I for one am quite happy with the current dashboard, I find that if I stick to a group width of 6 and build my widgets into that I can produce dashboards that automatically fits my iphone, ipad and monitor see attached ...

[Dave C-J]

Nice work Toshi

--

Sent from phone.

[Dave C-J]

Of course if you need lots more flexibility there is the excellent ui-builder project that gives you almost total freedom to create your own ui. 

--

Sent from phone.

[Stephen Mann]

Toshi- How the heck do you accomplish such a polished dashboard??

How do you get more than one column of widgets?  How do you embed the camera feeds?

There probably isn't much wanting from the Dashboard, but for instructions.  Even https://github.com/node-red/node-red-dashboard, README.md has a screenshot of a nice three-column dashboard, but nowhere can I find any instructions how to accomplish this on my system.

If you were to take some time to write up a tut on your dashboard, I'm sure there would be a lot of very appreciative users here.  (At least one <vbg>).

Steve

[Nick O'Leary]

Stephen,

you have to think of the dashboard layout as a grid.

Each group element has a width - by default 6 'units' (a unit is 48px wide by default).

Each widget in the group also has a width - by default, 'auto' which means it will fill the width of the group its in, but you can set it to something else.

The layout algorithm of the dashboard always tries to place items as high and to the left as they can within their container - this applies to how groups are positioned on the page, as well as how widgets are positioned in a group.

Given a group with width 6, if you add six widgets, each with a width of 2, then they will be laid out in two rows - three widgets in each.

If you add two groups of width 6, as long as your browser window is wide enough, they will sit alongside each other. If you shrink the browser, at some point the second group will shift to be below the first, in a column.

Does that help?

Nick

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/5e227eca-bd80-4249-a5d8-de015afa7490%40googlegroups.com.

[Julian Knight]

Thanks for the shout-out Dave! :-)

And I'm always happy to receive ideas and feedback (and code!) for uibuilder.

Of course, not so much hand-holding with uibuilder so Dashboard remains easier to get a quick ui going. I use both.

[Toshi Bass]

Could not have put that explanation better myself thanks Nick, in reality it should replace the the following statement in  https://github.com/node-red/node-red-dashboard  because I also went through quite a bit of trial and error to figure out how to place widgets where I wanted them, I think if I had seen that explanation it would have been a less painful learning curve.  

The default width of a group is 6 units ( ≈300 pixels ). Setting a widget to auto will fill the available width of the group. It is still advisable to use multiple groups if possible, rather than one big group, so that the page can dynamically resize on smaller screens.

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

[Julian Knight]

Toshi, maybe you could do a pull request with that included?

[Stephen Mann]

Aha!- it's starting to make sense now.  I should be thinking Responsive Website layout?

So, if my screen is 960 pixels wide, I can put 20-units across the screen.  Five four-unit groups, for example, and no widget can be larger than it's group width?

Thanks for the tip.

Steve

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

[Dave C-J]

Yes that's about right - there are of course gaps and edges to be counted as well... but they can all be changed in the Dashboard sidebar Site tab

[Emil Jebavý]

hello, what kind od graph you use ? Thank you