Added new background images for default theme #2867

speakk · 2019-09-10T11:09:20Z

I made these background images in Blender 2.8, as I feel the original default theme causes a bit of eye ache.

codecov · 2019-09-10T11:14:18Z

Codecov Report

Merging #2867 into master will decrease coverage by <.01%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #2867      +/-   ##
==========================================
- Coverage   86.69%   86.69%   -0.01%     
==========================================
  Files         577      577              
  Lines       39336    39336              
==========================================
- Hits        34104    34102       -2     
- Misses       5232     5234       +2

Flag	Coverage Δ
#gcov	`75.43% <ø> (ø)`	⬆️
#luacov	`89.4% <ø> (-0.01%)`	⬇️

Impacted Files	Coverage Δ
lib/awful/widget/layoutlist.lua	`90.66% <0%> (-0.67%)`	⬇️
lib/awful/spawn.lua	`89.21% <0%> (-0.5%)`	⬇️
property.c	`80.28% <0%> (-0.47%)`	⬇️
event.c	`72.84% <0%> (+0.21%)`	⬆️

Elv13 · 2019-09-29T21:18:49Z

Hi,

It is quite nice. The current default one is very ugly. Do you have the Blender file for this? Given the vibe of the dark one, I see maybe an extra scanline filter, 16:9 ratio and a muild cyberpunk/VHS code separation pass on the text.

As for being the default, I am not sure how to go forward on it. With the HiDPI support eventually becoming reality, having a locally rendered wallpaper like the xresources theme is probably the way things are going to be. I have a branch somewhere with an awful.wallpaper module I discussed before with @Sorky . That module would make it easier to use the wallpaper area as a giant static wibox (no event loops, no redraws). This would allow to use wibox.layout for scaling, wibox.widget.imagebox for images and awful.placement for centering, etc, etc. The idea is that wallpaper drawn using such API is much better integrated than gears.wallpaper will ever be. It also means the default config wont use raster images by default anymore.

actionless · 2019-10-03T14:46:10Z

i also would push into having some lua-generated wallpaper by default

for example on my current screen both current and proposed wallpapers (W: 2048px | H: 1536px ) would have upscaling artifacts

speakk · 2019-10-03T14:54:11Z

@Elv13 or @actionless could either of you elaborate on how this generation would happen? I can see an SVG file being rendered on the fly, but surely not a Blender file... So I'm sure I'm missing something. Or would it mean shipping with massively huge rendered file, and then downscaling on the fly?

And btw great idea on the scanline / ratio / vhs effects, I'll experiment with those a bit. I'll supply the Blender file once I've made those changes.

actionless · 2019-10-03T15:02:30Z

yeah, actually from recently awesomeWM supports proper SVG scaling, so it could be an option

but i was talking about: https://github.com/awesomeWM/awesome/blob/master/lib/beautiful/theme_assets.lua#L189

speakk · 2019-10-03T15:05:17Z

Ah so... Perhaps I need to make a PR with a lua / cairo script that will generate a pretty thing?

actionless · 2019-10-03T15:08:24Z

so basically:

SVG: easier to create/edit
lua/cairo: can be generated with some parameters (like colors or so)

actionless · 2019-10-03T15:10:44Z

(my second point means what it will allow it to be used in xresources and gtk awesomewm themes, ie colorpalette of the wallpaper would follow xresources/gtk theme colors)

speakk · 2019-10-03T15:13:11Z

I could be mistaken, but following an xresources/gtk theme color palette would prove to be quite challenging if you want control over the overall design of the wallpaper. Not impossible to do, but would have to design it quite carefully around the fact that all the colors will indeed change.

actionless · 2019-10-03T15:18:26Z

for your wallpapers i would make such parameters:

font color
background color
background accents (list)

but would have to design it quite carefully around the fact that all the colors will indeed change.

IMHO it's not a responsibility of wallpaper-generating function but of the one who supplies those arguments to it, for example in theme itself there are constrains which sorta "pre-processing" colors before choosing which of them to use as wallpaper arguments:

https://github.com/awesomeWM/awesome/blob/master/themes/xresources/theme.lua#L121-L130

https://github.com/awesomeWM/awesome/blob/master/themes/gtk/theme.lua#L333-L346

speakk · 2019-10-03T15:24:16Z

