From 83eaf34475fde03c5a40bdc40e99ea3854c24843 Mon Sep 17 00:00:00 2001
From: E44 <129310925+programmer-44@users.noreply.github.com>
Date: Sun, 18 Jan 2026 17:34:57 +0100
Subject: [PATCH] chore(control): add settings with screenshot preview settings

---
 .../lib/components/NumberSettingInput.svelte  |  66 ++++++++++++
 .../frontend/src/lib/ts/stores/displays.ts    |  13 ++-
 .../frontend/src/lib/ts/stores/ui_behavior.ts |  25 +++++
 control/frontend/src/lib/ts/types.ts          |   7 ++
 control/frontend/src/routes/+page.svelte      | 100 +++++++++++++++++-
 5 files changed, 203 insertions(+), 8 deletions(-)
 create mode 100644 control/frontend/src/lib/components/NumberSettingInput.svelte

diff --git a/control/frontend/src/lib/components/NumberSettingInput.svelte b/control/frontend/src/lib/components/NumberSettingInput.svelte
new file mode 100644
index 0000000..70c0213
--- /dev/null
+++ b/control/frontend/src/lib/components/NumberSettingInput.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { NumberSetting } from '$lib/ts/types';
+	import { ChevronDown, ChevronUp, Minus, Plus } from 'lucide-svelte';
+	import Button from './Button.svelte';
+
+	let {
+		number_setting,
+		on_change,
+		className = '',
+        disabled = false,
+	}: {
+		number_setting: NumberSetting;
+		on_change: (new_value: number) => void;
+		className?: string;
+        disabled?: boolean;
+	} = $props();
+
+	let el: HTMLInputElement | null = null;
+
+	function increase() {
+        if (!el) return;
+		el.stepUp();
+		el.dispatchEvent(new Event('input', { bubbles: true }));
+		on_change(Number(el.value));
+	}
+
+	function decrease() {
+        if (!el) return;
+		el.stepDown();
+		el.dispatchEvent(new Event('input', { bubbles: true }));
+        on_change(Number(el.value));
+	}
+
+    function on_blur() {
+        if (!el) return;
+        let value = Number(el.value);
+        if (value > number_setting.max) value = number_setting.max;
+        else if (value < number_setting.min) value = number_setting.min;
+        el.value = String(value);
+        on_change(value);
+    }
+</script>
+
+<div class="flex flex-row {className}">
+	<Button click_function={increase} className="rounded-r-none" disabled={disabled}>
+        <ChevronUp />
+    </Button>
+	<input
+        bind:this={el}
+		class="bg-stone-700 focus:bg-stone-550 focus:outline-none transition-colors duration-200 py-2 px-4 w-15 text-center
+        {disabled ? 'text-stone-500 cursor-not-allowed' : 'hover:bg-stone-600'}
+        [appearance:textfield]
+        [&::-webkit-outer-spin-button]:appearance-none
+        [&::-webkit-inner-spin-button]:appearance-none"
+		type="number"
+        disabled={disabled}
+		max={number_setting.max}
+		min={number_setting.min}
+		value={number_setting.now}
+		step={number_setting.step}
+        onblur={on_blur}
+	/>
+    <Button click_function={decrease} className="rounded-l-none" disabled={disabled}>
+        <ChevronDown />
+    </Button>
+</div>
diff --git a/control/frontend/src/lib/ts/stores/displays.ts b/control/frontend/src/lib/ts/stores/displays.ts
index 6cb1544..14c1835 100755
--- a/control/frontend/src/lib/ts/stores/displays.ts
+++ b/control/frontend/src/lib/ts/stores/displays.ts
@@ -13,6 +13,7 @@ import { delete_and_deselect_unique_files_from_display } from './files';
 import { db } from '../database';
 import { dev } from '$app/environment';
 import { remove_display_from_loading_displays } from '../main';
+import { preview_settings } from './ui_behavior';
 
 export const local_displays: Writable<DisplayIdGroup[]> = writable<DisplayIdGroup[]>([]);
 
@@ -117,7 +118,13 @@ export async function get_display_by_id(display_id: string): Promise<Display | n
 	return (await db.displays.get(display_id)) ?? null;
 }
 
