bjm

babbler-js-material-ui

MaterialUI widgets for Babbler.js Arduino control library

Showing:

Popularity

Downloads/wk

0

GitHub Stars

0

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

6

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Babbler.js управление Arduino через последовательный порт

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')
);

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial