🎇 FlexDash alpha release - round 2

[tve]

The first FlexDash alpha release thread has reached over 220 posts: yikes. Time to start a new thread!

I will keep this first post updated for as long as dicourse allows me to edit it. After that I'll create the next thread. If you have something that doesn't fall in the category of "I have a problem with FlexDash" feel free to create your own thread: if you apply the flexdash tag most users here will see it!

For new FlexDash enthusiasts:

• You may want to read the advertisement in the first post of the FlexDash alpha release thread, most of the rest of the thread is about first users finding bugs (thank you!) and me fixing them, you won't miss anything if you don't read all the ping-pong exchanges!
• All the info on getting started with FlexDash is in the documentation, specifically the quick start section, the short form is npm install @flexdash/node-red-fd-corewidgets and then import the hello-world example from that module. The docs have examples and pages about the core concepts, how the layout works, etc.

Why is FlexDash in alpha and what can you expect?

• The main reason for the alpha status is that you should still expect breaking changes. See the list of known issues in the documentation for specifics.
• How to write your own widgets is not yet documented--I'm working on it. Also, an equivalent to the "ui template" node is missing. I have a bunch of cool ideas and want to get them out while in alpha.
• Overall, I believe FlexDash has been working for people, at least no-one has posted a "it's crashing on me". I use it daily as my main home dashboard. Issues posted here have been getting a 24-48h turn-around time for a fix or a work-around.
• As fas as I'm concerned, FlexDash should transition to beta once the feature set for 1.0 is established and there's at least a partial implementation of everything towards that. At that point beta becomes a phase of finishing all features and shaking known issues out.

Current open issues:

• See the list of known issues mentioned above
• Some users would like the output of widgets, such as toggle, to be fed back to the input so the visual state changes without the flow having to handle that. The current implementation doesn't work properly and is fundamentally wrong, it needs to be implemented in the node, not the widget. Current work-around: loop the widget output back to its input in the flow (use a junction node).
• The sparkline and time-plot widgets accept either an array of all values or a single value/row. The implementation of the latter is fundamentally wrong and fails if the same value is sent multiple times in a row, this is particularly problematic with the sparkline. Current work-around for sparkline: add some insignificant random noise to each value, e.g., msg.payload = msg.payload + Date.now()/1E18.
• There may still be issues with disabled flows/nodes. There was an issue with moving widgets in a grid that had disabled nodes/widgets, this has been fixed, but a more extensive code review is needed to exclude other similar corner cases.
• Need to fix redirect for URL without slash and query string, e.g., http://localhost:1880/flexdash/?theme=dark

My next step is to finish the docs on how to write your own widget.

Enjoy! .. and report back, good & bad!

[Paul-Reed]

I don't know it this was overlooked, but you mentioned in your last release that;
'fix colors (supporting names like purple-darken-4)'
and reported here;

@Paul-Reed

Doesn't seem to work in the Sparkline widget.

