Archived posts from a dozen years ago.

Delicious Transblurency [1]

19 April 2010

The ‘focus‘ word has many meanings, ranging from the optical concept of ‘good convergence of light rays generated by an object’ to the cognitive process of directing the attention to a particular target while ignoring other targets.
Now the interesting part: this concept can be used in computers too, especially in user interfaces, to direct the user to relevant information or to help him through a step-by-step process. How to do that? Since every image you see on screen is ‘on focus’ by default, you can easily unfocus unuseful information.

Blurring is the act of altering images so they appear out of focus. My Maestro[2] and other illustriuos people already talked extensively about this topic here on planet KDE. However you don’t improve the world until a technology becomes available to everybody, right?

Then some days ago I read on notmart‘s blog that plasma and kwin supported blurring the background on windows.. so I rebuilt KDE4 svn, restarted it, and… boy.. does it make a difference! Look at Marco’s blog or at this picture I stole from him! All the popups become instantly more readable, even krunner does, and you immediately get the feeling that the plasma panel and all the systray applets really are above your desktop and they look as they were made of some glass/plastic material.

So: why limiting this just to some plasma applets? Well, I think that the usage of this effect must be wise, however I wanted that for my app too…

…’cause I like eye-candy! 😉

After a quick tour through the beautiful KDE svn I grabbed all the needed source code and loaded Fotowall in creator. Since I already had the structure for the blur-behind on windows in place, adding the KDE4 effect was really easy. Here are some samples of what you can get:

Fotowall using KWin's new Blur effect.

To activate the back blur you need:

  • obviously an application with a transparent background. Qt easily allows to work with transparency on top-level windows.
  • you have to enable the “blur” effect in kwin’s “desktop effects” configuration.
  • a couple of lines of code to ask kwin to activate blurring to your window.

Here is the code that does the magic:

#if defined(Q_WS_X11)
/**
  Blur behind windows (on KDE4.5+)
  Uses a feature done for Plasma 4.5+ for hinting the window manager to draw
  blur behind the window.
*/
#include <X11/Xlib.h>
#include <X11/Xatom.h>
#include <QX11Info>
static bool kde4EnableBlurBehindWindow(WId window, bool enable, const QRegion &region = QRegion())
{
    Display *dpy = QX11Info::display();
    Atom atom = XInternAtom(dpy, "_KDE_NET_WM_BLUR_BEHIND_REGION", False);

    if (enable) {
        QVector<QRect> rects = region.rects();
        QVector<quint32> data;
        for (int i = 0; i < rects.count(); i++) {
            const QRect r = rects[i];
            data << r.x() << r.y() << r.width() << r.height();
        }

        XChangeProperty(dpy, window, atom, XA_CARDINAL, 32, PropModeReplace,
                        reinterpret_cast<const unsigned char *>(data.constData()), data.size());
    } else {
        XDeleteProperty(dpy, window, atom);
    }
}
#endif

And then you can activate the blur on the caller widget with:

    kde4EnableBlurBehindWindow(winId(), true);

You could add the back blur to your application too, however I advise you that the interface is not standardized, so don’t blame either me or the kwin authors if something changes. Here is another picture, because everybody loves them 😉

Another back-blurred screen in Fotowall.

And now, as a side note, a picture from my new work place: the beautiful city of San Diego, blessed by the sun and by a ton of great programmers that by some chance happen to be co-workers of me 😉 With all the blue sky and long days, I can’t imagine a more inspiring place for making new blog posts and code experiments!

Notes:
[1] obviously the name is completely made up 😉
[2] Italian word meaning “teacher” as in school or life teacher

Comments
5 Comments »
Categories
Computer Graphics
Tags
avanguardia, creativity, fotowall, kde4, planetkde, qt, x.org

QML to KDM! Presto!!

24 December 2009
I’m really surprised you’re still reading, since the title really explains it all.. but for you, my beloved reader, I’ll spend some words more.

The KDE login Manager

The login manager is the “insert password” dialog that gets in the way when you want to use your computer. Of course you may not be the only user of the machine, so it’s somewhat needed when you share the seat. Some facts:
  • the honorable Stephan ‘coolo’ Kulow landed it in cvs Sept 2nd 1997 (yes, that’s 12 years ago)
  • great people like Waldo Bastian and David Faure worked on it
  • it’s now maintained by the über-expert Oswald ‘ossi’ Buddenhagent
  • I did the graphical themes support, implementing the GDM themes spec back in the KDE3 days
  • “The first thing you’ll notice about the new KDE 4 is it’s old login manager” – as David Vignoni says in his controversial blog entry,

