EV

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<div class="ev_info">
    <div class="iso_container">
        <a class="up" data-bind="click: upISO"></a>
        <span>ISO<span class="value" data-bind="text: ISO"></span></span>
        <a class="down" data-bind="click: downISO"></a>
    </div>
    <div class="fstop_container">
        <a class="up" data-bind="click: upFStop"></a>
        <span>f<span class="value" data-bind="text: FStop"></span></span>
        <a class="down" data-bind="click: downFStop"></a>
    </div>
    <div class="shutterspeed_container">
        <a class="up" data-bind="click: upShutterSpeed"></a>
        <span><span class="value" data-bind="text: ShutterSpeed"></span>s</span>
        <a class="down" data-bind="click: downShutterSpeed"></a>
    </div>
</div>

CSS

.ev_info > div {
    float: left;
    background: #000000;
    padding: 2%;
    margin: 1%;
    color: #ffffff;
    text-align: center;
    width: 27%;
}

.ev_info a {
    display: block;
    cursor: pointer;
}

.ev_info a:hover {
    color: #000000;
    background: #eeeeee;
}

.up:before {
    content: '+'
}

.down:before {
    content: '-'
}

JavaScript

// Copyright 2015 cFront Software Ltd, http://www.cfront.co.uk
// Free for any use, provided this copyright notice is maintained.
if(typeof(cFront) === 'undefined') var cFront = {};
if(typeof(cFront.EV) == 'undefined') cFront.EV = {};

// ============================================================================================================================================================
cFront.EV.Converter = function(iso, shutterspeed, fstop)
{	
	// Original values
    var _o_iso;
    var _o_fstop;
    var _o_shutterspeed;
	// Current values
    var _iso;
    var _fstop;
    var _shutterspeed;
	//

	// Accessors
    this.ISO = function() { return _iso; }
    this.FStop = function() { return _fstop; }
    this.ShutterSpeed = function() { return _shutterspeed; }

    // ---------------------------------------------------------------------------------------------------------
	// Initialize
	_iso = _o_iso = (iso || 200);
    _o_shutterspeed = shutterspeed ? shutterspeed.clone() : new cFront.EV.Fraction(1, 100);
    _shutterspeed = _o_shutterspeed.clone();
    _fstop = _o_fstop = (fstop || 8);
	//

    // ---------------------------------------------------------------------------------------------------------
    this.reset = function()
    {
        _iso = _o_iso;
        _fstop = _o_fstop;
        _shutterspeed = _o_shutterspeed.clone();
    };

    // Returns false if an out of range value would be generated
    this.setISO = function(new_iso, priority)
    {
        var stops = cFront.EV.getEVChangeBetweenISOSpeeds(_iso, new_iso);        
        var ok;

        if(priority == cFront.EV.KEEP_SHUTTER)
            ok = this.changeAperture(Math.abs(stops), stops > 0);
        else
            ok = this.changeShutterSpeed(Math.abs(stops), stops > 0);

        if(ok)
            _iso = new_iso;

        return ok;
    };

    // Returns false if an out of range value would be generated
    this.setFStop = function(new_fstop)
    {
        var stops =...