From 87290cd992372954ed705d3a411acf3bdcf60252 Mon Sep 17 00:00:00 2001 From: David Carley Date: Mon, 4 Jul 2022 20:07:26 -0700 Subject: [PATCH] Rebuilt the "Home Machine" dialog with Svelte. --- src/js/admin-network-view.js | 2 +- src/js/app.js | 3 + src/js/axis-vars.js | 187 +++++++----------- src/js/control-view.js | 115 +++++------ src/pug/index.pug | 2 + src/pug/templates/control-view.pug | 16 -- .../src/components/AdminNetworkView.svelte | 1 - .../src/components/DialogHost.svelte | 6 + .../src/dialogs/HomeMachineDialog.svelte | 27 +++ .../src/dialogs/WifiConnectionDialog.svelte | 7 +- src/svelte-components/src/lib/DialogProps.ts | 16 ++ src/svelte-components/src/main.ts | 24 ++- .../src/theme/_smui-theme.scss | 19 +- 13 files changed, 227 insertions(+), 198 deletions(-) create mode 100644 src/svelte-components/src/components/DialogHost.svelte create mode 100644 src/svelte-components/src/dialogs/HomeMachineDialog.svelte create mode 100644 src/svelte-components/src/lib/DialogProps.ts diff --git a/src/js/admin-network-view.js b/src/js/admin-network-view.js index 004ef54..c37e6ff 100644 --- a/src/js/admin-network-view.js +++ b/src/js/admin-network-view.js @@ -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") ); diff --git a/src/js/app.js b/src/js/app.js index bec006a..3871766 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -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+)(.*)/; diff --git a/src/js/axis-vars.js b/src/js/axis-vars.js index 99eff79..18c54e1 100644 --- a/src/js/axis-vars.js +++ b/src/js/axis-vars.js @@ -1,107 +1,69 @@ -/******************************************************************************\ - - 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 . - - 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 - . - - For information regarding this software email: - "Joseph Coffland" - -\******************************************************************************/ - '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]; - var motor_id = this._get_motor_id(axis); - var motor = motor_id == -1 ? {} : this.config.motors[motor_id]; - var enabled = typeof motor.enabled != 'undefined' && motor.enabled; + var abs = this.state[axis + 'p'] || 0; + var off = this.state['offset_' + axis]; + var motor_id = this._get_motor_id(axis); + var motor = motor_id == -1 ? {} : this.config.motors[motor_id]; + var enabled = typeof motor.enabled != 'undefined' && motor.enabled; var homingMode = motor['homing-mode'] - var homed = this.state[motor_id + 'homed']; - var min = this.state[motor_id + 'tn']; - var max = this.state[motor_id + 'tm']; - var dim = max - min; - var pathMin = this.state['path_min_' + axis]; - var pathMax = this.state['path_max_' + axis]; - var pathDim = pathMax - pathMin; - var under = pathMin + off < min; - var over = max < pathMax + off; - var klass = (homed ? 'homed' : 'unhomed') + ' axis-' + axis; - var state = 'UNHOMED'; - var icon = 'question-circle'; - var fault = this.state[motor_id + 'df'] & 0x1f; - var shutdown = this.state.power_shutdown; + var homed = this.state[motor_id + 'homed']; + var min = this.state[motor_id + 'tn']; + var max = this.state[motor_id + 'tm']; + var dim = max - min; + var pathMin = this.state['path_min_' + axis]; + var pathMax = this.state['path_max_' + axis]; + var pathDim = pathMax - pathMin; + var under = pathMin + off < min; + var over = max < pathMax + off; + var klass = (homed ? 'homed' : 'unhomed') + ' axis-' + axis; + var state = 'UNHOMED'; + var icon = 'question-circle'; + var fault = this.state[motor_id + 'df'] & 0x1f; + var shutdown = this.state.power_shutdown; var title; - var ticon = 'question-circle'; - var tstate = 'NO FILE'; + var ticon = 'question-circle'; + var tstate = 'NO FILE'; var toolmsg; - var tklass = (homed ? 'homed' : 'unhomed') + ' axis-' + axis; + var tklass = (homed ? 'homed' : 'unhomed') + ' axis-' + axis; if (fault || shutdown) { state = shutdown ? 'SHUTDOWN' : 'FAULT'; klass += ' error'; icon = 'exclamation-circle'; - - } else if(homed) { + } else if (homed) { state = 'HOMED'; icon = 'check-circle'; } - + if (0 < dim && dim < pathDim) { tstate = 'NO FIT'; tklass += ' error'; ticon = 'ban'; - } else { - if (over || under) { tstate = over ? 'OVER' : 'UNDER'; tklass += ' warn'; @@ -113,46 +75,44 @@ module.exports = { } switch (state) { - case 'UNHOMED': title = 'Click the home button to home axis.'; break; - case 'HOMED': title = 'Axis successfuly homed.'; break; - case 'FAULT': - title = 'Motor driver fault. A potentially damaging electrical ' + - 'condition was detected and the motor driver was shutdown. ' + - 'Please power down the controller and check your motor cabling. ' + - '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) { - - case 'OVER': - toolmsg = 'Caution: The current tool path file would move ' + - this._length_str(pathMax + off - max) + ' above axis limit with the current offset.'; - break; + case 'UNHOMED': title = 'Click the home button to home axis.'; break; + case 'HOMED': title = 'Axis successfuly homed.'; break; + case 'FAULT': + title = 'Motor driver fault. A potentially damaging electrical ' + + 'condition was detected and the motor driver was shutdown. ' + + 'Please power down the controller and check your motor cabling. ' + + 'See the "Motor Faults" table on the "Indicators" tab for more ' + + 'information.'; + break; - case 'UNDER': - toolmsg = 'Caution: The current tool path file would move ' + - this._length_str(min - pathMin - off) + ' below limit with the current offset.'; - break; - - case 'NO FIT': - toolmsg = 'Warning: The current tool path dimensions (' + - this._length_str(pathDim) + ') exceed axis dimensions (' + - this._length_str(dim) + ') by ' + - this._length_str(pathDim - dim) + '.'; - break; - - default: - toolmsg = 'Tool path ' + axis + ' dimensions OK.'; - 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) { + case 'OVER': + toolmsg = 'Caution: The current tool path file would move ' + + this._length_str(pathMax + off - max) + ' above axis limit with the current offset.'; + break; + + case 'UNDER': + toolmsg = 'Caution: The current tool path file would move ' + + this._length_str(min - pathMin - off) + ' below limit with the current offset.'; + break; + + case 'NO FIT': + toolmsg = 'Warning: The current tool path dimensions (' + + this._length_str(pathDim) + ') exceed axis dimensions (' + + this._length_str(dim) + ') by ' + + this._length_str(pathDim - dim) + '.'; + break; + + default: + toolmsg = 'Tool path ' + axis + ' dimensions OK.'; + break; } - return { pos: abs - off, @@ -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; - this.ask_home = false; + if (!homed && this.ask_home) { + this.ask_home = false; + SvelteComponents.showDialog("HomeMachine", { + home: () => this.home() + }); } return { diff --git a/src/js/control-view.js b/src/js/control-view.js index 802f3d5..53d7aee 100644 --- a/src/js/control-view.js +++ b/src/js/control-view.js @@ -27,7 +27,7 @@ 'use strict' -var api = require('./api'); +var api = require('./api'); var cookie = require('./cookie')('bbctrl-'); module.exports = { @@ -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 @@ -102,10 +101,10 @@ module.exports = { }, immediate: true }, - + 'state.bitDiameter': { handler: function (bitDiameter) { - this.tool_diameter = bitDiameter; + this.tool_diameter = bitDiameter; }, immediate: true }, @@ -115,7 +114,7 @@ module.exports = { if ((units == 'METRIC') != this.metric) this.send(units == 'METRIC' ? 'G21' : 'G20'); - this.units_changed(); + this.units_changed(); }, 'state.line': function () { @@ -129,7 +128,7 @@ module.exports = { jog_step: function () { cookie.set_bool('jog-step', this.jog_step); - }, + }, jog_adjust: function () { cookie.set('jog-adjust', this.jog_adjust); @@ -148,13 +147,13 @@ module.exports = { var state = this.state.xx; if (typeof cycle != 'undefined' && state != 'ESTOPPED' && - (cycle == 'jogging' || cycle == 'homing')) + (cycle == 'jogging' || cycle == 'homing')) return cycle.toUpperCase(); return state || '' }, - pause_reason: function () {return this.state.pr}, + pause_reason: function () { return this.state.pr }, is_running: function () { @@ -162,20 +161,20 @@ 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 () { return this.is_holding && (this.pause_reason == 'User pause' || - this.pause_reason == 'Program pause') + this.pause_reason == 'Program pause') }, - 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,14 +313,14 @@ module.exports = { on_finish(); }, - hide_probe_failed_modal: function() { + hide_probe_failed_modal: function () { Vue.set(this.state, "show_probe_failed_modal", false); }, prep_and_show_tool_diameter_modal() { this.tool_diameter_for_prompt = (this.mach_units == 'METRIC') - ? this.tool_diameter - : this.tool_diameter / 25.4; + ? this.tool_diameter + : this.tool_diameter / 25.4; this.tool_diameter_for_prompt = this.tool_diameter_for_prompt.toFixed(3).replace(/0+$/, ""); @@ -340,7 +339,7 @@ module.exports = { if (this.mach_units !== "METRIC") { this.tool_diameter *= 25.4; } - + this.probe_xyz(); }, @@ -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'); - else { - if (this[axis].homingMode != 'manual') api.put('home/' + axis); - else this.manual_home[axis] = true; + if (typeof axis == 'undefined') { + api.put('home'); + } else { + if (this[axis].homingMode != 'manual') { + api.put('home/' + axis); + } + else { + 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) }); }, @@ -648,15 +649,15 @@ module.exports = { this.axis_position = 0; 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 () { diff --git a/src/pug/index.pug b/src/pug/index.pug index 1eedc13..575e904 100644 --- a/src/pug/index.pug +++ b/src/pug/index.pug @@ -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}} diff --git a/src/pug/templates/control-view.pug b/src/pug/templates/control-view.pug index 7c08bf5..83c8dc8 100644 --- a/src/pug/templates/control-view.pug +++ b/src/pug/templates/control-view.pug @@ -36,20 +36,7 @@ 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", diff --git a/src/svelte-components/src/components/AdminNetworkView.svelte b/src/svelte-components/src/components/AdminNetworkView.svelte index 285e2cb..0b7dad3 100644 --- a/src/svelte-components/src/components/AdminNetworkView.svelte +++ b/src/svelte-components/src/components/AdminNetworkView.svelte @@ -1,7 +1,6 @@ + + diff --git a/src/svelte-components/src/dialogs/HomeMachineDialog.svelte b/src/svelte-components/src/dialogs/HomeMachineDialog.svelte new file mode 100644 index 0000000..3dca1a6 --- /dev/null +++ b/src/svelte-components/src/dialogs/HomeMachineDialog.svelte @@ -0,0 +1,27 @@ + + + + Home Machine + + Home the machine? + + + + + + + diff --git a/src/svelte-components/src/dialogs/WifiConnectionDialog.svelte b/src/svelte-components/src/dialogs/WifiConnectionDialog.svelte index cc14505..d6f333c 100644 --- a/src/svelte-components/src/dialogs/WifiConnectionDialog.svelte +++ b/src/svelte-components/src/dialogs/WifiConnectionDialog.svelte @@ -1,5 +1,5 @@