Wednesday, May 7, 2014

JavaScript Odometer Image Generator for Blogger

I looked around a LOT for a simple web app that would allow me to generate an odometer based on simple numeric inputs. Since I didn't find any, I decided to be like the Little Red Hen and make one myself.

It's not very fancy and doesn't have a nice UI or anything, but it gets the job done. If you have a Blogger blog, you can paste this into an HTML / JavaScript gadget and just change the variables in the "mileage" array to change the numbers that display. 

Here is the javascript I used to accomplish this:
<div id="odometer"></div>
<script>

//enter additional mileage in this array:
  var mileage = [ 136, // 04/05/2014
77.5, // 04/12/2014
259, // 05/03/2014
0 ];
var miles = 0;

while (mileage.length > 0)
{
miles += mileage.pop();
}

var totalmiles = miles;

    //handle weird floating point issue   
    totalmiles = Math.round( ( totalmiles + 0.00001 ) *       10 ) / 10; 
miles *= 10;

var digits = [];
var divby = 1000000;
var dig = 0;

while (divby >= 1)
{
dig = Math.floor(miles/divby);
digits.push(dig);
miles %= divby;
divby /= 10;
}

var bdigits = [ "http://1.bp.blogspot.com/-BbZ6tJoxmO8/U2keBsNlgWI/AAAAAAAACcQ/rM93820AJg0/s1600/0b.png",
"http://2.bp.blogspot.com/-yeGnGmn1lUE/U2keB-7jMlI/AAAAAAAACaM/sbCWFwITQnw/s1600/1b.png",
"http://4.bp.blogspot.com/-sNVEFxGMLtM/U2keDi1rF3I/AAAAAAAACcY/_IxtZPUiF60/s1600/2b.png",
"http://3.bp.blogspot.com/-mD0Y3j_P_Ro/U2keDaF4OhI/AAAAAAAACcE/1O0phSJeTOs/s1600/3b.png",
"http://1.bp.blogspot.com/-BzZlKASeZyw/U2keDqTn9DI/AAAAAAAACcA/z8Mh1F_z_VU/s1600/4b.png",
"http://3.bp.blogspot.com/--VhOgUD3MIE/U2keENY9UEI/AAAAAAAACb4/9pljHhtsrzk/s1600/5b.png",
"http://1.bp.blogspot.com/-doZZ7DzjUsE/U2keEgpMqmI/AAAAAAAACbw/YluQnzNaCaI/s1600/6b.png",
"http://3.bp.blogspot.com/-6M24gLuBmXA/U2keFFXL6AI/AAAAAAAACbo/PfAEtry5CT8/s1600/7b.png",
"http://1.bp.blogspot.com/-cemehrykA2g/U2keFvwYuBI/AAAAAAAACbc/Rbp4NYdM5Jg/s1600/8b.png",
"http://2.bp.blogspot.com/-yunICV3tHGY/U2keGNuBK0I/AAAAAAAACbY/RuhZvuoAfwg/s1600/9b.png"];

var wdigits = [ "http://3.bp.blogspot.com/-TGqvHLIxjgM/U2keB5njaxI/AAAAAAAACaI/hjwP4RYk1OU/s1600/0w.png",
"http://2.bp.blogspot.com/-2k3U3ECpGbQ/U2keCFeLOLI/AAAAAAAACaQ/cQQweD-t6vA/s1600/1w.png",
"http://2.bp.blogspot.com/-C_RMflvrxAw/U2keCvJG13I/AAAAAAAACcU/qJ3J5slSQjA/s1600/2w.png",
"http://1.bp.blogspot.com/-j0K8u9WQQY8/U2keDVmZ-3I/AAAAAAAACcI/ToAONT4PkPQ/s1600/3.png",
"http://2.bp.blogspot.com/-gxxNHkgHU5M/U2keDw8GT-I/AAAAAAAACb8/POd9vmKmYUk/s1600/4w.png",
"http://1.bp.blogspot.com/-zjehM7LY8G8/U2keEbkMhvI/AAAAAAAACb0/J0nXXASqBGw/s1600/5w.png",
"http://1.bp.blogspot.com/-QyKvNy7rO74/U2keE4LT-qI/AAAAAAAACbs/7Jg1aXZ0qdc/s1600/6w.png",
"http://3.bp.blogspot.com/-fYeONQwkRGw/U2keFfvLY4I/AAAAAAAACbk/xQjjYypNe-s/s1600/7w.png",
"http://2.bp.blogspot.com/-CjYsTOYiZxA/U2keF3XvvlI/AAAAAAAACbU/SKFYzHherJA/s1600/8w.png",
"http://3.bp.blogspot.com/-v8RHIwXf5A4/U2keGQfzkqI/AAAAAAAACbg/r1nHGrczN5M/s1600/9w.png"];

var borderimg = "http://4.bp.blogspot.com/-J7Za7xEGVMw/U2qUKqpitMI/AAAAAAAACc0/wCu6TJEUu84/s1600/border.png";

var outputHtml = "<img height = '32' title = '" + totalmiles + " miles' src = '" + borderimg + "'/ >";

for (var x=0; x<digits.length-1; x++)
{
outputHtml += "<img width = '20' title = '" + totalmiles + " miles' src = '" + bdigits[digits[x]] + "'/ >";
}

outputHtml += "<img width = '20' title = '" + totalmiles + " miles' src = '" + wdigits[ digits[digits.length-1] ] + "'/ >";

outputHtml += "<img height = '32' title = '" + totalmiles + " miles' src = '" + borderimg + "'/ >";

document.getElementById("odometer").innerHTML = outputHtml;

</script>

No comments:

Post a Comment