Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add brightness-mode-explainer.md. #334

Merged
merged 25 commits into from
Jan 26, 2022
Merged
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
44a4285
Add brightness-mode-explainer.md.
rakuco Dec 17, 2021
746a70b
Make the Screen-based idea a proposed solution as well.
rakuco Dec 21, 2021
6b44cac
Add timeout to the code example
rakuco Jan 13, 2022
67e3898
Mention low battery in the Goals section.
rakuco Jan 13, 2022
76dce08
Incorporate review suggestion
rakuco Jan 18, 2022
413a603
Incorporate review suggestions.
rakuco Jan 18, 2022
8bd1bdc
Update brightness-mode-explainer.md
rakuco Jan 18, 2022
95a2a04
Update brightness-mode-explainer.md
rakuco Jan 18, 2022
6db1026
Update brightness-mode-explainer.md
rakuco Jan 18, 2022
fc98916
Update brightness-mode-explainer.md
rakuco Jan 18, 2022
2cb91a8
Update brightness-mode-explainer.md
rakuco Jan 18, 2022
ca0eab5
Update brightness-mode-explainer.md
rakuco Jan 18, 2022
fd2a152
Incorporate review suggestion.
rakuco Jan 18, 2022
ab5d893
Apply suggestions from code review
rakuco Jan 18, 2022
6f1577a
Update brightness-mode-explainer.md
rakuco Jan 18, 2022
7aad217
Update brightness-mode-explainer.md
rakuco Jan 18, 2022
fb25303
Adjust previous commit.
rakuco Jan 18, 2022
b85c6f5
Apply suggestions from code review
rakuco Jan 18, 2022
5be36bb
Apply suggestions from code review
rakuco Jan 18, 2022
3505713
Add a missing empty line between headers.
rakuco Jan 18, 2022
b271b84
Move links from the beginning to the end of the text.
rakuco Jan 18, 2022
b5e2603
Remove a few use cases from the least.
rakuco Jan 25, 2022
5d7eafa
Add examples of mobile apps that change the screen's brightness level.
rakuco Jan 25, 2022
87c16ad
Elaborate a bit more on why getUserMedia() is not a good option.
rakuco Jan 25, 2022
ef91054
Apply suggestions from code review
tomayac Jan 26, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 129 additions & 0 deletions brightness-mode-explainer.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
# Design Document: the need to control screen brightness

