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

Fixed ship guage

Browse Source
This commit is contained in:
Zakary Timson
2026-07-01 19:36:14 -04:00
parent ce86fdfcc8
commit 91205d8050
1 changed files with 20 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,6 +73,7 @@ function onTouchEnd() {
}
onMounted(() => {
console.log(props.boat);
document.addEventListener('mousemove', onMouseMove)
document.addEventListener('mouseup', onMouseUp)
document.addEventListener('touchmove', onTouchMove, { passive: false })
@@ -89,8 +90,7 @@ onUnmounted(() => {
const compass = computed(() => {
const hdg = heading.value
const course = props.boat.course ?? hdg
const bearing = props.boat.bearing ?? 0
const course = props.boat.cog ?? hdg
// ── Compass tape ──────────────────────────────────────────────────────────
const tapeTicks: string[] = []
@@ -114,7 +114,7 @@ const compass = computed(() => {
}
// ── Rose centre & radii ───────────────────────────────────────────────────
const CX = 100, CY = 158 // moved down from 145
const CX = 100, CY = 140 // moved down from 145
const R = 68 // grown from 55
const rudder = Math.max(-30, Math.min(30, ((course - hdg + 540) % 360) - 180))
@@ -125,7 +125,7 @@ const compass = computed(() => {
const cNeedleX = CX + 52 * Math.sin(courseRad)
const cNeedleY = CY - 52 * Math.cos(courseRad)
const bearRel = ((bearing - hdg + 540) % 360) - 180
const bearRel = ((course - hdg + 540) % 360) - 180
const bearRad = bearRel * Math.PI / 180
const bNeedleX = CX + 52 * Math.sin(bearRad)
const bNeedleY = CY - 52 * Math.cos(bearRad)
@@ -151,49 +151,38 @@ const compass = computed(() => {
return `<text x="${x}" y="${y}" text-anchor="middle" fill="#0ff" font-size="10" font-weight="bold" opacity="0.8">${lbl}</text>`
}).join('')
// Legend & rudder bar shifted to bottom of taller SVG
const LEG_Y = 190
return `
<svg width="200" height="230" viewBox="0 0 200 230">
<!-- Tape -->
<svg width="200" height="210" viewBox="0 0 200 210">
<rect x="10" y="18" width="180" height="40" fill="rgba(0,20,40,0.95)" rx="3"/>
<line x1="10" y1="18" x2="190" y2="18" stroke="#0ff" stroke-width="1"/>
<line x1="10" y1="58" x2="190" y2="58" stroke="#0ff" stroke-width="1"/>
${tapeTicks.join('')}
<polygon points="100,20 96,12 104,12" fill="#ff0"/>
<!-- Heading readout -->
<rect x="72" y="64" width="56" height="20" fill="rgba(0,0,0,0.9)" stroke="#0ff" stroke-width="1" rx="2"/>
<text x="100" y="78" text-anchor="middle" fill="#0ff" font-size="13" font-weight="bold">${String(Math.round(hdg)).padStart(3, '0')}°</text>
<!-- Rose -->
<circle cx="${CX}" cy="${CY}" r="${R}" fill="rgba(0,20,40,0.6)" stroke="#0ff" stroke-width="1.5"/>
<circle cx="${CX}" cy="${CY}" r="${R}" fill="rgba(0,20,40,0.6)" stroke="#0ff" stroke-width="1.5"/>
<circle cx="${CX}" cy="${CY}" r="${R - 20}" fill="none" stroke="rgba(0,255,255,0.15)" stroke-width="1"/>
${ringTicks}
${cardinals}
<!-- Course needle -->
<line x1="${CX}" y1="${CY}" x2="${cNeedleX}" y2="${cNeedleY}" stroke="#0f0" stroke-width="2.5"/>
<circle cx="${cNeedleX}" cy="${cNeedleY}" r="3" fill="#0f0"/>
<g transform="rotate(${-hdg}, ${CX}, ${CY})">
${ringTicks}
${cardinals}
</g>
<!-- Bearing needle -->
<line x1="${CX}" y1="${CY}" x2="${bNeedleX}" y2="${bNeedleY}" stroke="#ff0" stroke-width="1.5" stroke-dasharray="4,3"/>
<circle cx="${bNeedleX}" cy="${bNeedleY}" r="2.5" fill="#ff0"/>
<!-- Ship symbol -->
<line x1="${CX}" y1="${CY}" x2="${cNeedleX}" y2="${cNeedleY}" stroke="#0f0" stroke-width="2.5"/>
<circle cx="${cNeedleX}" cy="${cNeedleY}" r="3" fill="#0f0"/>
<polygon points="${CX},${CY - 9} ${CX - 4},${CY + 5} ${CX},${CY + 2} ${CX + 4},${CY + 5}" fill="#fff" stroke="#0ff" stroke-width="1"/>
<!-- Rudder bar -->
<rect x="60" y="${LEG_Y - 4}" width="80" height="6" fill="rgba(0,50,70,0.9)" rx="3"/>
<line x1="${CX}" y1="${LEG_Y - 4}" x2="${CX}" y2="${LEG_Y + 2}" stroke="#0ff" stroke-width="1" opacity="0.5"/>
<rect x="${rudX - 4}" y="${LEG_Y - 3}" width="8" height="8" fill="#ff0" rx="1"/>
<rect x="80" y="${CY + 23}" width="40" height="6" fill="rgba(0,50,70,0.9)" rx="3"/>
<rect x="${rudX - 4}" y="${CY + 22}" width="8" height="8" fill="#ff0" rx="1"/>
<!-- Legend -->
<line x1="12" y1="${LEG_Y + 20}" x2="24" y2="${LEG_Y + 20}" stroke="#0f0" stroke-width="2"/>
<text x="27" y="${LEG_Y + 22}" fill="#888" font-size="9">COG</text>
<line x1="12" y1="${LEG_Y + 30}" x2="24" y2="${LEG_Y + 30}" stroke="#ff0" stroke-width="1.5" stroke-dasharray="4,3"/>
<text x="27" y="${LEG_Y + 33}" fill="#888" font-size="9">BRG</text>
<line x1="10" y1="${CY + 55}" x2="20" y2="${CY + 55}" stroke="#0f0" stroke-width="2"/>
<text x="25" y="${CY + 57}" fill="#888" font-size="9">COG</text>
<line x1="10" y1="${CY + 65}" x2="20" y2="${CY + 65}" stroke="#ff0" stroke-width="1.5" stroke-dasharray="4,3"/>
<text x="25" y="${CY + 67}" fill="#888" font-size="9">BRG</text>
</svg>
`
})