[ANNOUNCE] node-red-contrib-ui-joystick : beta

Share Your Nodes
21

@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 ...

22

Solved now. Fix on Github:

$scope.init = function (config) {
   ...
   $scope.$on("$destroy", function() {
      if ($scope.timer) {
         clearInterval($scope.timer);
     }
   });
}
23

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 :wink:
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.

24

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:

    image

  • 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:

    image

  • When it returns to the center, there is now a dummy output message:

    image

    P.S. I see now that my output messages don't have a msg.topic field, so that is a bug that I need to fix tomorrow evening...

  • 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 :wink:

Time is up for today ...

25

Much better - starting to look really useful.

What is the input for ? Is it needed at all ? Can the pin be removed ?
image
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

[{"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}]
26

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 ...

27

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?

28

@dceejay
Following has changed

  • Readme page up to date

  • Input removed and lowercase:

    image

  • Step size reduced to 25 (msecs)

Ready to go?

P.S. Nice demo!
For those wondering how Dave's demo looks like, here it is:

joystick_demo_dave

29

Hi, thanks for that, exactly what I have searched for :slight_smile:

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 ?

30

ok I should have looked for the flow examples. thanks for sharing !
Didn't even know ui worldmap and Display Image exist

31

Can you be a bit more specific about what is not working?
I tried it now in Firefox, and it works fine for me...

32

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 )

1 Like
33

indeed - seems fine for me also in Firefox.

34

ok thanks or checking, maybe it's my side/installations who interfered firfox.

35

Thanks to our friend @dceejay, for all the tests and feedback!
Version 1.0.0 is now available on NPM :clinking_glasses: :champagne:

image

5 Likes
36

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)

grafik

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:

grafik

With the touch display of my smartphone, I can use the joystick in all positions. Chrome with Windows 10 seems to work, too.

37

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...

38

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?

Screen Shot 2021-01-25 at 10.09.32

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 :slight_smile:

39

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.

40

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?

Screen Shot 2021-01-25 at 12.43.54