feature:Add magnetic target heading as reference heading (#28)

SignalK · Aug 21, 2023 · b1038f5 · b1038f5
1 parent a9c492b
commit b1038f5
Show file tree

Hide file tree

Showing 6 changed files with 239 additions and 195 deletions.
diff --git a/package.json b/package.json
@@ -23,5 +23,9 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/SignalK/signalk-autopilot"
+  },
+  "signalk": {
+    "appIcon": "./appIcon-72x72.png",
+    "displayName": "Signal K autopilot"
   }
-}
+}
diff --git a/public/appIcon-72x72.png b/public/appIcon-72x72.png
diff --git a/public/css/signalk-autopilot.css b/public/css/signalk-autopilot.css
@@ -2,22 +2,23 @@ body,
 html {
   margin: 0;
   padding: 0;
+  overflow: hidden;
 }
 
 #main {
-  margin: auto;
+  margin: 0px;
   width: 100vw;
   height: 100vh;
   background-repeat: no-repeat;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 .bgRemoteMain {
-  margin: auto;
+  margin: 0px;
   width: 238px;
   height: 612px;
   position: relative;
@@ -29,6 +30,7 @@ html {
   height: 70px;
   background-image: url("../img/btnCircleWithDotRed.png");
 }
+
 .btnCircleWithDotRed:active {
   background-position-x: -70px;
 }
@@ -38,6 +40,7 @@ html {
   height: 70px;
   background-image: url("../img/btnCircleRed.png");
 }
+
 .btnCircleRed:active {
   background-position-x: -70px;
 }
@@ -48,6 +51,7 @@ html {
   background-image: url("../img/btnLeftBlack.png");
   background-size: 100px;
 }
+
 .btnLeftBlack:active {
   background-position-x: -50px;
 }
@@ -58,6 +62,7 @@ html {
   background-image: url("../img/btnRightBlack.png");
   background-size: 100px;
 }
+
 .btnRightBlack:active {
   background-position-x: -50px;
 }
@@ -70,6 +75,7 @@ html {
   background-image: url("../img/btnTopBlack.png");
   background-size: 55px;
 }
+
 .btnTopBlack:active {
   background-position-y: -50px;
 }
@@ -82,6 +88,7 @@ html {
   background-image: url("../img/btnBottomBlack.png");
   background-size: 55px;
 }
+
 .btnBottomBlack:active {
   background-position-y: -50px;
 }
@@ -92,6 +99,7 @@ html {
   background-image: url("../img/btnTopSmallBlack.png");
   background-size: 104px;
 }
+
 .btnTopSmallBlack:active {
   background-position-x: -52px;
 }
@@ -102,6 +110,7 @@ html {
   background-image: url("../img/btnBottomSmallBlack.png");
   background-size: 104px;
 }
+
 .btnBottomSmallBlack:active {
   background-position-x: -52px;
 }
@@ -121,8 +130,8 @@ html {
 }
 
 #remoteMain {
-  visibility: visible;
-  display: block;
+  visibility: hidden;
+  display: none;
 }
 
 #remoteHelp {
@@ -206,16 +215,16 @@ html {
 #sendIcon {
   left: 120px;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAyklEQVQoz8XOIU4DARCF4Y+iIO02IeAxCERFRRWFW+DgAAjugK8gNXCFUlQNWHQNBDD1yGZTgmw3g9jNssmGSphR8+bN/I8/rc2aMnDkaf3RQAhX6ywtUyFMtX6z7IFDB5WpBvp0Xk5nvurQxEwIC89eLIQwk1Qtu2i7lYmiV260i00BmuuBpr5LF/qaoGeeQxPvwsrYsUb5u+HEnUx4y6FbxgUk9eDa0KO0UEa2f1J1TSzLRCEsTXTz5UYl/o5THfsyH17dS/1PfQMplUPMhfqpHwAAAABJRU5ErkJggg==);
-  transform:scaleY(-1);
+  transform: scaleY(-1);
 }
 
 #receiveIcon {
-  left: 100px;
+  left: 102px;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAyklEQVQoz8XOIU4DARCF4Y+iIO02IeAxCERFRRWFW+DgAAjugK8gNXCFUlQNWHQNBDD1yGZTgmw3g9jNssmGSphR8+bN/I8/rc2aMnDkaf3RQAhX6ywtUyFMtX6z7IFDB5WpBvp0Xk5nvurQxEwIC89eLIQwk1Qtu2i7lYmiV260i00BmuuBpr5LF/qaoGeeQxPvwsrYsUb5u+HEnUx4y6FbxgUk9eDa0KO0UEa2f1J1TSzLRCEsTXTz5UYl/o5THfsyH17dS/1PfQMplUPMhfqpHwAAAABJRU5ErkJggg==);
 }
 
 #errorIcon {
-  left: 80px;
+  left: 85px;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAAwElEQVR4AZXRtXUDMBQAwOvDjaEMwwBhWiE0RKiy9wiWYc4W3iSoGcKRS71n9qmU9FH7+izbtWVZr5pyHsR0PMiqMOjdp2MDYMCxT++GSfKCYILEhOBVHoAbf+YA+/YBc/5cA/T4dwagpATg1L8eYFU0XfPRlGgDKIi6az7qFhWAoqgTlTXRKSoC61I6gJRuPRV+XjPSWSqcK/9mVD6a8e+qcphjSMYEQZZkyJvKtTwbUiHvsdmCgV7Ldu1a1qtdZTafSCFQvo25AAAAAElFTkSuQmCC);
 }
 
@@ -282,7 +291,7 @@ html {
   font-weight: bold;
 }
 
-#silenceScreenScroll{
+#silenceScreenScroll {
   position: relative;
   top: 0px;
   left: 0px;
@@ -315,6 +324,7 @@ html {
   top: 296px;
   right: 20px;
 }
+
 #keyPlusOneText {
   top: 16px;
 }
@@ -323,6 +333,7 @@ html {
   top: 296px;
   left: 20px;
 }
+
 #keyMinusOneText {
   top: 16px;
 }
@@ -331,6 +342,7 @@ html {
   top: 296px;
   right: 68px;
 }
+
 #keyPlusTenText {
   top: 16px;
 }
@@ -339,6 +351,7 @@ html {
   top: 296px;
   left: 68px;
 }
+
 #keyMinusTenText {
   top: 16px;
 }
@@ -347,6 +360,7 @@ html {
   top: 362px;
   left: 28px;
 }
+
 #keyMuteText {
   top: 10px;
   width: 20px;
@@ -360,6 +374,7 @@ html {
   top: 362px;
   right: 28px;
 }
+
 #keyScrollText {
   top: 10px;
   width: 20px;
@@ -373,6 +388,7 @@ html {
   top: 500px;
   right: 28px;
 }
+
 #keyPowerText {
   top: 10px;
   width: 20px;
@@ -386,6 +402,7 @@ html {
   top: 486px;
   left: 84px;
 }
+
 #keyStandbyText {
   top: 28px;
   font-size: 10px;
@@ -395,6 +412,7 @@ html {
   top: 418px;
   left: 26px;
 }
+
 #keyAutoText {
   top: 28px;
   font-size: 10px;
@@ -404,6 +422,7 @@ html {
   top: 356px;
   left: 84px;
 }
+
 #keyWindText {
   top: 28px;
   font-size: 10px;
@@ -413,6 +432,7 @@ html {
   top: 418px;
   right: 26px;
 }
+
 #keyTrackText {
   top: 28px;
   font-size: 10px;
@@ -428,6 +448,7 @@ html {
   left: 38px;
   z-index: 1;
 }
+
 #keyTackPortText {
   top: 16px;
   width: 25px;
@@ -441,6 +462,7 @@ html {
   right: 38px;
   z-index: 1;
 }
+
 #keyTackStarbordText {
   top: 16px;
   width: 25px;
@@ -453,11 +475,12 @@ html {
   top: 500px;
   left: 28px;
 }
+
 #keyHelpText {
   top: 10px;
   width: 20px;
   height: 20px;
   left: 16px;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAA+0lEQVR4AZSOMQhBYRSF7QkUmJRSeiWDwYPBaBa70WBjtY8WM2Fgt5ed7GXkSVklC5/bfa8/ZHFP/fc7p9Pf9f09hKjRFdUI/S4kWPA+S+LflQxH7oxIq0sL3SXJfP7iiCyhKB1RVMjSLGlKzHlQlZ3jDCBvTlxF0rlXIciTidKGIzHRga36MU+CbqkB2EoD6rqHXHXbQMst9YDA24Up9qyUAkDPDfuA31QsLuwIK/uBvhs3AduUptyIeFwEml+Hq8tTMDwxh4uZiSl7vGbtUUnSmaLaOA4nsspt2rqzOKLXxJHDXBlrtKjA5BGmrUCPYNxJJRcIQUmFVAAAZtDpcTPc14kAAAAASUVORK5CYII=);
   background-size: 20px;
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -1,28 +1,17 @@
-<html>
-  <head>
-    <meta charset="utf-8">
-    <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/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('remoteMain'), margin);
-          });
-        }
-        window.addEventListener("DOMContentLoaded", main);
-        window.addEventListener("resize", main);
-      })(this);
-      // iOS CSS :active
-      document.addEventListener("touchstart", function() {},false);
-    </script>
-  </head>
-  <body onload="startUpAutoPilot()">
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="./css/signalk-autopilot.css" rel="stylesheet">
+  <link rel="preload" as="image" href="./img/bgRemoteMain.png">
+  <script src="./js/signalk-autopilot.js"></script>
+  <title>Signal K Autopilot</title>
+</head>
+
+<body onload="startUpAutoPilot()">
   <div id="main">
     <div id="remoteHelp"></div>
     <div class="bgRemoteMain" id="remoteMain">
