muehe/onefinity-firmware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rebuilt the "Set Position" and "Manually Home" dialogs in Svelte

Browse Source
This commit is contained in:
David Carley
2022-07-23 21:30:10 -07:00
parent d0293a3843
commit 29fedafce6
7 changed files with 159 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/js/control-view.js
View File

@@ -20,22 +20,6 @@ module.exports = {
history: [],
speed_override: 1,
feed_override: 1,
manual_home: {
x: false,
y: false,
z: false,
a: false,
b: false,
c: false
},
position_msg: {
x: false,
y: false,
z: false,
a: false,
b: false,
c: false
},
jog_incr_amounts: {
"METRIC": {
fine: 0.1,
@@ -50,7 +34,6 @@ module.exports = {
large: 5,
}
},
axis_position: 0,
jog_incr: localStorage.getItem("jog_incr") || 'small',
jog_step: cookie.get_bool('jog-step'),
jog_adjust: parseInt(cookie.get('jog-adjust', 2)),
@@ -261,7 +244,11 @@ module.exports = {
SvelteComponents.registerControllerMethods({
stop: (...args) => this.stop(...args),
send: (...args) => this.send(...args),
goto_zero: (...args) => this.goto_zero(...args)
goto_zero: (...args) => this.goto_zero(...args),
isAxisHomed: (axis) => this[axis].homed,
unhome: (...args) => this.unhome(...args),
set_position: (...args) => this.set_position(...args),
set_home: (...args) => this.set_home(...args)
});
},
@@ -433,23 +420,20 @@ module.exports = {
} else if (this[axis].homingMode != 'manual') {
api.put('home/' + axis);
} else {
this.manual_home[axis] = true;
SvelteComponents.showDialog("ManualHomeAxis", { axis });
}
},
set_home: function (axis, position) {
this.manual_home[axis] = false;
api.put('home/' + axis + '/set', { position: parseFloat(position) });
},
unhome: function (axis) {
this.position_msg[axis] = false;
api.put('home/' + axis + '/clear');
},
show_set_position: function (axis) {
this.axis_position = 0;
this.position_msg[axis] = true;
SvelteComponents.showDialog("SetAxisPosition", { axis });
},
show_toolpath_msg: function (axis) {
@@ -457,7 +441,6 @@ module.exports = {
},
set_position: function (axis, position) {
this.position_msg[axis] = false;
api.put('position/' + axis, { 'position': parseFloat(position) });
},

48
src/pug/templates/control-view.pug
View File

@@ -150,60 +150,18 @@ script#control-view-template(type="text/x-template")
th.actions
button.pure-button(:disabled="!can_set_axis",
title=`Set {{'${axis}' | upper}} axis position.`,
@click=`show_set_position('${axis}')`,style="height:60px;width:60px")
@click=`show_set_position('${axis}')`, style="height:60px;width:60px")
.fa.fa-cog
button.pure-button(:disabled="!can_set_axis",
title=`Zero {{'${axis}' | upper}} axis offset.`,
@click=`zero('${axis}')`,style="height:60px;width:60px")
@click=`zero('${axis}')`, style="height:60px;width:60px")
.fa.fa-map-marker
button.pure-button(:disabled="!is_idle", @click=`home('${axis}')`,
title=`Home {{'${axis}' | upper}} axis.`,style="height:60px;width:60px")
title=`Home {{'${axis}' | upper}} axis.`, style="height:60px;width:60px")
.fa.fa-home
message(:show.sync=`position_msg['${axis}']`)
h3(slot="header") Set {{'#{axis}' | upper}} axis position
div(slot="body")
.pure-form
.pure-control-group
label Position
input(v-model="axis_position",
@keyup.enter=`set_position('${axis}', axis_position)`)
p
div(slot="footer")
button.pure-button(@click=`position_msg['${axis}'] = false`)
| Cancel
button.pure-button(v-if=`${axis}.homed`,
@click=`unhome('${axis}')`) Unhome
button.pure-button.button-success(
@click=`set_position('${axis}', axis_position)`) Set
message(:show.sync=`manual_home['${axis}']`)
h3(slot="header") Manually home {{'#{axis}' | upper}} axis
div(slot="body")
p Set axis absolute position.
.pure-form
.pure-control-group
label Absolute
input(v-model="axis_position",
@keyup.enter=`set_home('${axis}', axis_position)`)
p
div(slot="footer")
button.pure-button(@click=`manual_home['${axis}'] = false`)
| Cancel
button.pure-button.button-success(
title=`Home {{'${axis}' | upper}} axis.`,
@click=`set_home('${axis}', axis_position)`) Set
tr(style="vertical-align: top;")
td

34
src/svelte-components/src/dialogs/DialogHost.svelte
View File

