summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/ConfigurationSection.tsx14
-rw-r--r--src/components/Content.tsx20
-rw-r--r--src/components/UsageInstructions.tsx145
-rw-r--r--src/components/WikiButton.tsx22
-rw-r--r--src/components/index.ts1
5 files changed, 139 insertions, 63 deletions
diff --git a/src/components/ConfigurationSection.tsx b/src/components/ConfigurationSection.tsx
index ee18e5b..34955f8 100644
--- a/src/components/ConfigurationSection.tsx
+++ b/src/components/ConfigurationSection.tsx
@@ -7,6 +7,7 @@ interface LsfgConfig {
hdr: boolean;
perfMode: boolean;
immediateMode: boolean;
+ disableVkbasalt: boolean;
}
interface ConfigurationSectionProps {
@@ -17,6 +18,7 @@ interface ConfigurationSectionProps {
onHdrChange: (value: boolean) => Promise<void>;
onPerfModeChange: (value: boolean) => Promise<void>;
onImmediateModeChange: (value: boolean) => Promise<void>;
+ onDisableVkbasaltChange: (value: boolean) => Promise<void>;
}
export function ConfigurationSection({
@@ -26,7 +28,8 @@ export function ConfigurationSection({
onFlowScaleChange,
onHdrChange,
onPerfModeChange,
- onImmediateModeChange
+ onImmediateModeChange,
+ onDisableVkbasaltChange
}: ConfigurationSectionProps) {
return (
<>
@@ -110,6 +113,15 @@ export function ConfigurationSection({
onChange={onImmediateModeChange}
/>
</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> */}
</>
);
}
diff --git a/src/components/Content.tsx b/src/components/Content.tsx
index cecb142..16c8f2f 100644
--- a/src/components/Content.tsx
+++ b/src/components/Content.tsx
@@ -36,32 +36,37 @@ export function Content() {
// Configuration change handlers
const handleEnableLsfgChange = async (value: boolean) => {
setters.setEnableLsfg(value);
- await updateConfig(value, config.multiplier, config.flowScale, config.hdr, config.perfMode, config.immediateMode);
+ await updateConfig(value, config.multiplier, config.flowScale, config.hdr, config.perfMode, config.immediateMode, config.disableVkbasalt);
};
const handleMultiplierChange = async (value: number) => {
setters.setMultiplier(value);
- await updateConfig(config.enableLsfg, value, config.flowScale, config.hdr, config.perfMode, config.immediateMode);
+ await updateConfig(config.enableLsfg, value, config.flowScale, config.hdr, config.perfMode, config.immediateMode, config.disableVkbasalt);
};
const handleFlowScaleChange = async (value: number) => {
setters.setFlowScale(value);
- await updateConfig(config.enableLsfg, config.multiplier, value, config.hdr, config.perfMode, config.immediateMode);
+ await updateConfig(config.enableLsfg, config.multiplier, value, config.hdr, config.perfMode, config.immediateMode, config.disableVkbasalt);
};
const handleHdrChange = async (value: boolean) => {
setters.setHdr(value);
- await updateConfig(config.enableLsfg, config.multiplier, config.flowScale, value, config.perfMode, config.immediateMode);
+ await updateConfig(config.enableLsfg, config.multiplier, config.flowScale, value, config.perfMode, config.immediateMode, config.disableVkbasalt);
};
const handlePerfModeChange = async (value: boolean) => {
setters.setPerfMode(value);
- await updateConfig(config.enableLsfg, config.multiplier, config.flowScale, config.hdr, value, config.immediateMode);
+ await updateConfig(config.enableLsfg, config.multiplier, config.flowScale, config.hdr, value, config.immediateMode, config.disableVkbasalt);
};
const handleImmediateModeChange = async (value: boolean) => {
setters.setImmediateMode(value);
- await updateConfig(config.enableLsfg, config.multiplier, config.flowScale, config.hdr, config.perfMode, value);
+ await updateConfig(config.enableLsfg, config.multiplier, config.flowScale, config.hdr, config.perfMode, value, config.disableVkbasalt);
+ };
+
+ const handleDisableVkbasaltChange = async (value: boolean) => {
+ setters.setDisableVkbasalt(value);
+ await updateConfig(config.enableLsfg, config.multiplier, config.flowScale, config.hdr, config.perfMode, config.immediateMode, value);
};
const onInstall = () => {
@@ -99,10 +104,11 @@ export function Content() {
onHdrChange={handleHdrChange}
onPerfModeChange={handlePerfModeChange}
onImmediateModeChange={handleImmediateModeChange}
+ onDisableVkbasaltChange={handleDisableVkbasaltChange}
/>
)}
- <UsageInstructions multiplier={config.multiplier} />
+ <UsageInstructions config={config} />
</PanelSection>
);
}
diff --git a/src/components/UsageInstructions.tsx b/src/components/UsageInstructions.tsx
index 712d4c1..ca9ddd2 100644
--- a/src/components/UsageInstructions.tsx
+++ b/src/components/UsageInstructions.tsx
@@ -1,68 +1,103 @@
import { PanelSectionRow } from "@decky/ui";
+import { WikiButton } from "./WikiButton";
-interface UsageInstructionsProps {
+interface ConfigType {
+ enableLsfg: boolean;
multiplier: number;
+ flowScale: number;
+ hdr: boolean;
+ perfMode: boolean;
+ immediateMode: boolean;
+ disableVkbasalt: boolean;
+}
+
+interface UsageInstructionsProps {
+ config: ConfigType;
}
-export function UsageInstructions({ multiplier }: UsageInstructionsProps) {
+export function UsageInstructions({ config }: UsageInstructionsProps) {
+ // Build manual environment variables string based on current config
+ const buildManualEnvVars = (): string => {
+ const envVars: string[] = [];
+
+ if (config.enableLsfg) {
+ envVars.push("ENABLE_LSFG=1");
+ }
+
+ // Always include multiplier and flow_scale if LSFG is enabled, as they have defaults
+ if (config.enableLsfg) {
+ envVars.push(`LSFG_MULTIPLIER=${config.multiplier}`);
+ envVars.push(`LSFG_FLOW_SCALE=${config.flowScale}`);
+ }
+
+ if (config.hdr) {
+ envVars.push("LSFG_HDR=1");
+ }
+
+ if (config.perfMode) {
+ envVars.push("LSFG_PERF_MODE=1");
+ }
+
+ if (config.immediateMode) {
+ envVars.push("MESA_VK_WSI_PRESENT_MODE=immediate");
+ }
+
+ if (config.disableVkbasalt) {
+ envVars.push("DISABLE_VKBASALT=1");
+ }
+
+ return envVars.length > 0 ? `${envVars.join(" ")} %command%` : "%command%";
+ };
+
return (
- <PanelSectionRow>
- <div
- style={{
- fontSize: "13px",
- marginTop: "12px",
- padding: "8px",
- backgroundColor: "rgba(255, 255, 255, 0.05)",
- borderRadius: "4px"
- }}
- >
- <div style={{ fontWeight: "bold", marginBottom: "6px" }}>
- Usage Instructions:
- </div>
- <div style={{ marginBottom: "4px" }}>
- Option 1: Use the lsfg script (recommended):
- </div>
+ <>
+ <PanelSectionRow>
<div
style={{
- fontFamily: "monospace",
- backgroundColor: "rgba(0, 0, 0, 0.3)",
- padding: "4px",
- borderRadius: "2px",
- fontSize: "12px",
- marginBottom: "6px"
+ fontSize: "13px",
+ marginTop: "12px",
+ padding: "8px",
+ backgroundColor: "rgba(255, 255, 255, 0.05)",
+ borderRadius: "4px"
}}
>
- ~/lsfg %COMMAND%
- </div>
- <div style={{ marginBottom: "4px" }}>
- Option 2: Manual environment variables:
+ <div style={{ fontWeight: "bold", marginBottom: "6px" }}>
+ Usage Instructions:
+ </div>
+ <div style={{ marginBottom: "4px" }}>
+ Option 1: Use the lsfg script (recommended):
+ </div>
+ <div
+ style={{
+ fontFamily: "monospace",
+ backgroundColor: "rgba(0, 0, 0, 0.3)",
+ padding: "4px",
+ borderRadius: "2px",
+ fontSize: "12px",
+ marginBottom: "6px"
+ }}
+ >
+ ~/lsfg %command%
+ </div>
+ <div style={{ marginBottom: "4px" }}>
+ Option 2: Manual environment variables:
+ </div>
+ <div
+ style={{
+ fontFamily: "monospace",
+ backgroundColor: "rgba(0, 0, 0, 0.3)",
+ padding: "4px",
+ borderRadius: "2px",
+ fontSize: "12px",
+ marginBottom: "6px"
+ }}
+ >
+ {buildManualEnvVars()}
+ </div>
</div>
- <div
- style={{
- fontFamily: "monospace",
- backgroundColor: "rgba(0, 0, 0, 0.3)",
- padding: "4px",
- borderRadius: "2px",
- fontSize: "12px",
- marginBottom: "6px"
- }}
- >
- ENABLE_LSFG=1 LSFG_MULTIPLIER={multiplier} %COMMAND%
- </div>
- <div style={{ fontSize: "11px", opacity: 0.8 }}>
- The lsfg script uses your current configuration settings.
- <br />
- • ENABLE_LSFG=1 - Enables frame generation
- <br />
- • LSFG_MULTIPLIER=2-4 - FPS multiplier (start with 2)
- <br />
- • LSFG_FLOW_SCALE=0.25-1.0 - Flow scale (for performance)
- <br />
- • LSFG_HDR=1 - HDR mode (only if using HDR)
- <br />
- • MESA_VK_WSI_PRESENT_MODE=immediate - Disable vsync
- </div>
- </div>
- </PanelSectionRow>
+ </PanelSectionRow>
+
+ <WikiButton />
+ </>
);
}
diff --git a/src/components/WikiButton.tsx b/src/components/WikiButton.tsx
new file mode 100644
index 0000000..80ff1d9
--- /dev/null
+++ b/src/components/WikiButton.tsx
@@ -0,0 +1,22 @@
+import { PanelSectionRow, ButtonItem } from "@decky/ui";
+import { FaExternalLinkAlt } from "react-icons/fa";
+
+export function WikiButton() {
+ const handleWikiClick = () => {
+ window.open("https://github.com/PancakeTAS/lsfg-vk/wiki", "_blank");
+ };
+
+ return (
+ <PanelSectionRow>
+ <ButtonItem
+ layout="below"
+ onClick={handleWikiClick}
+ >
+ <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+ <FaExternalLinkAlt />
+ <div>LSFG-VK Wiki</div>
+ </div>
+ </ButtonItem>
+ </PanelSectionRow>
+ );
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 77f11d4..26eb2fb 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,3 +3,4 @@ export { StatusDisplay } from "./StatusDisplay";
export { InstallationButton } from "./InstallationButton";
export { ConfigurationSection } from "./ConfigurationSection";
export { UsageInstructions } from "./UsageInstructions";
+export { WikiButton } from "./WikiButton";
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-16 22:02:19 +0000