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.

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.

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.

Projects
ASP.NET, Computer Science, CSS, Home Automation, HTML, iPad, Programming, Projects, Roomie!, Web Development
24 June 2010 comments [2] TrackBack-URI

1. R family posted on June 27, 2010:

   Mr R says: It needs a little more… cow bell.

2. More on Roomie’s website rewrite | My Piece of the Inter(.)net posted on December 11, 2011:

   [...] More on Roomie’s website rewrite December 11th, 2011 As stated in my previous post about Roomie, I’ve been using a lot of brain juice to rewrite Roomie’s website.  I wrote the original website in ASP.NET with Web Forms, which was pretty standard for the time.  Although technology like ASP.NET MVC and the Entity Framework existed in some form, they weren’t even on my radar.  So after some coding and hacking and pushing through unfamiliar problems, I eventually got a workable website.  (This website, though not the final version, is pictured in this post.) [...]

RSS feed for comments on this post.

Leave a comment