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.
Related Whitepaper:

Java Essential Training

Author David Gassner explores Java SE (Standard Edition), the language used to build mobile apps for Android devices, enterprise server applications, and more!

The course demonstrates how to install both Java and the Eclipse IDE and dives into the particulars of programming. The course also explains the fundamentals of Java, from creating simple variables, assigning values, and declaring methods to working with strings, arrays, and subclasses; reading and writing to text files; and implementing object oriented programming concepts. Exercise files are included with the course.

Get it Now!  

Leave a Reply


× 1 = eight



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy
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.

Sign up for our Newsletter

20,709 insiders are already enjoying weekly updates and complimentary whitepapers! Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

As an extra bonus, by joining you will get our brand new e-books, published by Java Code Geeks and their JCG partners for your reading pleasure! Enter your info and stay on top of things,

  • Fresh trends
  • Cases and examples
  • Research and insights
  • Two complimentary e-books