v1.0.7 - Add ability to display current volume on Volume Set key.

docBliny · Aug 8, 2020 · bc35d32 · bc35d32
1 parent 992ee90
commit bc35d32
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,19 @@
 # Changelog
 
+## [1.0.7] - 2020-08-07
+- Fix issues when waking up from sleep where dynamically rendered images may cause buttons to fail to work.
+
+## [1.0.6] - 2020-08-04
+- Add ability to show current volume on volume set button
+
+### Changed
+
 ## [1.0.5] - 2020-06-27
 
 ### Changed
 - Fixed race condition in cover art rendering
-* Fixed an issue causing the cover art to not always be rendered
-* Fixed an issue causing the Play button to not update correctly
-* Fixed issue where previous cover art was not removed if the next track didn't have cover art available
-* Fixed an issue when adding buttons and the default zone wasn't set
-* Added ability to reconnect to Roon Core by pressing any key when disconnected
+- Fixed an issue causing the cover art to not always be rendered
+- Fixed an issue causing the Play button to not update correctly
+- Fixed issue where previous cover art was not removed if the next track didn't have cover art available
+- Fixed an issue when adding buttons and the default zone wasn't set
+- Added ability to reconnect to Roon Core by pressing any key when disconnected
diff --git a/Sources/manifest.json b/Sources/manifest.json
@@ -257,7 +257,7 @@
   "CategoryIcon": "plug-in/images/roon-category",
   "PropertyInspectorPath": "property-inspector/index.html",
   "URL": "https://bliny.net/streamdeck-roon/",
-  "Version": "1.0.5",
+  "Version": "1.0.7",
   "OS": [
     {
         "Platform": "mac",

diff --git a/Sources/plug-in/js/Actions/PlayActionBase.js b/Sources/plug-in/js/Actions/PlayActionBase.js
@@ -26,12 +26,13 @@ export default class PlayActionBase extends ActionBase {
         width: 144,
         height: 144,
       };
+
+      // Trigger image updates based on this Action's custom settings once base image is ready
+      this.showCoverArt = config && config.settings && config.settings.showCoverArt;
+      this.showSeekPosition = config && config.settings && config.settings.showSeekPosition;
     };
-    defaultPlayImage.src = PlayImage;
 
-    // Trigger image updates based on this Action's custom settings
-    this.showCoverArt = config && config.settings && config.settings.showCoverArt;
-    this.showSeekPosition = config && config.settings && config.settings.showSeekPosition;
+    defaultPlayImage.src = PlayImage;
   }
 
   // ********************************************

diff --git a/Sources/plug-in/js/Actions/VolumeSetAction.js b/Sources/plug-in/js/Actions/VolumeSetAction.js
@@ -1,6 +1,7 @@
 import ActionBase from "./ActionBase";
 import debug from "debug";
 import { VolumeSetDisabled } from "../DataImages/volume-set-key-disabled";
+import { VolumeSetImage } from "../DataImages/volume-set-key";
 
 const ACTION_NAME = "volume-set";
 const ACTION_UUID = `net.bliny.roon.${ACTION_NAME}`;
@@ -15,6 +16,21 @@ export default class VolumeSetAction extends ActionBase {
     super(config);
 
     log("ctor");
+
+    // Create image data objects for default images
+    const defaultVolumeImage = new Image();
+    defaultVolumeImage.onload = () => {
+      this._defaultVolumeImageData = {
+        image: defaultVolumeImage,
+        width: 144,
+        height: 144,
+      };
+
+      // Trigger image updates based on this Action's custom settings once base image is ready
+      this.showCoverArt = config && config.settings && config.settings.showCoverArt;
+      this.showCurrentVolume = config && config.settings && config.settings.showCurrentVolume;
+    };
+    defaultVolumeImage.src = VolumeSetImage;
   }
 
   // ********************************************
@@ -24,9 +40,32 @@ export default class VolumeSetAction extends ActionBase {
     return ACTION_UUID;
   }
 
