Skip to content
GitLab
Commit a4c85a7b authored by JOE XMG's avatar JOE XMG
Browse files

update

parent 90443acc
master
No related merge requests found
Pipeline #9121 passed with stage
in 21 seconds
Hide whitespace changes
Inline Side-by-side
Showing
with 116 additions and 116 deletions
+116 -116
public/udigit4icity/STC.html
+ 116
- 116
View file @ a4c85a7b
...@@ -10,25 +10,32 @@ ...@@ -10,25 +10,32 @@
<script src="https://cdn.jsdelivr.net/npm/plotly.js-dist@latest"></script> <script src="https://cdn.jsdelivr.net/npm/plotly.js-dist@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<style> <style>
body {
background-color: white; /* Set the background color to white */
}
#plotlyContainer { #plotlyContainer {
height: 100vh; height: 100vh;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
top: 6%; top: 6%;
right:100; right: 100; /* Assuming you meant right: 100px */
width: 100%; width: 100%;
z-index: 3; z-index: 3;
} }
#toggleSpaceTime {
padding: 10px 20px;
font-size: 16px;
}
</style> </style>
</head> </head>
<body> <body>
<!-- Add your HTML content here --> <!-- Add your HTML content here -->
<button id="toggleSpaceTime">Toggle Space-Time Cube</button> <button id="toggleSpaceTime">Bus Space-Time Cube Visualization </button>
<div id="spaceTimeCubeContainer" style="display: none;"> <div id="spaceTimeCubeContainer" style="display: none;">
<!-- Container for the space-time cube visualization --> <!-- Container for the space-time cube visualization -->
<div id="spaceTimeCube"></div> <div id="spaceTimeCube"></div>
...@@ -38,7 +45,6 @@ ...@@ -38,7 +45,6 @@
<div id="plotlyContainer"></div> <div id="plotlyContainer"></div>
<script> <script>
document.getElementById("toggleSpaceTime").addEventListener("click", function () { document.getElementById("toggleSpaceTime").addEventListener("click", function () {
const spaceTimeContainer = document.getElementById("spaceTimeCubeContainer"); const spaceTimeContainer = document.getElementById("spaceTimeCubeContainer");
console.log("Toggle button clicked"); console.log("Toggle button clicked");
...@@ -53,121 +59,115 @@ ...@@ -53,121 +59,115 @@
} }
}); });
function animateSpaceTimeRoute(url, containerId, trainColor, trainName) { function animateSpaceTimeRoute(url) {
fetch(url) fetch(url)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
if (!data || !data.features) { if (!data || !data.features) {
console.error('Invalid data format:', data); console.error('Invalid data format:', data);
return; return;
} }
const frames = data.features.map((feature, index) => { const frames = data.features.map((feature, index) => {
const coordinates = feature.geometry.coordinates; const coordinates = feature.geometry.coordinates;
const timestamps = feature.properties.datetimes; const timestamps = feature.properties.datetimes;
if (!Array.isArray(coordinates) || !Array.isArray(timestamps)) { if (!Array.isArray(coordinates) || !Array.isArray(timestamps)) {
console.error('Invalid feature format:', feature); console.error('Invalid feature format:', feature);
return; return;
}
const lineColors = Array.from({ length: coordinates.length - 1 }, () => 'orange'); // Create an array of orange colors
return {
data: [
{
type: 'scattermapbox',
lat: coordinates.map(coord => coord[1]),
lon: coordinates.map(coord => coord[0]),
mode: 'lines+markers', // Display both points and lines
marker: { size: 6, color: 'black' },
line: { color: 'black' }, // This line is not used when mode is 'lines+markers'
name: 'Bus route',
},
{
type: 'scatter3d',
x: coordinates.map(coord => coord[0]),
y: coordinates.map(coord => coord[1]),
z: timestamps.map((time, i) => new Date(time).toISOString()),
mode: 'lines+markers', // Change mode to display both points and lines
marker: { color: 'black', size: 5 },
line: { color: 'red', size: 3 },
name: 'Bus trajectory line',
},
],
name: `frame${index + 1}`,
};
});
// Set the layout with mapbox style and access token
const layout = {
mapbox: {
style: 'light',
center: { lon: frames[0].data[0].lon[0], lat: frames[0].data[0].lat[0] },
zoom: 10,
accesstoken: 'pk.eyJ1IjoicmVkaWV0OTk2MyIsImEiOiJjbHJ1cmk5aGUwaDRvMmpuYWM4Z2NqcmZuIn0.c11HYT-5ucd6g6mL03bp3Q', // Mapbox access token
},
margin: { t: 0, b: 0, l: 0, r: 0 },
scene: {
xaxis: {
title: 'Long',
titlefont: {
family: 'Arial, sans-serif',
size: 15,
color: 'black'
},
tickfont: {
family: 'Arial, sans-serif',
size: 15,
color: 'black',
bold: true
}
},
yaxis: {
title: 'Lat',
titlefont: {
family: 'Arial, sans-serif',
size: 15,
color: 'black'
},
tickfont: {
family: 'Arial, sans-serif',
size: 15,
color: 'black',
bold: true
}
},
zaxis: {
title: 'Time',
titlefont: {
family: 'Arial, sans-serif',
size: 16,
color: 'black'
},
tickfont: {
family: 'Arial, sans-serif',
size: 15,
color: 'black',
bold: true
} }
},
// Common font settings for both return {
font: { data: [{
type: 'scatter3d',
x: coordinates.map(coord => coord[0]),
y: coordinates.map(coord => coord[1]),
z: timestamps.map((time, i) => new Date(time).toISOString()),
mode: 'lines+markers', // Change mode to display both points and lines
marker: {color: 'black',size: 5},
line: {color: 'red',size: 3
},
name: 'Bus trajectory line',
},
],
name: `frame${index + 1}`,
};
});
const layout = {
margin: {
t: 0,
b: 0,
l: 0,
r: 0
},
paper_bgcolor: 'white',
plot_bgcolor: 'white',
scene: {
xaxis: {
title: 'Long',
titlefont: {
family: 'Arial, sans-serif',
size: 15,
color: 'black'
},
tickfont: {
family: 'Arial, sans-serif',
size: 15,
color: 'black',
bold: true
}
},
yaxis: {
title: 'Lat',
titlefont: {
family: 'Arial, sans-serif',
size: 15,
color: 'black'
},
tickfont: {
family: 'Arial, sans-serif', family: 'Arial, sans-serif',
size: 12, size: 15,
color: 'black', color: 'black',
bold: true bold: true
}
} }
}; },
zaxis: {
title: 'Time',
titlefont: {
family: 'Arial, sans-serif',
size: 16,
color: 'black'
},
tickfont: {
family: 'Arial, sans-serif',
size: 15,
color: 'black',
bold: true
}
},
font: {
family: 'Arial, sans-serif',
size: 12,
color: 'black',
bold: true
}
},
legend: {
traceorder: 'normal' // Set traceorder to 'normal' to display legends
}
};
// Initialize Plotly container // Initialize Plotly container
Plotly.newPlot('plotlyContainer', frames[0].data, layout); Plotly.newPlot('plotlyContainer', frames[0].data, layout);
Plotly.addFrames('plotlyContainer', frames); Plotly.addFrames('plotlyContainer', frames);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching data:', error); console.error('Error fetching data:', error);
}); });
} }
</script> </script>
</body> </body>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal