Skip to content

Conversation

@tridge
Copy link
Contributor

@tridge tridge commented Aug 10, 2025

simple web UI for a boat, designed for my autonomous buoy
builds on #265
image

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds a "SimpleGCS" web-based ground control station designed for autonomous buoys and small boats. It builds on the existing WebTools framework and adds MAVLink FTP capabilities for fetching fence data.

  • Adds a complete SimpleGCS implementation with touch-friendly interface for mobile use
  • Implements MAVLink FTP protocol for file transfers (specifically for fence data)
  • Updates TelemetryDashboard to use a centralized MAVLink module structure

Reviewed Changes

Copilot reviewed 13 out of 20 changed files in this pull request and generated 6 comments.

Show a summary per file
File Description
modules/MAVLink/mavftp.js New MAVLink FTP implementation and fence data parser
modules/MAVLink/local_modules/ Added jspack dependencies for binary data handling
SimpleGCS/ Complete new GCS application with map interface and vehicle control
TelemetryDashboard/ Updated to use centralized MAVLink modules and improved connection handling
Dev/index.html Added SimpleGCS to the development index page
Comments suppressed due to low confidence (1)

modules/MAVLink/mavftp.js:116

  • Variable name 'setup_passphase' contains a spelling error. It should be 'setup_passphrase' (missing 'r').
	    payload: null

@rmackay9
Copy link

This is great to see! I think the world will be flooded with custom GCS from now on and I think it's going to make AP's usability much better.

Copy link
Member

@IamPete1 IamPete1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is quite a bit of inlining of html/css which could be done in the index either directly or with a template.

The formating is also quite bad in places. It would benefit from a tidyup to make it easyer to read.

Comment on lines +51 to +52
DOCK : 8,
CIRCLE : 9,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Odd indentation.

Comment on lines +78 to +79
params[0] || 0, params[1] || 0, params[2] || 0, params[3] || 0,
params[4] || 0, params[5] || 0, params[6] || 0
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Strictly this should be || NaN

Comment on lines +62 to +65
const el = document.createElement("div");
el.className = "toast";
el.textContent = msg;
document.body.appendChild(el);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

html templates can make this stuff a bit nicer. You can import the template and inject it.

Comment on lines +129 to +135
<div style="display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px;">
<span></span>
<span id="armed-pill" style="
padding:1px 4px; border-radius:999px; font-weight:500;
background:#9e9e9e; color:#111;">DISARM</span>
</div>
<div style="opacity:0.8">MODE: <span id="mode-value" style="font-weight:700">—</span></div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe a template again.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or it looks like this is always added? Maybe it can just be in the html.

Comment on lines +144 to +146
<div style="opacity: 0.7; margin-bottom: 2px;">BATTERY</div>
<div id="battery-value" style="font-size: 14px; font-weight: bold;">---%</div>
<div id="current-value" style="font-size: 12px; opacity: 0.85;">--- A</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Template?

};

const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" style="transform: rotate(${rotateDeg}deg); transform-origin: center;">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can do the rotation in leaflet I think. You could have a look at the map widget in telemetry dashboard.

Comment on lines +686 to +687
url_input.value = localStorage.getItem(LS_KEYS.url) || "ws://127.0.0.1:56781";
passphrase_input.value = localStorage.getItem(LS_KEYS.pass) || "";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have been reading up about GDPR, this is probably not allowed without getting consent first. But I guess we have the same problem on the wiki too.

}
}
} No newline at end of file
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its there a real change in this file somewhere?

One disadvantage of the json widget format is that it is hard to read in its native format like this.

@@ -0,0 +1,113 @@
//!/usr/bin/env node
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this be better in the new SimpleGSC directory?

@davidbuzz
Copy link

Not sure why u didnt look around at the existing web-based frontends, and node-based backends before writing this.? There's plenty of existing similar work: ( did u refer to any of these?)
https://github.com/davidbuzz/MAVControl/blob/master/mavudp_to_ws_server.js - thats similar to your TelemetryDashboard/cli_test.js but includes more explicit UDP, a namespaced websocket, and uses mainsteream node stuff like express.js and socket.io its a bit old, and prob doesnt run right now, so I get u not noticing it.
https://github.com/davidbuzz/MAVAgent/blob/master/mav-agent.js - its got loadable modules like mavproxy, would (have) been a great target/place to add your mavftp.js impl, and already does tcp and udp , and supports multiple concurrent vehicles with a popular node library called 'Backbone' for vehicle states, can do missions, params, and signing. its also a bit old, so probably wont run with your latest mavlink.js , but thats a small issue. Did i mention its a lot like mavproxy? :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants