Added back button to printer statistics page

app.js

@@ -24,6 +24,11 @@ const port = process.env.PORT || 5000;
 var portStatus = "";
 var timeElapsed = "";
 var hotendTemperature = "";
+var currentPosition = {
+ X: "",
+ Y: "",
+ Z: ""
+};
 
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true }));
@@ -37,9 +42,7 @@ app.get('/stats/timeElapsed', (req, res) => {
  if(err){
  console.log('ERR: ' + err);
  }
- // console.log('result:' + result)
  });
- // TODO: GET TIME ELAPSED AND SEND
  res.send({ express: timeElapsed });
 });
 
@@ -48,12 +51,19 @@ app.get('/stats/hotendTemperature', (req, res) => {
  if(err){
  console.log('ERR: ' + err);
  }
- //console.log('result:' + result)
-
  });
  res.send({ express: hotendTemperature });
 });
 
+app.get('/stats/currentPosition', (req, res) => {
+ myPort.write(Buffer.from("M114\n"),function(err,result){
+ if(err){
+ console.log('ERR: ' + err);
+ }
+ });
+ res.send({ express: currentPosition });
+});
+
 /*
 app.post('/api/world', (req, res) => {
  console.log(req.body);
@@ -89,9 +99,17 @@ function onData(data) {
  dataString = dataString.replace(/\s/g, "");
  console.log("start data:" + dataString + "close\n");
 
- timeElapsed = dataString.substring(dataString.indexOf("Printtime:"), dataString.indexOf("sok"));
- hotendTemperature = dataString.substring(dataString.indexOf("okokT:"), dataString.indexOf("/0.00"));
-
+ if (dataString.indexOf("Printtime:") >= 0) { //Print time
+ timeElapsed = dataString.substring(dataString.indexOf("Printtime:") + 10, dataString.length);
+ }
+ else if (dataString.indexOf("okT:") >= 0) { //Hotend temperature
+ hotendTemperature = dataString.substring(dataString.indexOf("okT:") + 4, dataString.indexOf("/0.00"));
+ }
+ else if (dataString.indexOf("CountX:") >= 0) { //X,Y,Z position
+ currentPosition.X = dataString.substring(dataString.indexOf("X:") + 2, dataString.indexOf("Y:"));
+ currentPosition.Y = dataString.substring(dataString.indexOf("Y:") + 2, dataString.indexOf("Z:"));
+ currentPosition.Z = dataString.substring(dataString.indexOf("Z:") + 2, dataString.indexOf("E:"));
+ }
 }
 
 

client/src/App.css

@@ -36,7 +36,9 @@
  overflow: hidden;
  position: relative;
  margin: auto;
- bottom: 15px;
+ bottom: 45px;
+ float:start;
+ clear: left;
 }
 
 .Header-text {
@@ -65,6 +67,7 @@
  border-radius: 3px;
  position: relative;
  top: 10vh;
+ font-size: 2.8vh;
  cursor: pointer;
 }
 
@@ -104,6 +107,23 @@
  font-size: 4.5vh;
  position: relative;
  float: left;
+ clear: left;
  left: 7vw;
  bottom: 20px;
 }
+
+.Back-button {
+ font-family: 'Montserrat', sans-serif;
+ font-weight: 700;
+ color: #F8F8F8;
+ font-size: 2.6vh;
+ background-color: #0eba48;
+ display:inline-block;
+ padding: 15px 30px 15px 30px;
+ border-radius: 3px;
+ position: relative;
+ top: 3vw;
+ left: 3vw;
+ float: left;
+ cursor: pointer;
+}

client/src/App.js

@@ -8,6 +8,7 @@ class App extends Component {
  portStatusResponse: '',
  timeElapsedResponse: '',
  hotendTemperatureResponse: '',
+ currentPositionResponse: ''
  };
 
  componentDidMount() {
@@ -23,6 +24,9 @@ class App extends Component {
  this.getHotendTemperature()
  .then(res => this.setState({ hotendTemperatureResponse: res.express }))
  .catch(err => console.log(err));
+ this.getCurrentPosition()
+ .then(res => this.setState({ currentPositionResponse: res.express }))
+ .catch(err => console.log(err));
  }, 1000);
  } catch(e) {
  console.log(e);
@@ -54,6 +58,14 @@ class App extends Component {
  return body;
  };
 
+ getCurrentPosition = async () => {
+ const response = await fetch('/stats/currentPosition');
+ const body = await response.json();
+ if (response.status !== 200) throw Error(body.message);
+
+ return body;
+ };
+
  /*handleSubmit = async e => {
  e.preventDefault();
  const response = await fetch('/api/world', {
@@ -77,7 +89,13 @@ class App extends Component {
  Label1Name = {"Time Elapsed"}
  Label1Value = {this.state.timeElapsedResponse}
  Label2Name = {"Hotend Temperature"}
- Label2Value = {this.state.hotendTemperatureResponse + "°"}>
+ Label2Value = {this.state.hotendTemperatureResponse + "°"}
+ Label3Name = {"X Position"}
+ Label3Value = {this.state.currentPositionResponse.X}
+ Label4Name = {"Y Position"}
+ Label4Value = {this.state.currentPositionResponse.Y}
+ Label5Name = {"Z Position"}
+ Label5Value = {this.state.currentPositionResponse.Z}>
  <PrinterStats />
  </Home>
  { /*<form onSubmit={this.handleSubmit}>

client/src/BackButton.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+
+class BackButton extends Component {
+ render() {
+ const { clickEvent } = this.props;
+ return (
+ <div onClick = {clickEvent} className="Back-button">&laquo; BACK</div>
+ )
+ }
+}
+
+export default BackButton

client/src/Home.js

@@ -3,21 +3,33 @@ import LogoHeader from "./LogoHeader";
 import LargeButton from "./LargeButton";
 import PortStatus from "./PortStatus";
 import PrinterStats from "./PrinterStats";
-
+import BackButton from "./BackButton";
 
 class Home extends Component {
  constructor(props){
  super(props);
 
  this.state = {
- printerStatsActive: false,
+ homeActive: true,
+ printerStatsActive: false
  };
 
+ this.LoadHome = this.LoadHome.bind(this);
  this.LoadPrinterStats = this.LoadPrinterStats.bind(this);
  }
 
+ LoadHome() {
+ this.setState({
+ homeActive: true,
+ printerStatsActive: false
+ });
+ }
+
  LoadPrinterStats() {
- this.setState({ printerStatsActive: true });
+ this.setState({
+ homeActive: false,
+ printerStatsActive: true
+ });
  }
 
  render() {
@@ -28,28 +40,43 @@ class Home extends Component {
  const { Label1Value } = this.props;
  const { Label2Name } = this.props;
  const { Label2Value } = this.props;
- if (this.state.printerStatsActive) {
+ const { Label3Name } = this.props;
+ const { Label3Value } = this.props;
+ const { Label4Name } = this.props;
+ const { Label4Value } = this.props;
+ const { Label5Name } = this.props;
+ const { Label5Value } = this.props;
+ if (this.state.printerStatsActive && !this.state.homeActive) {
  return (
  <div className="Printer-status-container">
+ <BackButton clickEvent = { this.LoadHome } />
  <LogoHeader headerClass = {"Printer-stats-header"} />
  <PrinterStats Label1Name = { Label1Name }
  Label1Value = { Label1Value }
  Label2Name = { Label2Name }
- Label2Value = { Label2Value }/>
+ Label2Value = { Label2Value }
+ Label3Name = { Label3Name }
+ Label3Value = { Label3Value }
+ Label4Name = { Label4Name }
+ Label4Value = { Label4Value }
+ Label5Name = { Label5Name }
+ Label5Value = { Label5Value }/>
+ <PortStatus portStatus = { portStatus }/>
+ </div>
+ )
+ }
+ else if (this.state.homeActive && !this.state.printerStatsActive) {
+ return (
+ <div className="Home-container">
+ <LogoHeader headerClass = {"Home-header"} />
+ <LargeButton buttonText = { button1Text }
+ clickEvent = { this.LoadPrinterStats }/>
+ <br/>
+ <LargeButton buttonText = { button2Text }/>
  <PortStatus portStatus = { portStatus }/>
  </div>
  )
  }
- return (
- <div className="Home-container">
- <LogoHeader headerClass = {"Home-header"} />
- <LargeButton buttonText = { button1Text }
- clickEvent = { this.LoadPrinterStats }/>
- <br/>
- <LargeButton buttonText = { button2Text }/>
- <PortStatus portStatus = { portStatus }/>
- </div>
- )
  }
 }
 

client/src/PrinterStats.js

@@ -7,10 +7,19 @@ class PrinterStats extends Component {
  const { Label1Value } = this.props;
  const { Label2Name } = this.props;
  const { Label2Value } = this.props;
+ const { Label3Name } = this.props;
+ const { Label3Value } = this.props;
+ const { Label4Name } = this.props;
+ const { Label4Value } = this.props;
+ const { Label5Name } = this.props;
+ const { Label5Value } = this.props;
  return (
  <div className="Printer-stats-container">
  <PrinterStatsLabel LabelName={Label1Name} LabelValue={Label1Value}/>
  <PrinterStatsLabel LabelName={Label2Name} LabelValue={Label2Value}/>
+ <PrinterStatsLabel LabelName={Label3Name} LabelValue={Label3Value}/>
+ <PrinterStatsLabel LabelName={Label4Name} LabelValue={Label4Value}/>
+ <PrinterStatsLabel LabelName={Label5Name} LabelValue={Label5Value}/>
  </div>
  )
  }