How about, btw, making a premade SVG, and then just using cairo to change the colours in the SVG? Could have some pre-defined classes that one adds to the SVG that you then manipulate with cairo.

actionless · 2019-10-03T15:24:33Z

nice

speakk · 2019-10-03T18:37:31Z

The only issue is that as far as I understand, cairo and thus Inkscape have a pretty limited color depth for gradients and blur etc, resulting in visible banding for any larger gradients. Any ideas to circumvent this limitation? I can do my design without any, but I certainly couldn't recreate anything close to my original Blender rendering in Inkscape if this is the case.

Cairo seems to maybe have a way to render a higher bit depth version, but I wasn't able to find a way to do it via any of the command line tools available. Again, ideas are very welcome!

As a sidenote, I believe chromium for example dithers the gradients on the fly.

actionless · 2019-10-03T19:03:55Z

what about trying to apply blur effect instead/on top of the gradient?

https://www.w3schools.com/graphics/svg_fegaussianblur.asp

speakk · 2019-10-03T19:25:07Z

Blur has the same issue, sadly!

actionless · 2019-10-03T19:33:18Z

i don't see it:

<!DOCTYPE html>
<html>
<body>

<svg width="640" height="480" >
  <defs>
  
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="35" />
    </filter>
    
        <linearGradient id = "backgroundColor">
            <stop stop-color = "#d8dddd" stop-opacity = "1"/>
        </linearGradient>
    	<linearGradient id = "textColor">
            <stop stop-color = "#916aa3" stop-opacity = "1"/>
        </linearGradient>
        <linearGradient id = "mainColor">
            <stop stop-color = "#916aa3" stop-opacity = "0.3"/>
        </linearGradient>
        <style>
        .txt { font: bold 60px "Fantasque Sans Mono"; }
        </style>
  </defs>
  
  <rect x="0" y="0" width="640" height="480" fill="url(#backgroundColor)"  />  
  <g id="mainGroup"  filter="url(#f1)">
  <rect x="0" y="0" width="640" height="480" fill="transparent" />  
  
  	<rect x="200" y="100" width="120" height="120" stroke-width="6" fill="url(#mainColor)"/>  
    <rect x="350" y="130" width="120" height="120" stroke-width="6" fill="url(#mainColor)"/>  
    <rect x="450" y="130" width="120" height="120" stroke-width="6" fill="url(#mainColor)"/>  
    
    <rect x="0" y="230" width="120" height="120" stroke-width="6" fill="url(#mainColor)"/>  
    
    <rect x="220" y="300" width="120" height="120" stroke-width="6" fill="url(#mainColor)"/>  
    <rect x="340" y="340" width="120" height="120" stroke-width="6" fill="url(#mainColor)"/>  
    <rect x="450" y="390" width="120" height="120" stroke-width="6" fill="url(#mainColor)"/>  
    
  </g>
  <text x="160" y="240" class="txt" fill="url(#textColor)">awesome :3</text>
  
</svg>

</body>
</html>

actionless · 2019-10-03T19:35:39Z

