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":" \n \n fa-video-camera \n ","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

Sorry to be the one to say (again!!) @BartButenaers but it's not working here.. :slightly_frowning_face: I've configured the node as per the readme, using a simple fixed menu, but it does not appear in the dashboard group. Checking my browser console, I see the following; [menu1] If I try and load https://nodered.digitalnut.co.uk:8443/ui/ui_context_menu/contextmenu.js?_=1582707759368 in a browser (as per the 401 error above) I get a prompt for auth. If I enter my user/password, then the contents of this file is then displayed. The same applies with https://nodered.digitalnut.co.uk:8443/ui/ui_context_menu/contextmenu.css, again I'm prompted for auth. I'm assuming that this is because I've password protected the Node-RED editor, admin API & the node-defined HTTP endpoints using adminAuth & httpNodeAuth (remember we had similar issues with node-red-contrib-xterm).

[image] Paul-Reed: remember we had similar issues with node-red-contrib-xterm Hey Paul, pfffff ... But the xterm problem was about the admin endpoint with needspermission. For the UI node we use RED.httpNode and that doesn't use needspermission. I have no idea at the moment ... And my lunch break is over ...

[image] Paul-Reed: I get a prompt for auth Hey Paul (@Paul-Reed) , Sorry for keeping you waiting... Hopefully somebody can give me a tip where to start searching, because I have no idea :woozy_face: In my context_menu.js file, I publish my third party (js and css) files to the browser like I do in all my other UI nodes: // By default the UI path in the settings.js file will be in comment: // //ui: { path: "ui" }, // But as soon as the user has specified a custom UI path there, we will need to use that path: // ui: { path: "mypath" }, var uiPath = ((RED.settings.ui || {}).path) || 'ui'; // Create the complete server-side path uiPath = '/' + uiPath + '/ui_context_menu/*'; // Replace a sequence of multiple slashes (e.g. // or ///) by a single one uiPath = uiPath.replace(/\/+/g, '/'); RED.httpNode.get(uiPath, function (req, res) { var options = { root: __dirname + '/lib/', dotfiles: 'deny' }; res.sendFile(req.params[0], options) }); I assume that the uiPath is determined correctly, since you can access the RED.httpNode endpoint (after you have entered your credentials).

[image] BartButenaers: Sorry for keeping you waiting... I'm in no rush :wink: - I'm using a ui-dropdown node in the meantime, but it's a bit ugly! For info, my node-RED is script installed Node-RED version: v1.0.3 Node.js version: v10.19.0 Dashboard version 2.19.4 Oracle Linux 4.14.35 But other than adding adminAuth & httpNodeAuth, it's a vanilla installation, so assume others with NR security enabled would have the same problem.

I don't know if it helps, but I've just removed all the security settings in node-RED, and the contextmenu node functions without errors. Adding them back, it appears that when httpNodeAuth is enabled, that is what causes the 401 error messages.

Could it be possibly related to the (unsolved) situation seen here? [image] Uibuilder uibindex not working Dashboard I'm running uibuilder on ubuntu installed on a user account $home/.node-red/uibuilder When I tried to access uibindex via Show Detailed Information icon, I got this error msg Unauthorized May I know how do I troubleshoot this issue ? Thanks

[image] Paul-Reed: httpNodeAuth Hi Lena, When I set the httpNodeAuth in my settings.js file, it also fails for me. I'm now trying to debug it. Below is the call stack of my endpoint (i.e. the happy path), in case the httpNodeAuth is not activated: [image] So somewhere in between it fails to access the endpoint...

If I can find a moment tomorrow I’ll compare the uibuilder stack with this one. See where it goes out on both... I’m curious for sure what’s causing this

For my issue, this has now been resolved. see Node-red-ui-table fails when httpNodeAuth enabled

Hi Bart, Hi Steve, I just observed a strange thing. When I do a page refresh in chrome 80.0.3987.122 (64-Bit) on windows 10 (not tested elsewhere) my two context menus pops up on the last position they where used: [image] perhaps it has something to do with the dashboard replaying the last message when a session connects, because no message is triggering this (checked with debug nodes). Timers are not started / working, only after I hovered over the menus once. I'm using Node-RED 1.0.3 and dashboard 2.19.4 on windows 10. BTW: It`s always the last position where it was triggered the last time: [image]

Node-RED

Node-RED Forum

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

Share Your Nodes

afelix 28 February 2020 22:09 27

Could it be possibly related to the (unsolved) situation seen here?

Topic		Replies	Views
Contextmenu location Developing Nodes	76	6303	4 July 2020
Child Menu in nodered dashboard Dashboard	9	595	8 May 2023
[ANNOUNCE] node-red-contrib-ui-contextmenu - typedinputs Share Your Nodes	6	1210	25 July 2020
Ui-table row contextmenu doesn't work? Dashboard node-red-dashboard	9	1121	15 December 2021
Context Menu position General	21	1931	5 May 2020

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

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

Related topics