Debugging: add test view

This commit is contained in:
Pieter Vander Vennet 2024-11-24 23:19:17 +01:00
parent fe0e2e68ac
commit 5836e43bc3
2 changed files with 89 additions and 5 deletions

View file

@ -192,9 +192,9 @@ export default class PanoramaxImageProvider extends ImageProvider {
export class PanoramaxUploader implements ImageUploader {
public readonly panoramax: AuthorizedPanoramax
maxFileSizeInMegabytes = 100 * 1000 * 1000 // 100MB
private readonly _targetSequence: Store<string>
private readonly _targetSequence?: Store<string>
constructor(url: string, token: string, targetSequence: Store<string>) {
constructor(url: string, token: string, targetSequence?: Store<string>) {
this._targetSequence = targetSequence
this.panoramax = new AuthorizedPanoramax(url, token)
}
@ -212,16 +212,16 @@ export class PanoramaxUploader implements ImageUploader {
}> {
// https://panoramax.openstreetmap.fr/api/docs/swagger#/
let [lon, lat] = currentGps
let [lon, lat] = currentGps ?? [undefined, undefined]
let datetime = new Date().toISOString()
try {
const tags = await ExifReader.load(blob)
const [[latD], [latM], [latS, latSDenom]] = <
[[number, number], [number, number], [number, number]]
>tags?.GPSLatitude.value
>tags?.GPSLatitude?.value
const [[lonD], [lonM], [lonS, lonSDenom]] = <
[[number, number], [number, number], [number, number]]
>tags?.GPSLongitude.value
>tags?.GPSLongitude?.value
lat = latD + latM / 60 + latS / (3600 * latSDenom)
lon = lonD + lonM / 60 + lonS / (3600 * lonSDenom)

View file

@ -1,2 +1,86 @@
<script lang="ts">
import FileSelector from "./Base/FileSelector.svelte"
import { UIEventSource } from "../Logic/UIEventSource"
import ExifReader from "exifreader"
import Constants from "../Models/Constants"
import { AuthorizedPanoramax, ImageData } from "panoramax-js"
import PanoramaxImageProvider from "../Logic/ImageProviders/Panoramax"
let log = new UIEventSource<string[]>(["Select a file to test..."])
function l(...txt: ReadonlyArray<string | number>) {
console.log(...txt)
log.set([...log.data, txt.join(" ")])
}
async function onSubmit(fs: FileList) {
const f = fs[0]
l("Files are", f.name)
let [lon, lat] = [3.5, 51.2]
let datetime = new Date().toISOString()
try {
l("Trying to read EXIF-data from the file...")
const tags = await ExifReader.load(f)
l("Exif data loaded")
l("GPSLatitude.value is :", JSON.stringify(tags?.GPSLatitude.value))
l("GPSLongitude.value is :", JSON.stringify(tags?.GPSLongitude.value))
const [[latD], [latM], [latS, latSDenom]] = <
[[number, number], [number, number], [number, number]]
>tags?.GPSLatitude?.value
const [[lonD], [lonM], [lonS, lonSDenom]] = <
[[number, number], [number, number], [number, number]]
>tags?.GPSLongitude?.value
lat = latD + latM / 60 + latS / (3600 * latSDenom)
lon = lonD + lonM / 60 + lonS / (3600 * lonSDenom)
l("Lat and lon are", lat, lon)
l("Datetime value is", JSON.stringify(tags.DateTime))
const [date, time] = tags.DateTime.value[0].split(" ")
datetime = new Date(date.replaceAll(":", "-") + "T" + time).toISOString()
l("Datetime parsed is", datetime)
console.log("Tags are", tags)
} catch (e) {
console.error("Could not read EXIF-tags")
l("Could not read the exif tags:", e, JSON.stringify(e))
}
try {
const p = new AuthorizedPanoramax(
Constants.panoramax.url,
Constants.panoramax.token,
)
const sequenceId = "7f34cf53-27ff-46c9-ac22-78511fa8457a" // test-sequence
l("Fetching sequence number...")
const sequence: { id: string; "stats:items": { count: number } } = (
await p.mySequences()
).find((s) => s.id === sequenceId)
l("Sequence number is", sequence["stats:items"].count, "now attempting upload")
const img = <ImageData>await p.addImage(f, sequence, {
lon,
lat,
datetime,
isBlurred: false,
exifOverride: {
"Artist": "TEST ACCOUNT",
},
})
l("Upload completed. Adding meta")
PanoramaxImageProvider.singleton.addKnownMeta(img)
l("Meta added")
} catch (e) {
l("Error while uploading:", e)
}
}
</script>
<FileSelector accept="image/jpg" multiple={false} on:submit={(f) => onSubmit(f.detail)}>
<div class="border border-black p-1">Select file</div>
</FileSelector>
<div class="flex flex-col">
{#each $log as logl}
<div>{logl}</div>
{/each}
</div>