New User Interfaces

About 2 weeks ago I decided that something had to be done about the (number of) User Interfaces in our house. Especially for controlling the roller shutters from upstairs there was a need for a 2nd user interface. The touchscreen in the livingroom is being used a lot and we wanted the same convenience upstairs as well.

I’ve been tinkering with various touch screens on Arduino, FEZ Panda and the like, but I didn’t really like the size (~3″) and counting all the costs for a setup like that made me wonder if there could be a better choice. Why not buy a cheap 10″ Android tablet and make a web based interface? HTML5, websockets, ….

Setting Thermostat from smartphone

So I started looking around on the web for the right tools and I found jQuery Mobile.

The demos looked good, so I started creating some basic pages while keeping an eye open for a cheap tablet.

The first (test-)page I made was for changing the temperature setpoint of our central heating, just to see how hard it would be for me as a non-web-developer to create something that looked OK.

A slider, radiobuttons and an OK button were made very easy; it felt as if I’d done this before, but I haven’t – it’s very simple!

And if you look at the code (it’s great to create pages this way) I decided that jQuery Mobile will be it for the user interfaces I’m going to add.

And just look at the code; ain’t it sweet? πŸ˜‰

<div data-role="page" id="tstat">
	<div data-role="header">
	  <h2>Thermostaat</h2>
	</div><!-- /header -->
	<div data-role="content">
	  <br />
    <label for="slider-1">Hoe warm wil je het hebben jochie:</label>
    <input type="range" name="slider-1"
    id="tstatslider" value="20" min="15" max="25" step="0.5"
    data-highlight="true" />
    <br />
    <fieldset data-role="controlgroup" data-mini="false">
    	<input type="radio" name="radio" id="radio-1"
    	value="choice-1" checked="checked" />
    	<label for="radio-1">Tijdelijk (tot volgend
    	  programma)</label>
    	<input type="radio" name="radio" id="radio-2"
    	value="choice-2"  />
    	<label for="radio-2">Continu</label>
    </fieldset>
    <br />
    <input type="submit" value="OK" onClick='do it;'
    data-icon="check" />
	</div><!-- /content -->

	<div data-role="footer" data-position="fixed">
  <div data-role="navbar">
		<ul>
			<li><a href="#home">Home</a></li>
			<li><a href="#">Weer</a></li>
			<li><a href="#">Cams</a></li>
			<li><a href="#luiken">Rolluiken</a></li>
		</ul>
	</div><!-- /navbar -->
	</div><!-- /footer -->
</div><!-- /page -->

Yep, this is definitely what I want and what I need!
So I created some more pages (lights, the roller shutters):

And right now I’m testing this user interface, cause I want to know how well it performs compared to our VB.Net touchscreen application in the living room, before I spend more time on it. First results are very good – 10 times faster than X10 πŸ˜‰

There are some issues I have to work on; things like the buttons not giving an audible feedback, making it secure so that this can also be used on our smartphones, etcetera.

But for now I’m happy with how this working out so far. A tablet has been bought too yesterday, so it looks like we’ll have our user interface upstairs real soon!

Tagged , , . Bookmark the permalink.

Leave a Reply

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