-export async function screenshot_loop(display_id: string, initial_retry_count: number = 5) {
+export async function screenshot_loop(display_id: string) {
+	const settings = get(preview_settings);
+	if (settings.mode === 'never') return;
+
+	const initial_retry_count = settings.retry_count.now;
+	const retry_seconds = get(preview_settings).retry_seconds.now;
+
 	const display = await db.displays.get(display_id);
 	if (!display || display.preview.currently_updating) return;
 
@@ -128,7 +135,7 @@ export async function screenshot_loop(display_id: string, initial_retry_count: n
 
 	let retry_count = initial_retry_count;
 	while (retry_count > 0) {
-		retry_count -= 1;
+		if (settings.mode !== 'always') retry_count -= 1;
 
 		const new_blob = await get_screenshot(display.ip);
 		if (!new_blob) {
@@ -149,7 +156,7 @@ export async function screenshot_loop(display_id: string, initial_retry_count: n
 			retry_count = initial_retry_count;
 		}
 
-		await new Promise((resolve) => setTimeout(resolve, 2000)); // sleep 2s
+		await new Promise((resolve) => setTimeout(resolve, retry_seconds * 1000)); // sleep
 	}
 
 	display.preview.currently_updating = false;
diff --git a/control/frontend/src/lib/ts/stores/ui_behavior.ts b/control/frontend/src/lib/ts/stores/ui_behavior.ts
index 3712f77..8ad84c7 100644
--- a/control/frontend/src/lib/ts/stores/ui_behavior.ts
+++ b/control/frontend/src/lib/ts/stores/ui_behavior.ts
@@ -1,4 +1,5 @@
 import { writable, type Writable } from 'svelte/store';
+import type { NumberSetting } from '../types';
 
 export const dnd_flip_duration_ms = 300;
 
@@ -23,6 +24,30 @@ export const current_height: Writable<Record<string, number>> = writable<Record<
 export const is_group_drag: Writable<boolean> = writable<boolean>(false);
 export const is_display_drag: Writable<boolean> = writable<boolean>(false);
 
+export const preview_settings: Writable<{
+	mode: 'never' | 'normal' | 'always';
+	retry_seconds: NumberSetting;
+	retry_count: NumberSetting;
+}> = writable<{
+	mode: 'never' | 'normal' | 'always';
+	retry_seconds: NumberSetting;
+	retry_count: NumberSetting;
+}>({
+	mode: 'normal',
+	retry_seconds: {
+		max: 10,
+		min: 0.5,
+		now: 2,
+		step: 0.5
+	},
+	retry_count: {
+		max: 10,
+		min: 1,
+		now: 5,
+		step: 1
+	}
+});
+
 export const pinned_display_id: Writable<string | null> = writable<string | null>(null);
 
 export function change_height(key: 'display' | 'file', factor: number) {
diff --git a/control/frontend/src/lib/ts/types.ts b/control/frontend/src/lib/ts/types.ts
index 336e762..dca3aaf 100755
--- a/control/frontend/src/lib/ts/types.ts
+++ b/control/frontend/src/lib/ts/types.ts
@@ -141,6 +141,13 @@ export type PopupContent = {
 	closable?: boolean;
 };
 
+export type NumberSetting = {
+	max: number,
+	min: number,
+	now: number,
+	step: number
+}
+
 export type DisplayStatus = 'host_offline' | 'app_offline' | 'app_online' | null;
 
 export function to_display_status(value: string): DisplayStatus {
diff --git a/control/frontend/src/routes/+page.svelte b/control/frontend/src/routes/+page.svelte
index 322dc27..78326ce 100644
--- a/control/frontend/src/routes/+page.svelte
+++ b/control/frontend/src/routes/+page.svelte
@@ -1,5 +1,18 @@
 <script lang="ts">
-	import { Monitor, Plus, Radio, Trash2, Menu, Info } from 'lucide-svelte';
+	import {
+		Monitor,
+		Plus,
+		Radio,
+		Settings,
+		Trash2,
+		Menu,
+		ChevronDown,
+		icons,
+		SquareCheckBig,
+		Square,
+		X,
+		Info
+	} from 'lucide-svelte';
 	import Button from '$lib/components/Button.svelte';
 	import FileView from './FileView.svelte';
 	import ControlView from './ControlView.svelte';
@@ -20,6 +33,8 @@
 	import { on_app_start, update_display_status } from '$lib/ts/main';
 	import { display_status_to_info } from '$lib/ts/utils';
 	import HighlightedText from '$lib/components/HighlightedText.svelte';
+	import { preview_settings } from '$lib/ts/stores/ui_behavior';
+	import NumberSettingInput from '$lib/components/NumberSettingInput.svelte';
 
 	const ip_regex =
 		/^(?:(?:10|127)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)|192\.168\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)|172\.(?:1[6-9]|2\d|3[0-1])\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d))$/;
@@ -67,6 +82,17 @@
 		}
 	}
 
+	function get_display_preview_mode(mode: 'never' | 'normal' | 'always') {
+		switch (mode) {
+			case 'never':
+				return 'Nie';
+			case 'normal':
+				return 'Normal';
+			case 'always':
+				return 'Dauerhaft';
+		}
+	}
+
 	function popup_close_function() {
 		popup_content.open = false;
 	}
@@ -84,6 +110,18 @@
 		};
 	};
 
