signalk-racer 0.9.6 → 0.9.8

package/README.md

@@ -93,7 +93,7 @@ This plugin uses WebSocket-based PUT requests to Signal K model paths.
 Used to **set** or **adjust** either end of the start line.
 
 #### Payload:
-```json
+```
 {
   "end": "port" | "stb",             
   "position": "bow" | { "latitude": ..., "longitude": ... },  
@@ -114,7 +114,7 @@ Used to **set** or **adjust** either end of the start line.
 Used to **start**, **sync**, **reset**, or **set a fixed start time**.
 
 #### Payload:
-```json
+```
 {
   "command": "start" | "reset" | "sync" | "adjust" | "set",
   "delta": 30,
@@ -141,4 +141,4 @@ Used to **start**, **sync**, **reset**, or **set a fixed start time**.
 ## 📬 Feedback
 
 Bug reports and suggestions are welcome at  
-[https://github.com/gregw/signalk-racer](https://github.com/gregw/signalk-racer)
+[https://github.com/gregw/signalk-racer](https://github.com/gregw/signalk-racer)

package/ReleaseNotes.md

@@ -1,18 +1,31 @@
-## 0.9.0 Initial Release
-+ working DTL, Line Length, next TWA
-## 0.9.1 Format Release
-+ formating for the README.TXT
-## 0.9.2 Set Start Line
-+ Added API to set the start line
-+ Added webapp to call start line API
-## 0.9.3 KIP racer-timer integration
- + added timeToStart API
-## 0.9.4 Trivial rename
- + Renamed README.md for npmjs
-## 0.9.5 Restructured
- + Restructured the plugin to avoid initialization problem in new server
+## 0.9.8
+ + Minor updates to webapp UI
+
+## 0.9.7 
+ + Cleaned up webapp UI
+ + reset to seconds when adjusting time
+
 ## 0.9.6 V2 API and Timer
  + Added new API V2 methods
  + Removed V1 methods
  + Webapp uses websocket
- + Server side timer 
+ + Server side timer 
+
+## 0.9.5 Restructured
++ Restructured the plugin to avoid initialization problem in new server
+
+## 0.9.4 Trivial rename
++ Renamed README.md for npmjs
+
+## 0.9.3 KIP racer-timer integration
++ added timeToStart API
+
+## 0.9.2 Set Start Line
++ Added API to set the start line
++ Added webapp to call start line API
+
+## 0.9.1 Format Release
++ formating for the README.TXT
+
+## 0.9.0 Initial Release
++ working DTL, Line Length, next TWA

package/index.js

@@ -1,3 +1,4 @@
+
 module.exports = (app) => {
     const state = {};
     const geolib = require('geolib')
@@ -7,22 +8,32 @@ module.exports = (app) => {
         properties: {
             startLineStb: {
                 type: 'string',
-                title: 'Line starboard waypoint name',
+                title: 'The start line starboard end (boat) waypoint name',
                 default: 'startBoat'
             },
             startLinePort: {
                 type: 'string',
-                title: 'Line port waypoint name',
+                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: 'Update period in micro seconds',
+                title: 'The subscription period in microseconds used for position and wind deltas',
                 default: 1000
             },
             timer: {
                 type: 'number',
-                title: 'Timer default period in seconds',
+                title: 'Start Timer default initial period in seconds',
                 default: 300
             },
         }
@@ -52,7 +63,7 @@ module.exports = (app) => {
                             "units": "m",
                             "description": "Bias of the start line for the starboard end",
                             "displayName": "Bias of the start line for the starboard end",
-                            "shortName": "SLB"
+                            "shortName": "Bias"
                         }
                     },
                     {
@@ -60,8 +71,8 @@ module.exports = (app) => {
                         "value": {
                             "units": "rad",
                             "description": "Heading of the next leg of the course",
-                            "displayName": "Heading of the next leg of the course",
-                            "shortName": "NHDG",
+                            "displayName": "Next Heading",
+                            "shortName": "NextHDG",
                         }
                     },
                     {
@@ -69,8 +80,8 @@ module.exports = (app) => {
                         "value": {
                             "units": "rad",
                             "description": "TWA on the next leg of the course",
-                            "displayName": "TWA on the next leg of the course",
-                            "shortName": "NTWA",
+                            "displayName": "Next TWA",
+                            "shortName": "NextTWA",
                         }
                     },
                 ]
@@ -124,6 +135,14 @@ 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,52 +169,74 @@ 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: 'COMPLETED', statusCode, message, details};
+        app.debug(JSON.stringify(result));
+        callback(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' ) {
+                complete(callback, 400, 'Failed to put start line end: !end || !position');
+                return;
             }
 
-            // 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') {
+                complete(callback, 400, 'Failed to put start line end: unknown end');
+                return;
             }
 
-            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) {
+                    complete(callback, 304, 'Put start line end: unchanged line end');
+                    return;
+                }
+            } 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) {
+                    complete(callback, 304, 'Put start line end: unchanged end');
+                    return;
+                }
 
-                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));
+            // 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];
@@ -203,6 +244,7 @@ module.exports = (app) => {
                 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 +257,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,
@@ -233,49 +275,102 @@ 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},
-                ]);
+            // Complete the handler successfully
+            complete(callback, 200, 'Put start line end: OK');
 
