[Announce] node-red-contrib-ui-contextmenu

Hi folks,

The new node-red-contrib-ui-contextmenu node allows users to add a popup context menu to their Node-RED dasbhoard.

My partner in crime (@Steve-Mcl) and myself have developed this new node to be used in combination with our new node-red-contrib-ui-svg node;

image

[{"id":"5f5f6e0b.54bb8","type":"ui_svg_graphics","z":"60ad596.8120ba8","group":"73b3392.fb47dc8","order":5,"width":"14","height":"10","svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" style=\"cursor:move\" preserveAspectRatio=\"none\" x=\"0\" y=\"0\" viewBox=\"-0.14965985715389252 0 900.29931640625 710\" width=\"100%\" height=\"100%\">\n  <image width=\"889\" height=\"703\" id=\"background\" xlink:href=\"https://www.roomsketcher.com/wp-content/uploads/2016/10/1-Bedroom-Floor-Plans.jpg\" />\n  <text id=\"camera_living\" x=\"310\" y=\"45\" font-family=\"FontAwesome\" fill=\"blue\" stroke=\"black\" font-size=\"35\" text-anchor=\"middle\" alignment-baseline=\"middle\" stroke-width=\"1\">fa-video-camera</text>\n</svg>","clickableShapes":[{"targetId":"#camera_living","action":"click","payload":"light_kitchen","payloadType":"str","topic":"light_kitchen"}],"smilAnimations":[{"id":"myanimation","targetId":"pir_living","classValue":"","attributeName":"r","fromValue":"0","toValue":"40","trigger":null,"duration":"2","durationUnit":"s","repeatCount":"0","end":"restore","delay":"","delayUnit":"s","custom":""}],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":true,"outputField":"","editorUrl":"","directory":"/var/tmp","name":"","x":580,"y":100,"wires":[["81065ae8.2b4058"]]},{"id":"34ea123d.de242e","type":"debug","z":"60ad596.8120ba8","name":"Clicked menu item","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":1010,"y":100,"wires":[]},{"id":"81065ae8.2b4058","type":"ui_context_menu","z":"60ad596.8120ba8","group":"73b3392.fb47dc8","order":5,"width":0,"height":-1,"fontSize":16,"position":"msg","outputField":"payload","xCoordinate":50,"yCoordinate":50,"menu":"fixed","menuItems":[{"id":"STOP","icon":"fa-stop","label":"Stop playing","topic":"","payload":"stop","payloadType":"str","visible":true,"enabled":true},{"id":"PLAY","icon":"fa-play","label":"Second","topic":"","payload":"play","payloadType":"str","visible":true,"enabled":true},{"id":"PAUSE","icon":"fa-pause","label":"Pause","topic":"","payload":"pause","payloadType":"str","visible":true,"enabled":true}],"colors":"native","textColor":"#ff8040","backgroundColor":"#7ed669","borderColor":"#b1aa12","name":"","x":800,"y":100,"wires":[["34ea123d.de242e"]]},{"id":"73b3392.fb47dc8","type":"ui_group","z":"","name":"Floorplan test","tab":"c43fd9d7.de3b98","disp":true,"width":"14","collapse":false},{"id":"c43fd9d7.de3b98","type":"ui_tab","z":"","name":"SVG","icon":"dashboard"}]

This results in the next demo, where you can see that this node allowed us to display a context menu in a floorplan (e.g. to visually control your devices at home):

So your dashboard will look like this:

contextmenu_demo

The node is currently not available on NPM yet, so you will have to install it directly from our Github page (see command at the top of our readme page).

We are looking forward for your 'constructive' feedback, and we hope you like both nodes!

Remark: if you have other nice use cases where this node could be used (apart from our SVG node), please let us know so we can add examples to our Github readme page!

Have fun with it!

Steve and Bart

3 Likes

Good post Bart. I'm reserving this one for some decent screen shots.

Update 1...

1 Like

Nice,
Thanks Bart and Steve.

I didn't get the alpha version of the contextmenu working.
Going to play now with this beta version in combination with the svg node to see how it's all working.

1 Like

Fix 1.0.1 now on Github: for context menu items specified in the input message, no output message was send anymore...

1 Like

Version 1.0.2 is now available on Github, containing a auto-hide feature.
See the readme page for more information about this new functionality.

Summarized:

  • You can specify a time interval in the config screen:

    image

  • When the mouse cursor leaves the context menu, a timer will start counting.

  • When the mouse cursor enters again the context menu, the timer will be reset.

  • When the mouse cursors is outside the context menu for the specified time interval, the context menu will be closed automatically.

  • A time interval 0 means that the auto-hide feature is disabled, so the context menu will stay open (until a menu item is clicked or until somewhere outside the context menu is clicked ...)

Short demo:

contextmenu_timer

2 Likes

Steve (@Steve-Mcl) has implemented a series of changes (version 1.0.4), but he is rather occupied at the moment. The changes are mostly related to colors:

  • Fix hover not working for theme and custom
  • Fix if old dashboard installed (call to ui.getTheme() fails, so menu isn't displayed)
  • Calculate border and hover colors from others (custom and theme)
  • Default color choice changed to "native"
  • Fix menu item list not sizing up when colour choice changed
  • Changed "native" text to "default"
  • Renamed custom color label "Border" to "Hover"

Demo for built-in dark theme (menu1=custom, menu2=theme, menu2=native)

2019-10-16_13-30-17

Demo for built-in light theme (menu1=custom, menu2=theme, menu2=native)

2019-10-16_13-29-27

2 Likes

We have published our first version (1.0.4) on NPM :champagne: :partying_face:

image

Then users can start using it in combination with our node-red-contrib-ui-svg node.

@dceejay: would be nice if you could add our both UI nodes also to your collection of dashboard extra nodes https://flows.nodered.org/collection/590bc13ff3a5f005c7d2189bbb563976 . Thanks!

Have fun!!
Steve (@Steve-Mcl) & Bart

4 Likes