Remove v-bind:, replace with : shorthand

GUI/src/App.vue

@@ -5,7 +5,7 @@
       <button
         class="dash-button"
         @click="startsample"
-        v-bind:class="[{active: sampling === true}]"
+        :class="[{active: sampling === true}]"
       >start sampling</button>
       <button class="dash-button" @click="stopsample">stop sampling</button>
       <button class="dash-button" @click="exportDash">export dash</button>
@@ -22,8 +22,8 @@
       </button>
       <button
         v-for="dash in dashboards"
-        v-bind:key="dash.id"
-        v-bind:class="['dash-button', { active: currentDash === dash.name}]"
+        :key="dash.id"
+        :class="['dash-button', { active: currentDash === dash.name}]"
         v-on:click.self="changeDash(dash.name)"
         v-on:dblclick="changeDashName(dash.id)"
       >
@@ -40,14 +40,14 @@
 
     <!-- PAGE CONTENT -->
     <component
-      v-bind:is="currentDashName"
-      v-bind:odrives="odrives"
-      v-bind:dash="dash"
+      :is="currentDashName"
+      :odrives="odrives"
+      :dash="dash"
     ></component>
 
     <!-- FOOTER -->
     <div class="footer">
-      <Axis v-for="axis in axes" v-bind:key="axis.name" v-bind:axis="axis" v-bind:odrives="odrives"></Axis>
+      <Axis v-for="axis in axes" :key="axis.name" :axis="axis" :odrives="odrives"></Axis>
     </div>
   </div>
 </template>

GUI/src/components/Axis.vue

@@ -2,22 +2,22 @@
   <div
     class="axis"
     @click.self="showError = !showError;"
-    v-bind:class="{ noError: !error, error: error}"
+    :class="{ noError: !error, error: error}"
   >
     {{ axis.name }}
     <div v-show="showError" class="error-popup card" @click.self="showError = !showError">
       <clear-errors :data="{axis: axis.name.split('.')[1]}"/>
       axis:
-      <span v-bind:class="{ noError: !axisError, error: axisError}">{{axisErrorMsg}}</span>
+      <span :class="{ noError: !axisError, error: axisError}">{{axisErrorMsg}}</span>
       <br />motor:
-      <span v-bind:class="{ noError: !motorError, error: motorError}">{{motorErrorMsg}}</span>
+      <span :class="{ noError: !motorError, error: motorError}">{{motorErrorMsg}}</span>
       <br />encoder:
       <span
-        v-bind:class="{ noError: !encoderError, error: encoderError}"
+        :class="{ noError: !encoderError, error: encoderError}"
       >{{encoderErrorMsg}}</span>
       <br />controller:
       <span
-        v-bind:class="{ noError: !controllerError, error: controllerError}"
+        :class="{ noError: !controllerError, error: controllerError}"
       >{{controllerErrorMsg}}</span>
     </div>
   </div>

GUI/src/components/controls/CtrlBoolean.vue

@@ -8,7 +8,7 @@
         class="ctrlInput"
         v-if="writeAccess"
         type="checkbox"
-        v-bind:value="value"
+        :value="value"
         @click="putVal"
       />
     </div>

GUI/src/components/controls/CtrlEnum.vue

@@ -5,7 +5,7 @@
     <div class="right">
       <!-- <input v-if="writeAccess" type="number" v-on:change="putVal" /> -->
       <select class="ctrl-enum" v-model="selected" @change="putVal">
-          <option v-for="option in options" v-bind:key="option.value" v-bind:value="option.value">
+          <option v-for="option in options" :key="option.value" :value="option.value">
               {{ option.text }}
           </option>
       </select>
@@ -98,5 +98,6 @@ input {
     border: none;
     border-bottom: 1px solid grey;
     background-color: var(--fg-color);
+    text-align-last: right;
 }
 </style>

GUI/src/components/wizard/choices/wizardBrake.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card wizard-choice" v-bind:class="{'choice-inactive': !allowed}">
+  <div class="card wizard-choice" :class="{'choice-inactive': !allowed}">
     <div class="left">
       <span>Brake resistor value =</span>
       <input type="number" v-on:change="setBR" placeholder="Change Me!" />

GUI/src/components/wizard/choices/wizardChoice.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- single choice for a wizard page -->
-  <div class="wizard-choice card" v-bind:class="{'choice-inactive': !allowed}">
-    <img v-if="data.imageURL != null" v-bind:alt="title" :src="data.imageURL" />
+  <div class="wizard-choice card" :class="{'choice-inactive': !allowed}">
+    <img v-if="data.imageURL != null" :alt="title" :src="data.imageURL" />
     {{ title }}
   </div>
 </template>

GUI/src/components/wizard/choices/wizardEncoderIncremental.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card wizard-choice" v-bind:class="{'choice-inactive': !allowed}">
+  <div class="card wizard-choice" :class="{'choice-inactive': !allowed}">
     <div class="left">
       <span>counts per revolution = </span>
       <input type="number" v-on:change="setCPR" placeholder="Change Me!" />

GUI/src/components/wizard/choices/wizardEncoderIncrementalIndex.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card wizard-choice" v-bind:class="{'choice-inactive': !allowed}">
+  <div class="card wizard-choice" :class="{'choice-inactive': !allowed}">
     <div class="left">
       <span>counts per revolution = </span>
       <input type="number" v-on:change="setCPR" placeholder="Change Me!" />

GUI/src/components/wizard/choices/wizardEnd.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="card" v-bind:class="{'choice-inactive': !allowed}">
+  <div class="card" :class="{'choice-inactive': !allowed}">
     <div class="diff" v-for="diff in configDiffs" :key="diff.path">
       <span class="diff-path">{{diff.path}}: </span>
       <span class="diff-old">{{diff.oldVal}}</span>
       <span class="diff-seperator"> ⮕ </span>
-      <span v-bind:class="{'diff-new': diff.oldVal != diff.newVal, 'diff-same': diff.oldVal == diff.newVal}">{{diff.newVal}}</span>
+      <span :class="{'diff-new': diff.oldVal != diff.newVal, 'diff-same': diff.oldVal == diff.newVal}">{{diff.newVal}}</span>
     </div>
     <button class="wizard-button card" @click="applyConfig">Apply</button>
   </div>

GUI/src/components/wizard/choices/wizardInputFiltered.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card wizard-motor-custom wizard-choice" v-bind:class="{'choice-inactive': !allowed}">
+  <div class="card wizard-motor-custom wizard-choice" :class="{'choice-inactive': !allowed}">
     <div class="left">
       <span>Input filter bandwidth =</span>
       <input type="number" v-on:change="setBandwidth" :placeholder="bandwidth" />

GUI/src/components/wizard/choices/wizardInputTrajectory.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card wizard-motor-custom wizard-choice" v-bind:class="{'choice-inactive': !allowed}">
+  <div class="card wizard-motor-custom wizard-choice" :class="{'choice-inactive': !allowed}">
     <div class="left">
       <span>Velocity limit =</span>
       <input type="number" v-on:change="setVelLimit" :placeholder="vel_limit" />

GUI/src/components/wizard/choices/wizardInputVelRamp.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card wizard-motor-custom wizard-choice" v-bind:class="{'choice-inactive': !allowed}">
+  <div class="card wizard-motor-custom wizard-choice" :class="{'choice-inactive': !allowed}">
     <div class="left">
       <span>Velocity ramp rate =</span>
       <input type="number" v-on:change="setRampRate" :placeholder="vel_ramp_rate" />

GUI/src/components/wizard/choices/wizardMisc.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card wizard-motor-custom wizard-choice" v-bind:class="{'choice-inactive': !allowed}">
+  <div class="card wizard-motor-custom wizard-choice" :class="{'choice-inactive': !allowed}">
     <div class="left">
       <span>Motor Velocity Limit =</span>
       <input type="number" v-on:change="setVelocityLimit" :placeholder="velocityLimit" />

GUI/src/components/wizard/choices/wizardMotor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card wizard-motor-custom wizard-choice" v-bind:class="{'choice-inactive': !allowed}">
+  <div class="card wizard-motor-custom wizard-choice" :class="{'choice-inactive': !allowed}">
     <div class="left">
       <span>KV =</span>
       <input type="number" v-on:change="setKV" placeholder="Change Me!" />

GUI/src/components/wizard/wizardPage.vue

@@ -10,15 +10,15 @@
       -->
       <template v-for="choice in choices">
         <component
