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,40 +1,8 @@
-/******************************************************************************\
-
-                 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') },
@@ -45,19 +13,16 @@ module.exports = {
     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,7 +54,6 @@ module.exports = {
         state = shutdown ? 'SHUTDOWN' : 'FAULT';
         klass += ' error';
         icon = 'exclamation-circle';
-
       } 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,6 +84,7 @@ 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 ' +
@@ -129,7 +92,6 @@ module.exports = {
       }
 
       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;
 
@@ -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 {

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
@@ -619,15 +618,17 @@ 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;
+        }
       }
     },
 

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