{"id":514,"date":"2010-04-19T00:53:37","date_gmt":"2010-04-19T07:53:37","guid":{"rendered":"http:\/\/www.enricoros.com\/blog\/?p=514"},"modified":"2013-04-21T15:51:15","modified_gmt":"2013-04-21T22:51:15","slug":"delicious-transblurency","status":"publish","type":"post","link":"https:\/\/www.enricoros.com\/oldblog\/2010\/04\/delicious-transblurency\/","title":{"rendered":"Delicious Transblurency [1]"},"content":{"rendered":"<p>The &#8216;<strong>focus<\/strong>&#8216; word has many meanings, ranging from the optical concept of &#8216;good convergence of light rays generated by an object&#8217; to the cognitive process of directing the attention to a particular target while ignoring other targets.<br \/>\nNow 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 &#8216;on focus&#8217; by default, you can easily <strong>unfocus<\/strong> unuseful information.<\/p>\n<p><strong>Blurring<\/strong> is the act of altering images so they appear out of focus. My <a href=\"http:\/\/ariya.blogspot.com\/2008\/02\/to-blur-or-not-to-blur.html\">Maestro<\/a>[2] and other <a href=\"http:\/\/zrusin.blogspot.com\/2006\/07\/more-blurring.html\">illustriuos<\/a> people already talked extensively about this topic here on <a href=\"http:\/\/www.planetkde.org\">planet KDE<\/a>. However you don&#8217;t improve the world until a technology becomes available to everybody, right?<\/p>\n<p><a href=\"http:\/\/www.enricoros.com\/blog\/wp-content\/uploads\/2010\/04\/blurandmonochrome.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-519\" title=\"blurandmonochrome\" src=\"http:\/\/www.enricoros.com\/blog\/wp-content\/uploads\/2010\/04\/blurandmonochrome.png\" alt=\"\" width=\"312\" height=\"150\" srcset=\"https:\/\/www.enricoros.com\/oldblog\/wp-content\/uploads\/2010\/04\/blurandmonochrome.png 312w, https:\/\/www.enricoros.com\/oldblog\/wp-content\/uploads\/2010\/04\/blurandmonochrome-300x144.png 300w\" sizes=\"auto, (max-width: 312px) 100vw, 312px\" \/><\/a>Then some days ago I read on <a href=\"http:\/\/www.notmart.org\/index.php\/Software\/Small_goodies\">notmart<\/a>&#8216;s blog that plasma and kwin supported blurring the background on windows.. so I rebuilt KDE4 svn, restarted it, and&#8230; boy.. does it make a difference! Look at Marco&#8217;s blog or at this picture I <span style=\"text-decoration: underline;\">stole<\/span> 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.<\/p>\n<p>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&#8230;<\/p>\n<h3>&#8230;&#8217;cause I like eye-candy! \ud83d\ude09<\/h3>\n<p>After a quick tour through the beautiful KDE svn I grabbed all the needed source code and loaded <a href=\"http:\/\/www.enricoros.com\/opensource\/fotowall\/\">Fotowall<\/a> in creator. Since I already had the structure for the <a href=\"http:\/\/labs.trolltech.com\/blogs\/2009\/09\/15\/using-blur-behind-on-windows\/\">blur-behind on windows<\/a> in place, adding the KDE4 effect was really easy. Here are some samples of what you can get:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.enricoros.com\/blog\/wp-content\/uploads\/2010\/04\/fotowall-window.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-516  aligncenter\" title=\"fotowall-window\" src=\"http:\/\/www.enricoros.com\/blog\/wp-content\/uploads\/2010\/04\/fotowall-window-300x214.jpg\" alt=\"Fotowall using KWin's new Blur effect.\" width=\"300\" height=\"214\" srcset=\"https:\/\/www.enricoros.com\/oldblog\/wp-content\/uploads\/2010\/04\/fotowall-window-300x214.jpg 300w, https:\/\/www.enricoros.com\/oldblog\/wp-content\/uploads\/2010\/04\/fotowall-window.jpg 846w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>To activate the back blur you need:<\/p>\n<ul>\n<li>obviously an application with a transparent background. Qt easily allows to work with transparency on top-level windows.<\/li>\n<li>you have to enable the &#8220;blur&#8221; effect in kwin&#8217;s &#8220;desktop effects&#8221; configuration.<\/li>\n<li>a couple of lines of code to ask kwin to activate blurring to your window.<\/li>\n<\/ul>\n<p>Here is the code that does the magic:<\/p>\n<pre class=\"brush: cpp; collapse: false; title: ; notranslate\" title=\"\">\r\n#if defined(Q_WS_X11)\r\n\/**\r\n  Blur behind windows (on KDE4.5+)\r\n  Uses a feature done for Plasma 4.5+ for hinting the window manager to draw\r\n  blur behind the window.\r\n*\/\r\n#include &lt;X11\/Xlib.h&gt;\r\n#include &lt;X11\/Xatom.h&gt;\r\n#include &lt;QX11Info&gt;\r\nstatic bool kde4EnableBlurBehindWindow(WId window, bool enable, const QRegion &amp;region = QRegion())\r\n{\r\n    Display *dpy = QX11Info::display();\r\n    Atom atom = XInternAtom(dpy, &quot;_KDE_NET_WM_BLUR_BEHIND_REGION&quot;, False);\r\n\r\n    if (enable) {\r\n        QVector&lt;QRect&gt; rects = region.rects();\r\n        QVector&lt;quint32&gt; data;\r\n        for (int i = 0; i &lt; rects.count(); i++) {\r\n            const QRect r = rects&#x5B;i];\r\n            data &lt;&lt; r.x() &lt;&lt; r.y() &lt;&lt; r.width() &lt;&lt; r.height();\r\n        }\r\n\r\n        XChangeProperty(dpy, window, atom, XA_CARDINAL, 32, PropModeReplace,\r\n                        reinterpret_cast&lt;const unsigned char *&gt;(data.constData()), data.size());\r\n    } else {\r\n        XDeleteProperty(dpy, window, atom);\r\n    }\r\n}\r\n#endif\r\n<\/pre>\n<p>And then you can activate the blur on the caller widget with:<\/p>\n<pre class=\"brush: cpp; collapse: false; title: ; notranslate\" title=\"\">\r\n    kde4EnableBlurBehindWindow(winId(), true);\r\n<\/pre>\n<p>You <em>could<\/em> add the back blur to your application too, however I advise you that the interface is not standardized, so don&#8217;t blame either me or the kwin authors if something changes. Here is another picture, because everybody loves them \ud83d\ude09<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.enricoros.com\/blog\/wp-content\/uploads\/2010\/04\/fotowall-mainscreen.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-524    aligncenter\" title=\"fotowall-mainscreen\" src=\"http:\/\/www.enricoros.com\/blog\/wp-content\/uploads\/2010\/04\/fotowall-mainscreen-300x202.png\" alt=\"Another back-blurred screen in Fotowall.\" width=\"300\" height=\"202\" srcset=\"https:\/\/www.enricoros.com\/oldblog\/wp-content\/uploads\/2010\/04\/fotowall-mainscreen-300x202.png 300w, https:\/\/www.enricoros.com\/oldblog\/wp-content\/uploads\/2010\/04\/fotowall-mainscreen.png 916w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/www.enricoros.com\/blog\/wp-content\/uploads\/2010\/04\/fotowall-mainscreen.png\"><\/a>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 \ud83d\ude09 With all the blue sky and long days, I can&#8217;t imagine a more inspiring place for making new blog posts and code experiments!<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.enricoros.com\/blog\/wp-content\/uploads\/2010\/04\/erosinsd.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-525    aligncenter\" title=\"erosinsd\" src=\"http:\/\/www.enricoros.com\/blog\/wp-content\/uploads\/2010\/04\/erosinsd-225x300.jpg\" alt=\"\" width=\"225\" height=\"300\" srcset=\"https:\/\/www.enricoros.com\/oldblog\/wp-content\/uploads\/2010\/04\/erosinsd-225x300.jpg 225w, https:\/\/www.enricoros.com\/oldblog\/wp-content\/uploads\/2010\/04\/erosinsd.jpg 384w\" sizes=\"auto, (max-width: 225px) 100vw, 225px\" \/><\/a><\/p>\n<p>Notes:<br \/>\n[1] obviously the name is completely made up \ud83d\ude09<br \/>\n[2] Italian word meaning &#8220;teacher&#8221; as in <em>school<\/em> or <em>life<\/em> teacher<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The &#8216;focus&#8216; word has many meanings, ranging from the optical concept of &#8216;good convergence of light rays generated by an object&#8217; 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[10,13,9,18,23,26,34],"class_list":["post-514","post","type-post","status-publish","format-standard","hentry","category-computer-graphics","tag-avanguardia","tag-creativity","tag-fotowall","tag-kde4","tag-planetkde","tag-qt","tag-x-org"],"_links":{"self":[{"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/posts\/514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/comments?post=514"}],"version-history":[{"count":24,"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/posts\/514\/revisions"}],"predecessor-version":[{"id":530,"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/posts\/514\/revisions\/530"}],"wp:attachment":[{"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/media?parent=514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/categories?post=514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.enricoros.com\/oldblog\/wp-json\/wp\/v2\/tags?post=514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}