Skip to content

Commit

Permalink
More jank stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcm001
mcm001 committed Dec 21, 2023
1 parent 2c90db2 commit 8eae9c2
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 62 deletions.
31 changes: 24 additions & 7 deletions photon-client/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 5 additions & 4 deletions photon-client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@
"@mdi/font": "^7.2.96",
"@msgpack/msgpack": "^3.0.0-beta2",
"axios": "^1.4.0",
"chart.js": "^2.9.3",
"chart.js": "2.9.3",
"chartjs-plugin-annotation": "^0.5.7",
"core-js": "^3.30.2",
"jspdf": "^2.5.1",
"pinia": "^2.1.4",
Expand All @@ -30,17 +31,17 @@
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.3.2",
"@vue/eslint-config-prettier": "^8.0.0",
"@vue/eslint-config-typescript": "^11.0.3",
"prettier": "^3.0.0",
"@types/node": "^16.11.45",
"@types/three": "^0.154.0",
"@vitejs/plugin-vue2": "^2.2.0",
"@vue/eslint-config-prettier": "^8.0.0",
"@vue/eslint-config-typescript": "^11.0.3",
"@vue/tsconfig": "^0.1.3",
"deepmerge": "^4.3.1",
"eslint": "^8.45.0",
"eslint-plugin-vue": "^9.0.0",
"npm-run-all": "^4.1.5",
"prettier": "^3.0.0",
"sass": "~1.32",
"sass-loader": "^13.3.2",
"terser": "^5.14.2",
Expand Down
85 changes: 63 additions & 22 deletions photon-client/src/components/cameras/CameraCalibrationCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import loadingImage from "@/assets/images/loading.svg";
const settingsValid = ref(true);
const getCalibrationCoeffs = (resolution: Resolution) => {
const getCalibrationCoeffs = (resolution: Resolution): CameraCalibrationResult | undefined => {
return useCameraSettingsStore().currentCameraSettings.completeCalibrations.find(
(cal) => cal.resolution.width === resolution.width && cal.resolution.height === resolution.height
);
Expand All @@ -42,7 +42,10 @@ const getUniqueVideoResolutions = (): VideoFormat[] => {
it.reprojectionErrors.flatMap((it2) => [it2.x, it2.y])
);
// For each error, square it, sum the squares, and divide by total points N
format.mean = Math.sqrt(perViewSumSquareReprojectionError.map(it => Math.pow(it, 2)).reduce((a, b) => a + b, 0) / perViewSumSquareReprojectionError.length);
format.mean = Math.sqrt(
perViewSumSquareReprojectionError.map((it) => Math.pow(it, 2)).reduce((a, b) => a + b, 0) /
perViewSumSquareReprojectionError.length
);
format.horizontalFOV =
2 * Math.atan2(format.resolution.width / 2, calib.cameraIntrinsics.data[0]) * (180 / Math.PI);
Expand Down Expand Up @@ -266,15 +269,17 @@ const reprojectionErrorSeries = () => {
.flat(1);
const xLocs = calib.observations.map((it) => it.locationInImageSpace.map((it) => it.x)).flat(1);
const yLocs = calib.observations.map((it) => it.locationInImageSpace.map((it) => it.y)).flat(1);
console.log(errorNorms);
console.log(xLocs);
console.log(yLocs);
// console.log(errorNorms);
// console.log(xLocs);
// console.log(yLocs);
function rgb(r, g, b) {
return "rgb(" + r + "," + g + "," + b + ")";
}
const colors = errorNorms.map((it) => rgb(it * 200, 0, 0));
const scale = 255.0 / Math.max(...errorNorms);
const colors = errorNorms.map(it => it * scale).map((it) => rgb(it, 0, 0));
console.log(colors)
return {
datasets: [createSeries(`Reprojection error`, xLocs, yLocs, colors, false)]
Expand All @@ -285,11 +290,13 @@ let showCal = ref(false);
let calibrationDetails: Ref<CameraCalibrationResult | undefined> = ref(undefined);
const showThing = (value: VideoFormat) => {
console.log(value);
calibrationDetails.value = getCalibrationCoeffs(value.resolution);
console.log(calibrationDetails);
showCal.value = true;
};
let visShown = ref(0)
let observationIdx = ref(0)
</script>

<template>
Expand Down Expand Up @@ -504,12 +511,7 @@ const showThing = (value: VideoFormat) => {
</v-col>
</v-row>

<LineChart
:chartData="reprojectionErrorSeries"
min="0"
max="3500"
ref="loadCell"
/>
<LineChart :chartData="reprojectionErrorSeries()" :xmin="0" :xmax="640" :ymin="0" :ymax="480" ref="loadCell" />
</div>
</v-card>
<v-dialog v-model="showCalibEndDialog" width="500px" :persistent="true">
Expand Down Expand Up @@ -556,16 +558,15 @@ const showThing = (value: VideoFormat) => {
</v-card>
</v-dialog>

<v-dialog v-model="showCal">
<v-dialog v-model="showCal" width="90%">
<v-card color="primary" dark>
<v-card-title
>{{ useCameraSettingsStore().cameraNames[useStateStore().currentCameraIndex] }} -
{{ calibrationDetails?.resolution.width }} x {{ calibrationDetails?.resolution.height }}</v-card-title
>
<v-row>
<v-col cols="3">
<v-col cols="4">
<v-card-text>
<!-- Intrinsics: {{ calibrationDetails }} -->
<v-simple-table>
<tbody>
<td>Fx:</td>
Expand All @@ -591,21 +592,61 @@ const showThing = (value: VideoFormat) => {

<v-divider />

<pv-select label="Inspect Observation" :items="[1, 2, 3]" :select-cols="8" />
<pv-select label="Visualization" :items="['RMS error']" :select-cols="8" />
<v-btn light> Show me! </v-btn>
<span class="text-center">Observations:</span>
<v-simple-table>
<thead>
<tr>
<th class="text-center">ID</th>
<th class="text-center">Mean Err, px</th>
<th class="text-center">Used</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>1.23</td>
<td> <v-switch dark color="#ffd843"/> </td>
</tr>
<tr>
<td>1</td>
<td>3.33</td>
<td> <v-switch dark color="#ffd843"/> </td>
</tr>
</tbody>
</v-simple-table>

</v-card-text>
</v-col>

<v-col>
<v-col cols="8">
<v-card-text>
<img crossorigin="anonymous" :src="loadingImage" />
<pv-select v-model="visShown" label="Visualization" :items="['All Points', 'Detected Corners', 'Residuals, px', 'Observation with Error', 'Residual XY plot']" :select-cols="8" />
<v-img v-if="visShown == 0" src="https://mrcal.secretsauce.net/external/figures/calibration/mrgingham-coverage.png" />
<div v-if="visShown == 1">
<pv-select v-model="observationIdx" label="Inspect Observation" :items="[1, 2, 3]" :select-cols="8" />
<v-img src="https://mrcal.secretsauce.net/external/figures/calibration/mrgingham-results.png" />
</div>
<div v-if="visShown == 2">
<pv-select v-model="observationIdx" label="Inspect Observation" :items="['All', '1', '2', '3']" :select-cols="8" />
<v-img src="https://mrcal.secretsauce.net/external/figures/calibration/residuals-histogram-opencv8.svg" />
</div>
<div v-if="visShown == 3">
<pv-select v-model="observationIdx" label="Inspect Observation" :items="[1, 2, 3]" :select-cols="8" />
<v-img src="https://mrcal.secretsauce.net/external/figures/calibration/worst-opencv8.png" />
</div>
<div v-if="visShown == 4">
<pv-select v-model="observationIdx" label="Graph" :items="['Norm', 'Direction']" :select-cols="8" />
<v-img v-if="observationIdx == 0" src="https://mrcal.secretsauce.net/external/figures/calibration/residual-magnitudes-opencv8.png" />
<v-img v-if="observationIdx == 1" src="https://mrcal.secretsauce.net/external/figures/calibration/directions-opencv8.png" />
</div>
</v-card-text>
</v-col>
</v-row>
<v-divider />
</v-card>
</v-dialog>

<v-card> </v-card>
</div>
</template>

Expand Down
71 changes: 44 additions & 27 deletions photon-client/src/components/common/LineChart.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script>
import { Scatter } from "vue-chartjs";
import chartJsPluginAnnotation from "chartjs-plugin-annotation";
export default {
extends: Scatter,
Expand All @@ -8,8 +9,10 @@ export default {
type: Object,
default: null
},
min: String,
max: String,
xmin: Number,
xmax: Number,
ymin: Number,
ymax: Number,
options: {
animation: false,
spanGaps: true,
Expand All @@ -27,26 +30,33 @@ export default {
},
scales: {
yAxes: [
// {
// ticks: {
// fontColor: "white",
// fontSize: 12,
// }
// }
{
ticks: {
fontColor: "white"
}
}
],
xAxes: [
// {
// type: "time",
// time: {
// unit: 'second',
// unitStepSize: 10,
// },
// ticks: {
// fontColor: "white",
// fontSize: 12,
// }
// }
{
ticks: {
fontColor: "white"
}
}
]
},
plugins: {
annotation: {
annotations: {
box1: {
type: "box",
xMin: 0,
xMax: 100,
yMin: 0,
yMax: 100,
backgroundColor: "rgba(255, 128, 100, 0.5)"
}
}
}
}
};
}
Expand All @@ -57,19 +67,22 @@ export default {
get() {
const opts = this.options;
if (this.min) {
opts.scales.yAxes.forEach((it) => (it.ticks.suggestedMin = parseFloat(this.min)));
}
if (this.max) {
opts.scales.yAxes.forEach((it) => (it.ticks.suggestedMax = parseFloat(this.max)));
}
opts.scales.xAxes.forEach((it) => (it.ticks.min = (this.xmin)));
opts.scales.xAxes.forEach((it) => (it.ticks.max = (this.xmax)));
opts.scales.yAxes.forEach((it) => (it.ticks.min = (this.ymin)));
opts.scales.yAxes.forEach((it) => (it.ticks.max = (this.ymax)));
return opts;
}
}
},
mounted() {
this.renderChart(this.chartData, this.chartOptions);
this.addPlugin(chartJsPluginAnnotation);
// this.renderChart(this.chartData, this.chartOptions);
this.renderChart(this.chartData, {
...this.chartOptions,
annotation: Object.assign({}, this.chartOptions.annotation)
})
},
// watch: {
// chartData() {
Expand All @@ -78,7 +91,11 @@ export default {
// }
methods: {
update() {
this.renderChart(this.chartData, this.chartOptions);
// this.renderChart(this.chartData, this.chartOptions);
this.renderChart(this.chartData, {
...this.chartOptions,
annotation: Object.assign({}, this.chartOptions.annotation)
})
}
}
};
Expand Down
12 changes: 10 additions & 2 deletions photon-client/src/types/SettingTypes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,13 +185,21 @@ export const PlaceholderCameraSettings: CameraSettings = {
},
observations: [
{
locationInImageSpace: [{ x: 123, y: 456 }],
locationInImageSpace: [
{ x: 100, y: 100 },
{ x: 210, y: 100 },
{ x: 320, y: 101 },
],
locationInObjectSpace: [{ x: 0, y: 0, z: 0 }],
optimisedCameraToObject: {
translation: { x: 1, y: 2, z: 3 },
rotation: { quaternion: { W: 1, X: 0, Y: 0, Z: 0 } }
},
reprojectionErrors: [{ x: 1, y: 1 }]
reprojectionErrors: [
{ x: 1, y: 1 },
{ x: 2, y: 1 },
{ x: 3, y: 1 },
]
}
]
}
Expand Down

0 comments on commit 8eae9c2

Please sign in to comment.