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.

height: 100px;
width: 100px;
border-top: 30px solid #FF3636;
border-bottom: 30px solid #36FF36;
border-left: 30px solid #3636FF;
border-right: 30px solid #FFFF36;

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

height: 0;
width: 100px;
border-top: 30px solid #FF3636;
border-left: 30px solid transparent;
border-right: 30px solid transparent;

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.

.seven-segment {
  position: relative;
}
.seven-segment .a {
  position: absolute;
  left: 10px;
  height: 0;
  width: 100px;
  border-top: 30px solid #FF3636;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
}
.seven-segment .b {
  position: absolute;
  left: 150px;
  top: 10px;
  height: 100px;
  width: 0;
  border-right: 30px solid #FF3636;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}
.seven-segment .c {
  position: absolute;
  left: 150px;
  top: 180px;
  height: 100px;
  width: 0;
  border-right: 30px solid #FF3636;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}
.seven-segment .d {
  position: absolute;
  top: 320px;
  left: 10px;
  height: 0;
  width: 100px;
  border-bottom: 30px solid #FF3636;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
}
.seven-segment .e {
  position: absolute;
  left: 0;
  top: 180px;
  height: 100px;
  width: 0;
  border-left: 30px solid #FF3636;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}
.seven-segment .f {
  position: absolute;
  left: 0;
  top: 10px;
  height: 100px;
  width: 0;
  border-left: 30px solid #FF3636;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}

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.

.g .bottom {
height: 0;
width: 100px;
border-top: 30px solid #FF3636;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}
.g .top {
height: 0;
width: 100px;
border-bottom: 30px solid #FF3636;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}

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.

.seven-segment .g {
  position: absolute;
  top: 160px;
  left: 10px;
}
.seven-segment .g .bottom {
  height: 0;
  width: 130px;
  border-top: 15px solid #FF3636;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}
.seven-segment .g .top {
  height: 0;
  width: 130px;
  border-bottom: 15px solid #FF3636;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

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.

.seven-segment .g {
  position: absolute;
  top: 162px;
  left: 35px;
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -ms-transform: scale(1.4);
  -o-transform: scale(1.4);
  transform: scale(1.4);
}
.seven-segment .g .bottom {
  height: 0;
  width: 80px;
  border-top: 15px solid #FF3636;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}
.seven-segment .g .top {
  height: 0;
  width: 80px;
  border-bottom: 15px solid #FF3636;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

Conclusion

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.

[[email protected] ~]$ mkdir sources
[[email protected] ~]$

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

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.

[[email protected] ~]$ cd sources
[[email protected] sources]$ wget  http://downloads.mongodb.org/linux/mongodb-linux-i686-1.4.3.tgz
--2010-06-18 18:43:29--  http://downloads.mongodb.org/linux/mongodb-linux-i686-1.4.3.tgz
Resolving downloads.mongodb.org... 72.21.202.134
Connecting to downloads.mongodb.org|72.21.202.134|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 23709740 (23M) [application/x-tar]
Saving to: “mongodb-linux-i686-1.4.3.tgz”

100%[==============>] 23,709,740   202K/s   in 1m 55s

2010-06-18 18:45:29 (201 KB/s) - “mongodb-linux-i686-1.4.3.tgz” saved [23709740/23709740]

[[email protected] sources]$

Installing MongoDB

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

[[email protected] sources]$ tar -zxf mongodb-linux-i686-1.4.3.tgz
[[email protected] sources]$ cd mongodb-linux-i686-1.4.3/
[[email protected] mongodb-linux-i686-1.4.3]$ ls
bin  GNU-AGPL-3.0  include  lib  README  THIRD-PARTY-NOTICES
[[email protected] mongodb-linux-i686-1.4.3]$ mv bin ~/
[[email protected] mongodb-linux-i686-1.4.3]$ mv lib ~/
[[email protected] mongodb-linux-i686-1.4.3]$ mv include ~/

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.

[[email protected] ~]$ cd sources
[[email protected] sources]$ wget http://nodejs.org/dist/node-v0.1.98.tar.gz
--2010-06-18 18:57:14--  http://nodejs.org/dist/node-v0.1.98.tar.gz
Resolving nodejs.org... 97.107.132.72
Connecting to nodejs.org|97.107.132.72|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 3770749 (3.6M) [application/octet-stream]
Saving to: “node-v0.1.98.tar.gz”

100%[===========>] 3,770,749    151K/s   in 25s

2010-06-18 18:57:39 (147 KB/s) - “node-v0.1.98.tar.gz” saved [3770749/3770749]

[[email protected] sources]$

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.

[[email protected] sources]$ tar -zxf node-v0.1.98.tar.gz
[[email protected] sources]$ cd node-v0.1.98/
[[email protected] node-v0.1.98]$ ./configure --prefix=$HOME
Checking for program g++ or c++          : /usr/bin/g++                                                            
...snip...
Checking for fdatasync(2) with c++       : yes
'configure' finished successfully (5.495s)
[[email protected] node-v0.1.98]$ make
Waf: Entering directory `/home/littlef/sources/node-v0.1.98/build'                                                         
DEST_OS: linux                                                                                                     
...snip...
Waf: Leaving directory `/home/littlef/sources/node-v0.1.98/build'
'build' finished successfully (5m33.731s)
[[email protected] node-v0.1.98]$ make install

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.

[[email protected] ~]$ mongod --dbpath ~/var/mongo/master/ --port 39381
Fri Jun 18 19:11:24 Mongo DB : starting : pid = 3293 port = 39361 dbpath = ~/var/mongo/master master = 0 slave = 0  32-bit

** NOTE: when using MongoDB 32 bit, you are limited to about 2 gigabytes of data
**       see http://blog.mongodb.org/post/137788967/32-bit-limitations for more

Fri Jun 18 11:11:24 db version v1.2.2, pdfile version 4.5
Fri Jun 18 11:11:24 git version: nogitversion
Fri Jun 18 11:11:24 sys info: Linux biber 2.6.26-2-amd64 #1 SMP Thu Feb 11 00:59:32 UTC 2010 i686 BOOST_LIB_VERSION=1_40
Fri Jun 18 11:11:24 waiting for connections on port 39361
^CFri Jun 18 11:11:27 got kill or ctrl c signal 2 (Interrupt), will terminate after current cmd ends
Fri Jun 18 11:11:27 now exiting
Fri Jun 18 11:11:27  dbexit:
Fri Jun 18 11:11:27      shutdown: going to flush oplog...
Fri Jun 18 11:11:27      shutdown: going to close sockets...
Fri Jun 18 11:11:27      shutdown: waiting for fs...
Fri Jun 18 11:11:27      shutdown: closing all files...
Fri Jun 18 11:11:27      closeAllFiles() finished
Fri Jun 18 11:11:27      shutdown: removing fs lock...
Fri Jun 18 11:11:27  dbexit: really exiting now
[[email protected] ~]

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.

[[email protected] ~]$ nohup mongod --dbpath ~/var/mongo/master/ --port 39381 &
[1] 3299
nohup: ignoring input and appending output to `nohup.out
[[email protected] ~]$

Now we can query it by setting the port on mongo

[[email protected] ~]$ mongo --port 39381 noderegator
MongoDB shell version: 1.2.2
url: noderegator
connecting to: 127.0.0.1:39381/noderegator
type "exit" to exit
type "help" for help
> show collections
> exit
bye
[[email protected] ~]$ 

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.

var http = require( 'http' ),
     sys = require( 'sys' );

http.createServer(
  function( request, response ) {
    sys.puts( 'Request!' );
    response.writeHead( 200, { 'Content-Type': 'text/plain' } );
    response.end( 'Hello World\n');
  }
).listen( 35408 );
sys.puts( 'Server running on port 35408' );

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

[[email protected] ~]$ cd webapps/noderegator_nodejs/
[[email protected] noderegator_nodejs]$ node app.js
Server running on port 35408
Request!
Request!
^C
[[email protected] noderegator_nodejs]$ 

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

/msg ChanServ register # 

Tells ChanServ about your channel and makes you the founder.

Make ChanServ Stick Around

/msg ChanServ set # guard on

Makes ChanServ hang out in your channel.

Protect Your Topic

/msg ChanServ set # topiclock on

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

Set A Topic

/msg ChanServ set # topic 

Set the channel topic via ChanServ.

Make Your Topic Sticky

/msg ChanServ set # keeptopic on

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

Set The Channel URL

/msg ChanServ set # url 

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

Set The Channel Description

/msg chanserv set # desc 

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

Sources:

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.

# wget http://prism.mozilla.com/downloads/1.0b1/prism-1.0b1.en-US.linux-i686.tar.bz2
--2010-01-26 16:01:08--  http://prism.mozilla.com/downloads/1.0b1/prism-1.0b1.en-US.linux-i686.tar.bz2
Resolving prism.mozilla.com... 63.245.208.216
Connecting to prism.mozilla.com|63.245.208.216|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 9101612 (8.7M) [application/x-bzip2]
Saving to: “prism-1.0b1.en-US.linux-i686.tar.bz2”

100%[==========================================================================================================================================================================================================>] 9,101,612    212K/s   in 42s

2010-01-26 16:01:55 (213 KB/s) - “prism-1.0b1.en-US.linux-i686.tar.bz2” saved [9101612/9101612]

# mv prism /opt/prism-1.0b1
# ln -s /opt/prism-1.0b1/prism /usr/bin

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