Ok, light bulb went on: the grid in the panel is half-size in width. You want the 4 widgets one below the other. You need to make them 2-wide, then they match the 1-wide panel. If you expand the help for the panel (click on "more..." in flexdash) it says "The panel widget contains a half-sized grid ..." as a reminder. When you place widgets into a panel in the FD UI it becomes immediately obvious if you forgot, but when adding all at once in NR it's not... Pondering...
If you paste something and warn me that there are non-std nodes that's OK, I'll deal with it...
Edit: so just to clarify, the grid is half-sized, the widgets don't fit, so you get the weird 2/3 + 1/3 layout with really a portion of the second widget hidden.
I know the layout stuff is not obvious. I tried to use as little CSS and magic as I could and some of the odd stuff (like the half-sized grid in panels) is there because I tried to do something and couldn't and then tried to come up with the smallest/simplest change to enable it. I just want to avoid having a 1000 magic grid layout component that no-one can understand or troubleshoot.
I'm also happy to work with anyone who would like to add a grid or panel that does layout differently (as long as it's something generic and that adds fundamentally different layout options). The code is semi-prepared for that, it's not trivial but not a mess either. I'd like to add a grid that uses the conventional 12-column layout convention and maps the rows/cols of widgets into that...
One last question... how is the widget order changed in a panel?
The top pencil icon (which I circled, changes the order of the panel), whilst the others seem disabled?
For those that read docs I'm adding this section at the top of the grid and panel layout page (not pushed yet):
Tl;dr;
Grids
Have a variable number of columns to fill the page, column width is 120px min.
Column count can be limited using min-cols and max-cols.
The number of columns is at least the number of columns of the widest widget.
Rows are fixed-height 78px.
Widgets are placed into columns left to right and then flow to the next row if they don't fit.
Widgets can "float up" if there is a gap in the grid, so small widgets late in the layout can
move earlier to fill gaps.
If the grid reaches max-cols and doesn't fill the width of the window then it is magnified by
up to 1.33x. If it still doesn't fill the window it is left-aligned.
If the grid is at min-cols (or the width of the widest widget) and the window is narrower then
the grid is scaled down to up to 0.8x. If it still doesn't fit, some widgets go off-screen.
Panels
Have a variable number of rows and fixed number of columns.
The columns are half the size of the grid's columns!
The rows are variable height: they have the minimum height of the tallest widget in the row, and
then any remaining space is distributed evenly across all rows.
I just fixed the panel edit button, which overlaps the widget edit button, but this is not released yet. Please temporarily add a title to the panel so you can clearly see the two buttons.
WRT the widget buttons not working, that's a bug, you need to close the panel edit pop-up and possibly resize the window a bit. The overlay (pop-up) stuff in Vuetify is still not fixed, so positioning is sometimes ... odd. I also don't have code to close one pop-up when you open another, I need to figure out what a clean way to do that is.
I'm building this to mainly display energy data on my phone, and pleased with the results so far, as it renders nicely for my laptop also
For those who haven't yet tried Flexdash, clicking the legend names along the bottom of the chart hides/shows that series from the view, so the remaining series can be easily seen.
Selecting the 2 arrows (top right of chart) opens the chart full width view.
If viewed on a non-mobile screen, it's possible to click-drag and zoom into areas of the chart.
A lot of the other options are configurable, such as pre-defining line colours, line width etc. and using node context, the chart remains fully populated between browser sessions.
@tve I am not sure I understand how to configure the Time widgets. The sample seem to be statically linked and hitting the Inject button does nothing.
I tried different combinations. I am sure I am missing something.
I deleted everything and started from scratch. The question is how to configure the Timeseries widgets ? also why there are two different widgets for Timeseries , both use different libraries from what I understood.
Can you please share a sample flow with only time series widgets or provide some details on how to configure it ?
The time-wind example broke and I didn't check, bad on me. It is supposed to update the plots every 2 seconds. To make the 'Waves' plot in the example (and probably your tests) work, edit the widget in FlexDash and put a number in left max and left min, then erase the numbers. These inputs don't use typedInput and my last round of input handling changes in NR do the wrong thing if they're unset or at least don't handle the way the example was exported.
The wind plot seems to have a similar breakage but I don't quite understand why. The X axis goes out to 2025 even though the data it's fed is OK. Briefly setting the data input to some value in the FD edit panel fixes the plot, so there must be some condition where I'm not re-initializing uPlot or it doesn't do the right thing...
Did the help text not work for you? The TimePlot widget says:
TimePlot uses the TimePlotRaw widget to render a time-series plot and generates
the uPlot options based on a set of relatively simple inputs. If you need to switch to
TimePlotRaw for the full uPlot flexibility you can use the widget output to see the options
it constructs as a starting point.
And TimePlotRaw says:
For an easier way to use uPlot see the TimePlot widget.
What should the help say to make it more clear that the TimePlotRaw expects the raw uPlot options and is more tricky/cumbersome to use then TimePlot, which has easier to use props?
to be frank, I read both help texts twice and originally thought they both use uPlot but then I realised each one has a different library therefore my question. I am not familiar with uPlot myself, there are way too many charting libraries out there now for me to count! Both the simple Timeseries widget and the TimePlot Raw widgets did not work for me and that's why I am thinking I must be doing something wrong ! appreciate that you have put effort to document things too for us thank you!
This is what I referred to, I tried it but it does not seem to emit any output with options.
will try that
I actually thought the help is refering to some other widget not to itself .. anyway I think will once the different widgets/nodes are used in examples it will become clearer.
In one of the description texts for data , it says to change use msg[data] , however the actual example you have does not have msg[data] and somehow it was still working as it seems because the inject node only had payload. so does it expect payload or expect data ?
TimePlot uses TimePlotRaw which uses uPlot. TimelinePlot also uses TimePlotRaw. I'll see what I can add to the help...
Paul mentioned this as well, it's an oversight I need to fix. You can get the uPlot options from the web browser console in the meantime. Or maybe I should just document that, it's not like it's something one needs often or needs to end up in NR.
Either. I have not released a version with the switch to using msg.payload exclusively, I'm still testing that to make sure I don't break flows in the process.
Thanks for the feedback!
Edit: I'm changing the TimePlot help to:
TimePlot is a wrapper around the TimePlotRaw widget to make the configuration of typical
time-series plots easier than using the raw uPlot options, which TimePlotRaw expects.
and at the end:
TimePlot outputs the uPlot options it constructs to the browser console.
This can be handy as a starting point if you need to switch to TimePlotRaw to get
the full uPlot flexibility.
Hi Thorsten
I am trying to write a widget with html selection item in Node-Red editor.
Inside the folder of resources for customized widget, here is my example code below:
The problem is:
How can I create a html select item in the Node-red's edit page from the widget ?
For example, inside the line 3 can I change from "class=fd-typed-input" to "class=fd-typed-select" ?
I'm afraid that what you're trying to do is a bit beyond what is "supported" right now... In the big scheme of things definitely possible but we need to build up to that one step at a time.
Could you describe what you want to do overall? Then I can perhaps help by suggesting smaller steps to get there?
In particular, at this point I would recommend building a 2-node solution: an auto-generated widget node (like all the current ones in corewidgets) and a custom node in front of that to transform the inputs and do anything custom you may want to do. I know it's not pretty or sleek, but it would be a first step that uses "known technology" to create a first version. Once that is working I may have more infrastructure ready for version 2...
Thanks for prompt response.
The scenario for me is to make user able to manage their own task list and sequence inside Node-Red flow editor page.
Due to the task catalog is limited, only five types of task exist right now. Instead of input task name manually, I want to let user able to select the task type from selection list.
For your suggestion, what is the "Costom node" mean? Is it written by pure Node-Red code, instead of FlexDash scope?
Don't forget that the Editor page is not meant to be "user" facing - so it may be (is actually) a lot better to keep user data tasks on a user-facing front-end and leave the node-red back-end to manage the data itself.
I'm afraid I don't really understand what you're trying to do... I mean the big picture, I do understand the adding of a drop-down. What are you trying to display in FlexDash?
What I mean by custom node is to write a regular Node-RED custom node (or use a function node) to prepare the messages that go to a set of FlexDash nodes to implement what you're trying to do. If you could explain what you're trying to do in the big picture then I could make more concrete suggestions.
3 Sep 15:02:43 - [info] Node-RED FlexDash plugin version 0.4.100
3 Sep 15:02:45 - [info] Node-RED FlexDash version 0.4.100
3 Sep 15:02:45 - [info] Node-RED FD Core Widgets version 0.4.44
3 Sep 15:02:46 - [info] FlexDash UI version 0.4.56
No release in 8 days... slacker!
This release fixes a pile of stuff. The biggest change is that the "main" prop used by widgets is now msg.payload, no more msg.data, msg.value, or msg.text. Under the hood it's still the latter but on the NR side it's payload. Took 2 iterations to get this done cleanly, but I believe I'm not breaking old flows 'cause for now msg.data etc are still working. I should disable that in the future to avoid unexpected surprises so please do change your flows to use msg.payload and update any default values you may have set (I believe all it takes is to open the node in the flow editor and hit done).
There are also a bunch of fixes for typedInput and unset/null values in particular. I wouldn't be surprised if there is still some corner case lurking, but I hope I got it all. It is possible that some default values got messed up in the past and need some manual resetting to empty/null.
The popup grid is part of this release. It is working for me and I did write up some docs, but I would rate this as quite experimental, meaning it may have to change as we figure out better how to use it. One feature that is still missing is to be able to send a message to a specific browser, for example, so the pop-up only shows for the user that clicked on the activator element.
Finally scrolling simple-table and prop-table should be fixed.
NB: be sure to update the node-red-fd-corewidgets repo and not just node-red-flexdash.
thanks for bearing with me...
.. anyway I think will once the different widgets/nodes are used in examples it will become clearer.
