diff --git a/GUI-help.png b/GUI-help.png index e01faba..4552a32 100644 Binary files a/GUI-help.png and b/GUI-help.png differ diff --git a/public/css/rayremote.css b/public/css/rayremote.css index 33adf2e..f032b0f 100644 --- a/public/css/rayremote.css +++ b/public/css/rayremote.css @@ -185,6 +185,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==); @@ -197,7 +202,7 @@ html { } #errorIcon { - left: 80px; + left: 82px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAAwElEQVR4AZXRtXUDMBQAwOvDjaEMwwBhWiE0RKiy9wiWYc4W3iSoGcKRS71n9qmU9FH7+izbtWVZr5pyHsR0PMiqMOjdp2MDYMCxT++GSfKCYILEhOBVHoAbf+YA+/YBc/5cA/T4dwagpATg1L8eYFU0XfPRlGgDKIi6az7qFhWAoqgTlTXRKSoC61I6gJRuPRV+XjPSWSqcK/9mVD6a8e+qcphjSMYEQZZkyJvKtTwbUiHvsdmCgV7Ldu1a1qtdZTafSCFQvo25AAAAAElFTkSuQmCC); } @@ -215,7 +220,7 @@ html { } #countDownCounter { - left: 36px; + left: 34px; text-align: center; } @@ -229,6 +234,7 @@ html { text-align: center; font-weight: bolder; font-size: 30px; + cursor: pointer; } #pilotStatus { @@ -242,6 +248,7 @@ html { text-transform: uppercase; font-weight: bolder; font-size: 30px; + cursor: pointer; } .messageScreen { diff --git a/public/index.html b/public/index.html index 99747c7..f8ea974 100644 --- a/public/index.html +++ b/public/index.html @@ -31,7 +31,8 @@
88
-
8
+
5
+
@@ -39,8 +40,8 @@
 Loading Ray Remote...
-
-
+
+
 Mute alarm press:
