Friday, November 28, 2014

Friday Fun Component XX

Hi again,

during the last weeks I was working on my JRunner project which is a wearable system based on an Odroid-W running on Java SE embedded. As you might guessed already the system was made to monitor a runner or bicycle rider. Especially the heart rate is very interesting to monitor and analyze. To visualize the recorded data and also to track the runner live during the run I've created a JavaFX based desktop application which shows all the different parameters.
And because I would like to have a gauge in the app (you know I love gauges) I was looking for a gauge that I can use to visualize the current heart rate and the average heart rate in one gauge.
To make it it is...

As you can see it has two bars and some text. The outer bar visualizes the current heart rate and the inner bar visualizes the average heart rate. Because I have a color scheme in my app to visualize the different heart rate zones I would like to color the bars dependend on the heart rate. Therefor I've used my little GradientLookup class that I've used before. To get an idea about the current value, the big number shows the current and the small number the average heart rate. For my use case I set the title always dependend on the current heart rate zone.
Both bars can be set independently and are animated. If you would like to use the mode where the bars change their color dependent on the value you have to enable it by calling setMultiColor(true). If not you can simply set the color for the outer and for the inner bar and the colors won't change dependent on the value.
You could also set the color of the inner background, the border and for each text of the gauge.
Like always I've created this control for one of my demos so don't expect it to be production ready but if you like you might want to fork it on bitbucket.
I've also recorded a very short video on youtube that shows the gauge in action.

That's it for keep coding...

No comments:

Post a Comment