+	const show_settings_popup = () => {
+		popup_content = {
+			open: true,
+			snippet: settings_popup,
+			title: 'Einstellungen',
+			title_icon: Settings,
+			title_class: '!text-xl',
+			window_class: 'w-3xl',
+			closable: true
+		};
+	};
+
 	const show_remove_display_popup = async (display_id: string) => {
 		remove_display_name = (await get_display_by_id(display_id))?.name || '?';
 		popup_content = {
@@ -167,10 +205,9 @@
 			<li><a target="_blank" href="https://echo.labstack.com/" class="link">Echo</a></li>
 			<li><a target="_blank" href="https://github.com/mdlayher/wol" class="link">wol</a></li>
 		</ul>
-
-		<div class="flex justify-end pt-2">
-			<Button click_function={popup_close_function} className="px-4">Schließen</Button>
-		</div>
+	</div>
+	<div class="flex justify-end pt-2">
+		<Button click_function={popup_close_function} className="px-4">Schließen</Button>
 	</div>
 {/snippet}
 
@@ -280,6 +317,54 @@
 	</div>
 {/snippet}
 
+{#snippet settings_popup()}
+	<div class="flex flex-col gap-2 pl-1">
+		<span class="font-bold text-lg">Vorschau-Verhalten</span>
+		<div class="flex flex-col gap-2 ml-2">
+			<span class="text-stone-400 text-sm max-w-prose"
+				>Die Vorschau eines Bildschirms ist das Bild, welches links neben dem Display-Namen zu sehen
+				ist. Es zeigt relativ aktuell das an, was auf dem jeweiligen Bildschirm zu sehen ist.</span
+			>
+			<div class="flex flex-row justify-between items-center">
+				<span>Aktualisierungs-Verhalten</span>
+				<Button
+					className="gap-3 pl-4 pr-3 w-35"
+					menu_options={(['never', 'normal', 'always'] as const).map((mode) => ({
+						icon: mode === $preview_settings.mode ? SquareCheckBig : Square,
+						name: get_display_preview_mode(mode),
+						on_select: () => {
+							$preview_settings.mode = mode;
+						}
+					}))}>{get_display_preview_mode($preview_settings.mode)} <ChevronDown /></Button
+				>
+			</div>
+			<div class="flex flex-row justify-between items-center">
+				<span>Intervall zwischen den Aktualisierungs-Anfragen</span>
+				<NumberSettingInput
+					disabled={$preview_settings.mode === 'never'}
+					number_setting={$preview_settings.retry_seconds}
+					on_change={(new_value: number) => {
+						$preview_settings.retry_seconds.now = new_value;
+					}}
+				/>
+			</div>
+			<div class="flex flex-row justify-between items-center max-w-full gap-8">
+				<span class="">Anzahl der änderungslosen Aktualisierungen bis pausiert wird</span>
+				<NumberSettingInput
+					disabled={$preview_settings.mode !== 'normal'}
+					number_setting={$preview_settings.retry_count}
+					on_change={(new_value: number) => {
+						$preview_settings.retry_count.now = new_value;
+					}}
+				/>
+			</div>
+		</div>
+	</div>
+	<div class="flex justify-end pt-4">
+		<Button click_function={popup_close_function} className="px-4">Schließen</Button>
+	</div>
+{/snippet}
+
 <main class="bg-stone-900 h-dvh w-dvw text-stone-200 px-4 py-2 gap-2 grid grid-rows-[3rem_auto]">
 	<div class="w-[calc(100dvw-(8*var(--spacing)))] flex justify-between">
 		<span class="text-4xl font-bold content-center pl-1"> PLG MuDiCS </span>
@@ -292,6 +377,11 @@
 					name: 'Neuen Bildschirm hinzufügen',
 					on_select: show_new_display_popup
 				},
+				{
+					icon: Settings,
+					name: 'Einstellungen',
+					on_select: show_settings_popup
+				},
 				{
 					icon: Info,
 					name: 'Über',