Rebuilt the settings view in Svelte

src/js/admin-network-view.js

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

src/js/app.js

@@ -135,6 +135,7 @@ module.exports = new Vue({
   watch: {
     display_units: function (value) {
       localStorage.setItem("display_units", value);
+      SvelteComponents.setDisplayUnits(value);
     },
   },
 
@@ -213,6 +214,10 @@ module.exports = new Vue({
   ready: function () {
     $(window).on("hashchange", this.parse_hash);
     this.connect();
+
+    SvelteComponents.registerControllerMethods({
+      dispatch: (...args) => this.$dispatch(...args)
+    });
   },
 
   methods: {

src/js/settings-view.js

@@ -1,31 +1,14 @@
-'use strict'
-
 module.exports = {
-  template: '#settings-view-template',
-  props: ['config', 'template'],
+  template: "#settings-view-template",
 
-  computed: {
-    display_units: {
-      cache: false,
-      get: function () {
-        return this.$root.display_units;
-      },
-      set: function (value) {
-        this.$root.display_units = value;
-      }
-    },
+  attached: function () {
+    this.svelteComponent = SvelteComponents.createComponent(
+      "SettingsView",
+      document.getElementById("settings")
+    );
   },
 
-  events: {
-    'input-changed': function () {
-      this.$dispatch('config-changed');
-      return false;
-    }
-  },
-
-  methods: {
-    showScreenRotationDialog: function () {
-      SvelteComponents.showDialog("ScreenRotation");
-    }
-  }
+  detached: function() {
+    this.svelteComponent.$destroy();
   }
+};

src/pug/templates/admin-network-view.pug

@@ -1,3 +1,2 @@
 script#admin-network-view-template(type="text/x-template")
   #admin-network
-    #svelte-root

src/pug/templates/settings-view.pug

@@ -1,53 +1,2 @@
 script#settings-view-template(type="text/x-template")
   #settings
-    h1 Settings
-
-    .pure-form.pure-form-aligned
-      fieldset
-        h2 Screen
-        .pure-control-group
-          label(for="screen-rotation") 
-          button.pure-button(name="screen-rotation", @click="showScreenRotationDialog") Change Screen Rotation
-          
-      fieldset
-        h2 Probe Dimensions
-        templated-input(v-for="templ in template.probe", v-if="$key !== 'probe-diameter'", :name="$key"
-          :model.sync="config.probe[$key]", :template="templ")
-      
-      fieldset
-        h2 GCode
-        templated-input(v-for="templ in template.gcode", :name="$key",
-          :model.sync="config.gcode[$key]", :template="templ")
-
-      fieldset
-        h2 Path Accuracy
-        templated-input(name="max-deviation",
-          :model.sync="config.settings['max-deviation']",
-          :template="template.settings['max-deviation']")
-
-        p.
-          Lower #[tt max-deviation] to follow the programmed path more precisely
-          but at a slower speed.
-
-        p.
-          In order to improve traversal speed, the path planner may merge
-          consecutive moves or round off sharp corners if doing so would deviate
-          from the program path by less than #[tt max-deviation].
-
-        - var base = '//linuxcnc.org/docs/html/gcode/g-code.html'
-        p.
-          GCode commands
-          #[a(href=base + "#gcode:g61", target="_blank") G61, G61.1] and
-          #[a(href=base + "#gcode:g64", target="_blank") G64] also affect path
-          planning accuracy.
-
-        h2 Cornering Speed (Advanced)
-        templated-input(name="junction-accel",
-          :model.sync="config.settings['junction-accel']",
-          :template="template.settings['junction-accel']")
-
-        p.
-          Junction acceleration limits the cornering speed the planner will
-          allow.  Increasing this value will allow for faster traversal of
-          corners but may cause the planner to violate axis jerk limits and
-          stall the motors.  Use with caution.

src/resources/config-template.json

@@ -502,14 +502,14 @@
     },
     "probe-fast-seek": {
       "type": "float",
-      "unit": "mm/m",
+      "unit": "mm/min",
       "min": 0,
       "max": 1000,
       "default": 200
     },
     "probe-slow-seek": {
       "type": "float",
-      "unit": "mm/m",
+      "unit": "mm/min",
       "min": 0,
       "max": 1000,
       "default": 25

src/svelte-components/src/components/ConfigTemplatedInput.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import configTemplate from "../../../resources/config-template.json";
+  import { Config, DisplayUnits } from "$lib/ConfigStore";
+  import { ControllerMethods } from "$lib/RegisterControllerMethods";
+  import { onMount } from "svelte";
+
+  type Template = {
+    type?: string;
+    values?: (string | number)[];
+    unit?: "string";
+    iunit?: "string";
+    min?: number;
+    max?: number;
+    step?: number;
+    help?: string;
+    default?: string | number;
+    scale?: number;
+  };
+
+  export let key: string;
+  let keyParts: string[];
+  let template: Template;
+  let name: string;
+  let title: string;
+  let units: string;
+  let value;
+
+  onMount(() => {
+    keyParts = (key || "").split(".");
+    template = getTemplate();
+    name = keyParts[keyParts.length - 1];
+    title = getTitle();
+    value = getValue();
+  });
+
+  $: metric = $DisplayUnits === "METRIC";
+  $: if (template) {
+    units = metric || !template.iunit ? template.unit : template.iunit;
+  }
+
+  function getTemplate(): Template {
+    let template = configTemplate;
+    for (const part of keyParts) {
+      template = template[part];
+    }
+
+    return template as Template;
+  }
+
+  function getTitle(): string {
+    const help = template.help ? `${template.help}\n` : "";
+    return `${help}Default: ${template.default} ${template.unit || ""}`;
+  }
+
+  function getValue(): string | number {
+    let value: any = $Config;
+    for (const part of keyParts) {
+      value = value[part];
+    }
+
+    if (template.scale) {
+      if (metric) {
+        return Number.parseFloat(value.toFixed(3));
+      }
+
+      return Number.parseFloat((value / template.scale).toFixed(4));
+    }
+
+    return value;
+  }
+
+  function onChange() {
+    Config.update((config) => {
+      let target = config;
+      for (const part of keyParts.slice(0, -1)) {
+        target = target[part];
+      }
+
+      target[keyParts[keyParts.length - 1]] = value;
+
+      return config;
+    });
+
+    ControllerMethods.dispatch("config-changed");
+  }
+</script>
+
+{#if template}
+  <div class="pure-control-group" {title}>
+    <label for={name}>{name}</label>
+
+    {#if template.values}
+      <select {name} bind:value on:change={onChange}>
+        {#each template.values as opt}
+          <option value={opt} disabled={opt === "-----"}>
+            {opt}
+          </option>
+        {/each}
+      </select>
+    {:else if template.type === "bool"}
+      <input {name} type="checkbox" bind:value on:input={onChange} />
+    {:else if template.type === "float"}
+      <input
+        {name}
+        type="number"
+        min={template.min}
+        max={template.max}
+        step={template.step || "any"}
+        bind:value
+        on:input={onChange}
+      />
+    {:else if template.type === "int"}
+      <input
+        {name}
+        type="number"
+        min={template.min}
+        max={template.max}
+        bind:value
+        on:input={onChange}
+      />
+    {:else if template.type === "string"}
+      <input {name} type="text" bind:value on:input={onChange} />
+    {:else if template.type == "text"}
+      <textarea {name} bind:value on:input={onChange} />
+    {/if}
+
+    <label for="" class="units">{units || ""}</label>
+
+    <slot name="extra" />
+  </div>
+{/if}

src/svelte-components/src/components/SettingsView.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import configTemplate from "../../../resources/config-template.json";
+  import ScreenRotationDialog from "$dialogs/ScreenRotationDialog.svelte";
+  import ConfigTemplatedInput from "./ConfigTemplatedInput.svelte";
+
+  const gcodeURL = "https://linuxcnc.org/docs/html/gcode/g-code.html";
+
+  let showScreenRotationDialog = false;
+</script>
+
+<ScreenRotationDialog bind:open={showScreenRotationDialog} />
+
+<h1>Settings</h1>
+
+<div class="pure-form pure-form-aligned">
+  <h2>User Interface</h2>
+  <fieldset>
+    <div class="pure-control-group">
+      <label for="screen-rotation" />
+      <button
+        class="pure-button"
+        name="screen-rotation"
+        on:click={() => (showScreenRotationDialog = true)}
+      >
+        Change Screen Rotation
+      </button>
+    </div>
+  </fieldset>
+
+  <fieldset>
+    <h2>Probe Dimensions</h2>
+    {#each Object.keys(configTemplate.probe) as key}
+      {#if key !== "probe-diameter"}
+        <ConfigTemplatedInput key={`probe.${key}`} />
+      {/if}
+    {/each}
+  </fieldset>
+
+  <fieldset>
+    <h2>GCode</h2>
+    {#each Object.keys(configTemplate.gcode) as key}
+      <ConfigTemplatedInput key={`gcode.${key}`} />
+    {/each}
+  </fieldset>
+
+  <h2>Path Accuracy</h2>
+  <fieldset>
+    <ConfigTemplatedInput key={`settings.max-deviation`} />
+  </fieldset>
+
+  <p>
+    Lower <tt>max-deviation</tt> to follow the programmed path more precisely but
+    at a slower speed.
+  </p>
+
+  <p>
+    In order to improve traversal speed, the path planner may merge consecutive
+    moves or round off sharp corners if doing so would deviate from the program
+    path by less than <tt>max-deviation</tt>.
+  </p>
+
+  <p>
+    GCode commands
+    <a href={`${gcodeURL}#gcode:g61`} target="_blank">G61, G61.1</a>
+    and <a href={`${gcodeURL}#gcode:g64`} target="_blank"> G64</a> also affect path
+    planning accuracy.
+  </p>
+
+  <h2>Cornering Speed (Advanced)</h2>
+  <fieldset>
+    <ConfigTemplatedInput key={`settings.junction-accel`} />
+  </fieldset>
+
+  <p>
+    Junction acceleration limits the cornering speed the planner will allow.
+    Increasing this value will allow for faster traversal of corners but may
+    cause the planner to violate axis jerk limits and stall the motors. Use with
+    caution.
+  </p>
+</div>

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

@@ -1,7 +1,14 @@
 import { writable } from "svelte/store";
 
+type DisplayUnits = "METRIC" | "IMPERIAL";
+
 export const Config = writable<Record<string, any>>({});
+export const DisplayUnits = writable<DisplayUnits>();
 
 export function handleConfigUpdate(config: Record<string, any>) {
     Config.set(config);
 }
+
+export function setDisplayUnits(value: DisplayUnits) {
+    DisplayUnits.set(value);
+}

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

@@ -2,10 +2,14 @@ type ControllerMethods = {
     stop: () => void;
     send: (gcode: string) => void;
     goto_zero: (x: number, y: number, z: number, a: number) => void;
+    dispatch: (event: string, ...args: any[]) => void;
 }
 
 export let ControllerMethods: ControllerMethods;
 
-export function registerControllerMethods(methods: ControllerMethods) {
-    ControllerMethods = methods;
+export function registerControllerMethods(methods: Partial<ControllerMethods>) {
+    ControllerMethods = {
+        ...ControllerMethods,
+        ...methods
+    };
 }

src/svelte-components/src/main.ts

@@ -4,9 +4,10 @@ import matchAll from "string.prototype.matchall";
 matchAll.shim();
 
 import AdminNetworkView from '$components/AdminNetworkView.svelte';
+import SettingsView from '$components/SettingsView.svelte';
 import DialogHost, { showDialog } from "$dialogs/DialogHost.svelte";
 import Devmode from "$components/Devmode.svelte";
-import { handleConfigUpdate } from '$lib/ConfigStore';
+import { handleConfigUpdate, setDisplayUnits } from '$lib/ConfigStore';
 import { handleControllerStateUpdate } from "$lib/ControllerState";
 import { registerControllerMethods } from "$lib/RegisterControllerMethods";
 
@@ -15,6 +16,9 @@ export function createComponent(component: string, target: HTMLElement, props: R
     case "AdminNetworkView":
       return new AdminNetworkView({ target, props });
 
+    case "SettingsView":
+      return new SettingsView({ target, props });
+
     case "DialogHost":
       return new DialogHost({ target, props });
 
@@ -31,4 +35,5 @@ export {
   handleControllerStateUpdate,
   handleConfigUpdate,
   registerControllerMethods,
+  setDisplayUnits
 };