oh, i see it actually after zooming in :(

speakk · 2019-10-03T19:36:47Z

Also browsers are really really good at rendering svg's. I believe they dither on the fly. Cairo on the other hand... It's good, but gradients seem to be an issue. If you find that it's not, I'm very glad to hear how you manage to avoid its banding issues!

speakk · 2019-10-03T19:37:15Z

Oh I see that's a png, but yeah indeed, zooming reveals the issue.

actionless · 2019-10-03T19:46:10Z

i mean i can see those steps but i am not considering them to be a blocker issue

actionless · 2019-10-03T19:53:50Z

also just tried to combine it together with https://awesomewm.org/images/awesome-logo.svg:

<!DOCTYPE html>
<html>
<body>

<svg width="640" height="480" >
  <defs>
  
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="35" />
    </filter>
    
        <linearGradient id = "backgroundColor">
            <stop stop-color = "#0e0021" stop-opacity = "1"/>
        </linearGradient>
    	<linearGradient id = "textColor">
            <stop stop-color = "#765d6e" stop-opacity = "1"/>
        </linearGradient>
        <linearGradient id = "mainColor">
            <stop stop-color = "#916aa3" stop-opacity = "0.3"/>
        </linearGradient>
        <linearGradient id = "mainColor2">
            <stop stop-color = "#6a91a3" stop-opacity = "0.3"/>
        </linearGradient>
        <linearGradient id = "mainColor4">
            <stop stop-color = "#a36a91" stop-opacity = "0.3"/>
        </linearGradient>
        <linearGradient id = "mainColor3">
            <stop stop-color = "#91a36a" stop-opacity = "0.3"/>
        </linearGradient>
        <style>
        .txt { font: bold 60px "Fantasque Sans Mono"; }
        </style>
  </defs>
  
  <rect x="0" y="0" width="640" height="480" fill="url(#backgroundColor)"  />  
  <g id="mainGroup"  filter="url(#f1)">
  <rect x="0" y="0" width="640" height="480" fill="transparent" />  
  
  	<rect x="200" y="100" width="120" height="120" stroke-width="6" fill="url(#mainColor)"/>  
    <rect x="350" y="130" width="120" height="120" stroke-width="6" fill="url(#mainColor2)"/>  
    <rect x="450" y="130" width="120" height="120" stroke-width="6" fill="url(#mainColor)"/>  
    <rect x="550" y="150" width="120" height="120" stroke-width="6" fill="url(#mainColor3)"/>  
    
    <rect x="0" y="230" width="120" height="120" stroke-width="6" fill="url(#mainColor4)"/>  
    
    <rect x="220" y="300" width="120" height="120" stroke-width="6" fill="url(#mainColor3)"/>  
    <rect x="340" y="340" width="120" height="120" stroke-width="6" fill="url(#mainColor)"/>  
    <rect x="450" y="390" width="120" height="120" stroke-width="6" fill="url(#mainColor2)"/>  
    
  </g>

<svg id="textGroup" x="60" y="190">

  <path
     d="M 0,63.999999 V 22 H 43.999999 V 20 H 0 V 0 h 63.999999 v 63.999999 h -20 V 42 H 20 v 2 h 21.999999 v 19.999999 z"
     id="path10"
     style="fill:url(#textColor)"
     inkscape:connector-curvature="0" />
  <path
     style="fill:url(#textColor)"
     id="path5121"
     d="M 75.999999,0 H 118 v 43.999999 h 2 V 0 h 20 V 63.999999 H 75.999999 c 0.03867,-19.975266 1.21505,-20 22,-20 V 0 l -2,3.13e-4 v 44.03356 l -20,19.966102 z"
     inkscape:connector-curvature="0" />
  <path
     d="m 216,0 v 42 h -44 v 2 h 44 V 64 H 152 V 0 c 19.97527,0.03867 20,1.21505 20,22 h 44 l -3.1e-4,-2 H 171.96613 L 152.00002,0 Z"
     id="path5123"
     style="fill:url(#textColor)"
     inkscape:connector-curvature="0" />
  <path
     style="fill:url(#textColor)"
     id="path5125"
     d="M 292,63.999999 V 22 h -44 v -2 h 44 V 0 h -64 v 42.011827 l 20,-0.01183 v 0 h 24 v 2.09375 h -44 l -0.009,19.906249 z"
     inkscape:connector-curvature="0" />
  <path
     d="m 324.3125,63.999999 c 0,-43.882671 0.18277,-0.110242 -0.0915,-43.999999 h 0.88388 42.89515 V 0 h -64 c 0,63.768424 -0.009,0.109806 -0.009,63.999996 z"
     id="path5127"
     style="fill:url(#textColor)"
     inkscape:connector-curvature="0" />
  <path
     d="m 380,63.999999 h 42 V 20.000001 h 2 v 43.999998 h 20 V 0 h -64 c 0.0387,19.975267 1.21505,20.000001 22,20.000001 v 43.999998 l -2,-3.13e-4 V 19.966127 L 380,2.4e-5 Z"
     id="path5129"
     style="fill:url(#textColor)"
     inkscape:connector-curvature="0" />
  <path
     style="fill:url(#textColor)"
     id="path5131"
     d="m 520,0 v 42 h -44 v 2 h 44 V 64 H 456 V 0 c 19.97527,0.03867 20,1.21505 20,22 h 44 l -3.1e-4,-2 H 475.96613 L 456.00002,0 Z"
     inkscape:connector-curvature="0" />
  <path
     style="fill:url(#textColor)"
     id="path5135"
     d="m 332.34911,63.999999 c 0,-44.007671 -0.003,-0.02174 -0.003,-43.999999 0,0 30.24668,0 35.65403,0 V 0 h -64 c 0,63.768424 -0.009,0.109806 -0.009,63.999996 z"
     inkscape:connector-curvature="0" />
  <path
     d="m 334.99382,63.999999 c 0,0 -0.003,-0.02174 -0.003,-43.999999 h 32.71653 V 0 h -63.70721 c 0,63.768424 -0.009,0.109806 -0.009,63.999996 z"
     id="path5137"
     style="fill:url(#textColor)"
     inkscape:connector-curvature="0" />
  <path
     style="fill:url(#textColor)"
     id="path5162"
     d="m 347.67867,0 c 0,43.882671 -0.18277,0.110242 0.0915,43.999999 h -0.88388 -42.89515 v 20 h 64 c 0,-63.768424 0.009,-0.109806 0.009,-63.999996 z"
     inkscape:connector-curvature="0" />
  <path
     d="m 339.64206,0 c 0,44.007671 0.003,0.02174 0.003,43.999999 0,0 -30.24668,0 -35.65403,0 v 20 h 64 c 0,-63.768424 0.009,-0.109806 0.009,-63.999996 z"
     id="path5164"
     style="fill:url(#textColor)"
     inkscape:connector-curvature="0" />
  <path
     style="fill:url(#textColor)"
     id="path5166"
     d="m 336.99735,0 c 0,0 0.003,0.02174 0.003,43.999999 h -32.71653 v 20 h 63.70721 c 0,-63.768424 0.009,-0.109806 0.009,-63.999996 z"
     inkscape:connector-curvature="0" />
</svg>
  
</svg>

</body>
</html>

actionless · 2019-10-03T20:11:48Z

and with some extra effect (which should hopefully slightly elminiate visually the gradient steps):

   <filter id="noise" x="0%" y="0%" width="100%" height="100%">
        <feTurbulence baseFrequency="0.01 0.4" result="NOISE" numOctaves="2" />
        <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="8" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>
    </filter>

speakk · 2019-10-04T07:01:45Z

Nice! I wasn't sure if turbulence was safe to use, I'm not quite sure what cairo supports. But yeah that looks good, I'll make a new version based on our discussion.

speakk · 2019-10-04T07:09:39Z

Whoa, that svg you posted shows up incredibly garbled in Inkscape. I was able to render it with rsvg however and it looks fine.

... what on earth.

actionless · 2019-10-04T13:56:10Z

i was testing it only with rsvg and in firefox

in awesomewm i think it gonna be the same result as from rendering with rsvg

speakk · 2019-10-04T14:03:31Z

I'm sad to see Inkscape did so very badly rendering that, I wonder what's up with that? Btw as a curiosity, trying to render it with cairosvg results in an error.

So seeing that Inkscape is having such a hard time with this, I guess the best way forward after is doing this by "hand" aka hand coding the svg file. I'm curious though @actionless your svg has "inkscape:connector-curvature="0"" which makes me think you made it Inkscape after all? Or where did that come from?

actionless · 2019-10-04T14:04:54Z

your svg has "inkscape:connector-curvature="0"" which makes me think you made it Inkscape after all?

also just tried to combine it together with https://awesomewm.org/images/awesome-logo.svg:

speakk · 2019-10-04T14:08:22Z

Aaaah that explains cheers! :)

speakk · 2019-10-04T14:16:19Z

The plot thickens... Wiki page for librsvg says that it actually uses cairo, however rendering with the cairo command line client produces a blocky version without any of the blurs and things... And Inkscape, as mentioned, also renders that very poorly.

actionless · 2019-10-04T14:23:38Z

hm, i've tried to set it as an awesomewm wallpaper

and it seems what because image size set to 640x480 awesome wm tried to render it at that resolution and next upscale

actionless · 2019-10-04T14:36:05Z

after changing size to 6400x4800 it looks fine, but it took like a minute to load :D

actionless · 2019-10-04T14:39:51Z

ah, proper svg scaling is supported only by imagebox now: https://github.com/awesomeWM/awesome/pull/2779/files

but not by a wallpaper, that's why

Elv13 · 2019-10-04T16:35:57Z

ah, proper svg scaling is supported only by imagebox now

This is where my awful.wallpaper module comes in. Since it uses imagebox for images, it would work. I didn't plan to work on that myself for v4.4, but I will take a look this weekend if I can at least make a PR out of it. If @actionless and other people are quick on the reviews, then a subset of it could me merged sooner than "usual". Once it's done, this problem will go away.

As a side note, watch out with all the filters in your SVG. Cairo doesn't support all of them.

actionless · 2019-10-04T16:57:01Z

