Archive for the ‘Fun IT Projects’ Category

Arduino Project 5: Internet Control without Ethernet Shield

February 18, 2013 22 comments

I’m getting ready to start an Arduino home automation project, so I started looking at ways to interface with an Arduino across the internet. That way I’ll be able to control all of the lights, locks, etc. anywhere I have internet access.

Now, the obvious answer was to buy an Ethernet shield, but I already run a home web server so that seemed unnecessary. I saw a few solutions using Processing or Python scripts, but that seemed unnecessarily complicated. It took a fair amount of digging and brainstorming, but I’ve found an ultra-easy, ultra-flexible, and ultra-fast solution. Ultra.

There are a few major assumptions here.

  1. You have a computer running a web server that is accessible from the open internet, using a static IP address or a Dynamic DNS name. Your computer is either directly connected to your ISP and using a public IP address or your router is set up for port forwarding. If you don’t have this set up yet, just Google it – there are a lot of tutorials that explain how to set up a home web server.
  2. Your home web server has PHP. If not, this will still work, you’ll just have to re-write it in Java or whatever server-side language you’re using.
  3. The Arduino will be plugged into the web server via USB.

Here’s the basic concept: the Arduino can’t read files from the server via the USB serial connection, so the server will have to “push” the message. The server side code (PHP, Java, whatever you choose) cannot talk directly to the serial COM port, so we need a local script on the web server that can talk to the serial (USB) port. Last, the Arduino sketch has to be written so it can “catch” and process the message.

In this example, we’ll just create a barebones web page for controls that will turn an LED on and off via the Arduino. Let’s start with the sketch. The sketch is just listening on the serial connection for a 1 or 0. If it receives a 1 it will turn the LED on, if it receives a 0 it will turn the LED off.

Alex Glover
February 2013

