Spaces:
Running
Running
update graphe for video static
Browse files- src/views/HomeView.vue +13 -24
src/views/HomeView.vue
CHANGED
@@ -28,13 +28,7 @@ const dragActive = ref(false)
|
|
28 |
const selectedTestImage = ref(null)
|
29 |
|
30 |
// Image de test
|
31 |
-
const
|
32 |
-
id: 'field1',
|
33 |
-
name: 'Terrain de test',
|
34 |
-
description: 'Image d\'exemple pour tester l\'analyse',
|
35 |
-
thumbnail: fieldTestImage,
|
36 |
-
fullUrl: fieldTestImage
|
37 |
-
})
|
38 |
|
39 |
// États pour la vue manuelle
|
40 |
const thumbnail = ref(null)
|
@@ -148,14 +142,14 @@ const selectMode = (mode) => {
|
|
148 |
calibrationStore.setMode(mode)
|
149 |
}
|
150 |
|
151 |
-
const selectTestImage = async (
|
152 |
try {
|
153 |
-
selectedTestImage.value =
|
154 |
|
155 |
// Créer un objet File à partir de l'URL de l'image de test
|
156 |
-
const response = await fetch(
|
157 |
const blob = await response.blob()
|
158 |
-
const file = new File([blob],
|
159 |
|
160 |
uploadStore.setFile(file)
|
161 |
|
@@ -171,8 +165,8 @@ const selectTestImage = async (testImage) => {
|
|
171 |
} catch (error) {
|
172 |
console.error('Erreur lors du chargement de l\'image de test:', error)
|
173 |
// Fallback: utiliser l'URL directement pour la preview
|
174 |
-
uploadStore.filePreview =
|
175 |
-
uploadStore.selectedFile = { name:
|
176 |
uploadStore.fileType = 'image'
|
177 |
}
|
178 |
}
|
@@ -723,10 +717,10 @@ const onChartError = (error) => {
|
|
723 |
<div class="test-image-container">
|
724 |
<div
|
725 |
class="test-image-card single"
|
726 |
-
@click="selectTestImage
|
727 |
-
:class="{ selected: selectedTestImage ===
|
728 |
>
|
729 |
-
<img :src="
|
730 |
<div class="test-image-overlay">
|
731 |
<div class="overlay-content">
|
732 |
<p>Vue Drone</p>
|
@@ -949,8 +943,8 @@ const onChartError = (error) => {
|
|
949 |
</button>
|
950 |
</div>
|
951 |
|
952 |
-
<!-- Graphique 3D pour les images avec calibration réussie -->
|
953 |
-
<div v-if="uploadStore.isImage" class="result-chart">
|
954 |
<h3>Terrain de Football - Vue 3D</h3>
|
955 |
<PlotlyChart
|
956 |
data-type="football-field"
|
@@ -1363,12 +1357,7 @@ const onChartError = (error) => {
|
|
1363 |
color: white;
|
1364 |
}
|
1365 |
|
1366 |
-
|
1367 |
-
font-size: 1.25rem;
|
1368 |
-
font-weight: 600;
|
1369 |
-
margin: 0 0 0.5rem 0;
|
1370 |
-
color: var(--color-primary);
|
1371 |
-
}
|
1372 |
|
1373 |
.overlay-content p {
|
1374 |
font-size: 0.9rem;
|
|
|
28 |
const selectedTestImage = ref(null)
|
29 |
|
30 |
// Image de test
|
31 |
+
const testImageUrl = ref(fieldTestImage)
|
|
|
|
|
|
|
|
|
|
|
|
|
32 |
|
33 |
// États pour la vue manuelle
|
34 |
const thumbnail = ref(null)
|
|
|
142 |
calibrationStore.setMode(mode)
|
143 |
}
|
144 |
|
145 |
+
const selectTestImage = async () => {
|
146 |
try {
|
147 |
+
selectedTestImage.value = 'test'
|
148 |
|
149 |
// Créer un objet File à partir de l'URL de l'image de test
|
150 |
+
const response = await fetch(testImageUrl.value)
|
151 |
const blob = await response.blob()
|
152 |
+
const file = new File([blob], 'field_test_thumb.jpg', { type: 'image/jpeg' })
|
153 |
|
154 |
uploadStore.setFile(file)
|
155 |
|
|
|
165 |
} catch (error) {
|
166 |
console.error('Erreur lors du chargement de l\'image de test:', error)
|
167 |
// Fallback: utiliser l'URL directement pour la preview
|
168 |
+
uploadStore.filePreview = testImageUrl.value
|
169 |
+
uploadStore.selectedFile = { name: 'test-image.jpg', size: 0 }
|
170 |
uploadStore.fileType = 'image'
|
171 |
}
|
172 |
}
|
|
|
717 |
<div class="test-image-container">
|
718 |
<div
|
719 |
class="test-image-card single"
|
720 |
+
@click="selectTestImage"
|
721 |
+
:class="{ selected: selectedTestImage === 'test' }"
|
722 |
>
|
723 |
+
<img :src="testImageUrl" :alt="'Test Image'" class="test-image-thumb">
|
724 |
<div class="test-image-overlay">
|
725 |
<div class="overlay-content">
|
726 |
<p>Vue Drone</p>
|
|
|
943 |
</button>
|
944 |
</div>
|
945 |
|
946 |
+
<!-- Graphique 3D pour les images et vidéos statiques avec calibration réussie -->
|
947 |
+
<div v-if="uploadStore.isImage || uploadStore.isStaticVideo" class="result-chart">
|
948 |
<h3>Terrain de Football - Vue 3D</h3>
|
949 |
<PlotlyChart
|
950 |
data-type="football-field"
|
|
|
1357 |
color: white;
|
1358 |
}
|
1359 |
|
1360 |
+
|
|
|
|
|
|
|
|
|
|
|
1361 |
|
1362 |
.overlay-content p {
|
1363 |
font-size: 0.9rem;
|