signalk-racer 0.9.7 → 0.9.9

package/ReleaseNotes.md

@@ -1,4 +1,10 @@
-## 0.9.7
+## 0.9.9 Working with KIP prototypes
+ + Fixed API handlers to use return status rather than callback
+
+## 0.9.8
+ + Minor updates to webapp UI
+
+## 0.9.7 
  + Cleaned up webapp UI
  + reset to seconds when adjusting time
 

package/index.js

@@ -15,6 +15,16 @@ module.exports = (app) => {
                 title: 'The start line port end (pin) waypoint name',
                 default: 'startPin'
             },
+            updateStartLineWaypoint: {
+                type: 'boolean',
+                title: 'Update the start line waypoints if the startLine is updated',
+                default: 'true'
+            },
+            createStartLineWaypoint: {
+                type: 'boolean',
+                title: 'Create the start line waypoints if the startLine is updated and the waypoint does not exist',
+                default: 'true'
+            },
             period: {
                 type: 'number',
                 title: 'The subscription period in microseconds used for position and wind deltas',
@@ -60,7 +70,7 @@ module.exports = (app) => {
                         "value": {
                             "units": "rad",
                             "description": "Heading of the next leg of the course",
-                            "displayName": "Heading of the next leg of the course",
+                            "displayName": "Next Heading",
                             "shortName": "NextHDG",
                         }
                     },
@@ -69,7 +79,7 @@ module.exports = (app) => {
                         "value": {
                             "units": "rad",
                             "description": "TWA on the next leg of the course",
-                            "displayName": "TWA on the next leg of the course",
+                            "displayName": "Next TWA",
                             "shortName": "NextTWA",
                         }
                     },
@@ -124,6 +134,17 @@ module.exports = (app) => {
         return degrees ? degrees * (Math.PI / 180) : null;
     }
 
+    function toOtherEnd(end) {
+        switch (end) {
+            case 'port' :
+                return 'stb';
+            case 'stb' :
+                return 'port';
+            default:
+                return null;
+        }
+    }
+
     function bowPosition(position) {
         let headingTrue = app.getSelfPath("navigation.headingTrue");
         if (!headingTrue)
@@ -150,59 +171,78 @@ module.exports = (app) => {
         return name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
     }
 
-    async function setStartLine(context, path, value, cb) {
+    function complete(callback, statusCode, message, details) {
+        const result = {state: statusCode === 200 ? 'SUCCESS' : 'FAILURE', statusCode, message, details};
+        app.debug(JSON.stringify(result));
+        return result;
+    }
+
+    // Put an absolute position
+    async function putStartLineEnd(end, position, callback, updateWaypoint) {
+        app.debug(`putStartLineEnd: ${end} ${JSON.stringify(position)}`);
+
         try {
-            app.debug('setStartLine:', JSON.stringify(value));
-            if (!value || !value.end || typeof value.end !== 'string') {
-                app.error('Failed to set start line: !value.end');
-                cb(null, {state: 'FAILED'});
-            }
-            const end = value.end.toLowerCase();
-            if (end !== 'port' && end !== 'stb') {
-                app.error('Failed to set start line: unknown end');
-                cb(null, {state: 'FAILED'});
+            if (!end || !position || typeof position.latitude !== 'number' || typeof position.longitude !== 'number') {
+                return complete(callback, 400, 'Failed to put start line end: !end || !position');
             }
 
-            // Get the position either as arg or of the current bow postion
-            let position = value.position;
-            if (position === 'bow') {
-                position = app.getSelfPath('navigation.position');
-                if (position)
-                    position = bowPosition(position.value);
+            end = end.toLowerCase();
+            if (end !== 'port' && end !== 'stb') {
+                return complete(callback, 400, 'Failed to put start line end: unknown end');
             }
 
-            app.debug(`setStartLine[${end}] = ${JSON.stringify(position)} before translation/rotation`);
-            const startLine = state.startLine;
-
-            // Do any rotations or length changes
-            if (startLine && (value.delta || value.rotate)) {
-                app.debug(`setStartLine[${end}] translate ${value.delta} and rotate ${value.rotate} of ${JSON.stringify(startLine)}`);
-                const fixedEnd = startLine[end === 'port' ? 'stb' : 'port'];
-                const movingEnd = position ? position : startLine[end];
-                app.debug(`fixedEnd: ${JSON.stringify(fixedEnd)} movingEnd: ${JSON.stringify(movingEnd)}`);
-
-                const initialBearing = geolib.getRhumbLineBearing(fixedEnd, movingEnd);
-                const currentDistance = geolib.getDistance(fixedEnd, movingEnd);
-                app.debug(`initialBearing: ${initialBearing} currentDistance: ${currentDistance}`);
+            let startLine = state.startLine;
+            if (startLine) {
+                // We have a line, check if this end is the same?
+                if (startLine[end].latitude === position.latitude && startLine[end].longitude === position.longitude) {
+                    return complete(callback, 304, 'Put start line end: unchanged line end');
+                }
+            } else {
+                // We don't have a line, so check if this is just an update for one end of the line?
+                const thisEnd = app.getSelfPath(`navigation.racing.startLine${camelCase(end)}`);
+                if (thisEnd && thisEnd.value.lat === position.latitude && thisEnd.value.longitude === position.longitude) {
+                    return complete(callback, 304, 'Put start line end: unchanged end');
+                }
 
-                const newDistance = value.delta && typeof value.delta === 'number' ? (currentDistance + value.delta) : currentDistance;
-                const newBearing = value.rotate && typeof value.rotate === 'number'? (initialBearing + toDegrees(value.rotate)) : initialBearing;
-                app.debug(`newDistance: ${newDistance} newBearing: ${newBearing}`);
+                // If we now have both ends, we have a line!
+                const otherEnd = toOtherEnd(end);
+                const otherEndPosition = app.getSelfPath(`navigation.racing.startLine${camelCase(otherEnd)}`);
+                if (otherEndPosition && otherEndPosition.value) {
+                    startLine = {};
+                    startLine[end] = position;
+                    startLine[otherEnd] = otherEnd.value;
+                }
+            }
 
-                const newPosition = geolib.computeDestinationPoint(fixedEnd, newDistance, newBearing);
-                app.debug(`Moved/Rotated ${end} from ${JSON.stringify(position)} to ${JSON.stringify(newPosition)}`);
-                position = newPosition;
+            // If we have a startLine, we can send deltas for this end and the length
+            if (startLine) {
+                app.debug('update existing start line');
+                const newStartLine = {...state.startLine};
+                newStartLine[end] = position;
+                startLine.length = geolib.getPreciseDistance(newStartLine.port, newStartLine.stb, 0.1);
+                startLine.bearing = geolib.getRhumbLineBearing(newStartLine.stb, newStartLine.port);
+                state.startLine = newStartLine;
+                sendDeltas([
+                    {path: `navigation.racing.startLine${camelCase(end)}`, value: position},
+                    {path: 'navigation.racing.startLineLength', value: newStartLine.length},
+                ]);
+            } else {
+                // otherwise we can only send the delta for this end
+                sendDeltas([
+                    {path: `navigation.racing.startLine${camelCase(end)}`, value: position},
+                ]);
             }
 
-            if (position) {
-                app.debug('position:' + JSON.stringify(position));
-                const waypointConfig =`startLine${camelCase(end)}`;
+            // Set/create the waypoint if we are configured to do so
+            if (state.options.updateStartLineWaypoint || updateWaypoint) {
+                const waypointConfig = `startLine${camelCase(end)}`;
                 app.debug(`waypointConfig: ${waypointConfig}`);
                 const waypointName = state.options[waypointConfig];
                 app.debug(`waypointName: ${waypointName}`);
                 let waypointId = startLine ? startLine[end + 'Id'] : null;
                 app.debug(`waypointId: ${waypointId}`);
 
+                // If we have not cached the Id of the line end, then
                 if (!waypointId) {
                     // Get the ID of the last existing waypoint with the given name.
                     const waypoints = await app.resourcesApi.listResources('waypoints', {});
@@ -215,7 +255,7 @@ module.exports = (app) => {
                     app.debug(`waypointId: ${waypointId}`);
                 }
 
-                app.debug(`POSITION to set ${end}(${waypointName}/${waypointId}): ${JSON.stringify(position)}`);
+                app.debug(`Startline waypoint to set ${end}(${waypointName}/${waypointId}): ${JSON.stringify(position)}`);
 
                 const waypoint = {
                     name: waypointName,
@@ -226,6 +266,11 @@ module.exports = (app) => {
                             coordinates: [position.longitude, position.latitude]
                         },
                         properties: {}
+                    },
+                    type: end === 'port' ? 'start-pin' : 'start-boat',
+                    position: {
+                        latitude: position.latitude,
+                        longitude: position.longitude
                     }
                 }
 
@@ -233,52 +278,99 @@ module.exports = (app) => {
 
                 if (waypointId)
                     await app.resourcesApi.setResource('waypoints', waypointId, waypoint);
-                else
+                else if (state.options.createStartLineWaypoint)
                     await app.resourcesApi.createResource('waypoints', waypoint);
+                else
+                    app.debug('startline waypoint not created');
+            } else {
+                app.debug('startline waypoint not updated');
             }
 
-            cb(null, {
-                state: 'COMPLETED',
-                result: {
-                    distanceToStart: state.distanceToLine ? state.distanceToLine : null,
-                }
-            });
-
-            if (startLine) {
-                const newStartLine = {...state.startLine};
-                newStartLine[end + 'Id'] = waypointId;
-                newStartLine[end] = position;
-                startLine.length = geolib.getPreciseDistance(newStartLine.port, newStartLine.stb, 0.1);
-                startLine.bearing = geolib.getRhumbLineBearing(newStartLine.stb, newStartLine.port);
-                state.startLine = newStartLine;
-                sendDeltas([
-                    {path: `navigation.racing.startLine${end.charAt(0).toUpperCase() + end.slice(1)}`, value: position},
-                    {path: 'navigation.racing.startLineLength', value: newStartLine.length},
-                ]);
 
+            // If we have a startLine, then process position against the new line
+            if (startLine)
                 processPosition(null);
-            } else {
-                findLineAndThenProcess(null, true);
+            // Complete the handler successfully
+            return complete(callback, 200, 'Put start line end: OK');
+        } catch (err) {
+            return complete(callback, 500, 'Put start line end: Failed ' + JSON.stringify(err));
+        }
+    }
+
+    async function setStartLine(context, path, args, callback) {
+        try {
+            app.debug('setStartLine:', JSON.stringify(args));
+            if (!args || !args.end || typeof args.end !== 'string') {
+                return complete(callback, 400, 'Failed to set the startLine: !end');
+            }
+            const end = args.end.toLowerCase();
+            if (end !== 'port' && end !== 'stb') {
+                return complete(callback, 400, 'Failed to set the startLine: unknown end');
+            }
+
+            // Get the position either as arg or as the current bow position
+            let position = args.position;
+            if (position === 'bow' || !position && !args.delta && !args.rotate ) {
+                position = app.getSelfPath('navigation.position');
+                app.debug('bowPosition:' + JSON.stringify(position));
+                if (position)
+                    position = bowPosition(position.value);
+            }
+
+            app.debug(`setStartLine[${end}] = ${JSON.stringify(position)} before translation/rotation`);
+            const startLine = state.startLine;
+
+            // Do any rotations or length changes
+            if (startLine && (args.delta || args.rotate)) {
+                app.debug(`setStartLine[${end}] translate ${args.delta} and rotate ${args.rotate} of ${JSON.stringify(startLine)}`);
+                const otherEnd = startLine[toOtherEnd(end)];
+                const thisEnd = position ? position : startLine[end];
+                app.debug(`otherEnd(fixed): ${JSON.stringify(otherEnd)} thisEnd(moving): ${JSON.stringify(thisEnd)}`);
+
+                const initialBearing = geolib.getRhumbLineBearing(otherEnd, thisEnd);
+                const currentDistance = geolib.getDistance(otherEnd, thisEnd);
+                app.debug(`initialBearing: ${initialBearing} currentDistance: ${currentDistance}`);
+
+                const newDistance = args.delta && typeof args.delta === 'number' ? (currentDistance + args.delta) : currentDistance;
+                const newBearing = args.rotate && typeof args.rotate === 'number' ? (initialBearing + toDegrees(args.rotate)) : initialBearing;
+                app.debug(`newDistance: ${newDistance} newBearing: ${newBearing}`);
+
+                const newPosition = geolib.computeDestinationPoint(otherEnd, newDistance, newBearing);
+                app.debug(`Moved/Rotated ${end} from ${JSON.stringify(position)} to ${JSON.stringify(newPosition)}`);
+                position = newPosition;
             }
+
+            if (position)
+                return putStartLineEnd(end, position, callback, args.updateWaypoint === true);
+            return complete(callback, 500, 'Failed to set the startLine: No position');
         } catch (err) {
-            app.error('Failed to set start line end:', JSON.stringify(err));
-            cb(null, {state: 'FAILED'});
-            throw err;
+            return complete(callback, 500, 'Failed to set the startLine: ' + JSON.stringify(err));
         }
     }
 
-    async function startTimeCommand(context, path, value, cb) {
+    function setTimer() {
+        if (state.timerInterval)
+            clearInterval(state.timerInterval);
+        state.timerInterval = setInterval(() => {
+            if (!state.timerRunning || state.timeToStart <= 0) {
+                clearInterval(state.timerInterval);
+                return;
+            }
+            state.timeToStart--;
+            sendDeltas([{path: 'navigation.racing.timeToStart', value: state.timeToStart}]);
+        }, 1000);
+    }
+
+    async function startTimeCommand(context, path, args, callback) {
         // start / reset / sync
         try {
-            app.debug('startTimerCommand:', JSON.stringify(value));
-            if (!value || !value.command || typeof value.command !== 'string') {
-                app.error('Failed to command start timer: ' + JSON.stringify(value));
-                cb(null, {state: 'FAILED'});
+            app.debug('startTimerCommand:', JSON.stringify(args));
+            if (!args || !args.command || typeof args.command !== 'string') {
+                return complete(callback, 400, 'Failed to command timer: no command');
             }
-            const command = value.command.toLowerCase();
+            const command = args.command.toLowerCase();
 
-            switch (command)
-            {
+            switch (command) {
                 case 'start': {
                     const now = new Date();
                     const timeToStart = state.timeToStart ?? state.options.timer ?? 300;
@@ -293,17 +385,8 @@ module.exports = (app) => {
                         {path: 'navigation.racing.timeToStart', value: timeToStart}
                     ]);
 
-                    if (state.timerInterval) clearInterval(state.timerInterval);
-                    state.timerInterval = setInterval(() => {
-                        if (!state.timerRunning || state.timeToStart <= 0) {
-                            clearInterval(state.timerInterval);
-                            return;
-                        }
-                        state.timeToStart--;
-                        sendDeltas([{path: 'navigation.racing.timeToStart', value: state.timeToStart}]);
-                    }, 1000);
-                    cb(null, {state: 'COMPLETED'});
-                    break;
+                    setTimer();
+                    return complete(callback, 200, 'start timer: OK');
                 }
                 case 'reset': {
                     state.timerRunning = false;
@@ -314,14 +397,12 @@ module.exports = (app) => {
                         {path: 'navigation.racing.timeToStart', value: state.timeToStart},
                         {path: 'navigation.racing.startTime', value: null}
                     ]);
-                    cb(null, {state: 'COMPLETED'});
-                    break;
+                    return complete(callback, 200, 'reset timer: OK');
                 }
 
                 case 'sync': {
                     if (!state.timerRunning || state.timeToStart == null) {
-                        cb(null, { state: 'FAILED', message: 'Timer not running' });
-                        return;
+                        return complete(callback, 500, 'sync timer: !running');
                     }
 
                     const rounded = Math.round(state.timeToStart / 60) * 60;
@@ -329,67 +410,54 @@ module.exports = (app) => {
                     state.startTime = new Date(Date.now() + rounded * 1000).toISOString();
 
                     sendDeltas([
-                        { path: 'navigation.racing.timeToStart', value: state.timeToStart },
-                        { path: 'navigation.racing.startTime', value: state.startTime }
+                        {path: 'navigation.racing.timeToStart', value: state.timeToStart},
+                        {path: 'navigation.racing.startTime', value: state.startTime}
                     ]);
-                    cb(null, { state: 'COMPLETED' });
-                    break;
+                    return complete(callback, 200, 'sync timer: OK');
                 }
 
                 case 'set': {
-                    const input = value.startTime;
+                    const input = args.startTime;
                     if (!input) {
-                        cb(null, { state: 'FAILED', message: 'Missing startTime' });
-                        return;
+                        return complete(callback, 400, 'reset timer: !startTime');
                     }
 
                     const inputTime = new Date(input);
                     if (isNaN(inputTime)) {
-                        cb(null, { state: 'FAILED', message: 'Invalid startTime format' });
-                        return;
+                        return complete(callback, 400, 'reset timer: invalid startTime');
                     }
 
                     const now = new Date();
-                    const diff = Math.floor((inputTime - now) / 1000);
+                    const secondsToGo = Math.floor((inputTime - now) / 1000);
 
-                    if (diff <= 0) {
+                    if (secondsToGo <= 0) {
                         state.timerRunning = false;
                         state.timeToStart = 0;
                         state.startTime = null;
                         sendDeltas([
-                            { path: 'navigation.racing.timeToStart', value: 0 },
-                            { path: 'navigation.racing.startTime', value: null }
+                            {path: 'navigation.racing.timeToStart', value: 0},
+                            {path: 'navigation.racing.startTime', value: null}
                         ]);
-                        cb(null, { state: 'COMPLETED' });
-                        return;
+                        return complete(callback, 200, 'set timer: 0K');
                     }
 
                     state.timerRunning = true;
-                    state.timeToStart = diff;
+                    state.timeToStart = secondsToGo;
                     state.startTime = inputTime.toISOString();
 
                     sendDeltas([
-                        { path: 'navigation.racing.timeToStart', value: state.timeToStart },
-                        { path: 'navigation.racing.startTime', value: state.startTime }
+                        {path: 'navigation.racing.timeToStart', value: state.timeToStart},
+                        {path: 'navigation.racing.startTime', value: state.startTime}
                     ]);
 
-                    if (state.timerInterval) clearInterval(state.timerInterval);
-                    state.timerInterval = setInterval(() => {
-                        if (!state.timerRunning || state.timeToStart <= 0) {
-                            clearInterval(state.timerInterval);
-                            return;
-                        }
-                        state.timeToStart--;
-                        sendDeltas([{ path: 'navigation.racing.timeToStart', value: state.timeToStart }]);
-                    }, 1000);
-                    cb(null, { state: 'COMPLETED' });
-                    break;
+                    setTimer();
+                    return complete(callback, 200, 'set timer: OK');
                 }
 
                 case 'adjust': {
-                    const delta = Number(value.delta);
+                    const delta = Number(args.delta);
                     if (isNaN(delta) || state.timeToStart == null || !state.startTime) {
-                        cb(null, { state: 'FAILED', message: 'Cannot adjust: invalid state or delta' });
+                        cb(null, {state: 'FAILED', message: 'Cannot adjust: invalid state or delta'});
                         return;
                     }
 
@@ -401,23 +469,18 @@ module.exports = (app) => {
                     state.startTime = adjustedStart;
 
                     sendDeltas([
-                        { path: 'navigation.racing.timeToStart', value: state.timeToStart },
-                        { path: 'navigation.racing.startTime', value: adjustedStart }
+                        {path: 'navigation.racing.timeToStart', value: state.timeToStart},
+                        {path: 'navigation.racing.startTime', value: adjustedStart}
                     ]);
-                    cb(null, { state: 'COMPLETED' });
-                    break;
+                    return complete(callback, 200, 'adjust timer: OK');
                 }
 
                 default : {
-                    app.error('Unknown command to start timer: ' + command);
-                    cb(null, {state: 'FAILED'});
-                    return;
+                    return complete(callback, 400, 'Failed to command timer: unknown command');
                 }
             }
         } catch (err) {
-            app.error('Failed to set start line end:', JSON.stringify(err));
-            cb(null, {state: 'FAILED'});
-            throw err;
+            return complete(callback, 500, 'Failed to command timer: ' + JSON.stringify(err));
         }
     }
 
@@ -536,8 +599,7 @@ module.exports = (app) => {
             sendDeltas([
                 {path: 'navigation.racing.distanceStartline', value: distanceToLine},
             ]);
-        }
-        else if (state.distanceToLine) {
+        } else if (state.distanceToLine) {
             state.distanceToLine = null;
             sendDeltas([
                 {path: 'navigation.racing.distanceStartline', value: null},
@@ -728,7 +790,7 @@ module.exports = (app) => {
                     });
                     processWind(twd);
                 }
-            )
+            );
 
             // Subscribe to Active route.
             app.subscriptionmanager.subscribe(
@@ -759,6 +821,48 @@ module.exports = (app) => {
                 }
             );
 
+            // Subscribe to racing start line to see changes from any other plugin.
+            app.subscriptionmanager.subscribe(
+                {
+                    context: 'vessels.' + app.selfId,
+                    subscribe: [
+                        {path: 'navigation.racing.startLinePort', policy: 'instant'},
+                        {path: 'navigation.racing.startLineStb', policy: 'instant'},
+                    ]
+                },
+                unsubscribes,
+                (subscriptionError) => {
+                    app.error('Error:' + subscriptionError)
+                },
+                (delta) => {
+                    app.debug('DELTAS START LINE ENDS ' + JSON.stringify(delta));
+                    delta.updates.forEach((u) => {
+                        u.values.forEach((v) => {
+                            app.debug(`DELTA START LINE END from ${u.source.label}: ${v.path} = ${JSON.stringify(v.value)}`);
+                            if (u.source && u.source.label && u.source.label !== 'signalk-racer') {
+                                switch (v.path) {
+                                    case 'navigation.racing.startLinePort' :
+                                        putStartLineEnd('port', v.value, ignored => {
+                                        }, false).then(ignored => {
+                                        });
+                                        break;
+                                    case 'navigation.racing.startLineStb' :
+                                        putStartLineEnd('port', v.value, ignored => {
+                                        }, false).then(ignored => {
+                                        });
+                                        break;
+                                }
+                            }
+                        })
+                    });
+                }
+            );
+
+            // register to the standard path, so we can implement a direct put
+            app.registerPutHandler('vessels.self', 'navigation.racing.startLinePort', (ctx, path, value, callback) => putStartLineEnd('port', value, callback));
+            app.registerPutHandler('vessels.self', 'navigation.racing.startLineStb', (ctx, path, value, callback) => putStartLineEnd('stb', value, callback));
+
+            // register to API paths for this plugin
             app.registerPutHandler('vessels.self', 'navigation.racing.setStartLine', setStartLine);
             app.registerPutHandler('vessels.self', 'navigation.racing.setStartTime', startTimeCommand);
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-racer",
-  "version": "0.9.7",
+  "version": "0.9.9",
   "description": "Signalk plugin to calculate values of interest to sail racers: such as Distance to Line; Next leg TWA.",
   "main": "index.js",
   "scripts": {

package/public/index.html

@@ -4,10 +4,16 @@
     <meta charset="UTF-8">
     <title>SignalK Racer Control</title>
     <style>
-        .button-timer-command    { background-color: #041b8e; color: white; }
+
+        body {
+            background-color: black;
+            color: white; /* optional for visibility */
+        }
+
+        .button-timer-command    { background-color: #041b8e; color: white; font-size: 1em; font-weight: bold; }
         .button-timer-adjust   { background-color: #2196F3; color: white; }
         button {
-            padding: 1em 1.5em;
+            padding: 1em 1em;
             font-size: 1em;
             cursor: pointer;
             border: none;
@@ -17,7 +23,7 @@
         body {
             font-family: sans-serif;
             max-width: 100%;
-            margin: 3em auto;
+            margin: 1em auto;
             text-align: center;
         }
         button {
@@ -31,17 +37,17 @@
             padding: 0.3em;
         }
         #status {
-            margin-top: 2em;
+            margin-top: 1em;
             font-size: 1em;
             color: green;
         }
 
-        .port-set    { background-color: #f88; color: black; }
+        .port-set    { background-color: #f88; color: black; font-size: 1em;}
         .port-move   { background-color: #a00; color: white; }
         .port-tweak   { background-color: #f44; color: white; }
         .port-rotate { background-color: #a00; color: white; }
-        .stb-set     { background-color: #8f8; color: black; }
-        .stb-move    { background-color: #080; color: white; }
+        .stb-set     { background-color: #8f8; color: black; font-size: 1em; }
+        .stb-move    { background-color: #080; color: white;}
         .stb-tweak    { background-color: #4c4; color: white; }
         .stb-rotate  { background-color: #080; color: white; }
 
@@ -98,26 +104,34 @@
                 data.updates.forEach(update => {
                     if (update.values) {
                         update.values.forEach(value => {
-                            if (value.path === "navigation.racing.startLineLength") {
-                                document.getElementById("lineLength").value = value.value.toFixed(1);
-                            } else if (value.path === "navigation.racing.stbLineBias") {
-                                document.getElementById("lineBias").value = value.value.toFixed(1);
-                            } else if (value.path === "navigation.racing.timeToStart") {
-                                document.getElementById('timeToStart').textContent = formatTimeToMMSS(value.value);
-                            } else if (value.path === "navigation.racing.startTime") {
-                                if (!value.value) {
-                                    document.getElementById('startTime').value = "HH:MM:SS";
-                                } else {
-                                    startTime = new Date(value.value); // handles ISO 8601 format
-                                    document.getElementById('startTime').value =
-                                        startTime.toLocaleTimeString([], {
-                                            hour: '2-digit',
-                                            minute: '2-digit',
-                                            second: '2-digit'
-                                        });
+                            switch (value.path) {
+                                case "navigation.racing.startLineLength" :
+                                    // document.getElementById("lineLength").value = value.value.toFixed(1);
+                                    break;
+                                case "navigation.racing.stbLineBias" :
+                                    // document.getElementById("lineBias").value = value.value.toFixed(1);
+                                    break;
+                                case "navigation.racing.timeToStart":
+                                    let timer = document.getElementById('timeToStart');
+                                    if (timer) timer.textContent = formatTimeToMMSS(value.value);
+                                    break;
+                                case "navigation.racing.startTime": {
+                                    if (!value.value) {
+                                        document.getElementById('startTime').value = "HH:MM:SS";
+                                    } else {
+                                        startTime = new Date(value.value); // handles ISO 8601 format
+                                        document.getElementById('startTime').value =
+                                            startTime.toLocaleTimeString([], {
+                                                hour: '2-digit',
+                                                minute: '2-digit',
+                                                second: '2-digit'
+                                            });
+                                    }
+                                    break;
                                 }
-                            } else {
-                                console.log("Received value: " + value.path + " = " + JSON.stringify(value.value));
+                                default:
+                                    console.log("Received value: " + value.path + " = " + JSON.stringify(value.value));
+                                    break;
                             }
                         });
                     }
@@ -233,71 +247,55 @@
 
 </script>
 
-<h1>Adjust Start Line</h1>
 <div style="display: flex; justify-content: center; align-items: center; gap: 3em; flex-wrap: wrap;">
-    <div style="display: grid; grid-template-columns: repeat(10, auto); grid-template-rows: repeat(3, auto); gap: 0.5em;">
-        <div></div>
+    <div style="display: grid; grid-template-columns: repeat(6, auto); grid-template-rows: repeat(3, auto); gap: 0.5em;">
         <div></div>
         <button class="port-rotate" onclick="sendAdjustStartLine('port', 0, 1)">+1°</button>
         <div></div>
-        <div></div>
 
-        <div></div>
         <div></div>
         <button class="stb-rotate" onclick="sendAdjustStartLine('stb', 0, -1)">+1°</button>
         <div></div>
-        <div></div>
 
         <!--------->
 
-        <button class="port-move" onclick="sendAdjustStartLine('port', 10, 0)">+10m</button>
-        <button class="port-tweak" onclick="sendAdjustStartLine('port', 1, 0)">+1m</button>
-        <button class="port-set" onclick="sendSetStartLine('port')">Port<br/>(pin)</button>
-        <button class="port-tweak" onclick="sendAdjustStartLine('port', -1, 0)">-1m</button>
-        <button class="port-move" onclick="sendAdjustStartLine('port', -10, 0)">-10m</button>
+        <button class="port-move" onclick="sendAdjustStartLine('port', 5, 0)">+5m</button>
+        <button class="port-set" onclick="sendSetStartLine('port')">Port</button>
+        <button class="port-move" onclick="sendAdjustStartLine('port', -5, 0)">-5m</button>
 
-        <button class="stb-move" onclick="sendAdjustStartLine('stb', -10, 0)">-10m</button>
-        <button class="stb-tweak" onclick="sendAdjustStartLine('stb', -1, 0)">-1m</button>
-        <button class="stb-set" onclick="sendSetStartLine('stb')">Stbd<br/>(boat)</button>
-        <button class="stb-tweak" onclick="sendAdjustStartLine('stb', 1, 0)">+1m</button>
-        <button class="stb-move" onclick="sendAdjustStartLine('stb', +10, 0)">+10m</button>
+        <button class="stb-move" onclick="sendAdjustStartLine('stb', -5, 0)">-5m</button>
+        <button class="stb-set" onclick="sendSetStartLine('stb')">Stbd</button>
+        <button class="stb-move" onclick="sendAdjustStartLine('stb', 5, 0)">+5m</button>
 
         <!--------->
 
-        <div></div>
         <div></div>
         <button class="port-rotate" onclick="sendAdjustStartLine('port', 0, -1)">-1°</button>
         <div></div>
         <div></div>
-        <div></div>
-        <div></div>
         <button class="stb-rotate" onclick="sendAdjustStartLine('stb', 0, 1)">-1°</button>
         <div></div>
-        <div></div>
     </div>
 </div>
 
-<label>Length:&nbsp;<input id="lineLength" readonly style="width: 5em; text-align: center;">m</label>
-<label>Bias:&nbsp;<input id="lineBias" readonly style="width: 5em; text-align: center;">m</label>
-
 <!-- Timer Display -->
-<div style="margin-top: 2em;">
+<!-- div style="margin-top: 2em;">
     <div id="timeToStart" style="font-size: 4em; font-weight: bold;">00:00</div>
-</div>
+</div -->
 
 <!-- Start Time Row -->
-<div style="margin-top: 1em; display: flex; justify-content: center; align-items: center; gap: 1em;">
-    <button class="button-timer-adjust" onclick="adjustStartTime(-60)">-1 min</button>
+<div style="margin-top: 1em; display: flex; justify-content: center; align-items: center; gap: 0.5em;">
+    <button class="button-timer-adjust" onclick="adjustStartTime(-60)">-1min</button>
     <button class="button-timer-adjust" onclick="adjustStartTime(-1)">-1s</button>
-    <label for="startTime">Start at: <input id="startTime" style="font-size: 1.5em; width: 6em; text-align: center;"></label>
+    <label for="startTime">At: <input id="startTime" style="font-size: 1.5em; width: 6em; text-align: center;"></label>
     <button class="button-timer-adjust" onclick="adjustStartTime(1)">+1s</button>
-    <button class="button-timer-adjust" onclick="adjustStartTime(60)">+1 min</button>
+    <button class="button-timer-adjust" onclick="adjustStartTime(60)">+1min</button>
 </div>
 
 <!-- Timer Control Buttons -->
-<div style="margin-top: 1em;">
+<div style="margin-top: 0.5em;">
     <button class="button-timer-command" onclick="sendTimerCommand('start')">Start</button>
-    <button class="button-timer-command" onclick="setStartTime()">Start At</button>
+    <button class="button-timer-command" onclick="setStartTime()">At</button>
     <button class="button-timer-command" onclick="sendTimerCommand('sync')">Sync</button>
     <button class="button-timer-command" onclick="sendTimerCommand('reset')">Reset</button>
 </div>