Cinnamon effects and visual transparency

Please post suggestions for improvement of Cinnamon here
https://github.com/linuxmint/Cinnamon

Re: Cinnamon effects and visual transparency

Postby esteban1uy on Sat Dec 01, 2012 11:39 pm

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.
Sorry, I only speak Spanish
User avatar
esteban1uy
Level 5
Level 5
 
Posts: 734
Joined: Sat Nov 12, 2011 6:20 am

Linux Mint is funded by ads and donations.
 

Re: Cinnamon effects and visual transparency

Postby bimsebasse on Sun Dec 02, 2012 12:36 am

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 for this thread. That’s all I can say. You most definitely have made this forum into something special. You clearly know what you are doing, you’ve covered so many bases. Thanks!
User avatar
bimsebasse
Level 7
Level 7
 
Posts: 1709
Joined: Fri Nov 11, 2011 10:21 am
Location: Scandinavia

Re: Cinnamon effects and visual transparency

Postby esteban1uy on Sun Dec 02, 2012 12:53 am

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:
Sorry, I only speak Spanish
User avatar
esteban1uy
Level 5
Level 5
 
Posts: 734
Joined: Sat Nov 12, 2011 6:20 am

Re: Cinnamon effects and visual transparency

Postby bimsebasse on Sun Dec 02, 2012 1:13 am

:D

Gnome shell only theme makers are gonna be sooooo envious!
Thank you for this thread. That’s all I can say. You most definitely have made this forum into something special. You clearly know what you are doing, you’ve covered so many bases. Thanks!
User avatar
bimsebasse
Level 7
Level 7
 
Posts: 1709
Joined: Fri Nov 11, 2011 10:21 am
Location: Scandinavia

Re: Cinnamon effects and visual transparency

Postby Mauldred on Sun Dec 02, 2012 4:38 pm

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).
User avatar
Mauldred
Level 1
Level 1
 
Posts: 3
Joined: Tue Nov 27, 2012 8:25 pm

Re: Cinnamon effects and visual transparency

Postby legion1978 on Sun Dec 02, 2012 5:40 pm

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
legion1978
Level 1
Level 1
 
Posts: 11
Joined: Wed Dec 12, 2007 4:09 pm

Re: Cinnamon effects and visual transparency

Postby esteban1uy on Sun Dec 02, 2012 6:13 pm

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.
Sorry, I only speak Spanish
User avatar
esteban1uy
Level 5
Level 5
 
Posts: 734
Joined: Sat Nov 12, 2011 6:20 am

Re: Cinnamon effects and visual transparency

Postby legion1978 on Sun Dec 02, 2012 6:57 pm

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 ;)
legion1978
Level 1
Level 1
 
Posts: 11
Joined: Wed Dec 12, 2007 4:09 pm

Re: Cinnamon effects and visual transparency

Postby vanh on Thu Dec 20, 2012 2:58 pm

Image
really interesting topic :)
bimsebasse and esteban1uy, I appreciate what you do!
vanh
Level 1
Level 1
 
Posts: 3
Joined: Mon Dec 17, 2012 3:55 pm

Re: Cinnamon effects and visual transparency

Postby bimsebasse on Thu Dec 20, 2012 6:05 pm

I like your theme, it's Nadia, Odin and ? :D
Thank you for this thread. That’s all I can say. You most definitely have made this forum into something special. You clearly know what you are doing, you’ve covered so many bases. Thanks!
User avatar
bimsebasse
Level 7
Level 7
 
Posts: 1709
Joined: Fri Nov 11, 2011 10:21 am
Location: Scandinavia

Re: Cinnamon effects and visual transparency

Postby tsujan on Wed Dec 26, 2012 12:24 am

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.
tsujan
Level 1
Level 1
 
Posts: 14
Joined: Wed Dec 26, 2012 12:12 am

Re: Cinnamon effects and visual transparency

Postby esteban1uy on Wed Dec 26, 2012 10:44 am

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.
Sorry, I only speak Spanish
User avatar
esteban1uy
Level 5
Level 5
 
Posts: 734
Joined: Sat Nov 12, 2011 6:20 am

Re: Cinnamon effects and visual transparency

Postby bimsebasse on Wed Dec 26, 2012 11:33 am

can't wait for this to be merged into master :D
Thank you for this thread. That’s all I can say. You most definitely have made this forum into something special. You clearly know what you are doing, you’ve covered so many bases. Thanks!
User avatar
bimsebasse
Level 7
Level 7
 
Posts: 1709
Joined: Fri Nov 11, 2011 10:21 am
Location: Scandinavia

Re: Cinnamon effects and visual transparency

Postby tsujan on Wed Dec 26, 2012 11:43 am

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.
tsujan
Level 1
Level 1
 
Posts: 14
Joined: Wed Dec 26, 2012 12:12 am

Re: Cinnamon effects and visual transparency

Postby esteban1uy on Wed Dec 26, 2012 2:56 pm

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.
Sorry, I only speak Spanish
User avatar
esteban1uy
Level 5
Level 5
 
Posts: 734
Joined: Sat Nov 12, 2011 6:20 am

Re: Cinnamon effects and visual transparency

Postby bimsebasse on Wed Dec 26, 2012 6:59 pm

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 :|
Thank you for this thread. That’s all I can say. You most definitely have made this forum into something special. You clearly know what you are doing, you’ve covered so many bases. Thanks!
User avatar
bimsebasse
Level 7
Level 7
 
Posts: 1709
Joined: Fri Nov 11, 2011 10:21 am
Location: Scandinavia

Re: Cinnamon effects and visual transparency

Postby tsujan on Thu Dec 27, 2012 8:51 am

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.
tsujan
Level 1
Level 1
 
Posts: 14
Joined: Wed Dec 26, 2012 12:12 am

Re: Cinnamon effects and visual transparency

Postby esteban1uy on Thu Dec 27, 2012 9:29 am

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.
Sorry, I only speak Spanish
User avatar
esteban1uy
Level 5
Level 5
 
Posts: 734
Joined: Sat Nov 12, 2011 6:20 am

Re: Cinnamon effects and visual transparency

Postby tsujan on Thu Dec 27, 2012 12:29 pm

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
Level 1
Level 1
 
Posts: 14
Joined: Wed Dec 26, 2012 12:12 am

Re: Cinnamon effects and visual transparency

Postby tsujan on Thu Dec 27, 2012 12:51 pm

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.
tsujan
Level 1
Level 1
 
Posts: 14
Joined: Wed Dec 26, 2012 12:12 am

Linux Mint is funded by ads and donations.
 
PreviousNext

Return to Cinnamon

Who is online

Users browsing this forum: Google [Bot] and 10 guests