babbler-js-material-ui

MaterialUI widgets for Babbler.js Arduino control library

babbler_h library for Arduino/ChipKIT boards: https://github.com/1i7/babbler_h

See babbler.js library https://github.com/1i7/babbler-js

and babbler-js-demo https://github.com/1i7/babbler-js-demo

for usage examples.

Demo application video in action: https://www.youtube.com/watch?v=uLHPr1sS558

Material UI React components http://www.material-ui.com/#/

var React = require('react');
var ReactDOM = require('react-dom');
 
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 
import Paper from 'material-ui/Paper';
import {Tabs, Tab} from 'material-ui/Tabs';
import Divider from 'material-ui/Divider';
 
...
 
// Babbler.js
import Babbler from 'babbler-js';
 
// виджеты Babbler MaterialUI
import BabblerConnectionStatusIcon from 'babbler-js-material-ui/lib/BabblerConnectionStatusIcon';
import BabblerConnectionErrorSnackbar from 'babbler-js-material-ui/lib/BabblerConnectionErrorSnackbar';
import BabblerConnectionPanel from 'babbler-js-material-ui/lib/BabblerConnectionPanel';
import BabblerDataFlow from 'babbler-js-material-ui/lib/BabblerDataFlow';
 
...
 
// Устройство Babbler
var babbler1 = new Babbler();
 
// Контент приложения
ReactDOM.render(
    <MuiThemeProvider muiTheme={getMuiTheme()}>
      <div>
        <Paper>
            <BabblerConnectionPanel babbler={babbler1}/>
            <BabblerConnectionStatusIcon 
                babbler={babbler1} 
                iconSize={50}
                style={{position: "absolute", right: 0, marginRight: 14, marginTop: 5}} />
        </Paper>
        
        <Divider style={{marginTop: 20, marginBottom: 20}}/>
        
        <Tabs>
            <Tab label="Лампочки" >
                <BabblerLedControlPnl babbler={babbler1}/>
            </Tab>
            <Tab label="Отладка" >
                <BabblerDebugPnl babbler={babbler1}/>
            </Tab>
            <Tab label="Лог" >
                <BabblerDataFlow 
                    babbler={babbler1} 
                    reverseOrder={true}
                    maxItems={10000}
                    timestamp={true}
//                    filter={{ err: false, data: false }}
//                    filter={{ data: {queue: false} }}
//                    filter={{ err: {in: false, out: false, queue: false}, data: {in: false, out: false, queue: false} }}
                    style={{margin: 20}}/>
            </Tab>
        </Tabs>
        
        <BabblerConnectionErrorSnackbar babbler={babbler1}/>
      </div>
    </MuiThemeProvider>,
    document.getElementById('app-content')
);