A solar calculator that runs where you'd least expect it
For this year's Designcember challenge, one developer set out to recreate a piece of 1980s school nostalgia as a modern web app: a skeuomorphic solar calculator, complete with a functioning solar cell. The result combines the Window Controls Overlay API with the AmbientLightSensor API to build a PWA that feels at home on both mobile and desktop operating systems.
The project started with a CodePen by Sassja Ceballos and was transformed into a fully installable, self-contained calculator app. On mobile, the focus is on making the app blend in with native apps. The Web App Manifest sets the display mode to fullscreen, and the viewport is tweaked to handle devices with a camera hole or notch, ensuring content covers the entire screen.
Using the title bar as real estate
On desktop, the calculator takes advantage of the Window Controls Overlay. This feature lets content occupy the title bar area of an installed PWA window. The first step is to override the display mode fallback sequence so the browser tries window-controls-overlay first when it is available. This effectively removes the title bar, allowing the app's content to flow into that space.
The developer's idea was to move the skeuomorphic solar cell up into the title bar area and adjust the rest of the calculator UI accordingly. This is achieved with CSS using the titlebar-area-* environment variables. All relevant selectors carry a wco class, which becomes important when reacting to overlay changes at runtime.
With the title bar gone, a critical piece of functionality needs to be recreated: window dragging. The entire calculator can be made draggable by applying (-webkit-)app-region: drag, except for the buttons, which are given (-webkit-)app-region: no-drag so they remain interactive.
Reactive and progressive enhancement
The app needs to respond to changes in the window controls overlay geometry. In a true progressive enhancement approach, the code for this feature is only loaded when the browser supports it. Whenever the overlay geometry changes, the app updates to look as natural as possible. It's a good idea to debounce this event because it can be triggered frequently during window resizes. When the overlay is visible, the wco class is applied to certain elements so the custom CSS kicks in, and the theme color is updated. Visibility is detected via the navigator.windowControlsOverlay.visible property.
With everything in place, the calculator becomes a desktop widget that can be freely placed, evoking the feeling of a classic Winamp with an old-school theme. Clicking the chevron in the upper right corner toggles the window controls feature.
Power from the ambient light sensor
For the ultimate touch, the solar cell is functional. The calculator only works when there's enough light. This is modeled by setting the CSS opacity of the display digits via a CSS variable, --opacity, which is controlled through JavaScript.
To measure available light, the app uses the AmbientLightSensor API. Notably, this API requires setting the #enable-generic-sensor-extra-classes flag in about:flags and requesting the 'ambient-light-sensor' permission. As with the window controls, the relevant code is loaded only when the API is supported.
The sensor reports ambient light in lux. Based on a table of typical lighting conditions, the developer came up with a simple formula to convert the lux value to a number between 0 and 1, which is then programmatically assigned to the --opacity variable. When room light is raised sufficiently, the calculator comes to life.
The demo is available to play with, and the source code is on GitHub. To install the app, it needs to be opened in its own window; the embedded version won't trigger the mini infobar.
