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

Rebuilt the "Home Machine" dialog with Svelte.

Browse Source
This commit is contained in:
David Carley
2022-07-04 20:07:26 -07:00
parent 5c42df492b
commit 87290cd992
13 changed files with 227 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/admin-network-view.js
View File

@@ -2,7 +2,7 @@ module.exports = {
template: "#admin-network-view-template",
attached: function () {
this.svelteComponent = SvelteComponents.create(
this.svelteComponent = SvelteComponents.createComponent(
"AdminNetworkView",
document.getElementById("svelte-root")
);

3
src/js/app.js
View File

@@ -6,6 +6,9 @@ const Sock = require("./sock");
const omit = require("lodash.omit");
SvelteComponents.initNetworkInfo();
SvelteComponents.createComponent("DialogHost",
document.getElementById("svelte-dialog-host")
);
function is_newer_version(current, latest) {
const pattern = /(\d+)\.(\d+)\.(\d+)(.*)/;

71
src/js/axis-vars.js
View File

@@ -1,63 +1,28 @@
/******************************************************************************\
This file is part of the Buildbotics firmware.
Copyright (c) 2015 - 2018, Buildbotics LLC
All rights reserved.
This file ("the software") is free software: you can redistribute it
and/or modify it under the terms of the GNU General Public License,
version 2 as published by the Free Software Foundation. You should
have received a copy of the GNU General Public License, version 2
along with the software. If not, see <http://www.gnu.org/licenses/>.
The software is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public
License along with the software. If not, see
<http://www.gnu.org/licenses/>.
For information regarding this software email:
"Joseph Coffland" <joseph@buildbotics.com>
\******************************************************************************/
'use strict'
function is_defined(x) {return typeof x != 'undefined'}
module.exports = {
props: ['state', 'config'],
computed: {
x: function () {return this._compute_axis('x')},
y: function () {return this._compute_axis('y')},
z: function () {return this._compute_axis('z')},
a: function () {return this._compute_axis('a')},
b: function () {return this._compute_axis('b')},
c: function () {return this._compute_axis('c')},
axes: function () {return this._compute_axes()}
x: function () { return this._compute_axis('x') },
y: function () { return this._compute_axis('y') },
z: function () { return this._compute_axis('z') },
a: function () { return this._compute_axis('a') },
b: function () { return this._compute_axis('b') },
c: function () { return this._compute_axis('c') },
axes: function () { return this._compute_axes() }
},
methods: {
_convert_length: function (value) {
return this.state.imperial ? value / 25.4 : value;
},
_length_str: function (value) {
return this._convert_length(value).toLocaleString() +
(this.state.imperial ? ' in' : ' mm');
},
_compute_axis: function (axis) {
var abs = this.state[axis + 'p'] || 0;
var off = this.state['offset_' + axis];
@@ -89,8 +54,7 @@ module.exports = {
state = shutdown ? 'SHUTDOWN' : 'FAULT';
klass += ' error';
icon = 'exclamation-circle';
} else if(homed) {
} else if (homed) {
state = 'HOMED';
icon = 'check-circle';
}
@@ -99,9 +63,7 @@ module.exports = {
tstate = 'NO FIT';
tklass += ' error';
ticon = 'ban';
} else {
if (over || under) {
tstate = over ? 'OVER' : 'UNDER';
tklass += ' warn';
@@ -122,14 +84,14 @@ module.exports = {
'See the "Motor Faults" table on the "Indicators" tab for more ' +
'information.';
break;
case 'SHUTDOWN':
title = 'Motor power fault. All motors in shutdown. ' +
'See the "Power Faults" table on the "Indicators" tab for more ' +
'information. Reboot controller to reset.';
}
switch(tstate) {
switch (tstate) {
case 'OVER':
toolmsg = 'Caution: The current tool path file would move ' +
this._length_str(pathMax + off - max) + ' above axis limit with the current offset.';
@@ -150,10 +112,8 @@ module.exports = {
default:
toolmsg = 'Tool path ' + axis + ' dimensions OK.';
break;
}
return {
pos: abs - off,
abs: abs,
@@ -179,7 +139,6 @@ module.exports = {
}
},
_get_motor_id: function (axis) {
for (var i = 0; i < this.config.motors.length; i++) {
var motor = this.config.motors[i];
@@ -189,7 +148,6 @@ module.exports = {
return -1;
},
_compute_axes: function () {
var homed = false;
@@ -197,7 +155,7 @@ module.exports = {
var axis = this[name];
if (!axis.enabled) continue
if (!axis.homed) {homed = false; break}
if (!axis.homed) { homed = false; break }
homed = true;
}
@@ -217,10 +175,11 @@ module.exports = {
if (error) klass += ' error';
else if (warn) klass += ' warn';
if(!homed && this.ask_home)
{
this.ask_home_msg = true;
if (!homed && this.ask_home) {
this.ask_home = false;
SvelteComponents.showDialog("HomeMachine", {
home: () => this.home()
});
}
return {

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

@@ -81,7 +81,6 @@ module.exports = {
c: false
},
ask_home: true,
ask_home_msg: false,
ask_zero_xy_msg: false,
ask_zero_z_msg: false,
showGcodeMessage: false
@@ -154,7 +153,7 @@ module.exports = {
},
pause_reason: function () {return this.state.pr},
pause_reason: function () { return this.state.pr },
is_running: function () {
@@ -162,10 +161,10 @@ module.exports = {
},
is_stopping: function () {return this.mach_state == 'STOPPING'},
is_holding: function () {return this.mach_state == 'HOLDING'},
is_ready: function () {return this.mach_state == 'READY'},
is_idle: function () {return this.state.cycle == 'idle'},
is_stopping: function () { return this.mach_state == 'STOPPING' },
is_holding: function () { return this.mach_state == 'HOLDING' },
is_ready: function () { return this.mach_state == 'READY' },
is_idle: function () { return this.state.cycle == 'idle' },
is_paused: function () {
@@ -175,7 +174,7 @@ module.exports = {
},
can_mdi: function () {return this.is_idle || this.state.cycle == 'mdi'},
can_mdi: function () { return this.is_idle || this.state.cycle == 'mdi' },
can_set_axis: function () {
@@ -199,7 +198,7 @@ module.exports = {
},
plan_time: function () {return this.state.plan_time},
plan_time: function () { return this.state.plan_time },
plan_time_remaining: function () {
@@ -227,20 +226,20 @@ module.exports = {
events: {
jog: function (axis, power) {
var data = {ts: new Date().getTime()};
var data = { ts: new Date().getTime() };
data[axis] = power;
api.put('jog', data);
},
back2zero: function(axis0,axis1) {
this.send("G0"+axis0+"0"+axis1+"0");
back2zero: function (axis0, axis1) {
this.send("G0" + axis0 + "0" + axis1 + "0");
},
step: function (axis, value) {
this.send('M70\nG91\nG0' + axis + value + '\nM72');
},
probing_failed: function() {
probing_failed: function () {
Vue.set(this.state, "probing_active", false);
Vue.set(this.state, "wait_for_probing_complete", false);
Vue.set(this.state, "show_probe_complete_modal", false);
@@ -249,7 +248,7 @@ module.exports = {
Vue.set(this.state, "show_probe_failed_modal", true);
},
probing_complete: function() {
probing_complete: function () {
Vue.set(this.state, "probing_active", false);
if (this.config.settings['probing-prompts']) {
@@ -259,7 +258,7 @@ module.exports = {
}
},
finalize_probe: function() {
finalize_probe: function () {
Vue.set(this.state, "show_probe_complete_modal", false);
if (this.state.goto_xy_zero_after_probe) {
@@ -277,8 +276,8 @@ module.exports = {
methods: {
units_changed : function() {
if(this.mach_units == 'METRIC') {
units_changed: function () {
if (this.mach_units == 'METRIC') {
document.getElementById("jog_button_fine").innerHTML = "0.1";
document.getElementById("jog_button_small").innerHTML = "1.0";
document.getElementById("jog_button_medium").innerHTML = "10";
@@ -293,7 +292,7 @@ module.exports = {
this.set_jog_incr('small');
},
start_probe_test: function(on_finish) {
start_probe_test: function (on_finish) {
if (!this.config.settings['probing-prompts']) {
on_finish();
return;
@@ -304,7 +303,7 @@ module.exports = {
Vue.set(this.state, "on_probe_finish", on_finish);
},
finish_probe_test: function() {
finish_probe_test: function () {
this.show_probe_test_modal = false;
Vue.set(this.state, "saw_probe_connected", false);
@@ -314,7 +313,7 @@ module.exports = {
on_finish();
},
hide_probe_failed_modal: function() {
hide_probe_failed_modal: function () {
Vue.set(this.state, "show_probe_failed_modal", false);
},
@@ -429,7 +428,7 @@ module.exports = {
this.probe(true);
},
set_jog_incr: function(newValue) {
set_jog_incr: function (newValue) {
document.getElementById("jog_button_fine").style.fontWeight = 'normal';
document.getElementById("jog_button_small").style.fontWeight = 'normal';
document.getElementById("jog_button_medium").style.fontWeight = 'normal';
@@ -437,19 +436,19 @@ module.exports = {
if (newValue == 'fine') {
document.getElementById("jog_button_fine").style.fontWeight = 'bold';
if(this.mach_units == 'METRIC')
if (this.mach_units == 'METRIC')
this.jog_incr = 0.1;
else
this.jog_incr = 0.005;
} else if (newValue == 'small') {
document.getElementById("jog_button_small").style.fontWeight = 'bold';
if(this.mach_units == 'METRIC')
if (this.mach_units == 'METRIC')
this.jog_incr = 1.0;
else
this.jog_incr = 0.05;
} else if (newValue == 'medium') {
document.getElementById("jog_button_medium").style.fontWeight = 'bold';
if(this.mach_units == 'METRIC')
if (this.mach_units == 'METRIC')
this.jog_incr = 10;
else
this.jog_incr = 0.5;
@@ -462,15 +461,15 @@ module.exports = {
}
},
goto_zero(zero_x,zero_y,zero_z,zero_a) {
goto_zero(zero_x, zero_y, zero_z, zero_a) {
var xcmd = "";
var ycmd = "";
var zcmd = "";
var acmd = "";
if(zero_x) xcmd = "X0";
if(zero_y) ycmd = "Y0";
if(zero_z) zcmd = "Z0";
if(zero_a) acmd = "A0";
if (zero_x) xcmd = "X0";
if (zero_y) ycmd = "Y0";
if (zero_z) zcmd = "Z0";
if (zero_a) acmd = "A0";
this.ask_zero_xy_msg = false;
this.ask_zero_z_msg = false;
@@ -478,7 +477,7 @@ module.exports = {
this.send('G90\nG0' + xcmd + ycmd + zcmd + acmd + '\n');
},
jog_fn: function (x_jog,y_jog,z_jog,a_jog) {
jog_fn: function (x_jog, y_jog, z_jog, a_jog) {
var xcmd = "X" + x_jog * this.jog_incr;
var ycmd = "Y" + y_jog * this.jog_incr;
var zcmd = "Z" + z_jog * this.jog_incr;
@@ -619,22 +618,24 @@ module.exports = {
home: function (axis) {
this.ask_home = false;
this.ask_home_msg = false;
if (typeof axis == 'undefined') api.put('home');
if (typeof axis == 'undefined') {
api.put('home');
} else {
if (this[axis].homingMode != 'manual') {
api.put('home/' + axis);
}
else {
if (this[axis].homingMode != 'manual') api.put('home/' + axis);
else this.manual_home[axis] = true;
this.manual_home[axis] = true;
}
}
},
set_home: function (axis, position) {
this.manual_home[axis] = false;
api.put('home/' + axis + '/set', {position: parseFloat(position)});
api.put('home/' + axis + '/set', { position: parseFloat(position) });
},
@@ -649,14 +650,14 @@ module.exports = {
this.position_msg[axis] = true;
},
show_toolpath_msg : function(axis) {
show_toolpath_msg: function (axis) {
this.toolpath_msg[axis] = true;
},
set_position: function (axis, position) {
this.position_msg[axis] = false;
api.put('position/' + axis, {'position': parseFloat(position)});
api.put('position/' + axis, { 'position': parseFloat(position) });
},
@@ -682,15 +683,15 @@ module.exports = {
},
start: function () {api.put('start')},
pause: function () {api.put('pause')},
unpause: function () {api.put('unpause')},
optional_pause: function () {api.put('pause/optional')},
stop: function () {api.put('stop')},
step: function () {api.put('step')},
start: function () { api.put('start') },
pause: function () { api.put('pause') },
unpause: function () { api.put('unpause') },
optional_pause: function () { api.put('pause/optional') },
stop: function () { api.put('stop') },
step: function () { api.put('step') },
override_feed: function () {api.put('override/feed/' + this.feed_override)},
override_feed: function () { api.put('override/feed/' + this.feed_override) },
override_speed: function () {

2
src/pug/index.pug
View File

@@ -20,6 +20,8 @@ html(lang="en")
style: include:stylus ../stylus/style.styl
body(v-cloak)
#svelte-dialog-host
#overlay(v-if="status != 'connected'")
span {{status}}

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

@@ -37,19 +37,6 @@ script#control-view-template(type="text/x-template")
div(slot="footer")
label Simulating {{(toolpath_progress || 0) | percent}}
message(:show.sync=`ask_home_msg`)
h3(slot="header") Home Machine
div(slot="body")
p Home the machine?
div(slot="footer")
button.pure-button(@click="home()")
| OK
button.pure-button(@click='ask_home_msg = false; ask_home = false')
| Cancel
message(:show.sync=`ask_zero_xy_msg`)
h3(slot="header") XY Origin
@@ -497,9 +484,6 @@ script#control-view-template(type="text/x-template")
section#content4.tab-content
indicators(:state="state", :template="template")
.override(title="Feed rate override.")
label Feed
input(type="range", min="0", max="2", step="0.01",

1
src/svelte-components/src/components/AdminNetworkView.svelte
View File

@@ -1,7 +1,6 @@
<script lang="ts">
import WifiConnectionDialog from "../dialogs/WifiConnectionDialog.svelte";
import ChangeHostnameDialog from "../dialogs/ChangeHostnameDialog.svelte";
import Paper from "@smui/paper";
import Button, { Label } from "@smui/button";
import List, { Item, Graphic, Text, Meta } from "@smui/list";
import Card from "@smui/card";

6
src/svelte-components/src/components/DialogHost.svelte Normal file
View File

@@ -0,0 +1,6 @@
<script lang="ts">
import HomeMachineDialog from "../dialogs/HomeMachineDialog.svelte";
import { HomeMachine } from "../lib/DialogProps";
</script>
<HomeMachineDialog {...$HomeMachine} />

27
src/svelte-components/src/dialogs/HomeMachineDialog.svelte Normal file
View File

@@ -0,0 +1,27 @@
<script lang="ts">
import Dialog, { Title, Content, Actions, InitialFocus } from "@smui/dialog";
import Button, { Label } from "@smui/button";
export let open;
export let home: () => any;
</script>
<Dialog
bind:open
aria-labelledby="simple-title"
aria-describedby="simple-content"
>
<Title id="simple-title">Home Machine</Title>
<Content id="simple-content">Home the machine?</Content>
<Actions>
<Button>
<Label>Cancel</Label>
</Button>
<Button defaultAction use={[InitialFocus]} on:click={home}>
<Label>OK</Label>
</Button>
</Actions>
</Dialog>

7
src/svelte-components/src/dialogs/WifiConnectionDialog.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import Dialog, { Title, Content, Actions } from "@smui/dialog";
import Dialog, { Title, Content, Actions, InitialFocus } from "@smui/dialog";
import Button, { Label } from "@smui/button";
import TextField from "@smui/textfield";
import Icon from "@smui/textfield/icon";
@@ -22,7 +22,9 @@
$: {
connectOrDisconnect = network?.active ? "Disconnect" : "Connect";
connectToOrDisconnectFrom = network?.active ? "Disconnect from" : "Connect to";
connectToOrDisconnectFrom = network?.active
? "Disconnect from"
: "Connect to";
}
$: if (open) {
@@ -92,6 +94,7 @@
<Button
defaultAction
use={[InitialFocus]}
on:click={onConfirm}
disabled={needPassword && (password.length < 8 || password.length > 128)}
>

16
src/svelte-components/src/lib/DialogProps.ts Normal file
View File

@@ -0,0 +1,16 @@
import { writable } from "svelte/store";
type HomeMachine = {
open: boolean,
home: () => any
}
export type DialogPropsTypes = {
HomeMachine: HomeMachine
}
export const HomeMachine = writable<HomeMachine>();
export default {
HomeMachine
};

24
src/svelte-components/src/main.ts
View File

@@ -2,14 +2,34 @@ import 'polyfill-object.fromentries';
import AdminNetworkView from './components/AdminNetworkView.svelte';
import { init as initNetworkInfo } from './lib/NetworkInfo';
export function create(component: string, target: HTMLElement, props: Record<string, any>) {
import DialogHost from "./components/DialogHost.svelte";
import DialogProps from "./lib/DialogProps";
import type { DialogPropsTypes } from "./lib/DialogProps";
export function createComponent(component: string, target: HTMLElement, props: Record<string, any>) {
switch (component) {
case "AdminNetworkView":
return new AdminNetworkView({ target, props });
case "DialogHost":
return new DialogHost({ target, props });
default:
throw new Error("Unknown component");
}
}
export { initNetworkInfo };
export function showDialog<T extends keyof typeof DialogProps>(dialog: T, props: DialogPropsTypes[T]) {
switch (dialog) {
case "HomeMachine":
DialogProps.HomeMachine.set({ ...props, open: true });
break;
default:
throw new Error(`Unknown dialog '${dialog}`);
}
}
export {
initNetworkInfo
};

17
src/svelte-components/src/theme/_smui-theme.scss
View File

@@ -1,9 +1,9 @@
@use 'sass:color';
@use "sass:color";
@use '@material/theme/color-palette';
@use "@material/theme/color-palette";
// Svelte Colors!
@use '@material/theme/index' as theme with (
@use "@material/theme/index" as theme with (
$primary: #0078e7,
$secondary: #676778,
$surface: #fff,
@@ -13,10 +13,19 @@
);
@use "@material/elevation/mdc-elevation";
@use "@material/list";
@include list.deprecated-core-styles;
:root {
--mdc-theme-text-primary-on-background: #777;
.mdc-dialog .mdc-dialog__content {
color: #777;
}
.mdc-dialog .mdc-dialog__title {
color: #777;
font-weight: bold;
}
}