sorry,
it basically did not follow always the mouse action instantly as in chrome.
Also the joystick head symbol did hang in the right side for seconds.
Now that I have closed some of the tabs it looks better ( better as in ok )
indeed - seems fine for me also in Firefox.
ok thanks or checking, maybe it's my side/installations who interfered firfox.
Thanks to our friend @dceejay, for all the tests and feedback!
Version 1.0.0 is now available on NPM
If the joystick is at the bottom of my dashboard, I cannot use the mouse to move the inner circle below the middle: (Firefox 84.x with Windows 10)
If I put the joystick position in the dashboard above some other elements, I can place the inner circle like expected round the outer circle:
With the touch display of my smartphone, I can use the joystick in all positions. Chrome with Windows 10 seems to work, too.
Hi Stefan,
I can reproduce the issue, but to be honest I have no clue how to solve it (since I'm using a third-party library)?
Only thing that I saw: when I remove the scaling - which was a tip from @Steve-Mcl in another discussion - then it works fine. Very weird...
This is a fun and useful Node-RED node... I saw it on here this past week and I was playing with it this weekend for a 3D printed pan & tilt camera rig I am building from a design I found on Thingiverse.
I have a couple of feature suggestions after playing with it this weekend.
- A 'label' field that would show a text label description above/below the joystick ('pan' and 'tilt' in my case).
- When the restriction to vertical or horizontal only is selected, it would be slick if the width or height properties were reduced to visually reflect the type of movement available for the joystick... something like the image below perhaps?
Here are a few pictures and a video of the pan & tilt project I am using the joystick module for.
https://photos.app.goo.gl/2JZC1YLbgboKuART7
Thanks for the work on this super fun and useful Node-RED module
Adding a label then gets into the - where should it be located debate which will then mean yet more options etc... - it also starts to make the sizing much more painful - if you start with a square without a label (eg 3x3), then add a label, then the control has to shrink quite a lot to stay as a circle - eg 1 row of text and 2x2 for the circle. Unless you start writing on the control (yuk). All makes a nice simple control overly messy imho. Can always add a text widget.
I do like the idea of the direction shaped hints though.
What about a simple icon style label (like fa-arrows, fa-arrows-v and fa-arrows-h) that is centered in the middle of joystick (or a single letter)... this wouldn't impact the sizing like a separate label would?
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?