I have just pushed a new version of Dashboard to npm
Version 2.10.0 - now allows users to create their own simple widgets that can be installed like other nodes.
To go along with this users can now choose to use the default underlying Angular-Material theming, instead of the Node-RED themes... these may look better for any nodes made using the Angular-Material libraries, though we have also tried to update the Node-RED ones to keep looking good.
Obviously there will be things we've missed and no doubt you will let us know 
Here is a simple extra widget to try - and is a good place to start if you want to see how to create your own. Thanks to @nisiyama for this - https://github.com/node-red-hitachi/ui_list
More docs on the API here - https://github.com/node-red/node-red-dashboard/wiki/Creating-New-Dashboard-Widgets
7 Likes
Updating using Palette manager. After restart the following happened
22 Oct 22:36:39 - [info] Node-RED version: v0.19.4
22 Oct 22:36:39 - [info] Node.js version: v8.11.3
22 Oct 22:36:39 - [info] Windows_NT 10.0.17134 x64 LE
22 Oct 22:36:40 - [info] Loading palette nodes
22 Oct 22:37:02 - [warn] ------------------------------------------------------
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_base] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_button] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_dropdown] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_switch] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_slider] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_numeric] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_text_input] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_date_picker] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_colour_picker] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_form] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_text] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_gauge] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_chart] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_audio] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_toast] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_ui_control] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_template] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] [node-red-dashboard/ui_link] Error: Cannot find module 'setprototypeof'
22 Oct 22:37:02 - [warn] ------------------------------------------------------
22 Oct 22:37:02 - [info] Settings file : C:\Users\Richard.node-red\settings.js
22 Oct 22:37:02 - [info] Context store : 'default' [module=localfilesystem]
22 Oct 22:37:02 - [info] Context store : 'memory' [module=memory]
22 Oct 22:37:02 - [info] User directory : C:\Users\Richard.node-red
22 Oct 22:37:02 - [info] Server now running at http://127.0.0.1:1880/
22 Oct 22:37:03 - [info] Active project : ControlBoard
22 Oct 22:37:03 - [info] Flows file : C:\Users\Richard.node-red\projects\ControlBoard\flow.json
22 Oct 22:37:03 - [info] Waiting for missing types to be registered:
22 Oct 22:37:03 - [info] - ui_base
22 Oct 22:37:03 - [info] - ui_template
22 Oct 22:37:03 - [info] - ui_button
22 Oct 22:37:03 - [info] - ui_ui_control
22 Oct 22:37:03 - [info] - ui_dropdown
22 Oct 22:37:03 - [info] - ui_form
22 Oct 22:37:03 - [info] - ui_slider
that is a module inside serve-static module - no idea why it didn't get pulled in - or wasn't there from before.
can you try installing / re-installing manually ?
Hi Dave,
Do you mean we can now publish custom dashboard nodes on npm? If so, that would be an awesome feature!
But had a 'quick' look at the example, and I see only one html and one js file, which seem to contain flow editor related stuff. Where do we have to put the dashboard related (html and js) stuff ??
Thanks !!
Bart
manual installation - still same story
Uninstalled 2.10.0 and installed 2.9.8 with no issues. No luck with 2.10.0.
Yes !!! I was waiting for that since so long.
Just found the doccumentation for that: https://github.com/node-red/node-red-dashboard/wiki/Creating-New-Dashboard-Widgets
You're going to force me to learn to do stuff with letters instear of brightly colored rectangular bubbles and string...
Please try new Angular-Material theming.
@JayDickson - we can only blow up so many bubbles for you - at some point you have to make your own. Happy to provide the string once you have done so
@BartButenaers - yes - that is the hope. Most of the dashboard UI side is in the js file... in the ui_list example it is in a variable called html - as a string.
@hotNipi - not sure what to suggest - just tried on Windows 10 here - all good here so far... it's in the package-lock.json file so should be installed.
Thank you. Just minutes ago I got it installed. I did many things, full restart included so it is impossible to tell what was the key move. But all OK for now. Thank you.
The choice of theming is under the Dashboard Site tab
The options are
- Use the Node-RED (existing) themes everywhere - which should work with all built in widgets.
- Use the Angular theme in the ui_template only - IE don't use the Node-RED theme overrides inside any template you add.
- Use the Angular theme everywhere - This should work for any widgets that are built with the angular-material libraries - https://material.angularjs.org/1.1.10/ - but any widgets that aren't may well look odd (eg Wave gauge etc)
Note: Any custom UI widgets will be treated (style-wise) as if they are ui_templates.
Happy to look at PR's and suggestions to fix any crossover cases which could be improved, but hopefully this is a sensible compromise for now
Hi, I just updated to the latest release of the dashboard and noticed that the icons are now blurry and contain a green highlight around the edges as in this example
and custom buttons now have a green background around the letters
I cleared the cache but no change. I using Chrome Version 70.0.3538.77 node-red v0.19.4
Update: Never mind, I wasn't aware I could now change to Angular theme in ui_template.
Yeah, noted. Already patched in master, not quite yet on npm
Just out of curiosity, should I see any difference in the dashboard look? I can't spot any change to be honest. Not in "regular" widgets nor in wave (that supposed to look odd). That new ui_list also looks the same on all themes (btw, it renders with default black color while all other widgets have light text color for dark theme, so would be nice to make it consistent). Also, should height of ui_list expand to the content? Now I have tiny row and vertical scrollbar.
Yes they should look different - you may need to ensure you have flushed your browser cache to ensure the dashboard code is the latest at the browser side.
Yeah, refreshed without cache, still no difference. Fine by me (current theme looks nice) but maybe you could add screenshots from two themes so it's obvious what was the goal? Thanks.
BTW, any way to make tiles of dashboard stick to their positions? Every few updates of the view they get shifted around and the only way to bring the correct order is to rearrange them on Layout tab, deploy, then undo rearrangement and deploy once again. (probably wrong thread for this issue).
This is ui_list example shown with default light theme
and standard dark theme
And Default Angular theme
1 Like
