ztimson/weather-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated image handling for adsb/ais

Browse Source
This commit is contained in:
Zakary Timson
2026-07-04 22:40:43 -04:00
parent 43848c4b35
commit b62f7da629
2 changed files with 6 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/components/Aircraft.vue
View File

@@ -16,6 +16,7 @@ const BASE_VERTICAL_UNITS = {
fps: { label: 'FT/S', convert: (v: number) => v },
}
const photoError = ref(false);
const UNIT_KEY = 'at_units'
function loadUnits() {
const s = localStorage.getItem(UNIT_KEY)
@@ -49,30 +50,6 @@ const climbVal = computed(() => { const v = vertical.value.convert(props.plan
const description = computed(() => props.plane.desc || [props.plane.manufacturer, props.plane.model].filter(Boolean).join(' ') || '')
const operator = computed(() => props.plane.operator || props.plane.owner || '')
// ── Aircraft photo ────────────────────────────────────────────────────────────
const photoUrl = ref<string | null>(null)
const isSil = ref(false)
const photoLoading = ref(false)
async function fetchPhoto(icao: string, type: string) {
photoUrl.value = null
isSil.value = false
if (!icao) return
photoLoading.value = true
const res = await fetch(`https://api.planespotters.net/pub/photos/hex/${icao.toLowerCase()}`)
const data = await res.json()
const photo = data?.photos?.[0]
if (photo) {
photoUrl.value = photo.thumbnail_large?.src ?? photo.thumbnail?.src ?? null
} else {
photoUrl.value = `https://globe.adsbexchange.com/aircraft_sil/${type}.png`
isSil.value = true
}
photoLoading.value = false
}
watch(() => props.plane, (plane) => fetchPhoto(plane.icao || plane.hex, plane.aircraft), { immediate: true })
// ── Drag ──────────────────────────────────────────────────────────────────────
const pos = ref({ ...props.position })
const isDragging = ref(false)
@@ -241,8 +218,8 @@ const navball = computed(() => {
</div>
<!-- Photo -->
<div v-if="photoUrl" class="ap-photo-wrap">
<img class="ap-photo" :class="{ 'ap-photo--sil': isSil }" :src="BASE + '/api/adsb-image/' + plane.icao" :alt="callsign" />
<div v-if="!photoError" class="ap-photo-wrap">
<img class="ap-photo" :src="BASE + '/api/adsb-image/' + plane.icao" :alt="callsign" @error="photoError = true" />
</div>
<!-- Body -->

13
client/src/components/Ship.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import {BASE} from '@/services/api.ts';
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
const props = defineProps<{ boat: any; position: { x: number; y: number } }>()
@@ -27,16 +28,8 @@ const speed = computed(() => SPEED_UNITS[prefs.value.speed as keyof typeof SPEED
const name = computed(() => props.boat.name?.trim() || props.boat.callsign?.trim() || '-')
const heading = computed(() => props.boat.heading ?? props.boat.course ?? 0)
const speedVal = computed(() => speed.value.convert(props.boat.speed ?? 0))
// ── Aircraft photo ────────────────────────────────────────────────────────────
const photoUrl = ref<string | null>(null)
const photoError = ref(false)
watch(() => props.boat.mmsi, (mmsi) => {
photoError.value = false
photoUrl.value = mmsi ? `https://www.marinetraffic.com/getAssetDefaultPhoto/?photo_size=800&asset_id=${mmsi}&asset_type_id=0` : null
}, { immediate: true })
// ── Drag ──────────────────────────────────────────────────────────────────────
const pos = ref({ ...props.position })
const isDragging = ref(false)
@@ -218,8 +211,8 @@ const compass = computed(() => {
</div>
<!-- Photo -->
<div v-if="photoUrl && !photoError" class="sp-photo-wrap">
<img class="sp-photo" :src="photoUrl" :alt="name" @error="photoError = true" />
<div v-if="!photoError" class="sp-photo-wrap">
<img class="sp-photo" :src="BASE + '/api/ais-iamge/' + boat.mmsi" :alt="name" @error="photoError = true" />
</div>
<div class="sp-body">