Cinnamon effects and visual transparency

Please post suggestions for improvement of Cinnamon on:
https://github.com/linuxmint/Cinnamon
Forum rules
Before you post read how to get help. Topics in this forum are automatically closed 6 months after creation.
esteban1uy

Re: Cinnamon effects and visual transparency

Post by esteban1uy »

Mauldred wrote:Thanks a lot, esteban1uy. :D

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. :mrgreen:

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. :wink:
I never said that old = bad, I said that blurry = boring, but I admit that it could also be blurry = classy (so sometimes classy = boring :lol: :lol: :lol: :lol: ).

Ok, here we go.

Please ensure you have the correct deb-src repositories for your distribution in /etc/apt/sources.list (as explained here), then open a terminal and execute the following code:

Code: Select all

apt update
apt install dpkg-dev devscripts
apt build-dep cinnamon
Then obtain the sources with this command:

Code: Select all

git clone --branch=esteban1uy-background-effects git://github.com/autarkper/Cinnamon.git
And now you can compile it with:

Code: Select all

cd Cinnamon
./autogen.sh
dpkg-buildpackage
After that, you're ready to install the patched Cinnamon:

Code: Select all

cd ..
sudo dpkg -i *.deb
Log off and log in to load the new Cinnamon.

Because both the blurry backgrounds and the bumpmaps are defined as css properties in the stylesheet of a theme (they are intented for theme designers), you have to include them in the theme of your choice.
Let's say you want to add blurry backgrounds to the menus of the Cinnamon theme "Minty".
So you open Minty's css stylesheet:

Code: Select all

sudo gedit /usr/share/themes/Minty/cinnamon/cinnamon.css
Locate the .popup-menu section:

Code: Select all

.popup-menu {
    min-width: 100px;
}
And add the amount of blur you whish:

Code: Select all

.popup-menu {
    min-width: 100px;
    background-blur: 2.5;
}
Save, reload the theme and voilà:
Image

The same can by applied to the panels, Looking Glass, notifications and modal dialogs. Just remember to not mix blurry backgrounds with box-shadow, it tends to look a little weird.

About the bumpmaps thing, each bumpmap effect is controlled by a little image file (the bumpmap itself) that a theme designer could add to his theme, so if a designer wants to add something that looks, let's say, like water waves, he can create that little file (for example: "water.png") using Photoshop or Gimp and define it for an element in the stylesheet by adding background-bumpmap: url("water.png"); :
Image
So the possibilities are endless.
I think the problem is that I'm not very good at graphic design (I'm only 13 y/o) or maybe my taste is not very good, so I wasn't able to provide good examples of how it can be used.
bimsebasse

Re: Cinnamon effects and visual transparency

Post by bimsebasse »

Esteban, this is ...... amazing. I didn't know it was gonna be implemented as something you could control on theme level (thought it was gonna be hardcoded blur underneath all objects with transparency.)

This is gonna be the top new feature in whatever Cinnamon version this will land in - easily.

Already know what's gonna happen: I'll add some tasteful, subtle blur to e.g. my dark Nadia theme, no one noticing, then some other dude will do a silly designer's nightmare theme with a kitchy bumpmaps effect and it's gonna be all the rage :D
esteban1uy

Re: Cinnamon effects and visual transparency

Post by esteban1uy »

bimsebasse wrote:Esteban, this is ...... amazing. I didn't know it was gonna be implemented as something you could control on theme level (thought it was gonna be hardcoded blur underneath all objects with transparency.)

This is gonna be the top new feature in whatever Cinnamon version this will land in - easily.

Already know what's gonna happen: I'll add some tasteful, subtle blur to e.g. my dark Nadia theme, no one noticing, then some other dude will do a silly designer's nightmare theme with a kitchy bumpmaps effect and it's gonna be all the rage :D
Thank you!!! :D

Then everyone would have what he wants: you want a delicate and tasteful theme, use bimsebasse's, you want a cheesy kitchy theme, use some other guy's one!

:wink:
bimsebasse

Re: Cinnamon effects and visual transparency

Post by bimsebasse »

:D

Gnome shell only theme makers are gonna be sooooo envious!
Mauldred

Re: Cinnamon effects and visual transparency

Post by Mauldred »

That's really awesome ! :D :D :D

The result on my screen : gorgeous !
Without blur (the text in the windows under the menu can be read) :
Image
Uploaded with ImageShack.us

With blur :
Image
Uploaded with ImageShack.us

I tried on my panel as well, but as it has box shadows, the rendering was weird. However on the panel I will try to make some bumpmaps, I think that it can suit well with my theme. :)

It is really impressive. And I didn't notice any big slowing (maybe the menu takes 50 ms more to appear, but nothing really noticeable).
legion1978
Level 1
Level 1
Posts: 12
Joined: Wed Dec 12, 2007 4:09 pm

Re: Cinnamon effects and visual transparency

Post by legion1978 »

