SafaTinaztepe / Dashboard

Humphry Dashboard

Introduction

Backend: Node-Express and Websockets

Frontend: React

This is the repository for the Humphry Engine Dashboard. This tool is a central application to monitor the sensors and motor for the Humphry engine prototype. The dashboard runs a local server to which arduino controllers post incremental updates from the engine. If necessary, these updates can also be saved to a Mysql database. The user-facing client must be run and viewed locally as well.

Installation and dependencies

You should already have git and npm

• Clone the repository
• npm install

Starting backend

Right now the backend supports a REST api and websocket connection. The silly part is that the websocket implementation is built on right top of the REST implementation. Incoming ws messages just send a post request. You can attach either of these to a service file to run them on device.

• Running REST server required
  • node server/server.js
  • once the server is running, send requests to http://:5000
• Running websocket listener optional
  • requires REST server to be running as well
  • node server/sockets.js
  • once socket listener is running, send websocket messages to ws://:5001

Start Client Frontend

• navigate to dashboard-gui and run npm start
  • npm run build for production
• to view the GUI, point your browser http://:4350

API Reference

Component	Endpoint	Update Parameters
Controller	/api/data/controller	Name Type Values Description knob_sb Signed integer -1024...1024 Percentage of the starboard throttle knob_bb Signed integer -1024...1024 Percentage of the backboard throttle knob_sb_fw Boolean {0,1} Forward state of starboard motor knob_sb_bw Boolean {0,1} Forward state of starboard motor knob_bb_fw Boolean {0,1} Forward state of starboard motor knob_bb_bw Boolean {0,1} Forward state of starboard motor
Backboard motor	/api/data/motorbb	Name Type Values Description rpm Unsigned integer Rotations per minute of backboard motor motor_temp Unsigned integer Temperature of the backboard motor coolant_temp Unsigned integer Temperature of the backboard coolant elock Boolean {0,1} On/Off status of elock pump Boolean {0,1} On/Off status of pump
Starboard motor	/api/data/motorbb	Name Type Values Description rpm Unsigned integer Rotations per minute of backboard motor motor_temp Unsigned integer Temperature of the backboard motor coolant_temp Unsigned integer Temperature of the backboard coolant elock Boolean {0,1} On/Off status of elock pump Boolean {0,1} On/Off status of pump
Power Distribution Unit	/api/data/pdu	Name Type Values Description current_sb Unsigned integer Current diverted to the starboard motor (mA) current_bb Unsigned integer Current diverted to the backboard motor (mA) v12_bus Boolean {0,1} On/Off Status of the 12 volt databus v12_battery Boolean {0,1} On/Off status of the 12 volt battery v48_bus Boolean {0,1} On/Off status of the 48 volt databus v48_dcdc Boolean {0,1} On/Off status of 48 volt DC-DC converter
Switchboard	/api/data/switch	Name Type Values Description battery Boolean {0,1} On/Off switch fuel_cell Boolean {0,1} On/Off switch charger Boolean {0,1} On/Off switch sw4 Boolean {0,1} On/Off switch placeholder sw5 Boolean {0,1} On/Off switch placeholder sw6 Boolean {0,1} On/Off switch placeholder sw7 Boolean {0,1} On/Off switch placeholder sw8 Boolean {0,1} On/Off switch placeholder

Example Call:

Update controller:

• POST http://192.168.178.152:5000/api/data/controller
• Headers: {"Content-Type": "application/json"}
• Body: {"knob_sb":400,"knob_bb":549, "knob_sb_fw":0, "knob_sb_bw":1, "knob_bb_fw":0, "knob_bb_bw":1}

Creating new component

To create a new component

• Copy one of the existing component JS file in src/components/

  • cp src/components/Controller.js src/components/<NewComponent>.js

• And its accompanying CSS file in src/stylesheets/

  • cp src/stylesheets/Controller.css src/stylesheets/<NewComponent>.css

• Edit the imports in the heading of <NewComponent>.js to link the appropriate stylesheet

  • import "../stylesheets/<NewComponent>.js

• For each new update parameter, add <table> rows and data following the structure of the old component, but with the new parameters

• Import the new component in App.js

  • import <NewComponent> from "./components/<NewComponent>";

• Instantiate the new component as an HTML element with the update parameters as its arguments <NewComponent>

  • For further information on how to update the new component in React, read the React documentation or refer here.

• In the componentDidMount function in App.js, add a new socket listener like the others

  • socket.on("<NewComponent>", data => {
    data = JSON.parse(data);
    this.setState({
      updateParameter1: data.updateParameter1,
      updateParameter2: data.updateParameter2
      });
    });

Pushing changes

Changes to the UI are not a problem, React will automatically render changes or throw an error page.

Changes to the server (server/server.js) file, however, do require you to restart the server.

Restarting the server

---

In this order and from any directory, type the commands:

• sudo systemctl disable humphry-dashboard-server
• sudo systemctl disable humphry-dashboard-websockets
• sudo systemctl daemon-reload
• sudo systemctl enable humphry-dashboard-server
• sudo systemctl enable humphry-dashboard-websockets
  • enabling the service should start the server again
  • if not, then run sudo systemctl start humphry-dashboard-server
  • sudo systemctl start humphry-dashboard-websockets