I suspect all the real goodness would need to be handled by the underlying library GitHub - yoannmoinet/nipplejs: A virtual joystick for touch capable interfaces.
so maybe need to raise an issue there first 
I'll take a look over there... thanks.
Hi @dudleyjosh,
That indeeds look better. Thanks for taking the time to make such a nice demo image!
But indeed - like @dceejay already suggested - the only way to get it done, is to ask the nipplejs author to implement it. If you can convince them to do it, I can support it afterwards in my node (if anything needs to be changed...). Don't forget to share your nice image with them, and please add a link to your nipplejs issue here (so we can follow your request).
Good luck with it!
Bart
@BartButenaers I submitted a feature request on their GitHub
In the meantime, I hacked together (I'm not a CSS or coding guru in general) a dashboard template node to modify the joysticks when the page loads.
I had to add a timeout to my script to allow enough time for Angular to do whatever it does on page load... I couldn't find the proper way to fire my template script based on an Angular event or something along those lines?
[{"id":"24979d80.621452","type":"ui_template","z":"f7a3bdce.57314","group":"da148e61.f015f","name":"","order":9,"width":0,"height":0,"format":"<script id=\"formatJoystick\" type=\"text/javascript\">\n\n $(function() {\n \n setTimeout(() => {\n \n var backTilt = $(\".back\")[0];\n backTilt.style.width = \"80px\";\n backTilt.style.left = \"10px\";\n \n var tiltSpan = \n `<span class=\"fa fa-arrows-v\" style=\"\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 2rem;\n color: black;\">\n </span>`;\n \n $(\".front\").eq(0).append(tiltSpan);\n \n var backPan = $(\".back\")[1];\n backPan.style.height = \"80px\";\n backPan.style.top = \"10px\";\n \n var panSpan = \n `<span class=\"fa fa-arrows-h\" style=\"\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 2rem;\n color: black;\">\n </span>`;\n \n $(\".front\").eq(1).append(panSpan);\n \n }, 1000);\n \n });\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":350,"y":460,"wires":[[]]},{"id":"da148e61.f015f","type":"ui_group","name":"Demo","tab":"da5706ae.6caf58","order":3,"disp":true,"width":"12","collapse":false},{"id":"da5706ae.6caf58","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
It should be enough to wrap code in scope (its in the ui_template built in help) - not certain though
(function(scope) {
//do stuff
})(scope);
Worth a try?
Hi, i just downloaded and install the ui-joystick node. The properties tab of the node is missing the send output message options (see screenshot). I am new to node-red and may have missed some steps. Could you kindly please help enlighten?
npm version is 6.14.5
node.js version is 14.17.6
Hi @ecyewp,
Could you explain a bit more what you are missing? It is quite some time ago that I developed that node, so not entirely sure what you mean ...
Hi, @BartButenaers
Compare to left image from your posts previously vs the right image of edit joystick node properties section i had, i am missing the section from "send output msg at 45deg direction change" onwards.
Is there something i am missing in the node installation?
During the above discussion, some of the properties have been moved to other positions on the config screen:
And 3 checkboxes have been replaced by a dropdown, as you can see in the above discussion:
So it is al there, but you are looking at screenshots of my first beta version...
Hi dears and thanks for the great job.
I'm trying to test this node but actually, I can't understand why the joystick doesn't appear on UI.
I currently use node-red on raspberry pi and I've been testing the node on different raspberry (3B+ and 4B) with separate node-red installation. In both cases, there are no problems with the installation and I can add the node to fluxes. Once deplyed, everything seems to be ok but on UI I can see only empty space where it is supposed to be found the joystick.
Any indications?
Hi @Marcos,
Do you see any errors in your browser console log? Otherwise I don't have any idea why that happens.
Bart
Thanks, @BartButenaers,
in the console log, I found this
So I tried to run in the node-red folder
npm install nipplejs --save
and after a no error install, the behaviour is the same.
I also tried to restart and change the browser.
I understand there is something related to nipplejs but I'm not so trained to fix this kind of stuff.
Do you have any suggestions?
I think your browser cannot connect the joystick node's endpoint, which it needs to load the nippleJs library. So as a result the library will not be able to display a joystick.
Can you have a look at the "Network" tabsheet of your browser developer tools, to see why the call to the endpoint (to fetch nipplejs from your Node-RED server) fails. I am curious to see the url that is being called. Had similar issues in the past with my other nodes: often this was caused by people adjusting properties in the settings.js file, which caused the basepath of the url to be changed.
Hi @BartButenaers,
here is what I can read
that shows in the Headers tab this
I'm using chrome.
Actually, I use a custom settings.js file also for paths because I want UI on base path IP:1880 and the web editor on IP:1880/admin.
Could be this the reason? How to fix it?
This is my path when the library is loaded (without any adjustments in the settings.js file):
So I have an extra 'ui' in between the path.
Can you please share the part of your settings.js file and explain how it works, because I have not enough time to start digging myself.
There must be somewhere a bug in my code here where I calculate the path to the endpoint (that serves the nipple library to your dashboard). I use that code snippet in all my ui nodes. In the beginning I had a lot of troubles with that code, for cases like yours. But long time ago that somebody reported that it doesn't work well...
The only difference I see with the UI SVG node is here, because there is no /* at the end. Not sure if that can cause it.
Summarized: the uipath is calculated based on your settings.js file, and on that url your nipplejs library can be downloaded. But that path doesn't match with the one your dashboard uses in your screenshot.
Now off to work...
Hi, @BartButenaers and thanks.
my custom settings.js usually have these lines:
// By default, the Node-RED UI is available at http://localhost:1880/
// The following property can be used to specify a different root path.
// If set to false, this is disabled.
httpAdminRoot: '/admin',
// If you installed the optional node-red-dashboard you can set it's path
// relative to httpRoot
ui: { path: "" },
This is why I want to have UI reachable directly on path IP:1880 while I want the developer's interface on the subpath /admin.
Looking at your image it seems that everything is fine based on the relevant different settings.js files.
In both cases (mine and yours) path is correct. Anyway, the results are different.
Giving a look at your code I realized that probably using "/" in my settings.js could solve the problem.
Then using the following line
ui: { path: "/" },
the joystick is now visible.
So, while in the past with or without "/" was different for node-red I realized that now it seems to be equivalent. I'll deep this.
Actually, I don't know if this is the case to consider an exception in your code.
Thanks a lot for helping me out.
@Marcos,
Thanks for the analysis! Much appreciated...
You made my head explode by your feedback 
Let's travel back in history, in chronological order:
- This issue for the ui-svg node was exactly the same as yours.
- So on 09-01-2021 I created this fix for the svg-node.
- And seems that the same day I did the same fix on all my other ui nodes, so I also fixed the ui-joystick node on Github.
- But version 1.0.0 of the ui-joystick node was published two days earlier on npm.
- So you can see the fix on Github, but it has never been published on npm!
That is why I went nuts, because the code of the ui-joystick node on Github looked correct to me...
Will publish the fix tomorrow evening on npm. My (free) time is up for today
Was awake early, so here is the fix in version 1.0.1:
2 Likes
Hi @BartButenaers
I've just updated the node. I confirm everything works.
I'll use the joystick in the next days.
Thanks a lot for your work.
2 Likes