Amazing. could this effect (or just transparency) be applied to windows themselves?
ill attach an image i took from my desktop with compiz (-- r.i.p. my maverick setup :'( --)

https://dl.dropbox.com/u/19901523/bf3.jpg
esteban1uy

Re: Cinnamon effects and visual transparency

Post by esteban1uy »

Mauldred wrote:I tried on my panel as well, but as it has box shadows, the rendering was weird. However on the panel I will try to make some bumpmaps, I think that it can suit well with my theme.
Beautiful theme!!!

The problem is with ouside box-shadows, I mean, those shadows that are drawn outside the borders of an element. There is no problem with inset box-shadows.
If your panel uses an outside box-shadow, just comment it out and you can apply the blur effect without any problem.
legion1978 wrote:Amazing. could this effect (or just transparency) be applied to windows themselves?
Nope, the effects are implemented just for Cinnamon. What you're asking requires a changes in Muffin, and that's beyond my capabilities.
legion1978
Level 1
Level 1
Posts: 12
Joined: Wed Dec 12, 2007 4:09 pm

Re: Cinnamon effects and visual transparency

Post by legion1978 »

esteban1uy wrote: Nope, the effects are implemented just for Cinnamon. What you're asking requires a changes in Muffin, and that's beyond my capabilities.
awww great work anyway.
maybe some day ;)
vanh

Re: Cinnamon effects and visual transparency

Post by vanh »

Image
really interesting topic :)
bimsebasse and esteban1uy, I appreciate what you do!
bimsebasse

Re: Cinnamon effects and visual transparency

Post by bimsebasse »

I like your theme, it's Nadia, Odin and ? :D
tsujan

Re: Cinnamon effects and visual transparency

Post by tsujan »

esteban1uy wrote: ... Ok, here we go.

Please ensure you have the correct deb-src repositories for your distribution in /etc/apt/sources.list (as explained here), then open a terminal and execute the following code:

Code: Select all

apt update
apt install dpkg-dev devscripts
apt build-dep cinnamon
Then obtain the sources with this command:

Code: Select all

git clone --branch=esteban1uy-background-effects git://github.com/autarkper/Cinnamon.git
And now you can compile it with:

Code: Select all

cd Cinnamon
./autogen.sh
dpkg-buildpackage
...
I ported your nice code to Gnome-Shell. The problem with the outer shadows can be fixed by using of st_theme_node_get_background_paint_box() instead of st_theme_node_get_paint_box().

However, as you surely know, there's a fundametal problem with border radii. Perhaps the code for opacity blurring should be at a more basic level, for example, in Clutter.
esteban1uy

Re: Cinnamon effects and visual transparency

Post by esteban1uy »

tsujan wrote:I ported your nice code to Gnome-Shell.
That's great! The more people interested in this little thing, the most chances to get a proper implementation (I'm not a real coder, I'm just a teen doing some experiments).
tsujan wrote:The problem with the outer shadows can be fixed by using of st_theme_node_get_background_paint_box() instead of st_theme_node_get_paint_box().
Well, I'm afraid is not that simple. Let's say you've defined this style (purposely exaggerated) for your popup menus:

Code: Select all

.popup-menu-boxpointer {
    -boxpointer-gap: 14px;
}
.popup-menu {
    font-size: 0.9em;
    min-width: 100px;
    background-gradient-start: rgba(40,40,40,0.6);
    background-gradient-end: rgba(38,38,38,0.6);
    background-gradient-direction: vertical;
    box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
    background-blur: 1.0;
}
Using st_theme_node_get_background_paint_box() as suggested, you are introducing a displacement proportional to the extent of the box-shadow:
Image

But using the original st_theme_node_get_paint_box() you don't have that problem, the only "inconvenience" is that those parts covered by the box-shadow are also blurred, so it tends to look a little weird at the borders:
Image

