search

thomasloven / hass-browser_mod

🔹 A Home Assistant integration to turn your browser into a controllable entity and media player
MIT License
1.3k stars 185 forks source link

Control display brightness/temp #649

Open stonegray opened 10 months ago

stonegray commented 10 months ago

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 commented 10 months ago

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.