Hello 2018 and some JavaFX Colour Sliders

2018: Tech and Coding for Marine Mammal Science

It’s late to say happy new year and apologies the blog has been a bit quiet over the past few months, but science can get a bit busy sometimes.

This year is shaping up to be an exciting one in the coding and marine marine world. PAMGuard is getting a new click train detector which should be fun for people to mess around with. Click train detectors make click analysis more automated and will hopefully be especially useful for very large datasets were manual annotation of click events can get very very boring. Speaking of large datasets, there’s a tidal turbine in the waters around Scotland streaming 1TB of data a day from 12 high frequency hydrophones to track dolphins and porpoises as they swim close by. Expect a blog post soon on how we handle those data volumes using PAMGuard and MATLAB. I’ve also been having some fun with Ocean Instrument’s new 4 channel SoundTrap, an amazing piece of kit which (if modified a bit) can record 4 channels of porpoise frequency data for about 5 days and isn’t much bigger than  a coke can. We’re going to be use it to track harbour porpoises around gill nets. However we need quite a few additional sensors to do that so we’ve been playing around with Arduino’s and the SoundTrap firmware to make a nifty little sensor package which plugs into the back. So, if you’re keen on a bit of SoundTrap firmware hacking, check back here over the next few months. Finally, JavaFX continues to trickle into PAMGuard. We upgraded the video range module, which allows users to calculate the latitude and longitude of a surfacing animal from a photograph; it now has a new shiny JavaFX GUI, a much slicker user interface plus a bunch of bugs ironed out form the original.

Ok, that’s the brief 2018 preview over. For now it seems fitting to start 2018 with a properly nerdy post on JavaFX colour sliders….

JavaFX ColourSliders

A while ago people it became apparent that PAMGuard could really do with some sliders to change the colours on the spectrogram. There are a few ways to change settings in a program. A dialog box is one. You open the settings, change them, close the dialog box and the settings are applied to whatever thing you’re changing. This is what PAMGuard tends to do. For example, open spectrogram settings dialog, change the colours, scales etc. and then upon closing the dialogs all the changes are applied. More modern UI’s tend to allow settings to be changed more dynamically, so you can see changes as you’re making them e.g. the colours of spectrogram change whilst you change the colour settings, rather than when you close the dialog. In JavaFX property binding etc. allow this to be programmed easily.

A colour scale is used to colour values on a colour plot, such as spectrogram. The colour scale is defined by an upper and lower bound between which there exists a colour gradient e.g.  white to black. Values above the upper colour bound are all coloured by the upper colour of the gradient and vice versa for colours below the lower bound values. For spectrograms colour gradients can be very important in data visualisation. Take a look at the example below showing dolphin whistles. Different colour bounds allow whistles to be much more clearly displayed. Allowing the user to dynamically change colour scales is therefore very useful for data exploration and manipulation. This is where the ColourRangeSlider comes in handy.

When colour limits are widely separated then whistles on a spectrogram are relatively faint. Note: the colour slider is the vertical bar to the far right.

With much tighter colour limits then contrast increases and dolphin whistles and clicks become more visible.

The JavaFX ColourRangeSlider is based on the RangeSlider in the excellent ControlsFX library.  The range slider is essentially a slider control with two thumbs instead of one. It allows users to define a range. To create a colour slider was actually relatively simple, all that was needed was to recolour the already existing background of the slider track. The main change was to extend RangeSliderSkin with ColourRangeSliderSkin. In RangeSliderSkin the track is created in a function called initSliderNodes(). To make the colour slider look like a colour slider required adding a few additional overlayed nodes to the track. First the main track was coloured with the lower bound colour and a node with the upper bound colour added above the top thumb. Then a node  with a specified colour gradient between the lower and upper bound colours was added between the thumbs.

 /**
 * Manage the order of the nodes which are added to the <span class="mceItemHidden"><span class="hiddenSpellError">pane</span></span>. Important as some
 * Nodes overlap others.
 */
	@Override
	protected void initSliderNodes(){
		initTrack(); //background
		initTopBar(); //on top of background
		initRangeBar(); //gradient between thumbs
		initFirstThumb(); //thumbs on top of everything
		initSecondThumb();
		//show tick marks if necessary
		setShowTickMark(getSkinnable().isShowTickMarks(), getSkinnable().isShowTickLabels());
		initHighLabel();
		initLowLabel();
	}

 

This intiliased the colour slider however as the thumbs move, the top and middle nodes need to be resized. This was achieved by overriding the standard layoutChildren(final double x, final double y,final double w, final double h) and handleControlPropertyChanged(String p) functions.

Some scribbles showing how the range slider was constructed.

Finally a ColourArray class and ColourArrayType Enum was used to store multiple colour gradients and setColourScale(ColourArrayType colourMap) function uses a bit of CSS and JavaFX wizardry to change the colour slider to different colour gradient types.

All these functions can be found in the PAMGuard SVN repository however that’s all a bit cumbersome. So here’s a link to a github project which can show a JavaFX dialog with a ColourSlider example. Note that to keep things stable I’ve actually cut and past the ControlsFX RangeSlider- it could all probably be done a bit neater but sometimes you’ve got to pick your battles. For those of you like me, who are lazy and just want to check out an example you can download a runnable jar file  here (Note: I had a few issues on some computers with this. If you open in powershell or command couldn’t find Modena CSS stylesheet- have yet to find a solution but should work on most PC’s hopefully. Also, this code does not work on Java 9…sigh)

Anyway, I hope this was a suitably nerdy start to 2018. More posts to come soon.

Advertisement