We recently added support for assigning colors to various elements of your app using formulas. In addition to the formula functions COLOR and DEFAULTCOLOR, there are 22 new color functions which fall into three categories:
- Functions which allow you to create new colors using the color components supported by the various color models (RGB, RGBA, HSB, HSBA, HSL and HSLA).
- Functions which extract these color components from colors (RED, GREEN, BLUE, ALPHA, HUE, HSBSATURATION, HSLSATURATION, BRIGHTNESS and LIGHTNESS).
- Functions which serve as easy-to-use, but less versatile, alternatives to the other functions (BRIGHTEN, DIM, LIGHTEN, DARKEN, SATURATE, DESATURATE and COLORSPIN).
How can these functions be used to create more useful apps? Let’s return to the subject of validating fields. So far, we have treated field validity as an either-or proposition: either a field is valid, or it isn’t, with nothing in-between. That is not always enough — sometimes you need to convey that a field value is mostly acceptable or is close to being invalid, but is not quite invalid. There are obviously many ways to convey this information, but using different shades of a color is effective, elegant and takes up very little space. Here, we’ll change the background color of a field, but you could also change the color of the field value or field label.
Our goal is that the background color of the field should be white if the field is fully valid, deep orange if it is invalid and then use different shades of orange to convey that the field is somewhere in between being fully valid and fully invalid.
Realizing fine-grained validation with the IF and COLOR functions
The most obvious way to realize this more fine-grained validation feature is to use the IF formula function in conjunction with the COLOR function:
This formula, when associated with the BackgroundColor property of a field, uses four different colors to convey the severity of a fictitious boiler pressure level. If the value of the BoilerPressure field is less than 500, the background is set to white. If it is less than 1000, it’s set to a desaturated orange color. (“Deep Orange 300” is a color from the Material Design palette.) If it is less than 2000, a somewhat more saturated color is used. Otherwise, the background is made deep orange.
Realizing fine-grained validation with the BRIGHTER function
The problem with the formula using the IF and COLOR functions is that it only supports assigning one of four colors to the background. As it can only return four specific values, we have created a discrete formula. Ideally, we’d like the formula to be able to return an infinite number of colors. If the boiler pressure is zero, we’d like it to return white. If it is slighty more than zero, we’d like the formula to return a color which is mostly white, but has a hint of orange in it. Also, we don’t want to create a huge formula returning, say, a hundred different pre-calculated colors — we’d like to use a simple, elegant formula capable of returning an arbitrary number of colors (a continuous formula). To do so, we will use the BRIGHTER function.
First, we need a measure of the degree to which a boiler pressure should be considered “valid.” For that purpose, we’ll define a hidden field we name Validity, where the value 0 means that the field should be considered fully invalid and the value 1 means that it should be considered fully valid. The value 0.5 should thus be taken to mean that the boiler pressure is halfway between being fully valid and fully invalid.
Let’s say that a boiler pressure of 0 should be considered fully valid and a pressure of 3000 should be considered fully invalid. We then use this formula to determine the validity:
The MAX and MIN functions are used to ensure that the BoilerPressure value is between 0 and 3000 (inclusive). We then divide the number by 3000 to arrive at the validity — almost. As we want a fully valid number to equate 1, not 0, we need to subtract the number we arrived at from 1.
We now have all the building blocks we need to brighten the color. The BRIGHTEN function returns a brightened version of the color given as its first parameter. The second parameter should be a number between 0 and 100 which specifies the degree to which the given color should be brightened. 0 means that the color shouldn’t be brightened at all and 100 means that white should be returned.
To achieve our objective, we need to make use of the Validity field we calculated, which is between 0 and 1. As the BRIGHTEN function expects a number between 0 and 100, we simply multiply the validity by 100 before passing it to the BRIGHTEN function:
That’s it! We just need to associate this formula with the BackgroundColor property of the boiler pressure field to effectively convey the validity to the user.
Fun fact: The first draft of this blog post was more than twice as long as the finished version. At that time, Calcapp didn’t support the convenience functions BRIGHTEN, DIM, LIGHTEN, DARKEN, SATURATE, DESATURATE and COLORSPIN, so we brightened the background color using the HSL, HUE, HSLSATURATION and LIGHTNESS functions instead. The resulting formula was overly long and the blog post explaining how it worked was hard to understand. Dissatisfied, we added the convenience functions and rewrote the blog post. If you don’t feel that the convenience functions give you the control you need, spend some time learning about the RGB, HSB and HSL functions in the reference sidebar!
Do you want to share a tip with other Calcapp users through this blog? Let us know!