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.
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.
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) :
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!
UPDATE 2 : For those willing to take a look at the inkscape file, here it is !
