• Home
  • Events
  • About
  • Friday Fun XLVIII – Calendar Heatmap

    October 27th, 2017

    Aloha,

    This week I have another little fun component for you and I bet all of you know it…

    I released another version of my TilesFX library last week and stumbled upon the contributions chart on github…sawing this matrix I instantly thought about my beloved DotMatrix control.
    So here is the chart I’m talking about…

     

    This is a really nice idea to visualize the contributions in a small and great looking way…and it perfectly fits to my DotMatrix control.

    So long story short, here is my little control…

     

     

    As you can see it is not perfectly the same but it should give you an idea. Also this control is not really a control but more an app that shows you how to build something like this by using the DotMatrix control.

    The interesting part of that control was that I needed some kind of mouse interactivity because I would like to click on a dot in the matrix and would like to get the underlying information.
    And because I’m using the JavaFX Canvas node for the DotMatrix control I needed to implement some kind of mouse click handling on my own.

    So you somehow have to check the coordinates of mouseclicks against all shapes in your JavaFX canvas node. In my case this is not that hard because I decided to simply check against the boundaries of all boxes in my matrix. In case of a hit I will fire a custom event that contains the coordinates of the dot in the matrix (e.g. the first dot has the coordinates [0,0]) and the coordinates of the mouse click as screen coordinates.

    Having this information makes it possible to click on a dot and display a tooltip or something similar.

    The code for the ContributionChart file can this time be found in a gist on github. To run this gist you will need the dotmatrix.jar file which you could either build on your own by checking out the DotMatrix source from github or you can directly download the latest jar here.

    Just keep in mind that this is not a full blown component but more a proof of concept, esp. the layout of the months, weekdays and legend is a bit hacky but it should give you an idea. The main purpose of this post is to show you what you can doo with a simple dot matrix control.

    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

    Switch and Slide

    October 24th, 2017

    Aloha,

    Last week I’ve got a link from my friends over at PiDome where they pointed me to a video that show a prototype for a mobile client for their home-automation software.

    For all of you that don’t know about PiDome go ahead and check their website…this stuff is really awesome!!! And they also have a twitter account which you can follow @Pi_Dome.

    In that little video I saw a control which sparked my interest, it was a combination of a switch and slider which absolutely makes sense if you think about switching on a light and dim it’s brightness.

    And because in TilesFX I already have a SliderTileSkin and a SwitchTileSkin I thought why not create a SwitchSliderTileSkin…?

    Well long story short on my way to Basel I simply created this Skin which tooks me not even 45min. Meaning to say you now can also use TilesFX to switch/dim a light or whatever else you have on your mind ๐Ÿ™‚

    Here is a little screenshot of the new Skin in TilesFX…

    In principle this is really just a combination of the SwitchTileSkin and the SliderTileSkin with a little difference.

    In the SliderTileSkin the thumb of the slider will visualize the minValue state by changing it’s color. So as soon as the value is larger than the minValue the thumb will switch to the barColor and it will switch to the foregroundColor when the value equals the minValue.

    In the SwitchSliderTileSkin it’s a bit different because here the Slider thumb color will also visualize the active state of the Tile.

    So the Switch will also switch the color of the Slider thumb. The Switch will toggle the active state of the Tile where the Slider will define the current value of the Tile. With these two properties you should be able to use this skin for whatever you have on your mind.

    The new SwitchSliderSkin will be in the next release of TilesFX which will be 1.4.8 but if you would like to play around with it today, feel free to fork it on github.

    Oh and btw if you have an idea for a TileSkin…please let me know ๐Ÿ™‚

    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

    Simple countdown timer

    October 18th, 2017

    Aloha,

    When I was searching the web I stumbled upon a countdown timer that looks like this…

    or this…

    When I saw that I thought this should be easy to do with my TilesFX library…BUT I also saw that I did not have a Tile that simply shows a big character in the center.

    So I’ve quickly created a CharacterTileSkin and added it to the library and now I’m able to create such a timer very easily by myself ๐Ÿ™‚

    First of all here is a screenshot of my version of the countdown timer…

    As you can see this is really a very simple skin and it just took me a couple of minutes to create it. The code which is needed to create the timer looks like this…

    The CharacterTileSkin is part of the latest TilesFX release which is 1.4.7. and which can be found on github and bintray as always.

    On the second example image above you see some kind of so called split flap like countdown timer and because I’ve created that control several times in different technologies I thought it might be a nice idea to have a tile that looks and works like a split flap element.

    Well long story short, I’ve added a FlipTileSkin to TilesFX and here it is in action…

    For those of you who would like to understand how such a SplitFlap element works you might want to check out wikipedia.

    You can provide an array of strings which will be used for the set of characters the split flap element can display. To make it more convenient for you I’ve already added some useful sets of characters like

    • Numbers from 0 to 5 (Helper.TIME_0_TO_5) useful for clocks
    • Numbers from 5 to 0 (Helper.TIME_5_TO_0) useful for countdown timers
    • Numbers from 0 to 9 (Helper.TIME_0_TO_9) useful for clocks and other numbers
    • Numbers from 9 to 0 (Helper.TIME_9_TO_0) useful for countdown timers
    • Numbers from 0 to 12 (Helper.TIME_0_TO_12) useful for clocks
    • Numbers from 12 to 0 (Helper.TIME_12_TO_0) useful for countdown timers
    • Numbers from 1 to 23 (Helper.TIME_0_TO_24) useful for clocks
    • Numbers from 23 to 0 (Helper.TIME_24_TO_0) useful for countdown timers
    • Numbers from 0 to 9 and Space (Helper.NUMERIC)
    • Numbers from 0 to 9, Space and Characters from A-Z (Helper.ALPHANUMERIC)
    • Characters from A-Z and Space (Helper.ALPHA)
    • Characters from A-Z, Space and some special Characters (Helper.EXTENDED)
    • Characters from A-Z, Space, some special Characters and Umlauts (Helper.EXTENDED_UMLAUTE)

    With this predefined set of characters you should be able to easily create a split flap panel.

    In addition you can define the flipTime in milliseconds that will be used for each flip of the split flap element. To set the split flap element to a new character simply call the setFlipText method.

    Attention:
    Keep in mind that setting the text of the split flap element to a new character might lead to a lot of “flapping” before the element reaches the new character. Meaning to say do not call the setFlipText method before the split flap element has reached the new character, otherwise it will lead to bad visual effects.
    So if you provide a characterList of 10 characters and set the flipTime to 1000ms in worst case setting the new character will take 10 seconds!

    And this is the code you need to set the new skin…

    Because I use a pseudo 3D animation here you might want to create a JavaFX camera and set it to the scene as follows…

    This camera will give you a better 3D effect during the flipping of the split flap element.

    I’ve added the code for the countdown to the tilesfxdemo project which can also find on github.

    Well that’s it…a quick and simple way to create a JavaFX countdown timer with TilesFX…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 XLVII – Back to life…

    October 13th, 2017

    Back to life…

    after all that Serverside stuff in Singapore during the last months I’m finally back home and even more important back into JavaFX ๐Ÿ™‚

    So this week I have created a little JavaFX control which I saw on my iPhone and Mac. If you know iTunes you know that little progress/timer control which Apple uses to visualize the download of a song and also the playtime of that song.

    It is not a really fancy control but maybe that is the reason why I like it, it is simple and does not need any explanation…very nice.

    So here is a little screenshot of the control I’m talking about…


    Yes it is very small so I did what I always do as a first step…I create a drawing which looks like follows…

    So this control has more or less three states

    • STOPPED
    • WAITING
    • RUNNING

    These states have different visualizations as you can see in the image above.

    The STOPPED state is visualized with a ring and a play icon which indicates to click it to start a process.

    In the waiting state the color is different and the outer ring has a gap and is rotating. In addition the icon changed from a play icon to a stop icon which indicates that you can stop the waiting by pressing the control.

    In the running state the color changed back to the original one and the progress is visualized by an additional progress bar.

    In my implementation the control will fire events in different situations, so you will find a TimerEvent class which has a Type. The types are as follows…

    • STARTED (fired when the timer was started)
    • STOPPED (fired when the timer was stopped)
    • CONTINUED (fired when the timer was stopped and not finished yet)
    • FINISHED (fired when the timer finished)
    • RESET (fired when the reset() method was called)
    • WAITING (fired when the timer was set to waiting)

    You can attach a TimerEventListener to the control and your program can react on the different events that the control will fire.

    The control has the following properties which you can use…

    • backgroundColor
    • color
    • waitingColor
    • playButtonVisible
    • duration

    Most of the properties are self explaining so I will only shortly explain the playButtonVisible property.

    Because this control might also come in handy when visualizing a download etc. it is not always needed to show the play button but only the stop button when it is running. For this reason the play button can be switched off.

    The duration defines the time the control will running until it is finished.

    Here is a little video of the control in action…

    Attention:
    I have no really use case for this control and just created it because I like it and would like to see how much does it take to implement it in JavaFX

    Well that’s it for today, so as always you will find the code over at github…

    Enjoy the upcoming weekend and…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