Rebuilt the "Home Machine" dialog with Svelte.

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")
     );

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+)(.*)/;

src/js/axis-vars.js

@@ -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')},
+    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: {
     _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)
+      if (!homed && this.ask_home) {
-      {
-      	this.ask_home_msg = true;
         this.ask_home = false;
+        SvelteComponents.showDialog("HomeMachine", {
+          home: () => this.home()
+        });
       }
 
       return {

src/js/control-view.js

@@ -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_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 () {
@@ -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) {
+    back2zero: function (axis0, axis1) {
-      this.send("G0"+axis0+"0"+axis1+"0");
+      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() {
+    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_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_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_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);
+          this.manual_home[axis] = true;
-        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) });
     },
 
 
@@ -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')},
+    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 () {

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}}
     

src/pug/templates/control-view.pug

@@ -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",

src/svelte-components/src/components/AdminNetworkView.svelte

@@ -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";

src/svelte-components/src/components/DialogHost.svelte

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

src/svelte-components/src/dialogs/HomeMachineDialog.svelte

@@ -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>

src/svelte-components/src/dialogs/WifiConnectionDialog.svelte

@@ -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)}
     >

src/svelte-components/src/lib/DialogProps.ts

@@ -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
+};

src/svelte-components/src/main.ts

@@ -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
+};

src/svelte-components/src/theme/_smui-theme.scss

@@ -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;
+  }
 }