Analog Counter Wheel

image

image

The what I called the Analog Counter Wheel, was a proof of concept of a component for the web. My inspiration was the old counter wheels used in car dashboards, coin counters, etc

http://www.sandsmuseum.com/coinop/mechanisms/coincounter/

Also I wanted to build it from scratch but, I wanted it to be reusable and object oriented, so I could instantiate as many components as need and have then work independently.

The main purpose was to be a read only output component, but it also made sense to me to have an option to use it as input as well manipulating it rotating the mouse wheel. Which make it only suitable for input with a mouse because I haven’t implemented mouse drag or touch events, but I may do it in the future.

image

Screenshot: 4 components in a row

To use it is a simple as this

HTML:

<div id="myCounter1" class="counter"></div>

Javascript:

var myComponent = new Counter(myCounter1);

Custom Values

image

Screenshot: custom Values

<div id="myCounter1" class="counter">A|B|C|D|E|F</div>

or

var myComponent = new Counter(myCounter1);
myComponent.values = ["A","B","C","D","E","F"];

Custom size

image

Screenshot: custom size

/* custom sized Counter */
#acw_example5.counter {
    width: 150px;
}
#acw_example5.counter .wheel {
    width: 150px;
    height: 40px;
    font-size: 20px;
}

Buttons

image

Screenshot: with buttons

var c1 = new Counter(acw_example6_1);
buttonPlus1.onclick = function(){ c1.next(); };
buttonMinus1.onclick = function(){ c1.previous(); };

DEMO

View demo on Jsfiddle. (Tumblr might not render the HTML)

Single

0


Single (inverted)

0


Custom (1,2,3)

1|2|3


Custom (A,B,C,d,e,f)

A|B|C|d|e|f


Custom (words)

Apples|Oranges|Bannanas|Pineaples|Lemons


4 in a row

- 0

  • - 0
    • 0 - + 0 - /* custom sized Counter */ .acw-demo #acw_example5.counter { width: 150px; /*height: 30px;*/ z-index: 1; border: 2px inset #666; } .acw-demo #acw_example5.counter .wheel { /*margin-top: 5px;*/ width: 150px; height: 40px; font-size: 20px; } /* row */ .acw-demo .row span { display: inline-block; } .acw-demo .row span button { display: block; width: 100%; font-weight: bold; } /* misc */ .acw-demo { font-family: Helvetica, Arial, sans-serif; text-align: center; background-color: #F8F8F8; } .acw-demo hr{ margin: 2em 0; } //<![CDATA[ function ready(fn) { if (document.readyState != 'loading'){ fn(); } else if (document.addEventListener) { document.addEventListener('DOMContentLoaded', fn); } else { document.attachEvent('onreadystatechange', function() { if (document.readyState != 'loading') fn(); }); } } ready(function() { //instantiate counter 1 var ex1 = new Counter(acw_example1); //instantiate counter 2 var ex2 = new Counter(acw_example2); ex2.options.inverted = true; //invert counter 2 //instantiate counter 3 var ex3 = new Counter(acw_example3); //instantiate counter 4 var ex4 = new Counter(acw_example4); //instantiate counter 5 var ex5 = new Counter(acw_example5); setInterval(function(){ ex1.next(); ex2.next(); ex3.next(); ex4.next(); ex5.next(); }, 2500); //instantiate counter 6-1 var c1 = new Counter(acw_example6_1); plus1.onclick = function (e) { //add action to + button c1.next(); //increase counter 6-1 position by 1 console.log(e); //log click event }; minus1.onclick = function(){ //add action to - button c1.previous(); //decrease counter 6-1 position by 1 }; //component event c1.onChange = function(){ //event called when position of counter 6-1 changes console.log("pos changed to " + this.pos); } var c2 = new Counter(acw_example6_2); plus2.onclick = function(){ c2.next(); }; minus2.onclick = function(){ c2.previous();}; var c3 = new Counter(acw_example6_3); plus3.onclick = function(){ c3.next(); }; minus3.onclick = function(){ c3.previous(); }; var c4 = new Counter(acw_example6_4); plus4.onclick = function(){ c4.next(); }; minus4.onclick = function(){ c4.previous();}; }); //]]>

Documentation

DEMO

To create a analog-counter-wheel component you just need a div

var myComponent = new Counter(myDiv);

This will instantiate a new component and initialize it.

Public API

Properties

  • Counter.pos

    [Integer] Current Index Position

  • Counter.values

    [Array] of the possible values
    e.g.:["A","B","C","D","E","F"];

Options

  • Counter.options.mousewheel

    [boolean] enable mouse wheel manipulation

  • Counter.options.digitHeight

    [Integer] height in pixels of a single digit

  • Counter.options.inverted

    [boolean] invert direction

Methods

  • Counter.prototype.setValue(String value)

    Set the position to the position of the String value

  • Counter.prototype.getValue()

    returns the String value of the current position

  • Counter.prototype.setValue(String value)

    Set the position to the position of the value

  • Counter.prototype.getPos()

    returns the current index position

  • Counter.prototype.setPos (int index)

    Set the position to the specified index

  • Counter.prototype.moveBy(int x)

    Move by the specified amount (positive or negative)

  • Counter.prototype.moveTo(int pos)

    Move to the specified index position

  • Counter.prototype.next()

    Increase the position by one

  • Counter.prototype.previous(int pos)

    Reduce the position by 1

Watch this project on GitHub

November 22nd, 2015 12:11pm Web Components HTML5 CSS3 Javascript