Merge pull request #23 from rzfzr/master

Adding scaling option
KevinVandy · Mar 15, 2024 · 6ff228e · 6ff228e
2 parents 4522d8c + 75303f4
commit 6ff228e
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 2 deletions.
diff --git a/src/lib/components/MonitorOptions.svelte b/src/lib/components/MonitorOptions.svelte
@@ -25,6 +25,7 @@
 	import MonitorSearch from './MonitorSearch.svelte';
 	import MonitorNotesField from './fields/MonitorNotesField.svelte';
 	import MonitorSwapButtons from './MonitorSwapButtons.svelte';
+	import ScalingValueField from './fields/ScalingValueField.svelte';
 
 	export let monitor: IMonitor;
 	export let advancedOptionsOpen: boolean;
@@ -83,6 +84,7 @@
 					</div>
 					<div class="options-grid-1">
 						<ProductLinkField {monitor} />
+						<ScalingValueField {monitor} />
 					</div>
 					<MonitorNotesField {monitor} />
 					<PortFields {monitor} />

diff --git a/src/lib/components/MonitorStats.svelte b/src/lib/components/MonitorStats.svelte
@@ -9,8 +9,8 @@
 		$inputUnits === 'Imperial' && $statUnits === 'Metric'
 			? 2.54
 			: $inputUnits === 'Metric' && $statUnits === 'Imperial'
-			? 1 / 2.54
-			: 1;
+			  ? 1 / 2.54
+			  : 1;
 
 	$: diagonal = convert * monitor.diagonal;
 	$: bezelWidth = $statUnits === 'Metric' ? 2.54 * monitor.bezelWidth : monitor.bezelWidth;
@@ -40,10 +40,35 @@
 			<Cell>Resolution</Cell>
 			<Cell numeric>{monitor.resolution.horizontal} x {monitor.resolution.vertical}</Cell>
 		</Row>
+
+		{#if monitor.scalingValue != 100}
+			<Row>
+				<Cell>Scaled Resolution</Cell>
+				<Cell numeric
+					>{(monitor.resolution.horizontal / monitor.scalingValue) * 100} x {(monitor.resolution
+						.vertical /
+						monitor.scalingValue) *
+						100}</Cell
+				>
+			</Row>
+		{/if}
 		<Row>
 			<Cell>Number Pixels</Cell>
 			<Cell numeric>{numPixels.toLocaleString()}</Cell>
 		</Row>
+		{#if monitor.scalingValue != 100}
+			<Row>
+				<Cell>Scaled Pixels</Cell>
+				<Cell numeric
+					>{(
+						(monitor.resolution.horizontal / monitor.scalingValue) *
+						100 *
+						(monitor.resolution.vertical / monitor.scalingValue) *
+						100
+					).toLocaleString()}</Cell
+				>
+			</Row>
+		{/if}
 		<Row>
 			<Cell>Refresh Rate</Cell>
 			<Cell numeric>{monitor.refreshRate} Hz</Cell>
@@ -58,6 +83,16 @@
 			>
 			<Cell numeric>{ppi.toFixed(1)}</Cell>
 		</Row>
+		{#if monitor.scalingValue != 100}
+			<Row>
+				<Cell
+					>{$statUnits === 'Metric'
+						? 'Scaled Pixels Per Centimeter (PPCM)'
+						: 'Scaled Pixels Per Inch (PPI)'}</Cell
+				>
+				<Cell numeric>{((ppi / monitor.scalingValue) * 100).toFixed(1)}</Cell>
+			</Row>
+		{/if}
 		<Row>
 			<Cell>Screen Diagonal</Cell>
 			<Cell numeric>{diagonal.toFixed(1)}{$statUnits === 'Metric' ? ' cm' : '"'}</Cell>

diff --git a/src/lib/components/fields/ScalingValueField.svelte b/src/lib/components/fields/ScalingValueField.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import Select, { Option } from '@smui/select';
+	import type { IMonitor } from '$lib/utils/interfaces';
+	import { monitors } from '$lib/stores/SetupStore';
+
+	export let monitor: IMonitor;
+</script>
+
+<Select
+	bind:value={monitor.scalingValue}
+	label="Scaling Value"
+	input$name={`scalingValue${monitor.index}`}
+	on:MDCSelect:change={() => monitors.set($monitors)}
+	variant="filled"
+>
+	{#each [100, 125, 150, 175, 200, 225, 250, 275, 300] as value}
+		<Option {value}>{value}%</Option>
+	{/each}
+</Select>
diff --git a/src/lib/utils/defaultSetup.ts b/src/lib/utils/defaultSetup.ts
@@ -40,6 +40,7 @@ const defaultSetup: ISetup = {
 			},
 			previewMode: 'wallpaper',
 			productLink: '',
+			scalingValue: 100,
 			refreshRate: 60,
 			resolution: { standard: 'FHD', horizontal: 1920, vertical: 1080 },
 			responseTime: null,

diff --git a/src/lib/utils/interfaces.ts b/src/lib/utils/interfaces.ts
@@ -40,6 +40,7 @@ export interface IMonitor {
 	ports: IPorts;
 	previewMode: string;
 	productLink: string | null;
+	scalingValue: 100 | 125 | 150 | 175 | 200 | 225 | 250 | 275 | 300;
 	refreshRate: number;
 	resolution: IResolution;
 	responseTime: number | null;