Restructured components, added more material design. Updated dependen…

…cies to address vulnerability issues
knandersen · Aug 27, 2019 · 9d23b04 · 9d23b04
1 parent 12f9954
commit 9d23b04
Show file tree

Hide file tree

Showing 11 changed files with 1,213 additions and 957 deletions.
diff --git a/package.json b/package.json
@@ -4,6 +4,8 @@
   "private": true,
   "homepage": "https://knandersen.github.io/friendly-lego-ble",
   "dependencies": {
+    "@material-ui/core": "^4.3.0",
+    "@material-ui/icons": "^4.2.1",
     "gh-pages": "^2.0.1",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",

diff --git a/src/App.css b/src/App.css
@@ -1,12 +1,11 @@
 .App {
-  text-align: center;
   display:flex;
   width:100%;
   height:100%;
 }
 
 .Cards {
-  width:50%;
+  width:60%;
   display: flex;
   flex-direction: column;
   overflow-y: auto;

diff --git a/src/App.js b/src/App.js
@@ -3,9 +3,11 @@ import './App.css';
 import Connector from './Connector';
 import BaseUtil from 'scratch-vm/src/util/base64-util';
 import LBLE from './LBLE';
-import Card from './Card';
+import Message from './Message';
 import CommandCenter from './CommandCenter';
 import uuidv1 from 'uuid/v1';
+import CssBaseline from '@material-ui/core/CssBaseline'
+import Typography from '@material-ui/core/Typography'
 
 class App extends React.Component {
 
@@ -40,17 +42,20 @@ class App extends React.Component {
 
   render() {
     const cards = this.state.messages.map(m => {
-            return <Card key={uuidv1()} {...m}></Card>;
+            return <Message key={uuidv1()} {...m}></Message>;
     });
     const sortedCards = cards.sort((a,b) => {
       return new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
     }).reverse();
 
     return (
       <div className="App">
+        <CssBaseline />
         <div className="Cards">
+          <Typography variant="h5" gutterBottom>Messages</Typography>
           {sortedCards}
-          {/*<Card timestamp={Date.now()} payload={[8, 0, 129, 50, 17, 81, 0, 2]}></Card>*/}
+          {<Message timestamp={Date.now()} payload={[8, 0, 129, 50, 17, 81, 0, 2]} fromDevice={false}></Message>}
+          {<Message timestamp={Date.now()} payload={[9, 0, 129, 50, 17, 81, 0, 2, 50, 17, 81, 0, 4]} fromDevice={true}></Message>}
         </div>
         <CommandCenter ioSend={this.onCommand.bind(this)} />
       </div>

diff --git a/src/Card.js b/src/Card.js
diff --git a/src/CommandCenter.js b/src/CommandCenter.js
@@ -2,8 +2,20 @@ import React from 'react';
 import './CommandCenter.css';
 import LBLE from './LBLE';
 import { SketchPicker } from 'react-color';
-import Slider from 'rc-slider'; 
-import 'rc-slider/assets/index.css';
+import Container from '@material-ui/core/Container';
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import Button from '@material-ui/core/Button';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import Card from '@material-ui/core/Card';
+import Slider from '@material-ui/core/Slider';
+import Grid from '@material-ui/core/Grid';
 
 const HubID = 0x00;
 
@@ -14,6 +26,7 @@ class CommandCenter extends React.Component {
 
         this.state = {
             ledIndex: 0,
+            portMotor:0,
             ledRgb: {r:0,g:0,b:0},
             background:'#fff'
         }
@@ -82,41 +95,72 @@ class CommandCenter extends React.Component {
 
   render() {
     const ledOptions = Object.keys(LBLE.LedColor).map((k,i) => {
-        return <option value={i} key={i}>({i}) {k}</option>;
+        return <MenuItem value={i} key={i}>({i}) {k}</MenuItem>;
     });
     ledOptions.pop(); // Remove reverseMap
 
     const portOptions = Object.keys(LBLE.Port).map((k,i) => {
-        return <option value={i} key={i}>({i}) {k}</option>;
+        return <MenuItem value={i} key={i}>({i}) {k}</MenuItem>;
     });
     portOptions.pop(); // Remove reverseMap
 
     return (
-        <div className="CommandCenterContainer">
-            <div className="CommandCenter-card">
-                <div className="CommandCenter-header">LED</div>
-                <select onChange={this.handleChangeLedIndex} value={this.state.ledIndex}>
-                    {ledOptions}
-                </select>
-                <button onClick={this.changeLedByIndex.bind(this)}>set LED by index</button>
-                <br /><br />
-                <SketchPicker disableAlpha={true} presetColors={[]} color={this.state.background} onChangeComplete={this.handleChangeLedRgb} />
-                <button onClick={this.changeLedByRgb.bind(this)}>set LED by RGB</button>
-            </div>
-            <div className="CommandCenter-card">
-                <div className="CommandCenter-header">Motor (WIP)</div>
-                Port: <select onChange={this.handleChangePort} value={this.state.portMotor}>
-                    {portOptions}
-                </select><br />
-                Command type: 
-                <br />
-                Speed: <div><Slider min={0} max={100} defaultValue={50}/></div> <br />
-                MaxPower: <div><Slider min={0} max={100} defaultValue={100}/></div> <br />
-                MaxPower: <br />
-
-                <button onClick={this.sendMotorCommand.bind(this)}>Send motor command</button>
-            </div>
-        </div>
+        <Container>
+        <ExpansionPanel expanded>
+            <ExpansionPanelSummary 
+                expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header">
+                <Typography variant="h5">LED</Typography>
+            </ExpansionPanelSummary>
+            <ExpansionPanelDetails>
+                <FormControl>
+                    <Select onChange={this.handleChangeLedIndex} value={this.state.ledIndex}>
+                        {ledOptions}
+                    </Select><Button variant="contained" color="secondary" onClick={this.changeLedByIndex.bind(this)}>set LED by index</Button>
+                    <br /><br />
+                    <SketchPicker disableAlpha={true} presetColors={[]} color={this.state.background} onChangeComplete={this.handleChangeLedRgb} />
+                    <Button variant="contained" color="secondary" onClick={this.changeLedByRgb.bind(this)}>set LED by RGB</Button>
+                </FormControl>
+            </ExpansionPanelDetails>
+        </ExpansionPanel>
+        <ExpansionPanel expanded>
+            <ExpansionPanelSummary 
+                expandIcon={<ExpandMoreIcon />} aria-controls="panel2a-content" id="panel2a-header">  
+                <Typography variant="h5">Motor</Typography>
+            </ExpansionPanelSummary>   
+            <ExpansionPanelDetails>
+                <Grid container>
+                    <Grid item xs={4}>
+                        Port:
+                    </Grid>
+                    <Grid item xs={8}>
+                        <Select onChange={this.handleChangePort} value={this.state.portMotor}>{portOptions}</Select>
+                    </Grid>
+                    <Grid item xs={4}>Command type:</Grid>
+                    <Grid item xs={8}></Grid>
+                    <Grid item xs={4}>Speed:</Grid>
+                    <Grid item xs={8}><Slider defaultValue={50}
+                                    aria-labelledby="discrete-slider"
+                                    valueLabelDisplay="auto"
+                                    step={1}
+                                    marks
+                                    min={0}
+                                    max={100}/></Grid>
+                    <Grid item xs={4}>MaxPower:</Grid>
+                    <Grid item xs={8}><Slider defaultValue={100}
+                                    aria-labelledby="discrete-slider"
+                                    valueLabelDisplay="auto"
+                                    step={1}
+                                    marks
+                                    min={0}
+                                    max={100}
+                                    color="secondary"/>
+                    </Grid>
+                    <Grid item xs={12}><Button variant="contained" color="secondary" onClick={this.sendMotorCommand.bind(this)}>Start motor with speed</Button></Grid>
+
+                </Grid>
+            </ExpansionPanelDetails>
+        </ExpansionPanel>
+        </Container>
     );
   }
 }

diff --git a/src/Connector.js b/src/Connector.js
@@ -1,6 +1,7 @@
 import BLE from 'scratch-vm/src/io/ble';
 import Runtime from 'scratch-vm/src/engine/runtime';
 import BaseUtil from 'scratch-vm/src/util/base64-util';
+
 const extensionId = 'myExtension';
 
 class Connector {
@@ -17,7 +18,8 @@ class Connector {
             }],
             optionalServices: []
         };
-        this.ble = new BLE(this.runtime,extensionId, options, this._onConnect.bind(this), this.disconnect.bind(this));
+        this.ble = new BLE(this.runtime, extensionId, options, this._onConnect.bind(this), this.disconnect.bind(this));
+        console.log(this.ble._socket)
         this.runtime.addListener("PERIPHERAL_LIST_UPDATE",this.onDiscover.bind(this));
         console.log("Set up LEGO Connector")
     }
@@ -26,6 +28,7 @@ class Connector {
         for (var p in e) {
             p = e[p]
             if(this.ble && p.peripheralId) {
+                console.log("Discovered LEGO device and will attempt to connect...")
                 this.ble.connectPeripheral(p.peripheralId);
             }
             break;
@@ -39,6 +42,9 @@ class Connector {
                 this.characteristicUuid,
                 this.onBleMessage
             );
+            console.log("Connected to LEGO Device.")
+        } else {
+        console.log("Something went wrong while connecting")
         }
     }
     disconnect() {

diff --git a/src/Card.css → src/Message.css b/src/Card.css → src/Message.css
diff --git a/src/Message.js b/src/Message.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import './Message.css';
+import LBLE from './LBLE';
+import moment from 'moment';
+import uuidv1 from 'uuid/v1';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import { ComputerRounded , ArrowBackRounded, ArrowForwardRounded } from '@material-ui/icons';
+
+class Message extends React.Component {
+
+  render() {
+    var phrase = 'Message'
+    switch(this.props.payload[2]) {
+        case LBLE.MessageType.HUB_PROPERTIES:
+        case LBLE.MessageType.HUB_ALERTS:
+            phrase = <Typography>Hub</Typography>
+            break;
+        case LBLE.MessageType.HUB_ATTACHED_IO: {
+            let port = this.props.payload[3],
+                  event = this.props.payload[4],
+                  io = this.props.payload[5];
+            phrase = <Typography><b>{LBLE.IO.reverseMap[io]} {LBLE.IOEvent.reverseMap[event]}</b> on port <b>{LBLE.Port.reverseMap[port] ? LBLE.Port.reverseMap[port]:port}</b></Typography>;
+            break;
+        }
+        case LBLE.MessageType.PORT_INFORMATION:
+            phrase = <Typography>Port</Typography>
+            break;
+        case LBLE.MessageType.PORT_FEEDBACK:
+            let port = this.props.payload[3],
+            feedback = this.props.payload[4];
+            phrase = <Typography>Command <b>{feedback}</b> on port <b>{LBLE.Port.reverseMap[port] ? LBLE.Port.reverseMap[port]:port}</b></Typography>;
+            break;
+        case LBLE.MessageType.ERROR:
+            phrase = <Typography>Error</Typography>
+            break;
+        default:
+          console.log(this.props.payload)
+    }
+
+    const hexStrings = Array.prototype.map.call(this.props.payload, function(n,i) {
+        return '0x' + LBLE.toHexString(n) + ' '
+    })
+
+    return (
+      <Card key={uuidv1()} style={{marginBottom:12}}>
+        <CardContent>
+            <Grid container>
+                <Grid item xs={12}>
+                    <Typography variant="body2" gutterBottom>
+                        {phrase}
+                    </Typography>
+                </Grid>
+                <Grid item xs={10}>
+                    <Typography variant="caption">
+                        {hexStrings}
+                    </Typography>
+                </Grid>
+                <Grid item xs={2} alignContent={"flex-end"}>
+                    <Typography variant="caption" align={'right'} color={'disabled'} gutterBottom>
+                        {moment(this.props.timestamp).format('HH:mm:ss.SSS')}
+                    </Typography>
+                </Grid>
+                <Grid item xs={12}>
+                { this.props.fromDevice ? <ArrowForwardRounded color={"primary"} fontSize={"small"} />:<ArrowBackRounded color={"secondary"} fontSize={"small"} /> } <ComputerRounded fontSize={"small"} />
+                </Grid>
+            </Grid>
+        </CardContent>
+      </Card>
+    );
+  }
+}
+
+export default Message;
diff --git a/src/index.css b/src/index.css
@@ -11,11 +11,7 @@ body {
   height:100%;
 }
 
-html {
-  height:100%;
-}
-
-div#root {
+html, div#root {
   height:100%;
 }
 

diff --git a/src/logo.svg b/src/logo.svg