void setup() {
//set the LED pin to OUTPUT
pinMode(13, OUTPUT);

void loop() {
//wait until the serial connection is open
while (Serial.available() ==0);

//read from the serial connection; the - '0' is to cast the values as the int and not the ASCII code
int val = - '0';

//print to the console for testing

//if we've recieved a '1', turn on the LED and print a message
Serial.println("Received a 1");
digitalWrite(13, HIGH);
//if we've recieved a '0', turn off the LED and print a message
Serial.println("Received a 0");
digitalWrite(13, LOW);

Pretty straightforward, right? OK, now we need two scripts, one to send a ‘1’ and one to send a ‘0’. In Windows, simply create a text file (call it whatever you want), and give it a .bat extension. In my setup, my files are called serial_out_0.bat and serial_out_1.bat. Each script has only one line of code.

ECHO 0 > COM3:


ECHO 1 > COM3:

Note that you might have to change the COM designation. You can check which COM your Arduino is connected to by looking in the Arduino IDE under Tools –> Serial Port. If you’re not using Windows, you should be able to do this pretty easily in a shell script. At this point you can test to see if the batch scripts will turn the LED off and on. Also ensure that the web server will be able to execute these scripts (don’t assign user-specific privileges or save them in protected directories). If you’re unsure, just put these scripts in the same web root directory where you’ll host your web page.

Easy right? Alright, the last piece is the web form. All you need are buttons within a form that will then execute the batch scripts we wrote earlier. Easiest solution is to use ‘submit’ buttons and then check for which post variables are set. The rest of the code is very straightforward so I’ll let it speak for itself.

if(isset($_POST[‘submitOn’])) {
else if(isset($_POST[‘submitOff’])) {
<form action=”control.php” method=”post”>
<input type=”submit” name=”submitOn” value=”Submit On”>
<input type=”submit” name=”submitOff” value=”Submit Off”>


You’ll have to change the paths to correspond with the location of your scripts, but otherwise that’s it. Add some CSS if you want to add some polish to your controls. This is a very simple example, but you should be able to adapt this code to any project.

WordPress: Twenty Eleven Child Theme with Galleria Slider

January 28, 2013 Leave a comment

OK – I’ve been spending the last few hours getting acquainted with the WordPress backend (that sounds more risque than I had intended) and making my first custom ‘child’ theme.

If you have an interest in making custom themes and you’re just getting started, I’ve got a few very generic tips:

  • Don’t underestimate how complex some of the themes and frameworks can be
  • Start by creating a child theme or modifying an existing theme
  • Check out this tutorial on PressCoders

The tutorial on PressCoders is very clear, so I won’t re-invent the wheel and write a tutorial on making child themes. Instead, I wanted to share the child theme that I made. Basically, I’ve taken the Twenty Eleven theme and replaced the static header image with a dynamic image slider (using Galleria). You can check out a live demo, otherwise here’s a quick screenshot:


Anyways, as simple as it is, I’ve learned a lot from the exercise. If you want to use the theme or take a look at the code, here’s the package.

Thanks for reading.

Arduino Project 3: Accelerometer Primer

January 21, 2013 2 comments

This project is more of a warm-up than a full-blown project. I wanted to get a feel for the basic workings of an accelerometer in preparation for a larger undertaking (no spoilers!). I borrowed this project idea from a forum about Arduino and accelerometers but can’t remember which forum, so I can’t credit back to the original poster – sorry about that.

Before we get to the how, let’s take a look at the what. Basically we have an accelerometer and 5 LEDs mounted on a breadboard. Four of the LEDs are mounted to correspond with the X and Y accelerometer axes and one LED is in the middle.   When the accelerometer is level, only the middle LED is illuminated. If you tilt the accelerometer to the side, the LED on that side is illuminated.

Read more…

Easy Modal Overlays

November 21, 2012 Leave a comment

Modal overlays are those fancy popups, often used to display a full-sized image or some sort of form. They give the appearance of a new window within the browser, giving sites a more lively animated and interactive look.

It’s a pretty sweet feature, and is actually pretty easy to implement. I’ll highlight a couple options and talk about how to implement them in this post.

Read more…

Konami Code

November 16, 2012 4 comments

The Konami code… if you were born in 1990 or earlier, and play (or played) video games, you probably already know what I’m talking about.

The history of the Konami code is awesome in it’s own rite. Here’s the short version: the Konami code is a famous cheat code (up, up, down, down, left, right, left, right, B, A) that first appeared in NES games like Contra. Many times the code was added to video games as a tribute to the classic games or as a tribute to Kazuhisa Hashimoto, the developer who accidentally left the cheat code in the game when it was sold to the public.

That homage has been proliferated by nerds and techies through many games and, eventually, made it’s way on websites.


“Google Hacking”

November 14, 2012 Leave a comment

When I was still working at the University of Wisconsin, a co-worker of mine showed me a way to find unprotected directories indexed by Apache and web cameras. Not those kind of web cam feeds – these are usually security cameras in innocuous places, like restaurants, streets, tops of buildings… etc., that are so benign (usually) that whoever set them up decided they didn’t need to be secured (or didn’t know how to secure them).

Anyway, the way he found these was the interesting part. At the time, it was termed “Google Hacking” although now it is sometimes called “Google dorking.” It is simply using Google to find unsecured web content with targeted search terms. Read more…

Free HTML Mobile App Generator!

September 15, 2012 2 comments

Ristorante Generico is back, with variable width!

Awhile back, I tried making a generic HTML web app using Sencha, for a hypothetical restaurant ‘Ristorante Generico.’ It wasn’t great! Used a lot of fixed width, and when I tested it on phones other than my HTC EVO 4g it looked awful. Well I’ve revisited the topic, dropped Sencha, and created a PHP form so people can build their own HTML mobile app for their group or small business. Tested on the HTC Evo, iPhone 4s, and 1st Generation iPad, and it looks good!

For those interested, the ‘app’ is all HTML and CSS. All CSS is inline and image paths are absolute (”; instead of “../img/image.ext”). Because there are no resource files or relative paths, users can steal the source and deploy it in their own site/hosting! Alternatively, users can simply generate an app with the PHP form and then link their site to the page they created, hosted on my domain.

The ‘app’ will display business/group name, a motto or sub-header, body text as defined by the user (which accepts HTML markup), and has 3 buttons for calling the group, pulling up directions on their phone, or pulling up the company/group’s main site.


Create your own or check out the Ristorante Generico demo site on your Android or iPhone!

As always, if you want to use or modify the code for any reason, it is provided at no cost and with no guarantees.

%d bloggers like this: