A job for Node-RED to provide the requisite output for sure! 
This was news to me, hadn't seen that discussion, nor is that my area. I will leave to Ian to handle
1 Like
@joepavitt Thank you for taking on the task of building dashboard 2.0, and the more difficult task of dealing with us.
Do you have any plans on adding a feature to the d2 template node to allow adding code to the head, such that we can load whatever 3rd party scripts that are needed? Or perhaps this could be a setting in the side panel to add 3rd party assets?
I am starting work on wrapping a video player within a custom element so that I can contain its logic and reuse it elsewhere in the old dashboard or in any basic html page. In the d2 template, I would like to be able to just add the html
<custom-element v-bind:src="msg.payload"></custom-element>. But that will not work unless I can add a <script src="/custom-element.js"> to the head of the dashboard.
For this experiment to work, I had to use the ui-example and added some code so that it added my locally hosted file from a standard template node containing the custom element and pass the payload via the vue property binding.
config.head = [
{
type: 'script',
data: {
defer: 'defer',
src: '/custom-element.js'
}
}
]
Using the ui-example was just a temporary solution to get the script src into the head. I would like this to work in a simple template without the need to publish a node.
2 Likes
In a UI template config you can change the type to - added to site head section ?
In the old dashboard that was an option. The new dashboard has different options, but I am hoping that it is because it is not fully complete.
1 Like
Sorry misunderstood
1 Like
Yes! Absolutely. As youâve discovered (thanks for exploring ui-example) it is actually functional under the hood, as that's how the third-party integrations work, I just need to work out how to cleanly expose the relevant bits in the NR Editor.
Have been focussed on Migration Guide and a really neat new update for Chart Key Mapping last couple of weeks, but this is my next major priority.
I'm trying to support two additional pieces:
- Injection of scripts to
- Definition of custom JS functionality that would bind to the created Vue widget/component
Want to make that interface in Editor as clean/intuitive as possible
2 Likes
Have you considered putting that in a Web Component? Then it would be useable not just in Dashboards but also http-in/-out and UIBUILDER and even outside Node-RED.
I have a build pattern I can share that outputs minimised IIFE and ESM versions of web components along with maps (for debugging) if that is of interest.
Web components may not be as feature rich as VueJS components but they are standards-based and so less likely to fall foul of future "upgrades" to the frameworks and they are usable in wider contexts.
And, of course, you don't HAVE to load scripts and styles in the head though that can have its advantages.
3 Likes
Sorry for not being clear. Yes, that is exactly what I am doing.
Yes, I just want to be able to include that dependency in the head of the dashboard so that I can simply drop the <x-element></x-element> right into the page and it should work.
And for further details, I will only use the dashboard to pass the connection details to the video player and the video player itself will be responsible for using what it needs to load the video buffer, such as hls .js or websockets. Going to get off the socket .io dependency so that I can avoid any versioning conflicts and have 1 less library to deal with.
2 Likes
Nice! Well, if you want to know about my build process (using ESBUILD and Gulp), let me know.
6 Likes
Hi,
I am following the development from afar, and this all looks very exciting.
I am waiting for the outstanding core nodes to become available before I start experimenting.
It may be a bit early to talk about this, but I think migrating to dashboard 2.0 will not be an easy affair based on my limited understanding of what is happening which I would summarise as follows:
- Dashboard 2 aims replicate the functionality of V1 core nodes/widgets with some enhancements.
- Dashboard 1 core nodes/widgets will not work on V2
â as a result, moving from V1 to V2 involves at least a partial "rewrite".
Is that so?
Assuming it is so:
Apart from a few instances of ui-list and ui-media, I only use core dashboard nodes, but my app has quite a few flows, with a couple of them filling out the entire canvas available in NR2... They are not made solely of dashboard nodes of course, but these are shown/hidden and/or change colour/label/output based on conditions set all over the place...
Are there any migration tools or assistants in the pipeline? I don't mean by that something that would do everything for me, but simpler stuff like a consolidated reference table that would show the differences between v1 and V2 nodes for migration purposes, highlighting critical changes (payload handling change, formatting etc...), or may be some form of script to enumerate V1 nodes in a flow, basically small utilities that would make the task of porting V1 flows to V2 more approachable.
Nice to see some movement on the dashboard front in any case, thanks for doing that.
This is correct
Not yet, but this is definitely something I'd like to start working on (amongst everything else I still need to implement!)
I do have that: Dashboard 1.0 Migration Guide | Node-RED Dashboard 2.0
It's contains all of the details of the configurable properties already, but is currently missing the details of events, for example the dynamic setting of properties, etc.
This is absolutely the plan: Dashboard 1.0 Migration Guide | Node-RED Dashboard 2.0
1 Like
How should errors in the migration document be reported? As issues at Issues ¡ FlowFuse/node-red-dashboard ¡ GitHub
Yes, you're also welcome to open Pull Requests with the relevant changes/updates.
Super, many thanks for taking the time to reply, I shall keep on eye on this too.
Ignore please, the error was caused by something else that was refusing to upgrade.
Trying to upgrade to v0.7.0:
It is @flowfuse/node-red-dashboard now.
That isn't the issue. However, I note that it wasn't d2 failing anyway, it was a problem with another package. Resolved now.
Also, from the homepage:
Install the
@flowforge/node-red-dashboardpackage
@joepavitt should the original package be removed from npm?
Hopefully that should also remove it from flows.nodered.org
