My name is Pedro DV. I’m a Software Engineer and Software Designer. I work as a
JavaFX and Swing Freelancer and
Consultant, but more generally can be described as a Front End Freelancer and Consultant
since I also have experience in web technologies, building web apps, etc,
and have experience in
User Interface Design
and User Experience.
I’ve been creating user interfaces, professionally, since 2006. More information here and for a detailed
CV style report my LinkedIn page.
I have just released FXParallax, a library for adding parallax effects to Java (JavaFX). In my first post I’ve started to explain what parallax is, where it’s being used and my first implementation of it.
Since my first post, I’ve changed several things: implementation, bugs, API, etc.
FXParallax is composed of a set of controls that are either already ready to use and have a parallax effect or are a general purpose control that makes it easy for you to add a parallax effect to a UI component.
Currently only one control exists in this library: ParallaxListView, it’s a ListView with a parallax effect.
I’ve added a page with documentation for this library, you should check it out here.
I plan to add a general purpose control, probably named ParallaxPane. It will allow you to more easily create a UI component with a parallax effect. It will accept a collection of layers and will probably allow some way of defining the scroll speed.
Unless there is a high demand I won’t be doing this in the near future. There are other things I’d like to do first.
Parallax is a visual effect where you combine at least two layered images moving at different speeds to achieve a sense of depth.
Think about when you’re driving on the road and you see the trees close to you moving fast whereas the trees that are further away will move in the same direction but slower, the result is that you perceive the trees that are moving faster to be closer to you and the others to be further.
If you are a fan of video games you’ve certainly seen this effect before: two or more images are placed one over the other, the background moves slower, and the foreground, which could be the player’s avatar or the foreground where he stands moves faster.
This is an often used trick in the video games world. It started to be used quite long ago, an example is the Super Mario video game series.
Super Mario game using a parallax effect
This effect has been adopted in the user interface area, where you can see it used on web sites and also some applications.
Parallax on a web site – source: https://dribbble.com/shots/1378010–GIF-Parallax-Building-animation
My goal was to bring this to JavaFX in the form of a control, where you could, through a simple API, add a parallax effect.
Parallax in a ListView
My first objective was to bring this to the ListView, that is, have a control with an API similar to the ListView where you could set the background image and the list of items just like in the JavaFX ListView. This control would be named the ParallaxListView.
To have a parallax effect the items in the ListView, that is, the cells, need to scroll with the background but at a faster rate.
This new control will use the JavaFX ListView with a transparent background, layered in front of a background image. The background image will be inside a ScrollPane.
The first challenge is that the scroll of the JavaFX ListView is done through jumps, that is, when you do a scroll action the position will jump from the original position to the end position without going through the intermediate position values. This will break the effect, since there is no movement like in the real world, only a discrete set of positions. In the real world the objects in the foreground move faster through a translation animation, remember this is about mimicking real world phenomenon like the driving example I gave earlier, to give a sense of depth.
So to accomplish this I had to implement my own ListView scrolling as well as the background scrolling, which when scrolling animates through a set of positions. The following is a live capture turned into a GIF of an example application using the ParallaxListView, the live version image quality and animation is better:
ParallaxListView example (image quality and animation worse than live version)
I’ve updated the Ribbon control and its documentation.
Here’s some of the relevant code changes (you can check the git log history for more details):
Cleaned up API
Cleaned up code into standard conventional packages
Fixed and cleaned up test apps (that also serve as documentation examples)
Added gradle build and configuration
Here’s the new page for the FXRibbon documentation: here.
Future developments for this library:
Add button controls: current javafx buttons don’t provide the best API for the ribbon use case, there’s also an issue where if you have a button with a multi line label, the label won’t be vertically aligned with the rest of the buttons.
Add other specialized controls, e.g. Ribbon gallery
It’s been too long since my last post! I plan on posting more regularly in the coming future.
Meanwhile, I took the opportunity to re-design this site which was looking pretty bad. Also thought my free open source libraries needed more attention, namely documentation so I’ve started working on that. The first one is going to be JMetro, you can check out the documentation here.
While I was looking over JMetro to write the documentation, I noticed some bugs and also a few aesthetic issues that I fixed:
Spinner: remove white background glitch with some style classes
List Box: added border around control
Slider: Somehow the fix to the slider when in vertical orientation, that fixed the fact that the fill started from the top instead of the bottom got lost. I re-implemented this fix.
Still haven’t had time with the font rendering issue. You can notice poor font rendering in JMetro on Windows with text in big font sizes. This is probably a JavaFX bug/problem because I’ve seen this elsewhere on images in other people’s blog posts and also other applications I’ve worked on.