UI Redesign (#22)

* Rework UI into a new, responsive layout

* Send two streams (only one is currently downscaled)
This commit is contained in:
Declan Freeman-Gleason
2020-07-13 19:34:31 -07:00
committed by GitHub
parent aed92e7132
commit 8b46ad1cab
29 changed files with 945 additions and 559 deletions

View File

@@ -21,14 +21,17 @@ export default new Vuex.Store({
undoRedo: undoRedo
},
state: {
currentCameraIndex: 0,
saveBar: false,
compactMode: undefined, // Compact mode is initially unset on purpose
currentCameraIndex: 0,
selectedOutputs: [0, 1], // 0 indicates normal, 1 indicates threshold
cameraSettings: [ // This is a list of objects representing the settings of all cameras
{
tiltDegrees: 0.0,
currentPipelineIndex: 0,
pipelineNicknames: ["Unknown"],
streamPort: 1181,
outputStreamPort: 1181,
inputStreamPort: 1182,
nickname: "Unknown",
videoFormatList: [
{
@@ -66,7 +69,6 @@ export default new Vuex.Store({
contourIntersection: 0,
contourSortMode: 0,
outputShowMultipleTargets: false,
outputShowThresholded: 0,
offsetRobotOffsetMode: 0,
solvePNPEnabled: false,
targetRegion: 0,
@@ -93,11 +95,13 @@ export default new Vuex.Store({
]
},
mutations: {
cameraSettings: set('cameraSettings'),
saveBar: set('saveBar'),
compactMode: set('compactMode'),
cameraSettings: set('cameraSettings'),
currentCameraIndex: set('currentCameraIndex'),
pipelineResults: set('pipelineResults'),
networkSettings: set('networkSettings'),
selectedOutputs: set('selectedOutputs'),
currentPipelineIndex: (state, val) => {
const settings = state.cameraSettings[state.currentCameraIndex];
@@ -110,7 +114,9 @@ export default new Vuex.Store({
if (!payload.hasOwnProperty(key)) continue;
const value = payload[key];
const settings = state.cameraSettings[state.currentCameraIndex].currentPipelineSettings;
if (key === "selectedOutputs") console.log(settings);
if (settings.hasOwnProperty(key)) {
if (key === "selectedOutputs") console.log('here');
Vue.set(settings, key, value);
}
}
@@ -129,9 +135,11 @@ export default new Vuex.Store({
}
},
getters: {
isDriverMode: state => state.cameraSettings[state.currentCameraIndex].currentPipelineIndex === -1,
pipelineSettings: state => state.pipelineSettings,
streamAddress: state =>
"http://" + location.hostname + ":" + state.cameraSettings[state.currentCameraIndex].streamPort + "/stream.mjpg",
["http://" + location.hostname + ":" + state.cameraSettings[state.currentCameraIndex].inputStreamPort + "/stream.mjpg",
"http://" + location.hostname + ":" + state.cameraSettings[state.currentCameraIndex].outputStreamPort + "/stream.mjpg"],
targets: state => state.pipelineResults.length,
currentPipelineResults: state =>
state.pipelineResults[state.cameraSettings[state.currentCameraIndex].currentPipelineIndex],