✨ FlexDash alpha release - round 3

The FlexDash 'round 2' thread has gotten to 145 posts so I thought it's time to start a fresh thread. I put it into the Dashboard category, hope that's OK.

New release!

21 Dec 16:43:03 - [info] Node-RED FlexDash plugin version 0.4.129                 
21 Dec 16:43:04 - [info] Node-RED FlexDash version 0.4.129                        
21 Dec 16:43:04 - [info] Node-RED FD Core Widgets version 0.4.60                  
21 Dec 16:43:06 - [info] FlexDash UI version 0.4.79                               

Note that the node-red-fd-corewidgets package is updated and that you will have to reload any open browser pages for them to reconnect.

Breaking changes:

  • The FD Ctrl node message format to open pop-up grids has changed, see below and the 'help' for that node.
  • Grids default to disallow messages with _fd_socket (see below) and existing flows may well circulate messages without removing _fd_socket with the result that actions taken in the dashboard don't work or the feedback doesn't work. Either delete msg._fd_socket in the affected messages or set the grid to allow _fd_socket in their general tab. (I'm planning to change "disallow" to "ignore" in the next release. [Edit: change has been made])

Enhancements and changes:

  • msg._fd_socket is now fully supported: all messages coming from FD have it and sending messages to FD respects it, i.e., messages without _fd_socket are broadcast to all connected browsers (and change the saved state for new browsers) while messages with _fd_socket only target one browser.
  • Grids have a setting to disallow, allow, or require msg._fd_socket. By default it's disallow: this provides a bit of a safety net in that it raises an error if some stray message has _fd_socket, while require can enforce the opposite and error on messages that don't have it for a grid that should only have per-browser data.
  • The scaling of grids has changed to fix the issue with on-hover tooltips appearing in the wrong place in uPlot. This is only visible when setting max_cols or min_cols.
  • The TimelinePlot widget now supports clicking. It produces an output message with the time, row, and value clicked. Also, the printing of values into the bar now omits values that don't fit into the space to avoid an illegible black smear when the value changes frequently.
  • The FD Ctrl node now outputs messages when:
    • browsers connect or the connection times out,
    • the browser tab is hidden and exposed (so one can avoid streaming data to tabs that can't be seen by anyone),
    • users navigate from one tab to another, and
    • grids are opened/closed (incl. pop-up grid closing).
      Details are in the 'help' for that node.
  • The FD Ctrl node now accepts input messages to open (change) tabs, and to open/close grids/pop-up grids.

New issues

  • The FD Ctrl events emitted when a browser connects are not quite right: the 'exposed' event is missing the tab info and a 'manual tab change' event is issued that shouldn't be.
  • The FD Ctrl "client timeout" events may not be issued in a timely manner, its behavior is likely to change in future releases.
  • Widget arrays and per-browser data (i.e. use of _fd_socket) create some awkward corner cases, in particular, deleting a widget in an array is always a global operation.
  • The internal loopback is always global, so if an input element is shown with per-browser data and needs loopback that must be implemented explicitly (e.g. using a junction node).
  • Custom widget: it is not possible to receive and draw the title in the custom widget, specifically, the title set in the flow editor and msg.title are always handled by FlexDash. To display a custom title, set that title to empty (so FLexDash doesn't draw a title) and then use a property named something else (e.g. msg.thetitle).
  • Documentation is falling a little behind, oops!

Known issues / to-do items

(This list is copied and updated from the "round 2" thread. :stop_sign: flags must-do items prior to beta release.)

  • Remove live editing of config from dashboard and do everything in the NR flow editor. :stop_sign: This subsumes/eliminates the following to-do items:
    • Option to hide edit mode
    • Rethink editing in live dashboard: could reordering/resizing be done nicely without?
    • Implement UI to reorder grids on a page
    • Triple-check implementation of "node is truly deleted" in node-red-flexdash and actually delete references
    • Edits in the live dashboard get lost if a related edit panel is open in the flow editor and is subsequently saved
  • Plots:
    • The mechanism to send data updates needs to change to allow sending the same value repeatedly and also so a browser reload shows all the data even when the flow only produces one data point at a time.
    • TimePlot is blank if both axes are used and the data for one of the axes is all null (prob. uPlot bug)
    • When there are many time plots on a page the tooltip can appear in the wrong plot (needs clean repro)
    • TimePlot: remove circles for data points when there are few points
    • TimelinePlot: look into supporting multi-line labels
    • Maximized plots that have no title end up w/out close button (needs repro)
    • Use material design color palette for graphs to unify color names
    • Fix incremental data sending in Sparkline widget.
  • Tables:
    • Allow tables to be magnified full-page
    • Implement a search in SimpleTable
  • Roll NumberField functionality into Stat widget and perhaps TextField into Label. :stop_sign:
  • Button: look into 100% width option as well as FAB support
  • Remember theme in session cookie
  • Support simple login
  • Implement checks for unsupported combinations: non-global tabs/dashboards, panels in panels, grids in subflows, nested subflows, array-widgets in array-panels, array/subflow combinations
  • Implement array_max in array-widgets

As usual, please let me know asap if there are issues with the release.
If you'd like help with your specific use-case, please open a new thread and @tve or apply the flexdash tag.

4 Likes

I'm probably misunderstanding the previous comments regarding _fd_socket but...
...just updated, restarted node-RED, refreshed browsers & hit a problem;

22 Dec 20:39:37 - [info] Node-RED FlexDash plugin version 0.4.129
22 Dec 20:39:40 - [info] Node-RED FlexDash version 0.4.129
22 Dec 20:39:40 - [info] Node-RED FD Core Widgets version 0.4.60

Opened the grid config and ensured that _fd_socket is set to disallow

disallow

Then tried to activate the buttons, but they no longer work

buttons

On each depression, I get the warning;
"incoming message discarded: _fd_socket is disallowed for grid Examples grid"

Do I still have to delete the msg._fd_socket in the flow?

1 Like

Yes, it's "disallow" not "ignore"... Maybe it should be?

Also remember the loopback option in the general tab...

1 Like

Maybe if it's the default setting, 'ignore' could be more forgiving for users?

I don't want to use loopback in the general tab, because the status (colour change) only occurs when a msg is fed back from the remote device confirming that it's status has actually changed.

1 Like

I added a note to the breaking changes in the release post above and I'll change to "ignore". The only disadvantage of ignore is that it doesn't make sense to emit a warning (due to flooding with warnings), so users that want to use _fd_socket and forget the toggle in the grid will be left wondering.

The std dashboard also requires deletion of the msg._socketid field, doesn't it?

Not sure what you mean by std dashboard.
I'm only deleting it for that particular grid.

The standard "old" Node-RED dashboard node-red-dashboard

The 'old' ui_dashboard was predominantly single user, and msg._socketid, as far as I'm aware was never used by users, or had to be deleted in 'user flows'. Certainly not by me anyway!

I'm using Time Plot Raw to draw a chart that has a small number of data points, and yes I also got circles.
However, by adding series.points.show: false in opts, they are hidden (unless hovered over)

"points": {
      "show": false
      }

I know that TimePlot is also using uPlot, so maybe this would help.

circles

[{"id":"e7854fe8f5e48278","type":"change","z":"1543d308b342690a","name":"Config","rules":[{"t":"set","p":"options","pt":"msg","to":"{\"series\":[{},{\"label\":\"no circles\",\"stroke\":\"red\",\"width\":2,\"value\":\"v.toFixed(1)\",\"scale\":\"test\",\"points\":{\"show\":false}},{\"label\":\"circles\",\"stroke\":\"green\",\"width\":2,\"value\":\"v.toFixed(1)\",\"scale\":\"test\"}],\"axes\":[{},{\"scale\":\"test\",\"label\":\"Test data\",\"side\":1,\"values\":\"vv.map(v=>v&&(v.toFixed(1)))\",\"grid\":{\"show\":true}}],\"ticks\":{\"show\":true,\"stroke\":\"#eee\",\"width\":2,\"dash\":[],\"size\":10}}","tot":"json"},{"t":"set","p":"title","pt":"msg","to":"Circles - No Circles","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":285,"y":1930,"wires":[["947352818be9dc16"]]},{"id":"cb20d540ef33f62f","type":"inject","z":"1543d308b342690a","name":"Data","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"[[1671843600,3,2],[1671844600,4,3],[1671845600,3,5],[1671846600,4,3],[1671847600,3,2]]","payloadType":"json","x":160,"y":1930,"wires":[["e7854fe8f5e48278"]]},{"id":"947352818be9dc16","type":"fd-time-plot-raw","z":"1543d308b342690a","fd_container":"2fa703121bdc84d2","fd_cols":"4","fd_rows":"2","fd_array":false,"fd_array_max":10,"name":"No circles","title":"","popup_info":"","options":"","data":null,"x":415,"y":1930,"wires":[]},{"id":"2fa703121bdc84d2","type":"flexdash container","name":"Examples grid","kind":"StdGrid","fd_children":",dc6f6a921f8e0373,947352818be9dc16","title":"Examples","tab":"6dfcd673f5649409","min_cols":"1","max_cols":"20","unicast":"disallow","parent":"","solid":false,"cols":"1","rows":"1"},{"id":"6dfcd673f5649409","type":"flexdash tab","name":"Examples","icon":"mdi-view-dashboard","title":"Example flows","fd_children":",2fa703121bdc84d2","fd":"e8f5aea52ab49500"}]
1 Like

The "old dashboard" used the socket_id to only send certain messages back to the selected ui. For example you may not want an alert to go to all screens (especially if the user then has to cancel it). But it was never intended to facilitate making the dashboard multi-user. The basic concept being that there is only one flow running and the server can only have one state - so anything that could be physical like a switch only had one position... so if one user changed it - then it was changed for all users - so in that case all UIs should update. (espcially true when switching main on and off). However there are "softer" elements of the UI - eg like which tab a screen is viewing - or which group to show/hide/enable/disable that could be considered to be "per browser client" and so need to interact independently of each other.

So this is possibly true here also... if it is not truly multi-user - ie there is only one flow/state - then the same question will arise when you have more than one client viewing the dashboard.

1 Like

Ah, thanks for the reminder. Yes, that's different from FlexDash.

I think at this point FD is pretty close to "truly multi-user". By default it is not at all and behaves in the "global/physical" manner you describe. But you can work your flow and the config such that every user sees different data.

so how do you handle things like a mains relay ? If one user says turn on and and another says turn off ?

1 Like

The flows don't somehow magically become multi-user or fire up 3D printers to make clones of the real world... :joy:
If you're displaying the state of a relay and showing an on/off button then you'd want the related messages to all have no msg._fd_socket so they're global. (The default setting is to ignore msg._fd_socket so global is the default outcome.)

But suppose you have 20 relays and you have a button next to each one to "see details" and that pops-up a timeline that shows the on/off state over time, then you'd want each viewer to have their own pop-up, right?
And then further, you may want a button bar in that pop-up to switch the time-frame so you can see the timeline per day/week/month/..., so you want to be able to do some interesting stuff back and forth between dashboard and flow (not just a custom widget that has a pop-up built-in). This is what FlexDash enables.

:saluting_face::+1: that’s clear

Xmas Release

25 Dec 12:05:13 - [info] Node-RED FlexDash plugin version 0.4.131                 
25 Dec 12:05:14 - [info] Node-RED FlexDash version 0.4.131                        
25 Dec 12:05:14 - [info] Node-RED FD Core Widgets version 0.4.61                  
25 Dec 12:05:16 - [info] FlexDash UI version 0.4.82                               

Changes

  • CustomWidgets: The method for importing dependencies has been rewritten for the umpteenth time. It now uses import maps and the FD Custom node allows import sources to be specified. Pretty powerful stuff and this time there are no more hacks in the process: yay!

  • TimePlot, TimePlotRaw, WindPlot: the handling of incremental plot updates (i.e. sending points incrementally as opposed to the whole data set in one go) has been moved into the Node-RED nodes. (I just noticed that I forgot to do the same for Sparkline, oops.)

  • TimePlot, TimePlotRaw, WindPlot: sending a null or [] message payload now properly clear the plot.

  • URL hash-based navigation: when navigating between tabs the URL will now show something like https://example.com/flexdash/#2 where the #2 refers to the second tab. This means that page reloads, bookmarks, pasted links go straight to the correct tab. In addition, it is possible to go straight to a pop-up grid with a URL like ...#2/3. The grid designator may be the node-red ID of the corresponding node, the sequential number in the tab, or the title of the grid. The grid-level nav is experimental and subject to change...

  • BarPlot: A Bar chart Custom Widget is available over in the Flexdash Bar Chart topic. It's pretty simple, but I hope to make it into a std widget. Most importantly, a uPlot bar chart plugin is now included in FlexDash. (That thread also has long posts about using Echarts with FlexDash...)

Issues

Hopefully no new ones, see the first thread in this topic for the list.

2 Likes

The Xmas release had a problem where uPlot tooltips are offset and the legend is not clickable. Fixed:

26 Dec 10:32:33 - [info] Node-RED FlexDash plugin version 0.4.132
26 Dec 10:32:35 - [info] Node-RED FlexDash version 0.4.132
26 Dec 10:32:35 - [info] Node-RED FD Core Widgets version 0.4.61
26 Dec 10:32:37 - [info] FlexDash UI version 0.4.83
1 Like

All good now :grinning:

1 Like

I ran into some issues with flexdash uninstall and re-install, but got solved.
Now i have installed fresh but i still find issue in the tooltips offset. but legend is now clickable
there are only two changes that show on the tooltip for entire graph at the center of graph.

timeplot1

image

Have you cleared your browser cache?
Tried a different browser?
What browser are you using?

image

Even after completely clearing cache, it still is persisting (tooltip offset)

Problem is there is MS Edge also.

Edit:

I can now also see that the tooltip that shows is only two points across the graph. and they are exactly the first point and the last point in the graph ant they change from one to other at exactly half way when curser moves