Suggestion: vary the badge background color by temperature

[malibuzios]

It is useful to have the current temperature visible but I it can be distracting at times, especially since it is positioned right next to my Gmail Notifier icon so I sometimes mistakenly read it as if I have many unread messages:

The red background highlights it very strongly, and this color is usually used with important notifications. If it was possible to use a different, perhaps more "milder" color, like, say light blue, then I it would be less distracting (it may also be useful to have an option to remove it entirely).

I tried to make the change myself: I cloned the repository, added the needed dependencies to package.json and installed them but I couldn't get the Firefox add-on to build:

XPI creation failed: Error: The addon has no valid entry point. Either create an entry point
at `./index.js`, or set the `main` property to a valid path in
your addon.

In any case, in Firefox, changing the badge color should be simple (at least based on the documentation):

badgeColor: "00BFFF"

(the color I chose here is just an example, I can't really tell right now how well it will look without building the extension)

I believe the position in the code should be about here, at least for Firefox, which is what I use most frequently. I haven't investigated how to do this for other browsers.

[malibuzios]

Or alternatively: vary the background color of the badge to visually 'match' the temperature. Going from the lightest blue on freezing temperatures to the strongest red for the warmest ones.

Several questions may follow: how to actually vary the color? what would be the 'mid' color? and what temperature should be associated with it?

Well, room temperature is considered to be about 21 °C (70 °F). One approach could be to use only hues of red for temperatures of 21°C and above, and vary the hues by saturation, where 21°C would be a very unsaturated red (but not pure white as the text itself is white), and 40°C would be fully saturated red. The same can be done in reverse for temperatures below 21°C using hues of blue:

In RGB it would look like this:

(0 °C)
0, 0, 255 (fully saturated blue)
1, 1, 255 (slightly less saturated blue)
2, 2, 255 (slightly less saturated blue)
...
(20 °C)
219, 219, 255 (desaturated blue)
(21 °C)
255, 219, 219 (desaturated red)
255, 218, 218 (slightly more saturated red)
255, 217, 217 (slightly more saturated red)
..
(40 °C)
255, 0, 0 (fully saturated red)

Based on the example in the Firefox documentation, it should be possible to modify the badge background color at any time, including after the icon was created. In Chrome it should also be possible. I haven't investigated Safari yet.

Edits: expanded a bit

[alexis-jaksone]

Thanks for the suggestion. Version 0.1.7 will have a new option in the options page to allow you define a custom background color for the badge.

[malibuzios]

Awesome, thanks!

I could also try to add the more 'dynamic' coloring approach myself as an additional option, in a pull request (though I'll need the build script for Firefox to work first.. but I have no idea how to fix that). I could use that idea for a new extension of my own, though I think I'll wait until Firefox 48 comes out, which would introduce the WebExtensions framework that would simplify cross-browser extension development.

[alexis-jaksone]

If you come-up with a method to generate dynamic coloring I'll be more than happy to add it into this extension. For now get the Chrome version and work on it.

https://github.com/alexis-jaksone/forecast-plus/blob/master/builds/packed/chrome.zip

P.S: To have cross browser compatibility, please try to generate HEX codes rather than rgb or rgba.