With node-red-dashboard one can inject CSS to tweak the way the dashboard nodes look. Is there a way of doing that with FlexDash?
good catch! thanks!
Not really. The CSS is largely provided by Vuetify and it's rather complicatedsophisticated...
CSS doesn't come naturally to me 
and I haven't really gone into trying to understand all the machinery Vuetify has in place...
Is there specific functionality you're looking for?
Specifically I was looking at the label font. But it is a more general question. Virtually every day we get questions asking with help on tweaking some aspect of the dashboard widgets. Colours, fonts, icons, etc. I fear that if the user cannot tweak things that may be a problem.
1 Like
It only took us 3-4 years to add that to the main dashboard... so I think patience is in order... 
2 Likes
True, but if there is a major design issue adding something similar eventually then that could be an issue.
I'm using the 'Stat' widget to display power usage, and have written the flow to display the data in different formats, depending on the amount.
If the power reading is <= 999 Watts, it is displayed as 999W, but if it is > 999 Watts, the flow divides it by 1000, and changes the msg.unit to kW, so it displays 2.34kW which is easier to read (and ensures that the number of digits fit in the grid unit).
Also utilizes the colour/low_color/high_color to change according to the consumption (green is good, red is bad 
)
However, not quite working, because the 'Stat' widget always rounds the data to 1 decimal place.
I'm presuming that the name 'Stat' is short for 'Thermostat' which kinda makes sense for the rounding, but I think that you'll find that node-RED users would use this node to display a variety of data sources, and not just as a thermostat.
So would it be better to perhaps rename it to something more generic, for example - 'Meter'??, and allow users to decide what, if any rounding is really required (as it can easily be done in the flow), or even add rounding as a 'prop'.
For consideration.
[{"id":"cb5626ad26631875","type":"fd-stat","z":"1543d308b342690a","fd_container":"69c2e3f5798c3475","fd_cols":1,"fd_rows":1,"fd_array":false,"fd_array_max":10,"name":"","title":"Power used","popup_info":"","unit":"kW","value":null,"color":"","low_color":"blue","high_color":"pink","low_threshold":null,"high_threshold":null,"low_regexp":"","high_regexp":"","chip":false,"iso_prefix":true,"zoom":1,"x":945,"y":620,"wires":[]},{"id":"0b4ad8dbda7d7e6b","type":"inject","z":"1543d308b342690a","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"5.64","payloadType":"num","x":770,"y":620,"wires":[["cb5626ad26631875"]]},{"id":"69c2e3f5798c3475","type":"flexdash container","name":"Energy","kind":"StdGrid","fd_children":",92068bc37c49da87,43719d5359575f6b,bb113511ea8e41fd,74b7d68b54f130ee,3a60132d9af9f863,cb5626ad26631875","title":"","tab":"fef6c0f6d48841d6","min_cols":"8","max_cols":10,"parent":"","solid":false,"cols":"1","rows":"1"},{"id":"fef6c0f6d48841d6","type":"flexdash tab","name":"Demo","icon":"mdi-home-lightning-bolt-outline","title":"","fd_children":",69c2e3f5798c3475","fd":"e8f5aea52ab49500"}]
Did you see the iso_prefix prop? The widget can do that on its own.
It's called stat 'cause that's what Grafana calls it... short for "statistic" I believe.
I used toFixed(1) out of simplicity. I've had bad experience with rounding in the flow 'cause sometimes stuff like Math.round(x*10)/10 doesn't come out quite right. I don't have a problem adding a digits prop, it's always a balance between making it so complicated nobody understands it anymore and "please clone it and make the changes you want". I think here I was about to add a prop and then couldn't decide whether to use toFixed or toPrecision...
NB: the stat widget will happily display a string (of course high/low thresholds don't work then), so you can format the number however you like into a string and feed it that...
I have seen it, but despite reading the widget notes, and googling... I've not a clue what it is, or what it does....
But shouldn't the starting point be a widget that users can configure for their particular use without having to 'clone and make changes...' which most users don't have the skills to do?
Does this explain it?
The
iso_prefixoption can be used to display the value in ISO format with a prefix, e.g.
if the value is 1200 and the unit 'W' it will display 1.2kW, or if the value is 0.012 and the
unit 's' the display will be 12ms.
I assume you saw you can change the size and weight, so presumably you want to change font? Just for that component or for the whole dashboard?
There's no major design issue, there are just a lot of considerations and there's a lot of work...
Some of the things I thought of (in no particular order):
- Vuetify 3 is still in beta, the CSS stuff has still be settling and is not yet documented, it's going to take some research to figure out what can be changed cleanly and what the best way to do that is.
- Vuetify has a notion of layout density, specifically 'default', 'comfortable', and 'compact'; FlexDash mostly uses 'compact' because that's my preference, but that doesn't mean someone can't go through and work out how to change to one of the other two (changing the default density overall is trivial, except that there are a bunch of other places that probably need to change too to make it look consistent).
- Vuetify uses the Roboto font by default and I set things up so it's served by Node-RED so it's possible to deploy FlexDash on a network without internet access, i.e., there are no external dependencies. It's trivial to put a font tag somewhere to load a font from wherever, it's less trivial to let users replace Roboto in a FlexDash installation with some other font that gets served by Node-RED.
- FlexDash uses the material design colors (more than 200) and a special 20-color palette for plots. There's a doc page on that and not everything is working as intended yet, but getting closer. The shades of grey used for widget background, etc. are part of a theme. All that is readily customizable but it's not a click&choose thing.
- Everything in FlexDash is a component, so someone can write alternate components. Widgets are easy to write. Grids and panels a bit less so, but not that hard. That pretty much leaves the title bar with the tab nav, which would take more work to replace, but it's not crazy stuff either.
- If you write your own widget you get to inject whatever CSS you choose, so you can definitely get any looks you may want for your widget.
My position with all of the above is as follows:
- I'm foremost building what I want and am sharing it. I'm trying to keep it all general-purpose and reasonably consistent and complete. I'm not a designer, I can't build a different look for others.
- I'm happy to give pointers and help someone figure out how to customize, I'm also willing to build the infrastructure to make something pluggable. But they're gonna have to roll up their sleeves to do the actual customization.
- I'm happy to work with someone to integrate alternatives into FlexDash as long as they're general-purpose and cleanly done.
- I'm not interested in facilitating the injection of arbitrary HTML or CSS as a quick&dirty hack and because someone was too lazy to write a proper component or figure out how to do things cleanly within the existing frameworks.
Sorry for the long rant 
1 Like
Sorry if I triggered it!
I was just providing feedback about 'something that that didn't seem to work right' from a user perspective, as you asked above -
But hey, I appreciate all the work that you are putting into Flexdash, it's a great addition to node-RED.
2 Likes
Oh, no worries, I appreciate all the input, feedback, suggestions, and bug reports! Thank you!!!
Also the rant wasn't in anger or anything. I've been thinking quite a bit about it 'cause I want to control the FlexDash workload so I don't burn out. I simply thought that this would be a good moment to state clearly what my current position is for the sake of setting expectations. FlexDash can't be everything to everyone. Choice is good, there's the existing dashboard (which isn't gonna break just because Angular...), UI Builder, Grafana, and more. I think it's good for users to know as much as possible what they're choosing when they pick up FlexDash .
2 Likes
How about this:
precision: { type: Number, default: 3, tip: "number of significant digits to show" },
Floating point values are rounded using JavaScript's toPrecision() function, passing it
the `precision` option. Integer values are shown as-is.
1 Like
The "Simple Table" widget is anything but simple anymore... Should really be called "plain text table" in the sense that it displays unformatted text. I'll have to implement a "Component Table" at some point where the contents of each cell can be some component (i,e. markup)...
Anyway, long intro to say that Simple Table now allows sorting:
sort: { default: null, tip: "boolean or array of columns to allow sorting by column"},
The sort property determines whether the table can be sorted by clicking in the column
headings. It can be a per-column array of booleans to enable/disable sorting per column
or it can be a single boolean for all columns.
Hmm, maybe the default should be true...
That would be a good addition, thanks.
The precision could then be changed dynamically by using msg.precision 
1 Like
Also sorry for triggering that, like others I am amazed at how much you have produced in such a short time.
Perhaps it would be useful if I clarified my interest in the project. Node red will need a replacement Dashboard in the medium term as (as I understand it) the tools it uses are getting further and further out of support. Therefore my interest is in the possibility that FlexDash might be that replacement, and if so then doing a little to help get it started down that path. So when I was asking about CSS injection it was not that I have a specific need, but I think that something along those lines will be something that will be desirable at some point. I misinterpreted your original reply, thinking that you meant that there were fundamental issues with providing such a capability, which I gather is not the case.
I entirely agree that if FlexDash is to become the new dashboard then it will need buy in and help from other developers, just as the existing dashboard has benefited from input from others.
2 Likes
Sorry, I used the wrong word, I meant Title. I have a Stat node and can Zoom up the text, but the title appears to be fixed size. This shows up one of the problems with any dashboard. There are so many possible options for every widget that it becomes unwieldy if one attempts to provide all of them.
1 Like
No need to change anything dynamically. If you set iso_prefix to true and precision to 3 you get exactly the behavior you describe above by just feeding in your raw values without any Node-RED code.
No worries & thank you! As I mentioned I'm not upset or anything.
The title is not actually rendered by the widget, it's rendered by the "framework". A widget can render its own title, for example, the gauge does that to place the title at the bottom.
You may be able to get the looks you're after by removing the title from the stat widget and placing a label widget above it into a panel. LMK if this doesn't make sense.
Ah OK, perfect thanks
1 Like
Earlier, I acquired yet another missing/deleted widget, which stopped me from moving any elements around the workspace. I clicked the up/down arrows which did nothing, except raising errors in the browser console;
But I've tracked down what is causing the problem...
Whilst learning flexdash, I've created 2 test/example flows to try out different approaches, but so they did not clutter my workspace, I disabled the nodes (ctrl-8).
The two nodes that are shown as 'does not exist', are in fact the FD nodes which are disabled!!
So it appears that Flexdash does not recognise disabled nodes, and deleting those nodes resulted in being able to move all elements around, and no error messages 
So all good now!
1 Like
FlexDash does handle disabled nodes but you hit a part of the code that I overlooked. Thanks for troubleshooting!
All will be good again once I fix this 
3 Likes
