Elemental has Landed
By Daniel Wood, 17 June 2019
Introduction
Elemental is here! This is my first foray into building a product/resource that is much larger and more expansive than my standard demo files you'll find on articles. It's the main reason why the blog has been quiet these last couple of months as I've been spending all my spare time on this project.
If you want to check it out before reading, you can download a copy at https://www.elemental-fm.com
So what is it?
Elemental is more a resource than a product. Maybe you noticed over the last couple of years a trend toward more design and user interface based articles such as:
This is mostly because design and building solutions that are both usable and visually appealing really floats my boat. The user experience is paramount here and anything that can be done to improve the users enjoyment of using a solution is vitally important. Just think how many hours a day people spend using a solution that you might have built - you want it to be as fun as possible.
That's what Elemental is about. My goal is to provide UI resources that you can incorporate into your own solution to improve user experiences, be it through better user interface, or just purely a better visual design.
How much does Elemental cost?
Elemental is and always will remain free to the community. A lot of what I have done is writing code to help integrate with various API services, or make it easy to use freely available resources in your own solutions.
While I ask no fee to purchase Elemental, my site does have a donate option. Building this does take a lot of time and effort. I would really love to continue building on Elementals feature set which is why I have added this option. You are able to help make a contribution toward the continued development of Elemental. You can also just offer a donation if you really like the product and want to help me out, but this is not expected.
What's in Elemental?
In this first version I've got 5 sections...
Avatars
An avatar is something you'd typically find on the web. Most sites you sign up for have a profile photo you can upload. Some offer a randomly generated avatar if you do not provide one.
I've collated basically every restful API service out there that offers various avatar generators - 23 in total. They're all slightly different, each offering a different feature-set of options that you can customise.
Most work on unique generation based on a seed you provide. A seed is something generally unique to a user. Most of the time it will be the name of an individual, but you can just as easily use the primary key UUID, or whatever you like.
The avatar generator will take that seed and hash it to produce a unique avatar at the other end.
In Elemental you'll find a script group named "Avatar Generators". These are built to be standalone scripts you can copy/paste into your own solution to implement an avatar generator. There are just a couple of places in the script you'll need to fix up for your own solution:
- The bottom of the script has the section where the avatar is returned and set into a container (or text field for SVG) you'll need to point this to your own container/text field.
- Some scripts rely on a custom function @validate_input to make sure items passed are valid for the API. If the script uses this you'll need to import it into your solution.
And that's about it. We pass all parameter options that the API can accept to the script using JSON functions. You'll see at the top of the script all parameters are parsed.
Some API's will return the avatar as an SVG, which for us is kind of useless because container fields don't display SVG's (although you can render this in a web viewer and that is what we've done in Elemental for previewing the avatar). Fear not! Through some magic we've got a SVG to PNG converter built into Elemental which works all within a single web viewer off the side of the layout. Feel free to explore how this works. We'll cover this more in an upcoming article.
Placeholders
These are quite similar to the Avatars. We integrate with API services that provide placeholder images. These are great if you need an image of certain dimensions, colour or type to act as a placeholder. Perhaps you have a product database where you need a placeholder image, or you expect the user to insert an image of a specific size - you can integrate with a placeholder API that provides you an image showing dimensions.
We've got a few fun placeholders in there too....
SVG Icons
This one might prove most useful to the most number of developers. These SVG icons are from the Syncfusion MetroStudio suite of icons which are freely available. We've downloaded them all, and ran them through some processing to make them FileMaker ready. You should just be able to put these straight into a button bar and they'll be sized and positioned correctly ready to be used. You'll find over 7,000 icons in this set.
SVG / GIF Animations
A little bit of movement never hurt anyone! Add a bit of animation to your solution. These are a selection of around 20 loading style animations. These would be great if you have a Perform Script on Server that you are executing and need the user to wait to complete, or any other operation that takes a while to run. A bit of visual feedback is sometimes all a user needs to accept that there will be a wait time.
GIF's have been included because these are universally compatible on both mac & windows.
The SVG animations use SMIL technology which works great on Mac's but be weary on windows, not all browser versions support this so you may need to use GIF's.
These were obtained under free license from loading.io (but you can purchase many more). They are fully customisable and we offer instruction in Elemental on how to do this.
Gradients
Either love 'em or hate 'em, gradients are included :) We've collated over 330 different examples of gradients from GradientJoy that you can browse through and pick your favourite to use. Hex color codes are included so you can easily build your own in FileMaker.
Other Cool Stuff
Elemental has been built not just with some cool resources, but I want the overall solution to be considered a resource in and of itself. In it you'll find some other interesting little nuggets. Here's a hint of what they are and where to find them:
- Elemental theme provided fully styled
- HTML5 Color pickers are used in some avatar/placeholder examples (where the OS version supports them)
- The Jdenticon Avatar has a double-range slider control (again if your OS supports it!)
- About/Acknowledgement pages contain animated SVG icons - these are done entirely with CSS animations on a static SVG. To discover how it is done check the custom function @svg_animate. This was a feature I hoped to flesh out a bit more in this version but it might have to wait to the next one.
- SVG to PNG/JPG conversion using some javascript in a web viewer and nothing more - check Avatar/Placeholder examples where it is used
- plus lots more!
In Conclusion
Building Elemental has been a labour of love. Most evenings over the last 2 months have been spent working on this instead of having a life! I hope you all enjoy it and find something in there you can use, no matter how small, or at the very least to just be inspired to think more about design or the user experience - if I can achieve that then my work here is done :)