+  get defaultVolumeImageData() {
+    return this._defaultVolumeImageData;
+  }
+
+  get showCurrentVolume() {
+    return this._showCurrentVolume;
+  }
+
+  set showCurrentVolume(value) {
+    if(value !== this._showCurrentVolume) {
+      this._showCurrentVolume = (value === true);
+      this.renderImage();
+    }
+  }
+
   // ********************************************
   // * Private methods, event handlers
   // ********************************************
+  onSettingsUpdated(settings) {
+    super.onSettingsUpdated(settings);
+
+    if(settings) {
+      this.showCurrentVolume = settings.showCurrentVolume;
+    }
+  }
+
   onKeyUp(data) {
     super.onKeyUp(data);
 
@@ -50,16 +89,67 @@ export default class VolumeSetAction extends ActionBase {
   onRoonActiveOutputChanged(activeOutput) {
     super.onRoonActiveOutputChanged(activeOutput);
 
-    if(activeOutput !== null && activeOutput.volume) {
-      this.setImage(undefined);
-    } else {
-      this.setImage(this.getDisabledImageWhenRequested());
-    }
+    this.renderImage();
   }
 
   // ********************************************
   // * Private methods
   // ********************************************
+  formatVolume(volume) {
+    const type = volume.type === "db" ? " dB" : "";
+    // return "0";
+    return `${volume.value}${type}`;
+  }
+
+  renderImage() {
+    if(this.showCurrentVolume === true && this.roonActiveOutput !== null && this.roonActiveOutput.volume) {
+      const { image, width, height } = this.defaultVolumeImageData;
+      const canvas = document.createElement("canvas");
+      canvas.width = width;
+      canvas.height = height;
+
+      const canvasContext = canvas.getContext("2d");
+      const volumeText = this.formatVolume(this.roonActiveOutput.volume);
+
+      // Render icon
+      canvasContext.drawImage(image, 0, 0);
+
+      let font;
+      let left;
+      if(volumeText.length <= 3) {
+        left = 70;
+        font = "36px Arial";
+      } else if(volumeText.length <= 6) {
+        left = 62;
+        font = "26px Arial";
+      } else {
+        left = 62;
+        font = "20px Arial";
+      }
+
+      canvasContext.font = font;
+      canvasContext.textAlign = "left";
+      canvasContext.textBaseline = "middle";
+      canvasContext.shadowColor = "#000000";
+      canvasContext.shadowBlur = 1;
+      canvasContext.lineWidth = 3;
+      canvasContext.strokeStyle = "#000000";
+      canvasContext.strokeText(volumeText, left, height / 2 + 2);
+      canvasContext.fillStyle = "#ffffff";
+      canvasContext.fillText(volumeText, left, height / 2 + 2);
+
+      // Set the image on the button
+      const dataUri = canvas.toDataURL("image/png");
+      this.setImage(dataUri);
+    } else {
+      if(this.roonActiveOutput !== null && this.roonActiveOutput.volume) {
+        this.setImage(undefined);
+      } else {
+        this.setImage(this.getDisabledImageWhenRequested());
+      }
+    }
+  }
+
   getDisabledImage() {
     return VolumeSetDisabled;
   }

diff --git a/Sources/plug-in/js/DataImages/volume-set-key.js b/Sources/plug-in/js/DataImages/volume-set-key.js
diff --git a/Sources/plug-in/js/index.js b/Sources/plug-in/js/index.js
@@ -10,7 +10,7 @@ const roonLog = debug("roon");
 const roonSubscribeLog = debug("roon:subscribe");
 const roonUpdateLog = debug("roon:update");
 
-const VERSION_NUMBER = "1.0.5";
+const VERSION_NUMBER = "1.0.7";
 
 // TODO: Adjust log level from config
 // debug.enable("plug-in,roon,roon:subscribe,roon:update,action:*");

diff --git a/Sources/property-inspector/index.html b/Sources/property-inspector/index.html
@@ -60,16 +60,16 @@
       <!-- net.bliny.roon.play-pause -->
       <div class="sdpi-item hidden" id="roon-play-options-item">
         <div class="sdpi-item-label">Dynamic cover</div>
-          <div class="sdpi-item-value min100">
-            <div class="sdpi-item-child">
-              <input type="checkbox" value="true" id="show-cover-art">
-              <label for="show-cover-art" class="sdpi-item-label"><span></span>Show cover art</label>
-            </div>
-            <div class="sdpi-item-child">
-              <input type="checkbox" value="true" id="show-seek-position">
-              <label for="show-seek-position" class="sdpi-item-label"><span></span>Show elapsed time</label>
-            </div>
+        <div class="sdpi-item-value min100">
+          <div class="sdpi-item-child">
+            <input type="checkbox" value="true" id="show-cover-art">
+            <label for="show-cover-art" class="sdpi-item-label"><span></span>Show cover art</label>
+          </div>
+          <div class="sdpi-item-child">
+            <input type="checkbox" value="true" id="show-seek-position">
+            <label for="show-seek-position" class="sdpi-item-label"><span></span>Show elapsed time</label>
           </div>
+        </div>
       </div>
 
       <!-- net.bliny.roon.play-item / net.bliny.roon.play-this -->
@@ -105,9 +105,20 @@
       </div>
 
       <!-- net.bliny.roon.volume-set -->
-      <div class="sdpi-item hidden" id="roon-volume-set-item">
-        <div class="sdpi-item-label">Volume</div>
-        <input class="sdpi-item-value" id="roon-volume-set" inputmode="numeric" tooltip="A volume value that matches your player's valid values" placeholder="Volume level" type="number" name="roonVolume">
+      <div class="hidden" id="roon-volume-set-item">
+        <div class="sdpi-item">
+          <div class="sdpi-item-label">Volume</div>
+          <input class="sdpi-item-value" id="roon-volume-set" inputmode="numeric" tooltip="A volume value that matches your player's valid values" placeholder="Volume level" type="number" name="roonVolume">
+        </div>
+        <div class="sdpi-item">
+          <div class="sdpi-item-label">Options</div>
+          <div class="sdpi-item-value min100">
+            <div class="sdpi-item-child">
+              <input type="checkbox" value="true" id="show-current-volume">
+              <label for="show-current-volume" class="sdpi-item-label"><span></span>Show current volume</label>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div class="sdpi-heading">Player</div>

diff --git a/Sources/property-inspector/js/index.js b/Sources/property-inspector/js/index.js
@@ -273,6 +273,7 @@ export default class ConfigApp {
     document.getElementById("play-item-action").addEventListener("change", (event) => this.onSettingsChanged("itemAction", event.target.value));
 
     document.getElementById("roon-volume-set").addEventListener("change", (event) => this.onSettingsChanged("volume", event.target.value));
+    document.getElementById("show-current-volume").addEventListener("change", (event) => this.onSettingsChanged("showCurrentVolume", (event.target.checked === true)));
 
     document.getElementById("available-roon-outputs").addEventListener("change", (event) => this.onRoonOutputSelected(event.target.value));
     document.getElementById("roon-output-name").addEventListener("change", (event) => this.onRoonOutputChanged(event.target.value));
@@ -345,6 +346,9 @@ export default class ConfigApp {
     if(settings.volume !== undefined) {
       document.getElementById("roon-volume-set").value = settings.volume;
     }
+    if(settings.showCurrentVolume !== undefined) {
+      document.getElementById("show-current-volume").checked = (settings.showCurrentVolume === true);
+    }
 
     // Roon output
     if(settings.roonOutputName !== undefined) {
@@ -382,6 +386,10 @@ export default class ConfigApp {
       defaults.itemAction = "Shuffle";
     }
 
+    if(this.actionUuid == "net.bliny.roon.volume-set") {
+      defaults.showCurrentVolume = false;
+    }
+
     this.updateWithSettings(defaults);
 
     // Override with action specific values
@@ -418,6 +426,7 @@ export default class ConfigApp {
 
       if(this.actionUuid == "net.bliny.roon.volume-set") {
         this.settings.volume = document.getElementById("roon-volume-set").value;
+        this.settings.showCurrentVolume = (document.getElementById("show-current-volume").checked === true);
       }
 
       this.saveSettings();