Updated style to make future work easier

The style updates will help with making the app easier to potentially embed it into other sites

Author: ajbozarth

static/css/webapp.css

@@ -53,15 +53,15 @@ body {
   border-color: #2D8B89;
 }
 
-#image_display {
+#image-display {
   position: relative;
 }
 
-#image_display img {
+#image-display img {
   max-width: 100%;
 }
 
-#img_canvas {
+#image-canvas {
   position: absolute;
   left: 0;
   top: 0;

static/index.html

@@ -49,14 +49,14 @@ <h1>MAX Object Detector</h1>
 
         <div class="col-md-5">
 
-          <div id="file-upload" class="panel panel-default">
+          <div id="image-upload" class="panel panel-default">
 
               <div class="panel-heading">
                 <div class="panel-title">Upload A Image</div>
               </div>
 
               <div class="panel-body">
-                <form id="img-upload" enctype="multipart/form-data">
+                <form id="file-upload" enctype="multipart/form-data">
                   <div class="form-group">
                     <input id="file-input" type="file" name="file" accept=".png, .jpg, .jpeg, .gif" />
                   </div>
@@ -76,7 +76,7 @@ <h1>MAX Object Detector</h1>
 
       <div class="col-md-12">
 
-        <div id="image_display">
+        <div id="image-display">
 
         </div>
 

static/js/webapp.js

@@ -20,14 +20,14 @@
 'use strict';
 
 function render_boxes(boxes) {
-  var img = $('#user_img');
+  var img = $('#user-image');
   var width = img.width();
   var height = img.height();
-  var can_html = '<canvas id="img_canvas" width="'
+  var can_html = '<canvas id="image-canvas" width="'
     + width + '" height="' + height + '"></canvas>';
-  $('#image_display').append(can_html);
+  $('#image-display').append(can_html);
 
-  var ctx = $('#img_canvas')[0].getContext('2d');
+  var ctx = $('#image-canvas')[0].getContext('2d');
   var can = ctx.canvas;
   can.width = width;
   can.height = height;
@@ -66,7 +66,7 @@ function render_boxes(boxes) {
 
 $(function() {
   // Image upload form submit functionality
-  $('#img-upload').on('submit', function(event){
+  $('#file-upload').on('submit', function(event){
     // Stop form from submitting normally
     event.preventDefault();
 
@@ -79,12 +79,13 @@ $(function() {
     var reader = new FileReader();
     reader.onload = function(event) {
       var file_url = event.target.result;
-      $('#image_display').html('<img id="user_img" src="' + file_url + '" />');
+      var img_html = '<img id="user-image" src="' + file_url + '" />';
+      $('#image-display').html(img_html);
     };
     reader.readAsDataURL(file);
 
     if ($('#file-input').val() !== '') {
-      $('#file-submit').text('Working...');
+      $('#file-submit').text('Detecting...');
 
       // Perform file upload
       $.ajax({