Added noise overlay and more configurable settings

config.js

@@ -1,4 +1,8 @@
-var displayConfig = {
+let displayConfig = {
     coreIP: "192.168.0.105",
-    corePort: 9100
+    corePort: 9100,
+    targetZone: "Node",
+    graphics: {
+        enableDithering: true
+    }
 }

index.html

@@ -12,14 +12,14 @@
     <!-- MAIN SCREEN -->
     <div id="main-content-box">
         <img id="album-art-bg" />
+        <div id="noise-overlay"></div>
         <div id="album-cover">
             <div id="album-cover-body">
                 <div id="cover-front"></div>
                 <div id="cover-back"></div>
             </div>
         </div>
 
-
         <div id="track-info">
             <h4 id="song-name"></h4>
             <div id="artist-album">

src/controller.ts

@@ -18,20 +18,27 @@ const AlbumImageConfig = {
 
 const LoadingText = [".", "..", "..."]
 
-const targetZone = "Node"
-
 const FaceFront = "front"
 const FaceBack = "back"
 
 export default class Controller {
 
     private core: RoonCore
+    private targetZone: string
     private zone: Zone
 
     private currentFace = FaceFront
 
     private loadingAnimator = null
 
+    constructor(targetZone: string, enableDithering: boolean) {
+        this.targetZone = targetZone
+
+        if (enableDithering) {
+            $("#noise-overlay").show()
+        }
+    }
+
     public setCore(core: RoonCore | null) {
         this.core = core
 
@@ -63,7 +70,7 @@ export default class Controller {
         const updatedZones = payload.zones || payload.zones_added || payload.zones_changed
         const zoneSeekChange = payload.zones_seek_changed
         if (updatedZones) {
-            const zone = updatedZones.find(zone => zone.display_name == targetZone)
+            const zone = updatedZones.find(zone => zone.display_name == this.targetZone)
 
             if (!zone) {
                 console.log("Failed to find zone. Check config")

src/index.ts

@@ -9,7 +9,7 @@ import RoonApiImage from "node-roon-api-image"
 
 import Controller from "./controller"
 
-const controller = new Controller()
+const controller = new Controller(displayConfig.targetZone, displayConfig.graphics.enableDithering)
 controller.setCore(null) // init with no core
 
 const roonConnected = (core) => {

style/main.css

@@ -30,6 +30,19 @@ body {
     opacity: 0.4;
 }
 
+#noise-overlay {
+    position: absolute;
+    display: none; /* default is hidden, will show if enabled through config */
+    top: 0; left: 0;
+    width: 800px;
+    height: 480px;
+    background-color: rgb(60, 60, 60);
+    mix-blend-mode: overlay;
+    opacity: 0.7;
+    mask: url("../img/noise.svg");
+    -webkit-mask: url("../img/noise.svg");
+}
+
 #album-cover {
     position: relative;
     display: block;