Skip to content

Commit c8fb274

Browse files
patrick11514patrick11514
committed
fix: move text behind image + guiding
1 parent 262bc0b commit c8fb274

1 file changed

Lines changed: 98 additions & 69 deletions

File tree

‎src/routes/[[lang=lang]]/live-photo/+page.svelte‎

Lines changed: 98 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -46,21 +46,22 @@
4646

4747
<div class="mt-8 grid grid-cols-1 gap-6 px-2 lg:grid-cols-3">
4848
<div class="lg:col-span-2">
49-
{#if liveData?.active && liveData?.showImage}
50-
<img
51-
src={`/api/live-image?t=${now}`}
52-
alt="Live view"
53-
class="w-full rounded-lg shadow-lg"
54-
/>
55-
{:else}
56-
<div
57-
class="flex aspect-video w-full items-center justify-center rounded-lg bg-black text-xl text-white shadow-lg"
58-
>
49+
<div
50+
class="relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-lg bg-black text-xl text-white shadow-lg"
51+
>
52+
<span class="z-0 px-4 text-center">
5953
{liveData?.active
6054
? liveData?.currentAction || appState.lang.live_photo.inactive
6155
: appState.lang.live_photo.inactive}
62-
</div>
63-
{/if}
56+
</span>
57+
{#if liveData?.active && liveData?.showImage}
58+
<img
59+
src={`/api/live-image?t=${now}`}
60+
alt="Live view"
61+
class="absolute inset-0 z-10 h-full w-full object-contain"
62+
/>
63+
{/if}
64+
</div>
6465
</div>
6566

6667
<div
@@ -99,73 +100,101 @@
99100
</div>
100101
</div>
101102

102-
<!-- Image Info Section -->
103+
<!-- Guide Section -->
103104
<div>
104105
<h3 class="mb-2 border-b border-zinc-300 pb-1 font-semibold">
105-
{appState.lang.live_photo.image}
106+
{appState.lang.live_photo.guide} (PHD2)
106107
</h3>
107-
<div class="grid grid-cols-2 gap-2 text-sm">
108-
<span class="text-secondary font-bold">
109-
{appState.lang.live_photo.labels.target}:</span
110-
>
111-
<span class="truncate text-right" title={liveData?.imageInfo?.TargetName}>
112-
{liveData?.imageInfo?.TargetName || 'No info'}</span
113-
>
114-
115-
<span class="text-secondary font-bold">
116-
{appState.lang.live_photo.labels.date}:</span
117-
>
118-
<span class="text-right">
119-
{liveData?.imageInfo?.Date
120-
? new Date(liveData.imageInfo.Date).toLocaleTimeString()
121-
: '-'}</span
122-
>
123-
124-
<span class="text-secondary font-bold">
125-
{appState.lang.live_photo.labels.exposure}:</span
126-
>
127-
<span class="text-right">
128-
{liveData?.imageInfo?.ExposureTime
129-
? `${liveData.imageInfo.ExposureTime}s`
130-
: '-'}</span
131-
>
132-
133-
<span class="text-secondary font-bold">
134-
{appState.lang.live_photo.labels.temp}:</span
135-
>
136-
<span class="text-right">
137-
{liveData?.imageInfo?.Temperature
138-
? `${liveData.imageInfo.Temperature}°C`
139-
: '-'}</span
108+
<div class="grid grid-cols-2 gap-2">
109+
<span class="text-secondary font-bold"> RA Error:</span>
110+
<span>
111+
{liveData?.guideInfo ? `${liveData.guideInfo.ra.toFixed(2)}″"` : '-'}</span
140112
>
141113

142-
<span class="text-secondary font-bold">
143-
{appState.lang.live_photo.labels.gain}:</span
114+
<span class="text-secondary font-bold"> Dec Error:</span>
115+
<span>
116+
{liveData?.guideInfo ? `${liveData.guideInfo.dec.toFixed(2)}″"` : '-'}</span
144117
>
145-
<span class="text-right"> {liveData?.imageInfo?.Gain ?? '-'}</span>
146118

147-
<span class="text-secondary font-bold">
148-
{appState.lang.live_photo.labels.focal_length}:</span
149-
>
150-
<span class="text-right">
151-
{liveData?.imageInfo?.FocalLength
152-
? `${liveData.imageInfo.FocalLength}mm`
119+
<span class="text-secondary font-bold"> Total Error:</span>
120+
<span>
121+
{liveData?.guideInfo
122+
? `${liveData.guideInfo.total.toFixed(2)}″"`
153123
: '-'}</span
154124
>
125+
</div>
155126

156-
<span class="text-secondary col-span-2 font-bold">
157-
{appState.lang.live_photo.labels.telescope}:</span
158-
>
159-
<span class="col-span-2 truncate" title={liveData?.imageInfo?.TelescopeName}>
160-
{liveData?.imageInfo?.TelescopeName || 'No info'}</span
161-
>
162-
163-
<span class="text-secondary col-span-2 font-bold">
164-
{appState.lang.live_photo.labels.camera}:</span
165-
>
166-
<span class="col-span-2 truncate" title={liveData?.imageInfo?.CameraName}>
167-
{liveData?.imageInfo?.CameraName || 'No info'}</span
168-
>
127+
<!-- Image Info Section -->
128+
<div>
129+
<h3 class="mb-2 border-b border-zinc-300 pb-1 font-semibold">
130+
{appState.lang.live_photo.image}
131+
</h3>
132+
<div class="grid grid-cols-2 gap-2 text-sm">
133+
<span class="text-secondary font-bold">
134+
{appState.lang.live_photo.labels.target}:</span
135+
>
136+
<span class="truncate text-right" title={liveData?.imageInfo?.TargetName}>
137+
{liveData?.imageInfo?.TargetName || 'No info'}</span
138+
>
139+
140+
<span class="text-secondary font-bold">
141+
{appState.lang.live_photo.labels.date}:</span
142+
>
143+
<span class="text-right">
144+
{liveData?.imageInfo?.Date
145+
? new Date(liveData.imageInfo.Date).toLocaleTimeString()
146+
: '-'}</span
147+
>
148+
149+
<span class="text-secondary font-bold">
150+
{appState.lang.live_photo.labels.exposure}:</span
151+
>
152+
<span class="text-right">
153+
{liveData?.imageInfo?.ExposureTime
154+
? `${liveData.imageInfo.ExposureTime}s`
155+
: '-'}</span
156+
>
157+
158+
<span class="text-secondary font-bold">
159+
{appState.lang.live_photo.labels.temp}:</span
160+
>
161+
<span class="text-right">
162+
{liveData?.imageInfo?.Temperature
163+
? `${liveData.imageInfo.Temperature}°C`
164+
: '-'}</span
165+
>
166+
167+
<span class="text-secondary font-bold">
168+
{appState.lang.live_photo.labels.gain}:</span
169+
>
170+
<span class="text-right"> {liveData?.imageInfo?.Gain ?? '-'}</span>
171+
172+
<span class="text-secondary font-bold">
173+
{appState.lang.live_photo.labels.focal_length}:</span
174+
>
175+
<span class="text-right">
176+
{liveData?.imageInfo?.FocalLength
177+
? `${liveData.imageInfo.FocalLength}mm`
178+
: '-'}</span
179+
>
180+
181+
<span class="text-secondary col-span-2 font-bold">
182+
{appState.lang.live_photo.labels.telescope}:</span
183+
>
184+
<span
185+
class="col-span-2 truncate"
186+
title={liveData?.imageInfo?.TelescopeName}
187+
>
188+
{liveData?.imageInfo?.TelescopeName || 'No info'}</span
189+
>
190+
191+
<span class="text-secondary col-span-2 font-bold">
192+
{appState.lang.live_photo.labels.camera}:</span
193+
>
194+
<span class="col-span-2 truncate" title={liveData?.imageInfo?.CameraName}>
195+
{liveData?.imageInfo?.CameraName || 'No info'}</span
196+
>
197+
</div>
169198
</div>
170199
</div>
171200
</div>

0 commit comments

Comments
 (0)