+            // If we have a startLine, then process position against the new line
+            if (startLine)
                 processPosition(null);
-            } else {
-                findLineAndThenProcess(null, true);
+        } catch (err) {
+            complete(callback, 500,  'Put start line end: Failed ' + JSON.stringify(err));
+        }
+
+        return { state: 'PENDING' }
+    }
+
+    async function setStartLine(context, path, args, callback) {
+        try {
+            app.debug('setStartLine:', JSON.stringify(args));
+            if (!args || !args.end || typeof args.end !== 'string') {
+                complete(callback, 400,  'Failed to set the startLine: !end');
+                return;
+            }
+            const end = args.end.toLowerCase();
+            if (end !== 'port' && end !== 'stb') {
+                complete(callback, 400,  'Failed to set the startLine: unknown end');
+                return;
+            }
+
+            // Get the position either as arg or as the current bow position
+            let position = args.position;
+            if (position === 'bow') {
+                position = app.getSelfPath('navigation.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);
+            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;
+            complete(callback, 500,  'Failed to set the startLine: ' + JSON.stringify(err));
         }
+        return { state: 'PENDING' }
     }
 
-    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') {
+                complete(callback, 400,  'Failed to command timer: no command');
+                return;
             }
-            const command = value.command.toLowerCase();
+            const command = args.command.toLowerCase();
 
             switch (command)
             {
@@ -293,16 +388,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'});
+                    setTimer();
+                    complete(callback, 200,  'start timer: OK');
                     break;
                 }
                 case 'reset': {
@@ -314,13 +401,13 @@ module.exports = (app) => {
                         {path: 'navigation.racing.timeToStart', value: state.timeToStart},
                         {path: 'navigation.racing.startTime', value: null}
                     ]);
-                    cb(null, {state: 'COMPLETED'});
+                    complete(callback, 200,  'reset timer: OK');
                     break;
                 }
 
                 case 'sync': {
                     if (!state.timerRunning || state.timeToStart == null) {
-                        cb(null, { state: 'FAILED', message: 'Timer not running' });
+                        complete(callback, 500,  'sync timer: !running');
                         return;
                     }
 
@@ -332,27 +419,27 @@ module.exports = (app) => {
                         { path: 'navigation.racing.timeToStart', value: state.timeToStart },
                         { path: 'navigation.racing.startTime', value: state.startTime }
                     ]);
-                    cb(null, { state: 'COMPLETED' });
+                    complete(callback, 200,  'sync timer: OK');
                     break;
                 }
 
                 case 'set': {
-                    const input = value.startTime;
+                    const input = args.startTime;
                     if (!input) {
-                        cb(null, { state: 'FAILED', message: 'Missing startTime' });
+                        complete(callback, 400,  'reset timer: !startTime');
                         return;
                     }
 
                     const inputTime = new Date(input);
                     if (isNaN(inputTime)) {
-                        cb(null, { state: 'FAILED', message: 'Invalid startTime format' });
+                        complete(callback, 400,  'reset timer: invalid startTime');
                         return;
                     }
 
                     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;
@@ -360,12 +447,12 @@ module.exports = (app) => {
                             { path: 'navigation.racing.timeToStart', value: 0 },
                             { path: 'navigation.racing.startTime', value: null }
                         ]);
