Added navigation panel for wizard page

This commit is contained in:
PAJohnson
2020-09-12 00:18:42 -04:00
parent 77f793cc78
commit 7324fb69cf
7 changed files with 173 additions and 26 deletions
+8
View File
@@ -6,6 +6,7 @@ export let pages = {
ODrive: {
number: 0,
title: "Which ODrive do you have?",
link: "ODrive Version",
component: "wizardPage",
next: "Motor_0",
back: "ODrive",
@@ -25,6 +26,7 @@ export let pages = {
Motor_0: {
number: 1,
title: "Which motor are you using on Axis 0?",
link: "Motor 0",
component: "wizardPage",
next: "Encoder_0",
back: "ODrive",
@@ -78,6 +80,7 @@ export let pages = {
Encoder_0: {
number: 2,
title: "Which encoder are you using for Axis 0?",
link: "Encoder 0",
component: "wizardPage",
next: "Misc_0",
back: "Motor_0",
@@ -134,6 +137,7 @@ export let pages = {
Misc_0: {
number: 3,
title: "Finishing touches for Axis 0",
link: "Misc 0",
component: "wizardPage",
next: "Motor_1",
back: "Encoder_0",
@@ -152,6 +156,7 @@ export let pages = {
Motor_1: {
number: 4,
title: "Which motor are you using for Axis 1?",
link: "Motor 1",
component: "wizardPage",
next: "Encoder_1",
back: "Misc_0",
@@ -205,6 +210,7 @@ export let pages = {
Encoder_1: {
number: 5,
title: "Which encoder are you using for Axis 1?",
link: "Encoder 1",
component: "wizardPage",
next: "Misc_1",
back: "Motor_1",
@@ -261,6 +267,7 @@ export let pages = {
Misc_1: {
number: 6,
title: "Finishing touches for Axis 1",
link: "Misc 1",
component: "wizardPage",
next: "End",
back: "Encoder_1",
@@ -279,6 +286,7 @@ export let pages = {
End: {
number: 7,
title: "Review choices",
link: "Review and Apply",
component: "wizardPage",
next: "End",
back: "Misc_1",
+1 -1
View File
@@ -47,7 +47,7 @@ export default {
params.append("key", key);
}
params.append("val", this.value);
params.append("type", "numeric");
params.append("type", "number");
console.log(params.toString());
let request = {
params: params,
@@ -12,6 +12,9 @@
import odriveEnums from "../../assets/odriveEnums.json";
export default {
name: "wizardEncoderIncremental",
props: {
data: Object,
},
data: function () {
return {
cpr_set: false,
@@ -21,13 +24,36 @@ export default {
methods: {
setCPR(e) {
this.cpr = parseInt(e.target.value);
let configStub = undefined;
if (this.data.axis == "axis0") {
configStub = {
axis0: {
encoder: {
config: {
cpr: this.cpr,
use_index: false,
type: odriveEnums.ENCODER_MODE_INCREMENTAL,
}
}
}
}
}
else if (this.data.axis == "axis1") {
configStub = {
axis: {
encoder: {
config: {
cpr: this.cpr,
use_index: false,
type: odriveEnums.ENCODER_MODE_INCREMENTAL,
}
}
}
}
}
this.$emit("choice", {
choice: "Incremental",
config: {
cpr: this.cpr,
use_index: false,
type: odriveEnums.ENCODER_MODE_INCREMENTAL,
},
configStub: configStub,
});
},
},
@@ -12,6 +12,9 @@
import odriveEnums from "../../assets/odriveEnums.json";
export default {
name: "wizardEncoderIncremental",
props: {
data: Object,
},
data: function () {
return {
cpr_set: false,
@@ -21,13 +24,36 @@ export default {
methods: {
setCPR(e) {
this.cpr = parseInt(e.target.value);
let configStub = undefined;
if (this.data.axis == "axis0") {
configStub = {
axis0: {
encoder: {
config: {
cpr: this.cpr,
use_index: true,
type: odriveEnums.ENCODER_MODE_INCREMENTAL,
}
}
}
}
}
else if (this.data.axis == "axis1") {
configStub = {
axis: {
encoder: {
config: {
cpr: this.cpr,
use_index: true,
type: odriveEnums.ENCODER_MODE_INCREMENTAL,
}
}
}
}
}
this.$emit("choice", {
choice: "IncrementalIndex",
config: {
cpr: this.cpr,
use_index: true,
type: odriveEnums.ENCODER_MODE_INCREMENTAL,
},
configStub: configStub,
});
},
},
+61 -12
View File
@@ -29,6 +29,7 @@ export default {
name: "wizardMotor",
props: {
data: Object,
axis: String,
},
data: function () {
return {
@@ -44,7 +45,13 @@ export default {
},
computed: {
resistance: function () {
let keys = ["odrive0", this.data.axis, "motor", "config", "phase_resistance"];
let keys = [
"odrive0",
this.data.axis,
"motor",
"config",
"phase_resistance",
];
let odriveObj = this.$store.state.odrives;
for (const key of keys) {
odriveObj = odriveObj[key];
@@ -52,7 +59,13 @@ export default {
return parseFloat(odriveObj["val"]).toExponential(3);
},
inductance: function () {
let keys = ["odrive0", this.data.axis, "motor", "config", "phase_inductance"];
let keys = [
"odrive0",
this.data.axis,
"motor",
"config",
"phase_inductance",
];
let odriveObj = this.$store.state.odrives;
for (const key of keys) {
odriveObj = odriveObj[key];
@@ -63,7 +76,13 @@ export default {
watch: {
resistance: function (newVal) {
console.log("from resistance watcher: " + newVal);
let keys = ["odrive0", this.data.axis, "motor", "config", "phase_resistance"];
let keys = [
"odrive0",
this.data.axis,
"motor",
"config",
"phase_resistance",
];
let odriveObj = this.$store.state.odrives;
for (const key of keys) {
odriveObj = odriveObj[key];
@@ -72,7 +91,13 @@ export default {
},
inductance: function (newVal) {
console.log("from inductance watcher: " + newVal);
let keys = ["odrive0", this.data.axis, "motor", "config", "phase_inductance"];
let keys = [
"odrive0",
this.data.axis,
"motor",
"config",
"phase_inductance",
];
let odriveObj = this.$store.state.odrives;
for (const key of keys) {
odriveObj = odriveObj[key];
@@ -116,15 +141,39 @@ export default {
this.kv_set == true
) {
console.log("emitting choice event from other motor");
let configStub = undefined;
if (this.axis == "axis0") {
configStub = {
axis0: {
motor: {
config: {
pole_pairs: this.pole_pairs,
torque_constant: this.torque_constant,
phase_resistance: this.phase_resistance,
phase_inductance: this.phase_inductance,
type: odriveEnums.MOTOR_TYPE_HIGH_CURRENT,
},
},
},
};
} else if (this.axis == "axis1") {
configStub = {
axis1: {
motor: {
config: {
pole_pairs: this.pole_pairs,
torque_constant: this.torque_constant,
phase_resistance: this.phase_resistance,
phase_inductance: this.phase_inductance,
type: odriveEnums.MOTOR_TYPE_HIGH_CURRENT,
},
},
},
};
}
this.$emit("choice", {
choice: "Other motor",
config: {
pole_pairs: this.pole_pairs,
torque_constant: this.torque_constant,
phase_resistance: this.phase_resistance,
phase_inductance: this.phase_inductance,
type: odriveEnums.MOTOR_TYPE_HIGH_CURRENT,
},
configStub: configStub,
});
}
},
@@ -136,7 +185,7 @@ export default {
params.append("key", key);
}
params.append("val", odriveEnums.AXIS_STATE_MOTOR_CALIBRATION);
params.append("type", "numeric");
params.append("type", "number");
console.log(params.toString());
let request = {
params: params,
+4 -2
View File
@@ -13,12 +13,13 @@
/>
<template v-for="customComponent in customComponents">
<component
v-bind:class="{chosen: selectedChoice == customComponent.compName, unchosen: selectedChoice != customComponent.compName}"
v-bind:class="{chosen: selectedChoice == customComponent.component, unchosen: selectedChoice != customComponent.component}"
v-bind:is="customComponent.component"
v-bind:data="customComponent.data"
v-bind:config="config"
v-bind:axis="axis"
:key="customComponent.id"
v-on:click.native="selectedChoice=customComponent.compName"
v-on:click.native="selectedChoice=customComponent.component"
v-on:choice="handleCustomChoice"
/>
</template>
@@ -75,6 +76,7 @@ export default {
.wizard-choices {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.chosen {
+37 -1
View File
@@ -1,6 +1,16 @@
<template>
<div class="wizard">
<div class="wizard-container">
<div class="wizard-nav card">
<span class="wizard-nav-title">Wizard Pages</span>
<span
v-for="page in wizardPages"
:key="page.number"
class="wizard-link"
v-bind:class="{'active-link': currentStep == page}"
@click="currentStep=page"
>{{page.link}}</span>
</div>
<div class="wizard-page">
<wizardPage
:choices="currentStep.choices"
@@ -40,6 +50,11 @@ export default {
wizardConfig: configTemplate,
};
},
computed: {
wizardPages() {
return pages;
},
},
methods: {
choiceHandler(e) {
this.updateConfig(this.wizardConfig, e.configStub);
@@ -83,9 +98,30 @@ export default {
padding-bottom: var(--bottom-height);
}
.wizard-container {
.wizard-nav {
display: flex;
flex-direction: column;
height: fit-content;
}
.wizard-nav-title {
text-align: center;
font-weight: bold;
margin-bottom: 0.4rem;
}
.wizard-link {
margin: 0.2rem;
cursor: pointer;
}
.active-link {
text-decoration: underline;
}
.wizard-container {
display: flex;
flex-direction: row;
height: 95vh;
}