August 3, 2011 by

My Internship at FluidUI

At the start of this Summer I attended the Dublin Web Summit with Ciarán and Carl. It was there that I met the startup company FluidUI, made up of Dave Kearney  and Ian Hannigan. Luckily for me, they were looking for someone to take some work to speed up the development of their product. I took up their offer and got a summer internship out of it.

FluidUI is a mobile prototyping tool built with HTML5. The product uses the canvas tag to dynamically create a mobile application quickly and easily. Pages are created by double clicking on the canvas, and each page is then editable by clicking on a page to zoom in revealing a library full of widgets. Each widget is made of a canvas, a textarea and a div. The canvas contains the widget image, on top of which is a div element containing text. This text is editable through the textarea element which can be edited by being click on. The div element is then hidden and when the user is finished, the div returns, containing the new text and hiding the textarea.
The dragging and dropping events are handled through jQuery UI.

The library allows the user to drag elements around, as well as allowing resizable objects. The droppable trigger event is used to create widgets when dragged from the library and dropped on the Linking to pages through widgets creates a click event, moving to the linked page when clicked, which then shows up in the preview creating the dynamic effect. The second form of linking is a template link which creates a copy of itself as a template to a page it’s linked to.

I have been working with jQuery and JavaScript for the the most part of the project creating basic animations and bug fixing. I got my first experience with PHP, creating a basic image upload for Safari as it did not support the drag and drop of images from desktop to browser. The application uses webkit features to style much of the app, using transformations and rotations, along with simple things like corner rounding and gradient. A good example of the use of rotation and transformation is the linking arrow or the template arrow, which is draw on a canvas that’s then rotated. This cuts down on the size of the canvas as well as the amount of times it needs to be redrawn.

 

These pages are currently saved using a JSON string of all the page information stored in local storage. This will reload your project whenever you leave and return to the page. Each widget created is also stored this way. FluidUI runs on Chrome and Safari and on most mobile web browsers. The work I have done with Dave and Ian has been very interesting. They’re doing really awesome and interesting things with HTML5. If you want to know more about FluidUI, visit their website or follow the team on Twitter.

About the Author

James Kelly

I am a student at IT Carlow studying Games development. I really enjoy programming and I love to challenge myself, learning new languages and general putting what i have learnt to the test,but mostly i spend my time planning for the zombie Apocalypse it's real, it's coming.

Visit Website

One Comment

  1. Ian July 9, 2012

    Launched and live! https://www.fluidui.com/editor