Valentine’s IoT mirror

I have for the longest time wanted to get into electronics. While I have been tinkering with connecting lights and motors to batteries since a very low age, taken several electronics courses both in highschool and at university, I’ve never done anything practical. Recently however I started using my now-of-age reserves of money towards DIY-electronic stuff in order to try and finally do something. In the last couple of weeks I’ve learned how easy it really is once you actually have the components you need, and how the DIY culture, especially around Arduino, have made these things incredibly accessible. It’s safe to say that we’ve come a long way since the days of holding a small toy lightbulb against a 4.5V battery (which I did as a kid).

Since when I get into something I tend to immerse myself quite deeply. Therefore, for this valentines day I quite readily jumped to the idea of building something with my newfound skills and toys. I therefore decided to connect a few LEDs in the shape of a heart that could flash in interesting ways to give to my girlfriend. As you can see in the video, it eventually turned into a mirror with hidden heart-shaped LEDs that can be controlled through a web interface on the local network.

I had at this point built up a sensor network at home using nRF24L01+ for wireless communication (which is an incredibly cheap but easy to use RF-module), and both Arduino Pro Minis as well as ATtiny85s as brains. Therefore I already had one of the radio modules connected to an Arduino communicating serially with a small server in the house. All I had to do was to figure out how I could control and drive a bunch of LEDs (ended up using 14) from the Arduino, and then try and package it nicely to be a suitable gift.

The mirror is built using an Arduino Pro Mini 5V, a nRF24L01+, driven using a 12V power adapter. Pretty sure 12V is overkill, but it’s what I had lying around. The nRF24L01+ must be run on 3.3V so it’s also using a voltage regulator that I put on the control board for the LEDs. The LED control is two 547 transistors and the LEDs are current limited using 470ohm. I figured that I couldn’t run the current for all 14 LEDs through one transistor (they would consume about 150mA, and I didn’t have any other transistors lying around) and therefore split them over two. Also ended up connecting the base of the transistors to two different pins on the Arduino, and could theoretically control the upper and lower part of the heart individually. Just ended up not doing that.

The mirror is continuously listening to radio traffic. When a control message arrives, it changes the mode of the LEDs. The software on the mirror is therefore incredibly simple. The server however had to be slightly modified. To this point the server was only listening to sensor nodes, and not transmitting any information back. I therefore had to change both the Arduino program to listen to serial communication and forward the data to the radio, and the software running on the server. The current server software was in Python, but decided to change to NodeJS. Since I also wanted to be able to control from a web interface, I took the time to also build a simple rest-api for sending the command to the mirror using HTTP. Thus the server software now listens to the serial for sensor readings from my sensors in the house and stores that in a database, as well as receives HTTP requests for sending out data packets to listening nodes.

Finally I created a super simple web page with four buttons for selecting one of the four settings on the mirror: heart-beat, off, on, and smooth pulse.

It was a fun project, girlfriend was happy, and I can now move on to the next projects. The project gave me experience in designing and soldering a PCB (using vero board), cutting such board using a drill, how simple it can be to put things together in not too shabby ways.

Posted in Coding, Hardware

ProtoDB as an ORM – ProtoORM?

I believe coding should be seen as a craft, and as such there has to be as little between your creativity and executing on the creativity as possible. One such obstacle when it comes to most development of web applications, is the need to create a database structure. For years now I have been using different iterations of my own set of help functions in PHP. It started with some getters for fetching an array of rows from a MySQL query in one go, and later it evolved into what I called ProtoDB, which is available on GitHub. The core point of ProtoDB is that it creates the database structure as you code it. Setting some value for a column in a table will create that column if it does not exist, and will create the table if the table does not exists. This allows you to stay in the code editor and still work with a database. (Optimizing can always be done later.)

However, sometimes it can be nice to use a simple ORM, in order to group model functions together in an object oriented way. Most ORMs however (that I have seen), still require the database structure to be in place. The tables need to exist, and have the columns needed for the ORM to map to this structure. I have therefore started to expand on ProtoDB to create a basic ORM on top of it, which gives you the flexibility of ProtoDB and the benefits of an object oriented architecture of an ORM.

For now there is only one class Model that is the base of everything else.

namespace ProtoORM;
use \DB;

