The Source for Java Technology Collaboration
User: Password:



Kirill Grouchnikov

Kirill Grouchnikov's Blog

Adding watermarks to your GUI - now at your nearest "look and feel"

Posted by kirillcool on September 12, 2005 at 11:23 AM | Comments (22)

For me it all started with one of the first versions of ACDSee that provided watermark drawings on its toolbar. But lately, I have seen a couple of screenshots of JEdit, and a thought hit me:


Why only for the class editor? Why not for the whole application? And why not make it available for any Java application? So, the beta of the upcoming Substance look-and-feel release 2.0 provides the watermarking support (the only one besides SLAF as far as i know).

First of all, you are welcome to try it out for yourself with WebStart test application (or by downloading the runnable jar). And here is how the out-of-the-box watermarks look like (click on each screenshot to see large screenshot):


Notice how the watermarks (the first one is simple stripes, the second one is Matrix-inspired Katakana glyphs and the last one is foam bubbles) are stamped on almost everything (including toolbar and menus) without getting in the way. For the Eclipse warheads, here is an IntelliJ IDEA screenshot:


But it doesn't end here. Using a custom watermark (which is quite easy to implement), you can turn your favourite Swing-based IDE to a unique opportunity to see your favourite actress all day long :)



Don't let your wife catch you, but once she does, simply point out that you are working. For all the open-source slashdot hippies, you can even go a step further, but don't let Linus catch you:


In addition, the watermark image may come not only from local filesystem, but from the Web as well (added as requested in the comments). The image below is NetBeans in Sunset theme with watermark of Beyonce image (that matches the theme colors). The command to run NetBeans is H:\netbeans-4.2dev\bin\netbeans.exe -cp:p h:\jprojects\substance\drop\substance.jar -laf org.jvnet.substance.SubstanceLookAndFeel -J-Dsubstancelaf.theme=org.jvnet.substance.theme.SubstanceSunsetTheme -J-Dsubstancelaf.watermark=org.jvnet.substance.watermark.SubstanceImageWatermark -J-Dsubstancelaf.watermark.image=http://69.93.50.122/desktopgirls/photos/Beyonce_Knowles_810200245513PM959.jpg


Bookmark blog post: del.icio.us del.icio.us Digg Digg DZone DZone Furl Furl Reddit Reddit
Comments
Comments are listed in date ascending order (oldest first) | Post Comment

  • How did you pull that off? =)

    Posted by: olsonje on September 12, 2005 at 12:52 PM

  • If you are talking about Minnie Driver, my lovely wife made me believe that she's OK with this post (but for the home peace I ran the article by her first). If you are talking about the watermark code, you are welcome to see the code. Basically, all you need is to draw a translucent watermark layer after the backround fill but before all the rest.

    Posted by: kirillcool on September 12, 2005 at 12:55 PM

  • Very interesting! Sometime I have got to get some time to play with GUI stuff more indepth. Maybe I should cut back on the gaming in my free time! ;)

    And good luck with the wife thing! =x

    Posted by: olsonje on September 12, 2005 at 01:11 PM

  • please make an online connection of the watermark system desktopgirls.com! :)

    Posted by: herkules on September 13, 2005 at 12:59 AM

  • Herkules,
    How about a third-party add-on? The only thing that bothers me is that they don't provide an API for fetching the images, so you would have to rely on the page names and the internal layout of the galleries to fetch fullsize pictures. What happens when they change? Should you release a new LAF version just for that?
    But, i will add support for specifying image via URL (currently it's local file system only).

    Posted by: kirillcool on September 13, 2005 at 08:11 AM

  • Herkules,
    Added as requested - support for image URLs. Although you are the one that has to provide the URL - see Beyonce image above.

    Posted by: kirillcool on September 13, 2005 at 10:57 PM

  • Guillaume,
    Thanks for the link and the correction. However, it seems that this is available only for panels. What about menu bar, menu items and toolbar? Pretty much everything that has UI delegate (not custom components) has watermark drawn on it in Substance - see the last image (Beyonce).

    Posted by: kirillcool on September 14, 2005 at 03:10 AM

  • "the first as far as i know among the Java look-and-feels"

    Slaf does it since 1999. Basically, you just put a texture on the PanelUI and use coordonates relative to the top-level ancestor (or the screen). Here is an example of such a theme:

    inherit your_favorite_theme
    Panel.texture=path_to_your_image
    Panel.textureType=2

    You can also do it dynamicly:

    UIManager.getDefaults().put("Panel.texture",image);
    UIManager.getDefaults().put("Panel.textureType",new Integer(2));

    Regards, Guillaume
    Slaf

    Posted by: desnoix on September 14, 2005 at 03:29 AM

  • The texture property is supported by most component UIs, including menu bar, tool bar and menu items. But you have to set it for each of them, which is not so practical. Additionaly, you can have only one texture (in the current implementation). So if your theme already uses a texture, the watermark will replace it. Support for multiple backgrounds is planned but this is on low priority.

    Posted by: desnoix on September 14, 2005 at 03:37 AM

  • Side Note: I have added support for Substance in my projects, including JDistro 0.38. Here is a screenshot.

    Posted by: desnoix on September 14, 2005 at 06:22 AM

  • WoW! Now that's really cool!

    Posted by: evickroy on September 14, 2005 at 07:08 AM

  • Even if there is probably a security issue, to pass the watermark as a system property is really cool. I just added this "essential feature" to Slaf. Here is a screenshot of Netbeans, with the theme "pilot", taken on GNU/Linux/Kwin. It also shows the use of screen coordonates. The blue border is due to a Netbeans bug, as mentioned here.

    Posted by: desnoix on September 14, 2005 at 09:27 AM

  • Guillame,
    See this bug fix of Substance. It was not NetBeans bug after all. Thanks to herkules for reporting the bug.

    Posted by: kirillcool on September 14, 2005 at 10:35 AM


  • Very nice shots ;) . im wondering about resource usage of this watermarks ? how the cpu/mem usage compare with a none watermarked execution of an application like netbeans ?
    P.S. it would be nice if you tell us how u watermarked netbeans ?
    and which windows is running as underling os

    Posted by: kalali on September 14, 2005 at 02:10 PM

  • kalali,
    The memory / cpu is up to the specific implementation of the watermark interface. All the current implementations create a single screen-sized image when they are instantiated, and then draw specific portions of it on panels / menus / ... I haven't seen big change neither in the memory nor in the performance, but i didn't really compare. But it wasn't like "wow, where did that 200MB of RAM go?"
    NetBeans was watermarked exactly like all the rest (see the end of the post for all VM flags that were passed to the LAF). A translucent watermark layer is painted after the background fill and before the rest. The OS is XP (see the title bar and the OS bar on the bottom of the image).

    Posted by: kirillcool on September 14, 2005 at 11:07 PM

  • Kirill,
    Thanks for the reply. My problem was different. The netbeans-specific tabbedpane is using the system colors: UIManager.getColor("activeCaption") for example. And Slaf didn't update correctly these colors. This is now fixed and I have updated the screenshot. Now, there is still some "ugly" colors but I don't think I can remove them without hacking the code.

    Posted by: desnoix on September 15, 2005 at 01:32 AM

  • I need to change background color of JFrame title bar. I was able to do it by setting
    JFrame.setDefaultLookAndFeelDecorated(true).
    Now title bar looks like JInternalFrame title bar. It paints texture and I don’t want to have it. Any advice?
    Thanks,
    Vladimir

    Posted by: vreznik on September 22, 2006 at 12:02 PM

  • If you're talking about Substance, then it's by design.

    Posted by: kirillcool on September 22, 2006 at 12:03 PM

  • I'm talking about painted dots - it is
    javax.swing.plaf.metal.MetalBumps

    Posted by: vreznik on September 22, 2006 at 01:00 PM

  • If you managed to get as far as the MetalBumps, you should already know that you can't remove them without providing your own RootPaneUI implementation that returns a custom TitlePane.

    Posted by: kirillcool on September 22, 2006 at 01:04 PM

  • I know. I just didn't want to override everything, thought it can be some property in UIManager like paintBumps true/false.

    Posted by: vreznik on September 22, 2006 at 01:19 PM

  • As you can see in the implementation of MetalTitlePane.paintComponent, there is no such property.

    Posted by: kirillcool on September 22, 2006 at 02:22 PM





Powered by
Movable Type 3.01D
 Feed java.net RSS Feeds