-          v-bind:class="{chosen: selectedChoice == choice.title, unchosen: selectedChoice != choice.title, inactive: !requirementsMet(choice.requirements, config)}"
-          v-bind:is="choice.component"
-          v-bind:data="choice.data"
-          v-bind:config="config"
-          v-bind:axis="axis"
-          v-bind:title="choice.title"
-          v-bind:selected="selectedChoice == choice.title"
-          v-bind:hooks="choice.hooks"
-          v-bind:allowed="requirementsMet(choice.requirements, config)"
+          :class="{chosen: selectedChoice == choice.title, unchosen: selectedChoice != choice.title, inactive: !requirementsMet(choice.requirements, config)}"
+          :is="choice.component"
+          :data="choice.data"
+          :config="config"
+          :axis="axis"
+          :title="choice.title"
+          :selected="selectedChoice == choice.title"
+          :hooks="choice.hooks"
+          :allowed="requirementsMet(choice.requirements, config)"
           v-tooltip.top="{
             content: requirementsMet(choice.requirements, config) ? choice.tooltip : choice.altTooltip,
             class: 'tooltip-custom tooltip-other-custom fade-in',
@@ -35,11 +35,11 @@
     <div class="page-components">
       <template v-for="pageComponent in pageComponents">
         <component
-          v-bind:is="pageComponent.component"
-          v-bind:data="pageComponent.data"
-          v-bind:key="pageComponent.id"
-          v-bind:calibrating="calibrating"
-          v-bind:calStatus="calStatus"
+          :is="pageComponent.component"
+          :data="pageComponent.data"
+          :key="pageComponent.id"
+          :calibrating="calibrating"
+          :calStatus="calStatus"
           v-on:page-comp-event="pageCompEvent"
         />
       </template>

GUI/src/views/Dashboard.vue

@@ -9,8 +9,8 @@
         </div>
         <div class="param-tree">
         <json-view
-          v-bind:data="odriveConfigs"
-          v-bind:rootKey="'odrives'"
+          :data="odriveConfigs"
+          :rootKey="'odrives'"
           v-on:selected="addVarToElement"
         />
         </div>