The funny thing is: 1 year from now Win7 and MacOS will stare at KDM with envy!! Read on to know the future history.

Kdm Top to Bottom

Let’s say that KDM rocks ‘backend-wise’: multiple-seats, integration with running sessions, XDMCP and all the other stuff that makes kdm the top of the class. But what do you find in $SVN/KDE/kdebase/workspace/kdm ?
  • backend/* -> the display management core
  • kfrontend/*.{cpp,h} -> 90’s GUI, there is even an aliased analog clock..
  • kfrontend/themer/* -> graphical themes stuff (just 2243 source lines of code)
The themer, which is used by default, implemented the gdm theming specs but it was never package-compatible (afaik) with gdm (we lost a good inter-op chance there). It was implemented in the KDE3 days, so we had to code our ‘backing storage’ to implement transparency between layers and in the end the themes are hand-written xml files that embed some default components (line-edits for user/pass insertion, listview for user list, etc).
It looks so old-style, doesn’t it?

Qml to the rescue!

What if we throw away (or keep for “retro-compatibility”) the classic and themer frontends and just add a frontend using QML? This is the name of the language of the Qt Declarative module, that has just seen the light and will be merged into Qt for the 4.7 release.

Imagine this:

  • theme creators will have 100X or more expressive power: make snow! login via a tetris puzzle! bounce my webcam picture!
  • there will be animated themes (for login, user change, logout, etc..) or simple ones for more ‘classic’ kind of people
  • kdm only needs to add a couple of bindings to the qml runtime, like functions for logging in and shutting down / suspend the system
  • there is no need for compiled binaries, packages will be interpreted by the qml runtime – finally a painless get-hot-new-stuff (compared to plasma widgets, at least).

Conclusion

I’m not able to mock-up what comes to my mind, but just look at some qml videos on youtube to grab the concept.
What do you think about that? Could this be a low-effort high-inpact development for KDE 4?

Thanks to Davide Bettio who made me blog this.
Comments
23 Comments »
Categories
Computer Graphics
Tags
avanguardia, creativity, kde4, planetkde, qt

AddiQted to 4.6

11 October 2009

note for planetkde readers: check the original article to see the video!

I confess, I’m addiQted. You obviously think it’s normal (you’re not reading this blog by accident, aren’t you?) but it wasn’t always like this: I’ve liked some previous versions, but the upcoming Qt 4.6 really rocks!

The Fotowall case

As I shown previosly, Fotowall already uses some features of Qt 4.6. How much?
Qt 4.6 is referenced in 32 places, for example in snippets like this:

    // center the path
    QPointF pathCenter = path.boundingRect().center();
    #if QT_VERSION >= 0x040600
        path.translate(-pathCenter);
    #elif QT_VERSION >= 0x040500
        path = QTransform::fromTranslate(-pathCenter.x(), -pathCenter.y()).map(path);
    #else
        QTransform tx;
        tx.translate(-pathCenter.x(), -pathCenter.y());
        path = tx.map(path);
    #endif

From simple path translations to more complex property manipulations, everything got better. See this code snipped about extending QGraphicsObject in 4.6 versus 4.5 and 4.4.

    #if QT_VERSION >= 0x040600
    class AbstractContent : public QGraphicsObject
    #else
    class AbstractContent : public QObject, public QGraphicsItem
    #endif
    {
        Q_OBJECT
    #if QT_VERSION < 0x040600
        Q_PROPERTY(QPointF pos READ pos WRITE setPos)
        Q_PROPERTY(qreal rotation READ rotation WRITE setRotation NOTIFY rotationChanged)
    #endif
    #if QT_VERSION < 0x040600 && QT_VERSION >= 0x040500
        Q_PROPERTY(qreal opacity READ opacity WRITE setOpacity)
    #endif

Do you feel the pain?

I Need it

I need a world with Qt 4.6 only, because:

  • It’s too much of a pain to support older versions in the same codebase
  • It’s not even fair, because non-4.6 users won’t enjoy the program as it’s meant to be
  • I can’t use A TON of new features because they’ll either simplify too much the code, or just because they don’t have a pre-4.6 equivalent
  • and because I’d like to finally use
    • QGraphicsEffect for Fotowall’s content
    • QVector3D to say goodbye to enricomath.h
    • QGesture for multi-finger interaction
    • QPropertyAnimation to its full potential!

More 4.6 TEASING

  1. As you seem to like videos, here is a preview of something we’re working on for Amarok 😉 Qt 4.6 only!!
    [youtube width=”420″ height=”220″]http://www.youtube.com/watch?v=RSd9v5xHWa4[/youtube]
  2. Also, since I’m soooo much a giver, see the new Fotowall’s Word Cloud feature, coming in 0.9 😉

See you @ Munich

I’m packing for the DevDays 2009 Munich. See you there 😉

Comments
8 Comments »
Categories
Computer Graphics, Software
Tags
amarok, avanguardia, creativity, graphicsview, planetkde, planetqt, qt, qtsoftware

Cuteness 4.6

27 September 2009

Seven days after the release of the Tech Preview 1, we released the latest stable Windows build of Fotowall [1] that was based on Qt 4.6. Somebody could argue that this is a bit imprudent. We did that because the benefits of the 4.6 release are worth the risk of the move!

Indirect Benefits, or ‘what you get for free’

  • Improved quality and better speed in the OpenGL QPainter
  • Better speed in the GraphicsView framework

Direct Benefits

  • Animation Framework: this simply r0cks! I don’t know about the whole Kinetic stuff, I just mean the ability to create simple property animations.
    I don’t have a video to show you but just take a look at the Fotowall’s Top-Bar, the tabs appear and disappear with a nice and smooth grow-shrink animation, that make the program look soo 2009-ish! finally!
  • QNetworkReply::isFinished(): thanks to this method I could implement a smart time-saver: when the user starts to drag a flickr picture, Fotowall starts downloading it. It can happen that, upon drop, the content has already been completely downloaded (so it can be placed in the canvas) or partially downloaded (so the used only needs to wait for the missing percent)

Drawbacks

  • There are some graphics glitches when animating the opacity property of a QGaphicsProxyWidget (in OpenGL)
  • Even by setting the QGraphicsItem::ItemSendsGeometryChanges flag, the previous behavior is not perfectly restored (we used itemChange, and the new behavior doesn’t allow Fotowall’s mirrors to sync properly to the objects)

Movie Time!

I’ve tried hard to record a screencast about the Cuteness & Performance of Qt 4.6, but in the end I had to use my camera.

[youtube width=”500″ height=”305″]http://www.youtube.com/watch?v=tVzzF_ft7uc[/youtube]

Thanks Nokia for this great release! 😉

[1] Fotowall is a creative program to mix local and online graphics content and build original work.

Comments
14 Comments »
Categories
Computer Graphics, Interests
Tags
avanguardia, creativity, figosità, fotowall, graphicsview, open source, planetkde, planetqt, qt

Elements of Ui Design – ColorPicker

23 November 2007

Update: the source code is included in the Fotowall project. The files you’re looking for are the ColorPickerItem ones.

Say you’re writing an application and you want to let the user to change the color of an item; what will you do?

The standard approach is to popup a color dialog with the standard HSV selector and all the sliders and values and buttons and confusion. Another approach is to pop down a combobox with a selection of default colors where the user won’t find the colour she is looking for (unless it’s RED, of course :-)).
Both approaches need you to get shocked by another window appearing right in front of you, so you loose the context and move the mouse far away from where it was.

Let’s take a look at this new approach:

[youtube=http://www.youtube.com/watch?v=XcLwLQQGiks]

The 2d (yet perspective transformed) dialog smoothly fades in when hovering the color and your favorite hue is just 1 or 2 clicks apart!

Comments
Comments Off on Elements of Ui Design – ColorPicker
Categories
Computer Graphics, Software
Tags
colorpicker, graphicsview

Blogroll

  • Ariya Hidayat's Blog
  • Davide La Rosa
  • PlanetKDE
  • Pollycoke
  • Qt Labs
  • Yanko Design
  • Zack Rusin's Blog

Recent Posts

  • How to recognize a revolution
  • KDE 3 on “The Social Network” movie
  • Delicious Transblurency [1]
  • Grab one, it’s free!
  • Gift a cool idea!

Tags

amarok Android avanguardia cheating colorpicker creativity curriculum figosità fotowall future graphicsview heroes kde3 kde4 life M31 multi-touch nokia open source planetkde planetqt posterazor qt qtsoftware statistics summer of code wallpaper x.org

Archives

  • April 2011 (1)
  • September 2010 (1)
  • April 2010 (1)
  • January 2010 (1)
  • December 2009 (3)
  • October 2009 (1)
  • September 2009 (4)
  • August 2009 (1)
  • July 2009 (3)
  • June 2009 (3)
  • May 2009 (2)
  • April 2009 (3)
  • March 2009 (1)
  • January 2009 (2)
  • May 2008 (1)
  • April 2008 (1)
  • January 2008 (2)
  • December 2007 (1)
  • November 2007 (1)
  • September 2007 (3)