Tag: Tutorial

CSS Seven-Segment Display Tutorial

April 11, 2012 » Geek

I had an idea for a little project today that needed a seven-segment display. As a first pass I’m going to implement it in all software before seeking out hardware for it.

Knowing I wanted to run my prototype in the browser I looked for a way to show a seven-segment display. I considered images, but then I decided to challenge myself to implement it in CSS only.

I recently read the CSS Hexagon Tutorial by James Tauber and I felt I could apply some of those techniques to get this working.

Step One: A Segment

The obvious first step is to get a single segment displayed.

The basic shape of a segment is actually well defined in all four edges of the box from the hexagon tutorial.

So now I just needed to extract a single edge for my first segment, which proved quite simple.

Step Two: Fill It Out

Iterating from that first segment is easy, just change which borders you need for which segment you require. However, I needed a positioning system. I decided to go with absolute positioning, with a relative wrapper. Traditionally these displays are addressed with each segment being a letter, so I followed that pattern.

The CSS for this is quite similar from segment to segment, it’s mostly positioning and picking which border to colorize.

Step Three: G Segment

Here’s where it gets interesting. Our standard segment shape will not work for the center segment, the G segment, which is beveled on both sides, something we can’t do with a single div. First let’s split it up and treat it differently for top and bottom.

Now we’ll style these using our regular segment markup.

It works, sort of. We now have the shape we want, but it’s way too thick. It won’t fit in the slot we have without looking strange.

Halving the borders and extending the width makes it look better.

This would be a good stopping point, but the angled edges don’t seem as long in G, so I tried to fix that.

The best solution I came up with was dealing with it at a smaller size, then using a transform to scale it up to where I wanted it. It’s not exact, and it’s not the same width as the other segments, but the slopes are right, it fits and it feels as close to balanced as I’ve been able to get.


That was pretty painless! I wish I had a better solution for G, but this one is passable.

You can check out a nifty demo with some JavaScript and on/off states here.

Got some ideas for how to make G better? Please share in the comments!

Tags: ,

Verizon Backup Assistant Must Die

March 2, 2011 » Geek, Life

So, I got a Droid 2 a while back and duuring setup I turned on the Verizon Backup Assistant. Garbage. Pretty sure it was responsible for several crashes.

I was looking for a way to disable it without a rom or hard reset, since its baked in. Hard to find. Eventually I found this nugget buried deep in a forum topic.

1) Be sure to have all your contacts backed up to your Gmail account. Check online before proceeding to step 2.

2) Log into your My Verizon account. Go to the contacts tab, sort by list view and select all contacts. Delete the entire list. There’s a deleted contacts tab as well. Select that and delete anything that’s in there.

3) Go into your Incredible settings tab, select applications, manage applications. Do not sort or filter, allow list to populate. Select Sync Service, (icon resembles backup assistant icon) select clear data.

4) Also in manage applications scroll down to backup assistant, select clear data. This should do it.

5) To verify backup assistant is now disabled, select settings, accounts and sync, then under manage accounts, select backup assistant. You should be looking at a license agreement screen.

I skipped step #2, but it worked all the same. Good fix, minimal investment, no crashes since.

MongoDB + node.js On WebFaction

June 18, 2010 » Geek

Following a suggestion from Kloanor on a Hacker News article I got a WebFaction account to play around with node.js on.

tl;dr It’s not too hard to set up.

Getting Ready

All of this software will be installed in my home directory, so there are a few things we need to do. First, I created a sources directory so that I would have my hands on exact copies of the installed software in the future, as well as a clean place to unpack and build them.

Second, we need to create two custom applications for MongoDB and node.js using the WebFaction control panel.

This is pretty easy, just go to “Domains/Websites > Applications > Add New“. Now give it a name (I used mongodb_master) and select “Custom app (listening on port)” as the App Type.

Creating The Custom Application

Hit create and write down the port number it provides. Do this again for node.js. You can also take a moment to map these applications to a website and domain.

The Custom Applications


MongoDB is actually supported to some extent, with install instructions provided in the WebFaction Doc’s. I did this slightly different, so I’ll detail my version here.

Acquiring MongoDB

You can get MongoDB at http://www.mongodb.org/display/DOCS/Downloads. You’ll need the 32-Bit Linux version. At the time of this writing the most current stable release was 1.4.3.

Installing MongoDB

MongoDB comes pre-compiled, so installing it is as easy as unpacking and moving some directories.

Configuring MongoDB

In this case, MongoDB is configured at run time. But it will need a data directory. I chose to put this at ~/var/mongo/master/. You don’t have to do anything special, just make sure the directory exists, and is empty.

That’s it! MongoDB is installed. We’ll come back and fire it up after we get node.js installed.

Installing node.js

node.js is almost as easy as MongoDB. And while not documented anywhere, it does run just fine. The major point of contact here is a forum topic that details how to get it running. Again, I’m going to deviate a bit, but I’ll end up in roughly the same place.

Acquiring node.js

You can get node.js at http://nodejs.org/#download. It’s distributed as source, so there is nothing to pick and choose from. At the time of this writing the most current version was 0.1.98.

Easier done than said.

Installing node.js

You have to compile node.js, but this went perfectly clean for me. Just make sure you set the prefix when you configure, or you’ll have to do it all again.

Configuring node.js

Nothing to configure! It should be ready, like, right now.

Running Your New Software

Okay, everything is installed. Let’s get stuff running.

Running MongoDB

Running MongoDB should only take two options. --dbpath and --port.

Go ahead and fire it up, then shut it down with ctrl-c.

That’s great, but we can’t just stay logged in to SSH all the time. Let’s nohup it, background it and forget about it.

Now we can query it by setting the port on mongo

Running node.js

Before we can actually run node.js, we need to write a little application. In my case this will go in ~/webapps/noderegator_nodejs/app.js. Place yours wherever you set up your custom application for node.

Be sure to change the port number to the one issued to your application by WebFaction.

Now let’s fire that up and see it in the browser. ctrl-c to quit.

If you got an nginx 503 error when you tried to visit the site, check that your port numbers are set up correctly.

All Done

That’s it, that’s all you need to know. Enjoy MongoDB and node.js on WebFaction. I hope it all goes well for you.

Quick and Dirty Guide to ChanServ

May 12, 2010 » Geek

I never, ever remember the commands for ChanServ on Freenode. I’m always looking them up, so this time I made a quick cheat-sheet to help me out. You can basically follow this from top to bottom.

Register Your Channel

Tells ChanServ about your channel and makes you the founder.

Make ChanServ Stick Around

Makes ChanServ hang out in your channel.

Protect Your Topic

Makes it so you can only change the topic through ChanServ.

Set A Topic

Set the channel topic via ChanServ.

Make Your Topic Sticky

ChanServ keeps your topic even when there is no one in the channel.

Set The Channel URL

Sets the URL for the channel if someone does an INFO query.

Set The Channel Description

Sets the description for the channel if someone does an INFO or LIST query.


Clean Prism Install on Sidux

January 26, 2010 » Geek

Mozilla PrismPrism is a sandboxed web-app tool, essentially it is Firefox for one application at a time. It’s been a while since I played with it, so I’m taking another look.

This should work on any Debian based system really, but I did it on Sidux. Here’s how I installed the latest version on my machine.

At that point it should be in your path and ready to invoke!