thanks a lot!

As a side note, watch out with all the filters in your SVG. Cairo doesn't support all of them.

yeah, i was just experimenting which of them would work and so far the current three filters which are used seems to produce the same result in firefox and cairo

actionless · 2019-10-04T17:00:51Z

16:9 ratio

imho it's not a big problem since awesomewm wallpaper could be aligned as maximized

cyberpunk/VHS code separation pass on the text.

speaking of SVG filters, i think that could be also (optionally, based on some variable) addressed by them

Elv13 · 2019-10-07T02:38:08Z

thanks a lot!

I worked a bit on the wibox.container.scale and wibox.container.tile. Both are (soft) dependencies for awful.wallpaper to make sure we don't regress feature wise when gears.wallpaper gets deprecated. But it's not finished, so no PR this week, sorry (the multi screen and HiDPI work is of an higher priority).

speakk · 2020-07-12T11:21:21Z

@Elv13 hi! Any progress on this?

Elv13 · 2021-10-02T20:41:02Z

Hooray, after years of procrastination, the new wallpaper API is merged. #3343

This means SVG and "smarter" wallpapers are now fully supported. This PR is now unblocked.

speakk · 2021-10-02T20:55:43Z

Beautiful work!!

@actionless do you want to do the honors of finishing this with the svg you created?

actionless · 2021-10-02T21:09:23Z

i think @Elv13 had a bit updated version, if i not mistaken, which was already using beautiful+new wallpaper api

btw this wallpaper also worth adding, if adding some awesome letters on top (could be take from theme assets, as it also using cairo api) and using beautiful colors instead of hardcoded ones:

Added new background images for default theme

d41969b

actionless mentioned this pull request Apr 19, 2021

Tile container #3332

Merged

This was referenced Apr 26, 2021

Extend wibox.widget.imagebox to encompass the required wallpaper API features #3335

Merged

Rewrite the wallpaper API #3343

Merged

This comment has been minimized.

Sign in to view

Added new background images for default theme #2867

Are you sure you want to change the base?

Added new background images for default theme #2867

Conversation

speakk commented Sep 10, 2019

codecov bot commented Sep 10, 2019 • edited

Codecov Report

Elv13 commented Sep 29, 2019

actionless commented Oct 3, 2019

speakk commented Oct 3, 2019

actionless commented Oct 3, 2019

speakk commented Oct 3, 2019

actionless commented Oct 3, 2019 • edited

actionless commented Oct 3, 2019

speakk commented Oct 3, 2019

actionless commented Oct 3, 2019 • edited

speakk commented Oct 3, 2019

actionless commented Oct 3, 2019

speakk commented Oct 3, 2019

actionless commented Oct 3, 2019 • edited

speakk commented Oct 3, 2019

actionless commented Oct 3, 2019 • edited

actionless commented Oct 3, 2019

speakk commented Oct 3, 2019

speakk commented Oct 3, 2019

actionless commented Oct 3, 2019

actionless commented Oct 3, 2019

actionless commented Oct 3, 2019

speakk commented Oct 4, 2019

speakk commented Oct 4, 2019

actionless commented Oct 4, 2019

speakk commented Oct 4, 2019

actionless commented Oct 4, 2019

speakk commented Oct 4, 2019

speakk commented Oct 4, 2019

actionless commented Oct 4, 2019

actionless commented Oct 4, 2019

actionless commented Oct 4, 2019

Elv13 commented Oct 4, 2019

actionless commented Oct 4, 2019

actionless commented Oct 4, 2019

Elv13 commented Oct 7, 2019

speakk commented Jul 12, 2020

This comment has been minimized.

Elv13 commented Oct 2, 2021

speakk commented Oct 2, 2021

actionless commented Oct 2, 2021 • edited

codecov bot commented Sep 10, 2019 •

edited

actionless commented Oct 3, 2019 •

edited

actionless commented Oct 3, 2019 •

edited

actionless commented Oct 3, 2019 •

edited

actionless commented Oct 3, 2019 •

edited

actionless commented Oct 2, 2021 •

edited