Merge pull request #3 from tue-robotics/robot

Robot
tue-robotics · Apr 27, 2019 · 36cb53c · 36cb53c
2 parents 73b3577 + be4e9ff
commit 36cb53c
Show file tree

Hide file tree

Showing 9 changed files with 190 additions and 52 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,21 @@
+language: node_js
+node_js:
+- '10'
+install:
+- npm install
+script:
+- npm run build
+before_deploy:
+- npm run deploy-linux
+- tar -pzcvf hero-dashboard-linux-x64-$TRAVIS_TAG.tar.gz -C dist/hero-dashboard-linux-x64/ .
+deploy:
+  provider: releases
+  api_key:
+    secure: J49WAQALh8sa7Gc+t2xKzGGRfIzvUO7Hlh4PuJK4oK1zCMXIDEoku2rjcLNo1ni/ZR6e9pBmJ19Pe9sPihqAYmhC2Wagg6Ql/FTbc7nCqIBj8c7yow5AjTJgt+g+J5sxIlCIlhtP0H00LeOy2S/eV3ZuPeuvjv6mxo/I0uR7GvwU9o0ggcNYZM40g+OddR/f1DowuwODYdWHaJaRHicMG0FpR+AMH8boSsNDLRtHTzHJKRh1rBh7W2sGLQyfbp83QVXZiYBO0pZtxGssaoVCUpH6f2wakB7MXO8H5oITkXdfxAtv5Gb9y1wzeMl16zSFyvHY20PCod6nnGsqudtcQpZziZqQ531arcAnE/uyCVpkeKFWDlrAyAQgou/fEQENXGZs2EsDKh1/wfGE4oe5QWlzctLsn5i+myL2ZN+LqJ56ypzSqSh/8wqGMxUj+jTUce/PT//fOjfd8szyt92JN4rs6JQmDh4BZVVF1vDj/8zbmwb8erZLHWaWAD3MelmMtoou3Gie1l2XxCJuRvYtRvHgb7nef02/2Mkel42etK75SfBuOjRtKy/86I/A6qluRU788dHMTneldELHWu5Xj/IEsR+41m7j0P6HRlb5f6+jDF2S07B7xBjY6gmlXk+8CvuCd5aJeZAk81I13WTncjum/9TaMWg3yvhUwdIkaA8=
+  file_glob: true
+  file: hero-dashboard-linux-x64-*.tar.gz
+  skip_cleanup: true
+  on:
+    repo: tue-robotics/hero-dashboard
+    tags: true
+    all_branches: true
diff --git a/main.js b/main.js
@@ -8,8 +8,10 @@ let mainWindow
 function createWindow () {
   // Create the browser window.
   mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
+    width: 400,
+    height: 60,
+    resizable: false,
+    alwaysOnTop: true,
     webPreferences: {
       nodeIntegration: true
     }
@@ -19,7 +21,7 @@ function createWindow () {
   mainWindow.loadFile('build/index.html')
 
   // Open the DevTools.
-  mainWindow.webContents.openDevTools()
+  //mainWindow.webContents.openDevTools()
 
   // Emitted when the window is closed.
   mainWindow.on('closed', function () {

diff --git a/package.json b/package.json
@@ -1,25 +1,30 @@
 {
   "name": "hero-dashboard",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "main": "main.js",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.8.1",
     "bootstrap": "^4.3.1",
     "electron": "^4.1.4",
+    "eventemitter2": "^4.1.2",
     "react": "^16.8.6",
     "react-bootstrap": "^1.0.0-beta.6",
     "react-dom": "^16.8.6",
     "react-scripts": "0.9.5",
     "roslib": "^1.0.1"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "electron": "^4.1.4",
+    "electron-packager": "^13.0.0"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
-    "electron": "electron ."
+    "electron": "electron .",
+    "deploy-linux": "electron-packager . hero-dashboard --overwrite --asar=true --platform=linux --arch=x64 ---prune=true --out=dist"
   },
   "homepage": "."
 }
diff --git a/public/index.html b/public/index.html
@@ -13,7 +13,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>hero-dashboard</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.js b/src/App.js
@@ -1,31 +1,41 @@
 import React, { Component } from 'react';
-import Button from 'react-bootstrap/Button';
-import Battery from './Battery';
-import ROSLIB from 'roslib';
-import ros from './ros';
-import './App.css';
+
+import Container from 'react-bootstrap/Container'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
+
 import Indicator from './Indicator';
+import Battery from './Battery';
 
-var exampleTopic = new ROSLIB.Topic({
-  ros: ros,
-  name: '/com/endpoint/example',
-  messageType: 'std_msgs/String',
-});
+import './App.css';
+import AutoRos from './ros';
 
 class App extends Component {
-  onClick = (e) => {
-    var msg = new ROSLIB.Message({
-      data: 'some string',
-    });
-    exampleTopic.publish(msg);
+  constructor() {
+    super()
+    AutoRos.connect('ws://hero1.local:9090');
   }
+
   render() {
     return (
       <div className="App">
-        <Battery topic='/hero/battery_state'/>
-        <Battery topic='/hero/laptop_battery_state'/>
-        <Button onClick={this.onClick}>Publish</Button>
-        <Indicator />
+        <Container>
+          <Row>
+            <div className="box">
+              <Col>
+                <Indicator ros={AutoRos.ros} />
+              </Col>
+            </div>
+            <Col >
+              HERO
+              <Battery topic='battery_state/hero1' ros={AutoRos.ros} />
+            </Col>
+            <Col >
+              LAPTOP
+              <Battery topic='battery_state/hero2' ros={AutoRos.ros} />
+            </Col>
+          </Row>
+        </Container>
       </div>
     );
   }

diff --git a/src/Battery.js b/src/Battery.js
@@ -1,26 +1,23 @@
-import React, { Component } from 'react';
 import ROSLIB from 'roslib';
-import ProgressBar from 'react-bootstrap/ProgressBar';
-import './App.css';
-
-var ros = new ROSLIB.Ros({
-  url: 'ws://localhost:9090',
-});
 
+import React, { Component } from 'react';
+import ProgressBar from 'react-bootstrap/ProgressBar';
 
+import './App.css';
 
 class Battery extends Component {
   constructor(props) {
     super(props);
     this.topic = new ROSLIB.Topic({
-      ros: ros,
+      ros: props.ros,
       name: props.topic,
-      messageType: 'std_msgs/String',
+      messageType: 'sensor_msgs/BatteryState',
     });
   }
 
   state = {
-    data: '',
+    percentage: 50,
+    type: 'info'
   }
   componentDidMount() {
     this.topic.subscribe(this.handleMessage);
@@ -29,15 +26,24 @@ class Battery extends Component {
     this.topic.unsubscribe(this.handleMessage);
   }
   handleMessage = (msg) => {
+    var type;
+    var percentage = Math.round(msg.percentage * 100)
+    if (percentage > 40) {
+      type = 'success';
+    } else if (percentage > 20) {
+      type = 'warning';
+    } else {
+      type = 'danger';
+    }
     this.setState({
-      data: msg.data,
+      percentage: percentage,
+      type: type
     })
   }
   render() {
     return (
       <div className="Battery">
-        Topic: {this.props.topic}, data: {this.state.data}
-        <ProgressBar now={this.state.data} />
+        <ProgressBar variant={this.state.type} now={this.state.percentage} label={`${this.state.percentage}%`}/>
       </div>
     );
   }

diff --git a/src/Indicator.js b/src/Indicator.js
@@ -1,24 +1,22 @@
 import ROSLIB from 'roslib';
-import ros from './ros';
+
 import React, { Component } from 'react';
 import Button from 'react-bootstrap/Button';
 
 import './App.css';
 
-console.log(ros);
-
 class Indicator extends Component {
     constructor(props) {
         super(props);
         this.topic = new ROSLIB.Topic({
-            ros: ros,
-            name: '/hero/runstop_button',
+            ros: props.ros,
+            name: 'runstop_button',
             messageType: 'std_msgs/Bool',
         });
     }
 
     state = {
-        data: false,
+        data: true,
     }
     componentDidMount() {
         this.topic.subscribe(this.handleMessage);
@@ -32,15 +30,17 @@ class Indicator extends Component {
         })
     }
     render() {
-        let value = <Button variant='danger'><i className="fas fa-power-off"></i></Button>;
+        var type;
         if (this.state.data) {
-            value = <Button variant='success'><i className="fas fa-power-off"></i></Button>;
+            type = 'danger';
+        } else {
+            type = 'success';
         }
 
         return (
             <div className="Indicator">
-                Indicator: {value}
-      </div>
+                <Button variant={type} disabled><i className="fas fa-power-off"></i></Button>
+            </div>
         );
     }
 }

diff --git a/src/index.css b/src/index.css
@@ -3,3 +3,24 @@ body {
   padding: 0;
   font-family: sans-serif;
 }
+
+.row{
+  align-items: center;
+  justify-content: center;
+}
+
+.col div {
+  width: 100px;
+  height: 25px;
+}
+
+.box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.box div {
+  width: 100px;
+  height: 30px;
+}
diff --git a/src/ros.js b/src/ros.js
@@ -1,5 +1,78 @@
+import {hostname} from 'os';
+import {EventEmitter2} from 'eventemitter2';
 import ROSLIB from 'roslib';
 
-export default new ROSLIB.Ros({
-  url: 'ws://localhost:9090',
-});
+// Private variables
+const host = hostname() || 'localhost';
+const defaultUrl = `ws://${host}:9090`;
+
+// reconnect timeout in ms
+const RECONNECT_TIMEOUT = 5000;
+
+class AutoRos extends EventEmitter2 {
+
+  constructor() {
+    super();
+
+    this.ros = new ROSLIB.Ros({
+      encoding: 'ascii'
+    });
+
+    this.ros.on('connection', this.onConnection.bind(this));
+    this.ros.on('close', this.onClose.bind(this));
+    this.ros.on('error', this.onError.bind(this));
+
+    // reconnect behavior
+    this.on('status', function (status) {
+      switch (status) {
+        case 'closed':
+          setTimeout(this.connect.bind(this), RECONNECT_TIMEOUT);
+          break;
+        default:
+          break;
+      }
+    });
+  }
+
+  get status() {
+    return this._status;
+  }
+
+  set status(value) {
+    this._status = value;
+    this.emit('status', value);
+  }
+
+  /**
+   * Connect to rosbridge
+   *
+   * If an url is provided, it will connect to that one. Else it will
+   * use the previous url. Uses a url based on the hostname if no urls
+   * are provided.
+   */
+  connect(url) {
+    this.url = url || this.url || defaultUrl;
+
+    console.log(`connecting to ${this.url}`);
+    this.ros.connect(this.url);
+    this.status = 'connecting';
+  }
+
+  // ros status event handling
+  onConnection() {
+    console.log('connection');
+    this.status = 'connected';
+  }
+
+  onClose() {
+    console.log('connection closed');
+    this.status = 'closed';
+  }
+
+  onError() {
+    // console.log('connection error');
+    this.status = 'error';
+  }
+}
+
+export default new AutoRos();