v1.2.3

MaterialDeck.js

@@ -40,6 +40,8 @@ let wsOpen = false;             //Bool for checking if websocket has ever been o
 let wsInterval;                 //Interval timer to detect disconnections
 let WSconnected = false;
 
+//let furnace = game.modules.get("furnace");
+
 /*
  * Analyzes the message received 
  * 
@@ -51,6 +53,17 @@ async function analyzeWSmessage(msg){
     //console.log("Received",data);
 
     if (data.type == "connected" && data.data == "SD"){
+        /*
+        console.log(data);
+        const minimumSDversion = game.modules.get("MaterialDeck").data.minimumSDversion.replace('v','');
+        const minimumMSversion = game.modules.get("MaterialDeck").data.minimumMSversion;
+        console.log('SD',minimumSDversion,minimumMSversion)
+        if (data.SDversion < minimumSDversion) console.log('SD: nope')
+        else console.log('SD: yes');
+        if (data.MSversion < minimumMSversion) console.log('MS: nope')
+        else console.log('MS: yes');
+        */
+
         console.log("streamdeck connected to server");
         streamDeck.resetImageBuffer();
     }
@@ -133,7 +146,10 @@ async function analyzeWSmessage(msg){
  */
 function startWebsocket() {
     const address = game.settings.get(moduleName,'address');
-    ws = new WebSocket('ws://'+address+'/');
+    
+    const url = address.startsWith('wss://') ? address : ('ws://'+address+'/');
+
+    ws = new WebSocket(url);
 
     ws.onmessage = function(msg){
         //console.log(msg);
@@ -374,6 +390,11 @@ Hooks.on('closeJournalSheet',()=>{
     otherControls.updateAll();
 });
 
+Hooks.on('gmScreenOpenClose',(html,isOpen)=>{
+    if (enableModule == false || ready == false) return;
+    externalModules.updateAll({gmScreen:isOpen});
+});
+
 Hooks.once('init', ()=>{
     //CONFIG.debug.hooks = true;
     registerSettings(); //in ./src/settings.js

README.md

@@ -71,7 +71,7 @@ Instructions and more info can be found in the <a href="https://github.com/CDeen
 Module manifest: https://raw.githubusercontent.com/CDeenen/MaterialDeck/Master/module.json
 
 ## Software Versions & Module Incompatibilities
-<b>Foundry VTT:</b> Tested on 0.7.7<br>
+<b>Foundry VTT:</b> Tested on 0.7.9<br>
 <b>Module Incompatibilities:</b> None known.<br>
 
 ## Feedback

changelog.md

@@ -1,4 +1,33 @@
 # Changelog Material Deck Module
+### v1.2.3 - 03-02-2021
+Fixes:
+<ul>
+<li>Fixed some issues for the Shadow of the Demon Lord system</li>
+</ul>
+Other Changes:
+<ul>
+<li>Improved performance of the 'Playlist Configuration', 'Macro Configuration' and 'Soundboard Configuration' screens</li>
+<li>Minor code clean-up</li>
+</ul>
+<b>Compatible server app and SD plugin:</b><br>
+Material Server v1.0.2 (unchanged): https://github.com/CDeenen/MaterialServer/releases <br>
+SD plugin v1.2.2 (unchanged): https://github.com/CDeenen/MaterialDeck_SD/releases<br>
+
+### v1.2.2 - 02-02-2021
+Additions:
+<ul>
+<li>Added a help button in the module configuration</li>
+<li>Token Action: Added support for easy token wildcard image changes</li>
+<li>Token Action: Added a comprehensive custom onClick function that can modify token and actor data, with support for basic mathematical expressions</li>
+</ul>
+Other Changes:
+<ul>
+<li>Improved GM screen compatibility</li>
+</ul>
+<b>Compatible server app and SD plugin:</b><br>
+Material Server v1.0.2 (unchanged): https://github.com/CDeenen/MaterialServer/releases <br>
+SD plugin v1.2.2: https://github.com/CDeenen/MaterialDeck_SD/releases<br>
+
 ### v1.2.1 - 07-01-2021
 <b>Note:</b> Due to a change in how scene control is handled (moved from 'Other Controls' to its own 'Scene Action'), any actions related to scenes no longer work. You will have to set them up again using the new Scene Action.<br>
 <br>

lang/en.json

@@ -9,13 +9,14 @@
     "MaterialDeck.Sett.Model_Mini": "Mini",
     "MaterialDeck.Sett.Model_Normal": "Normal or Mobile",
     "MaterialDeck.Sett.Model_XL": "XL",
+    "MaterialDeck.Sett.Help": "Help",
     "MaterialDeck.Sett.PlaylistConfig": "Playlist Configuration",
     "MaterialDeck.Sett.MacroConfig": "Macro Configuration",
     "MaterialDeck.Sett.SoundboardConfig": "Soundboard Configuration",
     "MaterialDeck.Sett.ServerAddr": "Material Server Address",
-    "MaterialDeck.Sett.ServerAddrHint": "Fill in the IP address and port of the Material Server. Must follow the format [ip_address]:[port], for example: 'localhost:3001' or '192.168.1.1:4000'.",
-    "MaterialDeck.Sett.ImageBuffer": "Image Buffer Size (EXPERIMENTAL)",
-    "MaterialDeck.Sett.ImageBufferHint": "Sets the amount of images to store in the image buffer. The image buffer will store all images sent to the Steram Deck in a buffer. This greatly improves the update speed, but can use big amounts of memory if set too high.",
+    "MaterialDeck.Sett.ServerAddrHint": "The IP address and port of Material Server. The default value will work for 99% of people, only change this if you know what you're doing. Must follow the format [ip_address]:[port], for example: 'localhost:3001' or '192.168.1.1:4000'.",
+    "MaterialDeck.Sett.ImageBuffer": "Image Cache Size (EXPERIMENTAL)",
+    "MaterialDeck.Sett.ImageBufferHint": "Sets the amount of images to store in the image cache. The image cache will locally store all images sent to the Stream Deck. This improves the update speed, but increases memory usage.",
 
     "MaterialDeck.PL.Unrestricted": "Unrestricted",
     "MaterialDeck.PL.OneTrackPlaylist": "One track per playlist",

module.json

@@ -2,7 +2,9 @@
     "name": "MaterialDeck",
     "title": "Material Deck",
     "description": "Material Deck allows you to control Foundry using an Elgato Stream Deck",
-    "version": "1.2.1",
+    "version": "1.2.3",
+    "minimumSDversion": "1.2.2",
+    "minimumMSversion": "1.0.2",
     "author": "CDeenen",
     "esmodules": [
       "./MaterialDeck.js"

src/combattracker.js

@@ -10,7 +10,7 @@ export class CombatTracker{
     async updateAll(){
         if (this.active == false) return;
         for (let i=0; i<32; i++){   
-            let data = streamDeck.buttonContext[i];
+            const data = streamDeck.buttonContext[i];
             if (data == undefined || data.action != 'combattracker') continue;
             await this.update(data.settings,data.context);
         }

src/external.js

@@ -4,12 +4,16 @@ import {streamDeck} from "../MaterialDeck.js";
 export class ExternalModules{
     constructor(){
         this.active = false;
+        this.gmScreenOpen = false;
     }
 
-    async updateAll(){
+    async updateAll(data={}){
+        if (data.gmScreen != undefined){
+            this.gmScreenOpen = data.gmScreen.isOpen;
+        }
         if (this.active == false) return;
         for (let i=0; i<32; i++){   
-            let data = streamDeck.buttonContext[i];
+            const data = streamDeck.buttonContext[i];
             if (data == undefined || data.action != 'external') continue;
             await this.update(data.settings,data.context);
         }
@@ -17,18 +21,15 @@ export class ExternalModules{
 
     update(settings,context){
         this.active = true;
-        let module = settings.module;
-        if (module == undefined) module = 'fxmaster';
+        const module = settings.module ? settings.module : 'fxmaster';
 
         if (module == 'fxmaster') this.updateFxMaster(settings,context);
         else if (module == 'gmscreen') this.updateGMScreen(settings,context);
-        
     }
 
     keyPress(settings,context){
         if (this.active == false) return;
-        let module = settings.module;
-        if (module == undefined) module = 'fxmaster';
+        const module = settings.module ? settings.module : 'fxmaster';
 
         if (module == 'fxmaster')    
             this.keyPressFxMaster(settings,context);
@@ -250,11 +251,11 @@ export class ExternalModules{
 
         const background = settings.gmScreenBackground ? settings.gmScreenBackground : '#000000';
         let ring = 1;
-        let ringColor = '#00FF00'
+        const ringColor = '#00FF00'
         let src = '';
         let txt = '';
 
-        //if (document.getElementsByClassName("gm-screen-app gm-screen-drawer expanded")[0] != undefined) ring = 2;
+        if (this.gmScreenOpen) ring = 2;
         
         if (settings.displayGmScreenIcon) src = "fas fa-book-reader";
         streamDeck.setIcon(context,src,background,ring,ringColor);
@@ -264,7 +265,6 @@ export class ExternalModules{
 
     keyPressGMScreen(settings,context){
         if (this.getModuleEnable("gm-screen") == false) return;
-
-        document.getElementsByClassName("gm-screen-button")[0].click();
+        window['gm-screen'].toggleGmScreenVisibility();
     }
 }

src/macro.js

@@ -10,7 +10,7 @@ export class MacroControl{
     async updateAll(){
         if (this.active == false) return;
         for (let i=0; i<32; i++){   
-            let data = streamDeck.buttonContext[i];
+            const data = streamDeck.buttonContext[i];
             if (data == undefined || data.action != 'macro') continue;
             await this.update(data.settings,data.context);
         }
@@ -18,39 +18,28 @@ export class MacroControl{
 
     update(settings,context){
         this.active = true;
-        let mode = settings.macroMode;
-        let displayName = settings.displayName;
+        const mode = settings.macroMode ? settings.macroMode : 'hotbar';
+        const displayName = settings.displayName ? settings.displayName : false;
+        const displayIcon = settings.displayIcon ? settings.displayIcon : false;
+        let background = settings.background ? settings.background : '#000000';
         let macroNumber = settings.macroNumber;
-        let background = settings.background;
-        let icon = false;
-        if (settings.displayIcon) icon = true;
+        if (macroNumber == undefined || isNaN(parseInt(macroNumber))) macroNumber = 0;
+        macroNumber = parseInt(macroNumber);
+
         let ringColor = "#000000";
         let ring = 0;
-        if(macroNumber == undefined || isNaN(parseInt(macroNumber))){
-            macroNumber = 0;
-        }
-        if (mode == undefined) mode = 'hotbar';
-        if (displayName == undefined) displayName = false;
-        if (background == undefined) background = '#000000';
-
-        macroNumber = parseInt(macroNumber);
+        let name = "";
+        let src = ""; 
         
         if (mode == 'macroBoard') {  //Macro board
-            let name = "";
-            let src = ''; 
             if (settings.macroBoardMode == 'offset') {  //Offset
-                let ringOffColor = settings.offRing;
-                if (ringOffColor == undefined) ringOffColor = '#000000';
-
-                let ringOnColor = settings.onRing;
-                if (ringOnColor == undefined) ringOnColor = '#00FF00';
-
+                const ringOffColor = settings.offRing ? settings.offRing : '#000000';
+                const ringOnColor = settings.onRing ? settings.onRing : '#00FF00';
+                
                 let macroOffset = parseInt(settings.macroOffset);
                 if (macroOffset == undefined || isNaN(macroOffset)) macroOffset = 0;
                 
-                if (macroOffset == parseInt(this.offset)) ringColor = ringOnColor;
-                else ringColor = ringOffColor;
-
+                ringColor = (macroOffset == parseInt(this.offset)) ? ringOnColor : ringOffColor;
                 ring = 2;
             }
             else { //Execute macro
@@ -58,38 +47,32 @@ export class MacroControl{
                 if (macroNumber < 0) macroNumber = 0;
                 var macroId = game.settings.get(MODULE.moduleName,'macroSettings').macros[macroNumber];
                 background = game.settings.get(MODULE.moduleName,'macroSettings').color[macroNumber];
-                
                 if (background == undefined) background = '#000000';
                 src = "";
+
                 if (macroId != undefined){
                     let macro = game.macros._source.find(p => p._id == macroId);
                     if (macro != undefined) {
-                        name += macro.name;
-                        src += macro.img;
+                        if (displayName) name += macro.name;
+                        if (displayIcon) src += macro.img;
                     }
                 }
                 ring = 0;
             }  
-            if (icon) streamDeck.setIcon(context,src,background,ring,ringColor);
-            else streamDeck.setIcon(context, "", background,ring,ringColor);
-            if (displayName == 0) name = ""; 
-            streamDeck.setTitle(name,context);
         }
         else { //Macro Hotbar
             let macroId 
             if (mode == 'hotbar') macroId = game.user.data.hotbar[macroNumber];
             else {
                 let macros;
-                if (mode == 'customHotbar' && game.modules.get('custom-hotbar') != undefined) { 
+                if (mode == 'customHotbar' && game.modules.get('custom-hotbar') != undefined) 
                     macros = ui.customHotbar.macros;
-                }
-                else macros = game.macros.apps[0].macros;
+                else 
+                    macros = game.macros.apps[0].macros;
                 if (macroNumber > 9) macroNumber = 0;
                 for (let j=0; j<10; j++){
-                    if (macros[j].key == macroNumber){
-                        if (macros[j].macro == null) macroId == undefined;
-                        else macroId = macros[j].macro._id; 
-                    }
+                    if (macros[j].key == macroNumber)
+                        macroId = (macros[j].macro == null) ? undefined : macros[j].macro._id; 
                 }
             }
             let src = "";
@@ -98,36 +81,32 @@ export class MacroControl{
             if (macroId != undefined){
                 let macro = game.macros._source.find(p => p._id == macroId);
                 if (macro != undefined) {
-                    name += macro.name;
-                    src += macro.img;
+                    if (displayName) name += macro.name;
+                    if (displayIcon) src += macro.img;
                 }
             }
-            if (icon) streamDeck.setIcon(context,src,background);
-            else streamDeck.setIcon(context, "", background);
-            if (displayName == 0) name = ""; 
-            streamDeck.setTitle(name,context);
         }
-        
+        streamDeck.setIcon(context,src,background,ring,ringColor);
+        streamDeck.setTitle(name,context);
     }
 
     hotbar(macros){
         for (let i=0; i<32; i++){  
-            let data = streamDeck.buttonContext[i];
+            const data = streamDeck.buttonContext[i];
             if (data == undefined || data.action != 'macro' || data.settings.macroMode == 'macroBoard') continue;
-            let context = data.context;
-            let mode = data.settings.macroMode;
-            let displayName = data.settings.displayName;
+            
+            const context = data.context;
+            const mode = data.settings.macroMode ? data.settings.macroMode : 'hotbar';
+            const displayName = data.settings.displayName ? data.settings.displayName : false;
+            const displayIcon = data.settings.displayIcon ? data.settings.displayIcon : false;
+            let background = data.settings.background ? data.settings.background : '#000000';
             let macroNumber = data.settings.macroNumber;
-            let background = data.settings.background;
+            if(macroNumber == undefined || isNaN(parseInt(macroNumber))) macroNumber = 1;
+            
             let src = "";
             let name = "";
-            if(macroNumber == undefined || isNaN(parseInt(macroNumber))){
-                macroNumber = 1;
-            }
-            if (mode == undefined) mode = 'hotbar';
+
             if (mode == 'Macro Board') continue;
-            if (displayName == undefined) displayName = false;
-            if (background == undefined) background = '#000000';
             
             let macroId;
             if (mode == 'hotbar'){
@@ -145,24 +124,19 @@ export class MacroControl{
             let macro = undefined;
             if (macroId != undefined) macro = game.macros._source.find(p => p._id == macroId);
             if (macro != undefined && macro != null) {
-                name += macro.name;
-                src += macro.img;
+                if (displayName) name += macro.name;
+                if (displayIcon) src += macro.img;
             }
             streamDeck.setIcon(context,src,background);
-            if (displayName == 0) name = ""; 
             streamDeck.setTitle(name,context);
         }
     }
    
     keyPress(settings){
-        let mode = settings.macroMode;
-        if (mode == undefined) mode = 'hotbar';
-
+        const mode = settings.macroMode ? settings.macroMode : 'hotbar';
         let macroNumber = settings.macroNumber;
-        if(macroNumber == undefined || isNaN(parseInt(macroNumber))){
-            macroNumber = 0;
-        }
-
+        if(macroNumber == undefined || isNaN(parseInt(macroNumber))) macroNumber = 0;
+        
         if (mode == 'hotbar' || mode == 'visibleHotbar' || mode == 'customHotbar')
             this.executeHotbar(macroNumber,mode);
         else {

src/misc.js

@@ -6,7 +6,6 @@ export class playlistConfigForm extends FormApplication {
         super(data, options);
         this.data = data;
         this.playlistNr;
-        this.updatePlaylistNr = false;
     }
 
     /**
@@ -26,7 +25,10 @@ export class playlistConfigForm extends FormApplication {
      * Provide data to the template
      */
     getData() {
+        //Get the playlist settings
         let settings = game.settings.get(MODULE.moduleName,'playlists');
+
+        //Get values from the settings, and check if they are defined
         let selectedPlaylists = settings.selectedPlaylist;
         if (selectedPlaylists == undefined) selectedPlaylists = [];
         let selectedPlaylistMode = settings.playlistMode;
@@ -36,17 +38,17 @@ export class playlistConfigForm extends FormApplication {
         if (numberOfPlaylists == undefined) numberOfPlaylists = 9;
         let playMode = settings.playMode;
         if (playMode == undefined) playMode = 0;
+
+
+        //Create array to store all the data for each playlist
         let playlistData = [];
-        
-        this.updatePlaylistNr = false;
         for (let i=0; i<numberOfPlaylists; i++){
             if (selectedPlaylists[i] == undefined) selectedPlaylists[i] = 'none';
             if (selectedPlaylistMode[i] == undefined) selectedPlaylistMode[i] = 0;
             let dataThis = {
                 iteration: i+1,
                 playlist: selectedPlaylists[i],
-                playlistMode: selectedPlaylistMode[i],
-                playlists: game.playlists.entities
+                playlistMode: selectedPlaylistMode[i]
             }
             playlistData.push(dataThis);
         }
@@ -57,7 +59,7 @@ export class playlistConfigForm extends FormApplication {
             selectedPlaylist: selectedPlaylists,
             playlistMode: selectedPlaylistMode
         }
-
+ 
         return {
             playlists: game.playlists.entities,
             numberOfPlaylists: numberOfPlaylists,
@@ -89,9 +91,8 @@ export class playlistConfigForm extends FormApplication {
 
         numberOfPlaylists.on("change", event => {
             this.playlistNr = event.target.value;
-            this.updatePlaylistNr = true;
             this.data.playlistNumber=event.target.value;
-            this.updateSettings(this.data);
+            this.updateSettings(this.data,true);
         });
 
         selectedPlaylist.on("change", event => {
@@ -106,10 +107,11 @@ export class playlistConfigForm extends FormApplication {
             this.updateSettings(this.data);
         });
     }
-    async updateSettings(settings){
+
+    async updateSettings(settings,render){
         await game.settings.set(MODULE.moduleName,'playlists', settings);
         if (MODULE.enableModule) playlistControl.updateAll();
-        this.render();
+        if (render) this.render();
     }
 }
 
@@ -125,16 +127,6 @@ export class macroConfigForm extends FormApplication {
      * Default Options for this FormApplication
      */
     static get defaultOptions() {
-        /*
-        let streamDeckModel = game.settings.get(MODULE.moduleName,'streamDeckModel');
-        let width;
-        if (streamDeckModel == 0)
-            width = 550;
-        else if (streamDeckModel == 1)
-            width= 1500;
-        else   
-            width = 1400;
-        */
         return mergeObject(super.defaultOptions, {
             id: "macro-config",
             title: "Material Deck: "+game.i18n.localize("MaterialDeck.Sett.MacroConfig"),
@@ -147,19 +139,26 @@ export class macroConfigForm extends FormApplication {
      * Provide data to the template
      */
     getData() {
+        //Get the settings
         var selectedMacros = game.settings.get(MODULE.moduleName,'macroSettings').macros;
         var color = game.settings.get(MODULE.moduleName,'macroSettings').color;
         var args = game.settings.get(MODULE.moduleName,'macroSettings').args;
+
+        //Check if the settings are defined
         if (selectedMacros == undefined) selectedMacros = [];
         if (color == undefined) color = [];
         if (args == undefined) args = [];
-        let macroData = [];
-        let furnaceEnabled = false;
-        let furnace = game.modules.get("furnace");
-        if (furnace != undefined && furnace.active) furnaceEnabled = true;
-        let height = 95;
-        if (furnaceEnabled) height += 50;
 
+        //Check if the Furnace is installed and enabled
+        let furnaceEnabled = false;
+        let height = 95;
+        let furnace = game.modules.get("furnace");
+        if (furnace != undefined && furnace.active) {
+            furnaceEnabled = true;
+            height += 50;
+        }
+
+        //Check what SD model the user is using, and set the number of rows and columns to correspond
         let streamDeckModel = game.settings.get(MODULE.moduleName,'streamDeckModel');
         let iMax,jMax;
         if (streamDeckModel == 0){
@@ -176,45 +175,42 @@ export class macroConfigForm extends FormApplication {
         }
 
         let iteration = 0;
+        let macroData = [];
         for (let j=0; j<jMax; j++){
             let macroThis = [];
       
             for (let i=0; i<iMax; i++){
-                let colorThis = color[iteration];
-                if (colorThis != undefined){
+                let colorData = color[iteration];
+                if (colorData != undefined){
                     let colorCorrect = true;
-                    if (colorThis[0] != '#') colorCorrect = false;
+                    if (colorData[0] != '#') colorCorrect = false;
                     for (let k=0; k<6; k++){
-                        if (parseInt(colorThis[k+1],16)>15)
+                        if (parseInt(colorData[k+1],16)>15)
                             colorCorrect = false;
                     }
-                    if (colorCorrect == false) colorThis = '#000000'; 
+                    if (colorCorrect == false) colorData = '#000000'; 
                 }
                 else 
-                    colorThis = '#000000';
+                    colorData = '#000000';
                     
                 let dataThis = {
                     iteration: iteration+1,
                     macro: selectedMacros[iteration],
-                    color: colorThis,
-                    macros:game.macros,
-                    args: args[iteration],
-                    furnace: furnaceEnabled
+                    color: colorData,
+                    args: args[iteration]
                 }
                 macroThis.push(dataThis);
                 iteration++;
             }
-            let data = {
-                dataThis: macroThis,
-            };
-            macroData.push(data);
+            macroData.push({dataThis: macroThis});
         }
-        
+
         return {
             height: height,
             macros: game.macros,
             selectedMacros: selectedMacros,
             macroData: macroData,
+            furnace: furnaceEnabled
         } 
     }
 
@@ -258,7 +254,6 @@ export class macroConfigForm extends FormApplication {
     async updateSettings(settings){
         await game.settings.set(MODULE.moduleName,'macroSettings',settings);
         if (MODULE.enableModule) macroControl.updateAll();
-        this.render();
     }
 }
 
@@ -267,10 +262,7 @@ export class macroConfigForm extends FormApplication {
 export class soundboardConfigForm extends FormApplication {
     constructor(data, options) {
         super(data, options);
-        this.data = data;
         this.playlists = [];
-        this.updatePlaylist = false;
-        this.update = false;
         this.iMax;
         this.jMax;
         this.settings = {};
@@ -280,16 +272,6 @@ export class soundboardConfigForm extends FormApplication {
      * Default Options for this FormApplication
      */
     static get defaultOptions() {
-        /*
-        let streamDeckModel = game.settings.get(MODULE.moduleName,'streamDeckModel');
-        let width;
-        if (streamDeckModel == 0)
-            width = 550;
-        else if (streamDeckModel == 1)
-            width= 885;
-        else   
-            width = 1400;
-        */
         return mergeObject(super.defaultOptions, {
             id: "soundboard-config",
             title: "Material Deck: "+game.i18n.localize("MaterialDeck.Sett.SoundboardConfig"),
@@ -298,28 +280,15 @@ export class soundboardConfigForm extends FormApplication {
             height: 720
         });
     }
-    
-    getArray(data){
-        let array = [data.a,data.b,data.c,data.d,data.e,data.f,data.g,data.h];
-        return array;
-    }
 
     /**
      * Provide data to the template
      */
-    getData() { 
-        if (this.update) {
-            this.update=false;
-            return {soundData: this.data};
-        }
+    getData() {
+        //Get the settings
         this.settings = game.settings.get(MODULE.moduleName,'soundboardSettings');
-        let playlists = [];
-        playlists.push({id:"none",name:game.i18n.localize("MaterialDeck.None")});
-        playlists.push({id:"FP",name:game.i18n.localize("MaterialDeck.FilePicker")})
-        for (let i=0; i<game.playlists.entities.length; i++){
-            playlists.push({id:game.playlists.entities[i]._id,name:game.playlists.entities[i].name});
-        }
 
+        //Check if all settings are defined
         if (this.settings.sounds == undefined) this.settings.sounds = [];
         if (this.settings.colorOn == undefined) this.settings.colorOn = [];
         if (this.settings.colorOff == undefined) this.settings.colorOff = [];
@@ -329,8 +298,17 @@ export class soundboardConfigForm extends FormApplication {
         if (this.settings.name == undefined) this.settings.name = [];
         if (this.settings.selectedPlaylists == undefined) this.settings.selectedPlaylists = [];
         if (this.settings.src == undefined) this.settings.src = [];
-        let soundData = [];
 
+        //Create the playlist array
+        let playlists = [];
+        playlists.push({id:"none",name:game.i18n.localize("MaterialDeck.None")});
+        playlists.push({id:"FP",name:game.i18n.localize("MaterialDeck.FilePicker")})
+        for (let i=0; i<game.playlists.entities.length; i++){
+            playlists.push({id:game.playlists.entities[i]._id,name:game.playlists.entities[i].name});
+        }
+        this.playlists = playlists;
+
+        //Check what SD model the user is using, and set the number of rows and columns to correspond
         let streamDeckModel = game.settings.get(MODULE.moduleName,'streamDeckModel');
        
         if (streamDeckModel == 0){
@@ -346,37 +324,54 @@ export class soundboardConfigForm extends FormApplication {
             this.iMax = 8;
         }
 
-        let iteration = 0;
+        let iteration = 0;  //Sound number
+        let soundData = []; //Stores all the data for each sound
 
+        //Fill soundData. soundData is an array the size of jMax (nr of rows), with each array element containing an array the size of iMax (nr of columns)
         for (let j=0; j<this.jMax; j++){
-            let soundsThis = [];
+            let soundsThis = [];    //Stores row data
             for (let i=0; i<this.iMax; i++){
+                //Each iteration gets the data for each sound
+
+                //If the volume is undefined for this sound, define it and set it to its default value
+                if (this.settings.volume[iteration] == undefined) this.settings.volume[iteration] = 50;
+
+                //Get the selected playlist and the sounds of that playlist
                 let selectedPlaylist;
                 let sounds = [];
-                if (this.settings.volume[iteration] == undefined) this.settings.volume[iteration] = 50;
                 if (this.settings.selectedPlaylists[iteration]==undefined) selectedPlaylist = 'none';
                 else if (this.settings.selectedPlaylists[iteration] == 'none') selectedPlaylist = 'none';
                 else if (this.settings.selectedPlaylists[iteration] == 'FP') selectedPlaylist = 'FP';
                 else {
+                    //Get the playlist
                     const pl = game.playlists.entities.find(p => p._id == this.settings.selectedPlaylists[iteration]);
                     if (pl == undefined){
                         selectedPlaylist = 'none';
                         sounds = [];
                     }
                     else {
-                        sounds = pl.sounds;
+                        //Add the sound name and id to the sounds array
+                        for (let i=0; i<pl.sounds.length; i++)
+                            sounds.push({
+                                name: pl.sounds[i].name,
+                                id: pl.sounds[i]._id
+                            });
+                        //Get the playlist id
                         selectedPlaylist = pl._id;
                     }  
                 }
+
+                //Determine whether the sound selector or file picker should be displayed
                 let styleSS = "";
                 let styleFP ="display:none";
                 if (selectedPlaylist == 'FP') {
                     styleSS = 'display:none';
                     styleFP = ''
                 }
+
+                //Create and fill the data object for this sound
                 let dataThis = {
                     iteration: iteration+1,
-                    playlists: playlists,
                     selectedPlaylist: selectedPlaylist,
                     sound: this.settings.sounds[iteration],
                     sounds: sounds,
@@ -390,18 +385,20 @@ export class soundboardConfigForm extends FormApplication {
                     styleSS: styleSS,
                     styleFP: styleFP
                 }
+
+                //Push the data to soundsThis (row array)
                 soundsThis.push(dataThis);
+
                 iteration++;
             }
-            let data = {
-                dataThis: soundsThis,
-            };
-            soundData.push(data);
+
+            //Push soundsThis (row array) to soundData (full data array)
+            soundData.push({dataThis: soundsThis});
         }
-        this.data = soundData;
 
         return {
-            soundData: this.data
+            soundData: soundData,
+            playlists
         } 
     }
 
@@ -428,122 +425,105 @@ export class soundboardConfigForm extends FormApplication {
 
         nameField.on("change",event => {
             let id = event.target.id.replace('name','')-1;
-            let j = Math.floor(id/this.jMax);
-            let i = id % this.jMax;
-            this.data[j].dataThis[i].name=event.target.value;
-            this.update = true;
-
             this.settings.name[id]=event.target.value;
             this.updateSettings(this.settings);
         });
 
         if (playlistSelect.length > 0) {
-            playlistSelect.on("change", event => {
-                let id = event.target.id.replace('playlists','')-1;
-                let j = Math.floor(id/this.jMax);
-                let i = id % this.jMax;
-                this.data[j].dataThis[i].selectedPlaylist=event.target.value;
 
+            //Listener for when the playlist is changed
+            playlistSelect.on("change", event => {
+                //Get the sound number
+                const iteration = event.target.id.replace('playlists','');
+
+                //Get the selected playlist and the sounds of that playlist
                 let selectedPlaylist;
-                let sounds = [];
+                //let sounds = [];
                 if (event.target.value==undefined) selectedPlaylist = 'none';
                 else if (event.target.value == 'none') selectedPlaylist = 'none';
-                else if (event.target.value == 'FP') selectedPlaylist = 'FP';
+                else if (event.target.value == 'FP') {
+                    selectedPlaylist = 'FP';
+
+                    //Show the file picker
+                    document.querySelector(`#fp${iteration}`).style='';
+                    
+                    //Hide the sound selector
+                    document.querySelector(`#ss${iteration}`).style='display:none';
+                }
                 else {
+                    //Hide the file picker
+                    document.querySelector(`#fp${iteration}`).style='display:none';
+                    
+                    //Show the sound selector
+                    document.querySelector(`#ss${iteration}`).style='';
+
                     const pl = game.playlists.entities.find(p => p._id == event.target.value);
                     selectedPlaylist = pl._id;
-                    sounds = pl.sounds;
-                }
-                this.data[j].dataThis[i].sounds=sounds;
 
-                let styleSS = "";
-                let styleFP ="display:none";
-                if (selectedPlaylist == 'FP') {
-                    styleSS = 'display:none';
-                    styleFP = ''
-                }
-                this.data[j].dataThis[i].styleSS=styleSS;
-                this.data[j].dataThis[i].styleFP=styleFP;
-                this.update = true;
+                    //Get the sound select element
+                    let SSpicker = document.getElementById(`soundSelect${iteration}`);
 
-                this.settings.selectedPlaylists[id]=event.target.value;
+                    //Empty ss element
+                    SSpicker.options.length=0;
+
+                    //Create new options and append them
+                    let optionNone = document.createElement('option');
+                    optionNone.value = "";
+                    optionNone.innerHTML = game.i18n.localize("MaterialDeck.None");
+                    SSpicker.appendChild(optionNone);
+
+                    for (let i=0; i<pl.sounds.length; i++){
+                        let newOption = document.createElement('option');
+                        newOption.value = pl.sounds[i]._id;
+                        newOption.innerHTML = pl.sounds[i].name;
+                        SSpicker.appendChild(newOption);
+                    }
+                }
+
+                //Save the new playlist to this.settings, and update the settings
+                this.settings.selectedPlaylists[iteration-1]=event.target.value;
                 this.updateSettings(this.settings);
             });
         }
 
         soundSelect.on("change", event => {
             let id = event.target.id.replace('soundSelect','')-1;
-            let j = Math.floor(id/this.jMax);
-            let i = id % this.jMax;
-            this.data[j].dataThis[i].sound=event.target.value;
-            this.update = true;
-
             this.settings.sounds[id]=event.target.value;
             this.updateSettings(this.settings);
         });
         
         soundFP.on("change",event => {
             let id = event.target.id.replace('srcPath','')-1;
-            let j = Math.floor(id/this.jMax);
-            let i = id % this.jMax;
-            this.data[j].dataThis[i].srcPath=event.target.value;
-            this.update = true;
-
             this.settings.src[id]=event.target.value;
             this.updateSettings(this.settings);
         });
 
         imgFP.on("change",event => {
             let id = event.target.id.replace('imgPath','')-1;
-            let j = Math.floor(id/this.jMax);
-            let i = id % this.jMax;
-            this.data[j].dataThis[i].imgPath=event.target.value;
-            this.update = true;
-
             this.settings.img[id]=event.target.value;
             this.updateSettings(this.settings);
         });
 
         onCP.on("change",event => {
             let id = event.target.id.replace('colorOn','')-1;
-            let j = Math.floor(id/this.jMax);
-            let i = id % this.jMax;
-            this.data[j].dataThis[i].colorOn=event.target.value;
-            this.update = true;
-
             this.settings.colorOn[id]=event.target.value;
             this.updateSettings(this.settings);
         });
 
         offCP.on("change",event => {
             let id = event.target.id.replace('colorOff','')-1;
-            let j = Math.floor(id/this.jMax);
-            let i = id % this.jMax;
-            this.data[j].dataThis[i].colorOff=event.target.value;
-            this.update = true;
-
             this.settings.colorOff[id]=event.target.value;
             this.updateSettings(this.settings);
         });
 
         playMode.on("change",event => {
             let id = event.target.id.replace('playmode','')-1;
-            let j = Math.floor(id/this.jMax);
-            let i = id % this.jMax;
-            this.data[j].dataThis[i].mode=event.target.value;
-            this.update = true;
-
             this.settings.mode[id]=event.target.value;
             this.updateSettings(this.settings);
         });
 
         volume.on("change",event => {
             let id = event.target.id.replace('volume','')-1;
-            let j = Math.floor(id/this.jMax);
-            let i = id % this.jMax;
-            this.data[j].dataThis[i].volume=event.target.value;
-            this.update = true;
-
             this.settings.volume[id]=event.target.value;
             this.updateSettings(this.settings); 
         });
@@ -552,7 +532,5 @@ export class soundboardConfigForm extends FormApplication {
     async updateSettings(settings){
         await game.settings.set(MODULE.moduleName,'soundboardSettings',settings);
         if (MODULE.enableModule) soundboard.updateAll();
-        this.render();
     }
-    
 }

src/othercontrols.js

@@ -10,7 +10,7 @@ export class OtherControls{
     async updateAll(){
         if (this.active == false) return;
         for (let i=0; i<32; i++){   
-            let data = streamDeck.buttonContext[i];
+            const data = streamDeck.buttonContext[i];
             if (data == undefined || data.action != 'other') continue;
             await this.update(data.settings,data.context);
         }

src/playlist.js

@@ -11,7 +11,7 @@ export class PlaylistControl{
     async updateAll(){
         if (this.active == false) return;
         for (let i=0; i<32; i++){   
-            let data = streamDeck.buttonContext[i];
+            const data = streamDeck.buttonContext[i];
             if (data == undefined || data.action != 'playlist') continue;
             await this.update(data.settings,data.context);
         }

src/scene.js

@@ -11,7 +11,7 @@ export class SceneControl{
     async updateAll(){
         if (this.active == false) return;
         for (let i=0; i<32; i++){   
-            let data = streamDeck.buttonContext[i];
+            const data = streamDeck.buttonContext[i];
             if (data == undefined || data.action != 'scene') continue;
             await this.update(data.settings,data.context);
         }
@@ -29,7 +29,7 @@ export class SceneControl{
 
         let src = "";
         let name = "";
-        if (func == 'visible'){ //visible scenes
+        if (func == 'visible') { //visible scenes
             let nr = parseInt(settings.sceneNr);
             if (isNaN(nr) || nr < 1) nr = 1;
             nr--;
@@ -37,10 +37,7 @@ export class SceneControl{
             let scene = game.scenes.apps[0].scenes[nr];
             
             if (scene != undefined){
-                if (scene.isView) 
-                    ringColor = ringOnColor;
-                else 
-                    ringColor = ringOffColor;
+                ringColor = scene.isView ? ringOnColor : ringOffColor;
                 if (settings.displaySceneName) name = scene.name;
                 if (settings.displaySceneIcon) src = scene.img;
                 if (scene.active) name += "\n(Active)";
@@ -81,10 +78,7 @@ export class SceneControl{
             if (settings.sceneName == undefined || settings.sceneName == '') return;
             let scene = game.scenes.apps[1].entities.find(p=>p.data.name == settings.sceneName);
             if (scene != undefined){
-                if (scene.isView)
-                    ringColor = ringOnColor;
-                else 
-                    ringColor = ringOffColor;
+                ringColor = scene.isView ? ringOnColor : ringOffColor;
                 if (settings.displaySceneName) name = scene.name;
                 if (settings.displaySceneIcon) src = scene.img;
                 if (scene.active) name += "\n(Active)";
@@ -167,8 +161,7 @@ export class SceneControl{
             let scene = game.scenes.apps[1].entities.find(p=>p.data.name == settings.sceneName);
             if (scene == undefined) return;
 
-            let viewFunc = settings.sceneViewFunction;
-            if (viewFunc == undefined) viewFunc = 'view';
+            const viewFunc = settings.sceneViewFunction ? settings.sceneViewFunction : 'view';
 
             if (viewFunc == 'view'){
                 scene.view();

src/settings.js

@@ -11,7 +11,7 @@ export const registerSettings = function() {
         name: "MaterialDeck.Sett.Enable",
         scope: "global",
         config: true,
-        default: false,
+        default: true,
         type: Boolean,
         onChange: x => window.location.reload()
     });
@@ -50,6 +50,13 @@ export const registerSettings = function() {
         
     });
 
+    //Create the Help button
+    game.settings.registerMenu(MODULE.moduleName, 'helpMenu',{
+        name: "MaterialDeck.Sett.Help",
+        label: "MaterialDeck.Sett.Help",
+        type: helpMenu,
+        restricted: true
+    });
     /**
      * Playlist soundboard
      */
@@ -110,3 +117,45 @@ export const registerSettings = function() {
         restricted: true
     });
 }
+
+export class helpMenu extends FormApplication {
+    constructor(data, options) {
+        super(data, options);
+    }
+  
+    /**
+     * Default Options for this FormApplication
+     */
+    static get defaultOptions() {
+        return mergeObject(super.defaultOptions, {
+            id: "helpMenu",
+            title: "Material Deck: "+game.i18n.localize("MaterialDeck.Sett.Help"),
+            template: "./modules/MaterialDeck/templates/helpMenu.html",
+            width: "500px"
+        });
+    }
+  
+    /**
+     * Provide data to the template
+     */
+    getData() {
+      
+        return {
+           
+        } 
+    }
+  
+    /**
+     * Update on form submit
+     * @param {*} event 
+     * @param {*} formData 
+     */
+    async _updateObject(event, formData) {
+  
+    }
+  
+    activateListeners(html) {
+        super.activateListeners(html);
+        
+    }
+  }

src/soundboard.js

@@ -13,7 +13,7 @@ export class SoundboardControl{
     async updateAll(){
         if (this.active == false) return;
         for (let i=0; i<32; i++){   
-            let data = streamDeck.buttonContext[i];
+            const data = streamDeck.buttonContext[i];
             if (data == undefined || data.action != 'soundboard') continue;
             await this.update(data.settings,data.context);
         }
@@ -21,17 +21,13 @@ export class SoundboardControl{
 
     update(settings,context){
         this.active = true;
-        let mode = settings.soundboardMode;
-        if (mode == undefined) mode = 'playSound';
+        const mode = settings.soundboardMode ? settings.soundboardMode : 'playSound';
+        const background = settings.background ? settings.background : '#000000';
+        let ringColor = "#000000"
 
         let txt = "";
         let src = "";
         
-        let background = settings.background;
-        if (background == undefined) background = '#000000';
-
-        let ringColor = "#000000"
-
         if (mode == 'playSound'){ //play sound
             let soundNr = parseInt(settings.soundNr);
             if (isNaN(soundNr)) soundNr = 1;
@@ -39,28 +35,23 @@ export class SoundboardControl{
             soundNr += this.offset;
 
             let soundboardSettings = game.settings.get(MODULE.moduleName, 'soundboardSettings');
-            
-            if (this.activeSounds[soundNr]==false)
-                ringColor = soundboardSettings.colorOff[soundNr];
-            else 
-                ringColor = soundboardSettings.colorOn[soundNr];
+            ringColor = (this.activeSounds[soundNr]==false) ? soundboardSettings.colorOff[soundNr] : soundboardSettings.colorOn[soundNr];
 
             if (settings.displayName && soundboardSettings.name != undefined) txt = soundboardSettings.name[soundNr];
             if (settings.displayIcon && soundboardSettings.img != undefined) src = soundboardSettings.img[soundNr];
+
             streamDeck.setTitle(txt,context);
             streamDeck.setIcon(context,src,background,2,ringColor);
         }
         else if (mode == 'offset') { //Offset
-            let ringOffColor = settings.offRing;
-            if (ringOffColor == undefined) ringOffColor = '#000000';
-
-            let ringOnColor = settings.onRing;
-            if (ringOnColor == undefined) ringOnColor = '#00FF00';
+            const ringOffColor = settings.offRing ? settings.offRing : '#000000';
+            const ringOnColor = settings.onRing ? settings.onRing : '#00FF00';
 
             let offset = parseInt(settings.offset);
             if (isNaN(offset)) offset = 0;
             if (offset == this.offset) ringColor = ringOnColor;
             else ringColor = ringOffColor;
+
             streamDeck.setTitle(txt,context);
             streamDeck.setIcon(context,"",background,2,ringColor);
         }
@@ -68,7 +59,8 @@ export class SoundboardControl{
             let src = 'modules/MaterialDeck/img/playlist/stop.png';
             let soundPlaying = false;
             for (let i=0; i<this.activeSounds.length; i++)
-                if (this.activeSounds[i]) soundPlaying = true;
+                if (this.activeSounds[i]) 
+                    soundPlaying = true;
             if (soundPlaying)
                 streamDeck.setIcon(context,src,settings.background,2,'#00FF00',true);
             else
@@ -77,8 +69,8 @@ export class SoundboardControl{
     }
 
     keyPressDown(settings){
-        let mode = settings.soundboardMode;
-        if (mode == undefined) mode = 'playSound';
+        const mode = settings.soundboardMode ? settings.soundboardMode : 'playSound';
+
         if (mode == 'playSound') {    //Play sound
             let soundNr = parseInt(settings.soundNr);
             if (isNaN(soundNr)) soundNr = 1;
@@ -86,11 +78,9 @@ export class SoundboardControl{
             soundNr += this.offset;
 
             const playMode = game.settings.get(MODULE.moduleName,'soundboardSettings').mode[soundNr];
+            const repeat = (playMode > 0) ? true : false;
+            const play = (this.activeSounds[soundNr] == false) ? true : false;
 
-            let repeat = false;
-            if (playMode > 0) repeat = true;
-            let play = false;
-            if (this.activeSounds[soundNr] == false) play = true;
             this.playSound(soundNr,repeat,play);
         }
         else if (mode == 'offset') { //Offset
@@ -109,9 +99,10 @@ export class SoundboardControl{
     }
 
     keyPressUp(settings){
-        let mode = settings.soundboardMode;
-        if (mode == undefined) mode = 'playSound';
+        const mode = settings.soundboardMode ? settings.soundboardMode : 'playSound';
+
         if (mode != 'playSound') return;
+
         let soundNr = parseInt(settings.soundNr);
         if (isNaN(soundNr)) soundNr = 1;
         soundNr--;
@@ -125,8 +116,7 @@ export class SoundboardControl{
 
     async playSound(soundNr,repeat,play){  
         const soundBoardSettings = game.settings.get(MODULE.moduleName,'soundboardSettings');
-        let playlistId;
-        if (soundBoardSettings.selectedPlaylists != undefined) playlistId = soundBoardSettings.selectedPlaylists[soundNr];
+        const playlistId = (soundBoardSettings.selectedPlaylists != undefined) ? soundBoardSettings.selectedPlaylists[soundNr] : undefined;
         let src;
         if (playlistId == "" || playlistId == undefined) return;
         if (playlistId == 'none') return;
@@ -134,7 +124,8 @@ export class SoundboardControl{
             src = soundBoardSettings.src[soundNr];
             const ret = await FilePicker.browse("data", src, {wildcard:true});
             const files = ret.files;
-            if (files.length == 1) src = files;
+            if (files.length == 1) 
+                src = files;
             else {
                 let value = Math.floor(Math.random() * Math.floor(files.length));
                 src = files[value];

src/token.js

@@ -4,42 +4,38 @@ import {streamDeck} from "../MaterialDeck.js";
 export class TokenControl{
     constructor(){
         this.active = false;
+        this.wildcardOffset = 0;
     }
 
     async update(tokenId){
         if (this.active == false) return;
         for (let i=0; i<32; i++){   
-            let data = streamDeck.buttonContext[i];
+            const data = streamDeck.buttonContext[i];
             if (data == undefined || data.action != 'token') continue;
             await this.pushData(tokenId,data.settings,data.context);
         }
     }
 
-    pushData(tokenId,settings,context,ring=0,ringColor='#000000'){
-        let name = false;
-        let icon = false;
-        let stats =  settings.stats;
-        let background = "#000000";
+    async pushData(tokenId,settings,context,ring=0,ringColor='#000000'){
+        const name = settings.displayName ? settings.displayName : false;
+        const icon = settings.displayIcon ? settings.displayIcon : false;
+        const background = settings.background ? settings.background : "#000000";
+        const system = settings.system ? settings.system : 'dnd5e';
 
-        if (settings.displayIcon) icon = true;
-        if (settings.displayName) name = true;
-        let system = settings.system;
-        if (system == undefined) system = 'dnd5e';
-        if (system == 'demonlord') stats = settings.statsDemonlord;
+        let stats =  (system == 'demonlord') ? settings.statsDemonlord : settings.stats;
         if (stats == undefined) stats = 'none';
-        if (settings.background) background = settings.background;
-
+        
         let tokenName = "";
         let txt = "";
         let iconSrc = "";
         let overlay = false;
         if (tokenId != undefined) {
-            let token = canvas.tokens.children[0].children.find(p => p.id == tokenId);
+            const token = canvas.tokens.children[0].children.find(p => p.id == tokenId);
             tokenName = token.data.name;
             if (name) txt += tokenName;
             if (name && stats != 'none') txt += "\n";
             iconSrc = token.data.img;
-            let actor = canvas.tokens.children[0].children.find(p => p.id == tokenId).actor;
+
             if (stats == 'custom'){
                 const custom = settings.custom ? settings.custom : '';
                 let split = custom.split('[');
@@ -59,7 +55,7 @@ export class TokenControl{
                     }
             }
             else if (system == 'dnd5e' && game.system.id == 'dnd5e'){
-                let attributes = actor.data.data.attributes;
+                let attributes = token.actor.data.data.attributes;
                 if (stats == 'HP') {
                     txt += attributes.hp.value + "/" + attributes.hp.max;
                 }
@@ -101,11 +97,11 @@ export class TokenControl{
                     txt += speed;
                 }
                 else if (stats == 'Init') txt += attributes.init.total;
-                else if (stats == 'PassivePerception') txt += actor.data.data.skills.prc.passive;
-                else if (stats == 'PassiveInvestigation') txt += actor.data.data.skills.inv.passive;
+                else if (stats == 'PassivePerception') txt += token.actor.data.data.skills.prc.passive;
+                else if (stats == 'PassiveInvestigation') txt += token.actor.data.data.skills.inv.passive;
             }
             else if ((system == 'dnd3.5e' && game.system.id == 'D35E') || (system == 'pf1e' && game.system.id == 'pf1')){
-                let attributes = actor.data.data.attributes;
+                let attributes = token.actor.data.data.attributes;
                 if (stats == 'HP') txt += attributes.hp.value + "/" + attributes.hp.max;
                 else if (stats == 'TempHP') {
                     if (attributes.hp.temp == null) txt += '0';
@@ -136,7 +132,7 @@ export class TokenControl{
                 else if (stats == 'Init') txt += attributes.init.total;
             }
             else if (system == 'pf2e' && game.system.id == 'pf2e'){
-                let attributes = actor.data.data.attributes;
+                let attributes = token.actor.data.data.attributes;
                 if (stats == 'HP') txt += attributes.hp.value + "/" + attributes.hp.max;
                 else if (stats == 'TempHP') {
                     if (attributes.hp.temp == null) txt += '0';
@@ -160,11 +156,11 @@ export class TokenControl{
                 }
             }
             else if (system == 'demonlord' && game.system.id == 'demonlord'){
-                let characteristics = actor.data.data.characteristics;
-                if (statsDemonlord == 'HP') txt += characteristics.health.value + "/" + characteristics.health.max;
-                else if (statsDemonlord == 'AC') txt += characteristics.defense;
-                else if (statsDemonlord == 'Speed') txt += characteristics.speed;
-                else if (statsDemonlord == 'Init') txt += actor.data.data.fastturn ? "FAST" : "SLOW";
+                let characteristics = token.actor.data.data.characteristics;
+                if (stats == 'HP') txt += characteristics.health.value + "/" + characteristics.health.max;
+                else if (stats == 'AC') txt += characteristics.defense;
+                else if (stats == 'Speed') txt += characteristics.speed;
+                else if (stats == 'Init') txt += token.actor.data.data.fastturn ? "FAST" : "SLOW";
             }
             else {
                 //Other systems
@@ -209,8 +205,7 @@ export class TokenControl{
             else if (settings.onClick == 'condition') { //toggle condition
                 ring = 1;
                 if ((system == 'dnd5e' && game.system.id == 'dnd5e') || (system == 'dnd3.5e' && game.system.id == 'D35E') || (system == 'pf1e' && game.system.id == 'pf1')){
-                    let condition = settings.condition;
-                    if (condition == undefined) condition = 'removeAll';
+                    const condition = settings.condition ? settings.condition : 'removeAll';
                     if (condition == 'removeAll' && icon == false)
                         iconSrc = window.CONFIG.controlIcons.effects;
                     else if (icon == false) {
@@ -225,8 +220,7 @@ export class TokenControl{
                     } 
                 }
                 else if (system == 'pf2e' && game.system.id == 'pf2e') {
-                    let condition = settings.conditionPF2E;
-                    if (condition == undefined) condition = 'removeAll';
+                    const condition = settings.conditionPF2E ? settings.conditionPF2E : 'removeAll';
                     if (condition == 'removeAll' && icon == false)
                         iconSrc = window.CONFIG.controlIcons.effects;
                     else if (icon == false) {
@@ -241,8 +235,7 @@ export class TokenControl{
                     } 
                 }
                 else if (system == 'demonlord' && game.system.id == 'demonlord'){
-                    let condition = settings.conditionDemonlord;
-                    if (condition == undefined) condition = 'removeAll';
+                    const condition = settings.conditionDemonlord ? settings.conditionDemonlord : 'removeAll';
                     if (condition == 'removeAll' && icon == false)
                         iconSrc = window.CONFIG.controlIcons.effects;
                     else if (icon == false) {
@@ -260,6 +253,40 @@ export class TokenControl{
                     iconSrc = "";
                 overlay = true;
             }
+            else if (settings.onClick == 'wildcard') { //wildcard images
+                if (icon == false) return;
+                const method = settings.wildcardMethod ? settings.wildcardMethod : 'iterate';
+                let value = parseInt(settings.wildcardValue);
+                if (isNaN(value)) value = 1;
+
+                const images = await token.actor.getTokenImages();
+                let currentImgNr = 0
+                let imgNr;
+                for (let i=0; i<images.length; i++) 
+                    if (images[i] == token.data.img){
+                        currentImgNr = i;
+                        break;
+                    }
+                
+                if (method == 'iterate'){
+                    imgNr = currentImgNr + value + this.wildcardOffset;
+                    while (imgNr >= images.length) imgNr -= images.length; 
+                    while (imgNr < 0) imgNr += images.length; 
+                    iconSrc = images[imgNr];
+                }
+                else if (method == 'set'){
+                    imgNr = value - 1 + this.wildcardOffset;
+                    if (value >= images.length) iconSrc = "modules/MaterialDeck/img/black.png";
+                    else iconSrc = images[imgNr];
+                    ring = 1;
+                    if (currentImgNr == imgNr) {
+                        ring = 2;
+                        ringColor = "#FF7B00";
+                    }
+                }
+                else return;
+                
+            }
         }
         else {
             iconSrc += "";
@@ -286,27 +313,21 @@ export class TokenControl{
             }
             else if (settings.onClick == 'condition') { //toggle condition
                 if ((system == 'dnd5e' && game.system.id == 'dnd5e') || (system == 'dnd3.5e' && game.system.id == 'D35E') || (system == 'pf1e' && game.system.id == 'pf1')){
-                    let condition = settings.condition;
-                    if (condition == undefined) condition = 'removeAll';
-
+                    const condition = settings.condition ? settings.condition : 'removeAll';
                     if (condition == 'removeAll' && icon == false)
                         iconSrc = window.CONFIG.controlIcons.effects;
                     else if (icon == false) 
                         iconSrc = CONFIG.statusEffects.find(e => e.id === condition).icon;
                 }
                 else if (system == 'pf2e' && game.system.id == 'pf2e') {
-                    let condition = settings.conditionPF2E;
-                    if (condition == undefined) condition = 'removeAll';
-    
+                    const condition = settings.conditionPF2E ? settings.conditionPF2E : 'removeAll';
                     if (condition == 'removeAll' && icon == false)
                         iconSrc = window.CONFIG.controlIcons.effects;
                     else if (icon == false) 
                         iconSrc = this.pf2eCondition(condition);
                 }
                 else if (system == 'demonlord' && game.system.id == 'demonlord'){
-                    let condition = settings.conditionDemonlord;
-                    if (condition == undefined) condition = 'removeAll';
-
+                    const condition = settings.conditionDemonlord ? settings.conditionDemonlord : 'removeAll';
                     if (condition == 'removeAll' && icon == false)
                         iconSrc = window.CONFIG.controlIcons.effects;
                     else if (icon == false) 
@@ -331,7 +352,6 @@ export class TokenControl{
                 iconSrc = "modules/MaterialDeck/img/black.png";
         } 
         streamDeck.setIcon(context,iconSrc,background,ring,ringColor,overlay);
-        
         streamDeck.setTitle(txt,context);
     }
     
@@ -339,15 +359,14 @@ export class TokenControl{
         if (MODULE.selectedTokenId == undefined) return;
         const tokenId = MODULE.selectedTokenId;
 
-        let onClick = settings.onClick;
-        if (onClick == undefined) onClick = 'doNothing';
-
         const token = canvas.tokens.children[0].children.find(p => p.id == tokenId);
         if (token == undefined) return;
 
-        let system = settings.system;
-        if (system == undefined) system = 'dnd5e';
+        let system = settings.system ? settings.system : 'dnd5e';
 
+        let onClick = (system == 'demonlord') ? settings.onClickDemonlord : settings.onClick;
+        if (onClick == undefined) onClick = 'doNothing';
+        
         if (onClick == 'doNothing')   //Do nothing
             return;
         else if (onClick == 'center'){ //center on token
@@ -375,15 +394,10 @@ export class TokenControl{
         }
         else if (onClick == 'condition') {    //Toggle condition
             if ((system == 'dnd5e' && game.system.id == 'dnd5e') || (system == 'dnd3.5e' && game.system.id == 'D35E') || (system == 'pf1e' && game.system.id == 'pf1')){
-                let condition = settings.condition;
-                if (condition == undefined) condition = 'removeAll';
-
+                const condition = settings.condition ? settings.condition : 'removeAll';
                 if (condition == 'removeAll'){
-                    const effects = token.actor.effects.entries;
-                    for (let i=0; i<effects.length; i++){
-                        const effect = CONFIG.statusEffects.find(e => e.icon === effects[i].data.icon);
-                        await token.toggleEffect(effect)
-                    }
+                    for( let effect of token.actor.effects)
+                        await effect.delete();
                 }
                 else {
                     const effect = CONFIG.statusEffects.find(e => e.id === condition);
@@ -391,14 +405,10 @@ export class TokenControl{
                 }
             }
             else if (system == 'pf2e' && game.system.id == 'pf2e'){
-                let condition = settings.conditionPF2E;
-                if (condition == undefined) condition = 'removeAll';
+                const condition = settings.conditionPF2E ? settings.conditionPF2E : 'removeAll';
                 if (condition == 'removeAll'){
-                    const effects = token.actor.effects.entries;
-                    for (let i=0; i<effects.length; i++){
-                        const effect = this.pf2eCondition(condition);
-                        await token.toggleEffect(effect)
-                    }
+                    for( let effect of token.actor.effects)
+                        await effect.delete();
                 }
                 else {
                     const effect = this.pf2eCondition(condition);
@@ -406,15 +416,10 @@ export class TokenControl{
                 }
             }  
             else if (system == 'demonlord' && game.system.id == 'demonlord'){
-                let condition = settings.conditionDemonlord;
-                if (condition == undefined) condition = 'removeAll';
-
+                const condition = settings.conditionDemonlord ? settings.conditionDemonlord : 'removeAll';
                 if (condition == 'removeAll'){
-                    const effects = token.actor.effects.entries;
-                    for (let i=0; i<effects.length; i++){
-                        const effect = CONFIG.statusEffects.find(e => e.icon === effects[i].data.icon);
-                        await token.toggleEffect(effect)
-                    }
+                    for( let effect of token.actor.effects)
+                        await effect.delete();
                 }
                 else {
                     const effect = CONFIG.statusEffects.find(e => e.id === condition);
@@ -461,7 +466,6 @@ export class TokenControl{
                 animation.speed = animationSpeed;
             }
             data.lightAnimation = animation;
-
             token.update(data);
         }
         else if (system == 'demonlord' && game.system.id == 'demonlord' && onClick == 'initiative'){
@@ -470,6 +474,172 @@ export class TokenControl{
             })
             
         }
+        else if (onClick == 'wildcard') { //wildcard images
+            const method = settings.wildcardMethod ? settings.wildcardMethod : 'iterate';
+            let value = parseInt(settings.wildcardValue);
+            if (isNaN(value)) value = 1;
+
+            const images = await token.actor.getTokenImages();
+            let imgNr;
+            let iconSrc;
+            if (method == 'iterate'){
+                let currentImgNr = 0
+                for (let i=0; i<images.length; i++) 
+                    if (images[i] == token.data.img){
+                        currentImgNr = i;
+                        break;
+                    }
+                
+                imgNr = currentImgNr + value + this.wildcardOffset;
+                while (imgNr >= images.length) imgNr -= images.length;  
+                while (imgNr < 0) imgNr += images.length;   
+            }
+            else if (method == 'set'){
+                imgNr = value - 1 + this.wildcardOffset;
+                if (value >= images.length || value < 1) return;
+                
+            }
+            else if (method == 'offset'){
+                this.wildcardOffset = value;
+                this.update(MODULE.selectedTokenId);
+            }
+            else return;
+
+            iconSrc = images[imgNr];
+            token.update({img: iconSrc})
+        }
+        else if (onClick == 'custom') {//custom onClick function
+            const formula = settings.customOnClickFormula ? settings.customOnClickFormula : '';
+            if (formula == '') return;
+
+            let targetArrayTemp;
+            let formulaArrayTemp;
+            let split1 = formula.split(';');
+            for (let i=0; i<split1.length; i++){
+                let split2 = split1[i].split(' = ');
+                targetArrayTemp = split2[0];
+                formulaArrayTemp = split2[1];
+
+                let targetArray = this.splitCustom(targetArrayTemp);
+
+                for (let i=0; i<targetArray.length; i++){
+                    if (targetArray[i][0] == '@') {
+                        const dataPath = targetArray[i].split('@')[1].split('.');
+                        targetArray[i] = dataPath;
+                    } 
+                }
+
+                let formulaArray = this.splitCustom(formulaArrayTemp);
+
+                let value = 0;
+                let previousOperation = '+';
+                if (formulaArray.length == 1 && formulaArray[0][0] == '[')
+                    value = formulaArray[0].split('[')[1];
+                else if (formulaArray.length == 1)
+                    value = formulaArray[0];
+                else {
+                    for (let i=0; i<formulaArray.length; i++){
+                    let val;
+                    if (formulaArray[i][0] == '@') {
+                        let dataPath;
+                        if (formulaArray[i] == '@this') dataPath = targetArray[0];
+                        else dataPath = formulaArray[i].split('@')[1].split('.');
+                        let data = token;
+    
+                        for (let j=0; j<dataPath.length; j++)
+                                data = data?.[dataPath[j]];
+                        if (data == undefined) return;
+                        formulaArray[i] = data;
+                        val = data;
+                    }
+                    else if (isNaN(formulaArray[i])) {
+                        previousOperation = formulaArray[i];
+                        if (previousOperation == '++') value++;
+                        else if (previousOperation == '--') value--;
+                        continue;
+                    }
+                    else
+                        val = parseFloat(formulaArray[i]);
+                    if (previousOperation == '+') value += val;
+                    else if (previousOperation == '-') value -= val;
+                    else if (previousOperation == '*') value *= val;
+                    else if (previousOperation == '/') value /= val;
+                    else if (previousOperation == '**') value **= val;
+                    else if (previousOperation == '%') value %= val;
+                    else if (previousOperation == '<' && value >= val) {value = val-1;}
+                    else if (previousOperation == '>' && value <= val) {value = val+1;}
+                    else if (previousOperation == '<=' && value > val) {value = val;}
+                    else if (previousOperation == '>=' && value < val) {value = val;}
+                }
+                }
+    
+                for (let i=0; i<targetArray.length; i++){
+                    const dataPath = targetArray[i];
+                    let data;
+                    if (dataPath[0] == 'actor') {
+                        let actor = token.actor;
+    
+                        if (dataPath[1] == 'data'){
+                            let path = '';
+                            for (let j=2; j<targetArray[i].length; j++){
+                                if (path != '') path += '.';
+                                path += targetArray[i][j];
+                            }
+                            actor.update({[path]:value})
+                        }
+                        else {
+                            let path = '';
+                            for (let j=1; j<targetArray[i].length; j++){
+                                if (path != '') path += '.';
+                                path += targetArray[i][j];
+                            }
+                            actor.update({[path]:value})
+                        }
+                        
+                    }
+                    else {
+                        data = token;
+                        let path = '';
+                        for (let j=1; j<targetArray[i].length; j++){
+                            if (path != '') path += '.';
+                            path += targetArray[i][j];
+                        }
+                        token.update({[path]:value})
+                    }
+                }
+            }
+        }
+    }
+
+    splitCustom(string){
+        const split = string.split('[');
+        let array1 = [];
+        for (let i=0; i<split.length; i++){
+            if (i>0 && split[i][0] != '@' && split[i] != "" && isNaN(split[i])) split[i] = '['+split[i]
+            const split2 = split[i].split(']');
+            for (let j=0; j<split2.length; j++){
+                array1.push(split2[j]);
+            }  
+        }
+
+        let array2 = [];
+        for (let i=0; i<array1.length; i++){
+            if (array1[i][0] == '[') {
+                array2.push(array1[i]);
+                continue;
+            }
+            const split3 = array1[i].split(' ');
+            for (let j=0; j<split3.length; j++){
+                array2.push(split3[j]);
+            }  
+        }
+
+        let array3 = [];
+        for (let i=0; i<array2.length; i++){
+            if (array2[i] == "") continue;
+            array3.push(array2[i]);
+        }
+        return array3;
     }
 
     pf2eCondition(condition){

templates/helpMenu.html

@@ -0,0 +1,193 @@
+<form autocomplete="off" onsubmit="event.preventDefault()">
+
+    <div style="width:1200px">
+        <h1>Introduction</h1>
+        Material Deck is a Foundry VTT module that allows you to control certain Foundry functions using an Elgato Stream Deck. 
+        A Stream Deck is a device that has physical buttons with displays behind them. Material Deck uses this to, for example, 
+        control playlists, execute macros, display and control the combat tracker.<br><br>
+        The module allows a high degree of customization, where each button on the Stream Deck can be assigned any desired function. 
+        Furthermore, it supports folder structures, allowing easy switching between various button configurations so you can easily switch 
+        between the combat tracker, soundboard, or any other (custom) configuration.<br>
+        <br>
+        Material Deck is a very large module with tons of features and ways of customizing your experience. This menu will only cover the basics to get you started, 
+        the full documentation can be found on <a href="https://github.com/CDeenen/MaterialDeck/wiki">Github</a>. Please also check the <a href="https://github.com/CDeenen/MaterialDeck/wiki/FAQ">FAQ</a> which answers some common questions, including some basic troubleshooting.<br>
+
+        <h1>Latest Releases</h1>
+        <a href="https://github.com/CDeenen/MaterialDeck/releases">Module</a><br>
+        <a href="https://github.com/CDeenen/MaterialDeck_SD/releases">Stream Deck</a><br>
+        <a href="https://github.com/CDeenen/MaterialServer/releases">Server</a><br>
+
+        <h1>Getting Started</h1>
+        Besides installing this module, you also need to install and run some other things.
+
+        <h2>Installing the Stream Deck Software and Plugin</h2>
+        <ol>
+            <li>Download and install the <a href="https://www.elgato.com/en/gaming/downloads">Stream Deck software</a></li>
+            <li>Download the latest plugin file (com.cdeenen.materialdeck.streamDeckPlugin) from <a href="https://github.com/CDeenen/MaterialDeck_SD/releases">here</a></li>
+            <li>Double-click the file, this should open the Stream Deck software</li>
+            <li>Press 'Install' in the pop-up</li>
+        </ol>
+
+        <h2>Installing the Stream Deck Profile (optional)</h2>
+        You can create your own profile, but it is recommended to start with one of the pre-made profiles. Currently, there is a profile for the normal and XL Stream Deck variants.
+        <ol>
+            <li>Download the latest profile (ending with .streamDeckProfile) from <a href="https://github.com/CDeenen/MaterialDeck_SD/releases">here</a></li>
+            <li>Double-click the file, this should load the profile into the Stream Deck software</li>
+        </ol>
+
+        <h2>Downloading and Starting Material Server</h2>
+        Material Server acts as a bridge application, bridging the communication between the Stream Deck and Material Deck.
+        <ol>
+            <li>Download the latest version for your operating system <a href="https://github.com/CDeenen/MaterialServer/releases">here</a></li>
+            <li>Download and install the <a href="https://github.com/CDeenen/MaterialServer/blob/master/README.md#prerequisites">prerequisites</a></li>
+            <li>Extract the archive</li>
+            <li>Double-click the file to start the server</li>
+        </ol>
+        <b>You need to always have Material Server running when you want to use Material Deck</b>
+        <br>
+        <br>
+        After setting up the module settings I suggest you just play around with one of the profiles to see that happens when you press buttons and do things in Foundry.
+        Most things should be pretty self explanatory. After that you could look into customizing your experience, as you can read about below.
+        
+        <h1>Module Setup</h1>
+        <img src="modules/MaterialDeck/wiki/img/ModuleSettings.png" align="right" HSPACE="5" width="450">
+        There are four buttons at the top:
+        <ul>
+            <li>Help</li>
+            <li>Playlist Configuration</li>
+            <li>Macro Configuration</li>
+            <li>Soundboard Configuration</li>
+        </ul>
+        The help button leads you to the page you are currently reading, the other buttons will be explained below.<br>
+        <br>
+        Below the buttons you will find the following settings:
+        <ul>
+            <li><b>Enable Module</b> - Ticking this box enabled the module</li>
+            <li><b>Stream Deck Model</b> - Select the model of your Stream Deck. This is optional, as it only changes the amount of macros and sounds that 
+                you can assign in the macro and soundboard configuration screens. If you have a smaller Stream Deck, you might not want to 
+                have a screen filled with 64 macros, since you probably won't use that many (you can, if you want to, though)</li>
+            <li><b>Material Server Address</b> - Fill in the address of Material Server (usually if you run it on the same computer as 
+                you're using for Foundry, this can be localhost:3001). This is not necessarily the IP address of Foundry! It is the IP 
+                address of the computer that's running Material Server. The default value will work for 99% of people, only change it if 
+                you know what you're doing. More info on Material Server can be found <a href="https://github.com/CDeenen/MaterialServer/blob/master/README.md">here</a></li>
+            <li><b>Image Cache Size</b> - Sets the amount of images to store in the image cache. The image cache will locally store all images sent to the Stream Deck. 
+                This improves the update speed, but increases memory usage.</li>
+        </ul>
+
+        <h2>Playlist Configuration</h2>
+        <img src="modules/MaterialDeck/wiki/img/PlaylistConfig.png" align="right" HSPACE="5" width="350">
+        The playlist configuration screen configures the playlists that you control using the <a href="https://github.com/CDeenen/MaterialDeck/wiki/Playlist-Action">Playlist action</a>.<br>
+        There are 2 sections: 'Settings', and 'Playlists'.
+
+        <h3><b>Settings</b></h3>
+        <h4><b>Default Play Mode</b></h4>
+        The play mode determines what to do when a track is playing, while another track is requested. By setting it to 'Unrestricted', you can play as many tracks at the same time as you want. Setting it to 'One track per playlist' will automatically stop all playing tracks in the playlist, ensuring that only one track is playing at a time. Setting 'Play Method' to 'One track in total' will limit playback to only one track in total.<br>
+        This setting sets the default play mode, which can be overridden for each separate playlist, which will be discussed below.<br>
+        <br>
+        Options:
+        <ul>
+            <li><b>Unrestricted</b> - Play as many tracks at the same time as you want</li>
+            <li><b>One track per playlist</b> - Play only one track per playlist. Trying to start a second track will stop the other tracks in the playlist</li>
+            <li><b>One track in total</b> - Play only one track in total. Trying to start a second track will stop all other tracks that are playing</li>
+        </ul>
+        <b>Note:</b> This play method only applies if tracks are started using the Stream Deck, you can still play more tracks using Foundry's internal audio player.
+
+        <h4><b>Number of Playlists</b></h4>
+        This sets the number of playlists that will be displayed. You can make this number as high or low as you want. This only changes the amount of playlists 
+        that are displayed, not the amount of playlists that can be controlled (there is no upper limit, as long as Foundry doesn't crash).
+
+        <h3><b>Playlists</b></h3>
+        Here you can select which playlists can be controlled with the module. You can manage as many playlists as you've set at 'Number of playlists', 
+        where the playlist number corresponds with the number you have to fill in in the property inspector (see below).<br>
+        For each playlist you can set the play mode, which overrides the default play mode for that specific playlist.<br>
+        <br>
+        <b>Note:</b> While you can assign the same playlist to multiple playlists in this configuration screen, only the play method of the first instance will be applied.
+
+        <h2>Macro Configuration</h2>
+        The Macro Configuration screen is to configure the macro board for the <a href="https://github.com/CDeenen/MaterialDeck/wiki/Macro-Action">Macro action</a>.<br>
+        <br>
+        The screen is divided into a number of boxes, each labeled 'Macro #', where each represents a single macro and its settings. The number of macros you can see 
+        depends on what Stream Deck model you've set up in the module configuration.<br>
+        <br>
+        For each macro there are 3 options: 
+        <ul>
+            <li><b>Macro Selection</b> - Drop down menu from where you can select a macro from your macro directory</li>
+            <li><b>Furnace Arguments</b> - Allows you to use arguments if <a href="https://foundryvtt.com/packages/furnace/">the Furnace</a> is installed. Please read the 
+                documentation regarding advanced macros in the <a href="https://github.com/League-of-Foundry-Developers/fvtt-module-furnace#advanced-macros">README</a> of the Furnace. 
+                If, for example, you wanted to execute a macro named 'My Macro' with the arguments 'argument1 argument2 argument3', you would use for example /"My Macro" 100 50 "test" 
+                in the chat. In the macro configuration screen you would only fill in the arguments, so: 100 50 "test"</li>
+            <li><b>Background</b> - Color picker to set the background color of the Stream Deck button</li>
+        </ul>
+
+        <img src="modules/MaterialDeck/wiki/img/MacroConfig.png" align="center" HSPACE="5" width="100%">
+
+        <h2>Soundboard Configuration</h2>
+        The Soundboard Configuration screen is used to configure the soundboard for the <a href="https://github.com/CDeenen/MaterialDeck/wiki/Soundboard-Action">Soundboard action</a>.<br>
+        <br>
+        Similar to the Macro Configuration screen, the screen is divided into a number of boxes, each labeled 'Sound #', where each represents a single sound and its settings. 
+        The number of sounds you can see depends on what Stream Deck model you've set up in the module configuration.<br>
+        <br>
+        For each sound there are multiple options:
+        <ul>
+            <li><b>Name</b> - The name of the sound, this is the name that will be displayed on the SD button if 'Display Name' is selected in the property inspector. 
+                This name doesn't have to correspond with the file name of the sound, or the name that can be seen in the Foundry playlist.</li>
+            <li><b>Playlist</b> - Sets the playlist from which you want to select a sound. If you select 'File Picker', a file picker will appear instead of the sound selection drop-down menu.</li>
+            <li><b>Sound</b> - This is either a drop-down menu where you can select a sound from the selected playlist, or a file picker.
+                When using the file picker, it is possible to use wildcard names, this means that you can randomly play a sound from a selection. To do this, navigate to the folder that 
+                contains the sounds, in the textbox append the folder name with the common part of the name of the sounds you want to play, followed by an asterisk.
+                For example, if you have the sounds 'Thunder.wav', 'Thunder2.wav' and 'Thunder3.wav' in the folder 'Assets', you could fill in the following: 'Assets/Thunder*', which 
+                will play one of the three sounds randomly when you press the button on the Stream Deck.</li>
+            <li><b>Icon</b> - Here you can select an icon that will be displayed on the SD button if 'Display Icon' is selected in the property inspector.
+                Please read <a href="https://github.com/CDeenen/MaterialDeck/wiki/Getting-Started#important-notes-on-foundry-assigned-text-and-icons">these</a> notes on rules regarding icon selection.</li>
+            <li><b>On</b> - Clicking the colored box you'll be presented with a color picker. This sets the color of the ring that's shown on the button when the sound is playing.</li>
+            <li><b>Off</b> - Clicking the colored box you'll be presented with a color picker. This sets the color of the ring that's shown on the button when the sound is not playing.</li>
+            <li><b>Playback</b> - This sets the playback mode, you can select from:
+                <ul>
+                    <li>Once - Play the sound once</li>
+                    <li>Repeat - Play the sound on repeat</li>
+                    <li>Hold - Play the sound as long as the button is held down</li>
+                </ul>
+            </li>
+            <li><b>Volume</b> - The playback volume of the sound. The final playback volume is also determined by the Interface Volume slider in Foundry's 'Audio Playlists' tab.</li>
+        </ul>
+
+        <img src="modules/MaterialDeck/wiki/img/SoundboardConfig.png" align="center" HSPACE="5" width="100%">
+
+        <h1>Customization</h1>
+        Material Deck is extremely flexible, but most of this flexibility must be performed in the Stream Deck software.<br>
+        Some basic instructions on using the software can be found <a href="https://github.com/CDeenen/MaterialDeck/wiki/Getting-Started#basic-stream-deck-setup-instructions">here</a>.<br>
+        <br>
+        Some of the things you can change are:
+        <ul>
+            <li><b>Button location</b> - You can drag buttons around into any order you want</li>
+            <li><b>Changing button text and icon</b> - All the text and icons on the Stream Deck can be customized, see <a href="https://github.com/CDeenen/MaterialDeck/wiki/Getting-Started#changing-the-button-text-and-icon">here</a></li>
+            <li><b>Customize the behavior of buttons</b> - See below</li>
+        </ul>
+        All the buttons have many settings to fine-tune your experience. Due to the large amount of things you can change, they will not be discussed here, instead you can read about it at the following links:
+        <ul>
+            <li><a href="https://github.com/CDeenen/MaterialDeck/wiki/Combat-Tracker-Action">Combat Tracker Action</a></li>
+            <li><a href="https://github.com/CDeenen/MaterialDeck/wiki/External-Modules">External Modules</a></li>
+            <li><a href="https://github.com/CDeenen/MaterialDeck/wiki/Macro-Action">Macro Action</a></li>
+            <li><a href="https://github.com/CDeenen/MaterialDeck/wiki/Move-Action">Move Action</a></li>
+            <li><a href="https://github.com/CDeenen/MaterialDeck/wiki/Other-Actions">Other Actions</a></li>
+            <li><a href="https://github.com/CDeenen/MaterialDeck/wiki/Playlist-Action">Playlist Action</a></li>
+            <li><a href="https://github.com/CDeenen/MaterialDeck/wiki/Scene-Action">Scene Action</a></li>
+            <li><a href="https://github.com/CDeenen/MaterialDeck/wiki/Soundboard-Action">Soundboard Action</a></li>
+            <li><a href="https://github.com/CDeenen/MaterialDeck/wiki/Token-Action">Token Action</a></li>
+        </ul>
+
+        <h1>Software Versions & Module Incompatibilities</h1>
+        <b>Foundry VTT:</b> Tested on 0.7.9<br>
+        <b>Module Incompatibilities:</b> None known.<br>
+
+        <h1>Feedback</h1>
+        If you have any suggestions or bugs to report, feel free to create an issue, contact me on Discord (Cris#6864), or send me an email: cdeenen@outlook.com.
+
+        <h1>Credits</h1>
+        <b>Author:</b> Cristian Deenen (Cris#6864 on Discord)<br>
+        <br>
+        Special thanks to Asmodeus#7588 who made this module possible by generously donating a Stream Deck XL
+        <br>
+        Please consider supporting me on <a href="https://www.patreon.com/materialfoundry">Patreon</a>, and feel free to join the Material Foundry <a href="https://discord.gg/3hd4G6TkmA">Discord</a> server.
+    </div>    
+</form>

templates/macroConfig.html

@@ -19,13 +19,13 @@
                         <select name="macros" class="macros-select" id="macros{{this.iteration}}" default="" style="max-width:140px;">
                             {{#select this.macro}}
                                 <option value="">{{localize "MaterialDeck.None"}}</option>
-                                {{#each macros}}
+                                {{#each ../../macros}}
                                 <option value="{{this._id}}">{{this.name}}</option>
                                 {{/each}}
                             {{/select}}
                         </select>
                     </div>
-                    {{#if this.furnace}}
+                    {{#if ../../furnace}}
                         <label>{{localize "MaterialDeck.FurnaceArgs"}}</label>
                         <input type="text" name="args" id="args{{this.iteration}}" value="{{this.args}}">
                     {{/if}}

templates/playlistConfig.html

@@ -25,7 +25,7 @@
             <select name="selectedPlaylist" class="playlist-select" id="playlist{{this.iteration}}" default="">
                 {{#select this.playlist}}
                     <option value="">{{localize "MaterialDeck.None"}}</option>
-                    {{#each this.playlists}}
+                    {{#each ../playlists}}
                     <option value="{{this._id}}">{{this.name}}</option>
                     {{/each}}
                 {{/select}}

templates/soundboardConfig.html

@@ -26,7 +26,7 @@
                     <div>
                         <select name="playlist" class="playlist-select" default="" style="width:100%;" id="playlists{{this.iteration}}">
                             {{#select this.selectedPlaylist}}
-                                {{#each playlists}}
+                                {{#each ../../playlists}}
                                 <option value="{{this.id}}">{{this.name}}</option>
                                 {{/each}}
                             {{/select}}
@@ -36,17 +36,17 @@
                     <div style="text-align:center;">                    
                         {{localize "MaterialDeck.Sound"}}
                     </div>
-                    <div class="form-fields" style={{this.styleSS}}>
+                    <div class="form-fields" id="ss{{this.iteration}}" style="{{this.styleSS}}">
                         <select name="sounds" class="sounds-select" default="" style="width:100%;" id="soundSelect{{this.iteration}}">
                             {{#select this.sound}}
                                 <option value="">{{localize "MaterialDeck.None"}}</option>
                                 {{#each sounds}}
-                                <option value="{{this._id}}">{{this.name}}</option>
+                                <option value="{{this.id}}">{{this.name}}</option>
                                 {{/each}}
                             {{/select}}
                         </select>
                     </div>
-                    <div class="form-fields" style={{this.styleFP}}>
+                    <div class="form-fields" id="fp{{this.iteration}}" style="{{this.styleFP}}">
                         <button type="button" class="file-picker" data-type="audio" data-target="src{{this.iteration}}" title="Browse Files" tabindex="-1">
                             <i class="fas fa-file-import fa-fw"></i>
                         </button>