IV-4 indicator

by diafour

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="tab_control">
    <a href="#clock">Часы</a>
    <a href="#panel">Панель 8x2</a>
    <a href="#editor">Редактор</a>
</div>
<div id="clock" class="tab tab_active">
    <div class="paper"></div>
    <div class="control">
        Ход:
    <button type="button" class="clock_fast">Ускоренно</button><button type="button" class="clock_normal">Нормально</button>
    </div>
</div>
<div id="editor" class="tab">
    <div class="paper"></div>
    <div>
        <button type="button" id="editor_clear">Сброс</button>
    <div id="editor_output" class="ui-panel"></div>
    </div>
</div>
<div id="panel" class="tab">
    <div class="paper"></div>
    <div id="text_input">
        <input type="text"/><br/>
        <input type="text"/>
    </div>
    <button type="button" class="keyboard">Алфавит</button>
    <div class="panel_keyboard ui-panel ui-hidden">
        
<button type="button">0</button>
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
<button type="button">4</button>
<button type="button">5</button>
<button type="button">6</button>
<button type="button">7</button>
<button type="button">8</button>
<button type="button">9</button>
    <br/><br/>
<button type="button">Й</button>
<button type="button">Ц</button>
<button type="button">У</button>
<button type="button">К</button>
<button type="button">Е</button>
<button type="button">Н</button>
<button type="button">Г</button>
<button type="button">Ш</button>
<button type="button">Щ</button>
<button type="button">З</button>
<button type="button">Х</button>
<button type="button">Ъ</button>
    <br/>
<button type="button" style="margin-left:1em">Ф</button>
<button type="button">Ы</button>
<button type="button">В</button>
<button type="button">А</button>
<button type="button">П</button>
<button type="button">Р</button>
<button type="button">О</button>
<button...

CSS

body { margin: 0; }
.keyboard{    margin-top: 12pt; }

.ui-panel {
    border: 1px solid grey;
    padding: 3px;
}

.ui-hidden{
    display:none;
}

#tab_control a{
    /*border: 1px solid black;*/
    /*background-color: grey;*/
    /*color: white;*/
    margin:0;
    height: 30px;
}
#tab_control {
    margin-bottom: 10px; 
}

.paper{
    /*border: 3px solid red;*/
}

JavaScript

function IndicatorIV4() {
    /**
     * pins of segments:
     *
     *    — —       20    14
     *   |\|/|   21 18 17 16 13
     *    — —       19    15
     *   |/|\|    3  5  6  7  9
     *  , — — .    2  4  8  10
     * 
     * 0 is 20,14,21,13,3,9,4,8
     */
    this.name='IV-4';
    this.segments = {};
    this.paper = null;
    
    this.backColor = '#777777';
    this.offColor='#99938B';//'#CDC5BA';
    this.onColor='#5CDFE6';//'#54CBD1';
    this.onGlow = {width:10, color: this.onColor, opacity:0.3}
    //this.gridColor='#B08F64';
    //this.gripOpacity=0.4;
    this.grid = {
        stroke:'#B08F64',
        'stroke-width':0.5,
        opacity:0.5
    };
    
    this.drawPinNumbers=false;
    this.toggleWithClick=false;
    
    this.toggleCallback=null;
}
IndicatorIV4.prototype = {
    /**
     * Отрисовать svg представление, вернуть набор элементов
     */
    draw: function (paper, width, position) {
        var me = this;
        me.paper = paper;
        
        // All elements of an indicator
        var indicator = paper.set();
        
        // Dark background
        var backElement = paper.rect(0,0,145,210).attr({
            fill: me.backColor,
            stroke:'none'});
        indicator.push(backElement);
    
        // Indicator segments
        paper.setStart();
        // left dot
        me.segments['2'] = paper.path('M6,177 L5,202 L15,202 L16,188 L19,186 L16,177 Z').id;
        //right dot
        me.segments['10'] = paper.path('M124,187 L128,178 L137,178 L136,202 L126,202 L126,190 Z').id;
        // 8 outer
        me.segments['20'] = paper.path('M29,10 L42,6 L74,6 L69,18 L39,18 Z').id;
        me.segments['14'] = paper.path('M84,6 L116,6 L128,11 L116,19 L88,18 Z').id;
        me.segments['13'] = paper.path('M131,20 L133,20 L134,27 L132,88 L130,92 L127,92 L119,87 L121,44 Z').id;
        me.segments['9'] = paper.path('M118,106 L129,99 L130,102 L128,168 L124,172 L116,148 Z').id;
        me.segments['8'] = paper.path('M80,172...