visual notify for open/close serial port error

css/style.css

@@ -190,6 +190,11 @@ a:hover {
     border-top: 1px solid #7d7d79;
     background-color: #bfbeb5;
 }
+    #status-bar .notify {
+        float: right;
+    }
+        #status-bar .notify span {
+        }
 
 /* tab specific sections */
 .tab-initial_setup {

js/main.js

@@ -83,3 +83,11 @@ $(document).ready(function() {
     
     tab_initialize_default();
 });
+
+function notify(message, color) {
+    $('span.notify').html('<span style="color: ' + color + '">' + message + '</span>');+
+    $('span.notify span').fadeOut(5000, function() {
+        $(this).remove();
+    });
+    
+}

js/serial_backend.js

@@ -280,6 +280,7 @@ function onOpen(openInfo) {
         }, connection_delay * 1000);
     } else {
         console.log('Failed to open serial port');
+        notify('Failed to open serial port', 'red');
         
         $('div#port-picker a.connect').text('Connect');
         $('div#port-picker a.connect').removeClass('active'); 
@@ -302,6 +303,7 @@ function onClosed(result) {
     } else { // Something went wrong
         if (connectionId > 0) {
             console.log('There was an error that happened during "connection-close" procedure.');
+            notify('Failed to close serial port', 'red');
         }
     } 
 }

main.html

@@ -105,6 +105,7 @@
                 Port utilization: <span class="port-usage">0%</span> | 
                 Firmware Version: <span class="software-version">0.00</span> |
                 Cycle Time: <span class="cycle-time">0</span>
+                <span class="notify"></span>
             </div>
         </div>
     </body>