class Model {
 public static function create($row); // row is an associated array of values for columns given by the keys
 public static function find($id); // gets the model object with the given id
 public static function all(); // gives you an array of all objects in the table
 public function save(); // updates the table or inserts a new row
}

From this it is easy to create a new model, for instance a User:

class User extends ProtoORM\Model {
 protected $table = "users"; // sets the table name
}

// create a new user
$user = User::create("name"=>Mattias);
$user->save();

// later we can set some more info
$user->age = 31;
$user->role = 'dev';
$user->save();

$user = User::find($user_id);

The points of this is that the table ‘users’ does not need to exist before running this code. Everything will be added to the database structure as need. This is obviously only the beginning, and I aim to expand on it as I keep using it in some of my current projects.

I am also thinking about also implementing some kind of automation of migration files, in order for groups of people to work together in early stages of design.

 

Posted in Coding

Developer Options on Android 4.2

If you just updated an Android device to 4.2, and try to develop for it, you may have noticed that there are no Developer Options anymore. They used to be in the settings, just above “About phone”, but since 4.2 they are gone. This can make it difficult (impossible) to enable USB debugging. However there is a fix for it that once you know it is simple enough.

All you have to do to enable it is to go to Settings->About phone. Then go down to Build number, and tap it 7 times. After the first three times there will be a count down towards the hidden option. Just go back to the settings menu, and the Developer options will have appeared.

I found this from this forum thread.

Posted in Coding | Leave a reply

ProtoDB on GitHub

I wrote a simple database library for rapid prototyping some time back, and decided to put it on github for anyone to use. It mainly takes away the need to setup a database structure before being able to save data on a server when writing simple web apps or other client apps.

It is both a PHP library, a server backend, and a javascript library in one. Use it for prototyping only, as it is not made to be neither secure nor efficient. However, once you got your app up and running, it should be easy to exchange those parts, or just make the library more secure.

Feel free to use and feel free to comment or send pull requests. The repo is here.

Posted in Coding | Leave a reply

Fitvids

Embedding video in a responsive web design can be a hassle. With FitVids.js (via Think Vitamin) it is now a piece of cake. Check video below.

Posted in Coding | Tagged , , , | Leave a reply

Responsive IMGs

My friend Viktor at We Made You Look pointed me to this article at Cloud Four on Responsive IMGs. The article makes a case for what is the problem with IMG tags when doing responsive web design. What you want in a truly responsive web design when it comes to images, is to only load images of the size needed for the viewing display. Using IMG tags one can set the src attribute to the smallest possible image, and then through scripting change the src attribute to what ever is appropriate once the display size is known. For small screens this works well, however for bigger devices this slows the loading down as it has to do two requests (and loads) for each image (unless the script manages to change the src before the browser starts fetching the image). There are of course other techniques for responsive images, by for instance using CSS and media queries, but the article deals with the problems with the IMG tag specifically not other techniques. I prefer using media queries which to me makes most sense from a technology standpoint, but I agree it is far from ideal. However it is what is available now, and should therefore be used!

He goes on to start a discussion about what would be appropriate to future proof the IMG tag – i.e. what is needed in order to make sure responsive web designs also work for devices, screen sizes, and resolutions, that we do not know of yet. He makes his own list of what he believe is needed and encourage readers to add to it.

Cloud Four is an excellent blog on web and mobile development and design, and is definitely worth a visit!

Posted in Coding, Design | Tagged , , | Leave a reply

LESS (CSS)

Found this handy javascript library that I think can be extremely potent: LESS. It basically gives scripting capabilities to CSS. For instance you can define a variable @color, and use that instead of using fixed values everywhere in your CSS file. This would ease when it comes to changing color schemes, for instance. But I think what will be most handy is the way it allows nested rules:

#header {
	h1 {
		font-size: 26px;
		font-weight: bold;
	}
	p {
		font-size: 12px;
		a {
			text-decoration: none;
			&:hover { border-width: 1px }
		}
	}
}

which basically defines the css-rule for e.g. “#header p” and “#header p a:hover”. This will make cleaner css-files, and will let you write less CSS making CSS more DRY. It comes with a lot more powerful stuff as well like inline javascript. Have a look for yourself and see how you can make use of it.

Fairly technical post, but I wanted to put it down in text as I found it and reacted to it.

Posted in Coding | Tagged ,