GlassLayer : web app. to design & purchase plates online


www.glasslayer.com

Before reading rest of the article please check out the GlassLayer Web App. itself

Hi everybody,
Finally , i finished this web application i’ve been working for over a year. So i thought it would be a good idea to share my experiences and announce the application here on my blog. Application name has changed a few times along the way but final name is GlassLayer. I’ve made this web application for Glass Art Projects company located in LA. What they offer is that they give a kit of glasses , you glue those glasses on to a base glass as you like , it’s as simple as that and you get to design your very own plate. This was the traditional procedure but now with this new web application you get to design your own plate faster & cheaper.

How it is faster?

In the traditional design process:
You buy the kit , it is shipped to you
You glue your own design , ship it back to company
Company makes the plate , ships it back to you
It took 3 shipments to get you to design your own plate.
But now with the web application we eliminate 2 shipments , you only design the plate and get it shipped to you.

How it is cheaper?

You know in the traditional design you get to buy a kit , but as you design you realize you dont use all of the pieces and some glass pieces gets broken which causes lots of piece waste. By using web application you only pay for the pieces you used.

Features ( End User )

  • Hold down CTRL key to select more than one piece.
  • Use Remove , Rotate , Layer buttons to control selected pieces.
  • Drag & Drop pieces onto plate from piece inventory.
  • Undo and Redo when you need to back in design process.
  • Use Plate Material button to change plate base color.
  • Change Color Palette to access more colors.
  • Switch to Transparent tab to access transparent pieces.
  • Make sure to register & login before designing if you are thinking about saving or buying your design.
  • Use accordion menu in inventory to access different types of pieces.

Technical Part of the Article for Devs.:

First of all , i have to say that i truly appreciate Dimitry Baranovsky’s RaphaelJS library and thanks a lot to JQuery developers. RaphaelJS is a great library for 2D Canvas operations and it even supports IE7… It handles all the cross-browser compatibility issues in 2D graphics. And one can not ignore the power & acceleration ClassyJS added to development of the application.
This project has been my biggest and most time-consuming project so far. I can not express how much this project added to me in terms of experience.Until the end of 5th month of development i have been developing using functional coding discipline. The more the project grow , the messier code has become. And it became impossible to work on it.So i decided to switch to object oriented approach , i researched some of the OOP approaches in javascript and i found ClassyJS library. ClassyJS library is inspired by the OOP approach of Python programming language and as i had years of experience with python in the past , it seemed best choice for me. It took a month to re-code everything in OOP but after i switched OOP , the development got very fast and a lot less confusing.Now it’s about 3000 lines of javascript code but still looks simple , thanks to OOP & ClassyJS.

Features ( Technical ) :

  • Single & Grouped Piece Selection
  • Single & Grouped Movement,Rotation,Layering,Removal
  • Infinite Undo & Redo
  • Replay Design Process
  • Save & Load Designs
  • Piece Bundles

One thought on “GlassLayer : web app. to design & purchase plates online

Leave a Reply