rebuild the GUI to be compatible with the plugin

rebuild the GUI to be compatible with the plugin

.gitignore

@@ -0,0 +1,37 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history

GUI-help.md

@@ -1,4 +1,4 @@
-# GUI help for signalk-raymarine-autopilot
+# GUI help for signalk-autopilot
 
-![GUI help](./GUI-help.png "GUI help")
+![GUI help](./public/img/GUI-help.png "GUI help")
 

README.md

@@ -1,9 +1,10 @@
 # signalk-autopilot
 
-<p align="center"><img src="./small-rayremote.png"></p>
+<p align="center"><img src="./small-GUI-remote.png"></p>
 
 `signalk-autopilot` is composed of 2 modules: 
-- [A graphical interface that emulates a Raymarine remote control](./GUI-help.md "GUI help")
+- [A graphical interface that emulates a Raymarine remote control](./GUI-help.md "GUI help")  
+To be able to acknowledge pilot related alarms through the GUI you need to install the `signalk-alarm-silencer` plugin.  
 - A back-end API described below.
 
 This current only supports Raymarine NMEA 2000 Autopilots, but I'll be adding support for other autopilots as needed.

css/rayremote.css → public/css/signalk-autopilot.css

@@ -16,12 +16,12 @@ html {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
-.bgRemoteBig {
+.bgRemoteMain {
   margin: auto;
   width: 238px;
   height: 612px;
   position: relative;
-  background-image: url("../img/bgRemoteBig.png");
+  background-image: url("../img/bgRemoteMain.png");
 }
 
 .btnCircleWithDotRed {
@@ -120,6 +120,19 @@ html {
   position: absolute;
 }
 
+#remoteMain {
+  visibility: visible;
+  display: block;
+}
+
+#remoteHelp {
+  visibility: hidden;
+  display: none;
+  width: 633px;
+  height: 693px;
+  cursor: pointer;
+}
+
 #logoSignalK {
   top: 54px;
   left: 44px;
@@ -185,6 +198,11 @@ html {
   left: 140px;
 }
 
+#typeValIcon {
+  left: 48px;
+  width: 34px;
+}
+
 #sendIcon {
   left: 120px;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAyklEQVQoz8XOIU4DARCF4Y+iIO02IeAxCERFRRWFW+DgAAjugK8gNXCFUlQNWHQNBDD1yGZTgmw3g9jNssmGSphR8+bN/I8/rc2aMnDkaf3RQAhX6ywtUyFMtX6z7IFDB5WpBvp0Xk5nvurQxEwIC89eLIQwk1Qtu2i7lYmiV260i00BmuuBpr5LF/qaoGeeQxPvwsrYsUb5u+HEnUx4y6FbxgUk9eDa0KO0UEa2f1J1TSzLRCEsTXTz5UYl/o5THfsyH17dS/1PfQMplUPMhfqpHwAAAABJRU5ErkJggg==);
