Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.