Friday, October 14, 2016

Friday Fun XLI

Aloha,

Today I'm a bit late but it's still Friday and so I have some control for you again...
The first time I saw such a control was after I've updated my iPhone to iOS 10. In that release Apple added a sleep timer to the Clock app and this sleep timer looks like follows...



I can't really tell you why but somehow this control looks nice. In this case the use case is very specific but I thought such a control could be fun to use as a time selector. So my idea was to create a control that makes it possible to define a start- and an end-time where the possible range should be within 24 hours.
And this is the biggest difference between Apple's and my control, mine has double as many hours to select.
Well, long story short, here is a litte screenshot of the control...



Because I don't use it as a sleep timer I modified the start and stop icon to a simple triangle for start and a rectangle for stop. This icons are defined in the css file where everything else is done in code.
And to give you an idea how it looks in action here is a little screen video of it...



And as always if you are interested in the code, feel free to fork it at github...

That's it for today...so keep coding...

Friday, October 7, 2016

Friday Fun XL

And here we go again...
Today I have another component for you which is a bit more than a simple component. For JavaOne I've created a Weather widget which I used for Anton Epple's and mine "Hack your brush" session and I thought some of you might be interested in the code for that widget.

ATTENTION:
To get the weather widget running you will need an API key for Dark Sky and for MapQuest. Both vendors offer a free plan with limited no of requests per day.
Here are the links to get your API key:



The Dark Sky key is needed to get the weather information for a given location (defined by latitude and longitude) and the MapQuest key is needed to geo code and reverse geo code addresses and locations (in case you don't know the latitude and longitude of your location). If you know the latitude and longitude of your location you won't need the MapQuest key. In this case you can create a Location object as follows:


Location home = new Location(LATITUDE, LONGITUDE, "Home");

If you don't add the the name string for your location the app will try to lookup the name of the city by using the mapquest reverse geocoding feature.
In the current version you need to set bot API keys as environment variables on your system in order to get WeatherFX running. You could also replace the code in the ApiKeys class with the following snippet to get it running:

Current version:
public class ApiKeys {
    public static final Optional<String> DARK_SKY_API_KEY = Optional.ofNullable(System.getenv("DARK_SKY_API_KEY"));
    public static final Optional<String> MAPQUEST_API_KEY = Optional.ofNullable(System.getenv("MAPQUEST_API_KEY"));
}

Modified version:
public class ApiKeys {
    public static final String DARK_SKY_API_KEY = YOUR_DARK_SKY_KEY;
    public static final String MAPQUEST_API_KEY = YOUR_MAP_QUEST_KEY;
}

If you change the code in the ApiKeys class you also have to replace all calls in DarkSky.java and GeoCode.java from 


DARK_SKY_API_KEY.get() and MAPQUEST_API_KEY.get()

to


DARK_SKY_API_KEY and MAPQUEST_API_KEY

So I've stripped the WeatherFX stuff out of the demo and now I'm able to give it to you. Here is what it looks like...



The following data will be shown:

  • City name (either set manual or reverse geocoded)
  • Date and current time
  • Current weather condition
  • Current temperature
  • Current pressure
  • Current humidity
  • Current windspeed
  • Weather forecast for the next 5 days incl. Weather condition, min- and max-temperature
But there is much more information in the response, I only show a little part of it to avoid overloading the UI. The information that is available can be found at 


The weather will automatically be updated every 15 minutes from the Location class and the free developer API key from Dark Sky allows you to request the weather information 1000x each day which should be more than enough.
The background of the panel can be styled by adjusting the -fx-background-color setting in the .weather-panel selector in the weatherfx.css file.
The WeatherPanel is the main widget that you can use your JavaFX application. Instead of using existing icons like the WeatherIcons from Ikonli I've decided to create my own icons. This icons are Regions that will be styled using CSS.
I see this widget as a little demo that shows how to create a weather widget but because I just created it for a demo there is a lot of room for improvements :)

Feel free to fork the code as always on github.

That's it for today...keep coding...