_As discussed in the [DAS WG 2021-11-17](https://www.w3.org/2021/11/17-dap-minutes.html) meeting about Screen Brightness and the Screen Wake Lock API, the idea of this document is to make it easier for the meeting attendees to work on an explainer than if this had been committed to GitHub directly. Once this is done the goal is to move the contents to a proper explainer on GitHub._

Previously:
- https://github.com/WICG/proposals/issues/17
- https://github.com/w3c/screen-wake-lock/issues/129
- https://github.com/w3c/devicesensors-wg/issues/51
- https://www.w3.org/2021/11/17-dap-minutes.html
rakuco marked this conversation as resolved.
Show resolved Hide resolved

## Introduction

There is currently a need for web applications to increase the brightness of a device's screen.
rakuco marked this conversation as resolved.
Show resolved Hide resolved

This would help address the following use cases:
rakuco marked this conversation as resolved.
Show resolved Hide resolved
- a user scans QR/barcode under various lighting conditions.
rakuco marked this conversation as resolved.
Show resolved Hide resolved
- remote medical, where increasing the screen brightness could assist in remote examination
rakuco marked this conversation as resolved.
Show resolved Hide resolved
- biometric security apps, where increasing the screen brightness can help illuminate features to get better imagery from the front facing camera
rakuco marked this conversation as resolved.
Show resolved Hide resolved
- increasing contrast for readability for the visually impaired
rakuco marked this conversation as resolved.
Show resolved Hide resolved
- [make up mirror](https://play.google.com/store/apps/details?id=mmapps.mirror.pro&hl=en&gl=US) style apps
rakuco marked this conversation as resolved.
Show resolved Hide resolved

[Screen Wake Lock API issue 129](https://github.com/w3c/screen-wake-lock/issues/129) was filed back in 2018, and since then there has been feedback from developers working on multiple areas about the usefulness of an API that addresses this use case.
rakuco marked this conversation as resolved.
Show resolved Hide resolved

rakuco marked this conversation as resolved.
Show resolved Hide resolved
## Open design issues

- Things to consider in the spec proposal
rakuco marked this conversation as resolved.
Show resolved Hide resolved
- UAs should be free to limit maximum brightness level and/or do other things like increase contrast.
rakuco marked this conversation as resolved.
Show resolved Hide resolved
- Idea is to focus on mobile first (i.e. not worry about external displays). How to indicate that in the spec? Does it *need* to be indicated in the spec?
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might make sense to file a TAG early review request, highlighting that you would like feedback on these points.

rakuco marked this conversation as resolved.
Show resolved Hide resolved
- Should this trigger "`prefers-contrast: more`" in [CSS Media Queries](https://drafts.csswg.org/mediaqueries-5/#prefers-contrast)?
tomayac marked this conversation as resolved.
Show resolved Hide resolved
- From [https://github.com/w3c/devicesensors-wg/issues/51](https://github.com/w3c/devicesensors-wg/issues/51)
- Brightness levels
- How bright is too bright? Consider 100% brightness with HDR displays, for example.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess you could talk about specific nit values

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you mean by "nit values"?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is a unit for light intensity: https://en.wikipedia.org/wiki/Candela_per_square_metre - it is very common to use it for displays.

Good article: https://www.maketecheasier.com/what-is-nit-of-screen-brightness/

"Technically, a device starts counting as “sunlight-readable” when it hits at least 1,000 nits, but very few mobile displays go that high. As a general rule, anything above 400 to 500 nits will do pretty well on a sunny day, but at 200 nits, you may have to find some shade to answer texts."

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see. I'm used to "nit' being short for "nitpick", which makes some of those sentences very funny to read :-)

Do you know if nits are exposed by any platform?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know sorry. But on Android you at least seem to be able to get the max range: https://stackoverflow.com/questions/4544967/get-preferred-screen-brightness-in-android/8114307#8114307

- Take a granular value or an enum?
rakuco marked this conversation as resolved.
Show resolved Hide resolved
- Related to whether script should be allowed to reduce brightness.
- Permission model
- Probably require user gesture (request but not consume it).
rakuco marked this conversation as resolved.
Show resolved Hide resolved
- How to deal with multiple or external displays
rakuco marked this conversation as resolved.
Show resolved Hide resolved
- While brightness changes
- What if users change the brightness level while the lock is held?
- When dropping screen brightness request
tomayac marked this conversation as resolved.
Show resolved Hide resolved
- Does the UA have to restore the previous brightness level?
- What about external displays? Do UAs need to keep track of levels for each display?
- Should script be allowed to "hold the lock" indefinitely?

## Goals

- Provide the ability to request an increase to the display's brightness. This could be a UA-controlled maximum (which *could* be the maximum display brightness), either indefinitely or for a period of time.
- Provide the ability to release the request so that the device's brightness returns to its pre-request value (i.e. hand back control to OS).
tomayac marked this conversation as resolved.
Show resolved Hide resolved
- Handle error cases, where such requests are denied or not possible.
rakuco marked this conversation as resolved.
Show resolved Hide resolved

## Non-goals

- Reading screen brightness level.
tomayac marked this conversation as resolved.
Show resolved Hide resolved
- Adjusting display brightness level to arbitrary values (absolute or relative).
tomayac marked this conversation as resolved.
Show resolved Hide resolved
- [\<video\> integration to allow e.g. granular brightness control](https://github.com/w3c/screen-wake-lock/issues/129#issuecomment-926603108) is an instance of the above. This is most likely better handled elsewhere and should probably be a UA-specific control.
tomayac marked this conversation as resolved.
Show resolved Hide resolved

## API
### Web IDL

Extend the [Screen interface](https://drafts.csswg.org/cssom-view/#the-screen-interface) with a new operation, inspired by the [Wake Lock API](https://developer.mozilla.org/en-US/docs/Web/API/WakeLockSentinel). Something like:
tomayac marked this conversation as resolved.
Show resolved Hide resolved

```webidl
[SecureContext]
partial interface Screen {
Promise<ScreenBrightnessSentinel> requestBrightnessIncrease();
};

interface ScreenBrightnessSentinel {
Promise<undefined> release();
rakuco marked this conversation as resolved.
Show resolved Hide resolved
};
```

rakuco marked this conversation as resolved.
Show resolved Hide resolved
### Usage

```javascript
myButton.addEventListener("click", async () => {
try {
const sentinel = await screen.requestBrightnessIncrease();
console.log("The display's brightness level has increased");
await sentinel.release();
rakuco marked this conversation as resolved.
Show resolved Hide resolved
} catch (e) {
console.error(e);
}
});
```

## Proposed Solutions

This was initially discussed in [Screen Wake Lock API issue 129](https://github.com/w3c/screen-wake-lock/issues/129) back in 2018 and also proposed as a [separate API in WICG](https://github.com/WICG/proposals/issues/17). This topic was also discussed at multiple TPACs under the Devices and Sensors WG. As such, several different API shapes have been considered over the years.

At this point, none have been fully discarded, and we are open to feedback about adopting some of the ideas described here.

### Screen Wake Lock integration

This was considered for a long time until the [2021-11-17 DAS WG meeting to discuss the topic](https://www.w3.org/events/meetings/0f623aa1-2026-4366-846b-c2faedda4180). The idea was to extend the existing Screen Wake Lock API and tie the change in brightness to a WakeLockSentinel. Something like:

``` javascript
const lock = await navigator.wakeLock.request({ increaseBrightness: true });
```
rakuco marked this conversation as resolved.
Show resolved Hide resolved

### navigator.screenBrightness
tomayac marked this conversation as resolved.
Show resolved Hide resolved

Originally proposed in [WICG issue 17](https://github.com/WICG/proposals/issues/17). The API proposed there had a larger surface that allowed reading the brightness value (leading to potential fingerprinting issues).

rakuco marked this conversation as resolved.
Show resolved Hide resolved
### requestFullscreen() integration
tomayac marked this conversation as resolved.
Show resolved Hide resolved

A mixture of [whatwg/fullscreen](https://fullscreen.spec.whatwg.org/) issues [185](https://github.com/whatwg/fullscreen/issues/185) and [198](https://github.com/whatwg/fullscreen/issues/198). The idea would be to do something like

rakuco marked this conversation as resolved.
Show resolved Hide resolved
``` javascript
body.requestFullscreen({ increaseBrightness: true });
```

To take advantage of existing UA privacy mitigations and UX indications that would show to the user that a web application is increasing the brightness, and leaving full screen mode would make it clear that the UA should stop increasing the device's screen's brightness level.

rakuco marked this conversation as resolved.
Show resolved Hide resolved
### getUserMedia() integration
rakuco marked this conversation as resolved.
Show resolved Hide resolved

Add something to getUserMedia() to bundle the request for brightness into the media capture request itself.
tomayac marked this conversation as resolved.
Show resolved Hide resolved

The idea was dropped because this feature is not doing media capture and the need to ask for camera permission before e.g. entering full screen mode [complicates some use cases](https://github.com/w3c/screen-wake-lock/issues/129#issuecomment-858790397).

rakuco marked this conversation as resolved.
Show resolved Hide resolved
### CSS property

Some form of "scannable element" property. When an element with said property is visible, the UA would take care of increasing the brightness level.

*Note: this is the least hashed out proposal at this point. It is unclear how this would work with zoom, permissions, low-battery mode, what happens when an element scrolls in/out of view, or even how to mitigate something like*
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we implemented one of the proposals above featuring a requestIncreasedBrighness() method then I would polyfill this proposal roughly as,

let sentinel;
element.onvisible = () => {
  sentinel = requestFullBrightness();
};
element.onhidden = () => {
  sentinel.release();
};

Polyfilled in this way all the same abuse mitigations would apply with the advantage that the browser has some insight into how the page content relates to the developer's desire for increased brightness and can do things like offer to increase brightness when the element is visible (instead of automatically doing so) or increase brightness gradually as the element enters the viewport.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't that bypass the user gesture requirement and allow one to add the max-brightness style to <body>?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not necessarily. The browser could still require the user interact with the page in some way before the property took effect or else it would display its own UI prompting the user with something like "tap here to make this page easier to scan".


``` html
<body style="brightness: max">*
```