Skip to content

Commit

Permalink
feat(Position): allow setting position, before sending a command
Browse files Browse the repository at this point in the history
  • Loading branch information
ezpzlmnsqz1337 committed Feb 17, 2024
1 parent ae5d0d9 commit 98d574d
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 11 deletions.
9 changes: 8 additions & 1 deletion src/components/Position.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
<RangeSliders
valueName="position"
valueKey="target"
diffKey="value"
:step="100"
@on-change="sendCommand()"
/>
</div>
<div>
Expand All @@ -22,6 +22,13 @@
:disabled="!isConnected || !ready"
><fa-icon icon="fa-solid fa-house" />&nbsp;Home</b-button
>
<b-button
variant="primary"
size="large"
@click="sendCommand()"
:disabled="!isConnected || !ready"
><fa-icon icon="fa-solid fa-play" />&nbsp;Go</b-button
>
</b-form-group>
</div>
</div>
Expand Down
36 changes: 27 additions & 9 deletions src/components/RangeSliders.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,19 @@
<label :for="j.name">{{ j.name }}</label>
<b-form-spinbutton
:value="j[valueName][valueKey]"
@change="onChange($event, j)"
@input="onChange($event, j)"
:min="j[valueName].min"
:max="j[valueName].max"
:step="step"
:class="{ __modified: isModified(j) }"
:disabled="!isConnected || !ready"
></b-form-spinbutton>
<b-form-input
:id="j.name"
type="range"
:name="j.name"
:value="j[valueName][valueKey]"
@change="onChange($event, j)"
@input="onChange($event, j)"
:min="j[valueName].min"
:max="j[valueName].max"
:step="step"
Expand All @@ -26,25 +27,42 @@
</template>

<script lang="ts">
import { Joint } from '@/assets/joints'
import { Joint, NumberRangeData } from '@/assets/joints'
import ArmMixin from '@/mixins/ArmMixin.vue'
import { Component, Emit, Prop } from 'vue-property-decorator'
@Component
export default class RangeSliders extends ArmMixin {
@Prop({ required: true }) readonly valueName!:
| 'speed'
| 'acceleration'
| 'position'
@Prop({ default: 'value' }) readonly valueKey!: 'value' | 'target'
@Prop({ required: true }) readonly valueName!: keyof Pick<
Joint,
'speed' | 'acceleration' | 'position'
>
@Prop({ default: 'value' }) readonly valueKey!: keyof Pick<
NumberRangeData,
'value'
>
@Prop({ default: 'value' }) readonly diffKey!: keyof Pick<
NumberRangeData,
'value'
>
@Prop({ default: '10' }) readonly step!: string
@Emit('on-change')
onChange(event: string, joint: Joint) {
;(joint[this.valueName] as any)[this.valueKey] = parseInt(event)
}
isModified(j: Joint): boolean {
return j[this.valueName][this.valueKey] !== j[this.valueName][this.diffKey]
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
<style scoped lang="scss">
.__modified {
background-color: #0d6dfe3d !important;
font-weight: bold;
}
</style>
8 changes: 7 additions & 1 deletion src/components/Sidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
:class="{ __fullscreen: fullscreen }"
>
<template #header="{ hide }">
<div @click="toggleFullscreenMenu()">Big Robot Arm UI</div>
<div @click="toggleFullscreenMenu()" class="__heading">
Big Robot Arm UI
</div>
<fa-icon icon="fa-solid fa-xmark" @click.prevent="hide()" />
<div class="d-md-none __expand_arrows">
<fa-icon
Expand Down Expand Up @@ -111,6 +113,10 @@ export default class Sidebar extends Vue {
top: 0;
}

.__heading {
font-size: 0.8rem;
}

.__fullscreen :deep(.b-sidebar) {
height: calc(100%);
}
Expand Down

0 comments on commit 98d574d

Please sign in to comment.