hass-browser_mod icon indicating copy to clipboard operation
hass-browser_mod copied to clipboard

Published 20 hours ago • verified publisher icon thomasloven

Control display brightness/temp

Open stonegray opened this issue 8 months ago • 1 comments

A lot of us are using this for mounted tablets. Specifically on iOS, there isn't a great way of controlling display brightness and colour temperature. I'd like browser mod to expose this.

On the tablet side, we can inject a empty DIV into the DOM at the bottom of <body>:

document.body.insertAdjacentHTML("beforeEnd", `<div id="colortemp"></div>`);

The CSS would fill the screen, make it semitransparent to tint/shade the contents under it, and ensure we can click through it:

#colortemp {
    z-index: 300; 
    position: absolute; 
    height: 100vh;  width: 100vw; 
    top: 0; left: 0; bottom: 0; right: 0; 

    /* ensure we can click through it: */
    pointer-events: none; 

    /* exadurated color for testing; Filter grayscale/sepia might work better */
    background-color: rgba(80,0,0,0.2); 
}

The end result is a dimmer, warmer coloured display, perfect for keeping a tablet display on at night.

This could be exposed in HA as a Light with colour temperature control, allowing tint and brightness to be easily synced with nearby lights.

I've written something similar on my computer to sync up external displays over DDC and builtin displays, the effect looks amazing.

stonegray avatar Nov 01 '23 12:11 stonegray

I've done some experimenting, and this is working great* (manually changing the CSS, I can't grok the HA side of browser mod)

It appears the best way to adjust the brightness is using a filter on body. Changing temperature is tricker, but using a multiplicative blending mode on an orange overlay seems to match the devices native night shift feature pretty well.

There's no way to pass analog values, but a working PoC using browser mod's javascript service.

const brightness = 0.5;
const warm = 0.5;
if (!document.getElementById('colortemp')) {
    document.body.insertAdjacentHTML('beforeEnd', '<div id="colortemp"></div>');
    document.getElementById('colortemp').style.cssText = `z-index:300;
  height:100vh; width:100vw; pointer-events:none; top:0; left:0; bottom:0;
  right:0; position:absolute; mix-blend-mode:multiply;transition:opacity 1s;
  background-color:rgba(255,127,0,1);visibility:visible;opacity:0;`;
}
document.body.style.filter = "brightness(" + brightness + ")";
document.body.style.transition = "filter 1s";
document.getElementById('colortemp').style.opacity = warm;

Likely wise to expose the transition time as well.

stonegray avatar Nov 01 '23 15:11 stonegray