So the thing is up to theme artists: if you want blurry or bumpmaped backgrounds, then do not use big fat (outer, there's no problem with inset) box-shadows:
Image
tsujan wrote:However, as you surely know, there's a fundametal problem with border radii. Perhaps the code for opacity blurring should be at a more basic level, for example, in Clutter.
Yeap, we cannot modify Clutter/Cogl/Cairo/Pango in any way, so I'm afraid we have to live with it.
bimsebasse

Re: Cinnamon effects and visual transparency

Post by bimsebasse »

can't wait for this to be merged into master :D
tsujan

Re: Cinnamon effects and visual transparency

Post by tsujan »

esteban1uy wrote:...
tsujan wrote:The problem with the outer shadows can be fixed by using of st_theme_node_get_background_paint_box() instead of st_theme_node_get_paint_box().
Well, I'm afraid is not that simple. Let's say you've defined this style (purposely exaggerated) for your popup menus ...
You'r right. I hadn't tested that in Cinnamon. However, the panel and looking-glass shadows are OK with the above-mentioned change.
esteban1uy wrote:...
tsujan wrote:However, as you surely know, there's a fundametal problem with border radii. Perhaps the code for opacity blurring should be at a more basic level, for example, in Clutter.
Yeap, we cannot modify Clutter/Cogl/Cairo/Pango in any way, so I'm afraid we have to live with it.
Now that I'm in Cinnamon, I see that the border radii are partially OK here while there weren't so in Shell.

There are some additional issues related to what you've labeled as "panelmode" under Gnome-Shell. I'll see how I could change the code to fix them. Unfortunately, Cinnamon has still some problems with video, 3d and animations. Otherwise, it's superior to Shell. I hope those problems will be fixed with the next version.

All in all, your main idea about opacity blurring and your implementation of it under Cinnamon are great. I agree with you that opacity shouldn't be without blurring.
esteban1uy

Re: Cinnamon effects and visual transparency

Post by esteban1uy »

bimsebasse wrote:can't wait for this to be merged into master :D
I'm sorry to say this (in its current state) is not going to be merged to Cinnamon master.

This can only be considered as a "proof of concept", something to prove this kind of effects can be done in Cinnamon (and Gnome-shell too) contrary to the opinion of some Gnome gurus, and as a way to give orientation to real coders (real professional qualified programmers) on how to get this working, but under no circumstance this code could be directly merged to Cinnamon's master branch.
tsujan wrote:There are some additional issues related to what you've labeled as "panelmode" under Gnome-Shell. I'll see how I could change the code to fix them.
You must remember that Cinnamon uses a couple of hacks in order to get the panel at bottom (the original Gnome-shell panel implementation has the panel at top), so I had to create an "exception" for that special case: the panelmode property.
bimsebasse

Re: Cinnamon effects and visual transparency

Post by bimsebasse »

esteban1uy wrote:
bimsebasse wrote:can't wait for this to be merged into master :D
I'm sorry to say this (in its current state) is not going to be merged to Cinnamon master.

This can only be considered as a "proof of concept", something to prove this kind of effects can be done in Cinnamon (and Gnome-shell too) contrary to the opinion of some Gnome gurus, and as a way to give orientation to real coders (real professional qualified programmers) on how to get this working, but under no circumstance this code could be directly merged to Cinnamon's master branch.
Whaaaaat :|
tsujan

Re: Cinnamon effects and visual transparency

Post by tsujan »

esteban1uy wrote:You must remember that Cinnamon uses a couple of hacks in order to get the panel at bottom (the original Gnome-shell panel implementation has the panel at top), so I had to create an "exception" for that special case: the panelmode property.
Yes, I know that. But, in Gnome-Shell, the problem is that the blurring cogl rectangles should have absolute coordinates for some menus (as with panelmode=1 in Cinnamon) and relative coordinates for others. Until now I couldn't find a way to distinguish between these two kinds of popup menus as they all seem to be identical. In Cinnamon, all PopupMenus ARE identical in this regard and use relative coordinates for blurring.
esteban1uy

Re: Cinnamon effects and visual transparency

Post by esteban1uy »

tsujan wrote:
esteban1uy wrote:You must remember that Cinnamon uses a couple of hacks in order to get the panel at bottom (the original Gnome-shell panel implementation has the panel at top), so I had to create an "exception" for that special case: the panelmode property.
Yes, I know that. But, in Gnome-Shell, the problem is that the blurring cogl rectangles should have absolute coordinates for some menus (as with panelmode=1 in Cinnamon) and relative coordinates for others. Until now I couldn't find a way to distinguish between these two kinds of popup menus as they all seem to be identical. In Cinnamon, all PopupMenus ARE identical in this regard and use relative coordinates for blurring.
Are those "absolute positioned" popup menus created by some extension?
Which is the code that calls popupMenu.js in order to create them?
It's also possible they're not generated by popupMenu.js at all but built from scratch at some other part of the javascript code of Shell (creating a boxPointer, then populating it with the contents, connecting to signals, etc, etc, etc...).
Remember you can always track the actors inserting "g_message ("This is actor %s", st_describe_actor ( self->actor));" in your C code or "log('This is actor ' +St.describe_actor(some_actor)); in your js code.
tsujan

Re: Cinnamon effects and visual transparency

Post by tsujan »

esteban1uy wrote: ... Remember you can always track the actors inserting ...
Thank you but I'd tried that: all of them were "StBin.popup-menu-boxpointer popup-menu panel-menu:last-child"!!! Theoretically they're identical; practically there's a difference. Something else should be at work here.
tsujan

Re: Cinnamon effects and visual transparency

Post by tsujan »

At last, I succeeded in distinguishing those popup menus in a very artificial way with conditions like:

Code: Select all

St.describe_actor(this.actor).indexOf("some text") != -1
I just wanted to have blurred transparency in Shell like in old good days of Compiz. The Gnome dev has ruined so many beautiful things!
Last edited by tsujan on Thu Dec 27, 2012 2:53 pm, edited 1 time in total.
Locked

Return to “Cinnamon”