-                        cb(null, { state: 'COMPLETED' });
+                        complete(callback, 200,  'set timer: 0K');
                         return;
                     }
 
                     state.timerRunning = true;
-                    state.timeToStart = diff;
+                    state.timeToStart = secondsToGo;
                     state.startTime = inputTime.toISOString();
 
                     sendDeltas([
@@ -373,21 +460,13 @@ module.exports = (app) => {
                         { 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' });
+                    setTimer();
+                    complete(callback, 200,  'set timer: OK');
                     break;
                 }
 
                 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' });
                         return;
@@ -396,28 +475,27 @@ module.exports = (app) => {
                     state.timeToStart += delta;
                     if (state.timeToStart < 0) state.timeToStart = 0;
 
-                    const adjustedStart = new Date(Date.now() + state.timeToStart * 1000).toISOString();
+                    let now = Date.now();
+                    const adjustedStart = new Date(now - (now % 1000) + state.timeToStart * 1000).toISOString();
                     state.startTime = adjustedStart;
 
                     sendDeltas([
                         { path: 'navigation.racing.timeToStart', value: state.timeToStart },
                         { path: 'navigation.racing.startTime', value: adjustedStart }
                     ]);
-                    cb(null, { state: 'COMPLETED' });
+                    complete(callback, 200,  'adjust timer: OK');
                     break;
                 }
 
                 default : {
-                    app.error('Unknown command to start timer: ' + command);
-                    cb(null, {state: 'FAILED'});
+                    complete(callback, 400,  'Failed to command timer: unknown command');
                     return;
                 }
             }
         } catch (err) {
-            app.error('Failed to set start line end:', JSON.stringify(err));
-            cb(null, {state: 'FAILED'});
-            throw err;
+            complete(callback, 500,  'Failed to command timer: ' + JSON.stringify(err));
         }
+        return { state: 'PENDING' }
     }
 
     function findLineAndThenProcess(position, alwaysFindLine = false) {
@@ -727,7 +805,7 @@ module.exports = (app) => {
                     });
                     processWind(twd);
                 }
-            )
+            );
 
             // Subscribe to Active route.
             app.subscriptionmanager.subscribe(
@@ -758,6 +836,44 @@ 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.6",
+  "version": "0.9.8",
   "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,11 +23,11 @@
         body {
             font-family: sans-serif;
             max-width: 100%;
-            margin: 3em auto;
+            margin: 1em auto;
             text-align: center;
         }
         button {
-            padding: 1em 1.5em;
+            padding: 1em 1em;
             font-size: 1em;
             cursor: pointer;
         }
@@ -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,89 +247,60 @@
 
 </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(11, 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>
         <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>
-
-        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
-            ---------------<br/>
-            <label><input id="lineLength" readonly style="width: 5em; text-align: center;">(m)</label>
-        </div>
+        <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')">Starboard<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 style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
-            <label>Bias: <input id="lineBias" readonly style="width: 5em; text-align: center;">(m)</label>
-        </div>
-
         <div></div>
         <div></div>
         <button class="stb-rotate" onclick="sendAdjustStartLine('stb', 0, 1)">-1°</button>
         <div></div>
-        <div></div>
     </div>
-
-
 </div>
 
-<div id="status">Connecting...</div>
-
 <!-- Timer Display -->
-<div style="margin-top: 2em;">
-    <div id="timeToStart" style="font-size: 3em; font-weight: bold;">00:00</div>
-</div>
+<!-- div style="margin-top: 2em;">
+    <div id="timeToStart" style="font-size: 4em; font-weight: bold;">00:00</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: 10em; 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>
 
+<div id="status">Connecting...</div>
+
 </body>
 </html>