feat: add basic PI to create command

elgatosf · Aug 14, 2024 · edf6831 · edf6831
1 parent 221650d
commit edf6831
Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/src/commands/create.ts b/src/commands/create.ts
@@ -228,6 +228,7 @@ async function renderTemplate(destination: string, pluginInfo: PluginInfo): Prom
 	await Promise.allSettled([
 		template.copy(".vscode"),
 		template.copy(`${TEMPLATE_PLUGIN_UUID}.sdPlugin/imgs`, `${pluginInfo.uuid}.sdPlugin/imgs`),
+		template.copy(`${TEMPLATE_PLUGIN_UUID}.sdPlugin/ui`, `${pluginInfo.uuid}.sdPlugin/ui`),
 		template.copy(`${TEMPLATE_PLUGIN_UUID}.sdPlugin/manifest.json.ejs`, `${pluginInfo.uuid}.sdPlugin/manifest.json`),
 		template.copy("src"),
 		template.copy("_.gitignore", ".gitignore"),

diff --git a/template/com.elgato.template.sdPlugin/manifest.json.ejs b/template/com.elgato.template.sdPlugin/manifest.json.ejs
@@ -8,6 +8,7 @@
 			"UUID": "<%- uuid %>.increment",
 			"Icon": "imgs/actions/counter/icon",
 			"Tooltip": "Displays a count, which increments by one on press.",
+			"PropertyInspectorPath": "ui/increment-counter.html",
 			"Controllers": [
 				"Keypad"
 			],

diff --git a/template/com.elgato.template.sdPlugin/ui/increment-counter.html b/template/com.elgato.template.sdPlugin/ui/increment-counter.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head lang="en">
+    <title>Increment Counter Settings</title>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/gh/geekyeggo/sdpi-components@v3/dist/sdpi-components.js"></script>
+</head>
+
+<body>
+    <!--
+        Learn more about property inspector components at https://sdpi-components.dev/docs/components
+    -->
+    <sdpi-item label="Increment By">
+        <sdpi-range setting="incrementBy" min="1" max="5" step="1" default="1" showlabels></sdpi-range>
+    </sdpi-item>
+</body>
+
+</html>
diff --git a/template/src/actions/increment-counter.ts.ejs b/template/src/actions/increment-counter.ts.ejs
@@ -6,7 +6,7 @@ import { action, KeyDownEvent, SingletonAction, WillAppearEvent } from "@elgato/
 @action({ UUID: "<%- uuid %>.increment" })
 export class IncrementCounter extends SingletonAction<CounterSettings> {
 	/**
-	 * The {@link SingletonAction.onWillAppear} event is useful for setting the visual representation of an action when it become visible. This could be due to the Stream Deck first
+	 * The {@link SingletonAction.onWillAppear} event is useful for setting the visual representation of an action when it becomes visible. This could be due to the Stream Deck first
 	 * starting up, or the user navigating between pages / folders etc.. There is also an inverse of this event in the form of {@link streamDeck.client.onWillDisappear}. In this example,
 	 * we're setting the title to the "count" that is incremented in {@link IncrementCounter.onKeyDown}.
 	 */
@@ -21,19 +21,21 @@ export class IncrementCounter extends SingletonAction<CounterSettings> {
 	 * settings using `setSettings` and `getSettings`.
 	 */
 	async onKeyDown(ev: KeyDownEvent<CounterSettings>): Promise<void> {
-		// Determine the current count from the settings.
-		let count = ev.payload.settings.count ?? 0;
-		count++;
+		// Update the count from the settings.
+		const { settings } = ev.payload;
+		settings.incrementBy ??= 1;
+		settings.count = (settings.count ?? 0) + settings.incrementBy;
 
 		// Update the current count in the action's settings, and change the title.
-		await ev.action.setSettings({ count });
-		await ev.action.setTitle(`${count}`);
+		await ev.action.setSettings(settings);
+		await ev.action.setTitle(`${settings.count}`);
 	}
 }
 
 /**
  * Settings for {@link IncrementCounter}.
  */
 type CounterSettings = {
-	count: number;
+	count?: number;
+	incrementBy?: number;
 };