[{"id":"89f1a370470d2ab8","type":"inject","z":"1543d308b342690a","name":"","props":[{"p":"payload"},{"p":"color","v":"lime-accent-3","vt":"str"},{"p":"fill_color","v":"orange-accent-3","vt":"str"},{"p":"text_color","v":"teal-accent-3","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"$floor($random()*100)","payloadType":"jsonata","x":125,"y":455,"wires":[["1e570e63f6d10c88"]]},{"id":"1e570e63f6d10c88","type":"fd-spark-line","z":"1543d308b342690a","fd_container":"69c2e3f5798c3475","fd_cols":"2","fd_rows":1,"fd_array":false,"fd_array_max":10,"name":"","title":"Spark Line","popup_info":"","value":0,"color":"","fill_color":"","text_color":"","show_value":false,"unit":"","x":265,"y":455,"wires":[]},{"id":"69c2e3f5798c3475","type":"flexdash container","name":"Energy","kind":"StdGrid","fd_children":",43719d5359575f6b,bb113511ea8e41fd,3a60132d9af9f863,1e570e63f6d10c88","title":"","tab":"fef6c0f6d48841d6","min_cols":"8","max_cols":10,"parent":"","solid":false,"cols":"1","rows":"1"},{"id":"fef6c0f6d48841d6","type":"flexdash tab","name":"Energy","icon":"mdi-home-lightning-bolt-outline","title":"","fd_children":",69c2e3f5798c3475","fd":"e8f5aea52ab49500"}]

[tve]

@Paul-Reed

Doesn't seem to work in the Sparkline widget.

It's not supposed to but it should...

uPlot currently uses a separate 20-color palette and sparkline is drawn by uPlot. Hence it only knows about the 20 colors (and #000). I want to redo that 20-color palette using the MD colors, it'll mean the colors are a bit less "maximally distinguishable" but the current 2-palettes situation is no good. Since sparkline doesn't need umpteen distinguishable colors I should perhaps see whether I can easily switch it to the MD palette in the meantime...
Background on all this: Colors and themes - FlexDash
Thanks you for flagging it!

[Sineos]

I really love the concept of FlexDash. Many thanks for creating it and I'm really looking forward to it evolving.

I quickly created a ceiling fan control:

What I'm missing is a "comfortable" way to react to state changes, e.g. the change of the color and the light icon looks like this:

Some questions or feature requests:

1. Is there a way to scale / style the icon instead of the button?
2. Is there a color picker widget?

[tve]

Thanks for giving FlexDash a spin!

It looks like you would benefit from the ButtonBar, I really need to figure out how to finish that!

The button doesn't have a prop to scale or style the icon. I'm of two minds about how handle this: write super complex widgets that have 50 props and can everything, or keep widgets simple so users can easily make their own variant. I tend towards the latter but haven't given you the tools to do it yet.

There is no color picker widget, shouldn't be too hard to wrap the component into a widget. What would it show and output?

[Sineos]

@tve

It looks like you would benefit from the ButtonBar, I really need to figure out how to finish that!

This is exactly the beauty of your approach: Every other solution I tried, needs special widgets for everything. So if there is no "fan widget" with 3 speeds and light you are simply out of luck (unless you can code it yourself). Your combination of grids and panels is just brilliant.
What could take this concept one step further is some group concept:

• Create a group, e.g. fan-control
• Assign this group a property fan-speed
• Assign 3 buttons to this group
• Make button properties depending on group value

Could also be used to create "turn all lights on / off" etc.

@tve

I'm of two minds about how handle this: write super complex widgets that have 50 props and can everything, or keep widgets simple so users can easily make their own variant.

Maybe not necessarily mutually exclusive. The icon or other properties could take a JSON value, e.g.

{
   "icon": "mdi-fan-off",
   "size": 1,
   "color": "orange-darken-3",
   "horizontal_align": "middle",
   "vertical_align": "top"
}

Would be super flexible and easy to create programmatically, e.g. the currently active button could be a bit bigger and a different color. Anyone who does not need it, can simply assign the icon name as string.

@tve

There is no color picker widget, shouldn't be too hard to wrap the component into a widget. What would it show and output?

or simply analogous to the current NR color picker.
As return value the color according to the chosen notation:

• rgb
• hex
• hsl
• etc.

[Sineos]

Ok, I guess I'm really sold to FlexDash. I'm an official visualization idiot as either the vis is super flexible but I'm too stupid or to lazy learn it or the vis is following a philosophy that is incompatible to my way of thinking. Anyway it is is direly needed to increase the WAF and have an excuse why I need to work on it.
FlexDash on the contrary feels like home

@tve if you allow I just drop some unsorted ramblings as I move along.

Icons (again)

The screenshot above is how I would like to organize my general switches:

1. Icon showing the status
2. Name of the device / light
3. Switch to turn on and off

I "faked" this now with a button panel and a label but I'd really love to see the option to:

• Assign text / label to switch element either to left or right
• Assign an additional icon to it

If we keep label and switch separate, I'd be happy with an icon option for a label as well. It just doesn't look so elegant as it is clear that 2 different controls are used.

On / Off Label

The label of the toggle depends on the On Value / Off Value. These values again depend on the device used to switch.
An option to specify a different value would be great. Of course this could be worked around with a switch node, but I would prefer to keep the vis logic and flow logic as separate as possible.

This could be extended to not only allow boolean true and false but as well JSON, e.g.

Simple JSON

{
    "ON": "Hey I'm on",
    "OFF: "Hey I'm off"
}

This would also work well for mapping to different languages.

Slider

Some sort of slider is missing in the standard tool box.

Guess I better stop now to avoid you running away to be never seen again

[tve]

@Sineos

If we keep label and switch separate, I'd be happy with an icon option for a label as well. It just doesn't look so elegant as it is clear that 2 different controls are used.

If you look in the panel's config (the Node-RED config node) there's a "solid" checkbox. That removes the boundaries between the widgets so the whole thing looks like a big widget.

Overall, in my mind there's an open question, which is whether to go down the route of complex widgets vs. letting users customize the existing simple widgets, i.e., write their own widgets. I did see your prior note on this. I want to see how the "How to modify a widget" tutorial ends up looking like before making a decision and we ain't there yet...

@Sineos

The label of the toggle depends on the On Value / Off Value. These values again depend on the device used to switch.
An option to specify a different value would be great. Of course this could be worked around with a switch node, but I would prefer to keep the vis logic and flow logic as separate as possible.

Yup, same issue really...

@Sineos

Some sort of slider is missing in the standard tool box.

Yes. I hate sliders, that's why there's none But I'm not adverse to adding one.

@Sineos

Guess I better stop now to avoid you running away to be never seen again

No worries, I do appreciate all the feedback. Some of the stuff you mention would be easy to add, but I want to push the "customize a widget" front first. And in the coming days I won't have much time for FlexDash, unfortunately...

[Sineos]

Thanks for your thoughts and support. Appreciated!

@tve

Overall, in my mind there's an open question, which is whether to go down the route of complex widgets vs. letting users customize the existing simple widgets, i.e., write their own widgets. I did see your prior note on this. I want to see how the "How to modify a widget" tutorial ends up looking like before making a decision and we ain't there yet...

Fair enough.
At least for the "standard toolbox" (e.g. buttons, sliders, labels etc) I'm hoping for some middle-ground:

• Simple on the surface
• More flexibility / complexity hidden but still easily accessible
• No need for html or vue skills for the average Joe like myself

For people knowing their way around in such frameworks it might be easy to come to great results. There are already tools like the powerful UIBuilder but for me too complex for setting up a "quick" dashboard.

@tve

If you look in the panel's config (the Node-RED config node) there's a "solid" checkbox.

Little switch, big effect. Nice!

@tve

Yes. I hate sliders, that's why there's none But I'm not adverse to adding one.

TYVM

[cameo69]

@Sineos

I quickly created a ceiling fan control:

What I'm missing is a "comfortable" way to react to state changes, e.g. the change of the color and the light icon looks like this:

@Sineos, would you mind sharing the code of your example to import into node-red? Usually I tend to use a state machine for this sort of things. And since I am just started to try flexdash, I would like to give it a quick try...

[bakman2]

Why not tap the light icon directly to switch on/off ?

[Paul-Reed]

@Sineos

• Simple on the surface
• More flexibility / complexity hidden but still easily accessible
• No need for html or vue skills for the average Joe like myself

I was thinking pretty much the same as @Sineos.

Would the flexdash 'generator' allow additional options to be added via the flow, and not necessarily be exposed in the node prop UI? (only describe the option in the readme).

As an example, I've been looking at the fab option for the button node, leaving the node props UI as it is currently, with basic functions for new users, but allow users to add msg.fab = true to their flow to gain an additional option.

Just something that you may wish to consider....

[Sineos]

@cameo69

would you mind sharing the code of your example to import into node-red?

Sure, nothing too sophisticated:

[{"id":"bca6bae91813d1aa","type":"fd-push-button","z":"e9f02651.863e9","fd_container":"5c1d741e5f65137d","fd_cols":1,"fd_rows":1,"fd_array":false,"fd_array_max":10,"fd_output_topic":"sonoff.0.TM_iFan.FanSpeed","name":"Fan Off","title":"","popup_info":"","enabled":true,"color":"orange-darken-3","output_value":0,"icon":"mdi-fan-off","x":860,"y":320,"wires":[["ac878a335e2ecb46"]]},{"id":"cea9306ba0eace50","type":"fd-push-button","z":"e9f02651.863e9","fd_container":"5c1d741e5f65137d","fd_cols":1,"fd_rows":1,"fd_array":false,"fd_array_max":10,"fd_output_topic":"sonoff.0.TM_iFan.FanSpeed","name":"Fan Low","title":"","popup_info":"","enabled":true,"color":"","output_value":1,"icon":"mdi-fan-speed-1","x":860,"y":360,"wires":[["ac878a335e2ecb46"]]},{"id":"b51cacc5e04d1208","type":"fd-push-button","z":"e9f02651.863e9","fd_container":"5c1d741e5f65137d","fd_cols":1,"fd_rows":1,"fd_array":false,"fd_array_max":10,"fd_output_topic":"sonoff.0.TM_iFan.FanSpeed","name":"Fan Mid","title":"","popup_info":"","enabled":true,"color":"","output_value":2,"icon":"mdi-fan-speed-2","x":860,"y":400,"wires":[["ac878a335e2ecb46"]]},{"id":"afe465fab8e13774","type":"fd-push-button","z":"e9f02651.863e9","fd_container":"5c1d741e5f65137d","fd_cols":1,"fd_rows":1,"fd_array":false,"fd_array_max":10,"fd_output_topic":"sonoff.0.TM_iFan.FanSpeed","name":"Fan High","title":"","popup_info":"","enabled":true,"color":"","output_value":3,"icon":"mdi-fan-speed-3","x":860,"y":440,"wires":[["ac878a335e2ecb46"]]},{"id":"cf250720c9df8b32","type":"ioBroker in","z":"e9f02651.863e9","name":"TM_iFan  FanSpeed","topic":"sonoff.0.TM_iFan.FanSpeed","payloadType":"value","onlyack":"","func":"all","gap":"","fireOnStart":"false","outFormat":"ioBroker","x":330,"y":380,"wires":[["a442b8cdfb726438"]]},{"id":"a442b8cdfb726438","type":"switch","z":"e9f02651.863e9","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"str"},{"t":"eq","v":"1","vt":"str"},{"t":"eq","v":"2","vt":"str"},{"t":"eq","v":"3","vt":"str"}],"checkall":"true","repair":false,"outputs":4,"x":510,"y":380,"wires":[["e72c42c3b9e03e56","2759d10a4117f8f7"],["afda2ac61afe5ad9","a402cbc8e0641e6c"],["b40eddc8e629586a","2c47116dc868d9ca"],["4949cd9e9df935a1","fcc7be95202212ba"]]},{"id":"e72c42c3b9e03e56","type":"change","z":"e9f02651.863e9","name":"On","rules":[{"t":"set","p":"color","pt":"msg","to":"orange-darken-3","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":240,"wires":[["bca6bae91813d1aa"]]},{"id":"2759d10a4117f8f7","type":"change","z":"e9f02651.863e9","name":"Off","rules":[{"t":"set","p":"color","pt":"msg","to":"\"\"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":280,"wires":[["cea9306ba0eace50","b51cacc5e04d1208","afe465fab8e13774"]]},{"id":"afda2ac61afe5ad9","type":"change","z":"e9f02651.863e9","name":"On","rules":[{"t":"set","p":"color","pt":"msg","to":"orange-darken-3","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":320,"wires":[["cea9306ba0eace50"]]},{"id":"a402cbc8e0641e6c","type":"change","z":"e9f02651.863e9","name":"Off","rules":[{"t":"set","p":"color","pt":"msg","to":"\"\"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":360,"wires":[["bca6bae91813d1aa","b51cacc5e04d1208","afe465fab8e13774"]]},{"id":"b40eddc8e629586a","type":"change","z":"e9f02651.863e9","name":"On","rules":[{"t":"set","p":"color","pt":"msg","to":"orange-darken-3","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":400,"wires":[["b51cacc5e04d1208"]]},{"id":"2c47116dc868d9ca","type":"change","z":"e9f02651.863e9","name":"Off","rules":[{"t":"set","p":"color","pt":"msg","to":"\"\"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":440,"wires":[["bca6bae91813d1aa","cea9306ba0eace50","afe465fab8e13774"]]},{"id":"4949cd9e9df935a1","type":"change","z":"e9f02651.863e9","name":"On","rules":[{"t":"set","p":"color","pt":"msg","to":"orange-darken-3","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":480,"wires":[["afe465fab8e13774"]]},{"id":"fcc7be95202212ba","type":"change","z":"e9f02651.863e9","name":"Off","rules":[{"t":"set","p":"color","pt":"msg","to":"\"\"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":520,"wires":[["bca6bae91813d1aa","cea9306ba0eace50","b51cacc5e04d1208"]]},{"id":"ac878a335e2ecb46","type":"ioBroker out","z":"e9f02651.863e9","name":"","topic":"","ack":"false","autoCreate":"false","stateName":"","role":"","payloadType":"","readonly":"","stateUnit":"","stateMin":"","stateMax":"","x":1080,"y":380,"wires":[]},{"id":"a91afa954d56f722","type":"ioBroker in","z":"e9f02651.863e9","name":"TM_iFan  POWER1","topic":"sonoff.0.TM_iFan.POWER1","payloadType":"value","onlyack":"","func":"all","gap":"","fireOnStart":"false","outFormat":"ioBroker","x":330,"y":600,"wires":[["ba193cdb855dd540"]]},{"id":"8ca016effd213b5a","type":"ioBroker out","z":"e9f02651.863e9","name":"","topic":"","ack":"false","autoCreate":"false","stateName":"","role":"","payloadType":"","readonly":"","stateUnit":"","stateMin":"","stateMax":"","x":1080,"y":600,"wires":[]},{"id":"84af736ee075f753","type":"fd-push-button","z":"e9f02651.863e9","fd_container":"5c1d741e5f65137d","fd_cols":1,"fd_rows":1,"fd_array":false,"fd_array_max":10,"fd_output_topic":"sonoff.0.TM_iFan.POWER1","name":"Fan Light","title":"","popup_info":"","enabled":true,"color":"transparent","output_value":"TOGGLE","icon":"mdi-ceiling-fan-light","x":860,"y":600,"wires":[["8ca016effd213b5a"]]},{"id":"ba193cdb855dd540","type":"switch","z":"e9f02651.863e9","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"ON","vt":"str"},{"t":"eq","v":"OFF","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":490,"y":600,"wires":[["45ba608ee33403dc"],["71460080ee41bacc"]]},{"id":"45ba608ee33403dc","type":"change","z":"e9f02651.863e9","name":"On","rules":[{"t":"set","p":"color","pt":"msg","to":"yellow-lighten-3","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"mdi-ceiling-fan-light","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":580,"wires":[["84af736ee075f753"]]},{"id":"71460080ee41bacc","type":"change","z":"e9f02651.863e9","name":"Off","rules":[{"t":"set","p":"color","pt":"msg","to":"\"\"","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"mdi-ceiling-fan","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":620,"wires":[["84af736ee075f753"]]},{"id":"5c1d741e5f65137d","type":"flexdash container","name":"Wintergarden_Fan_Panel","kind":"Panel","fd_children":",84af736ee075f753,bca6bae91813d1aa,cea9306ba0eace50,b51cacc5e04d1208,afe465fab8e13774","title":"Fan","tab":"34c6194f6a8a6f6e","min_cols":"1","max_cols":"20","parent":"652315810a389430","solid":true,"cols":3,"rows":"1"},{"id":"34c6194f6a8a6f6e","type":"flexdash tab","name":"Wintergarden_Tab","icon":"mdi-view-dashboard","title":"Wintergarten","fd_children":",652315810a389430","fd":"e8f5aea52ab49500"},{"id":"652315810a389430","type":"flexdash container","name":"Wintergarden_Grid","kind":"StdGrid","fd_children":",5c1d741e5f65137d","title":"Wintergarten","tab":"34c6194f6a8a6f6e","min_cols":"1","max_cols":"20","parent":"","solid":false,"cols":"1","rows":"1"}

@bakman2

Why not tap the light icon directly to switch on/off ?

Well, simply a matter of taste.

@Paul-Reed

Would the flexdash 'generator' allow additional options to be added via the flow, and not necessarily be exposed in the node prop UI? (only describe the option in the readme).

Agree. I guess there are many possibilities for "advanced" options:

• Via msg injection
• JSON overload of existing props
• An "advanced" tab in the nodes' config dialogs, taking additional arguments, i.e. "General", "Widget Input Props", "Advanced". With advanced being just an empty text field to add additional properties etc. documented in the Readme

[cameo69]

@Sineos

Sure, nothing too sophisticated

True, and I completely did not get what you meant earlier.

Think I would set it up like this, easier to maintain...
(label is only to check value)

[{"id":"bca6bae91813d1aa","type":"fd-push-button","z":"eefad14c52d43430","fd_container":"5c1d741e5f65137d","fd_cols":1,"fd_rows":1,"fd_array":false,"fd_array_max":10,"fd_output_topic":"sonoff.0.TM_iFan.FanSpeed","name":"Fan Off","title":"","popup_info":"","enabled":true,"color":"orange-darken-3","output_value":0,"icon":"mdi-fan-off","x":640,"y":140,"wires":[["c90fa3ef24c0bf53"]]},{"id":"cea9306ba0eace50","type":"fd-push-button","z":"eefad14c52d43430","fd_container":"5c1d741e5f65137d","fd_cols":1,"fd_rows":1,"fd_array":false,"fd_array_max":10,"fd_output_topic":"sonoff.0.TM_iFan.FanSpeed","name":"Fan Low","title":"","popup_info":"","enabled":true,"color":"","output_value":1,"icon":"mdi-fan-speed-1","x":640,"y":180,"wires":[["c90fa3ef24c0bf53"]]},{"id":"b51cacc5e04d1208","type":"fd-push-button","z":"eefad14c52d43430","fd_container":"5c1d741e5f65137d","fd_cols":1,"fd_rows":1,"fd_array":false,"fd_array_max":10,"fd_output_topic":"sonoff.0.TM_iFan.FanSpeed","name":"Fan Mid","title":"","popup_info":"","enabled":true,"color":"","output_value":2,"icon":"mdi-fan-speed-2","x":640,"y":220,"wires":[["c90fa3ef24c0bf53"]]},{"id":"afe465fab8e13774","type":"fd-push-button","z":"eefad14c52d43430","fd_container":"5c1d741e5f65137d","fd_cols":1,"fd_rows":1,"fd_array":false,"fd_array_max":10,"fd_output_topic":"sonoff.0.TM_iFan.FanSpeed","name":"Fan High","title":"","popup_info":"","enabled":true,"color":"","output_value":3,"icon":"mdi-fan-speed-3","x":640,"y":260,"wires":[["c90fa3ef24c0bf53"]]},{"id":"6c1a07863abc7bdd","type":"debug","z":"eefad14c52d43430","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":890,"y":240,"wires":[]},{"id":"1fe569d8aae2716f","type":"fd-label","z":"eefad14c52d43430","fd_container":"5c1d741e5f65137d","fd_cols":1,"fd_rows":1,"fd_array":false,"fd_array_max":10,"name":"","title":"Label","popup_info":"","label":null,"color":"","align":"center","justify":"center","weight":"400","size":"100%","padding":"4px","x":1070,"y":200,"wires":[]},{"id":"dc29e9846c741e36","type":"change","z":"eefad14c52d43430","name":"","rules":[{"t":"set","p":"title","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":900,"y":200,"wires":[["1fe569d8aae2716f"]]},{"id":"fa5d287e31532252","type":"switch","z":"eefad14c52d43430","name":"distr off","property":"button","propertyType":"msg","rules":[{"t":"neq","v":"0","vt":"str"},{"t":"neq","v":"1","vt":"str"},{"t":"neq","v":"2","vt":"str"},{"t":"neq","v":"3","vt":"str"}],"checkall":"true","repair":false,"outputs":4,"x":440,"y":160,"wires":[["bca6bae91813d1aa"],["cea9306ba0eace50"],["b51cacc5e04d1208"],["afe465fab8e13774"]]},{"id":"0d8c51f854e6b3ea","type":"change","z":"eefad14c52d43430","name":"set off","rules":[{"t":"set","p":"button","pt":"msg","to":"payload","tot":"msg"},{"t":"set","p":"color","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":290,"y":180,"wires":[["fa5d287e31532252"]]},{"id":"be97f1a0adbecbdc","type":"change","z":"eefad14c52d43430","name":"set on","rules":[{"t":"set","p":"button","pt":"msg","to":"payload","tot":"msg"},{"t":"set","p":"color","pt":"msg","to":"orange-darken-3","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":290,"y":220,"wires":[["927d533e1789556e"]]},{"id":"927d533e1789556e","type":"switch","z":"eefad14c52d43430","name":"distr on","property":"button","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"str"},{"t":"eq","v":"1","vt":"str"},{"t":"eq","v":"2","vt":"str"},{"t":"eq","v":"3","vt":"str"}],"checkall":"true","repair":false,"outputs":4,"x":440,"y":240,"wires":[["bca6bae91813d1aa"],["cea9306ba0eace50"],["b51cacc5e04d1208"],["afe465fab8e13774"]]},{"id":"cd8cb1b98e7345f6","type":"link out","z":"eefad14c52d43430","name":"link out 11","mode":"link","links":["1863099925b0a6cf"],"x":835,"y":160,"wires":[]},{"id":"1863099925b0a6cf","type":"link in","z":"eefad14c52d43430","name":"link in 8","links":["cd8cb1b98e7345f6"],"x":185,"y":200,"wires":[["0d8c51f854e6b3ea","be97f1a0adbecbdc"]]},{"id":"c90fa3ef24c0bf53","type":"junction","z":"eefad14c52d43430","x":780,"y":160,"wires":[["cd8cb1b98e7345f6","dc29e9846c741e36","6c1a07863abc7bdd"]]},{"id":"5c1d741e5f65137d","type":"flexdash container","name":"Wintergarden_Fan_Panel","kind":"Panel","fd_children":",84af736ee075f753,bca6bae91813d1aa,cea9306ba0eace50,b51cacc5e04d1208,afe465fab8e13774,1fe569d8aae2716f","title":"Fan","tab":"34c6194f6a8a6f6e","min_cols":"1","max_cols":"20","parent":"652315810a389430","solid":true,"cols":3,"rows":"1"},{"id":"34c6194f6a8a6f6e","type":"flexdash tab","name":"Wintergarden_Tab","icon":"mdi-view-dashboard","title":"Wintergarten","fd_children":",652315810a389430","fd":"e8f5aea52ab49500"},{"id":"652315810a389430","type":"flexdash container","name":"Wintergarden_Grid","kind":"StdGrid","fd_children":",5c1d741e5f65137d","title":"Wintergarten","tab":"34c6194f6a8a6f6e","min_cols":"1","max_cols":"20","parent":"","solid":false,"cols":"1","rows":"1"}]

[cameo69]

Hi @tve, hi all,
I played around a bit with the time chart and have issues with the dates shown.

Setup:

Flow:
flows.json (57.7 KB) <-- (attached as a file due to size)

Issue:
The data I use looks like this on classical dashboard.

When the sample chart is shown (data taken from "DEMO-ALL"), the x-axis (time) looks good.

When I show the "SOME TEMPS" chart, x-axis is totally messed up.

I have no idea if I load wrong data or if there is a bug... maybe you can check?

One more thing, on my machine the "SOME TEMPS" chart loads without, but the "SAMPLE PLOT" needs reload of the flexdash website.

[Paul-Reed]

@cameo69 Please read this post about how to post flows in the forum - How to share code or flow json

If you could then edit your post above, and repost your flow in the correct format, it would help other users to help you with your issue.

Thanks.

[cameo69]

I think I did post in the correct format as written in this thread.

How to share code or flow json

Also, larger flows can now be saved as a txt or json file and uploaded directly to the post. Paul

Inline is not possible:

[tve]

@cameo69

When I show the "SOME TEMPS" chart, x-axis is totally messed up.

Quick question: is the time data in your plot using unix timestamps, i.e. seconds since 1970, not javascript timestamps, which is milliseconds?

From the node's help:

The data must be input in the form of "data points" where a data point is an array consisting of a unix timestamp (seconds since 1970-01-01) followed by a value per series. Null values are OK to designate missing data.

[cameo69]

@tve

Quick question: is the time data in your plot using unix timestamps, i.e. seconds since 1970, not javascript timestamps, which is milliseconds?

Well, was using JSONata's $toMillis().
Added /1000 (JSONata Playground - Get familiar with the JSONata language) and now it looks better...

[cameo69]

Do you also have an easy explanation, why

@cameo69

on my machine the "SOME TEMPS" chart loads without, but the "SAMPLE PLOT" needs reload of the flexdash website.

like this:

Is there a command to repaint?

Also, I did not find a way to reorder the top level (tabs?).
In above gif, how would I get "TEST CHART" to the left, before "TAB TITLE EDITED"?