Skip to content

frontend: Update ping360 interface #223

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
patrickelectric merged 1 commit into from
Apr 7, 2026
Merged

frontend: Update ping360 interface #223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,15 +71,15 @@ const props = defineProps({
},
radiusLineColor: {
type: String,
default: 'green',
default: 'rgba(255, 255, 255, 0.7)',
},
markerColor: {
type: String,
default: 'green',
default: 'white',
},
radiusLineWidth: {
type: Number,
default: 0.5,
default: 1,
},
debug: {
type: Boolean,
Expand Down
6 changes: 3 additions & 3 deletions ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360Loader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,19 +74,19 @@ const props = defineProps({
},
radiusLineColor: {
type: String,
default: 'green',
default: 'rgba(255, 255, 255, 0.7)',
},
markerColor: {
type: String,
default: 'green',
default: 'white',
},
markerBackgroundColor: {
type: String,
default: 'rgba(0, 0, 0, 0.5)',
},
radiusLineWidth: {
type: Number,
default: 0.5,
default: 1,
},
debug: {
type: Boolean,
Expand Down
79 changes: 55 additions & 24 deletions ping-viewer-next-frontend/src/components/widgets/sonar360/Sonar360Mask.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,44 @@

<svg class="absolute top-0 left-0 w-full h-full pointer-events-none" viewBox="0 0 100 100"
preserveAspectRatio="xMidYMid meet">
<path v-if="!isFullCircle" :d="sectorPath" fill="none" :stroke="radiusLineColor" :stroke-width="radiusLineWidth" />
<defs>
<linearGradient :id="sweepGradientId" gradientUnits="userSpaceOnUse"
x1="50" y1="50"
:x2="50 + maxRadius * Math.cos(adjustedAngleRad)"
:y2="50 + maxRadius * Math.sin(adjustedAngleRad)">
<stop offset="0%" stop-color="white" stop-opacity="0" />
<stop offset="100%" stop-color="white" stop-opacity="0.9" />
</linearGradient>
</defs>

<path v-if="!isFullCircle" :d="sectorPath" fill="none" :stroke="radiusLineColor"
:stroke-width="radiusLineWidth" vector-effect="non-scaling-stroke" />

<g v-if="showRadiusLines">
<path v-for="line in radiusLines" :key="line.distance" :d="getRadiusLinePath(line.radius)"
:stroke="radiusLineColor" :stroke-width="radiusLineWidth" fill="none" />
:stroke="radiusLineColor" :stroke-width="radiusLineWidth" fill="none"
vector-effect="non-scaling-stroke" />
</g>

<line x1="50" y1="50" :x2="50 + 50 * Math.cos(adjustedAngleRad)" :y2="50 + 50 * Math.sin(adjustedAngleRad)"
:stroke="lineColor" :stroke-width="lineWidth" />
<line v-for="deg in angleLines" :key="deg"
x1="50" y1="50"
:x2="50 + maxRadius * Math.cos((deg - 90) * Math.PI / 180)"
:y2="50 + maxRadius * Math.sin((deg - 90) * Math.PI / 180)"
:stroke="radiusLineColor" :stroke-width="radiusLineWidth"
vector-effect="non-scaling-stroke" />

<line x1="50" y1="50"
:x2="50 + maxRadius * Math.cos(adjustedAngleRad)"
:y2="50 + maxRadius * Math.sin(adjustedAngleRad)"
:stroke="`url(#${sweepGradientId})`" stroke-width="2"
vector-effect="non-scaling-stroke" />
</svg>

<template v-if="showMarkers">
<div v-for="line in radiusLines" :key="line.distance"
class="absolute text-xs px-1 rounded transform -translate-x-1/2 -translate-y-1/2" :style="{
left: `${getMarkerPositionPercent(line.radius).x}%`,
class="absolute text-4xl font-medium text-white depth-label transform -translate-x-1/2 -translate-y-1/2" :style="{
left: `calc(${getMarkerPositionPercent(line.radius).x}% + 50px)`,
top: `${getMarkerPositionPercent(line.radius).y}%`,
color: markerColor,
backgroundColor: markerBackgroundColor
}">
{{ depthValue(line.distance).toFixed(1) }}{{ depthUnit }}
</div>
Expand All @@ -32,9 +52,12 @@
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { computed, ref } from 'vue';
import { useUnits } from '../../../composables/useUnits';

const instanceId = ref(Math.random().toString(36).slice(2, 8));
const sweepGradientId = computed(() => `sweep-grad-${instanceId.value}`);

const { depthValue, depthUnit } = useUnits();

const props = defineProps<{
Expand All @@ -57,11 +80,24 @@ const isFullCircle = computed(() => {
return props.startAngle === 0 && props.endAngle === 360;
});

const angleLines = computed(() => {
const all = [0, 45, 90, 135, 180, 225, 270, 315];
if (isFullCircle.value) return all;
return all.filter((deg) => {
if (props.startAngle <= props.endAngle) {
return deg >= props.startAngle && deg <= props.endAngle;
}
return deg >= props.startAngle || deg <= props.endAngle;
});
});

const adjustedAngleRad = computed(() => {
const normalizedAngle = (props.angle / 400) * 360;
const normalizedAngle = ((props.angle + 1) / 400) * 360;
return ((normalizedAngle + 90) * Math.PI) / 180;
});

const maxRadius = computed(() => 50 - props.lineWidth / 2);

const radiusLines = computed(() => {
const lines = [];
for (let i = 1; i <= props.numMarkers; i++) {
Expand All @@ -82,11 +118,7 @@ const sectorPath = computed(() => {
const endX = 50 + 50 * Math.cos(endRad);
const endY = 50 + 50 * Math.sin(endRad);

const angleDifference = (props.endAngle - props.startAngle + 360) % 360;
const largeArcFlag = angleDifference > 180 ? 1 : 0;
const sweepFlag = 1;

return `M 50 50 L ${startX} ${startY} A 50 50 0 ${largeArcFlag} ${sweepFlag} ${endX} ${endY} Z`;
return `M 50 50 L ${startX} ${startY} M 50 50 L ${endX} ${endY}`;
});

const getRadiusLinePath = (radius: number) => {
Expand Down Expand Up @@ -117,19 +149,18 @@ const getRadiusLinePath = (radius: number) => {
};

const getMarkerPositionPercent = (radius: number) => {
let angle: number;
if (isFullCircle.value) {
angle = 0;
} else if (props.startAngle <= props.endAngle) {
angle = (props.startAngle + props.endAngle) / 2;
} else {
angle = (props.startAngle + props.endAngle + 360) / 2;
if (angle >= 360) angle -= 360;
}
const angle = 45;
const rad = (angle - 90) * (Math.PI / 180);
return {
x: 50 + radius * Math.cos(rad),
y: 50 + radius * Math.sin(rad),
};
};
</script>

<style scoped>
.depth-label {
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
paint-order: stroke fill;
}
</style>
6 changes: 3 additions & 3 deletions ping-viewer-next-frontend/src/pages/addons/widget/[type]/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,9 +189,9 @@ export default defineComponent({
numMarkers: 5,
showRadiusLines: true,
showMarkers: true,
radiusLineColor: '#4caf50',
markerColor: '#4caf50',
radiusLineWidth: 0.5,
radiusLineColor: 'rgba(255, 255, 255, 0.7)',
markerColor: 'white',
radiusLineWidth: 1,
};

const ping1DProps = {
Expand Down
16 changes: 12 additions & 4 deletions ping-viewer-next-frontend/src/views/Main.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -377,9 +377,9 @@ const ping360Settings = reactive({
numMarkers: 5,
showRadiusLines: true,
showMarkers: true,
radiusLineColor: '#4caf50',
markerColor: '#4caf50',
radiusLineWidth: 0.5,
radiusLineColor: 'rgba(255, 255, 255, 0.7)',
markerColor: 'white',
radiusLineWidth: 1,
debug: false,
colorPalette: 'Thermal Blue',
customPalette: [],
Expand Down Expand Up @@ -566,7 +566,15 @@ const loadSettings = () => {
}
if (savedCommon) Object.assign(commonSettings, JSON.parse(savedCommon));
if (savedPing1D) Object.assign(ping1DSettings, JSON.parse(savedPing1D));
if (savedPing360) Object.assign(ping360Settings, JSON.parse(savedPing360));
if (savedPing360) {
const {
radiusLineColor: _,
markerColor: __,
radiusLineWidth: ___,
...parsed360
} = JSON.parse(savedPing360);
Object.assign(ping360Settings, parsed360);
}
if (savedDisplay) {
const parsed = JSON.parse(savedDisplay);
Object.assign(displaySettings, parsed);
Expand Down
Loading