Web App Clean Up and Styling

USU-Robosub · Mar 22, 2017 · 37abf70 · 37abf70
1 parent 3a22c67
commit 37abf70
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 34 deletions.
diff --git a/BoneCentral/WebApplication/index.js b/BoneCentral/WebApplication/index.js
@@ -1,34 +1,31 @@
-var express = require('express');
-var bodyParser = require('body-parser');
-var fileSystem = require('fs');
-var path = require("path");
-var CppInterface = require('../Brain/CppInterface');
-var VisionInterface = require("../Brain/VisionInterface");
-var WebLogger = require('./WebLogger');
-var FileLogger = require('./FileLogger');
-var app = express();
-var GoThroughGate = require("../Brain/GoThroughGate");
-
-var peripheralsFactory = new CppInterface.Factory();
-var ThrustManager = require("../Brain/ThrustManager");
-var thrustManager = new ThrustManager(peripheralsFactory);
-
-var thrustController = peripheralsFactory.createThrustController();
-var headLights = peripheralsFactory.createHeadlights();
-var powerManager = peripheralsFactory.createPowerManager();
-var imuSensor = peripheralsFactory.createImuSensor();
-
-var fileLogger = new FileLogger("./test.log");
-var webLogger = new WebLogger(fileLogger);
-peripheralsFactory.createCppLogSource(webLogger);
+var express         	= require('express');
+var bodyParser      	= require('body-parser');
+var fileSystem      	= require('fs');
+var path        		= require("path");
+var WebLogger       	= require('./WebLogger');
+var FileLogger      	= require('./FileLogger');
+var CppInterface		= require('../Brain/CppInterface');
+var VisionInterface		= require("../Brain/VisionInterface");
+var GoThroughGate   	= require("../Brain/GoThroughGate");
+var ThrustManager   	= require("../Brain/ThrustManager");
+
+var fileLogger 		  	= new FileLogger("./test.log");
+var webLogger 			= new WebLogger(fileLogger);
+var peripheralsFactory	= new CppInterface.Factory();
+var visionFactoy 	  	= new VisionInterface.Factory();
+var thrustManager    	= new ThrustManager(peripheralsFactory);
+var goThroughGate 		= new GoThroughGate(visionFactoy, thrustManager, webLogger);
+
+var thrustController    = peripheralsFactory.createThrustController();
+var powerManager 		= peripheralsFactory.createPowerManager();
+var imuSensor 			= peripheralsFactory.createImuSensor();
+var headLights 			= peripheralsFactory.createHeadlights();
+var gateDetector 		= visionFactoy.createGateDetector(webLogger);
 
+peripheralsFactory.createCppLogSource(webLogger);
 CppInterface.Peripherals.initialize();
 
-var visionFactoy = new VisionInterface.Factory();
-var gateDetector = visionFactoy.createGateDetector(webLogger);
-
-var goThroughGate = new GoThroughGate(visionFactoy, thrustManager, webLogger);
-
+app             	= express();
 app.use('/', express.static('static'));
 app.use(bodyParser.json());
 
@@ -238,7 +235,6 @@ app.post('/runScript', function(req, res) {
 	})
 });
 
-
 app.listen(80, function () {
-  console.log('Example app listening on port 80!');
+  console.log('Web app listening on port 80!');
 });
diff --git a/BoneCentral/WebApplication/static/index.html b/BoneCentral/WebApplication/static/index.html
@@ -6,11 +6,12 @@
 		<title>USUb</title>
 		<script type="text/javascript" src="/riot/riot+compiler.min.js"></script>
 		<script type="text/javascript" src="/axios/axios.min.js"></script>
+		<link rel="stylesheet" type="text/css" href="style.css">
 
 		<script type="riot/tag">
 			<get-tag>
 				<div>
-					<button onclick={ toggle }>{ url }</button>
+					<button class="button button1" onclick={ toggle }>{ url }</button>
 					<p>Result:</p><textarea type="textarea" value="{ result }" style="min-width: 30em; min-height: 40em;">
 				</div>
 
@@ -44,7 +45,7 @@
 			</get-tag>
 			<single-get-tag>
 				<div>
-					<button onclick={ get }>{ url }</button>
+					<button class="button button1" onclick={ get }>{ url }</button>
 					<p>Result: { result }</p>
 				</div>
 
@@ -64,10 +65,10 @@
 			</single-get-tag>
 			<post-tag>
 				<div>
-					<button onclick={ post }>{ url }</button><button onclick={ toggleAbsolute }>Toggle Slider</button>
+					<button class="button button1" onclick={ post }>{ url }</button><button class="button button1" onclick={ toggleAbsolute }>Toggle Slider</button>
 					<div each={ argument, i in arguments }>
 						<span>{ argument }</span>
-						<input type={ inputType } onchange={ update } oninput={ update } id={ argument } min={ min } max={ max } step={ step }/>
+						<input type={ inputType } onchange={ update } oninput={ update } id={ argument } min={ min } max={ max } step={ step } value="0"/>
 						<span if={ !absolute }>{ self[argument].value }</span>
 					</div>
 					<p>Result: { result }</p>

diff --git a/BoneCentral/WebApplication/static/style.css b/BoneCentral/WebApplication/static/style.css
@@ -0,0 +1,25 @@
+.button {
+    background-color: #4CAF50; /* Green */
+    border: none;
+    color: white;
+    padding: 16px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    -webkit-transition-duration: 0.4s; /* Safari */
+    transition-duration: 0.4s;
+    cursor: pointer;
+}
+
+.button1 {
+    background-color: white; 
+    color: black; 
+    border: 2px solid #008CBA;
+}
+
+.button1:hover {
+    background-color: #008CBA;
+    color: white;
+}