Cinnamon effects and visual transparency

[FredLx]

Fiddling around with Cinnamon it's apparent that the potential is fantastic for quickly customizing your desktop. I also like how most of the theming is CSS based. But after looking around a bit, there are some visual things lacking.

Mainly what this post is about is the transparency in themes. I think transparency is useless unless you can blur the transparency of the window. Many of the custom themes available for Cinnamon use transparency but they are hindered without a blurring effect to help disinguish the foreground text/icons and background desktop (this is especially apparent with a transparent menu). As far as I know, this is unfortunately not possible to do with pure CSS styling which is how the Cinnamon appearance seems to be controlled. Is this capability expected in the future or is there some little known workaround that exists? If not, I think this needs to be addressed if Cinnamon wants to be a robust desktop environment. I, of course, would like nothing more than that and appreciate the work of the Linux Mint team and the community.

[bimsebasse]

This is pretty much my annoying mantra every time I comment on a theme with transparency

A little transparency = OK! A lot = just doesn't work, certainly not without blur.

At the moment things like added blur support will understandably have very low priority in the Cinnamon development but I suggest you add the issue on Cinnamon's github page so the devs can see it there and possibly come back to it when time permits.

[dsplayname]

The transparency issue is something I've been thinking about, and have started looking into a solution.
My idea about it is that we are not limited to simple color/transparency/gradient options for the panel and menus. I have looked at some CSS theme that uses images specified by "background url". I'm not sure yet, but I think there may be a way to kinda slip/sneak in a little bit of html5, and have it handle a transparency blur. Either that, or simply make a big image that is trans with a blur effect in it. Not sure how to do it, but I think it could probably be done in gimp.
Not really a solution, but I think it's one of the more feasible directions to start working towards a fix.

[esteban1uy]

No necro-bump intented, but I've been trying to create a blur effect for Cinnamon and after a while (I'm not a coder) I got this (the effect applied to the menu):

Instead of using a CSS trick (it works for Firefox but not for Cinnamon) I created a Clutter based effect taking Clutter's own "blur" as a reference.
Clutter has some interesting effects. For example, this is the Cinnamon menu with Clutter's blur applied:

As you can see the menu gets blurred, but that's not what we wanted. We want the area of the desktop behind the menu to get blurred.

