By Daniel Wood, 18 August 2021
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.
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.
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.
This information can be parsed to do things like color text, or generate saved solid fills as we'll show later.
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.
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.
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.
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.
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:
A cool library for getting average color of images for background display, with a heap of customisations around background display.
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!
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.