Skip to content

Commit

Permalink
Implement UI for UART on inspector
Browse files Browse the repository at this point in the history
  • Loading branch information
wakhub committed Oct 1, 2016
1 parent f5906c9 commit 1cea6a9
Show file tree
Hide file tree
Showing 8 changed files with 146 additions and 57 deletions.
15 changes: 12 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# konashi for Web Bluetooth
# konashi SDK for Web Bluetooth

konashi を Web Bluetooth で動かす試み。
https://github.com/toyoshim/konashi-js-sdk/tree/web_bluetooth は konashi.js をそのまま動かす想定で実装されているが、このリポジトリでは Web Bluetooth を Promise で操作するもっと薄いラッパーを実装することを目指す。
![](portrait.jpg)

konashi を Web Bluetooth で動かす試み。

```javascript
window.addEventListener('click', () => {
Expand All @@ -20,6 +20,12 @@ window.addEventListener('click', () => {

```

## konashi inspector for Web Bluetooth

konashi の機能を簡単に操作できるツール

https://yukai.github.io/konashi-web-bluetooth/inspector/


## 動作環境

Expand Down Expand Up @@ -59,7 +65,10 @@ window.addEventListener('click', () => {
## 参考

- [Web Bluetooth Draft Community Group Report](https://webbluetoothcg.github.io/web-bluetooth/)
- [日本語訳](https://tkybpp.github.io/web-bluetooth-jp/)
- [Interact with BLE devices on the Web - Google Developers](https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web?hl=en)
- [chrome.bluetoothLowEnergy - Google Chrome](https://developer.chrome.com/apps/bluetoothLowEnergy)
- [Web Bluetoothを使ってkonashi2.0でLチカしてみる](http://qiita.com/toyoshim/items/74ae7551dc2c9ab9cbf6)
- [konashi.js向けのコードをChromeで実行](http://qiita.com/toyoshim/items/05b1d14ca925d5df3e43)
- https://github.com/toyoshim/konashi-js-sdk/tree/web_bluetooth

2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "konashi-web-bluetooth",
"description": "konashi for Web Bluetooth",
"description": "konashi SDK for Web Bluetooth",
"main": ["js/konashi.js"],
"moduleType": [
"globals"
Expand Down
2 changes: 1 addition & 1 deletion inspector/js/analog_in.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ app.c.AnalogIn = {
return;
}
pin.input(value);
var progress = value / 1300 * 100;
var progress = value / Konashi.KONASHI_ANALOG_REFERENCE * 100;
elem.MaterialProgress.setProgress(progress);
};
if (chain == null) {
Expand Down
43 changes: 18 additions & 25 deletions inspector/js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ var PioPin = function(pin) {
return output;
});
}
this.pwmDuty = m.prop(0);
this.pwmDuty = m.prop(100);
this.setPwmMode = (mode) => {
if (!app.vm.konashi().connected()) {
return;
Expand Down Expand Up @@ -217,32 +217,25 @@ var header = function(ctrl) {
};

var drawer = function(ctrl) {
var externals = [
['Github', 'https://github.com/YUKAI/konashi-web-bluetooth'],
['iOS SDK', 'https://github.com/YUKAI/konashi-ios-sdk'],
['Android SDK', 'https://github.com/YUKAI/konashi-android-sdk'],
['Official Site', 'http://konashi.ux-xu.com']];

return m('.mdl-layout__drawer', [
m('span.mdl-layout-title', 'konashi inspector'),
m('nav.mdl-navigation',
app.pages.map(function(page) {
return m('a.mdl-navigation__link',
{href: '#', onclick: ctrl.onClickDrawerItem.bind(ctrl, page)},
page.title());
})
),
m('ul', [
m('li', [m('a', {href: 'https://github.com/YUKAI/konashi-web-bluetooth', target: '_blank'}, 'Github')]),
m('li', [m('a', {href: 'https://github.com/YUKAI/konashi-ios-sdk', target: '_blank'}, 'iOS SDK')]),
m('li', [m('a', {href: 'https://github.com/YUKAI/konashi-android-sdk', target: '_blank'}, 'Android SDK')]),
m('li', [m('a', {href: 'http://konashi.ux-xu.com', target: '_blank'}, 'Official Site')])
])
]);
};

var footer = function(ctrl) {
return m('.mdl-grid.mdl-color--grey-100.mdl-color-text--grey-900', [
m('.mdl-cell.mdl-cell--2-col', [m('a', {href: '', value: 'hoge'}, 'YUKAI/konashi-web-bluetooth')]),
m('.mdl-cell.mdl-cell--2-col', [m('a', {href: 'dummy'}, 'iOS SDK')]),
m('.mdl-cell.mdl-cell--2-col', [m('a', {href: 'dummy'}, 'Android SDK')]),
m('.mdl-cell.mdl-cell--2-col', [m('a', {href: 'dummy'}, 'Official Site')]),
m('.mdl-cell.mdl-cell--2-col', [m('a', {href: 'http://mithril.js.org', target: '_blank'}, 'Mithril')]),
m('.mdl-cell.mdl-cell--2-col', [m('a', {href: 'https://getmdl.io', target: '_blank'}, 'Material Design Lite')])
m('nav.mdl-navigation', app.pages.map((page) => {
return m('a.mdl-navigation__link',
{href: '#', onclick: ctrl.onClickDrawerItem.bind(ctrl, page)},
page.title());
})),
m('ul', externals.map((item, i) => {
return m('li', [
m('a#drawer-link-' + i, {href: item[1], target: '_blank'}, item[0]),
m('.mdl-tooltip', {'data-mdl-for': 'drawer-link-' + i}, item[1])
]);
}))
]);
};

Expand Down
2 changes: 1 addition & 1 deletion inspector/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@ document.addEventListener('DOMContentLoaded', () => {
app.pages.push(new app.Page('Digital I/O', app.c.Pio));
app.pages.push(new app.Page('PWM', app.c.Pwm));
app.pages.push(new app.Page('Anlog IN', app.c.AnalogIn));
//app.pages.push(new app.Page('UART', app.c.Uart));
app.pages.push(new app.Page('UART', app.c.Uart));
m.mount(document.body, app);
});
130 changes: 106 additions & 24 deletions inspector/js/uart.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,114 @@
app.c.Uart = {

view: function(ctrl) {
return m('.mdl-grid', [
m('.mdl-cell.mdl-cell--4-col', 'Uart'),
m('.mdl-cell.mdl-cell--4-col', 'BBB'),
m('.mdl-cell.mdl-cell--4-col', 'CCC')
view: (ctrl) => {
return m('.panel.mdl-shadow--2dp', [
m('.mdl-grid', [
m('.mdl-cell.mdl-cell--12-col', [
m('label.mdl-switch.mdl-js-switch.mdl-js-ripple-effect', [
m('input[type=checkbox].mdl-switch__input#enable-uart'),
m('span.mdl-switch__label', {for: 'enable-uart'}, 'Enable')
])
]),
]),
m('.mdl-grid', [
m('.mdl-cell.mdl-cell--3-col.mdl-cell--12-col-tablet.mdl-cell--12-col-phone', [
m('strong', 'Baud Rate')
]),
m('.mdl-cell.mdl-cell--3-col', [
m('label.mdl-radio.mdl-js-radio.mdl-js-ripple-effect', [
m('input[type=radio]#baudrate-2400.mdl-radio__button', {value: Konashi.KONASHI_UART_RATE_2K4, name: 'baudrate'}),
m('span.mdl-radio__label', '2400')
]),
]),
m('.mdl-cell.mdl-cell--3-col', [
m('label.mdl-radio.mdl-js-radio.mdl-js-ripple-effect', [
m('input[type=radio]#baudrate-9600.mdl-radio__button', {value: Konashi.KONASHI_UART_RATE_9K6, name: 'baudrate', checked: true}),
m('span.mdl-radio__label', '9600')
])
])
]),
m('.mdl-grid', [
m('.mdl-cell.mdl-cell--3-col.mdl-cell--12-col-tablet.mdl-cell--12-col-phone', [
m('strong', 'TX')
]),
m('.mdl-cell.mdl-cell--9-col', [
m('.mdl-textfield.mdl-js-textfield', [
m('textarea#uart-tx.mdl-textfield__input', {rows: 3})
])
])
]),
m('.mdl-grid', [
m('.mdl-cell.mdl-cell--3-col.mdl-cell--hide-tablet.mdl-cell--hide-phone'),
m('.mdl-cell.mdl-cell--3-col', [
m('label.mdl-radio.mdl-js-radio.mdl-js-ripple-effect', [
m('input[type=radio].mdl-radio__button', {value: 'text', name: 'tx-type', checked: true}),
m('span.mdl-radio__label', 'TEXT')
]),
]),
m('.mdl-cell.mdl-cell--3-col', [
m('label.mdl-radio.mdl-js-radio.mdl-js-ripple-effect', [
m('input[type=radio].mdl-radio__button', {value: 'byte', name: 'tx-type'}),
m('span.mdl-radio__label', 'BYTE(HEX)')
])
])
]),
m('.mdl-grid', [
m('.mdl-cell.mdl-cell--3-col.mdl-cell--hide-tablet.mdl-cell--hide-phone'),
m('.mdl-cell.mdl-cell--9-col', [
m('input[type=submit].mdl-button.mdl-js-button.mdl-button--raised', {onclick: ctrl.onClickSubmit}, 'Send')
])
]),
m('.mdl-grid', [
m('.mdl-cell.mdl-cell--3-col.mdl-cell--12-col-tablet.mdl-cell--12-col-phone', [
m('strong', 'RX')
]),
m('.mdl-cell.mdl-cell--9-col', [
m('.mdl-textfield.mdl-js-textfield', [
m('textarea#uart-rx.mdl-textfield__input', {rows: 3})
])
])
]),
m('.mdl-grid', [
m('.mdl-cell.mdl-cell--3-col.mdl-cell--hide-tablet.mdl-cell--hide-phone'),
m('.mdl-cell.mdl-cell--3-col', [
m('label.mdl-radio.mdl-js-radio.mdl-js-ripple-effect', [
m('input[type=radio].mdl-radio__button', {value: 'text', name: 'rx-type', checked: true}),
m('span.mdl-radio__label', 'TEXT')
]),
]),
m('.mdl-cell.mdl-cell--3-col', [
m('label.mdl-radio.mdl-js-radio.mdl-js-ripple-effect', [
m('input[type=radio].mdl-radio__button', {value: 'byte', name: 'rx-type'}),
m('span.mdl-radio__label', 'BYTE(HEX)')
])
])
])
]);

},

controller: function(args) {
if (!args.konashi) {
return;
}
/* Debug code
var k = app.konashi;
k.uartMode(k.KONASHI_UART_ENABLE)
.then(() => k.uartBaudRate(k.KONASHI_UART_RATE_9K6))
.then(
() => {
k.uartWrite(new Uint8Array(
['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
'l', 'm', 'n'].map(v => v.charCodeAt(0))));
},
(e) => {
console.log('Error', e);
});
*/
var vm = args.vm;

return {
onClickEnable: (ev) => {
vm.konashi().device().uartMode(ev.target.checked ? Konashi.KONASHI_UART_ENABLE : Konashi.KONASHI_UART_DISABLE)
.then(() => {
vm.konashi().device().uartBaudrate(Konashi.KONASHI_UART_9K6);
});
},
onClickSubmit: () => {
var value = document.querySelector('#uart-tx').value;
var i;
var chars = [];
console.log(value);
for (i = 0; i < value.length; i++) {
chars.push(value.charCodeAt(i));
}
vm.konashi().device().uartWrite(new Uint8Array(chars))
.catch(e => {
console.log(e);
});
}
};
}
};
9 changes: 7 additions & 2 deletions inspector/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@
}

.konashi-content .mdl-cell {
padding: 0.8rem 1rem;
padding: 0.3rem 1rem 0 ;
}

.konashi-content table {
.konashi-content table,
.konashi-content .panel {
max-width: 500px;
min-width: 200px;
margin: 0 auto;
Expand All @@ -27,6 +28,10 @@
margin: 0 auto;
}

.konashi-content .mdl-textfield {
padding-top: 0;
padding-bottom: 0;
}

@media (max-width: 479px) {

Expand Down
Binary file added portrait.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1cea6a9

Please sign in to comment.