A simple Night Light designed for Fitbit Versa.
A simple night light with a choice of 6 colours.
Perfect when you need a light but don't want to disturb everyone.
Press the centre of the screen to toggle blackout on/off.
Press the cog to access settings;
- Choose from one of 6 colours (Blue, Purple, Red, Orange, Green and White).
- Choose the brightness of the screen.
- The chosen setting will be saved.
The levels of brightness/darkness are created using Image Grayscale Magic!.
I created a number of grayscale images with diffrent values of gray.
I used this site to caluclate the diffrent values. https://meyerweb.com/eric/tools/color-blend/#000000:FFFFFF:5:rgbd
I then set the fill of this image to fb-black, which created diffrent dark transparencies.
This allowed the background image to be displayed but to become brighter or darker depending on background image.
This is how I enabled the brightness/darkness of the display.
Grayscale images can be colored dynamically with the fill property. The black area of an image will be fully transparent (0) and the white will be fully opaque (255). All the mid-gray areas will inherit opacity according to their depth of color (0 - 255).
Note: The image must be 8-bit PNG format.
Example Code:
resources
<svg>
<image id="brightness" width="100%" height="100%" href="gray-1.png" fill="fb-black" opacity="1" />
</svg>
app
display.brightnessOverride = 0.0;
Aside from making UI more adjustable to color changes, the use of grayscale images reduces the size memory usage by a factor of 4.
You can generate images in the correct format by using the following;
ImageMagick command: convert original.png -colorspace gray final.png
Adobe Photoshop Image -> Mode -> Grayscale, 8 Bits/Channel.