Improved Layout and logic (#25)

* Refined Layout and colors or move/temp and state page * Fixed commands * Enabled fullscreen start option * Minor layout fix * Extract Status Line to nested component * Extract Bottom Navigation to nested component * Decreased y size * Add quad gantry level module support * Adapt JsonRpcResponse to IJsonRpcResponse changes * Improve layouts and logic - babysteps and extrusion screen - add global step preselection - displaystatus message can be null --------- Signed-off-by: Frank Roth <developer@freakydu.de>
freakydude · Nov 26, 2023 · 28aba23 · 28aba23
1 parent 6a07126
commit 28aba23
Show file tree

Hide file tree

Showing 20 changed files with 390 additions and 447 deletions.
diff --git a/README.md b/README.md
@@ -75,21 +75,23 @@ And yes, help and improve if you find something.
 - Configure your `cors_domains` in `moonraker.conf` to allow Klipper-Touch to access the moonraker apis
 
 - Run Klipper-Touch
+
   - exclusive: `/usr/bin/startx /usr/bin/klipper-touch -- -nocursor` or
   - in a window manager: `/usr/bin/klipper-touch`
 
 - Klipper-Touch listen on url: `http://127.0.0.1/` and `ws://127.0.0.1/websocket` for a moonraker api connection.
+
   - To use another url, use the commandline parameters
 
     ```bash
     -h <Moonraker-HTTP-URL>  eg. `http://192.168.1.1/`
     -w <Moonraker-Websocket-URL>  eg. `ws://192.168.1.1/websocket`
     ```
 
-  - To start in fullscreen mode (not implemented)
+  - To start in fullscreen mode
 
     ```bash
-    -f <true | false>
+    -f
     ```
 
 ## Development

diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -16,7 +16,7 @@ tauri-build = { version = "1.5.0", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.5.0", features = ["cli"] }
+tauri = { version = "1.5.0", features = ["window-set-fullscreen", "cli"] }
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -41,7 +41,11 @@
       "description": "Klipper-Touch is an alternative web-based UI for Klipper3d/Moonraker that focuses on small touch screens without keyboard or mouse."
     },
     "allowlist": {
-      "all": false
+      "all": false,
+      "window": {
+        "all": false,
+        "setFullscreen": true
+      }
     },
     "bundle": {
       "active": true,

diff --git a/src/lib/BottomNavigation.svelte b/src/lib/BottomNavigation.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { commands, moonraker, values } from './base.svelte';
+
+  let printStatsState = moonraker.printStats.State;
+  let clockFormatter = values.clockFormatter;
+  let clock = values.clock;
+</script>
+
+<div class="flex h-11 w-full flex-row gap-x-1 bg-neutral-700 px-1 pb-1">
+  <a
+    href="/printstate"
+    class="flex w-16 items-center justify-center rounded-b-lg
+    {$page.url.pathname === '/printstate' ? 'bg-neutral-500' : 'bg-neutral-600'} 
+      px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
+    State
+  </a>
+  {#if $printStatsState !== 'printing'}
+    <a
+      class="flex w-16 items-center justify-center rounded-b-lg
+      {$page.url.pathname === '/move' ? 'bg-neutral-500' : 'bg-neutral-600'} 
+       px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50"
+      href="/move">
+      Move
+    </a>
+  {/if}
+  <a
+    href="/temperature"
+    class="flex w-16 items-center justify-center rounded-b-lg
+    {$page.url.pathname === '/temperature' ? 'bg-neutral-500' : 'bg-neutral-600'} 
+    px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
+    Temp
+  </a>
+  <a
+    href="/babysteps"
+    class="flex w-16 items-center justify-center rounded-b-lg
+    {$page.url.pathname === '/babysteps' ? 'bg-neutral-500' : 'bg-neutral-600'} 
+    px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
+    Baby
+  </a>
+  {#if $printStatsState !== 'printing'}
+    <a
+      href="/extrusion"
+      class="flex w-16 items-center justify-center rounded-b-lg
+      {$page.url.pathname === '/extrusion' ? 'bg-neutral-500' : 'bg-neutral-600'}       
+      px-3 py-2 font-semibold text-neutral-50 drop-shadow-md active:bg-red-500 disabled:opacity-50">
+      Extr
+    </a>
+  {/if}
+  <div class="flex flex-grow items-end justify-end">
+    <p class="pb-1 pr-1 text-sm text-neutral-50">{clockFormatter.format($clock)}</p>
+  </div>
+  <button
+    class="flex w-16 items-center justify-center rounded-b-lg bg-neutral-600 px-3 py-2 font-semibold text-red-700 drop-shadow-md active:bg-red-500 disabled:opacity-50"
+    on:click|preventDefault="{() => commands.emergencyStop()}">
+    Kill
+  </button>
+</div>
diff --git a/src/lib/StatusLine.svelte b/src/lib/StatusLine.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { moonraker } from './base.svelte';
+
+  let displayStatusMessage = moonraker.displayStatus.Message;
+</script>
+
+<div class="flex h-6 w-full flex-row items-start justify-center">
+  <p class="overflow-clip text-sm text-neutral-50">{$displayStatusMessage}</p>
+</div>
diff --git a/src/lib/commons/Commands.ts b/src/lib/commons/Commands.ts
@@ -51,6 +51,16 @@ export class Commands {
     await this._jsonRpcClient.sendRequest(request);
   }
 
+  public async levelQuadGantry() {
+    const request = new JsonRpcRequest({
+      method: 'printer.gcode.script',
+      params: {
+        script: 'QUAD_GANTRY_LEVEL'
+      }
+    });
+    await this._jsonRpcClient.sendRequest(request);
+  }
+
   public async homeXY() {
     const request = new JsonRpcRequest({
       method: 'printer.gcode.script',

diff --git a/src/lib/commons/Values.ts b/src/lib/commons/Values.ts
@@ -3,13 +3,18 @@ import { JsonRpcRequest } from '$lib/jsonrpc/types/JsonRpcRequest';
 import type { MoonrakerClient } from '$lib/moonraker/MoonrakerClient';
 import type { IFileMetadata } from '$lib/moonraker/types/IFileMetadata';
 import type { IThumbnail } from '$lib/moonraker/types/IThumbnail';
-import { readable, type Readable } from 'svelte/store';
+import { readable, writable, type Readable } from 'svelte/store';
 
 export class Values {
   private _moonrakerClient: MoonrakerClient;
 
   public clockFormatter: Intl.DateTimeFormat;
   public clock: Readable<Date>;
+  public stepsMove = writable(50);
+  public stepsTemp = writable(20);
+  public stepsBaby = writable(0.05);
+  public stepsExtrusion = writable(10);
+  public stepsExtrusionSpeed = writable(3);
 
   public constructor(moonrakerClient: MoonrakerClient) {
     // super();

diff --git a/src/lib/jsonrpc/types/JsonRpcResponse.ts b/src/lib/jsonrpc/types/JsonRpcResponse.ts
@@ -2,10 +2,10 @@ import type { IJsonRpcErrorObject } from './IJsonRpcErrorObject';
 import type { IJsonRpcResponse } from './IJsonRpcResponse';
 
 export class JsonRpcResponse implements IJsonRpcResponse {
-  jsonrpc?: string;
+  jsonrpc: string;
   id: string | number | null;
-  result?: object | null;
-  error?: IJsonRpcErrorObject | null;
+  result?: object;
+  error?: IJsonRpcErrorObject;
 
   /**
    *

diff --git a/src/lib/moonraker/MoonrakerClient.ts b/src/lib/moonraker/MoonrakerClient.ts
@@ -10,6 +10,7 @@ import { HeaterBed } from './modules/HeaterBed';
 import { KlipperState } from './modules/KlipperState';
 import { MotionReport } from './modules/MotionReport';
 import { PrintStats } from './modules/PrintStats';
+import { QuadGantryLevel } from './modules/QuadGantryLevel';
 import { Toolhead } from './modules/Toolhead';
 import type { INotifyStatusUpdateParams } from './types/INotifyStatusUpdateParams';
 import type { IPrinterObjects } from './types/IPrinterObjects';
@@ -28,7 +29,8 @@ export class MoonrakerClient extends EventTarget {
       print_stats: ['filename', 'print_duration', 'filament_used', 'state', 'message', 'info'],
       display_status: ['progress', 'message'],
       motion_report: ['live_position', 'live_velocity', 'live_extruder_velocity'],
-      configfile: ['save_config_pending']
+      configfile: ['save_config_pending'],
+      quad_gantry_level: ['applied']
     }
   };
 
@@ -42,6 +44,7 @@ export class MoonrakerClient extends EventTarget {
   public displayStatus = new DisplayStatus();
   public motionReport = new MotionReport();
   public configFile = new ConfigFile();
+  public quadGantryLevel = new QuadGantryLevel();
 
   public constructor(jsonRpcClient: JsonRpcClient) {
     super();
@@ -156,6 +159,7 @@ export class MoonrakerClient extends EventTarget {
     this.parseDisplayStatus(param);
     this.parseMotionReport(param);
     this.parseConfigFile(param);
+    this.parseQuadGantryLevel(param);
   }
 
   private parseExtruder(param: INotifyStatusUpdateParams) {
@@ -300,10 +304,7 @@ export class MoonrakerClient extends EventTarget {
         this.displayStatus.Progress.set(display_status.progress);
       }
 
-      if (display_status.message !== undefined) {
-        // console.log('display_status.message: ', display_status?.message);
-        this.displayStatus.Message.set(display_status.message);
-      }
+      display_status.message !== null ? this.displayStatus.Message.set(display_status.message) : this.displayStatus.Message.set('');
     }
   }
 
@@ -371,6 +372,15 @@ export class MoonrakerClient extends EventTarget {
     }
   }
 
+  private parseQuadGantryLevel(param: INotifyStatusUpdateParams) {
+    const quadGantryLevel = param.quadGantryLevel;
+    if (quadGantryLevel !== undefined) {
+      if (quadGantryLevel.applied !== undefined) {
+        this.quadGantryLevel.Applied.set(quadGantryLevel.applied);
+      }
+    }
+  }
+
   private async parseNotification(event: CustomEvent<IJsonRpcRequest>): Promise<void> {
     const notification = event.detail;
     switch (notification.method) {

diff --git a/src/lib/moonraker/modules/QuadGantryLevel.ts b/src/lib/moonraker/modules/QuadGantryLevel.ts
@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+
+export class QuadGantryLevel {
+  public Applied = writable(false);
+}
diff --git a/src/lib/moonraker/types/INotifyStatusUpdateParams.ts b/src/lib/moonraker/types/INotifyStatusUpdateParams.ts
@@ -6,6 +6,7 @@ import type { IHeaterBed } from './IHeaterBed';
 import type { IMotionReport } from './IMotionReport';
 import type { IPrintStats } from './IPrintStats';
 import type { IProgress } from './IProgress';
+import type { IQuadGantryLevel } from './IQuadGantryLevel';
 import type { IToolhead } from './IToolhead';
 import type { IWebhooks } from './IWebhooks';
 
@@ -20,4 +21,5 @@ export interface INotifyStatusUpdateParams {
   display_status: IProgress;
   motion_report: IMotionReport;
   configfile: IConfigFile;
+  quadGantryLevel: IQuadGantryLevel
 }
diff --git a/src/lib/moonraker/types/IPrinterObjects.ts b/src/lib/moonraker/types/IPrinterObjects.ts
@@ -9,6 +9,7 @@ export interface IPrinterObjectsParams {
   display_status: ('progress' | 'message')[];
   motion_report: ('live_position' | 'live_velocity' | 'live_extruder_velocity')[];
   configfile: ('config' | 'settings' | 'save_config_pending')[];
+  quad_gantry_level: 'applied'[];
 }
 
 export interface IPrinterStatsInfo {

diff --git a/src/lib/moonraker/types/IQuadGantryLevel.ts b/src/lib/moonraker/types/IQuadGantryLevel.ts
@@ -0,0 +1,3 @@
+export interface IQuadGantryLevel {
+  applied: boolean;
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -4,6 +4,7 @@
   import { bootParams, client, moonraker } from '$lib/base.svelte';
   import { onMount } from 'svelte';
   import { getMatches } from '@tauri-apps/api/cli';
+  import { appWindow } from '@tauri-apps/api/window';
 
   onMount(async () => {
     let matches = await getMatches();
@@ -12,6 +13,7 @@
 
   let isConnected = client.isConnected;
   let klippyState = moonraker.klippyState.state;
+  let isFullscreen = bootParams.fullscreen;
 
   $: {
     if ($isConnected === false || $klippyState !== 'ready') {
@@ -21,6 +23,10 @@
       goto('/printstate');
     }
   }
+
+  $: {
+    appWindow.setFullscreen($isFullscreen);
+  }
 </script>
 
 <div class="flex h-screen w-screen">

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -25,27 +25,27 @@
           </tr>
           {#if $klippyState === 'disconnected'}
             <tr>
-              <td class="pr-2 text-end text-neutral-100">Klipper</td>
+              <td class="pr-2 text-end text-neutral-100">Klippy</td>
               <td class="text-purple-600">Disconnected</td>
             </tr>
           {:else if $klippyState === 'startup'}
             <tr>
-              <td class="pr-2 text-end text-neutral-100">Klipper</td>
+              <td class="pr-2 text-end text-neutral-100">Klippy</td>
               <td class="text-yellow-600">Startup</td>
             </tr>
           {:else if $klippyState === 'ready'}
             <tr>
-              <td class="pr-2 text-end text-neutral-100">Klipper</td>
+              <td class="pr-2 text-end text-neutral-100">Klippy</td>
               <td class="text-green-600">Ready</td>
             </tr>
           {:else if $klippyState === 'shutdown'}
             <tr>
-              <td class="pr-2 text-end text-neutral-100">Klipper</td>
+              <td class="pr-2 text-end text-neutral-100">Klippy</td>
               <td class="text-orange-600">Shutdown</td>
             </tr>
           {:else if $klippyState === 'error'}
             <tr>
-              <td class="pr-2 text-end text-neutral-100">Klipper</td>
+              <td class="pr-2 text-end text-neutral-100">Klippy</td>
               <td class="text-red-600">Error</td>
             </tr>
           {/if}
@@ -71,7 +71,7 @@
       {/if}
     </span>
   </div>
-  <div class="flex flex-col justify-around">
+  <div class="flex w-1/6 flex-col justify-around">
     {#if $isConnected}
       {#if $klippyState !== 'ready'}
         <button