Tuesday, May 31, 2011

Brothers from other mothers...

"Write once run anywhere"...everybody remembers these words from Sun to promote the cross-platform functionality of Java. Today, more than 10 years later this is only true in different areas (but i think Java still is the platform which gives you the best cross-platform functionality on the market). Now we have tablet devices like the iPad, Android based devices and WebOS based devices. 
The problem with this devices is that your desktop java application won't run on them. The solution to this problem could be HTML5 Canvas which makes it possible to get the same graphical experience that you knew from Java Swing in your HTML5 capable browser. 
The Canvas 2D api is in fact very similar to the Java 2D api which makes it possible to create nearly the same graphics with it.
So to get the gauges from my steelseries Java library i first thought about porting them to Android and maybe iOS too. After i started porting a gauge to Android i felt that this was the wrong approach because it meant platform dependend code.
So i took a closer look to HTML5 Canvas and figured out that porting the code to JavaScript was easier than i thought and the idea of a SteelSeries JavaScript edition was born.
I started porting single gauges to Canvas but did not find the time to combine the components into one lib.
Fortunately i'v found some time last week to get some work done on the library and migrated all available components (which means the radials, the radialbargraphs, the compass and the level component) in the steelseries.js file. In addition i've also added a led component to the lib. 
I'm quite happy with the progress but you should judge by yourself.
Therfore i created two demo's to give you the chance to compare the Java Swing version to the HTML5 Canvas version.


Attention: Switching between different designs may take some time on mobile devices because right now i completely reinitialize the complete component (improvements will follow in the near future).


Here's a little screenshot of the website...

Click me for a live demo...


and of the Java Swing version too...


Click me for a live demo...


To start the applications just click on the link below the images.

So now you have the chance to compare and judge yourself but i'm sure you will agree that HTML5 Canvas gives you the chance to create real cross-platform applications (even if i also have to say that not everything is so easy to port to Canvas...but we are just at the beginning of the new HTML5 era).

Well that's all i have to say for today...so keep coding...
Eingestellt von Han Solo um 8:10 AM
Labels: , ,

11 comments:

  1. Philip RogersMay 31, 2011 at 1:49 PM

    Have you considered ForPlay?(http://code.google.com/p/forplay) it's a Java -> {Java, HTML5 (WebGL and CSS3), Android, and Flash} cross compiler for games and graphics applications.

    ReplyDelete
  2. Han SoloMay 31, 2011 at 1:51 PM

    Hi Philip,
    Nope not yet but thx for the hint, will take a look at it...
    Cheers,
    Gerrit

    ReplyDelete
  3. gorlokJune 1, 2011 at 1:57 AM

    Amazing!

    ReplyDelete
  4. javin paulJune 1, 2011 at 3:53 PM

    Excellent example and your demo is amazing. I am just wondering is HTML5 is going to eat some Java shares on GUI programming ???

    Javin
    How HashMap works in Java

    ReplyDelete
  5. Han SoloJune 1, 2011 at 4:48 PM

    Hi Javin,
    Well i think instead of eating some Java shares in GUI programing it will make crossplatform GUI development much easier in the future, especialy on devices powered by iOS, Android and WebOS...
    Cheers,
    Gerrit

    ReplyDelete
  6. ShawnJune 8, 2011 at 3:23 PM

    Han.Solo thanks for your great Work!

    I have tried some ways to create Images from your Gauges, but i've failed.

    Here is a little Example that produces only a grey Image.
    --------------------
    Radial g = new Radial();
    g.setMaxValue(100.0);
    g.setValue(60.0);
    g.init(500, 500);
    Image img = g.createImage(g.getWidth(), g.getHeight());

    try {
    ImageIO.write((RenderedImage) img, "png", new } catch (IOException e) {
    e.printStackTrace();
    }

    -------------------

    Do you have some Idea to make it ?

    ReplyDelete
  7. Han SoloJune 9, 2011 at 9:09 AM

    Hi Shawn,
    In the upcoming release 3.9.3 of the SteelSeries library you will find a new method in each gauge which will return the current gauge as a buffered image. In addition you will also find a new method in the Util.class which will save a given buffered image to a png file. Just stay tuned...
    Cheers,
    Gerrit

    ReplyDelete
  8. ShawnJune 9, 2011 at 8:21 PM

    Thats sounds nice... :-]

    Thank you!

    greetz, Shawn

    ReplyDelete
  9. Daniel SGApril 6, 2012 at 3:56 AM

    This comment has been removed by the author.

    ReplyDelete
  10. Daniel SGApril 6, 2012 at 3:58 AM

    Han Solo!
    That's terrific work!

    I've read some words about making your work available for Android and I'm building an application for controlling the AR drone. I'd love to see good looking gauges. So, I added the SteelSeries 3.9.2 and Trident 6.2 to my build path in my Android Project. What I don't know is how to make them work correctly. I added in main.xml

    View
    class="eu.hansolo.steelseries.gauges.DigitalRadial"
    android:id="@+id/DigitalRadial"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"


    And when I try to find it in my main activity with

    test =(DigitalRadial)findViewById(R.id.DigitalRadial);
    booom! Error
    Cannot find the class file javax.swing.JComponent

    Is there a guide to get this running on Android? Perhaps I'm not using the correct libraries?

    Thanks,
    Daniel SG

    ReplyDelete
    Replies
    1. Han SoloApril 6, 2012 at 11:44 PM

      Hi Daniel,
      Well the answer is easy, there is no Swing on Android. You might want to use the html5 version in a web view.
      Cheers,
      Gerrit

      Delete

Subscribe to: Post Comments (Atom)