Stephanie Briones

Speed-O-Meter: An assignment in CSS transitions and jQuery

Before the holidays, I was given the mission to create a working speedometer using HTML, CSS, and jQuery.

The inspiration for my Speed-O-Meter assignment was drawn from this collection of Chevrolet speedometers from between 1941 and 2011. It's amazing how something as simple as a speedometer on a dashboard, when shown in a different light, can be so interesting.

Collection
    of Chevrolet Speedometers from 1941-2011
Collection of Chevrolet Speedometers from 1941-2011.

The simple black and white without all the frills allows one to focus on the typography and creativity of the placement. With the older ones, it looks as if a lot of thought and care went into the selection of the typefaces and the layout. The needles were much more interesting. Here are some good examples: 1 2 3

First order: figure out how to manipulate a div with the jQuery UI slider. Getting a slider on the page was simple enough, but the part that I didn't know how to do was connect it to the div so that when it was toggled, the div rotated using CSS transitions.

Thanks to Billy, that was working pretty quickly. I was able to start resizing the div (needle) and adding some numbers to the page for it to point to.

My next step was to find the right typeface. I really like the speedometers from the 40's and 50's the most. Most of them seem to use a squarish, bold, geometric typeface.

screenshot of Kimberley typeface on MyFonts
Kimberley Regular example from MyFonts.com.

Kimberley Regular seems a good choice for that. It has a vintage feel and the characteristics that I was looking for. I used Illustrator to rotate the numbers clock-wise. (I positioned them all with CSS first, but the transforms skewed the numbers in a way that was inconsistent, so an image it is.)

For a bit of a fun touch, I wanted to pair Kimberley with a scripty mid-century looking font. Air Conditioner seems to fit that criteria pretty well.

screenshot of Air Conditioner typeface on MyFonts
Air Conditioner Regular example from MyFonts.com.

Next, we wanted to have the dots, (below each number) turn red as the needle passed by. Doing that in jQuery is quite beyond my abilities, so with a crescent-shaped image with holes cut out where the dots should be, I was halfway there.

The other part making it work is an HTML element attached to the needle div. That crescent-shaped image that is the same color as the background of the page, has a really high z-index, putting it above the needle and the attached HTML element that forms the little red circle.

screenshot of speedometer
When the needle makes it's way around, the only time you see the red dot is when the needle points directly at a number on the speedometer.

Another idea that we wanted to implement was the possibility of having the spacebar control Speed-O-Meter's acceleration as well as the arrows and mouse clicks.

I was pretty sure I needed to use keypress, or keyup and keydown, but could not figure out how to get more than an alert to pop up when the spacebar was pressed. I knew what I needed, but just didn't know how to move forward.

I went to Myles, a fellow resident apprentice at 8th Light, and he was able to help me get the spacebar to control the acceleration. Playing with it more, I really wanted it to decelerate on keyup. Billy worked with me again and we were able to get it to decelerate as well, however, not very gracefully. It would just jump back down to -90° instantly, not slowly, like the needle.

Myles came up with a new variable called isAccelerating which is set to false, applied that to the keydown and keyup events. keydown was set to isAccelerating = true; and keydown, false.

screenshot of jQuery isAccelerating function

Therefore the speedometer is always decelerating unless the spacebar is pressed down. When the spacebar is pressed, the deceleration is interrupted. Then he added setInterval (decelerate, 100); to ease the deceleration and let the slider handle fall gracefully back to it's -90° position. We applied everything to the right arrow as well so they would both act the same way.

I'm really glad that I'm surrounded by smart people that can help me with this kind of thing. I definitely feel like I have learned a lot by doing this exercise and that wouldn't have been possible without the guidance of some really smart guys. I look forward to learning a lot more.

Some things that were helpful to me:

  1. jQuery Air, First Flight - Code School
  2. jQuery Rotate/Transform - Stack Overflow
  3. The "transform-origin" Property - W3C