• Home
  • Events
  • About
  • Friday Fun XLIII

    January 12th, 2017

    Aloha,

    Today it’s just a short post but I thought it might be of interest for one or the other. Two days ago the idea came to my mind that it might be fun to combine my world map control with my heat map control. To be honest I had no idea where I could use it for but I thought it might be useful for some cases.

    So I was skimming the web for use cases and found a couple of them which let me create this little fun control for you.

    In principle it is the world map from this post that now also contains a heat map from this post. The world map has all features as the original version, the only difference is that the hover effect and selection effect is disabled by default. But you can enable it if you like.

    I was surprised how easy it was to combine both maps into one and so the whole creation took me around 30min. The harder part was to find some data that I can use to test the capabilities of the combined map.

    The problem was that I needed data that came with latitude and longitude coordinates and in the end I found a simple list that contains around 7000 cities with their latitude/longitude coordinates.

    The idea of the heat map is to visualize some kind of hot spots on a map. The hot spots become bigger the more “events” are in the same area. Long story short, here are some screenshots of the same data using different heat map settings…

    As you can see the visualization depends on the used color mapping (color gradient from center of an event to the outside) and the event radius (size of each event).

    The code to generate the upper heatmap looks as follows…

    Where the code for the lower heatmap looks like this…

    If you would like to see only the hot spots without the base background color you simply have to set fadeColors(true) and you will get something like this…

    In principle that’s all I have to share with you today and I hope it might be useful for some of you.

    As always you can find the code over at github, so feel free to fork it and use it πŸ™‚

    Oh and do not forget…keep coding πŸ˜‰

     

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    TilesFX

    December 21st, 2016

    Aloha everyone,

    This will be my last post for 2016 and I have something for you which you might like. Always when I needed a dashboard I had to create it by myself completely from scratch.

    So I’ve decided to create a little library that contains at least some tiles that might be useful for dashboards.

    And because I love to tinker around with some hardware I’ve also added some tiles for interaction (like sliders and switches).

    To make it short…here is a screenshot of the current state…

    On the screenshot above you can see all tiles that are currently available and some of them are also available in Medusa (but there you will find only gauge related tiles).

    The default size of the tiles at the moment is 250x250px and I did not spend much time in resizing etc.

    Here is a short list of tiles that are part of the library at the moment:

    • ClockTile (a simple digital clock)
    • GaugeTile (a gauge like in Medusa)
    • HighLowTile (a tile that might be useful to show current value compared to reference value)
    • LineChartTile (a simple JavaFX line chart on a tile)
    • PercentageTile (a tile that shows the current value in percentage)
    • PlusMinusTile (a tile that has 2 buttons to increase/decrease a value)
    • SliderTile (a tile with a slider to set a value)
    • SparkLineTile (a tile containing a spark line graph like in Medusa)
    • SwitchTile (a tile that has a switch to toggle a value)
    • TextTile (a tile that contains a custom text)
    • TimerControlTile (a tile with a clock and time sections to control a value)
    • WorldMapTile (a tile with a world map like the one from worldfx)
    • WeatherTile (a tile that shows weather info using DarkSky)
    • NumberTile (a tile that simply shows a number, unit and some text)
    • TimeTile (a tile that shows a LocalTime which can be used for Durations etc.)
    • BarChartTile (a simple tile showing up to 4 bars in a sorted order)

    To make use of the WeatherTile you will need a DarkSky API key which you can get at

    DarkSky.net. The nice thing about using DarkSky is that they allow you to call the weather update 1000x a day for free. This should be more than enough for your private project.

    For those of you that would like to see it in action here is a little video…

    As always you can find the binary on bintray and the code on github under the following links

    The library will also be made available on maven central and you should be able to find it when you search for tilesfx. At the moment there is not much documentation except the Demo file which is part of the source code, please take a look at it to understand the usage. Another thing that would be nice to have would be a better TileLayout for dashboards, in my Demo I use a FlowLayout which allows me to use tiles of a different size.

    REMINDER:

    Please keep in mind that all of my code is open source which does not automatically mean it’s ready for production!

    If you have the need for a specific tile…please let me know and I might add it to the library.

    Well and that’s it for 2016, I wish all of you a merry christmas and a happy new year…and do not forget…keep coding… πŸ˜‰

     

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    Friday Fun XLII

    December 15th, 2016

    Aloha,

    Last week I’ve found a nice little progress indicator on the web that I really like and so I made the decision to create it in JavaFX.

    To be honest I did not really create a progress indicator but only the animation that you can use for whatever you like.

    There is really nothing special about this control so here is a little video that shows it in action…

    And if you are interested in the source you will find it as always on github

    A really short post this week πŸ™‚

    Keep coding and enjoy x-mas πŸ™‚

     

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    Medusa Sparkline Skin

    December 5th, 2016

    Aloha,

    While working on the gauges for our customer I figured out that with the given feature set in Medusa it would also be possible to create a skin that is similar to so called Sparklines.

    The idea is to store a given number of values in an internal list and just show them in a little line graph, e.g. the last 10 measured values.

    In addition the moving average of the visualized data will be shown and the standard deviation of the data.

    It just tooks me a couple of hours last Monday night to get it done and I hope it will be somehow useful.

    Here is a little screenshot of the new skin…

    It has the following features

    • Title
    • Current Value
    • Unit
    • min value (of shown data)
    • max value (of shown data)
    • moving average (of shown data)
    • standard deviation (of shown data)

    The term “shown data” means that for example the minimum value is not the absolut ever measured minimum but only the minimum of the visible data in the line graph.

    If you need the absolut measured minimum you can ask the gauge for the getMinMeasuredValue() and/or getMaxMeasuredValue().

    The number of datapoints that will show up in the line graph can be configured by calling the setAveragingPeriod(Integer) method (the default is 10).

    The color of the line can be set by using setBarColor(Color).

    This skin is part of the current Medusa release which is already 6.5 and you can find it here

    That’s it for today…so keep coding πŸ™‚

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    Medusa KPI Skins

    November 29th, 2016

    At the current project I’m working on a JavaFX dashboard using gauges…which is awesome πŸ™‚

    And so I was looking for interesting designs that might be useful for a dashboard visualizing KPI’s (Key Performance Indicators). So I stumbled upon two interesting designs that might be a good fit for a grid or tile based dashboard layout.

    So here they are…

     

     

    The TileTextKpiSkin on the left side shows the current value by the text, a bar, the maximum value it could reach (here 100) and the value in percentage.

    The TileKpiSkin on the right side shows the current value by it’s number, a defined threshold (75) and a needle that shows where the current value is in the given range.

    Both tiles also show a title on the upper left corner.

    Well…it’s nothing special but didn’t take long to implement it so why not πŸ™‚

     

    Both skins are part of the latest Medusa version (6.3) which you can find here

     

    *** UPDATE ***

    After playing around with the new skins I came to the conclusion that it would also make sense to have the ability to visualize sections. So I’ve added them to both skins and they will be available with the next version (6.4) of Medusa.

    Here is a little screenshot of how they will look like…

     

     

    So as soon as you have sections enabled the threshold won’t be shown on the left skin (TileKpiSkin) but only the active section.

    On the right right skin (TileTextKpiSkin) the bar and the percentage text will either be colored with the default value (barColor) or with the color of the active section. I’ve also added the unit text for the right skin.

    That’s it for today…so keep coding…

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    css.php