So I took the code of Clutter's blur effect and started tweaking it. The first problem was how to obtain a copy of those pixels behind certain "actor". Fortunately there's a function in Cogl (the library that Clutter uses for 3D rendering) that takes snapshots of a selected area of the "stage" and loads those pixels to a memory buffer. That function is exactly the same the Cinnamon (and Gnome-shell) desktop recorder uses to do its stuff: cogl_read_pixels().
Using that memory buffer we can create a new "texture", load it as an opaque layer in a cogl pipeline and apply a glsl boxed blur effect (the same snippet as the original clutter's effect), and then put the proper actor's texture as another layer upon that, so what you can see through the actor's transparent areas is that blurred copy of the desktop and not the real desktop.

But as always, there's a catch.
The cogl_read_pixels function takes very little resources but is not very fast, so the effect makes the applets, panel or whatever it is applied a little slower than usual. And there's also another problem with this approach that some users have experienced with the desktop recorder: the blue glitches.
For some reason (?) the cogl_read_pixels function returns images with random blue patterns while running in certain specific graphic cards. That's an old known Cogl bug but it doesn't seem to have been fixed. Here you can see what it looks like: http://www.youtube.com/watch?v=4oO885A9w4A

So now I'm trying something else. Instead of using that dreaded cogl_read_pixels function, I'm looking for a way to clone the desktop to an offscreen texture and obtain the required background portions as sub-textures, so I can feed my effect with a texture from a less problematic (and faster) source.

By the way, if some of you know how to get a clone of the Cinnamon desktop (stage) as a hidden actor, please let me know!!!
(I think something like that already exists, because the "overlay" works that way, but I didn't find a way to locate that misterious "actor").

[esteban1uy]

Good news!

I finally managed to get rid of the "blue glitches" in my blurred backgrounds effect code.
Now I have to improve the way to access the pixels behind the actors... and it will be ready!

By the way, for those not afraid of recompiling cinnamon from the source package, I can provide a patch to include the effect. Just pm me.

[bimsebasse]

How do I try this thing esteban?

[esteban1uy]

How do I try this thing esteban?

It's really easy if you have some experience compiling Cinnamon from its source package.

Let's say you have cinnamon-nightly installed from ppa:gwendal-lebihan-dev and one of those very transparent cinnamon themes (minty-transparent, for example), and of course, the build tools and cinnamon dev dependencies.
Then get the cinnamon sources:

Code: Select all

apt-get source cinnamon

And then copy the text from here: http://pastebin.com/Wc40eXH3
Save it inside the cinnamon source folder with the name "bgeffect.diff", open a terminal in that folder and execute this:

Code: Select all

patch -p1 < bgeffect.diff

Then, recompile the normal way (dpkg-buildpackage -rfakeroot -uc -us), install the newly created package that you'll find in your home folder (sudo dpkg -i *.deb) and reboot (total time for the whole procedure: 5 minutes).

As you will see, I applied the effect only to the menu and the calendar applets, just to see how they look, but you can use it with any applet inserting this code in its applet.js file immediately after the line that says "this.menuManager.addMenu...":

Code: Select all

            fx = new St.BackgroundEffect();
            this.menu.actor.add_effect_with_name('blur',fx);

You can apply the effect to any actor. You only have to locate the place in the javascript file that creates the actor and then apply the effect as shown before, so you could possibly use it for the panel, the popups, etc.

And of course, to revert to the "normal" package you can simply uninstall cinnamon (sudo apt-get purge cinnamon) and re-install it (sudo apt-get install cinnamon).
Also take into account that it's an early implementation, so I still have to find a way to make it work faster... but I'm getting closer.

[palo]

Thank you for working on this. I am trying to follow you and test this and do not know anything about coding but usually have no trouble with your instructions between this and the freezing post. Can you please suggest what may be wrong to cause this:

Code: Select all

test@test-VirtualBox ~/cinnamon-1.5.2-20120809044010/src $ patch -p1 < bgeffect.diff
(Patch is indented 4 spaces.)
can't find file to patch at input line 4
Perhaps you used the wrong -p or --strip option?
The text leading up to this was:
--------------------------
|    diff -ruN a/files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js b/files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js
|    --- a/files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js  2012-08-04 23:40:06.000000000 -0300
|    +++ b/files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js  2012-08-01 10:46:36.546118615 -0300
--------------------------
File to patch:


line 4 is:

Code: Select all

    @@ -41,6 +41,8 @@

with the spaces - should I remove the spaces? In your code there are no spaces - all I did was copy/paste and don't understand why that happened.

Pat

[esteban1uy]

Thank you for working on this. I am trying to follow you and test this and do not know anything about coding but usually have no trouble with your instructions between this and the freezing post. Can you please suggest what may be wrong to cause this:

Code: Select all

test@test-VirtualBox ~/cinnamon-1.5.2-20120809044010/src $ patch -p1 < bgeffect.diff
(Patch is indented 4 spaces.)
can't find file to patch at input line 4
Perhaps you used the wrong -p or --strip option?
The text leading up to this was:
--------------------------
|    diff -ruN a/files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js b/files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js
|    --- a/files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js  2012-08-04 23:40:06.000000000 -0300
|    +++ b/files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js  2012-08-01 10:46:36.546118615 -0300
--------------------------
File to patch:


line 4 is:

Code: Select all

    @@ -41,6 +41,8 @@

with the spaces - should I remove the spaces? In your code there are no spaces - all I did was copy/paste and don't understand why that happened.

Pat

You have to copy the "raw" text from pastebin!
Let's make it simple. Copy the text from here: http://pastebin.com/raw.php?i=Wc40eXH3
(the same pastebin, but in raw format).
Then, open gedit, paste the text and save it, with the name "bgeffect.diff", inside the folder named "cinnamon-1..." that resides in your personal folder and then, from inside that same folder, open a terminal and execute the following:

Code: Select all

patch -p1 < bgeffect.diff

[esteban1uy]

Well... a little tweak and now it runs really really fast.

For those who want to try it, here is the updated patch: http://pastebin.com/raw.php?i=pjWSYk9h

Suggestions and comments are welcome!

[palo]

Thank you for the tips earlier - my desire outweighs my ability sadly; the "raw" did make a difference as far as the spaces but still hangs about line 4. The lastest patch fails for me too (aaaargh):

Code: Select all

test@test-VirtualBox ~/cinnamon-1.5.2-20120809044010/src $ patch -p1 < bgeffect.diff
can't find file to patch at input line 4
Perhaps you used the wrong -p or --strip option?
The text leading up to this was:
--------------------------
|diff -ruN a/files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js b/files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js
|--- a/files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js   2012-08-04 23:40:06.000000000 -0300
|+++ b/files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js   2012-08-01 10:46:36.546118615 -0300
--------------------------
File to patch:


I wish I could get this to work - will keep trying.

Pat

[esteban1uy]

Thank you for the tips earlier - my desire outweighs my ability sadly; the "raw" did make a difference as far as the spaces but still hangs about line 4. The lastest patch fails for me too (aaaargh):

Code: Select all

test@test-VirtualBox ~/cinnamon-1.5.2-20120809044010/src $ patch -p1 < bgeffect.diff
can't find file to patch at input line 4
Perhaps you used the wrong -p or --strip option?
The text leading up to this was:
--------------------------
|diff -ruN a/files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js b/files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js
|--- a/files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js   2012-08-04 23:40:06.000000000 -0300
|+++ b/files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js   2012-08-01 10:46:36.546118615 -0300
--------------------------
File to patch:


I wish I could get this to work - will keep trying.

Pat

That's because you are not in the "cinnamon-1.5.2-20120809044010" folder, but in the "src" folder that is inside it!
This is what you posted:

Code: Select all

test@test-VirtualBox ~/cinnamon-1.5.2-20120809044010/src $ patch -p1 < bgeffect.diff

And it sould be:

Code: Select all

test@test-VirtualBox ~/cinnamon-1.5.2-20120809044010 $ patch -p1 < bgeffect.diff

You have to put the patch file inside "cinnamon-1.5.2-20120809044010" and then, from inside that folder, run the "patch -p1 < bgeffect.diff" command.

[palo]

Ha ha! Just logged on to say nevermind - I figured that out. Compiling now. Thanks

[esteban1uy]

Another day, another tweak.
This one is the fastest (till now): http://pastebin.com/raw.php?i=Sxsu6cLj

By the way, the patch applies the effect to the Cinnamon menu and the calendar applets only, just to provide a test of how it looks.
But if someone wants to apply the effect to ANY applet (and its context menus too), then discard the two first sections of the patch by deleting all the lines before this one:

Code: Select all

diff -ruN a/src/Makefile.in b/src/Makefile.in

and then apply the patch as explained. Reboot and then open the file usr/share/cinnamon/js/ui/popupMenu.js and locate this code:

Code: Select all

    addMenu: function(menu, position) {
        let menudata = {
            menu:              menu,
            openStateChangeId: menu.connect('open-state-changed', Lang.bind(this, this._onMenuOpenState)),
            childMenuAddedId:  menu.connect('child-menu-added', Lang.bind(this, this._onChildMenuAdded)),
            childMenuRemovedId: menu.connect('child-menu-removed', Lang.bind(this, this._onChildMenuRemoved)),
            destroyId:         menu.connect('destroy', Lang.bind(this, this._onMenuDestroy)),
            enterId:           0,
            focusInId:         0
        };

        let source = menu.sourceActor;
        if (source) {
            menudata.enterId = source.connect('enter-event', Lang.bind(this, function() { this._onMenuSourceEnter(menu); }));
            menudata.focusInId = source.connect('key-focus-in', Lang.bind(this, function() { this._onMenuSourceEnter(menu); }));
        }

        if (position == undefined)
            this._menus.push(menudata);
        else
            this._menus.splice(position, 0, menudata);

and change it to this (two lines added at the end):

Code: Select all

    addMenu: function(menu, position) {
        let menudata = {
            menu:              menu,
            openStateChangeId: menu.connect('open-state-changed', Lang.bind(this, this._onMenuOpenState)),
            childMenuAddedId:  menu.connect('child-menu-added', Lang.bind(this, this._onChildMenuAdded)),
            childMenuRemovedId: menu.connect('child-menu-removed', Lang.bind(this, this._onChildMenuRemoved)),
            destroyId:         menu.connect('destroy', Lang.bind(this, this._onMenuDestroy)),
            enterId:           0,
            focusInId:         0
        };

        let source = menu.sourceActor;
        if (source) {
            menudata.enterId = source.connect('enter-event', Lang.bind(this, function() { this._onMenuSourceEnter(menu); }));
            menudata.focusInId = source.connect('key-focus-in', Lang.bind(this, function() { this._onMenuSourceEnter(menu); }));
        }

        if (position == undefined)
            this._menus.push(menudata);
        else
            this._menus.splice(position, 0, menudata);

        fx = new St.BackgroundEffect();              // blurred backgrounds
        menu.actor.add_effect_with_name('blur',fx); // effect for all the applets! 

Then restart Cinnamon and voilà, all the applets will have blurred backgrounds!

[Mauldred]

Hi everyone,

Sorry, I know that this thread is quite old, but I didn't found any other newer thread about this subject.

I'm trying to apply the last patch proposed by esteban on my Linux Mint 14 (32 bits) with Cinnamon 1.6.7, and it's unfortunately not working. I would like to know if you have any idea of what I should do to adapt this method to the new Cinnamon used on Linux Mint 14. Here is the result I get :

Code: Select all

mauldred@trantor ~/Cinnamon-1.6.7 $ patch -p1 < bgeffect.diff
patching file files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js
Hunk #1 FAILED at 641.
1 out of 1 hunk FAILED -- saving rejects to file files/usr/share/cinnamon/applets/menu@cinnamon.org/applet.js.rej
can't find file to patch at input line 29
Perhaps you used the wrong -p or --strip option?
The text leading up to this was:
--------------------------
|diff -ruN a/src/Makefile.in b/src/Makefile.in
|--- a/src/Makefile.in   2012-08-04 23:41:01.000000000 -0300
|+++ b/src/Makefile.in   2012-08-01 10:46:36.546118615 -0300
--------------------------
File to patch:

So it is quite similar to the error message that Palo got when he was not in the right directory, but I think I'm in the right one... or ain't I ?

I have installed Linux Mint 14 on my VirtualBox, and I was trying to tweak a little bit the default theme which is too blank and flat for me. I come from Mac OS X and I'm willing to switch to Linux to get rid of the proprietary locks, however I'm used to have a nice interface that looks polished, and I thought Cinnamon with some tweaks could be the [strike]droid[/strike]DE I'm looking for. Except that it's not easy to customize it in some details. Like for example... the blurry transparency ! That is a default feature in Mac OS X and Windows 7, but surprisingly hard to find on most Linux distros (even with KDE).

So I'm very happy to have finally found this thread ! Very good work ! If that could be adapted to the newer versions of Cinnamon or (let's dream) if that could become officially a featured option in the next ones, Cinnamon would be much better than KDE to my eyes !

[esteban1uy]

Hi everyone,

Sorry, I know that this thread is quite old, but I didn't found any other newer thread about this subject.

I'm trying to apply the last patch proposed by esteban on my Linux Mint 14 (32 bits) with Cinnamon 1.6.7, and it's unfortunately not working. I would like to know if you have any idea of what I should do to adapt this method to the new Cinnamon used on Linux Mint 14. Here is the result I get :

Code: Select all

mauldred@trantor ~/Cinnamon-1.6.7 $ patch -p1 < bgeffect.diff
patching file files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js
Hunk #1 FAILED at 641.
1 out of 1 hunk FAILED -- saving rejects to file files/usr/share/cinnamon/applets/menu@cinnamon.org/applet.js.rej
can't find file to patch at input line 29
Perhaps you used the wrong -p or --strip option?
The text leading up to this was:
--------------------------
|diff -ruN a/src/Makefile.in b/src/Makefile.in
|--- a/src/Makefile.in   2012-08-04 23:41:01.000000000 -0300
|+++ b/src/Makefile.in   2012-08-01 10:46:36.546118615 -0300
--------------------------
File to patch:

So it is quite similar to the error message that Palo got when he was not in the right directory, but I think I'm in the right one... or ain't I ?

I have installed Linux Mint 14 on my VirtualBox, and I was trying to tweak a little bit the default theme which is too blank and flat for me. I come from Mac OS X and I'm willing to switch to Linux to get rid of the proprietary locks, however I'm used to have a nice interface that looks polished, and I thought Cinnamon with some tweaks could be the [strike]droid[/strike]DE I'm looking for. Except that it's not easy to customize it in some details. Like for example... the blurry transparency ! That is a default feature in Mac OS X and Windows 7, but surprisingly hard to find on most Linux distros (even with KDE).

So I'm very happy to have finally found this thread ! Very good work ! If that could be adapted to the newer versions of Cinnamon or (let's dream) if that could become officially a featured option in the next ones, Cinnamon would be much better than KDE to my eyes !

Oh, that code is really really old. We are working to add "blurry backgrounds" support to Cinnamon, and also "bumpmap backgrounds". Take a look at this:




If you are interested I can provide a patch and the instructions to add those bumpmaps and blurry backgrounds to the last Cinnamon, but remember: it's very experimental and it is only supported by modern GPUs.

[bimsebasse]

Hehe, personal opinion:

Blurry background: AWESOME! BRING IT!
Bumpmaps: LOATHSOME! BURN IT!

[esteban1uy]

Hehe, personal opinion:

Blurry background: AWESOME! BRING IT!
Bumpmaps: LOATHSOME! BURN IT!

That's the reason I'm trying to implement both effects. Then, if you find the bumpmaps thing so repulsive but you love those [old/common/ordinary/tiring/seen everywhere] blurry backgrounds... you could have your choice, grandpa!

[bimsebasse]

[Mauldred]

Thanks a lot, esteban1uy.

I find the first bumbmap style interesting, but sometimes I agree with bimsebasse, "old" doesn't always mean "bad" - it's especially true for music and wine, and some video games too.

So it's good to have the choice ! I am interested if you can propose us a patch with those effects, and I'll keep you informed of the results on my machine. My GPU isn't among the newest ones (Nvdia 9600M GT), but I can have a try.