@@ -222,7 +240,7 @@ html {
 #headingValue {
   top: 116px;
   left: 38px;
-  width: 155px;
+  width: 158px;
   height: 34px;
   overflow: hidden;
   position: absolute;
@@ -234,7 +252,7 @@ html {
 #pilotStatus {
   top: 150px;
   left: 38px;
-  width: 155px;
+  width: 158px;
   height: 34px;
   overflow: hidden;
   position: absolute;

index.html → public/index.html

@@ -4,15 +4,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="initial-scale=1">
     <script src="./js/scale2fit.js"></script>
-    <script src="./js/rayremote.js"></script>
-    <title>SignalK RayRemote</title>
-    <link href="./css/rayremote.css" rel="stylesheet">
+    <script src="./js/signalk-autopilot.js"></script>
+    <title>Signal K Autopilot</title>
+    <link href="./css/signalk-autopilot.css" rel="stylesheet">
     <script>
       (function(window) {
         function main() {
           const margin = 20;
           requestAnimationFrame(function fitToParentOnResize() {
-            fitToParent(document.getElementById('remoteBig'), margin);
+            fitToParent(document.getElementById('remoteMain'), margin);
           });
         }
         window.addEventListener("DOMContentLoaded", main);
@@ -22,31 +22,33 @@
       document.addEventListener("touchstart", function() {},false);
     </script>
   </head>
-  <body onload="startUpRayRemote()">
+  <body onload="startUpAutoPilot()">
   <div id="main">
-    <div class="bgRemoteBig" id="remoteBig">
+    <div id="remoteHelp"></div>
+    <div class="bgRemoteMain" id="remoteMain">
       <div id="logoSignalK"></div>
-      <div id="logoText">Ray Remote</div>
+      <div id="logoText">Auto Pilot</div>
       <div id="topBarIcon">
         <div class="icon18x18" id="notificationCounter">
           <div id="notificationCounterText">88</div>
         </div>
-        <div class="icon18x18" id="countDownCounter">8</div>
+        <div class="icon18x18" id="countDownCounter">5</div>
+        <div class="icon18x18" id="typeValIcon"></div>
         <div class="icon18x18" id="errorIcon"></div>
         <div class="icon18x18" id="receiveIcon"></div>
         <div class="icon18x18" id="sendIcon"></div>
         <div class="icon18x18" id="powerOffIcon"></div>
         <div class="icon18x18" id="powerOnIcon"></div>
       </div>
-      <div id="bottomBarIcon">&nbsp;Loading Ray Remote...</div>
-      <div id="headingValue"></div>
-      <div id="pilotStatus"></div>
+      <div id="bottomBarIcon">&nbsp;Loading Auto Pilot...</div>
+      <div id="headingValue" onClick="changePreferedDisplayMode();"></div>
+      <div id="pilotStatus" onClick="changePreferedDisplayMode();"></div>
       <div class="messageScreen" id="silenceScreen">
         <div id="silenceScreenText"></div>
         <div id="silenceScreenMute">&nbsp;Mute alarm press:</div>
         <div id="silenceScreenScroll">&nbsp;Next alarm press:</div>
       </div>
-      <div class="messageScreen" id="tackScreen"></div>
+      <div class="messageScreen" id="confirmScreen"></div>
       <div class="defaultKey btnLeftBlack" id="keyTackPort" onClick="buildAndSendCommand('tackToPort');" onTouchend="touchEnd(event)">
         <div class="defaultTextFontKey" id="keyTackPortText"></div>
       </div>
@@ -84,11 +86,9 @@
       <div class="defaultKey btnCircleWithDotRed" id="keyStandby" onClick="buildAndSendCommand('standby');" onTouchend="touchEnd(event)">
         <div class="defaultTextFontKey" id="keyStandbyText">STANDBY</div>
       </div>
-<!--
       <div class="defaultKey btnBottomSmallBlack" id="keyHelp" onClick="displayHelp();" onTouchend="touchEnd(event)">
         <div class="defaultTextFontKey" id="keyHelpText"></div>
       </div>
--->
       <div class="defaultKey btnBottomSmallBlack" id="keyPower" onClick="wsOpenClose();" onTouchend="touchEnd(event)">
         <div class="defaultTextFontKey" id="keyPowerText"></div>
       </div>

public/js/scale2fit.js

@@ -0,0 +1,27 @@
+(function(global) {
+  /*
+    Simple functions to scale content to fit it's parent
+    
+    Author: Liudmil Mitev
+    License: WTFPL
+    Demo: https://jsfiddle.net/oxzxyxqn/7/
+    
+  */
+  function scaleAmountNeededToFit(el, margin = 0) {
+    const parentSize = {
+      width: el.parentElement.clientWidth - margin * 2,
+      height: el.parentElement.clientHeight - margin * 2
+    };
+
+    return Math.min(parentSize.width / el.clientWidth,
+      parentSize.height / el.clientHeight);
+  }
+
+  function fitToParent(element, margin) {
+    const scale = scaleAmountNeededToFit(element, margin);
+    element.style.transformOrigin = "0 0";
+    element.style.transform = `translate(${margin}px, ${margin}px) scale(${scale})`;
+  }
+
+  global.fitToParent = fitToParent;
+})(this);