Roomie gets some CSS schooling

This week I have been furiously re-writing a few key elements of the Roomie website.  Specifically, I scrapped the old device button controls, which you can see here. They were ok, but they were very rigid in use, offering only two different pictures to back the buttons.  Zooming on mobile devices didn’t work so great either, since the images were PNGs, raster graphics.  Now I have created a button framework entirely in CSS, HTML, and ASP.NET controls.  Because of this, I can easily create new kinds of controls completely in code, and they even zoom cleanly as well.  My original vision for this was to enable the user to create “virtual device controls”, which would display next to the regular device controls.

Roomie home automation main site on an iPad

As you can see above, I have the Roomie website’s main page displaying on an iPad.  The first two controls are an example of the new feature.  Before I go to bed I might want to click the “set alarm” button, which would run a RoomieScript that I wrote that wakes me up in the morning.  The same deal goes for coffee. (Of course, making coffee is also part of the alarm routine.)  It would be easy to imagine many other virtual devices.  Eventually I will likely make a “basement” device, which would have buttons like “Movie” for nice movie lighting, “all on”, “all off”, and of course, “PAAARRTAAYY!”

I mentioned that these controls were highly customizable in code.  In the C# code-behind I can set the size of these controls with pixel precision.  That came in really handy when I made an iPad-specific page, which resizes the controls to be just the right width to fill the screen horizontally and high enough for easy pressing with a finger.  A tweak of the sizes only takes a few seconds.

Roomie home automation touch site on an iPad

All of this has been a really good learning experience for me, and of course I am far from done.  I’ve applied so much of what I’ve learned writing Roomie, which is just for fun, to other projects at work and in school.  If you want to help test Roomie, send me an email.

2 thoughts on “Roomie gets some CSS schooling

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>