summaryrefslogtreecommitdiff
path: root/src/components/UsageInstructions.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/UsageInstructions.tsx')
-rw-r--r--src/components/UsageInstructions.tsx68
1 files changed, 68 insertions, 0 deletions
diff --git a/src/components/UsageInstructions.tsx b/src/components/UsageInstructions.tsx
new file mode 100644
index 0000000..712d4c1
--- /dev/null
+++ b/src/components/UsageInstructions.tsx
@@ -0,0 +1,68 @@
+import { PanelSectionRow } from "@decky/ui";
+
+interface UsageInstructionsProps {
+ multiplier: number;
+}
+
+export function UsageInstructions({ multiplier }: UsageInstructionsProps) {
+ 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>
+ <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"
+ }}
+ >
+ 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>
+ );
+}