I am very excited to announce the completion of the largest project ever done by Confidant Communications: the RTA Outdoor Kitchen Design Tool!
It’s been months in the making—an HTML5 application which lets you build an outdoor kitchen and view it using 3-D in your browser.
How was it built?
While a lot of our own planning, problem-solving and original coding went into this, this project stands on a huge foundation of indispensable technologies for which I am grateful. The biggest challenge of the project was choosing the best set of tools which would serve our needs both now and in the future.
First and foremost in the toolbox is Haxe, a 15-year-old open source language whose superpower is its ability to compile to many different platforms and languages. The design tool is compiled to JavaScript so that it can run in web browsers of many kinds. While there were other options for making applications, the versatility of Haxe combined with our existing skills made this one a logical choice.
Riding on top of Haxe is OpenFL, a cross-platform implementation of the API which originated with the Flash plugin. It is a bulletproof way of handling animation, graphics and multiple assets. It also ensures the application will be very portable if we decide to make applications for iOS or Android at a later time. I considered other Haxe display libraries such as Kha and Heaps, but the large amount of tools designed to work with OpenFL (including a workable 3D solution) made OpenFL the winning choice.
A very important part of the technology selection was finding a good way of converting SketchUp files into something the application could use, and having a strong tool for displaying and manipulating the models at runtime. I mentioned Heaps in the previous section. It was very strong in its ability to handle FBX models—something SketchUp could export easily. After much consideration and testing I decided that a two-step conversion of models into Collada format was going to be the best solution. Away3D is a mature 3D engine with parser for that format and I already had experience using it. Collada is human-readable and editable, which also proved to be useful for late-stage adjustments.
This open-source 3-D software was responsible for converting and editing models along with their textures.
PureMVC
As a fan of the MVC design pattern in coding, I have been using this library for many years. It has versions for 18 different programming languages, which is a testimony to the strength of its design.
Advanced Layout
Since this application does not use HTML for its layout (it uses an HTML canvas) it is necessary to provide some intelligent features to ensure all the page elements display nicely on every screen. This was the perfect solution.
Glory Framework
This is an application framework built by yours truly. It is strongly inspired by the Gaia Framework from the days of Flash, and it unifies OpenFL, Advanced Layout, and PureMVC in a page-based way of building websites and applications. It has been a hobby project of mine for a few years and this is its first real-world application. It has made the development process much more pleasant and I invite you to explore it for yourself!
Adobe Animate (a.k.a. Flash)
OpenFL is built upon the foundation laid by Adobe Flash, and I used the application to create the layout for the final quote screen and its text fields. This allowed me some freedom in design without having to do a lot of hand coding of those elements.
Thank You
To all the developers who put their heart, soul, and brains into all these excellent tools, I send a huge thank-you! I also am grateful to RTA Outdoor Living for their vision in making this project a reality!
If you have an idea for a similar project, please give us a call!
Sincerely,
Allan Dowdeswell