@@ -5,6 +5,8 @@
import ScreenRotationDialog from "$dialogs/ScreenRotationDialog.svelte";
import UploadDialog from "$dialogs/UploadDialog.svelte";
import SetTimeDialog from "./SetTimeDialog.svelte";
import ManualHomeAxisDialog from "./ManualHomeAxisDialog.svelte";
import SetAxisPositionDialog from "./SetAxisPositionDialog.svelte";
const HomeMachineDialogProps = writable<HomeMachineDialogPropsType>();
type HomeMachineDialogPropsType = {
@@ -35,6 +37,18 @@
open: boolean;
};
const ManualHomeAxisDialogProps = writable<ManualHomeAxisDialogPropsType>();
type ManualHomeAxisDialogPropsType = {
open: boolean;
axis: string;
};
const SetAxisPositionDialogProps = writable<SetAxisPositionDialogPropsType>();
type SetAxisPositionDialogPropsType = {
open: boolean;
axis: string;
};
export function showDialog(
dialog: "HomeMachine",
props: Omit<HomeMachineDialogPropsType, "open">
@@ -60,6 +74,16 @@
props: Omit<SetTimeDialogPropsType, "open">
);
export function showDialog(
dialog: "ManualHomeAxis",
props: Omit<ManualHomeAxisDialogPropsType, "open">
);
export function showDialog(
dialog: "SetAxisPosition",
props: Omit<SetAxisPositionDialogPropsType, "open">
);
export function showDialog(dialog: string, props: any) {
switch (dialog) {
case "HomeMachine":
@@ -82,6 +106,14 @@
SetTimeDialogProps.set({ ...props, open: true });
break;
case "ManualHomeAxis":
ManualHomeAxisDialogProps.set({ ...props, open: true });
break;
case "SetAxisPosition":
SetAxisPositionDialogProps.set({ ...props, open: true });
break;
default:
throw new Error(`Unknown dialog '${dialog}`);
}
@@ -93,3 +125,5 @@
<ScreenRotationDialog {...$ScreenRotationDialogProps} />
<UploadDialog {...$UploadDialogProps} />
<SetTimeDialog {...$SetTimeDialogProps} />
<ManualHomeAxisDialog {...$ManualHomeAxisDialogProps} />
<SetAxisPositionDialog {...$SetAxisPositionDialogProps} />

1
src/svelte-components/src/dialogs/HomeMachineDialog.svelte
View File

@@ -8,6 +8,7 @@
<Dialog
bind:open
scrimClickAction=""
aria-labelledby="home-machine-dialog-title"
aria-describedby="home-machine-dialog-content"
>

46
src/svelte-components/src/dialogs/ManualHomeAxisDialog.svelte Normal file
View File

@@ -0,0 +1,46 @@
<script lang="ts">
import Dialog, { Title, Content, Actions } from "@smui/dialog";
import TextField from "@smui/textfield";
import Button, { Label } from "@smui/button";
import { ControllerMethods } from "$lib/RegisterControllerMethods";
export let open: boolean;
export let axis = "";
let value = 0;
function onConfirm() {
ControllerMethods.set_home(axis, value);
}
</script>
<Dialog
bind:open
scrimClickAction=""
aria-labelledby="manual-home-axis-dialog-title"
aria-describedby="manual-home-axis-dialog-content"
>
<Title id="manual-home-axis-dialog-title"
>Manually Home {axis.toUpperCase()} Axis</Title
>
<Content id="manual-home-axis-dialog-content">
<p>Set axis absolute position</p>
<TextField
label="Absolute"
type="number"
bind:value
variant="filled"
style="width: 100%;"
/>
</Content>
<Actions>
<Button>
<Label>Cancel</Label>
</Button>
<Button defaultAction on:click={onConfirm}>
<Label>Set</Label>
</Button>
</Actions>
</Dialog>

64
src/svelte-components/src/dialogs/SetAxisPositionDialog.svelte Normal file
View File

@@ -0,0 +1,64 @@
<script lang="ts">
import Dialog, { Title, Content, Actions } from "@smui/dialog";
import TextField from "@smui/textfield";
import Button, { Label } from "@smui/button";
import { ControllerMethods } from "$lib/RegisterControllerMethods";
export let open: boolean;
export let axis = "";
let value = 0;
let homed = false;
let wasOpen = false;
$: if (open != wasOpen) {
if (open) {
homed = ControllerMethods.isAxisHomed(axis);
}
wasOpen = open;
}
function onUnhome() {
ControllerMethods.unhome(axis);
}
function onConfirm() {
ControllerMethods.set_position(axis, value);
}
</script>
<Dialog
bind:open
scrimClickAction=""
aria-labelledby="set-axis-position-dialog-title"
aria-describedby="set-axis-position-dialog-content"
>
<Title id="set-axis-position-dialog-title"
>Set {axis.toUpperCase()} Axis Position</Title
>
<Content id="set-axis-position-dialog-content">
<TextField
label="Position"
type="number"
bind:value
spellcheck="false"
variant="filled"
style="width: 100%;"
/>
</Content>
<Actions>
<Button>
<Label>Cancel</Label>
</Button>
{#if homed}
<Button on:click={onUnhome}>
<Label>Unhome</Label>
</Button>
{/if}
<Button defaultAction on:click={onConfirm}>
<Label>Set</Label>
</Button>
</Actions>
</Dialog>

4
src/svelte-components/src/lib/RegisterControllerMethods.ts
View File

@@ -3,6 +3,10 @@ type ControllerMethods = {
send: (gcode: string) => void;
goto_zero: (x: number, y: number, z: number, a: number) => void;
dispatch: (event: string, ...args: any[]) => void;
isAxisHomed: (axis: string) => boolean;
unhome: (axis: string) => void;
set_position: (axis: string, value: number) => void;
set_home: (axis: string, value: number) => void;
}
export let ControllerMethods: ControllerMethods;