base sys done. shift to vs code

2025-06-30 05:17:50 +00:00
parent 05f87e04f9
commit 2c49d7cd5c
10 changed files with 292 additions and 0 deletions
--- a/frontend/public/app.js
+++ b/frontend/public/app.js
@@ -0,0 +1,56 @@
+// app.js
+import { API_BASE_URL } from "./config.js";
+
+console.log('🔥 app.js loaded');
+
+// Optional: set Ion token (if using Ion)
+Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZjk0MDM3OC1kZDE1LTRhMjItODg3NC1iMjUzNmI1NzUwMjgiLCJpZCI6MzE2ODE3LCJpYXQiOjE3NTEyMzM5OTh9.UDLPRYrMOcLAjuCWAZa2f159W0bULWSMNv3iiQcAAP8';
+
+
+
+// Create empty viewer with no base layer
+const viewer = new Cesium.Viewer("cesiumContainer", {
+  imageryProvider: false,
+  baseLayerPicker: false,
+  terrainProvider: new Cesium.EllipsoidTerrainProvider()
+});
+
+console.log('✅ Viewer created:', viewer);
+
+// Create OSM imagery layer
+const osmLayer = new Cesium.ImageryLayer(
+  new Cesium.UrlTemplateImageryProvider({
+    url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    credit: "© OpenStreetMap contributors"
+  })
+);
+
+// Add imagery layer manually
+viewer.imageryLayers.add(osmLayer);
+
+console.log('✅ OSM Layer Added:', osmLayer);
+console.log('✅ Imagery Layers:', viewer.imageryLayers.length);
+
+
+
+// Load CZML from FastAPI endpoint
+fetch(`${API_BASE_URL}/czml/test`)  
+  .then(response => {
+    if (!response.ok) {
+      throw new Error("Network response was not ok");
+    }
+    return response.json();
+  })
+  .then(czmlData => {
+    // Load the CZML data into a Cesium data source
+    const czmlSource = new Cesium.CzmlDataSource();
+    czmlSource.load(czmlData).then(() => {
+      viewer.dataSources.add(czmlSource);
+      viewer.zoomTo(czmlSource);
+    });
+  })
+  .catch(error => {
+    console.error("Failed to load CZML:", error);
+  });
+
+
--- a/frontend/public/config.js
+++ b/frontend/public/config.js
@@ -0,0 +1,2 @@
+// config.js
+export const API_BASE_URL = "http://aegis.sbln.bxl.skynav.cloud:8000";
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>SkyNav SpaceCom</title>
+
+  <!-- CesiumJS -->
+  <script src="https://cesium.com/downloads/cesiumjs/releases/1.110/Build/Cesium/Cesium.js"></script>
+  <link href="https://cesium.com/downloads/cesiumjs/releases/1.110/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
+
+  <!-- Google Font (Montserrat) -->
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
+
+  <style>
+    html, body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      font-family: 'Montserrat', sans-serif;
+      background-color: #000;
+    }
+
+    #branding {
+      height: 6em;
+      background: linear-gradient(to right, #1e124f, #2e1a6d); /* SkyNav deep purple gradient */
+      color: #fff;
+      padding: 1em;
+      text-align: center;
+      border-bottom: 2px solid #352f66;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+    }
+
+    #branding h1 {
+      margin: 0;
+      font-size: 1.8em;
+      font-weight: 600;
+      letter-spacing: 1px;
+    }
+
+    #branding p {
+      margin: 0.3em 0 0;
+      font-size: 1em;
+      color: #ccc;
+    }
+
+    #cesiumContainer {
+      position: absolute;
+      top: 8em;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  </style>
+</head>
+<body>
+
+  <header id="branding">
+    <h1>🛰️ SkyNav SpaceCom</h1>
+    <p>Real-Time Orbit & Re-entry Monitoring Platform</p>
+  </header>
+
+  <div id="cesiumContainer"></div>
+  <script type="module" src="app.js"></script>
+
+
+</body>
+</html>