diff --git a/public/js/rayremote.js b/public/js/rayremote.js index e8dd018..3d155af 100644 --- a/public/js/rayremote.js +++ b/public/js/rayremote.js @@ -36,7 +36,6 @@ var touchEnd = function(event) { var ws = null; var handlePilotStatusTimeout = null; -var handleHeadindValueTimeout = null; var handleReceiveTimeout = null; var handleSilenceScreenTimeout = null; var handleConfirmActionTimeout = null; @@ -44,7 +43,7 @@ var handleCountDownCounterTimeout = null; var connected = false; var reconnect = true; const timeoutReconnect = 2000; -const timeoutValue = 2000; +const timeoutValue = 3000; const timeoutBlink = 500; const countDownDefault = 5; const noDataMessage = '-- -- -- --'; @@ -52,6 +51,7 @@ var pilotStatusDiv = undefined; var headingValueDiv = undefined; var receiveIconDiv = undefined; var sendIconDiv = undefined; +var typeValIconDiv = undefined; var errorIconDiv = undefined; var countDownCounterDiv = undefined; var powerOnIconDiv = undefined; @@ -67,11 +67,46 @@ var actionToBeConfirmed = ''; var countDownValue = 0; var pilotStatus = ''; +var displayByPathParams = { + 'navigation.headingMagnetic': { + handleTimeout: null, + typeVal: 'Mag', + usage: ['wind', 'route', 'auto', 'standby'], + value: '' + }, + 'navigation.headingTrue': { + handleTimeout: null, + typeVal: 'True', + usage: ['wind', 'route', 'auto', 'standby'], + value: '' + }, + 'environment.wind.angleApparent': { + handleTimeout: null, + typeVal: 'AWA', + usage: ['wind'], + value: '' + }, + 'environment.wind.angleTrueWater': { + handleTimeout: null, + typeVal: 'TWA', + usage: ['wind'], + value: '' + } +} + +var preferedDisplayMode = { + wind: 'environment.wind.angleApparent', + route: 'navigation.headingMagnetic', + auto: 'navigation.headingMagnetic', + standby: 'navigation.headingMagnetic' +} + var startUpRayRemote = function() { pilotStatusDiv = document.getElementById('pilotStatus'); headingValueDiv = document.getElementById('headingValue'); receiveIconDiv = document.getElementById('receiveIcon'); sendIconDiv = document.getElementById('sendIcon'); + typeValIconDiv = document.getElementById('typeValIcon'); errorIconDiv = document.getElementById('errorIcon'); powerOnIconDiv = document.getElementById('powerOnIcon'); powerOffIconDiv = document.getElementById('powerOffIcon'); @@ -82,8 +117,20 @@ var startUpRayRemote = function() { silenceScreenTextDiv = document.getElementById('silenceScreenText'); confirmScreenDiv = document.getElementById('confirmScreen'); countDownCounterDiv = document.getElementById('countDownCounter'); - setPilotStatus(noDataMessage); - setHeadindValue(noDataMessage); + setPilotStatus(''); + setHeadindValue(''); + var savedPreferedDisplayModeJSON = localStorage.getItem('signalk-raymarine-autopilot'); + var savedPreferedDisplayMode = savedPreferedDisplayModeJSON && JSON.parse(savedPreferedDisplayModeJSON); + if (savedPreferedDisplayMode === null) {savedPreferedDisplayMode = {};} + savedPreferedDisplayMode = (typeof savedPreferedDisplayMode.preferedDisplayMode !== 'undefined') ? savedPreferedDisplayMode.preferedDisplayMode : {}; + Object.keys(preferedDisplayMode).map( pilotMode => { + var pathForPilotMode = savedPreferedDisplayMode[pilotMode]; + if ((typeof pathForPilotMode !== 'undefined') && + (typeof displayByPathParams[pathForPilotMode] !== 'undefined') && + displayByPathParams[pathForPilotMode].usage.includes(pilotMode)) { + preferedDisplayMode[pilotMode] = pathForPilotMode; + } + }) // demo(); return; setTimeout(() => { receiveIconDiv.style.visibility = 'hidden'; @@ -92,13 +139,16 @@ var startUpRayRemote = function() { bottomBarIconDiv.style.visibility = 'hidden'; notificationCounterDiv.style.visibility = 'hidden'; countDownCounterDiv.innerHTML = ''; + typeValIconDiv.innerHTML = ''; wsConnect(); }, 1500); } var demo = function () { - setHeadindValue(100); - setPilotStatus('WIND'); + var headingPath = 'environment.wind.angleTrueWater'; + setPilotStatus('wind'); + buildHeadindValue( headingPath, 1.74); + clearTimeout(displayByPathParams[headingPath].handleTimeout); setNotificationMessage({"path":"notifications.autopilot.PilotWarningWindShift","value":{"state":"alarm","message":"Pilot Warning Wind Shift"}}); powerOffIconDiv.style.visibility = 'hidden'; powerOnIconDiv.style.visibility = 'visible'; @@ -234,6 +284,24 @@ var getNextNotification = function(skPath) { return newSkPathToAck; } +var changePreferedDisplayMode = function() { + const currentPilotStatus = pilotStatus; + const currentPreferedDisplayMode = preferedDisplayMode[currentPilotStatus]; + var pathForPilotStatus = []; + if (typeof currentPreferedDisplayMode === 'undefined') {return null} + for (let [key, value] of Object.entries(displayByPathParams)) { + if ((typeof value.usage === 'object') && value.usage.includes(currentPilotStatus)) { + pathForPilotStatus.push(key); + } + } + const currentIndex = pathForPilotStatus.indexOf(currentPreferedDisplayMode); + const nextIndex = (currentIndex + 1) % pathForPilotStatus.length; + preferedDisplayMode[currentPilotStatus] = pathForPilotStatus[nextIndex]; + localStorage.setItem('signalk-raymarine-autopilot', JSON.stringify({preferedDisplayMode: preferedDisplayMode})); + setHeadindValue(displayByPathParams[preferedDisplayMode[currentPilotStatus]].value); + typeValIconDiv.innerHTML = displayByPathParams[preferedDisplayMode[currentPilotStatus]].typeVal; +} + var confirmTack = function(cmd) { var message = 'Repeat same key
to confirm
tack to '; if (cmd === 'tackToPort') { @@ -303,6 +371,21 @@ var wsConnect = function() { "format": "delta", "minPeriod": 900 }, + { + "path": "navigation.headingTrue", + "format": "delta", + "minPeriod": 900 + }, + { + "path": "environment.wind.angleApparent", + "format": "delta", + "minPeriod": 900 + }, + { + "path": "environment.wind.angleTrueWater", + "format": "delta", + "minPeriod": 900 + }, { "path": "notifications.autopilot.*", "format": "delta", @@ -312,8 +395,6 @@ var wsConnect = function() { }; var subscriptionMessage = JSON.stringify(subscriptionObject); ws.send(subscriptionMessage); - handlePilotStatusTimeout = setTimeout(() => {setPilotStatus(noDataMessage)}, timeoutValue); - handleHeadindValueTimeout = setTimeout(() => {setHeadindValue(noDataMessage)}, timeoutValue); } ws.onclose = function() { @@ -356,14 +437,15 @@ var dispatchMessages = function(jsonData) { update.values.forEach((value) => { if (value.path === "steering.autopilot.state") { clearTimeout(handlePilotStatusTimeout); - handlePilotStatusTimeout = setTimeout(() => {setPilotStatus(noDataMessage)}, timeoutValue); + handlePilotStatusTimeout = setTimeout(() => { + console.log('timeout:'+pilotStatus); + setPilotStatus(''); + }, timeoutValue); setPilotStatus(value.value); - } else if (value.path === "navigation.headingMagnetic") { - clearTimeout(handleHeadindValueTimeout); - handleHeadindValueTimeout = setTimeout(() => {setHeadindValue(noDataMessage)}, timeoutValue); - setHeadindValue(Math.round(value.value * (180/Math.PI))); } else if (value.path.startsWith("notifications.autopilot")) { setNotificationMessage(value); + } else { + buildHeadindValue(value.path, value.value); } }); } @@ -371,19 +453,46 @@ var dispatchMessages = function(jsonData) { } } -var setHeadindValue = function(value) { - if (value !== '') { - value = ((typeof value === 'undefined') || isNaN(value)) ? noDataMessage : 'Mag:' + value + '°'; +var buildHeadindValue = function(path, value) { + var displayByPathParam = displayByPathParams[path]; + + if (typeof displayByPathParam === 'undefined') { + console.log('unknown path:' + path); + return null; } - headingValueDiv.innerHTML = value; + + value = Math.round(value * (180/Math.PI)); + displayByPathParam.value = ((typeof value === 'undefined') || isNaN(value)) ? noDataMessage : ' ' + value + '°'; + clearTimeout(displayByPathParam.handleTimeout); + displayByPathParam.handleTimeout = setTimeout(() => { + displayByPathParams[path].value = noDataMessage; + console.log('timeout:{'+pilotStatus+'}['+path+']'+displayByPathParams[path].value); + if (preferedDisplayMode[pilotStatus] == path) { + setHeadindValue(displayByPathParams[path].value); + } + }, timeoutValue, path); + if (preferedDisplayMode[pilotStatus] == path) { + if (typeValIconDiv.innerHTML !== displayByPathParam.typeVal) { + typeValIconDiv.innerHTML = displayByPathParam.typeVal; + } + setHeadindValue(displayByPathParams[path].value); + } +} + +var setHeadindValue = function(value) { + if (pilotStatus === '') { value = ''} + headingValueDiv.innerHTML = ((typeof value === 'undefined') || (value === '')) ? noDataMessage : value; } var setPilotStatus = function(value) { if (typeof value === 'undefined') { - value = noDataMessage; + value = ''; } - pilotStatusDiv.innerHTML = value; pilotStatus = value; + if (value === '') { + setHeadindValue(noDataMessage); + pilotStatusDiv.innerHTML = noDataMessage; + } else { pilotStatusDiv.innerHTML = value;} } var setNotificationMessage = function(value) { @@ -448,11 +557,15 @@ var cleanOnClosed = function() { notificationCounterDiv.style.visibility = 'hidden'; silenceScreenDiv.style.visibility = 'hidden'; notificationCounterTextDiv.innerHTML = ''; + typeValIconDiv.innerHTML = ''; notificationsArray = {}; skPathToAck = ''; actionToBeConfirmed = ''; pilotStatus = ''; - clearTimeout(handleHeadindValueTimeout); + Object.keys(displayByPathParams).map( path => { + clearTimeout(displayByPathParams[path].handleTimeout); + displayByPathParams[path].value = ''; + }); clearTimeout(handlePilotStatusTimeout); setPilotStatus(''); setHeadindValue(''); diff --git a/small-rayremote.png b/small-rayremote.png index 5e52c8f..9f39a50 100644 Binary files a/small-rayremote.png and b/small-rayremote.png differ