How to remove vignetting effect from homescreen

[thebrakshow]

I love the look of the debloated home screen I get with glasshouse, however, the vignette effect is far too strong. It makes the home screen very dark and thus you can hardly custom wallpaper. Is there a way to turn off or even reduce this effect? I really don't want to install another launcher as glasshouse has everything I need.

[stanleys12]

There is no setting for it at the moment. The darkening is a fixed overlay (called #scrim) drawn on top of the wallpaper in Glasshouse Home, and its strength is written straight into the page's CSS:

glasshouse/server/assets/home.html

Lines 33 to 36 in 8b34d8c

	#scrim{position:absolute;left:0;top:0;right:0;bottom:0;
	background:radial-gradient(ellipse 34% 30% at 92% 14%,rgba(0,0,0,.55),rgba(0,0,0,0)),
	linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 38%,rgba(0,0,0,0) 70%),
	linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,.45) 36%,rgba(0,0,0,.82) 62%,rgba(0,0,0,.92) 100%)}

It is three stacked gradients: a dark patch at the top right, a left-to-right fade from 72% black, and a top-to-bottom fade that reaches 82% to 92% black over the lower part of the screen where the rows sit. The comment above it says it is there to keep the text and the rows readable. Nothing else in the repo references it, so the dashboard and the TV app have no control for it.

The wallpaper options (Black, uploaded pictures per time of day, Landscape, Abstract) only change the picture underneath the overlay, so they won't change how dark it gets:

glasshouse/docs/dashboard/home.md

Lines 103 to 121 in 8b34d8c

	## Wallpapers
	By default, Glasshouse Home uses a pure `#000` OLED black background (and leaves the TV's [screen saver](screen-savers.md) untouched). It can instead show a picture for each of four times of day: **Morning** (06:00 to 11:00), **Afternoon** (11:00 to 17:00), **Evening** (17:00 to 21:00) and **Night** (21:00 to 06:00).
	The **Wallpaper** section offers four choices:
	* **Black**, the default: no picture.
	* **Landscape**, a loch at four times of day, and **Abstract**, four flowing abstract pictures. A set is downloaded to the TV when it is chosen, about 820 KB, from [glasshouse-wallpapers](https://github.com/rorygallagher2024/glasshouse-wallpapers), so it adds nothing to the Glasshouse download. Only the chosen set is kept on the TV.
	* **Your own**: pictures uploaded from the browser, one for each time of day. They are kept while a set or Black is chosen, and come back with **Your own**. Uploading a picture chooses **Your own**.
	The web dashboard's **Wallpaper** section shows the day as a strip from midnight to midnight, each time of day filled with its picture across its hours and a marker at the time now, and below it each time of day as a small Glasshouse Home: its picture behind the clock in the chosen text colour, so how readable the clock will be shows before it is on the TV. The time of day showing now is marked **Now**.
	With **Your own** chosen:
	* Choosing a time of day, on the strip or its preview, or dropping an image on it, sets its picture. JPEG, PNG and WebP images up to 25 MB are taken; the browser scales each to fit 1920 × 1080 as a JPEG before saving it to `/var/lib/tvweb/home-wallpaper-uploads` on the TV.
	* **Replace** and **Remove** under a time of day change or remove its picture alone; one without a picture has the black background.
	* **Remove all** puts the black background back for every time of day.
	The TV app's **Wallpaper** row moves through the four choices with OK.

Until there is an option, brighter wallpapers will still show noticeably dimmed, most of all in the lower half and on the left. If you want a strength slider or an off switch, it is worth opening it as a feature request so the maintainer can see the demand.

(I looked this up in the code with help from an AI assistant; the links are to the lines I checked.)

[thebrakshow]

Thanks for the info! Sure, I'll add it as a feature request. Im sure others might appreciate the ability to tweak that as well.

[thebrakshow]

OK so i manually adjusted what you mentioned and it looks great now!

Here is what i did to get about 1/4 the vignette effect

1. Created a backup of home.html: cp /var/lib/tvweb/assets/home.html /var/lib/tvweb/assets/home.html.bak
2. Edit home.html: vi /var/lib/tvweb/assets/home.html
3. Adjusted scrim values:

Replace this block:

#scrim{position:absolute;left:0;top:0;right:0;bottom:0;
background:radial-gradient(ellipse 34% 30% at 92% 14%,rgba(0,0,0,.55),rgba(0,0,0,0)),
linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 38%,rgba(0,0,0,0) 70%),
linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,.45) 36%,rgba(0,0,0,.82) 62%,rgba(0,0,0,.92) 100%)}

With this:

#scrim{position:absolute;left:0;top:0;right:0;bottom:0;
background:radial-gradient(ellipse 34% 30% at 92% 14%,rgba(0,0,0,.14),rgba(0,0,0,0)),
linear-gradient(90deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.09) 38%,rgba(0,0,0,0) 70%),
linear-gradient(180deg,rgba(0,0,0,.13) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,.11) 36%,rgba(0,0,0,.21) 62%,rgba(0,0,0,.23) 100%)}

4. adjusted wallpaper values:

var WALL_SLOTS = [
{ key: 'night', from: 0, strength: 0.55 },
{ key: 'morning', from: 6, strength: 0.7 },
{ key: 'afternoon', from: 11, strength: 0.62 },
{ key: 'evening', from: 17, strength: 0.72 },
{ key: 'night', from: 21, strength: 0.65 }
];

With this:

var WALL_SLOTS = [
{ key: 'night', from: 0, strength: 0.89 },
{ key: 'morning', from: 6, strength: 0.93 },
{ key: 'afternoon', from: 11, strength: 0.91 },
{ key: 'evening', from: 17, strength: 0.93 },
{ key: 'night', from: 21, strength: 0.91 }
];

5. Restarted service /var/lib/tvweb/tvwebctl restart

[rorygallagher2024]

This is now in Glasshouse: Home tab → Wallpaper → Darkening. It’s a slider from 100%, which is the old look and stays the default, down to Off, which shows your wallpaper as it is.