Elemental has Landed

By Daniel Wood, 17 June 2019

Elemental Teaser

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.

Elemental Avatars

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.

Elemental Placeholders

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.

Elemental Icons

 

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.

Elemental Animations

Elemental Animated Ball

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.

Elemental Gradients   

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!

 Elemental Color Picker

Elemental Slider

 

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 :)

 

Something to say? Post a comment...

Comments

  • Daniel Wood 23/06/2019 12:04pm (1 month ago)

    hi Gregor, thanks so much for the nice comments! Rest assured I'm back to having a life lol. Glad you like the solution and found something useful in it.
    Oh and nope don't live in Sydney even though we do have a Sydney office, I live in Christchurch New Zealand ( close though!)

  • Gregor Beuster 22/06/2019 12:06am (1 month ago)

    Hi Daniel,

    thanks for making UI great again (or better making it great for the first time?!)... I just started "disecting" the file and already discovered tons of small and BIG gems under the hood! Thank you so much for the love you put into this... BUT please stop "...working on this instead of having a life!" - you live in Sydney, right? ;-)

    Best,
    Gregor from Berlin (Germany)

  • Daniel Wood 20/06/2019 8:01am (1 month ago)

    Thanks Jul really appreciate your words and I'm glad you like it :)

  • Daniel Wood 20/06/2019 8:01am (1 month ago)

    Thank you Chris!

  • Jul Carson 20/06/2019 1:46am (1 month ago)

    Just downloaded and took a quick look. Fantastic! A truly generous act.

    Yes, most of us can work these things out, but you've taken all the grunt work out of it and made the lives of all developers easier.

    Thank you.

  • Chris Papas 19/06/2019 12:55pm (1 month ago)

    Thank you Daniel, great job. I always learn something reading your blog and this will be a great help.

  • Daniel Wood 19/06/2019 7:28am (1 month ago)

    Hi Arnis, Will & Rodney,

    Thank you very much for your kind words it's very much appreciated and I'm so happy that you like the solution. I can't wait to see what people do with it so if you ever use anything from it please share it. Regards - Daniel

  • Will Bullard 19/06/2019 4:16am (1 month ago)

    Thank you for sharing this amazing program to the entire FM community!

  • Rodney Ang 18/06/2019 9:08pm (1 month ago)

    Thanks for the invaluable contribution to the FileMaker Developers' community.

  • Arnis Gross 18/06/2019 8:19am (1 month ago)

    Fantastic resource. Well done!

RSS feed for comments on this page | RSS feed for all comments

Categories(show all)

Subscribe

No Tags