@@ -49,41 +38,52 @@
         <div id="silenceScreenScroll">&nbsp;Next alarm press:</div>
       </div>
       <div class="messageScreen" id="confirmScreen"></div>
-      <div class="defaultKey btnLeftBlack" id="keyTackPort" onClick="buildAndSendCommand('tackToPort');" onTouchend="touchEnd(event)">
+      <div class="defaultKey btnLeftBlack" id="keyTackPort" onClick="buildAndSendCommand('tackToPort');"
+        onTouchend="touchEnd(event)">
         <div class="defaultTextFontKey" id="keyTackPortText"></div>
       </div>
-      <div class="defaultKey btnRightBlack" id="keyTackStarbord" onClick="buildAndSendCommand('tackToStarboard');" onTouchend="touchEnd(event)">
+      <div class="defaultKey btnRightBlack" id="keyTackStarbord" onClick="buildAndSendCommand('tackToStarboard');"
+        onTouchend="touchEnd(event)">
         <div class="defaultTextFontKey" id="keyTackStarbordText"></div>
       </div>
       <div class="defaultTextFontKey" id="tackLabel">: TACK :</div>
       <div class="defaultKey btnBottomSmallBlack" id="keyMute" onClick="sendSilence();" onTouchend="touchEnd(event)">
         <div class="defaultTextFontKey" id="keyMuteText"></div>
       </div>
-      <div class="defaultKey btnBottomSmallBlack" id="keyScroll" onClick="notificationScroll();" onTouchend="touchEnd(event)">
+      <div class="defaultKey btnBottomSmallBlack" id="keyScroll" onClick="notificationScroll();"
+        onTouchend="touchEnd(event)">
         <div class="defaultTextFontKey" id="keyScrollText"></div>
       </div>
-      <div class="defaultKey btnLeftBlack" id="keyMinusOne" onClick="buildAndSendCommand('-1');" onTouchend="touchEnd(event)">
+      <div class="defaultKey btnLeftBlack" id="keyMinusOne" onClick="buildAndSendCommand('-1');"
+        onTouchend="touchEnd(event)">
         <div class="defaultTextFontKey" id="keyMinusOneText">-1</div>
       </div>
-      <div class="defaultKey btnLeftBlack" id="keyMinusTen" onClick="buildAndSendCommand('-10');" onTouchend="touchEnd(event)">
+      <div class="defaultKey btnLeftBlack" id="keyMinusTen" onClick="buildAndSendCommand('-10');"
+        onTouchend="touchEnd(event)">
         <div class="defaultTextFontKey" id="keyMinusTenText">-10</div>
       </div>
-      <div class="defaultKey btnRightBlack" id="keyPlusTen" onClick="buildAndSendCommand('+10');" onTouchend="touchEnd(event)">
+      <div class="defaultKey btnRightBlack" id="keyPlusTen" onClick="buildAndSendCommand('+10');"
+        onTouchend="touchEnd(event)">
         <div class="defaultTextFontKey" id="keyPlusTenText">+10</div>
       </div>
-      <div class="defaultKey btnRightBlack" id="keyPlusOne" onClick="buildAndSendCommand('+1');" onTouchend="touchEnd(event)">
+      <div class="defaultKey btnRightBlack" id="keyPlusOne" onClick="buildAndSendCommand('+1');"
+        onTouchend="touchEnd(event)">
         <div class="defaultTextFontKey" id="keyPlusOneText">+1</div>
       </div>
-      <div class="defaultKey btnCircleRed" id="keyAuto" onClick="buildAndSendCommand('auto');" onTouchend="touchEnd(event)">
+      <div class="defaultKey btnCircleRed" id="keyAuto" onClick="buildAndSendCommand('auto');"
+        onTouchend="touchEnd(event)">
         <div class="defaultTextFontKey" id="keyAutoText">AUTO</div>
       </div>
-      <div class="defaultKey btnCircleRed" id="keyWind" onClick="buildAndSendCommand('wind');" onTouchend="touchEnd(event)">
+      <div class="defaultKey btnCircleRed" id="keyWind" onClick="buildAndSendCommand('wind');"
+        onTouchend="touchEnd(event)">
         <div class="defaultTextFontKey" id="keyWindText">WIND</div>
       </div>
-      <div class="defaultKey btnCircleRed" id="keyTrack" onClick="buildAndSendCommand('route');" onTouchend="touchEnd(event)">
+      <div class="defaultKey btnCircleRed" id="keyTrack" onClick="buildAndSendCommand('route');"
+        onTouchend="touchEnd(event)">
         <div class="defaultTextFontKey" id="keyTrackText">TRACK</div>
       </div>
-      <div class="defaultKey btnCircleWithDotRed" id="keyStandby" onClick="buildAndSendCommand('standby');" onTouchend="touchEnd(event)">
+      <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)">
@@ -94,5 +94,6 @@
       </div>
     </div>
   </div>
-  </body>
-</html>
+</body>
+
+</html>