Tim Dietrich

Custom Software Developer

Home Services Portfolio Blog About Contact Newsletter

FMEasyCanvas: Beta 1 Released

This morning I released the initial beta of FMEasyCanvas, an open source drawing solution for the FileMaker platform. This is a project that I've been working on for a few weeks now, and I'm pretty excited about it.

FMEasyCanvas is based on HTML5, jQuery, CSS, and a few open source Javascript libraries. It combines these technologies, along with FileMaker's support for Web viewers and FMP URLs, to provide a seamless drawing experience for users.

FMEasyCanvas was developed using these libraries:
jQuery, a popular JavaScript library that makes it easy to reference and manipulate the DOM, handle events, and more.
React, a JavaScript library for building user interfaces, which is the result of a collaboration between Facebook and Instagram.
Literally Canvas, an extensible, open source (BSD-licensed), HTML5 drawing widget. This is where everything comes together and the magic happens.

Normally, you would reference libraries like jQuery and React, as well as all of the other "pieces" that make the app work properly (images, stylesheets, etc) externally. However, one of the big goals of the project was to have EasyCanvas work without the need for an active Internet connection. That meant that I needed to find a way to embed everything (all of the libraries, images, stylesheets) into the solution - and then to embed that into FileMaker. The solution uses a few global fields to store the FMEasyCanvas HTML template and the libraries for jQuery React, and Literally Canvas. The FMEasyCanvas script pulls in the HTML template, and then replaces tokens in it with the specified settings and the library content.

Limitations of the Beta

While working on EasyCanvas, my biggest frustration was trying to add support for Windows. The problem is that Internet Explorer doesn't support the CustomEvent constructor. I also ran into some encoding issues with Windows. And rather than continue to struggle with this, and delay the release of the beta for Mac and iOS users, I made the difficult decision to release Beta 1 without Windows support.

I am also disappointed that EasyCanvas doesn't fully support FileMaker WebDirect. I have been able to get EasyCanvas to display and work properly in WebDirect. However, without support for FMP URLs, there is no way for a WebDirect user to save their work back to the database.

What's Next

I'm already working on FMEasyCanvas Beta 2. Here's what's on the feature list:

Support for Windows. This is the biggie.

Improved support for saving marked-up images. In Beta 1, when saving marked-up images, only changes made to the canvas area are included - not the entire image.

Support for an image library. This was originally in the feature set for Beta 1, and I have made progress on it. The goal is to provide the user with a library of images that they can easily select and add to the canvas - icons, symbols, and more. I pulled the feature from Beta RC2 "Division" because the UI just wasn't working well. This is high on the feature list, but most likely won't come until later.

To download the beta for FMEasyCanvas, head over to fmeasycanvas.com. And please let me know what you think.