CSH Room Maker January 16, 2010

One of the projects that I have wanted to work on for a while has been a web interface to setup and and preview a room layout. Rather than guessing as to if a certain layout will work and then hoping that the configuration is possible, it would be much nicer to just move the room around online and see what works and what does not. The best part about it is that there would be a way to send your roommate a copy to see what they think, rather than crappy ms paint drawings, and possibly come up with layouts that you wouldn’t have been able to before.

I have just completed a first version of a possible CSH Room Maker (http://www.csh.rit.edu/~geoff/roommaker) using HTML5 and it’s canvas to draw and move shapes around on the screen. Currently, you can click and drag the furniture around anywhere in the room. You can also overlay furniture if you plan on putting that piece of furniture under the other. I need to add formation to the layout about where the build in cabinets are, since they are obviously non-movable, allow for rotations of furniture, allow for input of custom dimensioned furniture, and allow for different room types.

Thus far, HTML5 and its canvas have not been too much of a pain to work with. I am new to JavaScript so I am sure that I am doing a lot of things wrong in my code, but I am happy with it for the most part and will probably work on condensing it when need be, but for right now it works. I am having problems getting keydown events to work properly, I cannot get them to register for some reason. Other than that, the tutorial on canvas at Mozilla Development Center (http://developer.mozilla.org) is very good and very helpful to learning.

Leave a Reply