@@ -88,166 +88,166 @@ let odriveEnums = {
   // axis requested state
   requested_state: [
     {
-      text: "AXIS_STATE_UNDEFINED",
+      text: "Undefined",
       value: 0,
     },
     {
-      text: "AXIS_STATE_IDLE",
+      text: "Idle",
       value: 1,
     },
     {
-      text: "AXIS_STATE_STARTUP_SEQUENCE",
+      text: "Starup Sequence",
       value: 2,
     },
     {
-      text: "AXIS_STATE_FULL_CALIBRATION_SEQUENCE",
+      text: "Full Calibration Sequence",
       value: 3,
     },
     {
-      text: "AXIS_STATE_MOTOR_CALIBRATION",
+      text: "Motor Calibration",
       value: 4,
     },
     {
-      text: "AXIS_STATE_SENSORLESS_CONTROL",
+      text: "Sensorless Control",
       value: 5,
     },
     {
-      text: "AXIS_STATE_ENCODER_INDEX_SEARCH",
+      text: "Encoder Index Search",
       value: 6,
     },
     {
-      text: "AXIS_STATE_ENCODER_OFFSET_CALIBRATION",
+      text: "Encoder Offset Calibration",
       value: 7,
     },
     {
-      text: "AXIS_STATE_CLOSED_LOOP_CONTROL",
+      text: "Closed Loop Control",
       value: 8,
     },
     {
-      text: "AXIS_STATE_LOCKIN_SPIN",
+      text: "Lockin Spin",
       value: 9,
     },
     {
-      text: "AXIS_STATE_ENCODER_DIR_FIND",
+      text: "Encoder Direction Find",
       value: 10,
     },
     {
-      text: "AXIS_STATE_HOMING",
+      text: "Homing",
       value: 11,
     }
   ],
   current_state: [
     {
-      text: "AXIS_STATE_UNDEFINED",
+      text: "Undefined",
       value: 0,
     },
     {
-      text: "AXIS_STATE_IDLE",
+      text: "Idle",
       value: 1,
     },
     {
-      text: "AXIS_STATE_STARTUP_SEQUENCE",
+      text: "Starup Sequence",
       value: 2,
     },
     {
-      text: "AXIS_STATE_FULL_CALIBRATION_SEQUENCE",
+      text: "Full Calibration Sequence",
       value: 3,
     },
     {
-      text: "AXIS_STATE_MOTOR_CALIBRATION",
+      text: "Motor Calibration",
       value: 4,
     },
     {
-      text: "AXIS_STATE_SENSORLESS_CONTROL",
+      text: "Sensorless Control",
       value: 5,
     },
     {
-      text: "AXIS_STATE_ENCODER_INDEX_SEARCH",
+      text: "Encoder Index Search",
       value: 6,
     },
     {
-      text: "AXIS_STATE_ENCODER_OFFSET_CALIBRATION",
+      text: "Encoder Offset Calibration",
       value: 7,
     },
     {
-      text: "AXIS_STATE_CLOSED_LOOP_CONTROL",
+      text: "Closed Loop Control",
       value: 8,
     },
     {
-      text: "AXIS_STATE_LOCKIN_SPIN",
+      text: "Lockin Spin",
       value: 9,
     },
     {
-      text: "AXIS_STATE_ENCODER_DIR_FIND",
+      text: "Encoder Direction Find",
       value: 10,
     },
     {
-      text: "AXIS_STATE_HOMING",
+      text: "Homing",
       value: 11,
     }
   ],
   // encoder mode
   mode: [
     {
-      text: "ENCODER_MODE_INCREMENTAL",
+      text: "Incremental",
       value: 0,
     },
     {
-      text: "ENCODER_MODE_HALL",
+      text: "Hall Effect",
       value: 1,
     },
     {
-      text: "ENCODER_MODE_SINCOS",
+      text: "Sine Cosine",
       value:  2,
     },
     {
-      text: "ENCODER_MODE_SPI_ABS_CUI",
+      text: "CUI Absolute",
       value: 256,
     },
     {
-      text: "ENCODER_MODE_SPI_ABS_AMS",
+      text: "AMS Absolute",
       value: 257,
     },
     {
-      text: "ENCODER_MODE_SPI_ABS_AEAT",
+      text: "AEAT Absolute",
       value: 258,
     },
     {
-      text: "ENCODER_MODE_SPI_ABS_RLS",
+      text: "RLS Absolute",
       value: 259,
     },
   ],
   // motor type
   motor_type: [
     {
-      text: "MOTOR_TYPE_HIGH_CURRENT",
+      text: "High Current",
       value: 0,
     },
     {
-      text: "MOTOR_TYPE_GIMBAL",
+      text: "Gimbal",
       value: 2,
     },
     {
-      text: "MOTOR_TYPE_ACIM",
+      text: "Induction",
       value: 3,
     },
   ],
   // controller control mode
   control_mode: [
     {
-      text: "CONTROL_MODE_VOLTAGE_CONTROL",
+      text: "Voltage Control",
       value: 0,
     },
     {
-      text: "CONTROL_MODE_TORQUE_CONTROL",
+      text: "Torque Control",
       value: 1,
     },
     {
-      text: "CONTROL_MODE_VELOCITY_CONTROL",
+      text: "Velocity Control",
       value: 2,
     },
     {
-      text: "CONTROL_MODE_POSITION_CONTROL",
+      text: "Position Control",
       value: 3,
     },
   ]

GUI/src/views/Start.vue

@@ -7,7 +7,7 @@
       To set up your ODrive, connect it and power it up.
     </div>
     <div class="connected-container">
-      <input type="text" v-bind:class="{ notConnected: notConnected, connected: connected}" v-on:change="setUrl" :value="serverAddress">
+      <input type="text" :class="{ notConnected: notConnected, connected: connected}" v-on:change="setUrl" :value="serverAddress">
     </div>
   </div>
 </template>

GUI/src/views/Wizard.vue

@@ -7,7 +7,7 @@
           v-for="page in wizardPages"
           :key="page.title"
           class="wizard-link"
-          v-bind:class="{'active-link': currentStep == page, 'finished-page': page.choiceMade}"
+          :class="{'active-link': currentStep == page, 'finished-page': page.choiceMade}"
         >{{page.link}}</span>
       </div>
       <div class="wizard-page">
@@ -29,7 +29,7 @@
           <button class="wizard-button card" @click="finish">Finish</button>
           <button
             class="wizard-button card"
-            v-bind:class="{'next-green': choiceMade}"
+            :class="{'next-green': choiceMade}"
             v-tooltip.right="{
               content: currentStep.nextTooltip,
               class: 'tooltip-custom tooltip-other-custom fade-in',