Prominent Color Coolness

Introduction

In this article we're going to show a simple web viewer based approach to achieve beautiful dynamic background gradients and fills that are based upon an images most prominent colors. Further to this we'll show a way to render those solid fills in a container field. Finally, we'll demonstrate how to choose the optimal color for text that is to be placed on top of these fills for maximum readability.

Note that for specific code examples and content, we encourage you to download the example file at the end of this article.

What Are We Talking About?

If you have used Spotify before, you may nave noticed that album pages contain a nice gradient background behind the album art. This gradient is based upon the prominent colors within the album art itself. It creates a really nice effect and gives each album page it's own sense of personality beyond just the album cover.

Wouldn't it be cool to achieve the same thing in FileMaker? This idea came to me when developing a solution for a company who restores artworks. Their solution had a page displaying a grid of artworks. The various dimensions of artworks created a cluttered and uneven feel. To remedy this I wanted a consistent background, but wanted to ensure that background matched the artwork.

Below you can get a sense of what this achieved by comparing before and after.

JavaScript To The Rescue!

These days most problems in FileMaker can be solved with JavaScript, and this problem was no different. A bit of hunting led me to grade.js, a library which produces a gradient using the 2 most prominent colors in an image.  

grade.js will insert a gradient background in a <div> element. It does this using the image specified inside the <div> element, using an <img> element.

Our code takes this further, styling the <div> element fill the entire web page (and thus the web viewer).

An image from a FileMaker container field can be inserted into the <img> element by encoding it as Base64, as shown below:

<img src="data:image/png;base64,**IMAGE**" style="display: none;" />

You'll also note we use a style to hide the image. This is because it's easier for us to overlay the container field in FileMaker than it is to correctly position the image in html.  

FileMaker 19 introduced a change to web viewers, allowing them to render underneath other FileMaker objects. Prior to 19, web viewers always rendered in front of all other objects, much to this developers frustration.

The end result is quite awesome.

Returning Color Data To FileMaker

Another neat thing grade.js can do is make available the color data used to generate the gradient. This information can then easily be passed back to FileMaker by utilising the FileMaker.PerformScriptWithOption function call within the javascript.

This information can be parsed to do things like color text, or generate saved solid fills as we'll show later.

Generating Solid Fills 

Gradients are pretty, but what if you just want a single solid color? Fortunately there are lots of examples out there on the web of how to do just this. I found one here on jsfiddle.net. Again it's very simple and works almost exactly the same as our gradient example. This code sets the html body background color to the average color in  an image element.

Again we base64 encode and inject our image and make it invisible in the page. With some CSS styling we can ensure the background fills the entire web viewer.

This library can also return us RGB information about the background color generated using FileMaker.PerformScriptWithOption.

The Web Viewer Dilemma

Web viewers can do so many cool things, but one thing they cannot do is get placed inside a portal. So far we've shown fills that exist within the web viewer, and as such these are restricted to non-portal implementations.  Web viewers also take a brief moment to load, and so there are very small flashes that can be seen while they load.

If we want to show these fills in a portal, then they have to exist outside of a web viewer. In this example we focus specifically achieving this for solid fills.

Rendering RGB As A Fill Color

As we saw in the previous example, our solid fill code can return the numerical values for red, green, and blue. The problem to solve is how to transform this into a visible solid fill in FileMaker, that isn't using the web viewer to render.

Fortunately this problem was solved for us back in 2013 in this great article from Excelisys. When the Base64Encode and Base64Decode functions were introduced to FileMaker, the guys at Excelisys used them to produce a 1x1px bitmap image of a color in a nominated RGB color. This was then used to produce a progress bar that could be dynamically adjusted - all without a web viewer.  Cutting edge stuff back then for sure! Progress bars these days can be done in other ways such as button bars, or in web viewers, but the code still has great use.

We have taken the Excelisys progress bar code and instead  used it to produce our own 100% filled progress bar of our required color. We can then use this as a background fill to display in portals.

There are a series of custom functions used to achieve this effect, which are available in the example file provided at the end of this article.

The Text Overlay Dilemma

Okay, we have our image our and our fill, but what about displaying text on our background?  We want the text to be optimally readable regardless of whether the background is dark or light. So how do we do it?

 ( ( r * .299 ) + ( g * .587 ) + ( b * .114 ) ) > 186

This is how we do it. This code tells us whether a given color defined by its RGB components is a light image. If the calculation result is greater than 186 then it's a fair bet that the image is of the lighter persuasion and thus the text should be of the dark variety.  

Conversely if the number is less than or equal to 186, it's a dark image and so light text is favourable.

In our example file we bundle this up into a custom function that accepts the RGB values as parameters. We return either a light or dark color using the RGB text formatting function.

This result can then be used to color text using the TextColor function.

Taking It Further

What we've shown really is the tip of the iceberg and there are so many more cool libraries out there and code examples that you could utilise in FileMaker. Below are just a few that caught our attention but we have not had time to explore further:

Fast Average Color

A cool library for getting average color of images for background display, with a heap of customisations around background display.

Color Thief

This library can return you a color palette of prominent colors of a provided image. Again, a ton of options possible. Here is one such implementation.

Image Blur

This is a simple nifty CSS hack that produces a background from an image by blurring it beyond recognition.

We encourage you to try these or any others you find and share your results!

Example File

What FileMaker Weetbicks article wouldn't be complete without an example file? The images in this article are from our file and we hope you enjoy it.

Click here to download the example file