Add initial plotting
This commit is contained in:
ThePetrovich
parent
2db5d14202
commit
55295b84aa
10 changed files with 362 additions and 436 deletions
|
|
@ -3,6 +3,7 @@
|
|||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"allowImportingTsExtensions": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
|
|
|
|||
24
src/lib/mathutil.ts
Normal file
24
src/lib/mathutil.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
export function distHaversine(
|
||||
p1: { lat: number; lng: number },
|
||||
p2: { lat: number; lng: number },
|
||||
precision?: number
|
||||
): string {
|
||||
const R = 6371; // Earth's mean radius in km
|
||||
|
||||
const rad = (x: number): number => (x * Math.PI) / 180;
|
||||
|
||||
const dLat = rad(p2.lat - p1.lat);
|
||||
const dLong = rad(p2.lng - p1.lng);
|
||||
|
||||
const a =
|
||||
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
||||
Math.cos(rad(p1.lat)) *
|
||||
Math.cos(rad(p2.lat)) *
|
||||
Math.sin(dLong / 2) *
|
||||
Math.sin(dLong / 2);
|
||||
|
||||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||
const d = R * c;
|
||||
|
||||
return d.toFixed(precision ?? 3);
|
||||
}
|
||||
198
src/lib/prediction.ts
Normal file
198
src/lib/prediction.ts
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
import { writable } from "svelte/store"
|
||||
import type { LatLngExpression } from "leaflet";
|
||||
import L from "leaflet";
|
||||
|
||||
interface TrajectoryPoint {
|
||||
altitude: number;
|
||||
datetime: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
}
|
||||
|
||||
interface PredictionStage {
|
||||
stage: string;
|
||||
trajectory: TrajectoryPoint[];
|
||||
}
|
||||
|
||||
interface ParsedPrediction {
|
||||
flight_path: [number, number, number][];
|
||||
launch: {
|
||||
latlng: LatLngExpression;
|
||||
datetime: Date;
|
||||
};
|
||||
burst: {
|
||||
latlng: LatLngExpression;
|
||||
datetime: Date;
|
||||
};
|
||||
landing: {
|
||||
latlng: LatLngExpression;
|
||||
datetime: Date;
|
||||
};
|
||||
profile: string;
|
||||
flight_time: number;
|
||||
}
|
||||
|
||||
|
||||
export const latestPrediction = writable({
|
||||
metadata: {
|
||||
complete_datetime: "",
|
||||
start_datetime: ""
|
||||
},
|
||||
prediction: [
|
||||
{
|
||||
stage: "",
|
||||
trajectory: [
|
||||
{
|
||||
altitude: 0.0,
|
||||
datetime: "",
|
||||
latitude: 0.0,
|
||||
longitude: 0.0
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
export const latestPredictionParsed = writable({} as ParsedPrediction);
|
||||
|
||||
function getLatestDataset() {
|
||||
const now = new Date();
|
||||
const hours = now.getUTCHours();
|
||||
const minutes = now.getUTCMinutes();
|
||||
const seconds = now.getUTCSeconds();
|
||||
|
||||
// Round down to the nearest 6-hour interval
|
||||
const roundedHours = Math.floor(hours / 6) * 6;
|
||||
const roundedDate = new Date(now);
|
||||
roundedDate.setUTCHours(roundedHours, 0, 0, 0);
|
||||
|
||||
// Subtract 6 hours to account for the lag
|
||||
roundedDate.setUTCHours(roundedDate.getUTCHours() - 6);
|
||||
|
||||
return roundedDate.toISOString();
|
||||
}
|
||||
|
||||
function formatLaunchDateTime(dateObj: string | Date, timeStr: string): string {
|
||||
// Ensure date is a Date object
|
||||
const date = new Date(dateObj);
|
||||
|
||||
// Extract date components
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
|
||||
// Format time (ensure it has seconds)
|
||||
let formattedTime = timeStr;
|
||||
if (timeStr.split(':').length === 2) {
|
||||
formattedTime += ':00'; // Add seconds if missing
|
||||
}
|
||||
|
||||
// Combine into ISO string
|
||||
const isoString = new Date(`${year}-${month}-${day}T${formattedTime}Z`).toISOString();
|
||||
|
||||
return isoString;
|
||||
}
|
||||
|
||||
export const getForecast = async (flightParameters: Record<string, any>, startDate: string, startTime: string): Promise<void> => {
|
||||
const launch_datetime = formatLaunchDateTime(startDate, startTime);
|
||||
|
||||
// Create request object
|
||||
flightParameters.dataset = getLatestDataset();
|
||||
flightParameters.launch_datetime = launch_datetime;
|
||||
|
||||
console.log("Sending request:", flightParameters);
|
||||
|
||||
try {
|
||||
// Example POST request - replace with your actual API endpoint
|
||||
const response = await fetch('http://127.0.0.1:8000/api/predictions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(flightParameters)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log("Forecast response:", data);
|
||||
|
||||
latestPrediction.set(data.result);
|
||||
latestPredictionParsed.set(parsePrediction(data.result.prediction));
|
||||
|
||||
alert("Forecast request successful!");
|
||||
// Handle the response data as needed
|
||||
} catch (error) {
|
||||
console.error("Error sending forecast request:", error);
|
||||
alert("Error getting forecast: " + error);
|
||||
}
|
||||
};
|
||||
|
||||
export function parsePrediction(prediction: PredictionStage[]): ParsedPrediction {
|
||||
const flight_path: [number, number, number][] = [];
|
||||
const launch: { latlng: LatLngExpression; datetime: Date } = {} as any;
|
||||
const burst: { latlng: LatLngExpression; datetime: Date } = {} as any;
|
||||
const landing: { latlng: LatLngExpression; datetime: Date } = {} as any;
|
||||
|
||||
const ascent = prediction[0].trajectory;
|
||||
const descent = prediction[1].trajectory;
|
||||
|
||||
// Add the ascent track to the flight path array.
|
||||
ascent.forEach((item) => {
|
||||
let lon = item.longitude;
|
||||
if (lon > 180.0) {
|
||||
lon -= 360.0;
|
||||
}
|
||||
|
||||
flight_path.push([item.latitude, lon, item.altitude]);
|
||||
});
|
||||
|
||||
// Add the descent track to the flight path array.
|
||||
descent.forEach((item) => {
|
||||
let lon = item.longitude;
|
||||
if (lon > 180.0) {
|
||||
lon -= 360.0;
|
||||
}
|
||||
|
||||
flight_path.push([item.latitude, lon, item.altitude]);
|
||||
});
|
||||
|
||||
// Populate the launch, burst, and landing points
|
||||
const launchObj = ascent[0];
|
||||
let lon = launchObj.longitude;
|
||||
if (lon > 180.0) {
|
||||
lon -= 360.0;
|
||||
}
|
||||
launch.latlng = L.latLng([launchObj.latitude, lon, launchObj.altitude]);
|
||||
launch.datetime = new Date(launchObj.datetime);
|
||||
|
||||
const burstObj = descent[0];
|
||||
lon = burstObj.longitude;
|
||||
if (lon > 180.0) {
|
||||
lon -= 360.0;
|
||||
}
|
||||
burst.latlng = L.latLng([burstObj.latitude, lon, burstObj.altitude]);
|
||||
burst.datetime = new Date(burstObj.datetime);
|
||||
|
||||
const landingObj = descent[descent.length - 1];
|
||||
lon = landingObj.longitude;
|
||||
if (lon > 180.0) {
|
||||
lon -= 360.0;
|
||||
}
|
||||
landing.latlng = L.latLng([landingObj.latitude, lon, landingObj.altitude]);
|
||||
landing.datetime = new Date(landingObj.datetime);
|
||||
|
||||
const profile = prediction[1].stage === "descent" ? "standard_profile" : "float_profile";
|
||||
const flight_time = (new Date(landing.datetime).getTime() - new Date(launch.datetime).getTime()) / 1000;
|
||||
|
||||
return {
|
||||
flight_path,
|
||||
launch,
|
||||
burst,
|
||||
landing,
|
||||
profile,
|
||||
flight_time,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,194 +0,0 @@
|
|||
<!-- <script>
|
||||
let showBurstCalculator = false;
|
||||
let payloadMass = 1500;
|
||||
let balloonMass = 1000;
|
||||
let desiredBurstAltitude = 33000;
|
||||
let desiredAscentRate = 2.33;
|
||||
|
||||
let burstAltitudeResult = 33000;
|
||||
let timeToBurst = 236;
|
||||
let initialVolume = 2.66;
|
||||
let ascentRateResult = 2.33;
|
||||
let liftForce = 1733;
|
||||
let volumeLiters = 2662;
|
||||
let volumeCubicFeet = 94.0;
|
||||
|
||||
const toggleBurstCalculator = () => {
|
||||
showBurstCalculator = !showBurstCalculator;
|
||||
};
|
||||
|
||||
const calculateBurst = () => {
|
||||
// In a real app, you would implement actual calculations here
|
||||
// These are just placeholder values matching your image
|
||||
burstAltitudeResult = desiredBurstAltitude;
|
||||
timeToBurst = 236;
|
||||
initialVolume = 2.66;
|
||||
ascentRateResult = desiredAscentRate;
|
||||
liftForce = 1733;
|
||||
volumeLiters = 2662;
|
||||
volumeCubicFeet = 94.0;
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if showBurstCalculator}
|
||||
<div class="modal-overlay" on:click|self={toggleBurstCalculator}>
|
||||
<div class="modal-content">
|
||||
<h2>Balloon Burst Calculation</h2>
|
||||
|
||||
<div class="calculator-grid">
|
||||
<div class="input-group">
|
||||
<label>Payload Mass (g)</label>
|
||||
<input type="number" bind:value={payloadMass}>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label>Balloon Mass (g)</label>
|
||||
<input type="number" bind:value={balloonMass}>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label>Desired Burst Altitude (m)</label>
|
||||
<input type="number" bind:value={desiredBurstAltitude}>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label>Desired Ascent Rate (m/s)</label>
|
||||
<input type="number" bind:value={desiredAscentRate} step="0.01">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="results-section">
|
||||
<h3>Results</h3>
|
||||
<div class="result-row">
|
||||
<span>Burst Altitude:</span>
|
||||
<span>{burstAltitudeResult} m</span>
|
||||
</div>
|
||||
<div class="result-row">
|
||||
<span>Time to Burst:</span>
|
||||
<span>{timeToBurst} min</span>
|
||||
</div>
|
||||
<div class="result-row">
|
||||
<span>Initial Volume:</span>
|
||||
<span>{initialVolume} m³</span>
|
||||
</div>
|
||||
<div class="result-row">
|
||||
<span>Ascent Rate:</span>
|
||||
<span>{ascentRateResult} m/s</span>
|
||||
</div>
|
||||
<div class="result-row">
|
||||
<span>Lift Force at Launch:</span>
|
||||
<span>{liftForce} g</span>
|
||||
</div>
|
||||
<div class="result-row">
|
||||
<span>Volume:</span>
|
||||
<span>{volumeLiters} L ({volumeCubicFeet} ft³)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="secondary-button">Additional Settings</button>
|
||||
<button class="primary-button" on:click={calculateBurst}>Use Results</button>
|
||||
<button on:click={toggleBurstCalculator}>Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.primary-button {
|
||||
background: #4CAF50 !important;
|
||||
color: white;
|
||||
border: 1px solid #3e8e41 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
width: 500px;
|
||||
max-width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.calculator-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 15px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.results-section {
|
||||
background-color: #f5f5f5;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.results-section h3 {
|
||||
margin-top: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.result-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.result-row span:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
background: #f0f0f0;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
</style> -->
|
||||
|
|
@ -1,114 +1,57 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { getForecast } from '../lib/prediction.ts';
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let isCollapsed = false;
|
||||
|
||||
const profileMap = {
|
||||
'Normal': 'standard_profile',
|
||||
'Float': 'float_profile',
|
||||
'Reverse (ascent only)': 'reverse_profile',
|
||||
'Custom': 'custom_profile'
|
||||
};
|
||||
let profile = 'Normal';
|
||||
|
||||
let mouseLat = 0;
|
||||
let mouseLng = 0;
|
||||
|
||||
let startPoint = 'Custom';
|
||||
let startHeight = 0;
|
||||
let startTime = '13:13';
|
||||
let startDate = new Date(2025, 2, 24);
|
||||
let ascentRate = 5;
|
||||
let burstAltitude = 30000;
|
||||
let flightProfile = 'Normal';
|
||||
let descentRate = 5;
|
||||
let forecastMode = 'Single';
|
||||
let inputLat = '56.3576';
|
||||
let inputLng = '39.8666';
|
||||
let now = new Date();
|
||||
let startDate = now.toISOString().split('T')[0]; // YYYY-MM-DD
|
||||
let startTime = now.toISOString().split('T')[1].split('.')[0]; // HH:MM:SS
|
||||
|
||||
function formatLaunchDateTime(dateObj, timeStr) {
|
||||
// Ensure date is a Date object
|
||||
const date = new Date(dateObj);
|
||||
|
||||
// Extract date components
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
|
||||
// Format time (ensure it has seconds)
|
||||
let formattedTime = timeStr;
|
||||
if (timeStr.split(':').length === 2) {
|
||||
formattedTime += ':00'; // Add seconds if missing
|
||||
}
|
||||
|
||||
// Combine into ISO string
|
||||
const isoString = new Date(`${year}-${month}-${day}T${formattedTime}Z`).toISOString();
|
||||
|
||||
return isoString;
|
||||
}
|
||||
const launch_datetime = formatLaunchDateTime(startDate, startTime);
|
||||
|
||||
const getForecast = async () => {
|
||||
const profileMap = {
|
||||
'Normal': 'standard_profile',
|
||||
'Float': 'float_profile',
|
||||
'Reverse (ascent only)': 'ascent_only_profile',
|
||||
'Custom': 'custom_profile'
|
||||
};
|
||||
|
||||
// Create request object
|
||||
const request = {
|
||||
ascent_rate: parseFloat(ascentRate),
|
||||
burst_altitude: parseFloat(burstAltitude),
|
||||
dataset: new Date().toISOString(), // Current time as dataset timestamp
|
||||
descent_rate: parseFloat(descentRate),
|
||||
let flightParameters = {
|
||||
ascent_rate: 5.0,
|
||||
burst_altitude: 30000.0,
|
||||
dataset: "",
|
||||
descent_rate: 5.0,
|
||||
format: "json",
|
||||
launch_altitude: parseFloat(startHeight),
|
||||
launch_datetime,
|
||||
launch_latitude: parseFloat(inputLat),
|
||||
launch_longitude: parseFloat(inputLng),
|
||||
profile: profileMap[flightProfile] || 'standard_profile',
|
||||
launch_altitude: 0.0,
|
||||
launch_datetime: "",
|
||||
launch_latitude: 62.1234,
|
||||
launch_longitude: 129.1234,
|
||||
profile: "standard_profile",
|
||||
version: 2
|
||||
};
|
||||
|
||||
console.log("Sending request:", request);
|
||||
|
||||
try {
|
||||
// Example POST request - replace with your actual API endpoint
|
||||
const response = await fetch('http://127.0.0.1:8000/api/predictions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(request)
|
||||
const get_prediction = () => {
|
||||
getForecast(flightParameters, startDate, startTime).then((response) => {
|
||||
console.log(response);
|
||||
}).catch((error) => {
|
||||
console.error("Error fetching forecast:", error);
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log("Forecast response:", data);
|
||||
alert("Forecast request successful!");
|
||||
// Handle the response data as needed
|
||||
} catch (error) {
|
||||
console.error("Error sending forecast request:", error);
|
||||
alert("Error getting forecast: " + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
// Helper function to format date as YYYY-MM-DD
|
||||
const formatDateForAPI = (date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
const get_map_position = () => {
|
||||
dispatch('getMapPosition', { lat: mouseLat, lng: mouseLng });
|
||||
};
|
||||
|
||||
function handleUpdatePosition() {
|
||||
dispatch('updatePosition', {
|
||||
lat: inputLat,
|
||||
lng: inputLng
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="card shadow-lg position-absolute bottom-0 end-0 m-3" style="width: 22rem; max-height: 80vh; overflow-y: auto; z-index: 1000;">
|
||||
<div class="card shadow-lg position-absolute bottom-0 end-0 m-3" style="width: 23rem; max-height: 80vh; overflow-y: auto; z-index: 1000;">
|
||||
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
|
||||
<h6 class="card-title mb-0">Prediction Parameters</h6>
|
||||
<h6 class="card-title mb-0">Параметры прогнозирования</h6>
|
||||
<button class="btn btn-sm btn-primary" on:click={() => (isCollapsed = !isCollapsed)}>
|
||||
{#if isCollapsed}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-left-fill" viewBox="0 0 16 16">
|
||||
|
|
@ -124,7 +67,7 @@
|
|||
{#if !isCollapsed}
|
||||
<div class="card-body">
|
||||
<div class="mb-2">
|
||||
<label class="form-label small">Start Point:</label>
|
||||
<label for="startPoint" class="form-label small">Точка старта:</label>
|
||||
<div class="input-group input-group-sm">
|
||||
<select id="startPoint" class="form-select" bind:value={startPoint}>
|
||||
<option>Custom</option>
|
||||
|
|
@ -132,7 +75,7 @@
|
|||
<option>Preset 2</option>
|
||||
</select>
|
||||
<button class="btn btn-secondary" title="Edit Saved Locations" on:click={() => dispatch('openLocationsEditor')}>
|
||||
<span>Edit</span>
|
||||
<span>Редакт.</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-bookmark-fill" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M6 1h6v7a.5.5 0 0 1-.757.429L9 7.083 6.757 8.43A.5.5 0 0 1 6 8z"/>
|
||||
<path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2"/>
|
||||
|
|
@ -143,66 +86,64 @@
|
|||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label small">Latitude/Longitude:</label>
|
||||
<label for="latitude" class="form-label small">Широта/Долгота:</label>
|
||||
<div class="input-group input-group-sm">
|
||||
<input type="text" class="form-control" bind:value={inputLat} placeholder="Latitude">
|
||||
<input id="latitude" type="text" class="form-control" bind:value={flightParameters.launch_latitude} placeholder="Latitude">
|
||||
<span class="input-group-text">/</span>
|
||||
<input type="text" class="form-control" bind:value={inputLng} placeholder="Longitude">
|
||||
<input id="longitude" type="text" class="form-control" bind:value={flightParameters.launch_longitude} placeholder="Longitude">
|
||||
<button on:click={handleUpdatePosition} class="btn btn-success btn-sm">✓</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<button class="btn btn-outline-secondary btn-sm w-100" on:click={() => {
|
||||
inputLat = mouseLat;
|
||||
inputLng = mouseLng;
|
||||
updateMapPosition();
|
||||
}}>Specify on map (click location)</button>
|
||||
get_map_position();
|
||||
}}>Указать на карте</button>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label for="startHeight" class="form-label small">Launch Height (m):</label>
|
||||
<input type="number" id="startHeight" class="form-control form-control-sm" bind:value={startHeight}>
|
||||
<label for="startHeight" class="form-label small">Высота точки старта:</label>
|
||||
<input type="number" id="startHeight" class="form-control form-control-sm" bind:value={flightParameters.launch_altitude}>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 d-flex gap-2">
|
||||
<div class="flex-fill">
|
||||
<label for="startTime" class="form-label small">Launch Time (UTC):</label>
|
||||
<label for="startTime" class="form-label small">Время старта (UTC):</label>
|
||||
<input type="time" id="startTime" class="form-control form-control-sm" bind:value={startTime}>
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<label for="startDate" class="form-label small">Launch Date:</label>
|
||||
<label for="startDate" class="form-label small">Дата старта:</label>
|
||||
<input type="date" id="startDate" class="form-control form-control-sm" bind:value={startDate}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 d-flex gap-2">
|
||||
<div class="flex-fill">
|
||||
<label for="ascentRate" class="form-label small">Ascent Rate (m/s):</label>
|
||||
<input type="number" id="ascentRate" class="form-control form-control-sm" bind:value={ascentRate}>
|
||||
<label for="ascentRate" class="form-label small">Скорость подъема (м/c):</label>
|
||||
<input type="number" id="ascentRate" class="form-control form-control-sm" bind:value={flightParameters.ascent_rate}>
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<label for="descentRate" class="form-label small">Descent Rate (m/s):</label>
|
||||
<input type="number" id="descentRate" class="form-control form-control-sm" bind:value={descentRate}>
|
||||
<label for="descentRate" class="form-label small">Скорость спуска (м/с):</label>
|
||||
<input type="number" id="descentRate" class="form-control form-control-sm" bind:value={flightParameters.descent_rate}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label for="burstAltitude" class="form-label small">Burst/Drift Altitude (m):</label>
|
||||
<input type="number" id="burstAltitude" class="form-control form-control-sm" bind:value={burstAltitude}>
|
||||
<label for="burstAltitude" class="form-label small">Высота разрыва (м):</label>
|
||||
<input type="number" id="burstAltitude" class="form-control form-control-sm" bind:value={flightParameters.burst_altitude}>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label for="flightProfile" class="form-label small">Flight Profile:</label>
|
||||
<label for="flightProfile" class="form-label small">Профиль полета:</label>
|
||||
<div class="input-group input-group-sm">
|
||||
<select id="flightProfile" class="form-select" bind:value={flightProfile}>
|
||||
<select id="flightProfile" class="form-select" bind:value={profile} on:change={() => flightParameters.profile = profileMap[profile] || 'standard_profile'}>
|
||||
<option>Normal</option>
|
||||
<option>Float</option>
|
||||
<option>Reverse (ascent only)</option>
|
||||
<option>Custom</option>
|
||||
</select>
|
||||
<button class="btn btn-secondary btn-sm" title="Edit profile" disabled={flightProfile !== 'Custom'}>
|
||||
<span>Edit</span>
|
||||
<button class="btn btn-secondary btn-sm" title="Edit profile" disabled={flightParameters.profile !== 'Custom'}>
|
||||
<span>Редакт.</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
|
||||
<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
|
||||
</svg>
|
||||
|
|
@ -211,9 +152,9 @@
|
|||
</div>
|
||||
|
||||
<div class="mb-2 d-grid gap-1">
|
||||
<button class="btn btn-outline-secondary btn-sm">Show Last Altitude Graph</button>
|
||||
<button class="btn btn-secondary btn-sm">Save as Template</button>
|
||||
<button class="btn btn-sm btn-primary" on:click={getForecast}>Run Prediction</button>
|
||||
<button class="btn btn-outline-secondary btn-sm">Показать график высоты</button>
|
||||
<button class="btn btn-secondary btn-sm">Сохранить как шаблон</button>
|
||||
<button class="btn btn-sm btn-primary" on:click={get_prediction}>Выполнить прогнозирование</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,120 +0,0 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import * as L from 'leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
|
||||
/**
|
||||
* @type {{ removeLayer: (arg0: any) => void; setView: (arg0: number[], arg1: any) => void; getZoom: () => any; on: (arg0: string, arg1: (e: any) => void) => void; }}
|
||||
*/
|
||||
let map;
|
||||
let mouseLat = 0;
|
||||
let mouseLng = 0;
|
||||
/**
|
||||
* @type {null}
|
||||
*/
|
||||
let marker = null;
|
||||
|
||||
let startPoint = 'Custom';
|
||||
let startHeight = 0;
|
||||
let startTime = '13:13';
|
||||
let startDate = new Date(2025, 2, 24);
|
||||
let ascentRate = 5;
|
||||
let burstAltitude = 30000;
|
||||
let flightProfile = 'Normal';
|
||||
let descentRate = 5;
|
||||
let forecastMode = 'Single';
|
||||
let inputLat = '56.3576';
|
||||
let inputLng = '39.8666';
|
||||
|
||||
let showBurstCalculator = false;
|
||||
let payloadMass = 1500;
|
||||
let balloonMass = 1000;
|
||||
let desiredBurstAltitude = 33000;
|
||||
let desiredAscentRate = 2.33;
|
||||
|
||||
let burstAltitudeResult = 33000;
|
||||
let timeToBurst = 236;
|
||||
let initialVolume = 2.66;
|
||||
let ascentRateResult = 2.33;
|
||||
let liftForce = 1733;
|
||||
let volumeLiters = 2662;
|
||||
let volumeCubicFeet = 94.0;
|
||||
|
||||
const toggleBurstCalculator = () => {
|
||||
showBurstCalculator = !showBurstCalculator;
|
||||
};
|
||||
|
||||
const calculateBurst = () => {
|
||||
// In a real app, you would implement actual calculations here
|
||||
// These are just placeholder values matching your image
|
||||
burstAltitudeResult = desiredBurstAltitude;
|
||||
timeToBurst = 236;
|
||||
initialVolume = 2.66;
|
||||
ascentRateResult = desiredAscentRate;
|
||||
liftForce = 1733;
|
||||
volumeLiters = 2662;
|
||||
volumeCubicFeet = 94.0;
|
||||
};
|
||||
|
||||
const updateMapPosition = () => {
|
||||
const lat = parseFloat(inputLat);
|
||||
const lng = parseFloat(inputLng);
|
||||
|
||||
if (isNaN(lat)) {
|
||||
alert("Please enter a valid latitude");
|
||||
return;
|
||||
}
|
||||
if (isNaN(lng)) {
|
||||
alert("Please enter a valid longitude");
|
||||
return;
|
||||
}
|
||||
if (lat < -90 || lat > 90) {
|
||||
alert("Latitude must be between -90 and 90");
|
||||
return;
|
||||
}
|
||||
if (lng < -180 || lng > 180) {
|
||||
alert("Longitude must be between -180 and 180");
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove existing marker if it exists
|
||||
if (marker) {
|
||||
map.removeLayer(marker);
|
||||
}
|
||||
|
||||
// Create new marker
|
||||
marker = L.marker([lat, lng]).addTo(map)
|
||||
.bindPopup("Launch Point");
|
||||
|
||||
// Center map on new coordinates
|
||||
map.setView([lat, lng], map.getZoom());
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
map = L.map('map').setView([51.505, -0.09], 13);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
|
||||
map.on('mousemove', (e) => {
|
||||
mouseLat = e.latlng.lat.toFixed(6);
|
||||
mouseLng = e.latlng.lng.toFixed(6);
|
||||
});
|
||||
|
||||
marker = L.marker([56.3576, 39.8666]).addTo(map)
|
||||
.bindPopup(() => {
|
||||
return `
|
||||
<b>Launch Point</b><br>, Lat: ${marker.getLatLng().lat.toFixed(6)}<br>, Long: ${marker.getLatLng().lng.toFixed(6)}<br>
|
||||
`;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="container-fluid position-relative h-100">
|
||||
<div id="map" class="w-100 h-100 position-absolute"></div>
|
||||
<div class="position-absolute top-0 end-0 bg-light p-2 rounded shadow-sm">
|
||||
Lat: {mouseLat}, Long: {mouseLng}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -2,9 +2,12 @@
|
|||
import { onMount } from 'svelte';
|
||||
import * as L from 'leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import { distHaversine } from '../lib/mathutil.ts';
|
||||
|
||||
import { latestPredictionParsed } from '../lib/prediction.ts';
|
||||
|
||||
/**
|
||||
* @type {{ removeLayer: (arg0: any) => void; setView: (arg0: number[], arg1: any) => void; getZoom: () => any; on: (arg0: string, arg1: (e: any) => void) => void; }}
|
||||
* @type {L.Map}
|
||||
*/
|
||||
let map;
|
||||
let mouseLat = 0;
|
||||
|
|
@ -70,7 +73,80 @@
|
|||
<b>Launch Point</b><br>, Lat: ${marker.getLatLng().lat.toFixed(6)}<br>, Long: ${marker.getLatLng().lng.toFixed(6)}<br>
|
||||
`;
|
||||
});
|
||||
|
||||
latestPredictionParsed.subscribe((prediction) => {
|
||||
if (prediction) {
|
||||
plotPrediction(prediction);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const plotPrediction = (prediction) => {
|
||||
console.log("Flight data parsed, creating map plot...");
|
||||
|
||||
// Clear existing map items
|
||||
if (marker) {
|
||||
map.eachLayer((layer) => {
|
||||
if (layer instanceof L.Marker || layer instanceof L.Polyline) {
|
||||
map.removeLayer(layer);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const { launch, landing, burst, flight_path, flight_time } = prediction;
|
||||
|
||||
// Calculate range and time of flight
|
||||
const range = distHaversine(launch.latlng, landing.latlng, 1);
|
||||
const f_hours = Math.floor(flight_time / 3600);
|
||||
const f_minutes = Math.floor(((flight_time % 86400) % 3600) / 60).toString().padStart(2, '0');
|
||||
const flighttime = `${f_hours}hr${f_minutes}`;
|
||||
console.log(`Range: ${range}, Flight Time: ${flighttime}`);
|
||||
|
||||
// Create custom icons
|
||||
const launchIcon = L.icon({
|
||||
iconUrl: 'target-blue.png',
|
||||
iconSize: [10, 10],
|
||||
iconAnchor: [5, 5],
|
||||
});
|
||||
|
||||
const landIcon = L.icon({
|
||||
iconUrl: 'target-red.png',
|
||||
iconSize: [10, 10],
|
||||
iconAnchor: [5, 5],
|
||||
});
|
||||
|
||||
const burstIcon = L.icon({
|
||||
iconUrl: 'pop-marker.png',
|
||||
iconSize: [16, 16],
|
||||
iconAnchor: [8, 8],
|
||||
});
|
||||
|
||||
// Add markers to the map
|
||||
const launchMarker = L.marker(launch.latlng, {
|
||||
title: `Launch (${launch.latlng.lat.toFixed(4)}, ${launch.latlng.lng.toFixed(4)}) at ${launch.datetime.toUTCString()}`,
|
||||
icon: launchIcon,
|
||||
}).addTo(map);
|
||||
|
||||
const landMarker = L.marker(landing.latlng, {
|
||||
title: `Landing (${landing.latlng.lat.toFixed(4)}, ${landing.latlng.lng.toFixed(4)}) at ${landing.datetime.toUTCString()}`,
|
||||
icon: landIcon,
|
||||
}).addTo(map);
|
||||
|
||||
const burstMarker = L.marker(burst.latlng, {
|
||||
title: `Burst (${burst.latlng.lat.toFixed(4)}, ${burst.latlng.lng.toFixed(4)} at altitude ${burst.latlng.alt.toFixed(0)}) at ${burst.datetime.toUTCString()}`,
|
||||
icon: burstIcon,
|
||||
}).addTo(map);
|
||||
|
||||
// Add flight path polyline
|
||||
const pathPolyline = L.polyline(flight_path, {
|
||||
weight: 3,
|
||||
color: "#000000",
|
||||
}).addTo(map);
|
||||
|
||||
// Center the map on the launch point
|
||||
map.setView(launch.latlng, 8);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<div class="map-container">
|
||||
|
|
|
|||
BIN
static/pop-marker.png
Normal file
BIN
static/pop-marker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 776 B |
BIN
static/target-blue.png
Normal file
BIN
static/target-blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
static/target-red.png
Normal file
BIN
static/target-red.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Loading…
Add table
Add a link
Reference in a new issue