I've been playing wit ionosphere maps and Cesium's MCP controller this week. I wanted to try some quick experiments, but quickly realized I hadn't learned how to hooik connect the Cesium Sandcastle to the their MCP as a client. The method Codex Sol 5.6 and I finally devised and successfully used is documented below the video.
Using that method, I was able to set up the following ionosphere fly-through as seen by a Starlink satellite. More on that soon.
Attach the Cesium MCP Camera Bridge to a Sandcastle Map
1. Confirm the camera MCP is running
The camera MCP browser bridge listens at:
ws://localhost:3002/mcp/ws
Check its health from PowerShell:
Invoke-RestMethod http://localhost:3002/mcp/health
Before attachment, the response should be healthy but may show
"connected": false.
2. Open the map in the Sandcastle editor
If the map URL uses standalone.html, replace that portion with
index.html while preserving the complete #c=...
fragment:
https://sandcastle.cesium.com/index.html#c=...
This opens the same shared map in the editable Sandcastle interface.
3. Expose the local viewer
Find the complete viewer construction statement in the Sandcastle source:
var viewer = new Cesium.Viewer("cesiumContainer", {
// Viewer options...
});
Immediately after its closing });, add:
globalThis.cesiumViewer = viewer;
Do not insert this line inside the viewer options object. Click Run in Sandcastle.
4. Select the preview's JavaScript context
Sandcastle runs the map in a preview frame. DevTools can display log messages from that frame while its Console prompt still targets the parent page.
- Open Chrome DevTools and select Console.
-
Open the execution-context dropdown, usually initially labeled
top. -
Select the Sandcastle preview context. Depending on the Sandcastle version,
it may be named
bucket.html,Sandcastle, or something similar. - Test the selected context:
typeof Cesium
The correct context returns:
"object"
Now verify the exposed viewer:
globalThis.cesiumViewer?.camera
It should return the Cesium camera object.
In a browser frame, globalThis.cesiumViewer and
window.cesiumViewer refer to the same property. The insertion
client expects window.cesiumViewer.
5. Insert the browser bridge
Open web-insertion-client.js from the repository, copy its
entire contents, and paste it into the DevTools Console while the preview
context remains selected.
Press Enter. The Console should report:
Cesium MCP bridge connected
Verify the WebSocket:
window.cesiumMcpBridge?.readyState
A value of 1 means the bridge is connected.
The MCP health response should now show:
{
"connected": true
}
Disconnect or reconnect
Disconnect the browser bridge with:
window.cesiumMcpBridge?.close()
Re-running web-insertion-client.js closes an existing bridge
before creating a new one.
The camera MCP accepts only one browser bridge at a time. Close any bridge attached to another Cesium tab before connecting this one.
Comments
Post a Comment
Please leave your comments on this topic: