mirror of
https://github.com/PhotonVision/photonvision
synced 2026-06-26 01:51:40 +00:00
[PhotonClient] Update dependencies to latest, update assets, and styling fixes (#767)
Currently, there is a difficult-to-reproduce bug where the backend reports that camera calibration was successful in logs via the logger but then throws an exception causing the backend to return a 500 error code with no request body which causes the frontend to interpret this as a failed calibration attempt. This ultimately leads to the entire instance of photonvision crashing and requiring the entire pi to be restarted. It is believed this issue resides inside the ConfigManager's saving action following the calibration update but is not confirmed.
This commit is contained in:
Sriman Achanta
@@ -26,7 +26,7 @@
|
||||
<CVnumberinput
|
||||
v-model="cameraSettings.fov"
|
||||
:tooltip="cameraSettings.isFovConfigurable ? 'Field of view (in degrees) of the camera measured across the diagonal of the frame, in a video mode which covers the whole sensor area.' : 'This setting is managed by a vendor'"
|
||||
name="Maximum diagonal FOV"
|
||||
name="Maximum Diagonal FOV"
|
||||
:disabled="!cameraSettings.isFovConfigurable"
|
||||
:label-cols="$vuetify.breakpoint.mdAndUp ? undefined : 7"
|
||||
/>
|
||||
@@ -98,7 +98,7 @@
|
||||
/>
|
||||
<CVnumberinput
|
||||
v-model="boardWidth"
|
||||
name="Board width"
|
||||
name="Board Width"
|
||||
tooltip="Width of the board in dots or chessboard squares"
|
||||
:disabled="isCalibrating"
|
||||
:rules="[v => (v >= 4) || 'Width must be at least 4']"
|
||||
@@ -106,7 +106,7 @@
|
||||
/>
|
||||
<CVnumberinput
|
||||
v-model="boardHeight"
|
||||
name="Board height"
|
||||
name="Board Height"
|
||||
tooltip="Height of the board in dots or chessboard squares"
|
||||
:disabled="isCalibrating"
|
||||
:rules="[v => (v >= 4) || 'Height must be at least 4']"
|
||||
@@ -296,7 +296,7 @@
|
||||
<v-icon left>
|
||||
mdi-download
|
||||
</v-icon>
|
||||
Download Target
|
||||
Download Calibration Target
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col>
|
||||
@@ -324,7 +324,7 @@
|
||||
<template>
|
||||
<CVimage
|
||||
:id="cameras-cal"
|
||||
:idx=1
|
||||
:idx="1"
|
||||
:disconnected="!$store.state.backendConnected"
|
||||
scale="100"
|
||||
style="border-radius: 5px;"
|
||||
@@ -389,19 +389,23 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Special hidden upload input that gets 'clicked' when the user imports settings -->
|
||||
<!-- Special hidden upload input that gets 'clicked' when the user imports calibdb data -->
|
||||
<input
|
||||
ref="importCalibrationFromCalibdb"
|
||||
type="file"
|
||||
accept=".json"
|
||||
style="display: none;"
|
||||
@change="readImportedCalibration"
|
||||
/>
|
||||
>
|
||||
|
||||
<v-snackbar v-model="uploadSnack" top :color="uploadSnackData.color" timeout="-1">
|
||||
<v-snackbar
|
||||
v-model="uploadSnack"
|
||||
top
|
||||
:color="uploadSnackData.color"
|
||||
timeout="-1"
|
||||
>
|
||||
<span>{{ uploadSnackData.text }}</span>
|
||||
</v-snackbar>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -474,7 +478,7 @@ export default {
|
||||
calibrationDivisors: {
|
||||
get() {
|
||||
return this.unfilteredStreamDivisors.filter(item => {
|
||||
var res = this.stringResolutionList[this.selectedFilteredResIndex].split(" X ").map(it => parseInt(it));
|
||||
const res = this.stringResolutionList[this.selectedFilteredResIndex].split(" X ").map(it => parseInt(it));
|
||||
console.log(res);
|
||||
console.log(item);
|
||||
// Realistically, we need more than 320x240, but lower than this is
|
||||
@@ -603,57 +607,54 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
readImportedCalibration(event) {
|
||||
// let formData = new FormData();
|
||||
// formData.append("zipData", event.target.files[0]);
|
||||
const filename = event.target.files[0].name;
|
||||
|
||||
readImportedCalibration(event) {
|
||||
// let formData = new FormData();
|
||||
// formData.append("zipData", event.target.files[0]);
|
||||
const filename = event.target.files[0].name;
|
||||
|
||||
event.target.files[0].text().then(fileText => {
|
||||
const data = {
|
||||
"cameraIndex": this.$store.getters.currentCameraIndex,
|
||||
"payload": fileText,
|
||||
"filename": filename,
|
||||
};
|
||||
|
||||
this.axios
|
||||
.post("http://" + this.$address + "/api/calibration/import", data, {
|
||||
headers: { "Content-Type": "text/plain" },
|
||||
})
|
||||
.then(() => {
|
||||
this.uploadSnackData = {
|
||||
color: "success",
|
||||
text:
|
||||
"Calibration imported successfully!",
|
||||
};
|
||||
this.uploadSnack = true;
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.response) {
|
||||
this.uploadSnackData = {
|
||||
color: "error",
|
||||
text:
|
||||
"Error while uploading calibration file! Could not process provided file.",
|
||||
event.target.files[0].text().then(fileText => {
|
||||
const data = {
|
||||
"cameraIndex": this.$store.getters.currentCameraIndex,
|
||||
"payload": fileText,
|
||||
"filename": filename,
|
||||
};
|
||||
} else if (err.request) {
|
||||
this.uploadSnackData = {
|
||||
color: "error",
|
||||
text:
|
||||
"Error while uploading calibration file! No respond to upload attempt.",
|
||||
};
|
||||
} else {
|
||||
this.uploadSnackData = {
|
||||
color: "error",
|
||||
text: "Error while uploading calibration file!",
|
||||
};
|
||||
}
|
||||
this.uploadSnack = true;
|
||||
});
|
||||
|
||||
})
|
||||
this.axios
|
||||
.post("http://" + this.$address + "/api/calibration/import", data, {
|
||||
headers: { "Content-Type": "text/plain" },
|
||||
})
|
||||
.then(() => {
|
||||
this.uploadSnackData = {
|
||||
color: "success",
|
||||
text:
|
||||
"Calibration imported successfully!",
|
||||
};
|
||||
this.uploadSnack = true;
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.response) {
|
||||
this.uploadSnackData = {
|
||||
color: "error",
|
||||
text:
|
||||
"Error while uploading calibration file! Could not process provided file.",
|
||||
};
|
||||
} else if (err.request) {
|
||||
this.uploadSnackData = {
|
||||
color: "error",
|
||||
text:
|
||||
"Error while uploading calibration file! No respond to upload attempt.",
|
||||
};
|
||||
} else {
|
||||
this.uploadSnackData = {
|
||||
color: "error",
|
||||
text: "Error while uploading calibration file!",
|
||||
};
|
||||
}
|
||||
this.uploadSnack = true;
|
||||
});
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
closeDialog() {
|
||||
this.snack = false;
|
||||
this.calibrationInProgress = false;
|
||||
@@ -670,97 +671,83 @@ export default {
|
||||
return ret;
|
||||
},
|
||||
downloadBoard() {
|
||||
// Generates a .pdf of a board for calibration and downloads it
|
||||
const config = {
|
||||
type: this.boardType === 0 ? "chessboard" : "dotgrid",
|
||||
boardWidthIn: this.boardWidth,
|
||||
boardHeightIn: this.boardHeight,
|
||||
patternSpacingIn: this.squareSizeIn
|
||||
}
|
||||
|
||||
//Murica paper.
|
||||
var doc = new jsPDF({unit: 'in', format:'letter'});
|
||||
var paper_x = 8.5;
|
||||
var paper_y = 11.0;
|
||||
const doc = new jsPDF({ unit: "in", format: "letter" })
|
||||
|
||||
//Load in custom fonts
|
||||
console.log(doc.getFontList());
|
||||
doc.setFont('Prompt-Regular');
|
||||
doc.setFontSize(12);
|
||||
doc.setFont("Prompt-Regular")
|
||||
doc.setFontSize(12)
|
||||
|
||||
// Common Parameters
|
||||
var num_x = this.boardWidth;
|
||||
var num_y = this.boardHeight;
|
||||
var patternSize = this.squareSizeIn;
|
||||
var isCheckerboard = (this.boardType==0);
|
||||
const paperWidth = 8.5
|
||||
const paperHeight = 11.0
|
||||
|
||||
var x_coord = 0.0;
|
||||
var y_coord = 0.0;
|
||||
var x_idx = 0;
|
||||
var y_idx = 0;
|
||||
var start_x = 0;
|
||||
var start_y = 0;
|
||||
// Draw the selected pattern to the document
|
||||
switch (config.type) {
|
||||
case "chessboard":
|
||||
// eslint-disable-next-line no-case-declarations
|
||||
const chessboardStartX = (paperWidth - config.boardWidthIn * config.patternSpacingIn) / 2
|
||||
// eslint-disable-next-line no-case-declarations
|
||||
const chessboardStartY = (paperHeight - config.boardWidthIn * config.patternSpacingIn) / 2
|
||||
|
||||
var annotation = num_x + " x " + num_y + " | " + patternSize + "in "
|
||||
for (let squareY = 0; squareY < config.boardHeightIn; squareY++) {
|
||||
for (let squareX = 0; squareX < config.boardWidthIn; squareX++) {
|
||||
const xPos = chessboardStartX + squareX * config.patternSpacingIn
|
||||
const yPos = chessboardStartY + squareY * config.patternSpacingIn
|
||||
|
||||
if(isCheckerboard){
|
||||
///////////////////////////////////////////
|
||||
// Checkerboard Pattern
|
||||
|
||||
start_x = paper_x/2.0 - (num_x * patternSize)/2.0;
|
||||
start_y = paper_y/2.0 - (num_y * patternSize)/2.0;
|
||||
|
||||
for(y_idx = 0; y_idx < num_y; y_idx++){
|
||||
for(x_idx = 0; x_idx < num_x; x_idx++){
|
||||
|
||||
x_coord = start_x + x_idx * patternSize;
|
||||
y_coord = start_y + y_idx * patternSize;
|
||||
if((x_idx + y_idx) % 2 == 0){
|
||||
doc.rect(x_coord, y_coord, patternSize, patternSize, "F");
|
||||
// Only draw the odd squares to create the chessboard pattern
|
||||
if ((xPos + yPos + 0.25) % 2 === 0) {
|
||||
doc.rect(xPos, yPos, config.patternSpacingIn, config.patternSpacingIn, "F")
|
||||
}
|
||||
}
|
||||
}
|
||||
break
|
||||
case "dotgrid":
|
||||
// eslint-disable-next-line no-case-declarations
|
||||
const dotgridStartX = (paperWidth - (2 * (config.boardWidthIn - 1) + ((config.boardHeightIn - 1) % 2)) * config.patternSpacingIn) / 2.0
|
||||
// eslint-disable-next-line no-case-declarations
|
||||
const dotgridStartY = (paperHeight - (config.boardHeightIn - config.patternSpacingIn)) / 2
|
||||
|
||||
} else {
|
||||
///////////////////////////////////////////
|
||||
// Assymetric Dot-Grid Pattern
|
||||
// see https://github.com/opencv/opencv/blob/b450dd7a87bc69997a8417d94bdfb87427a9fe62/modules/calib3d/src/circlesgrid.cpp#L437
|
||||
// as well as FindBoardCornersPipe.java's Dotboard implementation
|
||||
for (let squareY = 0; squareY < config.boardHeightIn; squareY++) {
|
||||
for (let squareX = 0; squareX < config.boardWidthIn; squareX++) {
|
||||
const xPos = dotgridStartX + (2 * squareX + (squareY % 2)) * config.patternSpacingIn
|
||||
const yPos = dotgridStartY + squareY * config.patternSpacingIn
|
||||
|
||||
start_x = paper_x/2.0 - ((2*(num_x-1) + (num_y-1) % 2) * patternSize)/2.0;
|
||||
start_y = paper_y/2.0 - (num_y-1 * patternSize)/2.0;
|
||||
|
||||
// Dot Grid Pattern
|
||||
for(y_idx = 0; y_idx < num_y; y_idx++){
|
||||
for(x_idx = 0; x_idx < num_x; x_idx++){
|
||||
x_coord = start_x + (2*x_idx + y_idx % 2) * patternSize;
|
||||
y_coord = start_y + y_idx * patternSize;
|
||||
doc.circle(x_coord, y_coord, patternSize/4.0, "F");
|
||||
doc.circle(xPos, yPos, config.patternSpacingIn / 4, "F")
|
||||
}
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
///////////////////////////////////////////
|
||||
// Draw a fixed size inch ruler pattern to
|
||||
// help users debug their printers
|
||||
var lineStartX = 1.0;
|
||||
var lineEndX = paper_x - lineStartX;
|
||||
var lineY = paper_y - 1.0;
|
||||
doc.setFont('Prompt-Regular');
|
||||
doc.setLineWidth(0.01);
|
||||
doc.line(lineStartX, lineY, lineEndX, lineY);
|
||||
var segIdx = 0;
|
||||
for(var tickX = lineStartX; tickX <= lineEndX; tickX += 1.0){
|
||||
doc.line(tickX, lineY, tickX, lineY + 0.25);
|
||||
doc.text(String(segIdx) + (segIdx == 0 ? " in" : ""), tickX + 0.1, lineY + 0.25);
|
||||
segIdx++;
|
||||
}
|
||||
// Draw ruler pattern
|
||||
const lineStartX = 1.0
|
||||
const lineEndX = paperWidth - lineStartX
|
||||
const lineY = paperHeight - 1.0
|
||||
|
||||
doc.setLineWidth(0.01)
|
||||
doc.line(lineStartX, lineY, lineEndX, lineY)
|
||||
|
||||
///////////////////////////////////////////
|
||||
// Annotate what was drawn + branding
|
||||
var img = new Image();
|
||||
img.src = require('@/assets/logoMono.png');
|
||||
doc.addImage(img, 'PNG', 1.0, 0.75, 1.4, 0.5 );
|
||||
doc.setFont('Prompt-Regular');
|
||||
doc.text(annotation, paper_x-1.0, 1.0, {maxWidth:(paper_x - 2.0)/2, align:"right"});
|
||||
for (let tickX = lineStartX; tickX <= lineEndX; tickX++) {
|
||||
doc.line(tickX, lineY, tickX, lineY + 0.25)
|
||||
doc.text(`${tickX - 1}${tickX - 1 === 0 ? " in" : ""}`, tickX + 0.1, lineY + 0.25)
|
||||
}
|
||||
|
||||
doc.save("calibrationTarget.pdf");
|
||||
// Add branding
|
||||
const logoImage = new Image();
|
||||
logoImage.src = require('@/assets/logos/logoMono.png');
|
||||
doc.addImage(logoImage, 'PNG', 1.0, 0.75, 1.4, 0.5);
|
||||
|
||||
doc.text(`${config.boardWidthIn} x ${config.boardHeightIn} | ${config.patternSpacingIn}in`, paperWidth - 1, 1.0,
|
||||
{
|
||||
maxWidth: (paperWidth - 2.0) / 2,
|
||||
align: "right",
|
||||
}
|
||||
)
|
||||
doc.save(`calibrationTarget-${config.type}.pdf`)
|
||||
},
|
||||
sendCameraSettings() {
|
||||
this.axios.post("http://" + this.$address + "/api/settings/camera", {
|
||||
@@ -773,18 +760,16 @@ export default {
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
isCalibrated(resolution) {
|
||||
return this.$store.getters.currentCameraSettings.calibrations
|
||||
.some(e => e.width === resolution.width && e.height === resolution.height);
|
||||
},
|
||||
|
||||
sendCalibrationMode() {
|
||||
let data = {
|
||||
['cameraIndex']: this.$store.state.currentCameraIndex
|
||||
};
|
||||
|
||||
if (this.isCalibrating === true) {
|
||||
if (this.isCalibrating) {
|
||||
data['takeCalibrationSnapshot'] = true
|
||||
} else {
|
||||
// This store prevents an edge case of a user not selecting a different resolution, which causes the set logic to not be called
|
||||
@@ -803,7 +788,7 @@ export default {
|
||||
this.snack = true;
|
||||
this.calibrationInProgress = true;
|
||||
|
||||
this.axios.post("http://" + this.$address + "/api/settings/endCalibration", this.$store.getters.currentCameraIndex)
|
||||
this.axios.post("http://" + this.$address + "/api/settings/endCalibration", {idx: this.$store.getters.currentCameraIndex})
|
||||
.then((response) => {
|
||||
if (response.status === 200) {
|
||||
this.calibrationInProgress = false;
|
||||
@@ -819,6 +804,12 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
::-webkit-scrollbar{
|
||||
height: 0.55em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.v-data-table {
|
||||
text-align: center;
|
||||
|
||||
@@ -1,33 +1,22 @@
|
||||
<template>
|
||||
<div
|
||||
style="overflow:hidden;height:100%;width:100%"
|
||||
height="100%"
|
||||
width="100%"
|
||||
style="overflow:hidden; height:100%; width:100%"
|
||||
>
|
||||
<iframe
|
||||
src="docs/index.html"
|
||||
frameborder="0"
|
||||
style="overflow:hidden;height:100%;width:100%"
|
||||
height="100%"
|
||||
width="100%"
|
||||
/>
|
||||
<div
|
||||
v-if="() => process.env.NODE_ENV === 'development'"
|
||||
style="width: 100%; height: 100%; padding: 16px"
|
||||
>
|
||||
<span style="color: white; font-weight: bold">PhotonClient is in development mode so the documentation page will not load. Please recompile in production mode with the documentation copied over after a full build.</span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
style="width: 100%; height: 100%"
|
||||
>
|
||||
<!--suppress HtmlUnknownTarget -->
|
||||
<iframe
|
||||
src="docs/index.html"
|
||||
style="overflow:hidden; height:100%; width:100%; border: 0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <iframe src="test.html" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe> -->
|
||||
|
||||
<style scoped>
|
||||
.videoClass {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.videoClass img {
|
||||
padding-top: 10px;
|
||||
height: auto !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.colsClass {
|
||||
padding: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -26,7 +26,6 @@
|
||||
:href="'http://' + this.$address + '/api/settings/photonvision-journalctl.txt'"
|
||||
download="photonvision-journalctl.txt"
|
||||
/>
|
||||
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<div class="pr-6 pl-6">
|
||||
|
||||
@@ -1,75 +1,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container
|
||||
class="pa-3"
|
||||
fluid
|
||||
class="pa-3"
|
||||
fluid
|
||||
>
|
||||
<v-row
|
||||
no-gutters
|
||||
align="center"
|
||||
justify="center"
|
||||
no-gutters
|
||||
align="center"
|
||||
justify="center"
|
||||
>
|
||||
<v-col
|
||||
cols="12"
|
||||
:class="['pb-3 ', 'pr-lg-3']"
|
||||
lg="8"
|
||||
align-self="stretch"
|
||||
cols="12"
|
||||
:class="['pb-3 ', 'pr-lg-3']"
|
||||
lg="8"
|
||||
align-self="stretch"
|
||||
>
|
||||
<v-card
|
||||
color="primary"
|
||||
height="100%"
|
||||
style="display: flex; flex-direction: column"
|
||||
dark
|
||||
color="primary"
|
||||
height="100%"
|
||||
style="display: flex; flex-direction: column"
|
||||
dark
|
||||
>
|
||||
<v-card-title
|
||||
class="pb-0 mb-0 pl-4 pt-1"
|
||||
style="height: 15%; min-height: 50px;"
|
||||
class="pb-0 mb-0 pl-4 pt-1"
|
||||
style="min-height: 50px; justify-content: space-between; align-content: center"
|
||||
>
|
||||
Cameras
|
||||
<v-chip
|
||||
:class="fpsTooLow ? 'ml-2 mt-1' : 'mt-2'"
|
||||
x-small
|
||||
<div class="pt-2">
|
||||
<span class="mr-4">Cameras</span>
|
||||
<v-chip
|
||||
label
|
||||
:color="fpsTooLow ? 'error' : 'transparent'"
|
||||
:text-color="fpsTooLow ? 'white' : 'grey'"
|
||||
>
|
||||
<span class="pr-1">Processing @ {{ Math.round($store.state.pipelineResults.fps) }} FPS –</span>
|
||||
<span v-if="fpsTooLow && !$store.getters.currentPipelineSettings.inputShouldShow && $store.getters.pipelineType == 2">HSV thresholds are too broad; narrow them for better performance</span>
|
||||
<span v-else-if="fpsTooLow && getters.currentCameraSettings.inputShouldShow">stop viewing the raw stream for better performance</span>
|
||||
<span v-else>{{ Math.min(Math.round($store.state.pipelineResults.latency), 9999) }} ms latency</span>
|
||||
</v-chip>
|
||||
<v-switch
|
||||
:text-color="fpsTooLow ? '#C7EA46' : '#ff4d00'"
|
||||
style="font-size: 1rem; padding: 0; margin: 0"
|
||||
>
|
||||
<span class="pr-1">Processing @ {{ Math.round($store.state.pipelineResults.fps) }} FPS –</span>
|
||||
<span v-if="fpsTooLow && !$store.getters.currentPipelineSettings.inputShouldShow && $store.getters.pipelineType === 2">HSV thresholds are too broad; narrow them for better performance</span>
|
||||
<span v-else-if="fpsTooLow && $store.getters.currentCameraSettings.inputShouldShow">stop viewing the raw stream for better performance</span>
|
||||
<span v-else>{{ Math.min(Math.round($store.state.pipelineResults.latency), 9999) }} ms latency</span>
|
||||
</v-chip>
|
||||
</div>
|
||||
<div>
|
||||
<v-switch
|
||||
v-model="driverMode"
|
||||
label="Driver Mode"
|
||||
style="margin-left: auto;"
|
||||
color="accent"
|
||||
/>
|
||||
class="pt-2"
|
||||
/>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-divider />
|
||||
<v-row
|
||||
align="center"
|
||||
align="center"
|
||||
class="pl-3 pr-3"
|
||||
>
|
||||
<v-col
|
||||
v-for="idx in (selectedOutputs instanceof Array ? selectedOutputs : [selectedOutputs])"
|
||||
:key="idx"
|
||||
cols="12"
|
||||
:md="selectedOutputs.length === 1 ? 12 : Math.floor(12 / selectedOutputs.length)"
|
||||
class="pb-0 pt-0"
|
||||
style="height: 100%;"
|
||||
v-for="idx in (selectedOutputs instanceof Array ? selectedOutputs : [selectedOutputs])"
|
||||
:key="idx"
|
||||
cols="12"
|
||||
:md="selectedOutputs.length === 1 ? 12 : Math.floor(12 / selectedOutputs.length)"
|
||||
style="height: 100%;"
|
||||
>
|
||||
<div style="position: relative; width: 100%; height: 100%;">
|
||||
<cv-image
|
||||
:id="idx === 0 ? 'raw-stream' : 'processed-stream'"
|
||||
ref="streams"
|
||||
:idx=idx
|
||||
:disconnected="!$store.state.backendConnected"
|
||||
scale="100"
|
||||
:max-height="$store.getters.isDriverMode ? '40vh' : '300px'"
|
||||
:max-height-md="$store.getters.isDriverMode ? '50vh' : '380px'"
|
||||
:max-height-lg="$store.getters.isDriverMode ? '55vh' : '390px'"
|
||||
:max-height-xl="$store.getters.isDriverMode ? '60vh' : '450px'"
|
||||
:alt="idx === 0 ? 'Raw stream' : 'Processed stream'"
|
||||
:color-picking="$store.state.colorPicking && idx === 0"
|
||||
@click="onImageClick"
|
||||
:id="idx === 0 ? 'raw-stream' : 'processed-stream'"
|
||||
ref="streams"
|
||||
:idx="idx"
|
||||
:disconnected="!$store.state.backendConnected"
|
||||
scale="95"
|
||||
:max-height="$store.getters.isDriverMode ? '40vh' : '300px'"
|
||||
:max-height-md="$store.getters.isDriverMode ? '50vh' : '380px'"
|
||||
:max-height-lg="$store.getters.isDriverMode ? '55vh' : '390px'"
|
||||
:max-height-xl="$store.getters.isDriverMode ? '60vh' : '450px'"
|
||||
:alt="idx === 0 ? 'Raw stream' : 'Processed stream'"
|
||||
:color-picking="$store.state.colorPicking && idx === 0"
|
||||
style="padding-top: 22px;"
|
||||
@click="onImageClick"
|
||||
/>
|
||||
</div>
|
||||
</v-col>
|
||||
@@ -77,44 +83,44 @@
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="12"
|
||||
class="pb-3"
|
||||
lg="4"
|
||||
align-self="stretch"
|
||||
cols="12"
|
||||
class="pb-3"
|
||||
lg="4"
|
||||
style="display: flex; flex-direction: column"
|
||||
>
|
||||
<v-card
|
||||
color="primary"
|
||||
color="primary"
|
||||
>
|
||||
<camera-and-pipeline-select />
|
||||
</v-card>
|
||||
<v-card
|
||||
:disabled="$store.getters.isDriverMode || $store.state.colorPicking"
|
||||
class="mt-3"
|
||||
color="primary"
|
||||
:disabled="$store.getters.isDriverMode || $store.state.colorPicking"
|
||||
class="mt-3"
|
||||
color="primary"
|
||||
>
|
||||
<v-row
|
||||
align="center"
|
||||
class="pl-3 pr-3"
|
||||
align="center"
|
||||
class="pa-sm-3"
|
||||
>
|
||||
<v-col lg="12">
|
||||
<p style="color: white;">
|
||||
Processing mode:
|
||||
Processing Mode
|
||||
</p>
|
||||
<v-btn-toggle
|
||||
v-model="processingMode"
|
||||
mandatory
|
||||
dark
|
||||
class="fill"
|
||||
v-model="processingMode"
|
||||
mandatory
|
||||
dark
|
||||
class="fill"
|
||||
>
|
||||
<v-btn
|
||||
color="secondary"
|
||||
color="secondary"
|
||||
>
|
||||
<v-icon>mdi-crop-square</v-icon>
|
||||
<v-icon>mdi-square-outline</v-icon>
|
||||
<span>2D</span>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="secondary"
|
||||
@click="on3DClick"
|
||||
color="secondary"
|
||||
@click="on3DClick"
|
||||
>
|
||||
<v-icon>mdi-cube-outline</v-icon>
|
||||
<span>3D</span>
|
||||
@@ -123,25 +129,25 @@
|
||||
</v-col>
|
||||
<v-col lg="12">
|
||||
<p style="color: white;">
|
||||
Stream display:
|
||||
Stream Display
|
||||
</p>
|
||||
<v-btn-toggle
|
||||
v-model="selectedOutputs"
|
||||
:multiple="$vuetify.breakpoint.mdAndUp"
|
||||
mandatory
|
||||
dark
|
||||
class="fill"
|
||||
v-model="selectedOutputs"
|
||||
:multiple="$vuetify.breakpoint.mdAndUp"
|
||||
mandatory
|
||||
dark
|
||||
class="fill"
|
||||
>
|
||||
<v-btn
|
||||
color="secondary"
|
||||
class="fill"
|
||||
color="secondary"
|
||||
class="fill"
|
||||
>
|
||||
<v-icon>mdi-import</v-icon>
|
||||
<span>Raw</span>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="secondary"
|
||||
class="fill"
|
||||
color="secondary"
|
||||
class="fill"
|
||||
>
|
||||
<v-icon>mdi-export</v-icon>
|
||||
<span>Processed</span>
|
||||
@@ -154,40 +160,40 @@
|
||||
</v-row>
|
||||
<v-row no-gutters>
|
||||
<v-col
|
||||
v-for="(tabs, idx) in tabGroups"
|
||||
:key="idx"
|
||||
:cols="Math.floor(12 / tabGroups.length)"
|
||||
:class="idx !== tabGroups.length - 1 ? 'pr-3' : ''"
|
||||
align-self="stretch"
|
||||
v-for="(tabs, idx) in tabGroups"
|
||||
:key="idx"
|
||||
:cols="Math.floor(12 / tabGroups.length)"
|
||||
:class="idx !== tabGroups.length - 1 ? 'pr-3' : ''"
|
||||
align-self="stretch"
|
||||
>
|
||||
<v-card
|
||||
color="primary"
|
||||
height="100%"
|
||||
class="pr-4 pl-4"
|
||||
color="primary"
|
||||
height="100%"
|
||||
class="pr-4 pl-4"
|
||||
>
|
||||
<v-tabs
|
||||
v-if="!$store.getters.isDriverMode"
|
||||
v-model="selectedTabs[idx]"
|
||||
grow
|
||||
background-color="primary"
|
||||
dark
|
||||
height="48"
|
||||
slider-color="accent"
|
||||
v-if="!$store.getters.isDriverMode"
|
||||
v-model="selectedTabs[idx]"
|
||||
grow
|
||||
background-color="primary"
|
||||
dark
|
||||
height="48"
|
||||
slider-color="accent"
|
||||
>
|
||||
<v-tab
|
||||
v-for="(tab, i) in tabs"
|
||||
:key="i"
|
||||
v-for="(tab, i) in tabs"
|
||||
:key="i"
|
||||
>
|
||||
{{ tab.name }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
<div class="pl-4 pr-4 pt-2">
|
||||
<div class="pl-4 pr-4 pt-4 pb-2">
|
||||
<keep-alive>
|
||||
<component
|
||||
:is="(tabs[selectedTabs[idx]] || tabs[0]).component"
|
||||
:ref="(tabs[selectedTabs[idx]] || tabs[0]).name"
|
||||
v-model="$store.getters.pipeline"
|
||||
@update="$emit('save')"
|
||||
:is="(tabs[selectedTabs[idx]] || tabs[0]).component"
|
||||
:ref="(tabs[selectedTabs[idx]] || tabs[0]).name"
|
||||
v-model="$store.getters.pipeline"
|
||||
@update="$emit('save')"
|
||||
/>
|
||||
</keep-alive>
|
||||
</div>
|
||||
@@ -197,18 +203,18 @@
|
||||
</v-container>
|
||||
|
||||
<v-snackbar
|
||||
v-model="showNTWarning"
|
||||
color="error"
|
||||
timeout="-1"
|
||||
top
|
||||
v-model="showNTWarning"
|
||||
color="error"
|
||||
timeout="-1"
|
||||
top
|
||||
>
|
||||
{{ $store.state.settings.networkSettings.runNTServer ?
|
||||
"NetworkTables server enabled! PhotonLib may not work." :
|
||||
"NetworkTables not connected! Are you on a network with a robot?" }}
|
||||
<template v-slot:action>
|
||||
<v-btn
|
||||
text
|
||||
@click="hideNTWarning = true"
|
||||
text
|
||||
@click="hideNTWarning = true"
|
||||
>
|
||||
Hide
|
||||
</v-btn>
|
||||
@@ -216,12 +222,12 @@
|
||||
</v-snackbar>
|
||||
|
||||
<v-dialog
|
||||
v-model="dialog"
|
||||
width="500"
|
||||
v-model="dialog"
|
||||
width="500"
|
||||
>
|
||||
<v-card
|
||||
color="primary"
|
||||
dark
|
||||
color="primary"
|
||||
dark
|
||||
>
|
||||
<v-card-title>
|
||||
Current resolution not calibrated
|
||||
@@ -230,9 +236,9 @@
|
||||
<v-card-text>
|
||||
Because the current resolution {{ this.$store.getters.currentVideoFormat.width }} x {{ this.$store.getters.currentVideoFormat.height }} is not yet calibrated, 3D mode cannot be enabled. Please
|
||||
<a
|
||||
href="/#/cameras"
|
||||
class="white--text"
|
||||
@click="$emit('switch-to-cameras')"
|
||||
href="/#/cameras"
|
||||
class="white--text"
|
||||
@click="$emit('switch-to-cameras')"
|
||||
> visit the Cameras tab</a> to calibrate this resolution. For now, SolvePNP will do nothing.
|
||||
</v-card-text>
|
||||
|
||||
@@ -241,9 +247,9 @@
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
color="white"
|
||||
text
|
||||
@click="closeUncalibratedDialog"
|
||||
color="white"
|
||||
text
|
||||
@click="closeUncalibratedDialog"
|
||||
>
|
||||
OK
|
||||
</v-btn>
|
||||
@@ -372,15 +378,14 @@ export default {
|
||||
const group = ret[i];
|
||||
|
||||
// All the tabs we allow
|
||||
const filteredGroup = group.filter(it =>
|
||||
ret[i] = group.filter(it =>
|
||||
!(!allow3d && it.name === "3D") //Filter out 3D tab any time 3D isn't calibrated
|
||||
&& !((!allow3d || isAprilTag || isAruco) && it.name === "PnP") //Filter out the PnP config tab if 3D isn't available, or we're doing Apriltags
|
||||
&& !((isAprilTag || isAruco) && (it.name === "Threshold")) //Filter out threshold tab if we're doing apriltags
|
||||
&& !((isAprilTag || isAruco)&& (it.name === "Contours")) //Filter out contours if we're doing Apriltag
|
||||
&& !((isAprilTag || isAruco) && (it.name === "Contours")) //Filter out contours if we're doing Apriltag
|
||||
&& !(!isAprilTag && it.name === "AprilTag") //Filter out apriltag unless we actually are doing Apriltags
|
||||
&& !(!isAruco && it.name === "Aruco")
|
||||
);
|
||||
ret[i] = filteredGroup;
|
||||
}
|
||||
|
||||
// One last filter to remove empty lists
|
||||
@@ -408,7 +413,7 @@ export default {
|
||||
}
|
||||
},
|
||||
selectedOutputs: {
|
||||
// All this logic exists to deal with the reality that the output select buttons sometimes need an array and sometimes need a number (depending on whether or not they're exclusive)
|
||||
// All this logic exists to deal with the reality that the output select buttons sometimes need an array and sometimes need a number (depending on whether they're exclusive)
|
||||
get() {
|
||||
// We switch the selector to single-select only on sm-and-down size devices, so we have to return a Number instead of an Array in that state
|
||||
let ret = [];
|
||||
@@ -445,11 +450,11 @@ export default {
|
||||
},
|
||||
fpsTooLow: {
|
||||
get() {
|
||||
// For now we only show the FPS is too low warning when GPU acceleration is enabled, because we don't really trust the presented video modes otherwise
|
||||
// For now, we only show the FPS is too low warning when GPU acceleration is enabled, because we don't really trust the presented video modes otherwise
|
||||
const currFPS = this.$store.state.pipelineResults.fps;
|
||||
const targetFPS = this.$store.getters.currentVideoFormat.fps;
|
||||
const driverMode = this.$store.getters.isDriverMode;
|
||||
const gpuAccel = this.$store.state.settings.general.gpuAcceleration === true;
|
||||
const gpuAccel = this.$store.state.settings.general.gpuAcceleration;
|
||||
const isReflective = this.$store.getters.pipelineType === 2;
|
||||
|
||||
return (currFPS - targetFPS) < -5 && this.$store.state.pipelineResults.fps !== 0 && !driverMode && gpuAccel && isReflective;
|
||||
|
||||
@@ -1,74 +1,74 @@
|
||||
<template>
|
||||
<div>
|
||||
<CVselect
|
||||
v-model="selectedFamily"
|
||||
name="Target family"
|
||||
:list="['AprilTag family 36h11', 'AprilTag family 25h9', 'AprilTag family 16h5']"
|
||||
select-cols="8"
|
||||
@input="handlePipelineUpdate('tagFamily', selectedFamily)"
|
||||
v-model="selectedFamily"
|
||||
name="Target family"
|
||||
:list="['AprilTag family 36h11', 'AprilTag family 25h9', 'AprilTag family 16h5']"
|
||||
select-cols="8"
|
||||
@input="handlePipelineUpdate('tagFamily', selectedFamily)"
|
||||
/>
|
||||
<CVslider
|
||||
v-model="decimate"
|
||||
class="pt-2"
|
||||
slider-cols="8"
|
||||
name="Decimate"
|
||||
min="1"
|
||||
max="8"
|
||||
step="1.0"
|
||||
tooltip="Increases FPS at the expense of range by reducing image resolution initially"
|
||||
@input="handlePipelineData('decimate')"
|
||||
v-model="decimate"
|
||||
class="pt-2"
|
||||
slider-cols="8"
|
||||
name="Decimate"
|
||||
min="1"
|
||||
max="8"
|
||||
step="1.0"
|
||||
tooltip="Increases FPS at the expense of range by reducing image resolution initially"
|
||||
@input="handlePipelineData('decimate')"
|
||||
/>
|
||||
<CVslider
|
||||
v-model="blur"
|
||||
class="pt-2"
|
||||
slider-cols="8"
|
||||
name="Blur"
|
||||
min="0"
|
||||
max="5"
|
||||
step=".01"
|
||||
tooltip="Gaussian blur added to the image, high FPS cost for slightly decreased noise"
|
||||
@input="handlePipelineData('blur')"
|
||||
v-model="blur"
|
||||
class="pt-2"
|
||||
slider-cols="8"
|
||||
name="Blur"
|
||||
min="0"
|
||||
max="5"
|
||||
step=".01"
|
||||
tooltip="Gaussian blur added to the image, high FPS cost for slightly decreased noise"
|
||||
@input="handlePipelineData('blur')"
|
||||
/>
|
||||
<CVslider
|
||||
v-model="threads"
|
||||
class="pt-2"
|
||||
slider-cols="8"
|
||||
name="Threads"
|
||||
min="1"
|
||||
max="8"
|
||||
step="1"
|
||||
tooltip="Number of threads spawned by the AprilTag detector"
|
||||
@input="handlePipelineData('threads')"
|
||||
v-model="threads"
|
||||
class="pt-2"
|
||||
slider-cols="8"
|
||||
name="Threads"
|
||||
min="1"
|
||||
max="8"
|
||||
step="1"
|
||||
tooltip="Number of threads spawned by the AprilTag detector"
|
||||
@input="handlePipelineData('threads')"
|
||||
/>
|
||||
<CVswitch
|
||||
v-model="refineEdges"
|
||||
class="pt-2"
|
||||
slider-cols="8"
|
||||
name="Refine Edges"
|
||||
tooltip="Further refines the apriltag corner position initial estimate, suggested left on"
|
||||
@input="handlePipelineData('refineEdges')"
|
||||
v-model="refineEdges"
|
||||
class="pt-2"
|
||||
slider-cols="8"
|
||||
name="Refine Edges"
|
||||
tooltip="Further refines the AprilTag corner position initial estimate, suggested left on"
|
||||
@input="handlePipelineData('refineEdges')"
|
||||
/>
|
||||
<CVslider
|
||||
v-model="decisionMargin"
|
||||
class="pt-2 pb-4"
|
||||
slider-cols="8"
|
||||
name="Decision Margin Cutoff"
|
||||
min="0"
|
||||
max="250"
|
||||
step="1"
|
||||
tooltip="Tags with a 'margin' (decoding quality score) less than this wil be rejected. Increase this to reduce the number of false positive detections"
|
||||
@input="handlePipelineData('decisionMargin')"
|
||||
v-model="decisionMargin"
|
||||
class="pt-2 pb-4"
|
||||
slider-cols="8"
|
||||
name="Decision Margin Cutoff"
|
||||
min="0"
|
||||
max="250"
|
||||
step="1"
|
||||
tooltip="Tags with a 'margin' (decoding quality score) less than this wil be rejected. Increase this to reduce the number of false positive detections"
|
||||
@input="handlePipelineData('decisionMargin')"
|
||||
/>
|
||||
<CVslider
|
||||
v-model="numIterations"
|
||||
class="pt-2 pb-4"
|
||||
slider-cols="8"
|
||||
name="Pose Estimation Iterations"
|
||||
min="0"
|
||||
max="500"
|
||||
step="1"
|
||||
tooltip="Number of iterations the pose estimation algorithm will run, 50-100 is a good starting point"
|
||||
@input="handlePipelineData('numIterations')"
|
||||
v-model="numIterations"
|
||||
class="pt-2 pb-4"
|
||||
slider-cols="8"
|
||||
name="Pose Estimation Iterations"
|
||||
min="0"
|
||||
max="500"
|
||||
step="1"
|
||||
tooltip="Number of iterations the pose estimation algorithm will run, 50-100 is a good starting point"
|
||||
@input="handlePipelineData('numIterations')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
<template>
|
||||
<div>
|
||||
<CVslider
|
||||
v-model="decimate"
|
||||
class="pt-2"
|
||||
slider-cols="8"
|
||||
name="Decimate"
|
||||
min="1"
|
||||
max="8"
|
||||
step=".5"
|
||||
tooltip="Increases FPS at the expense of range by reducing image resolution initially"
|
||||
@input="handlePipelineData('decimate')"
|
||||
v-model="decimate"
|
||||
class="pt-2"
|
||||
slider-cols="8"
|
||||
name="Decimate"
|
||||
min="1"
|
||||
max="8"
|
||||
step="0.5"
|
||||
tooltip="Increases FPS at the expense of range by reducing image resolution initially"
|
||||
@input="handlePipelineData('decimate')"
|
||||
/>
|
||||
<CVslider
|
||||
v-model="numIterations"
|
||||
class="pt-2"
|
||||
slider-cols="8"
|
||||
name="Corner Iterations"
|
||||
min="30"
|
||||
max="1000"
|
||||
step="5"
|
||||
tooltip="How many iterations are going to be used in order to refine corners. Higher values are lead to more accuracy at the cost of performance"
|
||||
@input="handlePipelineData('numIterations')"
|
||||
v-model="numIterations"
|
||||
class="pt-2"
|
||||
slider-cols="8"
|
||||
name="Corner Iterations"
|
||||
min="30"
|
||||
max="1000"
|
||||
step="5"
|
||||
tooltip="How many iterations are going to be used in order to refine corners. Higher values are lead to more accuracy at the cost of performance"
|
||||
@input="handlePipelineData('numIterations')"
|
||||
/>
|
||||
<CVslider
|
||||
v-model="cornerAccuracy"
|
||||
class="pt-2"
|
||||
slider-cols="8"
|
||||
name="Corner Accuracy"
|
||||
min=".01"
|
||||
max="100"
|
||||
step=".01"
|
||||
tooltip="Minimum accuracy for the corners, lower is better but more performance intensive "
|
||||
@input="handlePipelineData('cornerAccuracy')"
|
||||
v-model="cornerAccuracy"
|
||||
class="pt-2"
|
||||
slider-cols="8"
|
||||
name="Corner Accuracy"
|
||||
min="0.01"
|
||||
max="100"
|
||||
step="0.01"
|
||||
tooltip="Minimum accuracy for the corners, lower is better but more performance intensive "
|
||||
@input="handlePipelineData('cornerAccuracy')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -61,9 +61,9 @@ export default {
|
||||
this.$store.commit("mutatePipeline", {"numIterations": val});
|
||||
},
|
||||
},
|
||||
cornerAccuracy: {
|
||||
cornerAccuracy: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.cornerAccuracy
|
||||
return this.$store.getters.currentPipelineSettings.cornerDetectionAccuracyPercentage
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"cornerAccuracy": val});
|
||||
|
||||
@@ -18,19 +18,15 @@
|
||||
@input="handlePipelineData('contourTargetOrientation')"
|
||||
@rollback="e=> rollback('contourTargetOrientation', e)"
|
||||
/>
|
||||
|
||||
<CVswitch
|
||||
v-model="outputShowMultipleTargets"
|
||||
name="Show Multiple Targets"
|
||||
tooltip="If enabled, up to five targets will be displayed and sent to user code, instead of just one"
|
||||
:disabled="isTagPipeline"
|
||||
class="mb-4"
|
||||
text-cols="3"
|
||||
@input="handlePipelineData('outputShowMultipleTargets')"
|
||||
|
||||
@rollback="e=> rollback('outputShowMultipleTargets', e)"
|
||||
/>
|
||||
<v-divider />
|
||||
<CVselect
|
||||
v-model="offsetRobotOffsetMode"
|
||||
name="Robot Offset Mode"
|
||||
|
||||
@@ -16,42 +16,42 @@
|
||||
<thead style="font-size: 1.25rem;">
|
||||
<tr>
|
||||
<th class="text-center">
|
||||
Target
|
||||
Target Count
|
||||
</th>
|
||||
<th
|
||||
v-if="$store.getters.pipelineType === 4 || (($store.getters.pipelineType - 2) === 3)"
|
||||
v-if="$store.getters.pipelineType === 4 || (($store.getters.pipelineType - 2) === 3)"
|
||||
class="text-center"
|
||||
>
|
||||
Fiducial ID
|
||||
</th>
|
||||
<template v-if="!$store.getters.currentPipelineSettings.solvePNPEnabled">
|
||||
<th class="text-center">
|
||||
Pitch, °
|
||||
Pitch θ°
|
||||
</th>
|
||||
<th class="text-center">
|
||||
Yaw, °
|
||||
Yaw θ°
|
||||
</th>
|
||||
<th class="text-center">
|
||||
Skew, °
|
||||
Skew θ°
|
||||
</th>
|
||||
<th class="text-center">
|
||||
Area, %
|
||||
Area %
|
||||
</th>
|
||||
</template>
|
||||
<template v-else>
|
||||
<th class="text-center">
|
||||
X, m
|
||||
X meters
|
||||
</th>
|
||||
<th class="text-center">
|
||||
Y, m
|
||||
Y meters
|
||||
</th>
|
||||
<th class="text-center">
|
||||
Z Angle, °
|
||||
Z Angle θ°
|
||||
</th>
|
||||
</template>
|
||||
<template v-if="$store.getters.pipelineType === 4 && $store.getters.currentPipelineSettings.solvePNPEnabled">
|
||||
<th class="text-center">
|
||||
Ambiguity
|
||||
Ambiguity %
|
||||
</th>
|
||||
</template>
|
||||
</tr>
|
||||
|
||||
@@ -132,9 +132,9 @@ export default {
|
||||
},
|
||||
averageHue: {
|
||||
get() {
|
||||
var isInverted = this.$store.getters.currentPipelineSettings.hueInverted;
|
||||
const isInverted = this.$store.getters.currentPipelineSettings.hueInverted;
|
||||
const arr = this.$store.getters.currentPipelineSettings.hsvHue;
|
||||
var retVal = 0;
|
||||
let retVal = 0;
|
||||
|
||||
if (Array.isArray(arr)) {
|
||||
retVal = (arr[0] + arr[1]);
|
||||
@@ -251,17 +251,17 @@ export default {
|
||||
#hue-slider >>> .v-slider {
|
||||
background: linear-gradient( to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100% );
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 5px #333, inset 0px 0px 3px #333;
|
||||
box-shadow: 0 0 5px #333, inset 0 0 3px #333;
|
||||
}
|
||||
#sat-slider >>> .v-slider {
|
||||
background: linear-gradient( to right, #fff 0%, hsl(var(--averageHue), 100%, 50%) 100% );
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 5px #333, inset 0px 0px 3px #333;
|
||||
box-shadow: 0 0 5px #333, inset 0 0 3px #333;
|
||||
}
|
||||
#value-slider >>> .v-slider {
|
||||
background: linear-gradient( to right, #000 0%, hsl(var(--averageHue), 100%, 50%) 100% );
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 5px #333, inset 0px 0px 3px #333;
|
||||
box-shadow: 0 0 5px #333, inset 0 0 3px #333;
|
||||
}
|
||||
>>> .v-slider__thumb {
|
||||
outline: black solid thin;
|
||||
|
||||
@@ -1,56 +1,95 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-row>
|
||||
<v-col cols="12" lg="4" md="6">
|
||||
<v-btn color="red" @click="restartProgram()">
|
||||
<v-col
|
||||
cols="12"
|
||||
lg="4"
|
||||
md="6"
|
||||
>
|
||||
<v-btn
|
||||
color="red"
|
||||
@click="restartProgram()"
|
||||
>
|
||||
<v-icon left>
|
||||
mdi-restart
|
||||
</v-icon>
|
||||
Restart PhotonVision
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" lg="4" md="6">
|
||||
<v-btn color="red" @click="restartDevice()">
|
||||
<v-col
|
||||
cols="12"
|
||||
lg="4"
|
||||
md="6"
|
||||
>
|
||||
<v-btn
|
||||
color="red"
|
||||
@click="restartDevice()"
|
||||
>
|
||||
<v-icon left>
|
||||
mdi-restart-alert
|
||||
</v-icon>
|
||||
Restart Device
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" lg="4">
|
||||
<v-btn color="secondary" @click="$refs.offlineUpdate.click()">
|
||||
<v-col
|
||||
cols="12"
|
||||
lg="4"
|
||||
>
|
||||
<v-btn
|
||||
color="secondary"
|
||||
@click="$refs.offlineUpdate.click()"
|
||||
>
|
||||
<v-icon left>
|
||||
mdi-update
|
||||
mdi-upload
|
||||
</v-icon>
|
||||
Offline Update
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider />
|
||||
<v-divider style="margin: 12px 0;" />
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-btn color="secondary" @click="$refs.exportSettings.click()">
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<v-btn
|
||||
color="secondary"
|
||||
@click="$refs.importSettings.click()"
|
||||
>
|
||||
<v-icon left>
|
||||
mdi-download
|
||||
</v-icon>
|
||||
Export Settings
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-btn color="secondary" @click="$refs.importSettings.click()">
|
||||
<v-icon left>
|
||||
mdi-upload
|
||||
mdi-import
|
||||
</v-icon>
|
||||
Import Settings
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-btn color="secondary" @click="$refs.exportLogFile.click()">
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<v-btn
|
||||
color="secondary"
|
||||
@click="$refs.exportSettings.click()"
|
||||
>
|
||||
<v-icon left>
|
||||
mdi-file
|
||||
mdi-export
|
||||
</v-icon>
|
||||
Export current log
|
||||
Export Settings
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<v-btn
|
||||
color="secondary"
|
||||
@click="$refs.exportLogFile.click()"
|
||||
>
|
||||
<v-icon left>
|
||||
mdi-download
|
||||
</v-icon>
|
||||
Download Current Log
|
||||
|
||||
<!-- Special hidden link that gets 'clicked' when the user exports journalctl logs -->
|
||||
<a
|
||||
@@ -66,16 +105,27 @@
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-btn color="secondary" @click="showLogs()">
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<v-btn
|
||||
color="secondary"
|
||||
@click="showLogs()"
|
||||
>
|
||||
<v-icon left>
|
||||
mdi-bug
|
||||
mdi-eye
|
||||
</v-icon>
|
||||
Show log viewer
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-snackbar v-model="snack" top :color="snackbar.color" timeout="-1">
|
||||
<v-snackbar
|
||||
v-model="snack"
|
||||
top
|
||||
:color="snackbar.color"
|
||||
timeout="-1"
|
||||
>
|
||||
<span>{{ snackbar.text }}</span>
|
||||
</v-snackbar>
|
||||
|
||||
@@ -86,14 +136,12 @@
|
||||
accept=".zip, .json"
|
||||
style="display: none;"
|
||||
@change="readImportedSettings"
|
||||
/>
|
||||
>
|
||||
<!-- Special hidden link that gets 'clicked' when the user exports settings -->
|
||||
<a
|
||||
ref="exportSettings"
|
||||
style="color: black; text-decoration: none; display: none"
|
||||
:href="
|
||||
'http://' + this.$address + '/api/settings/photonvision_config.zip'
|
||||
"
|
||||
:href="'http://' + this.$address + '/api/settings/photonvision_config.zip'"
|
||||
download="photonvision-settings.zip"
|
||||
/>
|
||||
|
||||
@@ -104,12 +152,13 @@
|
||||
accept=".jar"
|
||||
style="display: none;"
|
||||
@change="doOfflineUpdate"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// eslint-disable-next-line
|
||||
name: "Device Control",
|
||||
data() {
|
||||
return {
|
||||
@@ -270,7 +319,7 @@ export default {
|
||||
.infoTable {
|
||||
border: 1px solid;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0px;
|
||||
border-spacing: 0;
|
||||
border-radius: 5px;
|
||||
text-align: left;
|
||||
margin-bottom: 10px;
|
||||
@@ -278,12 +327,9 @@ export default {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
w
|
||||
.infoElem {
|
||||
padding-right: 15px;
|
||||
padding-bottom: 1px;
|
||||
padding-top: 1px;
|
||||
padding-left: 10px;
|
||||
border-right: 1px solid;
|
||||
padding: 1px 15px 1px 10px;
|
||||
border-right: 1px solid;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -16,7 +16,8 @@
|
||||
import CVslider from "../../components/common/cv-slider";
|
||||
|
||||
export default {
|
||||
name: 'LEDs',
|
||||
// eslint-disable-next-line
|
||||
name: 'LED Control',
|
||||
components: {
|
||||
CVslider,
|
||||
},
|
||||
|
||||
@@ -6,19 +6,22 @@
|
||||
>
|
||||
<CVinput
|
||||
v-model="ntServerAddress"
|
||||
:input-cols="inputCols"
|
||||
:input-cols="inputCols - 1"
|
||||
:label-cols="3"
|
||||
:disabled="settings.runNTServer"
|
||||
name="Team Number"
|
||||
tooltip="enter the team number or the IP address of the robot NetworkTables server"
|
||||
:rules="[v => isValidTeamNumber(v) || 'Team Number must be non blank and a team number, IP address, or hostname']"
|
||||
name="Team Number/NetworkTables Server Address"
|
||||
tooltip="Enter the Team Number or the IP address of the NetworkTables Server"
|
||||
:rules="[v => isValidTeamNumber(v) || 'The NetworkTables Server Address must be a non blank team number, IP address, or hostname']"
|
||||
/>
|
||||
<v-banner
|
||||
v-show="!isValidTeamNumber(ntServerAddress) && !runNTServer"
|
||||
rounded
|
||||
color="red"
|
||||
text-color="white"
|
||||
style="margin: 8px 0"
|
||||
icon="mdi-alert-circle-outline"
|
||||
>
|
||||
Team Number unset or invalid. NetworkTables will not be able to connect.
|
||||
NetworkTables Server Address is unset or invalid. NetworkTables is unable to connect
|
||||
</v-banner>
|
||||
<CVradio
|
||||
v-show="$store.state.settings.networkSettings.shouldManage"
|
||||
@@ -54,8 +57,9 @@
|
||||
rounded
|
||||
color="red"
|
||||
text-color="white"
|
||||
icon="mdi-information-outline"
|
||||
>
|
||||
This switch is intended for testing; it should be off on a robot. PhotonLib will NOT work!
|
||||
This mode is intended for debugging; it should be off for proper usage. PhotonLib will NOT work!
|
||||
</v-banner>
|
||||
</v-form>
|
||||
<v-btn
|
||||
@@ -77,12 +81,9 @@
|
||||
</v-snackbar>
|
||||
|
||||
<template v-if="$store.state.settings.networkSettings.shouldManage && false">
|
||||
|
||||
<!-- Advanced controls for changing DHCP settings and stuff -->
|
||||
<v-divider class="mt-4 mb-4" />
|
||||
|
||||
<v-title> Advanced </v-title>
|
||||
|
||||
<v-card-title> Advanced </v-card-title>
|
||||
<CVinput
|
||||
:input-cols="inputCols"
|
||||
name="Set DHCP command"
|
||||
@@ -99,69 +100,7 @@
|
||||
:input-cols="inputCols"
|
||||
name="Physical interface"
|
||||
/>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- TEMP - RIO finder is not currently enabled
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<v-simple-table
|
||||
fixed-header
|
||||
height="100%"
|
||||
dense
|
||||
>
|
||||
<template v-slot:default>
|
||||
<thead style="font-size: 1.25rem;">
|
||||
<tr>
|
||||
<th>
|
||||
Device IPs
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(value, index) in $store.state.networkInfo.deviceips"
|
||||
:key="index"
|
||||
>
|
||||
<td>{{ value }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</template>
|
||||
</v-simple-table>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<v-simple-table
|
||||
fixed-header
|
||||
height="100%"
|
||||
dense
|
||||
>
|
||||
<template v-slot:default>
|
||||
<thead style="font-size: 1.25rem;">
|
||||
<tr>
|
||||
<th>
|
||||
Possible RoboRIOs
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(value, index) in $store.state.networkInfo.possibleRios"
|
||||
:key="index"
|
||||
>
|
||||
<td>{{ value }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</template>
|
||||
</v-simple-table>
|
||||
</v-col>
|
||||
</v-row>
|
||||
-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -274,7 +213,7 @@ export default {
|
||||
let restAreOnes = false;
|
||||
for (let i = 3; i >= 0; i--) {
|
||||
for (let j = 0; j < 8; j++) {
|
||||
let bitValue = (octets[i] >>> j & 1) == 1;
|
||||
let bitValue = (octets[i] >>> j & 1) === 1;
|
||||
if (restAreOnes && !bitValue)
|
||||
return false;
|
||||
restAreOnes = bitValue;
|
||||
@@ -343,3 +282,8 @@ export default {
|
||||
font-family: monospace !important;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.v-banner__wrapper {
|
||||
padding: 6px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,16 +3,16 @@
|
||||
<v-row class="pa-4">
|
||||
<table class="infoTable">
|
||||
<tr>
|
||||
<th class="infoElem">
|
||||
<th class="infoElem infoElemTitle">
|
||||
Version
|
||||
</th>
|
||||
<th class="infoElem">
|
||||
<th class="infoElem infoElemTitle">
|
||||
Hardware Model
|
||||
</th>
|
||||
<th class="infoElem">
|
||||
<th class="infoElem infoElemTitle">
|
||||
Platform
|
||||
</th>
|
||||
<th class="infoElem">
|
||||
<th class="infoElem infoElemTitle">
|
||||
GPU Acceleration
|
||||
</th>
|
||||
</tr>
|
||||
@@ -34,19 +34,19 @@
|
||||
|
||||
<table class="infoTable">
|
||||
<tr>
|
||||
<th class="infoElem">
|
||||
<th class="infoElem infoElemTitle">
|
||||
CPU Usage
|
||||
</th>
|
||||
<th class="infoElem">
|
||||
<th class="infoElem infoElemTitle">
|
||||
CPU Temp
|
||||
</th>
|
||||
<th class="infoElem">
|
||||
<th class="infoElem infoElemTitle">
|
||||
CPU Memory Usage
|
||||
</th>
|
||||
<th class="infoElem">
|
||||
<th class="infoElem infoElemTitle">
|
||||
GPU Memory Usage
|
||||
</th>
|
||||
<th class="infoElem">
|
||||
<th class="infoElem infoElemTitle">
|
||||
Disk Usage
|
||||
</th>
|
||||
<th class="infoElem">
|
||||
@@ -54,17 +54,18 @@
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<span
|
||||
v-bind="attrs"
|
||||
class="infoElemTitle"
|
||||
v-on="on"
|
||||
>
|
||||
ⓘ CPU Throttling
|
||||
CPU Throttling
|
||||
</span>
|
||||
</template>
|
||||
<span>
|
||||
Current or Previous Reason for the cpu being held back from maximum performance.
|
||||
Current or Previous Reason for the cpu being held back from maximum performance.
|
||||
</span>
|
||||
</v-tooltip>
|
||||
</th>
|
||||
<th class="infoElem">
|
||||
<th class="infoElem infoElemTitle">
|
||||
CPU Uptime
|
||||
</th>
|
||||
</tr>
|
||||
@@ -125,32 +126,6 @@
|
||||
>
|
||||
<span>{{ snackbar.text }}</span>
|
||||
</v-snackbar>
|
||||
|
||||
<!-- Special hidden upload input that gets 'clicked' when the user imports settings -->
|
||||
<input
|
||||
ref="importSettings"
|
||||
type="file"
|
||||
accept=".zip, .json"
|
||||
style="display: none;"
|
||||
|
||||
@change="readImportedSettings"
|
||||
>
|
||||
<!-- Special hidden link that gets 'clicked' when the user exports settings -->
|
||||
<a
|
||||
ref="exportSettings"
|
||||
style="color: black; text-decoration: none; display: none"
|
||||
:href="'http://' + this.$address + '/api/settings/photonvision_config.zip'"
|
||||
download="photonvision-settings.zip"
|
||||
/>
|
||||
|
||||
<!-- Special hidden new jar upload input that gets 'clicked' when the user posts a new .jar -->
|
||||
<input
|
||||
ref="offlineUpdate"
|
||||
type="file"
|
||||
accept=".jar"
|
||||
style="display: none;"
|
||||
@change="doOfflineUpdate"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -192,94 +167,6 @@ export default {
|
||||
return this.$store.state.metrics;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
restartProgram() {
|
||||
this.axios.post('http://' + this.$address + '/api/restartProgram', {});
|
||||
},
|
||||
restartDevice() {
|
||||
this.axios.post('http://' + this.$address + '/api/restartDevice', {});
|
||||
},
|
||||
readImportedSettings(event) {
|
||||
let formData = new FormData();
|
||||
formData.append("zipData", event.target.files[0]);
|
||||
this.axios.post("http://" + this.$address + "/api/settings/import", formData,
|
||||
{headers: {"Content-Type": "multipart/form-data"}}).then(() => {
|
||||
this.snackbar = {
|
||||
color: "success",
|
||||
text: "Settings imported successfully! PhotonVision will restart in the background...",
|
||||
};
|
||||
this.snack = true;
|
||||
}).catch(err => {
|
||||
if (err.response) {
|
||||
this.snackbar = {
|
||||
color: "error",
|
||||
text: "Error while uploading settings file! Could not process provided file.",
|
||||
};
|
||||
} else if (err.request) {
|
||||
this.snackbar = {
|
||||
color: "error",
|
||||
text: "Error while uploading settings file! No respond to upload attempt.",
|
||||
};
|
||||
} else {
|
||||
this.snackbar = {
|
||||
color: "error",
|
||||
text: "Error while uploading settings file!",
|
||||
};
|
||||
}
|
||||
this.snack = true;
|
||||
});
|
||||
},
|
||||
doOfflineUpdate(event) {
|
||||
this.snackbar = {
|
||||
color: "secondary",
|
||||
text: "New Software Upload in Process..."
|
||||
};
|
||||
this.snack = true;
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append("jarData", event.target.files[0]);
|
||||
this.axios.post("http://" + this.$address + "/api/settings/offlineUpdate", formData,
|
||||
{headers: {"Content-Type": "multipart/form-data"},
|
||||
onUploadProgress: function( progressEvent ) {
|
||||
this.uploadPercentage = parseInt( Math.round( ( progressEvent.loaded / progressEvent.total ) * 100 ) );
|
||||
if(this.uploadPercentage < 99.5){
|
||||
this.snackbar.text = "New Software Upload in Process, " + this.uploadPercentage + "% complete";
|
||||
} else {
|
||||
this.snackbar.text = "Installing uploaded software...";
|
||||
}
|
||||
|
||||
}.bind(this)
|
||||
}).then(() => {
|
||||
this.snackbar = {
|
||||
color: "success",
|
||||
text: "New .jar copied successfully! PhotonVision will restart in the background...",
|
||||
};
|
||||
this.snack = true;
|
||||
}).catch(err => {
|
||||
if (err.response) {
|
||||
this.snackbar = {
|
||||
color: "error",
|
||||
text: "Error while uploading new .jar file! Could not process provided file.",
|
||||
};
|
||||
} else if (err.request) {
|
||||
this.snackbar = {
|
||||
color: "error",
|
||||
text: "Error while uploading new .jar file! No respond to upload attempt.",
|
||||
};
|
||||
} else {
|
||||
this.snackbar = {
|
||||
color: "error",
|
||||
text: "Error while uploading new .jar file!",
|
||||
};
|
||||
}
|
||||
this.snack = true;
|
||||
});
|
||||
},
|
||||
showLogs(event) {
|
||||
event;
|
||||
this.$store.state.logsOverlay = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -291,7 +178,7 @@ export default {
|
||||
.infoTable{
|
||||
border: 1px solid;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0px;
|
||||
border-spacing: 0;
|
||||
border-radius: 5px;
|
||||
text-align: left;
|
||||
margin-bottom: 10px;
|
||||
@@ -301,11 +188,15 @@ export default {
|
||||
}
|
||||
|
||||
.infoElem {
|
||||
padding-right: 15px;
|
||||
padding-bottom: 1px;
|
||||
padding-top: 1px;
|
||||
padding-left: 10px;
|
||||
padding: 1px 15px 1px 10px;
|
||||
border-right: 1px solid;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.infoElemTitle {
|
||||
font-size: 18px;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #ffd843;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user