Add modal and animations while calibration is running (#157)

* Add modal for calibration

* Run wpiformat
This commit is contained in:
Matt
2020-11-21 18:14:27 -08:00
committed by GitHub
parent da2aaba033
commit 2ae750f00f
3 changed files with 111 additions and 59 deletions

View File

@@ -143,7 +143,7 @@
v-for="(value, index) in filteredResolutionList"
:key="index"
>
<td> {{ value.width }} X {{ value.height }} </td>
<td> {{ value.width }} X {{ value.height }}</td>
<td>
{{ isCalibrated(value) ? value.mean.toFixed(2) + "px" : "—" }}
</td>
@@ -218,7 +218,7 @@
:disabled="checkCancellation"
@click="sendCalibrationFinish"
>
{{ hasEnough ? "End Calibration" : "Cancel Calibration" }}
{{ hasEnough ? "Finish Calibration" : "Cancel Calibration" }}
</v-btn>
</v-col>
<v-col>
@@ -250,21 +250,72 @@
cols="12"
md="5"
>
<CVimage
:address="$store.getters.streamAddress[1]"
:disconnected="!$store.state.backendConnected"
scale="100"
style="border-radius: 5px;"
/>
<template>
<CVimage
:address="$store.getters.streamAddress[1]"
:disconnected="!$store.state.backendConnected"
scale="100"
style="border-radius: 5px;"
/>
<v-dialog
v-model="snack"
width="500px"
persistent="true"
>
<v-card
color="primary"
dark
>
<v-card-title> Camera Calibration </v-card-title>
<div
class="ml-3"
>
<v-col align="center">
<template v-if="calibrationInProgress">
<v-progress-circular
indeterminate
:size="70"
:width="8"
color="accent"
/>
<v-card-text>Camera is being calibrated. This process make take several minutes...</v-card-text>
</template>
<template v-else-if="!calibrationFailed">
<v-icon
color="green"
size="70"
>
mdi-check-bold
</v-icon>
<v-card-text>Camera has been successfully calibrated at {{ stringResolutionList[selectedFilteredResIndex] }}!</v-card-text>
</template>
<template v-else>
<v-icon
color="red"
size="70"
>
mdi-close
</v-icon>
<v-card-text>Camera calibration failed! Make sure that the photos are taken such that the rainbow grid circles align with the corners of the chessboard, and try again. More information is available in the program logs.</v-card-text>
</template>
</v-col>
</div>
<v-card-actions>
<v-spacer />
<v-btn
v-if="!calibrationInProgress"
color="white"
text
@click="closeDialog"
>
OK
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
</v-col>
</v-row>
<v-snackbar
v-model="snack"
top
:color="snackbar.color"
>
<span>{{ snackbar.text }}</span>
</v-snackbar>
</div>
</template>
@@ -278,7 +329,7 @@ import TooltippedLabel from "../components/common/cv-tooltipped-label";
export default {
name: 'Cameras',
components: {
TooltippedLabel,
TooltippedLabel,
CVselect,
CVnumberinput,
CVslider,
@@ -286,11 +337,9 @@ export default {
},
data() {
return {
snackbar: {
color: "success",
text: ""
},
snack: false,
calibrationInProgress: false,
calibrationFailed: false,
filteredVideomodeIndex: undefined,
}
},
@@ -325,7 +374,7 @@ export default {
if (!filtered.some(e => e.width === it.width && e.height === it.height)) {
it['index'] = i;
const calib = this.getCalibrationCoeffs(it);
if(calib != null) {
if (calib != null) {
it['standardDeviation'] = calib.standardDeviation;
it['mean'] = calib.perViewErrors.reduce((a, b) => a + b) / calib.perViewErrors.length;
}
@@ -421,12 +470,16 @@ export default {
},
},
methods: {
closeDialog() {
this.snack = false;
this.calibrationInProgress = false;
this.calibrationFailed = false;
},
getCalibrationCoeffs(resolution) {
const calList = this.$store.getters.calibrationList;
let ret = null;
calList.forEach(cal => {
if(cal.width === resolution.width && cal.height === resolution.height) {
if (cal.width === resolution.width && cal.height === resolution.height) {
ret = cal
}
});
@@ -475,34 +528,19 @@ export default {
sendCalibrationFinish() {
console.log("finishing calibration for index " + this.$store.getters.currentCameraIndex);
this.snackbar.text = "Calibrating...";
this.snackbar.color = "secondary";
this.snack = true;
this.calibrationInProgress = true;
this.axios.post("http://" + this.$address + "/api/settings/endCalibration", this.$store.getters.currentCameraIndex)
.then((response) => {
if (response.status === 200) {
this.snackbar = {
color: "success",
text: "Calibration successful! \n" +
"Standard deviation: " + response.data.toFixed(5)
};
this.snack = true;
if (response.status === 200) {
this.calibrationInProgress = false;
} else {
this.calibrationFailed = true;
}
}
else {
this.snackbar = {
color: "error",
text: "Calibration Failed!"
};
this.snack = true;
}
}
).catch(() => {
this.snackbar = {
color: "error",
text: "Calibration Failed!"
};
this.snack = true;
).catch(() => {
this.calibrationFailed = true;
});
}
}
@@ -510,18 +548,19 @@ export default {
</script>
<style scoped>
.v-data-table {
text-align: center;
background-color: transparent !important;
width: 100%;
height: 100%;
overflow-y: auto;
}
.v-data-table th {
background-color: #006492 !important;
}
.v-data-table {
text-align: center;
background-color: transparent !important;
width: 100%;
height: 100%;
overflow-y: auto;
}
.v-data-table th,td {
font-size: 1rem !important;
}
.v-data-table th {
background-color: #006492 !important;
}
.v-data-table th, td {
font-size: 1rem !important;
}
</style>

View File

@@ -162,6 +162,7 @@ public class RequestHandler {
}
public static void onCalibrationEnd(Context ctx) {
logger.info("Calibrating camera! This will take a long time...");
var index = Integer.parseInt(ctx.body());
var calData = VisionModuleManager.getInstance().getModule(index).endCalibration();
if (calData == null) {
@@ -171,6 +172,7 @@ public class RequestHandler {
ctx.result(String.valueOf(calData.standardDeviation));
ctx.status(200);
logger.info("Camera calibrated!");
}
public static void restartDevice(Context ctx) {

View File

@@ -60,6 +60,8 @@ public class Calibrate3dPipeline
private int minSnapshots;
private boolean calibrating = false;
public Calibrate3dPipeline() {
this(25);
}
@@ -89,6 +91,11 @@ public class Calibrate3dPipeline
// Set the pipe parameters
setPipeParams(frame.frameStaticProperties, settings);
if (this.calibrating) {
return new CVPipelineResult(
0, null, new Frame(new CVMat(frame.image.getMat()), frame.frameStaticProperties));
}
long sumPipeNanosElapsed = 0L;
// Check if the frame has chessboard corners
@@ -131,10 +138,14 @@ public class Calibrate3dPipeline
return null;
}
this.calibrating = true;
/*Pass the board corners to the pipe, which will check again to see if all boards are valid
and returns the corresponding image and object points*/
calibrationOutput = calibrate3dPipe.run(foundCornersList);
this.calibrating = false;
return calibrationOutput.output;
}