Tuesday, June 2, 2020

Touch me...


Last weekend I've spend a lot of time in front of the TV to follow the flight of SpaceX Crew Dragon to the International Space Station.
It's great to see that finally a commercial company is able to send people to the lower orbit and to the ISS.
When I saw the touch user interface of the Crew Dragon I've got the idea to create a little touch joystick control in JavaFX.
I've did not spend a lot of time to think through the functionality so there is as always room for improvement :)
So I took my standard approach, first draw the control in a vector program which looked like this:

As you can see it's not a hyper fancy control but it should be useful first :)
The idea was to have a touch point that can be dragged around. A little ring outside that indicates that you touched the control (because your finger might block your view on the touch point itself).
8 buttons around the control that can be used to make small adjustments with given directions.
I've also added an indicator made out of chevron shapes. The more you drag the point to one direction the longer the bar of chevrons will get. First I thought to let it go from the center of the control to the touch point but if you use your finger to drag the point, your hand might block your view and so I've decided to put the chevron bar on the opposite side of the touch point to make it as visible as possible.
I've created a little video that shows how the control works...

As always you can find the code over at github...

If you would like to start the demo you just have to make sure you are on Java 11 and then you can execute gradle Demo on the console.

That's it for today...so keep coding...

1 comment: