· This fading popup appeared when we wanted to give the user some ephemeral confirmation notice. Left alone, the dialog will
fade away, but if the user hovers the mouse, it will return to full opacity until the mouse is moved off. If clicked, it will be dismissed immediately. The code synchronizes some key methods to
handle access by the animation thread and the EventDispatchThread. It also allows multiple simultaneous popups. (Code Sample)
· This semi-transparent hover panel appears with a click on the chart, and displays financial data relevant to the
year beneath it. The displayed data updates dynamically as the user moves the mouse over the chart. All data with an associated color on the chart will have a matching colored box next to it.
Note the rounded corners.
Voyant Dialog Features
· The Voyant Dialog you see here is actually a hierarchy I built of 4 classes, each of which adds a feature:
Most dialogs, including this one have all features. The custom border is rendered dynamically, and resizes with the dialog. The top-right icon
is super-imposed over the dialog, and can also be a functional button. The small white circle in the bottom right is a resize handle.
- custom border
· Both the button below and the "Stage Bar" on the chart have a glossy finish to them. I'm not going to tell you
how I did it, because I'm too embarrassed to admit how easy it was. It's a nice effect for the user, though.
Overall look & feel
· I am 95% responsible for implementing the overall look and feel of the client application. Put differently, I built the
colors, styles, much of the layout, lists, and headers in the representative picture below.