🎇 FlexDash alpha release - round 2

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

4 Likes

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....

but

2 Likes

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"}

Well, simply a matter of taste.

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
1 Like

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

output_buttons

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"}]
1 Like

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.
image

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.

1 Like

@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.

2 Likes

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

Inline is not possible:

3 Likes

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.

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

1 Like

Do you also have an easy explanation, why

like this:
output_buttons

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"?

There is no repaint. I have not seen any issues WRT stuff not drawing... I have not tried your specific flow.

To reorder tabs:

  • enable edit mode in the top-right gear menu in FD
  • click on the pencil icon on the tab (icon) you want to move
  • use the left/right arrow buttons
  • when done, hit 'deploy' in the NR flow editor to persist the changes

That worked.

Where is the information stored? Is it persistent? Is it a cookie?

1 Like

I assume you're talking about the tab order: all dashboard configuration is stored in the flow, in this case each tab is a config node and the order of tabs is stored in the dashboard config node (type fd_dashboard).

I'm developing some logic for controlling garden lighting, which so far is working OK.
The buttons toggle their state, and the button colour changes only occur when feedback from the hardware confirms it's actually changed it's state (that's why there is a slight delay).

The only downside is that the buttons are not the same width because of their wordcount. Anyone any ideas how to create buttons of the same width.

Also... noticed that the panel which contains the buttons reacts to mouseover, should it?

buttons2

I haven't had any time to digg into FlexDash CSS and I have no clue how it is built up. Other than that I'm not sure about the CSS is meant to be overrided. From top of my head I kind of remember that correct path is to create kind of replica of the widget and do your stuff on top of it.
But that's only me with tiny knowledge base of topic

1 Like

I just had a good laugh imagining that all the lights are going on and off while you made the demo :joy:

1 Like

For me in Chrome it does not.

Version 105.0.5195.125 (Official Build) (x86_64)

output_buttons4

Albeit I cannot solve @Paul-Reed's question above, I would like to add some observation I made while playing with the buttons.

Setup:

and array of buttons[] is setup like this

Flow:

[{"id":"94ced6cd1748e170","type":"inject","z":"95e238910d29e0c2","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":130,"y":60,"wires":[["f6032f8e6e47b319"]]},{"id":"8dbebc965a0f1df2","type":"inject","z":"95e238910d29e0c2","name":"","props":[{"p":"topic","v":"","vt":"date"},{"p":"title","v":"","vt":"date"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":130,"y":160,"wires":[["75961e82d73d9aec"]]},{"id":"137570977409ef12","type":"debug","z":"95e238910d29e0c2","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"topic","targetType":"msg","statusVal":"","statusType":"auto","x":540,"y":100,"wires":[]},{"id":"adb7eae63154ed82","type":"change","z":"95e238910d29e0c2","name":"","rules":[{"t":"set","p":"label","pt":"msg","to":"topic","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":160,"wires":[["9408f7f8ce7a7483"]]},{"id":"04cee7036bd6529e","type":"change","z":"95e238910d29e0c2","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"","tot":"date"},{"t":"set","p":"title","pt":"msg","to":"","tot":"date"}],"action":"","property":"","from":"","to":"","reg":false,"x":310,"y":100,"wires":[["137570977409ef12","75961e82d73d9aec"]]},{"id":"f6032f8e6e47b319","type":"fd-date-time","z":"95e238910d29e0c2","fd_container":"2e1077589627ac5c","fd_cols":"2","fd_rows":1,"fd_array":false,"fd_array_max":10,"name":"","title":"Flow started at","popup_info":"","value":"","color":"","start_mode":0,"zoom":100,"low_threshold":null,"low_color":"blue","high_threshold":null,"high_color":"pink","chip":false,"units":["now","sec","min","hr","days","weeks","months"],"x":300,"y":60,"wires":[]},{"id":"9408f7f8ce7a7483","type":"fd-label","z":"95e238910d29e0c2","fd_container":"16ba1ce3418bf289","fd_cols":1,"fd_rows":1,"fd_array":false,"fd_array_max":10,"name":"","title":"","popup_info":"","label":"banane","color":"purple-accent-3","align":"center","justify":"center","weight":"400","size":"100%","padding":"4px","x":650,"y":160,"wires":[]},{"id":"3cb0ab8809391dd3","type":"fd-push-button","z":"95e238910d29e0c2","fd_container":"16ba1ce3418bf289","fd_cols":"2","fd_rows":1,"fd_array":false,"fd_array_max":10,"fd_output_topic":"","name":"","title":"add new button","popup_info":"","enabled":true,"color":"","output_value":25,"icon":null,"x":110,"y":100,"wires":[["04cee7036bd6529e"]]},{"id":"75961e82d73d9aec","type":"fd-push-button","z":"95e238910d29e0c2","fd_container":"6d69e6adc0fd0416","fd_cols":1,"fd_rows":1,"fd_array":true,"fd_array_max":"5","fd_output_topic":"bix","name":"array of buttons","title":"button1","popup_info":"","enabled":true,"color":"","output_value":25,"icon":null,"x":310,"y":160,"wires":[["adb7eae63154ed82"]]},{"id":"2e1077589627ac5c","type":"flexdash container","name":"Demo grid","kind":"StdGrid","fd_children":",f6032f8e6e47b319","title":"Demo grid","tab":"5671049acbf17679","min_cols":2,"max_cols":6,"parent":"","solid":false,"cols":"1","rows":"1"},{"id":"16ba1ce3418bf289","type":"flexdash container","name":"button static container","kind":"StdGrid","fd_children":",9408f7f8ce7a7483,3cb0ab8809391dd3","title":"button static container","tab":"5671049acbf17679","min_cols":"1","max_cols":"20","parent":"2e1077589627ac5c","solid":false,"cols":"1","rows":"1"},{"id":"6d69e6adc0fd0416","type":"flexdash container","name":"button container","kind":"StdGrid","fd_children":",75961e82d73d9aec","title":"button container","tab":"5671049acbf17679","min_cols":"1","max_cols":"20","parent":"","solid":false,"cols":"1","rows":"1"},{"id":"5671049acbf17679","type":"flexdash tab","name":"Demo","icon":"mdi-view-dashboard","title":"Demo","fd_children":",2e1077589627ac5c,16ba1ce3418bf289,6d69e6adc0fd0416","fd":"e8f5aea52ab49500"}]

Issue:
If I understand correctly, the limit of "Max widgets" should limit the array to 5 buttons.
Upon restart of node-red it looks normal. The array of buttons[] is empty, hence no button shown.
But then every click on the button ADD NEW BUTTON creates an additional button within the array and the limit of 5 is not enforced.

output_buttons3

Bonus question:
How can I empty the array of buttons except by restarting node-red?

Nope. Please live with it 'til there are more options for customization...

No it shouldn't, it's a bug I forgot to fix. Fortunately it's only cosmetic.

Bug.

https://flexdash.github.io/docs/using-flexdash/array-widgets/#deleting-array-elements

I've been wanting to add a message to delete-all but I'm not sure how to encode that...

2 Likes

This topic needs further exploration, prob best once Vuetify is released and has proper docs... IMHO the right way to do this type of stuff is to support fall through attributes in such a way that you can add arbitrary attributes to a FD node (e.g. in the general tab) and they "fall through" to the appropriate Vuetify or other main component. In addition, one of Vue's special attributes is style which would allow you to add CSS to some element.

All this needs some research and thinking so the end result is not a complete hodge-podge...