1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
import { PanelSectionRow, ToggleField, SliderField } from "@decky/ui";
interface LsfgConfig {
enableLsfg: boolean;
multiplier: number;
flowScale: number;
hdr: boolean;
perfMode: boolean;
immediateMode: boolean;
disableVkbasalt: boolean;
frameCap: number;
}
interface ConfigurationSectionProps {
config: LsfgConfig;
onEnableLsfgChange: (value: boolean) => Promise<void>;
onMultiplierChange: (value: number) => Promise<void>;
onFlowScaleChange: (value: number) => Promise<void>;
onHdrChange: (value: boolean) => Promise<void>;
onPerfModeChange: (value: boolean) => Promise<void>;
onImmediateModeChange: (value: boolean) => Promise<void>;
onDisableVkbasaltChange: (value: boolean) => Promise<void>;
onFrameCapChange: (value: number) => Promise<void>;
}
export function ConfigurationSection({
config,
onEnableLsfgChange,
onMultiplierChange,
onFlowScaleChange,
onHdrChange,
onPerfModeChange,
onImmediateModeChange,
onDisableVkbasaltChange,
onFrameCapChange
}: ConfigurationSectionProps) {
return (
<>
<PanelSectionRow>
<div
style={{
fontSize: "14px",
fontWeight: "bold",
marginTop: "16px",
marginBottom: "8px",
borderBottom: "1px solid rgba(255, 255, 255, 0.2)",
paddingBottom: "4px"
}}
>
LSFG Configuration
</div>
</PanelSectionRow>
<PanelSectionRow>
<ToggleField
label="Enable LSFG"
description="Enables the frame generation layer"
checked={config.enableLsfg}
onChange={onEnableLsfgChange}
/>
</PanelSectionRow>
<PanelSectionRow>
<SliderField
label="FPS Multiplier"
description="Traditional FPS multiplier value"
value={config.multiplier}
min={2}
max={4}
step={1}
notchCount={3}
notchLabels={[
{ notchIndex: 0, label: "2X" },
{ notchIndex: 1, label: "3X" },
{ notchIndex: 2, label: "4X" }
]}
onChange={onMultiplierChange}
/>
</PanelSectionRow>
<PanelSectionRow>
<SliderField
label={`Flow Scale ${Math.round(config.flowScale * 100)}%`}
description="Lowers the internal motion estimation resolution"
value={config.flowScale}
min={0.25}
max={1.0}
step={0.01}
onChange={onFlowScaleChange}
/>
</PanelSectionRow>
<PanelSectionRow>
<ToggleField
label="HDR Mode"
description="Enable HDR mode (only if Game supports HDR)"
checked={config.hdr}
onChange={onHdrChange}
/>
</PanelSectionRow>
<PanelSectionRow>
<ToggleField
label="Performance Mode"
description="Use lighter model for FG"
checked={config.perfMode}
onChange={onPerfModeChange}
/>
</PanelSectionRow>
<PanelSectionRow>
<ToggleField
label="Immediate Mode"
description="Reduce input lag (Experimental, will cause issues in many games)"
checked={config.immediateMode}
onChange={onImmediateModeChange}
/>
</PanelSectionRow>
<PanelSectionRow>
<SliderField
label={`Game Frame Cap ${config.frameCap === 0 ? "(Disabled)" : `(${config.frameCap} FPS)`}`}
description="Limit frame rate using DXVK_FRAME_RATE (0 = disabled)"
value={config.frameCap}
min={0}
max={60}
step={5}
notchCount={7}
notchLabels={[
{ notchIndex: 0, label: "Off" },
{ notchIndex: 1, label: "10" },
{ notchIndex: 2, label: "20" },
{ notchIndex: 3, label: "30" },
{ notchIndex: 4, label: "40" },
{ notchIndex: 5, label: "50" },
{ notchIndex: 6, label: "60" }
]}
onChange={onFrameCapChange}
/>
</PanelSectionRow>
{/* <PanelSectionRow>
<ToggleField
label="Disable vkbasalt"
description="Some plugins add vkbasalt layer, which can break lsfg. Toggling on fixes this"
checked={config.disableVkbasalt}
onChange={onDisableVkbasaltChange}
/>
</PanelSectionRow> */}
</>
);
}
|
