puppet opacity

src/lib/bindings.ts

@@ -149,7 +149,7 @@ export type PuppetStatesChanged = { puppets: PuppetState[] }
 export type Remote = { id: string; address: string; name: string | null; port: number | null }
 export type RemoteInput = { address: string; name: string | null; port: number | null }
 export type RemotesChanged = { remotes: Remote[] }
-export type SceneConfiguration = { puppetScale: number }
+export type SceneConfiguration = { puppetScale: number; puppetOpacity: number }
 export type SceneConfigurationChanged = { configuration: SceneConfiguration }
 export type SceneHitbox = { x: number; y: number; width: number; height: number }
 /**

src/lib/components/control-panel/scene-panel.svelte

@@ -11,24 +11,31 @@
   let { register }: { register: RegisterPanel } = $props();
 
   let puppetScale = $state(1);
+  let puppetOpacity = $state(1);
   let dirty = $state(false);
   let busy = $state(false);
   let error = $state("");
 
   $effect(() => {
-    if (!dirty) puppetScale = $sceneConfiguration.puppetScale;
+    if (!dirty) {
+      puppetScale = $sceneConfiguration.puppetScale;
+      puppetOpacity = $sceneConfiguration.puppetOpacity;
+    }
     register("scene", { apply, reset }, { dirty, busy });
   });
 
   onMount(() => register("scene", { apply, reset }, { dirty, busy }));
 
   function updateDirty() {
-    dirty = puppetScale !== $sceneConfiguration.puppetScale;
+    dirty =
+      puppetScale !== $sceneConfiguration.puppetScale ||
+      puppetOpacity !== $sceneConfiguration.puppetOpacity;
     error = "";
   }
 
   function reset() {
     puppetScale = $sceneConfiguration.puppetScale;
+    puppetOpacity = $sceneConfiguration.puppetOpacity;
     dirty = false;
     error = "";
   }
@@ -41,8 +48,10 @@
     try {
       const configuration = await commands.updateSceneConfiguration({
         puppetScale,
+        puppetOpacity,
       });
       puppetScale = configuration.puppetScale;
+      puppetOpacity = configuration.puppetOpacity;
       dirty = false;
       return true;
     } catch (cause) {
@@ -82,5 +91,24 @@
       disabled={busy}
       aria-describedby="puppet-scale-help"
     />
+
+    <div class="mt-3 flex items-center justify-between gap-3">
+      <label class="fieldset-label" for="puppet-opacity">Opacity</label>
+      <output class="badge badge-outline tabular-nums" for="puppet-opacity">
+        {Math.round(puppetOpacity * 100)}%
+      </output>
+    </div>
+    <input
+      id="puppet-opacity"
+      class="range range-sm"
+      type="range"
+      min="0.25"
+      max="1"
+      step="0.05"
+      bind:value={puppetOpacity}
+      oninput={updateDirty}
+      disabled={busy}
+      aria-describedby="puppet-opacity-help"
+    />
   </fieldset>
 </div>

src/lib/listeners/scene-configuration.ts

@@ -7,6 +7,7 @@ import {
 
 export const sceneConfiguration = writable<SceneConfiguration>({
   puppetScale: 1,
+  puppetOpacity: 1,
 });
 export const sceneConfigurationListenerError = writable("");