JavaFX Custom Control – Nest Thermostat Part 1

Tow weeks ago, I decided to spend some time watching some of the JavaOne talks about JavaFX, thanks to this excellent post from Hendrik Ebbers. I have to say I’ve learned so much already, just watching theses video (even if I have not finished yet) !

Gerrit’s Talk on “Use the Force, Luke” or Tips and Tricks for Using the Capabilities of JavaFX boost me to link my (basic) inkscape and design skill to my JavaFX knowledge. I decided I will take some time trying to create a complete custom JavaFX control as described by Gerrit in its talk using inkscape and CSS. It will be I think a good way to learn CSS!

Here is the real life object I will try to reproduce in JavaFX. This is a Thermostat created by Nest.

nest

So As described by Gerrit, I first made an Inkscape prototype to understand how the image is built. First import the image in inkscape and then start by the external part of the image and go to the center details. I used a lot the object alignment and distribution as well as the duplicate (Ctrl+d) and Gradient with color picker. On the next image you can see the steps I had and the final image I built.

neststeps

The final result is close from the original even if I did not managed to do some of the effects. For example I had some trouble with the external circle gradient that is not symmetric. So I decided to get the brighter part and make it symmetric ! Here is a full comparison between my inkscape version (left) and the original one (right) :

nestredo

I have to say the using the gradient by getting the real image in Inscakep and picking color with the color pick tool was really a simple and powerful way to reproduce the light effects. Thanks again to Gerrit for this really instructive talk.

Next step is to import the global shape in JavaFX using CSS mostly, as presented in the Talk.

  • For those who are interested in making custom control you should really click here.

UPDATE 1 : I’ve reworked my inkscape version because something was not right about the light effect, and I’ve found, my external circle gradient was not aligned with the light direction, it was orthogonal with it !!! Here is the new screenshot!

nestredo21

UPDATE 2 : For those willing to take a look at the inkscape file, here it is !
 

Reference: JavaFX Custom Control – Nest Thermostat Part 1 from our JCG partner Laurent Nicolas at the Mr LoNee blog.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

JPA Mini Book

Learn how to leverage the power of JPA in order to create robust and flexible Java applications. With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced concepts.

JVM Troubleshooting Guide

The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it with this advanced guide!

Given email address is already subscribed, thank you!
Oops. Something went wrong. Please try again later.
Please provide a valid email address.
Thank you, your sign-up request was successful! Please check your e-mail inbox.
Please complete the CAPTCHA.
Please fill in the required fields.

Leave a Reply


9 + = fourteen



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close