# \[ANNOUNCE\] node-red-contrib-ui-joystick : beta
**URL:** https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479
**Category:** Share Your Nodes
**Created:** [3 January 2021 21:30 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479 "2021-01-03T21:30:49Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [5 January 2021 22:43 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/21 "2021-01-05T22:43:35Z")
@dceejay,
I 'think' the new version on Github implements most of your feedback.
There is still one bug:
1. Uncheck _"Move joystick to its center when released"_
2. Move the joystick so the timer is started
3. I deploy the flow again
4. The old timer is still running...
So I need to stop it when the scope is being closed/destroyed. I have done that in the past, but cannot find my code anymore at the moment ...
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [5 January 2021 22:54 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/22 "2021-01-05T22:54:59Z")
> [@BartButenaers](#):
>
> There is still one bug:
Solved now. Fix on Github:
```auto
$scope.init = function (config) {
...
$scope.$on("$destroy", function() {
if ($scope.timer) {
clearInterval($scope.timer);
}
});
}
```
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [6 January 2021 21:22 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/23 "2021-01-06T21:22:37Z")
hi Bart,
just trying the latest - it defaults to auto size so is 1 unit high and so very small. I think 3 x 3 would be more useable... Also it still has the position property which is some sort of pixel values (seem to be absolute within page) - which should probably be removed. And I thought you were going to pick one of the angle properties and go with that, rather than have a property?
At least distance now seems to be constant... 50 = 100% to edge of circle... (so you could x2 to make it actual % of distance to edge 😉
What are the units for the time interval ? I wrongly assumed they were mS as I wanted to set 20mS.
Finally - If I set return to centre - It would be nice if it sent one final message of 0,0 so that any listening node would know it was there, before it stops sending.
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [6 January 2021 23:06 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/24 "2021-01-06T23:06:29Z")
Hi Dave,
Thanks again for your test work and feedback!!
Don't have time anymore today to update the readme and example flows on Github. Will do it tomorrow... But the version on Github contains following changes:
- The default size for new nodes is now bigger:
- The position property has been removed. I tried to convert the x and y position to percentages, but time was too limited. Not sure how it is calculated, so will drop those output fields.
- The distance is now a percentage (i.e. 100% instead of 50px).
- The time interval was seconds, but I have now used milliseconds and added a unit at the end:
- When it returns to the center, there is now a dummy output message:
- The angle is still radians and angle. I have contacted the author of the node, and seems he likes - for some unexplainable reason - to keep both 😉
Time is up for today ...
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [7 January 2021 09:41 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/25 "2021-01-07T09:41:29Z")
Much better - starting to look really useful.
What is the input for ? Is it needed at all ? Can the pin be removed ?
Also (tiny nit) most widgets just have lower case names... so joystick rather than Joystick.
When I hover over the up/down for the time it says please enter a valid value - nearest is 0 or 100 - I just entered 25. So maybe the step needs adjusting.
my simple demo attached
```auto
[{"id":"ace86d69.4cbf9","type":"ui_joystick","z":"cca8d493.5a61e8","name":"","group":"5f032b51.37b174","order":1,"width":"6","height":"6","trigger":"all","timeInterval":"25","useThemeColor":true,"color":"#000000","threshold":0.1,"directions":"all","shape":"circle","centerAtRelease":true,"x":265,"y":180,"wires":[["a6790064.1df22"]]},{"id":"51ba37e4.eb84b8","type":"ui_slider","z":"cca8d493.5a61e8","name":"","label":"fov","tooltip":"","group":"5f032b51.37b174","order":2,"width":0,"height":0,"passthru":true,"outs":"all","topic":"fov","min":"10","max":"100","step":1,"x":270,"y":225,"wires":[["a6790064.1df22"]]},{"id":"a5748f36.96c3e","type":"ui_worldmap","z":"cca8d493.5a61e8","group":"24ec73a2.d971bc","order":1,"width":"8","height":"7","name":"","lat":"51","lon":"-1.3","zoom":"13","layer":"","cluster":"","maxage":"","usermenu":"hide","layers":"hide","panit":"false","panlock":"false","zoomlock":"false","hiderightclick":"true","coords":"none","showgrid":"false","allowFileDrop":"false","path":"/worldmap","x":615,"y":180,"wires":[]},{"id":"a6790064.1df22","type":"function","z":"cca8d493.5a61e8","name":"","func":"var p = context.pan || 0;\nvar f = context.fov || 40;\n\nif (msg.topic == \"fov\") {\n f = msg.payload;\n}\nelse if (msg.topic == \"worldmap\") { }\nelse {\n p = (p + (msg.payload.vector.x * f)/20)%360;\n}\n\nmsg.payload = { \n name:\"Camera01\", \n icon:\"fa-camera\", \n lat:51, \n lon:-1.3,\n arc: {\n ranges: [500,1000,2000],\n pan: p,\n fov: f,\n color: '#aaaa00'\n }\n}\n\n\ncontext.fov = f;\ncontext.pan = p;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":465,"y":180,"wires":[["a5748f36.96c3e"]]},{"id":"370426a2.1f88ca","type":"worldmap in","z":"cca8d493.5a61e8","name":"","path":"/worldmap","events":"connect","x":270,"y":135,"wires":[["a6790064.1df22"]]},{"id":"5f032b51.37b174","type":"ui_group","name":"Demo UI Group","tab":"efb50e58.599cf","order":5,"disp":false,"width":"6","collapse":false},{"id":"24ec73a2.d971bc","type":"ui_group","name":"Map","tab":"efb50e58.599cf","order":2,"disp":false,"width":"8","collapse":false},{"id":"efb50e58.599cf","type":"ui_tab","name":"Demo UI Tab 2","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
```
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [7 January 2021 11:54 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/26 "2021-01-07T11:54:16Z")
> [@dceejay](#):
>
> What is the input for ? Is it needed at all ?
[Nipplejs](https://yoannmoi.net/nipplejs/) offers a series of methods (show, hide, setposition...). So I added an input port at the start of this development, to allow the user to call those methods via input messages. But don't think this is useful anymore? Unless somebody has another opinion about this, I will remove the input tonight ...
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [7 January 2021 11:56 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/27 "2021-01-07T11:56:16Z")
> [@dceejay](#):
>
> When I hover over the up/down for the time it says please enter a valid value - nearest is 0 or 100 - I just entered 25. So maybe the step needs adjusting.
I had set the step to 100, because I thought that it was useless to set it smaller than that. Because otherwise you could get flooded with messages again... What do you think would be a useful step value?
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [7 January 2021 19:26 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/28 "2021-01-07T19:26:41Z")
@dceejay
Following has changed
- Readme page up to date
- Input removed and lowercase:
- Step size reduced to 25 (msecs)
Ready to go?
> [@dceejay](#):
>
> my simple demo attached
P.S. Nice demo!
For those wondering how Dave's demo looks like, here it is:
---
### Author:  [@vkuehn](https://discourse.nodered.org/u/vkuehn)
#### Post date: [7 January 2021 19:28 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/29 "2021-01-07T19:28:35Z")
Hi, thanks for that, exactly what I have searched for 🙂
doesn't work for me in firefox maybe you can add support for that too.
your firs and last demo screenshots a quite Impressing. What did you use for camera window and what for the picture view ?
---
### Author:  [@vkuehn](https://discourse.nodered.org/u/vkuehn)
#### Post date: [7 January 2021 19:36 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/30 "2021-01-07T19:36:37Z")
ok I should have looked for the flow examples. thanks for sharing !
Didn't even know ui worldmap and Display Image exist
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [7 January 2021 19:42 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/31 "2021-01-07T19:42:06Z")
> [@vkuehn](#):
>
> doesn't work for me in firefox maybe you can add support for that too.
Can you be a bit more specific about what is not working?
I tried it now in Firefox, and it works fine for me...
---
### Author:  [@vkuehn](https://discourse.nodered.org/u/vkuehn)
#### Post date: [7 January 2021 20:00 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/32 "2021-01-07T20:00:25Z")
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 )
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [7 January 2021 20:36 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/33 "2021-01-07T20:36:26Z")
indeed - seems fine for me also in Firefox.
---
### Author:  [@vkuehn](https://discourse.nodered.org/u/vkuehn)
#### Post date: [7 January 2021 20:41 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/34 "2021-01-07T20:41:38Z")
ok thanks or checking, maybe it's my side/installations who interfered firfox.
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [7 January 2021 22:16 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/35 "2021-01-07T22:16:18Z")
Thanks to our friend @dceejay, for all the tests and feedback!
Version _ **1.0.0** _ is now available on NPM 🥂 🍾
---
### Author:  [@stefan24](https://discourse.nodered.org/u/stefan24)
#### Post date: [9 January 2021 22:07 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/36 "2021-01-09T22:07:53Z")
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.
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [9 January 2021 22:57 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/37 "2021-01-09T22:57:52Z")
> [@stefan24](#):
>
> 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)
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](https://discourse.nodered.org/t/best-practice-for-size-of-a-ui-node/38482/5) discussion - then it works fine. Very weird...
---
### Author:  [@dudleyjosh](https://discourse.nodered.org/u/dudleyjosh)
#### Post date: [25 January 2021 15:20 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/38 "2021-01-25T15:20:59Z")
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.
1. A 'label' field that would show a text label description above/below the joystick ('pan' and 'tilt' in my case).
2. 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](https://photos.app.goo.gl/2JZC1YLbgboKuART7)
Thanks for the work on this super fun and useful Node-RED module 🙂
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [25 January 2021 16:11 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/39 "2021-01-25T16:11:50Z")
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.
---
### Author:  [@dudleyjosh](https://discourse.nodered.org/u/dudleyjosh)
#### Post date: [25 January 2021 16:50 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479/40 "2021-01-25T16:50:56Z")
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?
[Previous page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479.md?page=1)
[Next page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-joystick-beta/38479.md?page=3)