onion-rgbled

<link rel="import" href="/lib/polymer/polymer.html">
<link rel="import" href="/lib/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="/elements/onion-app/onion-app.html">
<link rel="import" href="/lib/iron-icons/iron-icons.html">
<link rel="import" href="/lib/iron-icons/hardware-icons.html">
<link rel="import" href="/elements/bootstrap-dropdown/bootstrap-dropdown.html">

<dom-module id="onion-rgbled">
    <style>
        :host {
            display: block;
            height: 100%;
            width: 100%;
            --bootstrap-dropdown-toggle-padding: 0 10px;
            --bootstrap-dropdown-toggle-hover-bg: rgba(255, 255, 255, 0.5);
        }

        onion-app-body > div {
            height: 100%;
            width: 100%;
            overflow: scroll;
            padding: 15px;
        }

        #pin-map {
            height: 600px;
            width: auto;
        }

        #pin-map-dock {
            height: auto;
            width: 600px;
        }

        button.pin {
            border-radius: 6px;
            display: block;
            border: 1px solid #f2f2f2;
            font-size: 12px;
            padding: 3px 5px;
            background-color: #E8E8E8;
            color: #fff;

        }

        onion-app-toolbar button {
            padding: 0 10px;
            background-color: transparent;
        }
            onion-app-toolbar button:hover {
                background-color: rgba(255, 255, 255, 0.5);
            }
        onion-app-toolbar button iron-icon,
        onion-app-toolbar bootstrap-dropdown-toggle iron-icon {
            margin-right: 5px;
        }

        button.pin.gpio {
            background-color: gray;
        }

        button.pin.gpio.on {
            background-color: #2ecc71;
        }

        button.pin.gpio.off {
            background-color: red;
        }

        #exp-dock-bg {
            position: relative;
            height: 374px;
            width: 600px;
            background-image: url('./img/exp_dock.png');
            background-size: contain;
            background-repeat: no-repeat;
        }

        #left-pins {
            margin-right: 10px;
        }

        #right-pins {
            margin-left: 10px;
        }

        #top-pins {
            position: absolute;
            width: 350px;
            left: 17px;
            bottom: 100px;
        }

        #bottom-pins {
            position: absolute;
            width: 350px;
            left: 17px;
            bottom: 55px
        }
            .pin.vertical {
                padding: 0;
                width: 16.75px;
                height: 40px;
                display: inline;
                white-space: nowrap;
            }
            .pin.vertical > div {
                width: 40px;
                margin-left: -12.5px;
                -webkit-transform: rotate(270deg);
                -moz-transform: rotate(270deg);
                -o-transform: rotate(270deg);
                -ms-transform: rotate(270deg);
                transform: rotate(270deg);
            }


        #gpio-control {
            height: 415px;
            width: 300px;
            background: #fff;
            border-radius: 5px;
            margin-left: 25px;
            padding: 25px;
        }
            #gpio-pin-number {
                text-align: center;
                margin-bottom: 25px;
            }

        #no-pin {
            color: #ccc;
            height: 100%;
            width: 100%;
        }
    </style>
    <template>
        <onion-app app-name="RGB Led Tool" toolbar-background="#c0392b" background="#f2f2f2">

            <onion-app-toolbar>
                <div class="layout horizontal">
                    <div class="flex"></div>  <!-- Place Holder -->
                    <bootstrap-dropdown>
                        <bootstrap-dropdown-toggle theme="onion">
                            <iron-icon class="toolbar-icon" icon="hardware:developer-board"></iron-icon><span>Board Layout</span>
                        </bootstrap-dropdown-toggle>
                        <bootstrap-dropdown-menu right>
                            <bootstrap-dropdown-item on-tap="_onLayoutChange" data-args="omega">Omega</bootstrap-dropdown-item>
                            <bootstrap-dropdown-item on-tap="_onLayoutChange" data-args="exp_dock">Expansion Dock</bootstrap-dropdown-item>
                        </bootstrap-dropdown-menu>
                    </bootstrap-dropdown>
                </div>
            </onion-app-toolbar>

            <onion-app-body>
                <div class="horizontal center-justified layout center">

                    <!-- Omega Layout -->
                    <template is="dom-if" if="{{_checkValue(layout, 'omega')}}">
                        <div class="vertical end-justified layout" id="left-pins">
                            <template id="pinListLeft" is="dom-repeat" items="{{pins}}" index-as="pinIndex">
                                <template is="dom-if" if="{{item.left}}">
                                    <button class$="{{_calculatePinClass(item)}}" on-tap="_onPin">{{item.label}}</button>
                                </template>
                            </template>
                        </div>

                        <img id="pin-map" src="./img/omega.png" />

                        <div class="vertical end-justified layout" id="right-pins">
                            <template is="dom-repeat" items="{{pins}}">
                                <template is="dom-if" if="{{!item.left}}">
                                    <button class$="{{_calculatePinClass(item)}}" on-tap="_onPin">{{item.label}}</button>
                                </template>
                            </template>
                        </div>
                    </template>

                    <!-- Expansion Dock Layout -->
                    <template is="dom-if" if="{{_checkValue(layout, 'exp_dock')}}">
                        <div id="exp-dock-bg">
                            <div id="top-pins">
                                <template id="pinListLeft" is="dom-repeat" items="{{pins}}" index-as="pinIndex">
                                    <template is="dom-if" if="{{!item.left}}">
                                        <button class$="{{_calculatePinClass(item,layout)}}" on-tap="_onPin"><div>{{item.label}}</div></button>
                                    </template>
                                </template>
                            </div>
                            <div id="bottom-pins">
                                <template is="dom-repeat" items="{{pins}}">
                                    <template is="dom-if" if="{{item.left}}">
                                        <button class$="{{_calculatePinClass(item,layout)}}" on-tap="_onPin"><div>{{item.label}}</div></button>
                                    </template>
                                </template>
                            </div>
                        </div>
                    </template>

                    <!-- GPIO Control -->
                    <div id="gpio-control">
                        <template is="dom-if" if="{{!_isGpio(currentPin)}}">
                            <div id="no-pin" class="horizontal center-justified layout center">Please select a GPIO Pin</div>
                        </template>
                        <template is="dom-if" if="{{_isGpio(currentPin)}}">
                            <div>
                                <h5 id="gpio-pin-number">GPIO <span>{{currentPin.gpio}}</span></h5>

                                <div class="form-group row">
                                    <label for="direction" class="col-lg-4 col-md-4 col-sm-4 col-xs-4 form-control-label">Direction</label>
                                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                                        <select id="direction" class="c-select" on-change="_pinDirectionChanged" value="{{currentPin.direction::input}}">
                                            <option value="input">Input</option>
                                            <option value="output">Output</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="value" class="col-lg-4 col-md-4 col-sm-4 col-xs-4 form-control-label">Value</label>
                                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                                        <select id="value" class="c-select" on-change="_pinValueChanged" value="{{currentPin.value::input}}" disabled="{{_isInput(currentPin)}}">
                                            <option value="0">0</option>
                                            <option value="1">1</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-lg-offset-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-4">
                                        <button class="btn btn-success" on-tap="_syncOne">Sync</button>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </onion-app-body>
        </onion-app>
    </template>

    <script>
        'use strict';

        (function () {
            var self = null;

            var created = function () {
                self = this;
            };

            var ready = function() {
                this.title = 'Tool';
                console.log(self.layout);

            };

            // populate the array with info for all GPIO pins
            var _syncAll = function () {
                // get the ubus service
                // TODO: need a new service to pull all pin data
                onionConsole.getService('onion-ubus-provider', (function (ubus) {
                    for (var i=0; i< this.pins.length; i++) {
                        var pin = this.pins[i];
                        ubus.request('onion', 'gpio', {
                            command:'status',
                            params: {
                                gpio: pin.gpio
                            }
                        }, (function (data) {
                            if (data.length === 2 && data[0] === 0) {
                                pin.direction = data[1].direction;
                                pin.value = data[1].value;
                                // data[1] contains the following:
                                // {pin: int, value: int, direction: "input|output", input: true|false, activelow: false|true}
                                this._refresh();
                            } else {
                                console.log('status error');
                            }
                        }).bind(this));
                    }
                }).bind(this));
            };

            var _syncOne = function () {
                var pin = this.currentPin;
                onionConsole.getService('onion-ubus-provider', (function (ubus) {
                        ubus.request('onion', 'gpio', {
                            command:'status',
                            params: {
                                gpio: pin.gpio
                            }
                        }, (function (data) {
                            if (data.length === 2 && data[0] === 0) {
                                pin.direction = data[1].direction;
                                pin.value = data[1].value;
                                // data[1] contains the following:
                                // {pin: int, value: int, direction: "input|output"}
                                this._refresh();
                                //console.log("_syncOne", data);
                            } else {
                                console.log('status error');
                            }
                        }).bind(this));
                }).bind(this));
            }

            var _calculatePinClass = function (pin, layout) {
                var result = 'pin';
                result = result + (pin.gpio >= 0 ? ' gpio' : '');
                if (pin.direction !== '?'){ //pin initialized
                    result = result + (pin.value > 0 ? ' off' : ' on');
                }

                if (layout === 'exp_dock'){
                    result = result + ' vertical';
                }


                return result;
            };

            var _isGpio = function(pin){
                return (pin.gpio >= 0)
            }

            var _isInput = function(pin){
                return (pin.direction === "input")
            }

            var _onPin = function (e) {
                this.currentPin = e.model.item;
                if (this.currentPin.gpio >= 0){
                    this._syncOne();
                }
            };

            var _calculateDirection = function (currentPin, updateDirection) {
                return (this.gpios[currentPin].direction === 'input');
            };

            var _refresh = function(){
                // this is an workaround to force update the screen
                var buffer = [];
                for (var i = 0; i < this.pins.length; i++) {
                    var p = {};
                    for (var key in this.pins[i]){
                        p[key] = this.pins[i][key];
                    }
                    buffer.push(p);
                };

                this.pins = buffer;
                this.currentPin = this._getPin(this.currentPin.gpio);
            };

            var _getPinStatus = function (pin){
                onionConsole.getService('onion-ubus-provider', (function (ubus) {
                    ubus.request('onion', 'gpio', {
                        command:'status',
                        params: {
                            gpio: this.currentPin.gpio
                        }
                    }, (function (data) {
                        if (data.length === 2 && data[0] === 0) {
                            pin.value = data[1].value;
                            this._refresh();
                        } else {
                            console.log('status error');
                        }
                    }).bind(this));
                }).bind(this));
            };

            var _pinValueChanged = function () {
                onionConsole.getService('onion-ubus-provider', (function (ubus) {
                    ubus.request('onion', 'gpio', {
                        command: 'set',
                        params: {
                            gpio: this.currentPin.gpio,
                            value: this.currentPin.value
                        }
                    }, (function (data) {
                        if (data.length === 2 && data[0] === 0) {
                            // this._getPinStatus(this.currentPin);
                            this._refresh();
                        }
                    }).bind(this));
                }).bind(this));
            };

            var _pinDirectionChanged = function () {
                onionConsole.getService('onion-ubus-provider', (function (ubus) {
                    ubus.request('onion', 'gpio', {
                        command: 'set-direction',
                        params: {
                            gpio: this.currentPin.gpio,
                            value: this.currentPin.direction
                        }
                    }, (function (data) {
                        if (data.length === 2 && data[0] === 0) {
                            //console.log("set-direction", data);
                            this._refresh();
                        }
                    }).bind(this));
                }).bind(this));
            };

            var _getPin = function(gpio){
                for (var i = 0; i < this.pins.length; i++) {
                    if (this.pins[i].gpio === gpio){
                        return this.pins[i];
                    }
                };
            };

            var _checkValue = function(layout, compare){
                console.log('_checkValue:' +layout + compare)
                return (layout === compare);
            };

            var _onLayoutChange = function (e) {
                this.layout = e.target.parentNode.dataset['args'];

                if (this.layout === 'omega'){
                    this.pins = [ // left:true = left side, gpio:-1=not gpio
                        // left side pins
                        {left: true, label: 'GND', gpio: -1, direction: null, value: null},
                        {left: true, label: '2.8V', gpio: -1, direction: null, value: null},
                        {left: true, label: '26', gpio: 26, direction: '?', value: 0},
                        {left: true, label: '23', gpio: 23, direction: '?', value: 0},
                        {left: true, label: '17', gpio: 17, direction: '?', value: 0},
                        {left: true, label: '16', gpio: 16, direction: '?', value: 0},
                        {left: true, label: '15', gpio: 15, direction: '?', value: 0},
                        {left: true, label: '14', gpio: 14, direction: '?', value: 0},
                        {left: true, label: '13', gpio: 13, direction: '?', value: 0},
                        {left: true, label: '12', gpio: 12, direction: '?', value: 0},
                        {left: true, label: '8', gpio: 8, direction: '?', value: 0},
                        {left: true, label: '7', gpio: 7, direction: '?', value: 0},
                        {left: true, label: '6', gpio: 6, direction: '?', value: 0},
                        {left: true, label: '1', gpio: 1, direction: '?', value: 0},
                        {left: true, label: '0', gpio: 0, direction: '?', value: 0},
                        {left: true, label: 'RST', gpio: -1, direction: null, value: null},
                        // right side pins
                        {left: false, label: 'GND', gpio: -1, direction: null, value: null},
                        {left: false, label: '3.3V', gpio: -1, direction: null, value: null},
                        {left: false, label: 'USB+', gpio: -1, direction: null, value: null},
                        {left: false, label: 'USB-', gpio: -1, direction: null, value: null},
                        {left: false, label: 'TX', gpio: -1, direction: null, value: null},
                        {left: false, label: 'RX', gpio: -1, direction: null, value: null},
                        {left: false, label: 'FW RST', gpio: -1, direction: null, value: null},
                        {left: false, label: '2.0V', gpio: -1, direction: null, value: null},
                        {left: false, label: 'TX-', gpio: -1, direction: null, value: null},
                        {left: false, label: 'TX+', gpio: -1, direction: null, value: null},
                        {left: false, label: 'RX-', gpio: -1, direction: null, value: null},
                        {left: false, label: 'RX+', gpio: -1, direction: null, value: null},
                        {left: false, label: '18', gpio: 18, direction: '?', value: 0},
                        {left: false, label: '19', gpio: 19, direction: '?', value: 0},
                        {left: false, label: 'SCL', gpio: -1, direction: null, value: null},
                        {left: false, label: 'SDA', gpio: -1, direction: null, value: null}
                    ];

                } else if (this.layout === 'exp_dock') {
                    this.pins = [ // left:true = left side, gpio:-1=not gpio
                        // left side pins
                        {left: true, label: 'GND', gpio: -1, direction: null, value: null},
                        {left: true, label: '3.3V', gpio: -1, direction: null, value: null},
                        {left: true, label: '2.0V', gpio: -1, direction: null, value: null},
                        {left: true, label: '26', gpio: 26, direction: '?', value: 0},
                        {left: true, label: '23', gpio: 23, direction: '?', value: 0},
                        {left: true, label: '14', gpio: 14, direction: '?', value: 0},
                        {left: true, label: '13', gpio: 13, direction: '?', value: 0},
                        {left: true, label: '12', gpio: 12, direction: '?', value: 0},
                        {left: true, label: '8', gpio: 8, direction: '?', value: 0},
                        {left: true, label: '7', gpio: 7, direction: '?', value: 0},
                        {left: true, label: '6', gpio: 6, direction: '?', value: 0},
                        {left: true, label: '1', gpio: 1, direction: '?', value: 0},
                        {left: true, label: '0', gpio: 0, direction: '?', value: 0},
                        {left: true, label: 'RST', gpio: -1, direction: null, value: null},
                        {left: true, label: 'GND', gpio: -1, direction: null, value: null},
                        // right side pins

                        {left: false, label: '5V', gpio: -1, direction: null, value: null},
                        {left: false, label: '2.5V', gpio: -1, direction: null, value: null},
                        {left: false, label: 'USB+', gpio: -1, direction: null, value: null},
                        {left: false, label: 'USB-', gpio: -1, direction: null, value: null},
                        {left: false, label: 'TX-', gpio: -1, direction: null, value: null},
                        {left: false, label: 'TX+', gpio: -1, direction: null, value: null},
                        {left: false, label: 'RX-', gpio: -1, direction: null, value: null},
                        {left: false, label: 'RX+', gpio: -1, direction: null, value: null},
                        {left: false, label: '18', gpio: 18, direction: '?', value: 0},
                        {left: false, label: '19', gpio: 19, direction: '?', value: 0},
                        {left: false, label: 'SCL', gpio: -1, direction: null, value: null},
                        {left: false, label: 'SDA', gpio: -1, direction: null, value: null},
                        {left: false, label: 'GND', gpio: -1, direction: null, value: null},
                        {left: false, label: '5V', gpio: -1, direction: null, value: null},
                        {left: false, label: '3.3V', gpio: -1, direction: null, value: null}
                    ];
                }
            };

            Polymer({
                is: 'onion-rgbled',
                created: created,
                ready: ready,
                behaviors: [Onion.AppBehavior],
                _calculatePinClass: _calculatePinClass,
                _onPin: _onPin,
                _calculateDirection: _calculateDirection,
                _syncAll: _syncAll,
                _isGpio: _isGpio,
                _isInput: _isInput,
                _refresh: _refresh,
                _pinValueChanged: _pinValueChanged,
                _pinDirectionChanged: _pinDirectionChanged,
                _getPin: _getPin,
                _syncOne: _syncOne,
                _onLayoutChange: _onLayoutChange,
                _checkValue: _checkValue,
                properties: {
                    appName: {
                        type: String,
                        value: 'onion-rgbled'
                    },
                    fileName: {
                        type: String,
                        value: 'onion-rgbled'
                    },
                    layout: {
                        type: String,
                        value: 'exp_dock',
                        notify: true
                    },
                    directionBuffer: {
                        type: String,
                        notify: true
                    },
                    updateDirection: {
                        type: Boolean,
                        notify: true
                    },
                    valueBuffer: {
                        type: Number,
                        notify: true
                    },
                    currentPin: {
                        type: Object,
                        notify: true,
                    },
                    pins: {
                        type: Array,
                        value: [ // left:true = left side, gpio:-1=not gpio
                            // left side pins
                            {left: true, label: 'GND', gpio: -1, direction: null, value: null},
                            {left: true, label: '3.3V', gpio: -1, direction: null, value: null},
                            {left: true, label: '2.0V', gpio: -1, direction: null, value: null},
                            {left: true, label: '26', gpio: 26, direction: '?', value: 0},
                            {left: true, label: '23', gpio: 23, direction: '?', value: 0},
                            {left: true, label: '14', gpio: 14, direction: '?', value: 0},
                            {left: true, label: '13', gpio: 13, direction: '?', value: 0},
                            {left: true, label: '12', gpio: 12, direction: '?', value: 0},
                            {left: true, label: '8', gpio: 8, direction: '?', value: 0},
                            {left: true, label: '7', gpio: 7, direction: '?', value: 0},
                            {left: true, label: '6', gpio: 6, direction: '?', value: 0},
                            {left: true, label: '1', gpio: 1, direction: '?', value: 0},
                            {left: true, label: '0', gpio: 0, direction: '?', value: 0},
                            {left: true, label: 'RST', gpio: -1, direction: null, value: null},
                            {left: true, label: 'GND', gpio: -1, direction: null, value: null},
                            // right side pins

                            {left: false, label: '5V', gpio: -1, direction: null, value: null},
                            {left: false, label: '2.5V', gpio: -1, direction: null, value: null},
                            {left: false, label: 'USB+', gpio: -1, direction: null, value: null},
                            {left: false, label: 'USB-', gpio: -1, direction: null, value: null},
                            {left: false, label: 'TX-', gpio: -1, direction: null, value: null},
                            {left: false, label: 'TX+', gpio: -1, direction: null, value: null},
                            {left: false, label: 'RX-', gpio: -1, direction: null, value: null},
                            {left: false, label: 'RX+', gpio: -1, direction: null, value: null},
                            {left: false, label: '18', gpio: 18, direction: '?', value: 0},
                            {left: false, label: '19', gpio: 19, direction: '?', value: 0},
                            {left: false, label: 'SCL', gpio: -1, direction: null, value: null},
                            {left: false, label: 'SDA', gpio: -1, direction: null, value: null},
                            {left: false, label: 'GND', gpio: -1, direction: null, value: null},
                            {left: false, label: '5V', gpio: -1, direction: null, value: null},
                            {left: false, label: '3.3V', gpio: -1, direction: null, value: null}
                        ],
                        notify: true,
                    }
                }
            });
        })();
    </script>
</dom-module>