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", template: "#admin-network-view-template",
attached: function () { attached: function () {
this.svelteComponent = SvelteComponents.create( this.svelteComponent = SvelteComponents.createComponent(
"AdminNetworkView", "AdminNetworkView",
document.getElementById("svelte-root") document.getElementById("svelte-root")
); );

3
src/js/app.js
View File

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

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

@@ -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 <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' 'use strict'
function is_defined(x) {return typeof x != 'undefined'}
module.exports = { module.exports = {
props: ['state', 'config'], props: ['state', 'config'],
computed: { computed: {
x: function () {return this._compute_axis('x')}, x: function () { return this._compute_axis('x') },
y: function () {return this._compute_axis('y')}, y: function () { return this._compute_axis('y') },
z: function () {return this._compute_axis('z')}, z: function () { return this._compute_axis('z') },
a: function () {return this._compute_axis('a')}, a: function () { return this._compute_axis('a') },
b: function () {return this._compute_axis('b')}, b: function () { return this._compute_axis('b') },
c: function () {return this._compute_axis('c')}, c: function () { return this._compute_axis('c') },
axes: function () {return this._compute_axes()} axes: function () { return this._compute_axes() }
}, },
methods: { methods: {
_convert_length: function (value) { _convert_length: function (value) {
return this.state.imperial ? value / 25.4 : value; return this.state.imperial ? value / 25.4 : value;
}, },
_length_str: function (value) { _length_str: function (value) {
return this._convert_length(value).toLocaleString() + return this._convert_length(value).toLocaleString() +
(this.state.imperial ? ' in' : ' mm'); (this.state.imperial ? ' in' : ' mm');
}, },
_compute_axis: function (axis) { _compute_axis: function (axis) {
var abs = this.state[axis + 'p'] || 0; var abs = this.state[axis + 'p'] || 0;
var off = this.state['offset_' + axis]; var off = this.state['offset_' + axis];
var motor_id = this._get_motor_id(axis); var motor_id = this._get_motor_id(axis);
var motor = motor_id == -1 ? {} : this.config.motors[motor_id]; var motor = motor_id == -1 ? {} : this.config.motors[motor_id];
var enabled = typeof motor.enabled != 'undefined' && motor.enabled; var enabled = typeof motor.enabled != 'undefined' && motor.enabled;
var homingMode = motor['homing-mode'] var homingMode = motor['homing-mode']
var homed = this.state[motor_id + 'homed']; var homed = this.state[motor_id + 'homed'];
var min = this.state[motor_id + 'tn']; var min = this.state[motor_id + 'tn'];
var max = this.state[motor_id + 'tm']; var max = this.state[motor_id + 'tm'];
var dim = max - min; var dim = max - min;
var pathMin = this.state['path_min_' + axis]; var pathMin = this.state['path_min_' + axis];
var pathMax = this.state['path_max_' + axis]; var pathMax = this.state['path_max_' + axis];
var pathDim = pathMax - pathMin; var pathDim = pathMax - pathMin;
var under = pathMin + off < min; var under = pathMin + off < min;
var over = max < pathMax + off; var over = max < pathMax + off;
var klass = (homed ? 'homed' : 'unhomed') + ' axis-' + axis; var klass = (homed ? 'homed' : 'unhomed') + ' axis-' + axis;
var state = 'UNHOMED'; var state = 'UNHOMED';
var icon = 'question-circle'; var icon = 'question-circle';
var fault = this.state[motor_id + 'df'] & 0x1f; var fault = this.state[motor_id + 'df'] & 0x1f;
var shutdown = this.state.power_shutdown; var shutdown = this.state.power_shutdown;
var title; var title;
var ticon = 'question-circle'; var ticon = 'question-circle';
var tstate = 'NO FILE'; var tstate = 'NO FILE';
var toolmsg; var toolmsg;
var tklass = (homed ? 'homed' : 'unhomed') + ' axis-' + axis; var tklass = (homed ? 'homed' : 'unhomed') + ' axis-' + axis;
if (fault || shutdown) { if (fault || shutdown) {
state = shutdown ? 'SHUTDOWN' : 'FAULT'; state = shutdown ? 'SHUTDOWN' : 'FAULT';
klass += ' error'; klass += ' error';
icon = 'exclamation-circle'; icon = 'exclamation-circle';
} else if (homed) {
} else if(homed) {
state = 'HOMED'; state = 'HOMED';
icon = 'check-circle'; icon = 'check-circle';
} }
if (0 < dim && dim < pathDim) { if (0 < dim && dim < pathDim) {
tstate = 'NO FIT'; tstate = 'NO FIT';
tklass += ' error'; tklass += ' error';
ticon = 'ban'; ticon = 'ban';
} else { } else {
if (over || under) { if (over || under) {
tstate = over ? 'OVER' : 'UNDER'; tstate = over ? 'OVER' : 'UNDER';
tklass += ' warn'; tklass += ' warn';
@@ -113,46 +75,44 @@ module.exports = {
} }
switch (state) { switch (state) {
case 'UNHOMED': title = 'Click the home button to home axis.'; break; case 'UNHOMED': title = 'Click the home button to home axis.'; break;
case 'HOMED': title = 'Axis successfuly homed.'; break; case 'HOMED': title = 'Axis successfuly homed.'; break;
case 'FAULT': case 'FAULT':
title = 'Motor driver fault. A potentially damaging electrical ' + title = 'Motor driver fault. A potentially damaging electrical ' +
'condition was detected and the motor driver was shutdown. ' + 'condition was detected and the motor driver was shutdown. ' +
'Please power down the controller and check your motor cabling. ' + 'Please power down the controller and check your motor cabling. ' +
'See the "Motor Faults" table on the "Indicators" tab for more ' + 'See the "Motor Faults" table on the "Indicators" tab for more ' +
'information.'; 'information.';
break; 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': case 'SHUTDOWN':
toolmsg = 'Caution: The current tool path file would move ' + title = 'Motor power fault. All motors in shutdown. ' +
this._length_str(min - pathMin - off) + ' below limit with the current offset.'; 'See the "Power Faults" table on the "Indicators" tab for more ' +
break; 'information. Reboot controller to reset.';
}
case 'NO FIT':
toolmsg = 'Warning: The current tool path dimensions (' + switch (tstate) {
this._length_str(pathDim) + ') exceed axis dimensions (' + case 'OVER':
this._length_str(dim) + ') by ' + toolmsg = 'Caution: The current tool path file would move ' +
this._length_str(pathDim - dim) + '.'; this._length_str(pathMax + off - max) + ' above axis limit with the current offset.';
break; break;
default: case 'UNDER':
toolmsg = 'Tool path ' + axis + ' dimensions OK.'; toolmsg = 'Caution: The current tool path file would move ' +
break; 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 { return {
pos: abs - off, pos: abs - off,
@@ -179,7 +139,6 @@ module.exports = {
} }
}, },
_get_motor_id: function (axis) { _get_motor_id: function (axis) {
for (var i = 0; i < this.config.motors.length; i++) { for (var i = 0; i < this.config.motors.length; i++) {
var motor = this.config.motors[i]; var motor = this.config.motors[i];
@@ -189,7 +148,6 @@ module.exports = {
return -1; return -1;
}, },
_compute_axes: function () { _compute_axes: function () {
var homed = false; var homed = false;
@@ -197,7 +155,7 @@ module.exports = {
var axis = this[name]; var axis = this[name];
if (!axis.enabled) continue if (!axis.enabled) continue
if (!axis.homed) {homed = false; break} if (!axis.homed) { homed = false; break }
homed = true; homed = true;
} }
@@ -217,10 +175,11 @@ module.exports = {
if (error) klass += ' error'; if (error) klass += ' error';
else if (warn) klass += ' warn'; else if (warn) klass += ' warn';
if(!homed && this.ask_home) if (!homed && this.ask_home) {
{ this.ask_home = false;
this.ask_home_msg = true; SvelteComponents.showDialog("HomeMachine", {
this.ask_home = false; home: () => this.home()
});
} }
return { return {

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

@@ -27,7 +27,7 @@
'use strict' 'use strict'
var api = require('./api'); var api = require('./api');
var cookie = require('./cookie')('bbctrl-'); var cookie = require('./cookie')('bbctrl-');
module.exports = { module.exports = {
@@ -81,7 +81,6 @@ module.exports = {
c: false c: false
}, },
ask_home: true, ask_home: true,
ask_home_msg: false,
ask_zero_xy_msg: false, ask_zero_xy_msg: false,
ask_zero_z_msg: false, ask_zero_z_msg: false,
showGcodeMessage: false showGcodeMessage: false
@@ -102,10 +101,10 @@ module.exports = {
}, },
immediate: true immediate: true
}, },
'state.bitDiameter': { 'state.bitDiameter': {
handler: function (bitDiameter) { handler: function (bitDiameter) {
this.tool_diameter = bitDiameter; this.tool_diameter = bitDiameter;
}, },
immediate: true immediate: true
}, },
@@ -115,7 +114,7 @@ module.exports = {
if ((units == 'METRIC') != this.metric) if ((units == 'METRIC') != this.metric)
this.send(units == 'METRIC' ? 'G21' : 'G20'); this.send(units == 'METRIC' ? 'G21' : 'G20');
this.units_changed(); this.units_changed();
}, },
'state.line': function () { 'state.line': function () {
@@ -129,7 +128,7 @@ module.exports = {
jog_step: function () { jog_step: function () {
cookie.set_bool('jog-step', this.jog_step); cookie.set_bool('jog-step', this.jog_step);
}, },
jog_adjust: function () { jog_adjust: function () {
cookie.set('jog-adjust', this.jog_adjust); cookie.set('jog-adjust', this.jog_adjust);
@@ -148,13 +147,13 @@ module.exports = {
var state = this.state.xx; var state = this.state.xx;
if (typeof cycle != 'undefined' && state != 'ESTOPPED' && if (typeof cycle != 'undefined' && state != 'ESTOPPED' &&
(cycle == 'jogging' || cycle == 'homing')) (cycle == 'jogging' || cycle == 'homing'))
return cycle.toUpperCase(); return cycle.toUpperCase();
return state || '' return state || ''
}, },
pause_reason: function () {return this.state.pr}, pause_reason: function () { return this.state.pr },
is_running: function () { is_running: function () {
@@ -162,20 +161,20 @@ module.exports = {
}, },
is_stopping: function () {return this.mach_state == 'STOPPING'}, is_stopping: function () { return this.mach_state == 'STOPPING' },
is_holding: function () {return this.mach_state == 'HOLDING'}, is_holding: function () { return this.mach_state == 'HOLDING' },
is_ready: function () {return this.mach_state == 'READY'}, is_ready: function () { return this.mach_state == 'READY' },
is_idle: function () {return this.state.cycle == 'idle'}, is_idle: function () { return this.state.cycle == 'idle' },
is_paused: function () { is_paused: function () {
return this.is_holding && return this.is_holding &&
(this.pause_reason == 'User pause' || (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 () { 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 () { plan_time_remaining: function () {
@@ -227,20 +226,20 @@ module.exports = {
events: { events: {
jog: function (axis, power) { jog: function (axis, power) {
var data = {ts: new Date().getTime()}; var data = { ts: new Date().getTime() };
data[axis] = power; data[axis] = power;
api.put('jog', data); api.put('jog', data);
}, },
back2zero: function(axis0,axis1) { back2zero: function (axis0, axis1) {
this.send("G0"+axis0+"0"+axis1+"0"); this.send("G0" + axis0 + "0" + axis1 + "0");
}, },
step: function (axis, value) { step: function (axis, value) {
this.send('M70\nG91\nG0' + axis + value + '\nM72'); 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, "probing_active", false);
Vue.set(this.state, "wait_for_probing_complete", false); Vue.set(this.state, "wait_for_probing_complete", false);
Vue.set(this.state, "show_probe_complete_modal", 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); Vue.set(this.state, "show_probe_failed_modal", true);
}, },
probing_complete: function() { probing_complete: function () {
Vue.set(this.state, "probing_active", false); Vue.set(this.state, "probing_active", false);
if (this.config.settings['probing-prompts']) { 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); Vue.set(this.state, "show_probe_complete_modal", false);
if (this.state.goto_xy_zero_after_probe) { if (this.state.goto_xy_zero_after_probe) {
@@ -277,8 +276,8 @@ module.exports = {
methods: { methods: {
units_changed : function() { units_changed: function () {
if(this.mach_units == 'METRIC') { if (this.mach_units == 'METRIC') {
document.getElementById("jog_button_fine").innerHTML = "0.1"; document.getElementById("jog_button_fine").innerHTML = "0.1";
document.getElementById("jog_button_small").innerHTML = "1.0"; document.getElementById("jog_button_small").innerHTML = "1.0";
document.getElementById("jog_button_medium").innerHTML = "10"; document.getElementById("jog_button_medium").innerHTML = "10";
@@ -293,7 +292,7 @@ module.exports = {
this.set_jog_incr('small'); this.set_jog_incr('small');
}, },
start_probe_test: function(on_finish) { start_probe_test: function (on_finish) {
if (!this.config.settings['probing-prompts']) { if (!this.config.settings['probing-prompts']) {
on_finish(); on_finish();
return; return;
@@ -304,7 +303,7 @@ module.exports = {
Vue.set(this.state, "on_probe_finish", on_finish); Vue.set(this.state, "on_probe_finish", on_finish);
}, },
finish_probe_test: function() { finish_probe_test: function () {
this.show_probe_test_modal = false; this.show_probe_test_modal = false;
Vue.set(this.state, "saw_probe_connected", false); Vue.set(this.state, "saw_probe_connected", false);
@@ -314,14 +313,14 @@ module.exports = {
on_finish(); on_finish();
}, },
hide_probe_failed_modal: function() { hide_probe_failed_modal: function () {
Vue.set(this.state, "show_probe_failed_modal", false); Vue.set(this.state, "show_probe_failed_modal", false);
}, },
prep_and_show_tool_diameter_modal() { prep_and_show_tool_diameter_modal() {
this.tool_diameter_for_prompt = (this.mach_units == 'METRIC') this.tool_diameter_for_prompt = (this.mach_units == 'METRIC')
? this.tool_diameter ? this.tool_diameter
: this.tool_diameter / 25.4; : this.tool_diameter / 25.4;
this.tool_diameter_for_prompt = this.tool_diameter_for_prompt.toFixed(3).replace(/0+$/, ""); 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") { if (this.mach_units !== "METRIC") {
this.tool_diameter *= 25.4; this.tool_diameter *= 25.4;
} }
this.probe_xyz(); this.probe_xyz();
}, },
@@ -429,7 +428,7 @@ module.exports = {
this.probe(true); 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_fine").style.fontWeight = 'normal';
document.getElementById("jog_button_small").style.fontWeight = 'normal'; document.getElementById("jog_button_small").style.fontWeight = 'normal';
document.getElementById("jog_button_medium").style.fontWeight = 'normal'; document.getElementById("jog_button_medium").style.fontWeight = 'normal';
@@ -437,19 +436,19 @@ module.exports = {
if (newValue == 'fine') { if (newValue == 'fine') {
document.getElementById("jog_button_fine").style.fontWeight = 'bold'; document.getElementById("jog_button_fine").style.fontWeight = 'bold';
if(this.mach_units == 'METRIC') if (this.mach_units == 'METRIC')
this.jog_incr = 0.1; this.jog_incr = 0.1;
else else
this.jog_incr = 0.005; this.jog_incr = 0.005;
} else if (newValue == 'small') { } else if (newValue == 'small') {
document.getElementById("jog_button_small").style.fontWeight = 'bold'; document.getElementById("jog_button_small").style.fontWeight = 'bold';
if(this.mach_units == 'METRIC') if (this.mach_units == 'METRIC')
this.jog_incr = 1.0; this.jog_incr = 1.0;
else else
this.jog_incr = 0.05; this.jog_incr = 0.05;
} else if (newValue == 'medium') { } else if (newValue == 'medium') {
document.getElementById("jog_button_medium").style.fontWeight = 'bold'; document.getElementById("jog_button_medium").style.fontWeight = 'bold';
if(this.mach_units == 'METRIC') if (this.mach_units == 'METRIC')
this.jog_incr = 10; this.jog_incr = 10;
else else
this.jog_incr = 0.5; 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 xcmd = "";
var ycmd = ""; var ycmd = "";
var zcmd = ""; var zcmd = "";
var acmd = ""; var acmd = "";
if(zero_x) xcmd = "X0"; if (zero_x) xcmd = "X0";
if(zero_y) ycmd = "Y0"; if (zero_y) ycmd = "Y0";
if(zero_z) zcmd = "Z0"; if (zero_z) zcmd = "Z0";
if(zero_a) acmd = "A0"; if (zero_a) acmd = "A0";
this.ask_zero_xy_msg = false; this.ask_zero_xy_msg = false;
this.ask_zero_z_msg = false; this.ask_zero_z_msg = false;
@@ -478,7 +477,7 @@ module.exports = {
this.send('G90\nG0' + xcmd + ycmd + zcmd + acmd + '\n'); 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 xcmd = "X" + x_jog * this.jog_incr;
var ycmd = "Y" + y_jog * this.jog_incr; var ycmd = "Y" + y_jog * this.jog_incr;
var zcmd = "Z" + z_jog * this.jog_incr; var zcmd = "Z" + z_jog * this.jog_incr;
@@ -619,22 +618,24 @@ module.exports = {
home: function (axis) { home: function (axis) {
this.ask_home = false; this.ask_home = false;
this.ask_home_msg = false;
if (typeof axis == 'undefined') api.put('home');
else { if (typeof axis == 'undefined') {
if (this[axis].homingMode != 'manual') api.put('home/' + axis); api.put('home');
else this.manual_home[axis] = true; } else {
if (this[axis].homingMode != 'manual') {
api.put('home/' + axis);
}
else {
this.manual_home[axis] = true;
}
} }
}, },
set_home: function (axis, position) { set_home: function (axis, position) {
this.manual_home[axis] = false; 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.axis_position = 0;
this.position_msg[axis] = true; this.position_msg[axis] = true;
}, },
show_toolpath_msg : function(axis) { show_toolpath_msg: function (axis) {
this.toolpath_msg[axis] = true; this.toolpath_msg[axis] = true;
}, },
set_position: function (axis, position) { set_position: function (axis, position) {
this.position_msg[axis] = false; 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')}, start: function () { api.put('start') },
pause: function () {api.put('pause')}, pause: function () { api.put('pause') },
unpause: function () {api.put('unpause')}, unpause: function () { api.put('unpause') },
optional_pause: function () {api.put('pause/optional')}, optional_pause: function () { api.put('pause/optional') },
stop: function () {api.put('stop')}, stop: function () { api.put('stop') },
step: function () {api.put('step')}, 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 () { override_speed: function () {

2
src/pug/index.pug
View File

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

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

@@ -36,20 +36,7 @@ script#control-view-template(type="text/x-template")
div(slot="footer") div(slot="footer")
label Simulating {{(toolpath_progress || 0) | percent}} 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`) message(:show.sync=`ask_zero_xy_msg`)
h3(slot="header") XY Origin h3(slot="header") XY Origin
@@ -497,9 +484,6 @@ script#control-view-template(type="text/x-template")
section#content4.tab-content section#content4.tab-content
indicators(:state="state", :template="template") indicators(:state="state", :template="template")
.override(title="Feed rate override.") .override(title="Feed rate override.")
label Feed label Feed
input(type="range", min="0", max="2", step="0.01", 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"> <script lang="ts">
import WifiConnectionDialog from "../dialogs/WifiConnectionDialog.svelte"; import WifiConnectionDialog from "../dialogs/WifiConnectionDialog.svelte";
import ChangeHostnameDialog from "../dialogs/ChangeHostnameDialog.svelte"; import ChangeHostnameDialog from "../dialogs/ChangeHostnameDialog.svelte";
import Paper from "@smui/paper";
import Button, { Label } from "@smui/button"; import Button, { Label } from "@smui/button";
import List, { Item, Graphic, Text, Meta } from "@smui/list"; import List, { Item, Graphic, Text, Meta } from "@smui/list";
import Card from "@smui/card"; 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"> <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 Button, { Label } from "@smui/button";
import TextField from "@smui/textfield"; import TextField from "@smui/textfield";
import Icon from "@smui/textfield/icon"; import Icon from "@smui/textfield/icon";
@@ -22,7 +22,9 @@
$: { $: {
connectOrDisconnect = network?.active ? "Disconnect" : "Connect"; connectOrDisconnect = network?.active ? "Disconnect" : "Connect";
connectToOrDisconnectFrom = network?.active ? "Disconnect from" : "Connect to"; connectToOrDisconnectFrom = network?.active
? "Disconnect from"
: "Connect to";
} }
$: if (open) { $: if (open) {
@@ -92,6 +94,7 @@
<Button <Button
defaultAction defaultAction
use={[InitialFocus]}
on:click={onConfirm} on:click={onConfirm}
disabled={needPassword && (password.length < 8 || password.length > 128)} 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 AdminNetworkView from './components/AdminNetworkView.svelte';
import { init as initNetworkInfo } from './lib/NetworkInfo'; 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) { switch (component) {
case "AdminNetworkView": case "AdminNetworkView":
return new AdminNetworkView({ target, props }); return new AdminNetworkView({ target, props });
case "DialogHost":
return new DialogHost({ target, props });
default: default:
throw new Error("Unknown component"); 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
};

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