v1.2.1

MaterialDeck.js

@@ -7,30 +7,34 @@ import {CombatTracker} from "./src/combattracker.js";
 import {PlaylistControl} from "./src/playlist.js";
 import {SoundboardControl} from "./src/soundboard.js";
 import {OtherControls} from "./src/othercontrols.js";
+import {ExternalModules} from "./src/external.js";
+import {SceneControl} from "./src/scene.js";
 export var streamDeck;
 export var tokenControl;
 var move;
 export var macroControl;
-var combatTracker;
-var playlistControl;
-var soundboard;
-var otherControls;
+export var combatTracker;
+export var playlistControl;
+export var soundboard;
+export var otherControls;
+export var externalModules;
+export var sceneControl;
 
 export const moduleName = "MaterialDeck";
 export var selectedTokenId;
 
 let ready = false;
+let activeSounds = [];
+       
 //CONFIG.debug.hooks = true;
 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 //
 // Global variables
 //
 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-var enableModule;
+export var enableModule;
 
 //Websocket variables
-let ip = "localhost";       //Ip address of the websocket server
-let port = "3003";                //Port of the websocket server
 var ws;                         //Websocket variable
 let wsOpen = false;             //Bool for checking if websocket has ever been opened => changes the warning message if there's no connection
 let wsInterval;                 //Interval timer to detect disconnections
@@ -41,11 +45,18 @@ let WSconnected = false;
  * 
  * @param {*} msg Message received
  */
-async function analyzeWSmessage(msg,passthrough = false){
+async function analyzeWSmessage(msg){
     if (enableModule == false) return;
     const data = JSON.parse(msg);
+    //console.log("Received",data);
+
+    if (data.type == "connected" && data.data == "SD"){
+        console.log("streamdeck connected to server");
+        streamDeck.resetImageBuffer();
+    }
+
     if (data == undefined || data.payload == undefined) return;
-    console.log(data);  
+    //console.log("Received",data);
     const action = data.action;
     const event = data.event;
     const context = data.context;
@@ -53,7 +64,6 @@ async function analyzeWSmessage(msg,passthrough = false){
     if (coordinates == undefined) coordinates = 0;
     const settings = data.payload.settings;
 
-    
     if (data.data == 'init'){
 
     }
@@ -62,9 +72,11 @@ async function analyzeWSmessage(msg,passthrough = false){
         streamDeck.setContext(action,context,coordinates,settings);
 
         if (action == 'token'){
-            if (selectedTokenId != undefined)
-                tokenControl.update(selectedTokenId);
-        }
+            tokenControl.active = true;
+            tokenControl.update(selectedTokenId);
+        }  
+        else if (action == 'move')
+            move.update(settings,context);
         else if (action == 'macro')
             macroControl.update(settings,context);
         else if (action == 'combattracker')
@@ -75,6 +87,10 @@ async function analyzeWSmessage(msg,passthrough = false){
             soundboard.update(settings,context); 
         else if (action == 'other')
             otherControls.update(settings,context);
+        else if (action == 'external')
+            externalModules.update(settings,context);
+        else if (action == 'scene')
+            sceneControl.update(settings,context);
     }
     
     else if (event == 'willDisappear'){
@@ -92,17 +108,20 @@ async function analyzeWSmessage(msg,passthrough = false){
             combatTracker.keyPress(settings,context);
         else if (action == 'playlist')
             playlistControl.keyPress(settings,context);
-        else if (action == 'soundboard'){
+        else if (action == 'soundboard')
             soundboard.keyPressDown(settings);
-        }
+        else if (action == 'other')
+            otherControls.keyPress(settings,context);
+        else if (action == 'external')
+            externalModules.keyPress(settings,context);
+        else if (action == 'scene')
+            sceneControl.keyPress(settings);
     }
 
     else if (event == 'keyUp'){
         if (action == 'soundboard'){
             soundboard.keyPressUp(settings);
         }
-        else if (action == 'other')
-            otherControls.keyPress(settings);
     }
 };
 
@@ -113,12 +132,11 @@ async function analyzeWSmessage(msg,passthrough = false){
  * If message is received, reset the interval, and send the message to analyzeWSmessage()
  */
 function startWebsocket() {
-    //ip = localhost;
-    ws = new WebSocket('ws://'+ip+':'+port+'/1');
+    const address = game.settings.get(moduleName,'address');
+    ws = new WebSocket('ws://'+address+'/');
 
     ws.onmessage = function(msg){
         //console.log(msg);
-        
         analyzeWSmessage(msg.data);
         clearInterval(wsInterval);
         wsInterval = setInterval(resetWS, 5000);
@@ -126,12 +144,18 @@ function startWebsocket() {
 
     ws.onopen = function() {
         WSconnected = true;
-        ui.notifications.info("Material Deck Connected: "+ip+':'+port);
+        ui.notifications.info("Material Deck "+game.i18n.localize("MaterialDeck.Notifications.Connected") +": "+address);
         wsOpen = true;
-        let msg = {
-            type: "Foundry"
+        const msg = {
+            target: "server",
+            module: "MD"
         }
         ws.send(JSON.stringify(msg));
+        const msg2 = {
+            target: "SD",
+            type: "init"
+        }
+        ws.send(JSON.stringify(msg2));
         clearInterval(wsInterval);
         wsInterval = setInterval(resetWS, 5000);
     }
@@ -167,30 +191,33 @@ export function sendWS(txt){
  */
 Hooks.once('ready', ()=>{
     enableModule = (game.settings.get(moduleName,'Enable')) ? true : false;
-    if (enableModule == false) return;
     
     game.socket.on(`module.MaterialDeck`, (payload) =>{
         //console.log(payload);
         if (payload.msgType != "playSound") return;
-        playTrack(payload.trackNr,payload.play,payload.repeat,payload.volume);  
+        playTrack(payload.trackNr,payload.src,payload.play,payload.repeat,payload.volume);  
     });
 
+    for (let i=0; i<64; i++)
+        activeSounds[i] = false;
+
+    if (enableModule == false) return;
     if (game.user.isGM == false) {
         ready = true;
         return;
     }
     
     startWebsocket();
-
+    soundboard = new SoundboardControl();
     streamDeck = new StreamDeck();
     tokenControl = new TokenControl();
     move = new Move();
     macroControl = new MacroControl();
     combatTracker = new CombatTracker();
     playlistControl = new PlaylistControl();
-    soundboard = new SoundboardControl();
     otherControls = new OtherControls();
-
+    externalModules = new ExternalModules();
+    sceneControl = new SceneControl();
 
     let soundBoardSettings = game.settings.get(moduleName,'soundboardSettings');
     let macroSettings = game.settings.get(moduleName, 'macroSettings');
@@ -221,18 +248,9 @@ Hooks.once('ready', ()=>{
     
 });
 
-export function playTrack(soundNr,play,repeat,volume){
+export function playTrack(soundNr,src,play,repeat,volume){
     if (play){
-        let trackId = game.settings.get(moduleName,'soundboardSettings').sounds[soundNr];
-        let playlistId = game.settings.get(moduleName,'soundboardSettings').playlist;
-        let sounds = game.playlists.entities.find(p => p._id == playlistId).data.sounds;
-        let sound = sounds.find(p => p._id == trackId);
-        if (sound == undefined){
-            activeSounds[soundNr] = false;
-            return;
-        }
         volume *= game.settings.get("core", "globalInterfaceVolume");
-        let src = sound.path;
 
         let howl = new Howl({src, volume, loop: repeat, onend: (id)=>{
             if (repeat == false){
@@ -246,7 +264,8 @@ export function playTrack(soundNr,play,repeat,volume){
         activeSounds[soundNr] = howl;
    }
    else {
-       activeSounds[soundNr].stop();
+        activeSounds[soundNr].stop();
+        activeSounds[soundNr] = false;
    }
 }
 
@@ -257,6 +276,18 @@ Hooks.on('updateToken',(scene,token)=>{
         tokenControl.update(selectedTokenId);
 });
 
+Hooks.on('updateActor',(scene,actor)=>{
+    if (enableModule == false || ready == false) return;
+    let children = canvas.tokens.children[0].children;
+    for (let i=0; i<children.length; i++){
+        if (children[i].actor.id == actor._id){
+            let tokenId = children[i].id;
+            if (tokenId == selectedTokenId)
+                tokenControl.update(selectedTokenId);
+        }
+    }
+});
+
 Hooks.on('controlToken',(token,controlled)=>{
     if (enableModule == false || ready == false) return;
     if (controlled) {
@@ -270,17 +301,18 @@ Hooks.on('controlToken',(token,controlled)=>{
 
 Hooks.on('renderHotbar', (hotbar)=>{
     if (enableModule == false || ready == false) return;
-    macroControl.hotbar(hotbar.macros);
+    if (macroControl != undefined) macroControl.hotbar(hotbar.macros);
 });
 
 Hooks.on('renderCombatTracker',()=>{
     if (enableModule == false || ready == false) return;
-    combatTracker.updateAll();
+    if (combatTracker != undefined) combatTracker.updateAll();
+    if (tokenControl != undefined) tokenControl.update(selectedTokenId);
 });
 
 Hooks.on('renderPlaylistDirectory', (playlistDirectory)=>{
     if (enableModule == false || ready == false) return;
-    playlistControl.updateAll();
+    if (playlistControl != undefined) playlistControl.updateAll();
 });
 
 Hooks.on('closeplaylistConfigForm', (form)=>{
@@ -296,52 +328,57 @@ Hooks.on('pauseGame',()=>{
 
 Hooks.on('renderSidebarTab',()=>{
     if (enableModule == false || ready == false) return;
-    otherControls.updateAll();
+    if (otherControls != undefined) otherControls.updateAll();
+    if (sceneControl != undefined) sceneControl.updateAll();
 });
 
 Hooks.on('updateScene',()=>{
     if (enableModule == false || ready == false) return;
+    sceneControl.updateAll();
+    externalModules.updateAll();
     otherControls.updateAll();
 });
 
 Hooks.on('renderSceneControls',()=>{
+    if (enableModule == false || ready == false || otherControls == undefined) return;
+    otherControls.updateAll();
+});
+
+Hooks.on('targetToken',(user,token,targeted)=>{
+    if (enableModule == false || ready == false) return;
+    if (token.id == selectedTokenId) tokenControl.update(selectedTokenId);
+});
+
+Hooks.on('sidebarCollapse',()=>{
     if (enableModule == false || ready == false) return;
     otherControls.updateAll();
 });
 
-  Hooks.once('init', ()=>{
+Hooks.on('renderCompendium',()=>{
+    if (enableModule == false || ready == false) return;
+    otherControls.updateAll();
+});
+
+Hooks.on('closeCompendium',()=>{
+    if (enableModule == false || ready == false) return;
+    otherControls.updateAll();
+});
+
+Hooks.on('renderJournalSheet',()=>{
+    if (enableModule == false || ready == false) return;
+    otherControls.updateAll();
+});
+
+Hooks.on('closeJournalSheet',()=>{
+    if (enableModule == false || ready == false) return;
+    otherControls.updateAll();
+});
+
+Hooks.once('init', ()=>{
     //CONFIG.debug.hooks = true;
     registerSettings(); //in ./src/settings.js
 });
 
 Hooks.once('canvasReady',()=>{
     ready = true;
-});
-
-export function getFromJSONArray(data,i){
-    if (i>9) return 'nul';
-    let val;
-    if (i == 0) val = data.a;
-    else if (i == 1) val = data.a;
-    else if (i == 2) val = data.c;
-    else if (i == 3) val = data.d;
-    else if (i == 4) val = data.e;
-    else if (i == 5) val = data.f;
-    else if (i == 6) val = data.g;
-    else if (i == 7) val = data.h;
-    else if (i == 8) val = data.i;
-    return val;
-}
-
-export function setToJSONArray(data,i,val){
-    if (i>9) return 'nul';
-    if (i == 0) data.a = val;
-    else if (i == 1) data.b = val;
-    else if (i == 2) data.c = val;
-    else if (i == 3) data.d = val;
-    else if (i == 4) data.e = val;
-    else if (i == 5) data.f = val;
-    else if (i == 6) data.g = val;
-    else if (i == 7) data.h = val;
-    else if (i == 8) data.i = val;
-}
+});

README.md

@@ -1,12 +1,98 @@
-# Stream Deck
-Material Deck is a Foundry VTT module that allows you to control certain Foundry functions using an Elgato Stream Deck.
+<b>Note:</b> At the moment Windows and OSX support has been confirmed. Linux support is unknown, there is no official Linux support for the Stream Deck, but there exist a 3rd party <a href="https://timothycrosley.com/project-7-streamdeck_ui">Stream Deck UI</a> that might be compatible.<br>
+<b>In any case: Proceed at your own risk, I will not take any responsibility if you spent money and the module doesn't work!</b>
 
-## Instructions
-Instructions are on the <a href="https://github.com/CDeenen/MaterialDeck/wiki">wiki</a>.
+<b>Please read the documentation carefully, especially if you want to modify the default profile!</b>
+
+I created a <a href="https://discord.gg/3hd4G6TkmA">Discord server</a> to discuss this and other hardware-based Foundry modules. Feel free to join if you'd like to join the discussion and be updated on this module.
+
+[![Youtube Video](https://github.com/CDeenen/MaterialDeck/blob/Master/wiki/img/Youtube.png)](https://youtu.be/7h5Ew8cJYxg "FoundryVTT Material Deck Demonstration")
+
+# Material Deck
+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>
+The functions are categorized into actions. Here is a list of the available actions and their most important functions:
+<ul>
+  <li>Playlist Action: Control Foundry's playlists</li>
+  <ul>
+    <li>Play/Stop playlists</li>
+    <li>Play/Stop tracks</li>
+    <li>Stop all tracks & playlists</li>
+  </ul>
+  <li>Soundboard Action: Play sounds</li>
+  <ul>
+    <li>Play/Stop sound</li>
+    <li>Stop all sounds</li>
+  </ul>
+  <li>Token Action: Display token info</li>
+  <ul>
+    <li>Display selected token's name, icon or stats (HP/AC/Movement/etc)</li>
+    <li>Open selected token's character sheet or token config</li>
+    <li>Target token</li>
+    <li>Toggle token visibility, combat state, conditions</li>
+  </ul>
+  <li>Move Action: Move selected token or the canvas</li>
+  <ul>
+    <li>Move token (in a specified direction)</li>
+    <li>Move canvas (in a specified direction)</li>
+    <li>Zoom canvas in/out</li>
+  </ul>
+  <li>Macro Actions: Execute macros</li>
+  <ul>
+    <li>Execute macro from hotbar</li>
+    <li>Execute macro from macro board</li>
+  </ul>
+  <li>Combat Tracker Actions: Control and display the combat tracker</li>
+  <ul>
+    <li>Display combatants</li>
+    <li>Start/Stop combat</li>
+    <li>Next/Previous turn/round</li>
+  </ul>
+  <li>Other Actions: Misc other actions</li>
+  <ul>
+    <li>Pause/Resume game</li>
+    <li>Scene selection/activation</li>
+    <li>Toggle control buttons</li>
+    <li>Control darkness level</li>
+    <li>Open/Roll from a roll table</li>
+    <li>Open sidebar tab</li>
+    <li>Open compendium pack</li>
+    <li>Open journal entry</li>
+  </ul>
+</ul>
+  
+## Instructions and More Info
+Instructions and more info can be found in the <a href="https://github.com/CDeenen/MaterialDeck/wiki">wiki</a>.
 
 ## Latest releases
 <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/MaterialDeck_Server/releases">Server</a><br>
+<a href="https://github.com/CDeenen/MaterialServer/releases">Server</a><br>
 <br>
 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>Module Incompatibilities:</b> None known.<br>
+
+## Feedback
+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.
+
+## Credits
+<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.
+
+## Abandonment
+Abandoned modules are a (potential) problem for Foundry, because users and/or other modules might rely on abandoned modules, which might break in future Foundry updates.<br>
+I consider this module abandoned if all of the below cases apply:
+<ul>
+  <li>This module/github page has not received any updates in at least 3 months</li>
+  <li>I have not posted anything on "the Foundry", "the League of Extraordinary Foundry VTT Developers" or the "Material Foundry" Discord servers in at least 3 months</li>
+  <li>I have not responded to emails or PMs on Discord in at least 1 month</li>
+  <li>I have not announced a temporary break from development, unless the announced end date of this break has been passed by at least 3 months</li>
+</ul>
+If the above cases apply (as judged by the "League of Extraordinary Foundry VTT Developers" admins), I give permission to the "League of Extraordinary Foundry VTT Developers" admins to assign one or more developers to take over this module, including requesting the Foundry team to reassign the module to the new developer(s).<br>
+I require the "League of Extraordinary Foundry VTT Developers" admins to send me an email 2 weeks before the reassignment takes place, to give me one last chance to prevent the reassignment.<br>
+I require to be credited for my work in all future releases.

changelog.md

@@ -1,6 +1,186 @@
 # Changelog Material Deck Module
+### 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>
+Additions:
+<ul>
+<li>EXPERIMENTAL: Added an image buffer to prevent resending of images that have already been sent, giving a slight performance boost. Buffer size can be set in the module settings</li>
+<li>Token Action => Display Stats: Added option to select a data path for an attribute</li>
+<li>External Modules => GM Screen: Open and close the GM screen. Link to module: https://foundryvtt.com/packages/gm-screen/</li>
+<li>Other Actions => Roll dice: Roll dice in foundry and select between public roll, private roll, or displaying result on the SD</li>
+<li>Scene Action: Added way to create scene selection screen similar to soundboard/macro board. New functions to do this: 'Scene Directory' and 'Scene Offset'</li>
+<li>Scene Action: Added 'Active Scene' function</li>
+<li>Move Action => Selected Token: Added rotate to and rotate by functions</li>
+<li>Token Action => On Click: Added 'Set Vision' option to set the token's vision and light emission</li>
+<li>Other Actions => Send Chat Message: Send a message to the Foundry chat</li>
+</ul>
+Other Changes:
+<ul>
+<li>Plugin: Scene Action created that replaces Other Actions => Scene Selection</li>
+<li>Plugin: Scene Action: Changed 'Any Scene' to 'Scene by Name'</li>
+<li>Plugin: Actions are now ordered alphabetically</li>
+<li>Plugin: Replaced color strings with color pickers</li>
+<li>Various minor bug fixes</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.1: https://github.com/CDeenen/MaterialDeck_SD/releases<br>
+
+### v1.2.0 - 28-12-2020
+Fixes
+<ul>
+<li>Incorrect link to some black backgrounds fixed</li>
+<li>Token Action: Movement speed wouldn't be displayed for DnD5e 1.2.0</li>
+<li>Macro Action => Hotbar: 10th macro would not trigger and display correctly</li>
+<li>Combat Tracker Action => Function: Default value would not properly initialize</li>
+<li>Other Actions => Darkness Control => Display would not function correctly</li>
+<li>Fixed some issues in the SD plugin where correct settings would not be displayed</li>
+</ul>
+Additions:
+<ul>
+<li>Added new 'External Modules Action', which will contain all module integrations that don't fit anywhere else</li>
+<li>Added support for the Custom Hotbar module in 'Macro Action' => Mode: 'Custom Hotbar'. Link to module: https://foundryvtt.com/packages/custom-hotbar/</li>
+<li>Added support for the FxMaster module in 'External Modules Action' => Mode: 'Fx Master'. Link to module: https://foundryvtt.com/packages/fxmaster/</li>
+</ul>
+
+### v1.1.1 - 12-12-2020
+Fixes
+<ul>
+<li>Fixed issue where deleting a playlist would cause an error preventing the Soundboard Configuration to show 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.1.0 (unchanged): https://github.com/CDeenen/MaterialDeck_SD/releases<br>
+
+### v1.1.0 - 09-12-2020
+Fixes
+<ul>
+<li>Settings would not show for Combat Tracker action</li>
+<li>Macro Action => Macro Board default settings fixed</li>
+<li>API has been improved, making integration with other hardware/software easier, and making future changes/additions easier</li>
+</ul>
+Additions:
+<ul>
+<li>Added support for Pathfinder 1e and Shadow of the Demon Lord</li>
+<li>All dialogs that are openable using the SD can now be closed by pressing the button while the dialog is open</li>
+<li>Playlist Action & Soundboard Action => Stop All now indicates if there are tracks/playlists/sounds playing</li>
+<li>Confirmed Foundry 0.7.8 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.1.0: https://github.com/CDeenen/MaterialDeck_SD/releases<br>
+
+### V1.0.1 - 26-11-2020
+<ul>
+<li>Fixed issue where macro from macroboard wouldn't execute if furnace arguments were not defined</li>
+<li>Fixed issue where soundboard wouldn't save if no previous data existed for that sound</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.0.0 (unchanged): https://github.com/CDeenen/MaterialDeck_SD/releases<br>
+
+### v1.0.0 - 24-11-2020
+Release
+<ul>
+<li>Fixed issue where the last column in 'Soundboard Configuration' would not work properly</li>
+</ul>
+
+<b>Compatible server app and SD plugin:</b><br>
+Material Server v1.0.2: https://github.com/CDeenen/MaterialServer/releases <br>
+SD plugin v1.0.0: https://github.com/CDeenen/MaterialDeck_SD/releases<br>
+
+### v0.9.2 - 24-11-2020
+<ul>
+<li>Removed unnecessary errors when module is not fully configured</li>
+<li>Solved issue that soundboard config couldn't be saved on a world that hadn't run Material Deck previously</li>
+</ul>
+
+### v0.9.1 - 23-11-2020
+<ul>
+<li>Fixed 'Playlist' action issue where 'TrackNr' wouldn't show</li>
+<li>Fixed 'Soundboard Configuration' issue where changing the playlist would reset everything you've changed since last save</li>
+<li>'Soundboard Configuration', 'Macro Configuration' and 'Playlist Configuration' now save after each change, and update the SD instantly</li>
+<li>Save button has been removed from configuration screens, since it is now redundant</li>
+<li>Added support for DnD3.5e and Pathfinder 2e</li>
+</ul>
+
+<b>Note1:</b> In 'Macro Configuration', previously saved Furnace arguments have to be filled in again.<br>
+<b>Note2:</b> Any settings set in 'Playlist Configuration' have to be set again<br>
+<br>
+<b>Compatible server app and SD plugin:</b><br>
+Material Server v1.0.1 (unchanged): https://github.com/CDeenen/MaterialServer/releases <br>
+SD plugin v0.9.1: https://github.com/CDeenen/MaterialDeck_SD/releases<br>
+
+### v0.9.0 - 19-11-2020
+<ul>
+<li>Added support for more playlists</li>
+<li>Added playmode setting for each playlist, which overrides the default playmode</li>
+<li>Added option to use the file picker to select Soundboard sounds, including support for wildcard names</li>
+<li>Fixed issue where macro config screen would not close if the module was disabled</li>
+<li>Fixed issue where the layout of the configuration screens would be messed up depending on browser/screen size</li>
+<li>Added option to open compendia and journal entries</li>
+</ul>
+
+<b>Compatible server app and SD plugin:</b><br>
+Material Server v1.0.1: https://github.com/CDeenen/MaterialServer/releases <br>
+SD plugin v0.9.0: https://github.com/CDeenen/MaterialDeck_SD/releases<br>
+
+### v0.8.6 - 18-11-2020
+<ul>
+<li>Added support for the new Material Server app</li>
+</ul>
+
+<b>Compatible server app and SD plugin:</b><br>
+Material Server v1.0.0: https://github.com/CDeenen/MaterialServer/releases <br>
+SD plugin v0.7.3: https://github.com/CDeenen/MaterialDeck_SD/releases<br>
+
+### v0.8.5 - 17-11-2020
+<ul>
+<li>Added 'Display Icon' to Macro action</li>
+<li>Removed background option from 'Macro' => 'Macro Board' => 'Trigger Macro', this is handled in the macro configuration screen</li>
+<li>Added 'Background' option in 'Macro' => 'Macro Board' => 'Offset'</li>
+<li>Fixed control buttons from not performing action when clicked</li>
+<li>Added check for each function to prevent unnecessary searching through the button buffer</li>
+<li>Added 'Target', 'Visibility', 'Toggle Combat State' and 'Set Condition' options to the 'Token' action (under 'on click')</li>
+<li>Added 'Zoom In' and 'Zoom Out' functions to 'Move' action</li>
+<li>Added ability to load icons from web sources</li>
+<li>Added support for localization (module only)</li>
+<li>Fixed issue where SD buttons would not load properly if Foundry was initialized before the SD, or if Foundry was refreshed</li>
+<li>Long words now split up onto multiple lines</li>
+<li>Confirmed compatibility with Foundry v0.7.7</li>
+</ul>
+<b>Compatible server app and SD plugin:</b><br>
+Server v0.2.4 (no change)<br>
+SD plugin v0.7.2<br>
+
+### v0.8.4 - 11-11-2020
+<ul>
+<li>In 'Other' action, 'Control Button' mode, add 'Displayed Controls' option</li>
+<li>Change 'Other', 'Playlist' and 'Soundboard' actions from background color change to ring color</li>
+<li>Macro board fixed</li>
+<li>Added proper background color options for 'Other' action</li>
+<li>In 'Other' action, control button icons are now properly centered</li>
+<li>Newly created actions now show the correct options at the start</li>
+</ul>
+<b>Compatible server app and SD plugin:</b><br>
+Server v0.2.4 (no change)<br>
+SD plugin v0.7.1<br>
+
 ### v0.8.3 - 10-11-2020
-Fixed compatibility with tokenizer
+<ul>
+<li>Fixed compatibility with tokenizer</li>
+</ul>
+<b>Compatible server app and SD plugin:</b><br>
+Server v0.2.4<br>
+SD plugin v0.7.0<br>
 
 ### v0.8.2 - 10-11-2020
-Beta release
+<ul>
+<li>Initial beta release</li>
+</ul>
+<b>Compatible server app and SD plugin:</b><br>
+Server v0.2.4<br>
+SD plugin v0.7.1<br>

img/combattracker/SOURCES.txt

@@ -0,0 +1,5 @@
+combattracker.png: Edited from https://fontawesome.com/icons/fist-raised?style=solid
+nextturn.png, previousturn.png: Edited from https://fontawesome.com/icons/arrow-right?style=solid
+nextround.png, previousround.png: Edited from https://fontawesome.com/icons/step-forward?style=solid
+startcombat.png: Edited from https://fontawesome.com/icons/play?style=solid
+stopcombat.png: Edited from https://fontawesome.com/icons/stop?style=solid

img/external/SOURCES.txt

@@ -0,0 +1,2 @@
+external.png: Edited from https://fontawesome.com/icons/external-link-alt?style=solid
+fxmaster.png: Edited from https://fontawesome.com/icons/magic?style=solid

img/macro/SOURCES.txt

@@ -0,0 +1 @@
+macro.png: Foundry's icon folder, converted from .svg, original name: dice-target.svg

img/move/SOURCES.txt

@@ -0,0 +1,3 @@
+center.png: made by me.
+rotatecw.png & rotateccw.png Edited from https://fontawesome.com/icons/sync-alt?style=solid.
+All other images taken from freepngimg.com, iverted color and rotated. Source: https://freepngimg.com/png/24691-right-arrow-hd

img/other/SOURCES.txt

@@ -0,0 +1,2 @@
+other.png: Made using https://www.elgato.com/en/gaming/keycreator
+cogs.png: Edited from https://fontawesome.com/icons/cogs?style=solid

img/other/darkness/SOURCES.txt

@@ -0,0 +1,2 @@
+decreasedarkness.png: Made using https://www.elgato.com/en/gaming/keycreator
+increasedarkness.png: Made using https://www.elgato.com/en/gaming/keycreator

img/other/pause/SOURCES.txt

@@ -0,0 +1,3 @@
+resume.png: Edited from https://fontawesome.com/icons/play?style=solid
+pause.png: Edited from https://fontawesome.com/icons/pause?style=solid
+playpause.png: Combined resume.png and pause.png

img/playlist/SOURCES.txt

@@ -0,0 +1,2 @@
+play.png: Edited from https://fontawesome.com/icons/play?style=solid
+stop.png: Edited from https://fontawesome.com/icons/stop?style=solid

img/soundboard/SOURCES.txt

@@ -0,0 +1,2 @@
+soundboard.png: Edited from https://fontawesome.com/icons/music?style=solid
+play.png: Edited from https://fontawesome.com/icons/play?style=solid

img/token/SOURCES.txt

@@ -0,0 +1,5 @@
+ac.webp: Foundry's icon folder, original name: heater-steel-worn.webp
+hp.png: made using Elgato's key creator: https://www.elgato.com/en/gaming/keycreator
+init.png: freepngimg.com, color inverted, from: https://freepngimg.com/png/81025-art-dice-dungeons-system-dragons-d20-triangle/icon
+speed.webp: Foundry's icon folder, original name: shoes-collared-leather-blue.webp
+mystery-man.png: Foundry's icon folder, converted from .svg

lang/en.json

@@ -1,39 +1,50 @@
 {
-    "MaterialDeck.Notifications.Disconnected": "Disconnected from mdServer, attempting to reconnect",
-    "MaterialDeck.Notifications.ConnectFail": "Can't connect to mdServer, retrying",
-
-    "MaterialDeck.Sett.PlaylistConfig": "Playlist Configuration",
-    "MaterialDeck.Sett.SoundboardConfig": "Soundboard Configuration",
-    "MaterialDeck.Sett.MacroConfig": "Macro Configuration",
-    "MaterialDeck.Sett.Brightness": "Brightness",
-    "MaterialDeck.Sett.Brightness_Hint": "LED brightness level",
-    "MaterialDeck.Sett.Enable": "Enable module",
+    "MaterialDeck.Notifications.Disconnected": "Disconnected from Material Server, attempting to reconnect",
+    "MaterialDeck.Notifications.ConnectFail": "Can't connect to Material Server, retrying",
+    "MaterialDeck.Notifications.Connected": "Connected",
     
-    "MaterialDeck.Playlist.Clear": "Clear data",
-    "MaterialDeck.Playlist.Playmethod.Header": "Play Method",
-    "MaterialDeck.Playlist.Playmethod.Label": "Method",
-    "MaterialDeck.Playlist.Playmethod.Unrestricted": "Unrestricted",
-    "MaterialDeck.Playlist.Playmethod.OneTrackPlaylist": "One track per playlist",
-    "MaterialDeck.Playlist.Playmethod.OneTrackTotal": "One track in total",
-    "MaterialDeck.Playlist.Playlists": "Playlists",
-    "MaterialDeck.Playlist.Playlist": "Playlist",
-    "MaterialDeck.Playlist.None": "None",
-    "MaterialDeck.Playlist.Save": "Save",
-    "MaterialDeck.Soundboard.Volume": "Volume",
+    "MaterialDeck.Sett.Enable": "Enable module",
+    "MaterialDeck.Sett.Model": "Stream Deck Model",
+    "MaterialDeck.Sett.Model_Hint": "Reduces the amount of macros and sounds in the macro and soundboard configuration screens. Gives a better overview, but if desired it can be set to XL to get the maximum number. This doesn't influence the operation of the module.",
+    "MaterialDeck.Sett.Model_Mini": "Mini",
+    "MaterialDeck.Sett.Model_Normal": "Normal or Mobile",
+    "MaterialDeck.Sett.Model_XL": "XL",
+    "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.Soundboard.Sound": "Sound",
-    "MaterialDeck.Soundboard.Icon": "Icon",
-    "MaterialDeck.Soundboard.Playback": "Playback",
-    "MaterialDeck.Soundboard.Once": "Once",
-    "MaterialDeck.Soundboard.Repeat": "Repeat",
-    "MaterialDeck.Soundboard.Hold": "Hold",
-    "MaterialDeck.Soundboard.On": "On",
-    "MaterialDeck.Soundboard.Off": "Off",
+    "MaterialDeck.PL.Unrestricted": "Unrestricted",
+    "MaterialDeck.PL.OneTrackPlaylist": "One track per playlist",
+    "MaterialDeck.PL.OneTrackTotal": "One track in total",
+    "MaterialDeck.PL.OneTrack": "One track",
+    "MaterialDeck.PL.Settings": "Settings",
+    "MaterialDeck.PL.Mode": "Default Play Mode",
+    "MaterialDeck.PL.Nr": "Number of playlists",
+    
+    "MaterialDeck.Playlists": "Playlists",
+    "MaterialDeck.Playlist": "Playlist",
+    "MaterialDeck.FilePicker": "File Picker",
+    "MaterialDeck.FurnaceArgs": "Furnace arguments",
+    "MaterialDeck.Background": "Background",
+    "MaterialDeck.Macro": "Macro",
+    "MaterialDeck.Sound": "Sound",
+    "MaterialDeck.Icon": "Icon",
+    "MaterialDeck.Once": "Once",
+    "MaterialDeck.Repeat": "Repeat",
+    "MaterialDeck.Hold": "Hold",
+    "MaterialDeck.Playback": "Playback",
+    "MaterialDeck.Volume": "Volume",
+    "MaterialDeck.On": "On",
+    "MaterialDeck.Off": "Off",
+    "MaterialDeck.Name": "Name",
+    "MaterialDeck.None": "None",
+    "MaterialDeck.Save": "Save",
 
-    "MaterialDeck.Macro.Macro": "Macro",
-    "MaterialDeck.Macro.Background": "Background",
-    "MaterialDeck.Macro.FurnaceArgs": "Furnace arguments",
-
-    "MaterialDeck.Name": "Name"
+    "MaterialDeck.FxMaster.Colorize": "Colorize",
+    "MaterialDeck.FxMaster.Clear": "Clear All"
 }
 

module.json

@@ -1,15 +1,15 @@
 {
     "name": "MaterialDeck",
     "title": "Material Deck",
-    "description": "",
-    "version": "0.8.2",
+    "description": "Material Deck allows you to control Foundry using an Elgato Stream Deck",
+    "version": "1.2.1",
     "author": "CDeenen",
     "esmodules": [
       "./MaterialDeck.js"
     ],
     "socket": true,
     "minimumCoreVersion": "0.7.5",
-    "compatibleCoreVersion": "0.7.6",
+    "compatibleCoreVersion": "0.7.9",
     "languages": [
       {
         "lang": "en",

src/combattracker.js

@@ -3,11 +3,12 @@ import {streamDeck, tokenControl} from "../MaterialDeck.js";
 
 export class CombatTracker{
     constructor(){
+        this.active = false;
         this.combatantLength = 0;
     }
 
     async updateAll(){
-
+        if (this.active == false) return;
         for (let i=0; i<32; i++){   
             let data = streamDeck.buttonContext[i];
             if (data == undefined || data.action != 'combattracker') continue;
@@ -16,86 +17,78 @@ export class CombatTracker{
     }
 
     update(settings,context){
-        let ctFunction = settings.combatTrackerFunction;
-        if (ctFunction == undefined) ctFunction == 0;
-        
-
-        let combat = game.combat;
-        let src = "action/images/black.png";
+        this.active = true;
+        const ctFunction = settings.combatTrackerFunction ? settings.combatTrackerFunction : 'startStop';
+        const mode = settings.combatTrackerMode ? settings.combatTrackerMode : 'combatants';
+        const combat = game.combat;
+        let src = "modules/MaterialDeck/img/black.png";
         let txt = "";
         let background = "#000000";
-        let mode = settings.combatTrackerMode;
-        if (mode == undefined) mode = 0;
-
-        if (mode == 0){
+        
+        if (mode == 'combatants'){
             if (combat != null && combat != undefined && combat.turns.length != 0){
-                let initiativeOrder = combat.turns;
+                const initiativeOrder = combat.turns;
                 let nr = settings.combatantNr - 1;
                 if (nr == undefined || nr < 1) nr = 0;
-                let combatantState = 1;
-                if (nr == combat.turn) combatantState = 2;
-                let combatant = initiativeOrder[nr]
+                const combatantState = (nr == combat.turn) ? 2 : 1;
+                const combatant = initiativeOrder[nr]
 
                 if (combatant != undefined){
-                    let tokenId = combatant.tokenId;
+                    const tokenId = combatant.tokenId;
                     tokenControl.pushData(tokenId,settings,context,combatantState,'#cccc00');
                     return;
                 }
                 else {
-                    streamDeck.setIcon(0,context,src,background);
+                    streamDeck.setIcon(context,src,background);
                     streamDeck.setTitle(txt,context);
-                }
-                
+                } 
             }
             else {
-                streamDeck.setIcon(0,context,src,background);
+                streamDeck.setIcon(context,src,background);
                 streamDeck.setTitle(txt,context);
             }
         }
-        else if (mode == 1){
+        else if (mode == 'currentCombatant'){
             if (combat != null && combat != undefined && combat.started){
-                let tokenId = combat.combatant.tokenId;
+                const tokenId = combat.combatant.tokenId;
                 tokenControl.pushData(tokenId,settings,context);
             }
             else {
-                streamDeck.setIcon(0,context,src,background);
+                streamDeck.setIcon(context,src,background);
                 streamDeck.setTitle(txt,context);
             }
-            
-
         }
-        else if (mode == 2){
-            
-            if (ctFunction == 0) {
+        else if (mode == 'function'){
+            if (ctFunction == 'startStop') {
                 if (combat == null || combat == undefined || combat.combatants.length == 0) {
-                    src = "action/images/combattracker/startcombat.png";
+                    src = "modules/MaterialDeck/img/combattracker/startcombat.png";
                     background = "#000000";
                 }
                 else {
                     if (combat.started == false) {
-                        src = "action/images/combattracker/startcombat.png";
+                        src = "modules/MaterialDeck/img/combattracker/startcombat.png";
                         background = "#008000";
                     }
                     else {
-                        src = "action/images/combattracker/stopcombat.png";
+                        src = "modules/MaterialDeck/img/combattracker/stopcombat.png";
                         background = "#FF0000";
                     }
                 }
             }
-            else if (ctFunction == 1) {
-                src = "action/images/combattracker/nextturn.png";
+            else if (ctFunction == 'nextTurn') {
+                src = "modules/MaterialDeck/img/combattracker/nextturn.png";
             }
-            else if (ctFunction == 2) {
-                src = "action/images/combattracker/previousturn.png";
+            else if (ctFunction == 'prevTurn') {
+                src = "modules/MaterialDeck/img/combattracker/previousturn.png";
             }
-            else if (ctFunction == 3) {
-                src = "action/images/combattracker/nextround.png";
+            else if (ctFunction == 'nextRound') {
+                src = "modules/MaterialDeck/img/combattracker/nextround.png";
             }
-            else if (ctFunction == 4) {
-                src = "action/images/combattracker/previousround.png";
+            else if (ctFunction == 'prevRound') {
+                src = "modules/MaterialDeck/img/combattracker/previousround.png";
             }
-            else if (ctFunction == 5){
-                src = "action/images/black.png";
+            else if (ctFunction == 'turnDisplay'){
+                src = "modules/MaterialDeck/img/black.png";
                 let round = 0;
                 let turn = 0;
                 if (combat != null && combat != undefined && combat.started != false){
@@ -106,78 +99,29 @@ export class CombatTracker{
                 if (txt != "") txt += "\n";
                 if (settings.displayTurn) txt += "Turn\n"+turn;
             }
-            streamDeck.setIcon(0,context,src,background);
+            streamDeck.setIcon(context,src,background);
             streamDeck.setTitle(txt,context);
         }
     }
 
     keyPress(settings,context){
-        let mode = parseInt(settings.combatTrackerMode);
-        if (isNaN(mode)) mode = 0;
-        
-        if (mode < 2) {
-            let onClick = settings.onClick;
-            if (onClick == undefined) onClick = 0;
-            let tokenId;
-            let combat = game.combat;
-            if (mode == 0) {
-                if (combat != null && combat != undefined && combat.turns.length != 0){
-                    let initiativeOrder = combat.turns;
-                    let nr = settings.combatantNr - 1;
-                    if (nr == undefined || nr < 1) nr = 0;
-                    let combatantState = 1;
-                    if (nr == combat.turn) combatantState = 2;
-                    let combatant = initiativeOrder[nr]
+        const mode = settings.combatTrackerMode ? settings.combatTrackerMode : 'combatants';
+        const combat = game.combat;
 
-                    if (combatant == undefined) return;
-                    tokenId = combatant.tokenId;
-                }
-            }
-            else if (mode == 1) 
-                if (combat != null && combat != undefined && combat.started)
-                    tokenId = combat.combatant.tokenId;
-                
-            let token = canvas.tokens.children[0].children.find(p => p.id == tokenId);
-            if (token == undefined) return;
-            if (onClick == 0)   //Do nothing
-                return;
-            else if (onClick == 1){ //select token
-                token.control();
-            }
-            else if (onClick == 2){ //center on token
-                let location = token.getCenter(token.x,token.y); 
-                canvas.animatePan(location);
-            }
-            else if (onClick == 3){ //center on token and select
-                let location = token.getCenter(token.x,token.y); 
-                canvas.animatePan(location);
-                token.control();
-            }
-            else if (onClick == 4){ //Open character sheet
-                token.actor.sheet.render(true);
-            }
-            else {  //Open token config
-                token.sheet._render(true);
-            }
-        }
-        else if (mode == 2){
-            let combat = game.combat;
+        if (mode == 'function'){
             if (combat == null || combat == undefined) return;
-
-            let ctFunction = settings.combatTrackerFunction;
-            if (ctFunction == undefined) ctFunction == 0;
-
-            if (ctFunction == 0){
+            const ctFunction = settings.combatTrackerFunction ? settings.combatTrackerFunction : 'startStop';
+            if (ctFunction == 'startStop'){
                 let src;
                 let background;
                 if (game.combat.started){
                     game.combat.endCombat();
-                    src = "action/images/combattracker/startcombat.png";
+                    src = "modules/MaterialDeck/img/combattracker/startcombat.png";
                     background = "#000000";
                 }
                 else {
                     game.combat.startCombat();
-                    src = "action/images/combattracker/stopcombat.png";
+                    src = "modules/MaterialDeck/img/combattracker/stopcombat.png";
                     background = "#FF0000";
                 }
                 streamDeck.setIcon(context,src,background);
@@ -185,10 +129,55 @@ export class CombatTracker{
             }
             if (game.combat.started == false) return;
 
-            if (ctFunction == 1) game.combat.nextTurn();
-            else if (ctFunction == 2) game.combat.previousTurn();
-            else if (ctFunction == 3) game.combat.nextRound();
-            else if (ctFunction == 4) game.combat.previousRound();
+            if (ctFunction == 'nextTurn') game.combat.nextTurn();
+            else if (ctFunction == 'prevTurn') game.combat.previousTurn();
+            else if (ctFunction == 'nextRound') game.combat.nextRound();
+            else if (ctFunction == 'prevRound') game.combat.previousRound();
         }
+        else {
+            const onClick = settings.onClick ? settings.onClick : 'doNothing';
+            let tokenId;
+            if (mode == 'combatants') {
+                if (combat != null && combat != undefined && combat.turns.length != 0){
+                    const initiativeOrder = combat.turns;
+                    let nr = settings.combatantNr - 1;
+                    if (nr == undefined || nr < 1) nr = 0;
+                    const combatant = initiativeOrder[nr]
+                    if (combatant == undefined) return;
+                    tokenId = combatant.tokenId;
+                }
+            }
+            else if (mode == 'currentCombatant') 
+                if (combat != null && combat != undefined && combat.started)
+                    tokenId = combat.combatant.tokenId;
+                
+            let token = (canvas.tokens.children[0] != undefined) ? canvas.tokens.children[0].children.find(p => p.id == tokenId) : undefined;
+            if (token == undefined) return;
+            if (onClick == 'doNothing')   //Do nothing
+                return;
+            else if (onClick == 'select'){ //select token
+                token.control();
+            }
+            else if (onClick == 'center'){ //center on token
+                let location = token.getCenter(token.x,token.y); 
+                canvas.animatePan(location);
+            }
+            else if (onClick == 'centerSelect'){ //center on token and select
+                const location = token.getCenter(token.x,token.y); 
+                canvas.animatePan(location);
+                token.control();
+            }
+            else if (onClick == 'charSheet'){ //Open character sheet
+                const element = document.getElementById(token.actor.sheet.id);
+                if (element == null) token.actor.sheet.render(true);
+                else token.actor.sheet.close();
+            }
+            else if (onClick == 'tokenConfig'){  //Open token config
+                const element = document.getElementById(token.sheet.id);
+                if (element == null) token.sheet.render(true);
+                else token.sheet.close();
+            }
+        }
+        
     }
 }

src/external.js

@@ -0,0 +1,270 @@
+import * as MODULE from "../MaterialDeck.js";
+import {streamDeck} from "../MaterialDeck.js";
+
+export class ExternalModules{
+    constructor(){
+        this.active = false;
+    }
+
+    async updateAll(){
+        if (this.active == false) return;
+        for (let i=0; i<32; i++){   
+            let data = streamDeck.buttonContext[i];
+            if (data == undefined || data.action != 'external') continue;
+            await this.update(data.settings,data.context);
+        }
+    }
+
+    update(settings,context){
+        this.active = true;
+        let module = settings.module;
+        if (module == undefined) 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';
+
+        if (module == 'fxmaster')    
+            this.keyPressFxMaster(settings,context);
+        else if (module == 'gmscreen')
+            this.keyPressGMScreen(settings,context);
+        
+    }
+
+    getModuleEnable(moduleId){
+        const module = game.modules.get(moduleId);
+        if (module == undefined || module.active == false) return false;
+        return true;
+    }
+
+    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
+    //FxMaster
+    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
+    updateFxMaster(settings,context){
+        const fxmaster = game.modules.get("fxmaster");
+        if (fxmaster == undefined || fxmaster.active == false) return;
+
+        const type = (settings.fxMasterType == undefined) ? 'weatherControls' : settings.fxMasterType;
+        const displayIcon = settings.displayFxMasterIcon;
+        const displayName = settings.displayFxMasterName;
+        let ring = 0;
+        let ringColor = "#000000";
+        let background = "#000000"
+
+        let icon = '';
+        let name = '';
+        if (type == 'weatherControls') {
+            const effect = (settings.weatherEffect == undefined) ? 'leaves' : settings.weatherEffect;
+            name = CONFIG.weatherEffects[effect].label;
+            icon = CONFIG.weatherEffects[effect].icon;
+            ring = this.findWeatherEffect(effect) != undefined ? 2 : 1;
+            ringColor = ring < 2 ? '#000000' : "#00ff00";
+        }
+        else if (type == 'colorize') {
+            background = (settings.fxMasterColorizeColor == undefined) ? '#000000' : settings.fxMasterColorizeColor;
+            icon = "fas fa-palette";
+            name = game.i18n.localize("MaterialDeck.FxMaster.Colorize");
+            const filters = canvas.scene.getFlag("fxmaster", "filters");
+            ring = 2;
+            if (filters == undefined || filters['core_color'] == undefined) {
+                ringColor = "#000000";
+            }
+            else {
+                const colors = filters['core_color'].options;
+                let red = Math.ceil(colors.red*255).toString(16);
+                if (red.length == 1) red = '0' + red;
+                let green = Math.ceil(colors.green*255).toString(16);
+                if (green.length == 1) green = '0' + green;
+                let blue = Math.ceil(colors.blue*255).toString(16);
+                if (blue.length == 1) blue = '0' + blue;
+                ringColor = "#" + red + green + blue;
+            }
+        }
+        else if (type == 'filters') {
+            const filter = (settings.fxMasterFilter == undefined) ? 'underwater' : settings.fxMasterFilter;
+            name = CONFIG.fxmaster.filters[filter].label;
+            background = "#340057";
+            if (displayIcon){
+                if (filter == 'underwater') icon = "fas fa-water";
+                else if (filter == 'predator') icon = "fas fa-wave-square";
+                else if (filter == 'oldfilm') icon = "fas fa-film";
+                else if (filter == 'bloom') icon = "fas fa-ghost";
+            }
+            const fxmaster = canvas.scene.getFlag("fxmaster", "filters");
+            ring = 1;
+            if (fxmaster != undefined) {
+                const objKeys = Object.keys(fxmaster);
+                for (let i=0; i<objKeys.length; i++){
+                    if (objKeys[i] == "core_"+filter) {
+                        ring = 2;
+                        ringColor = "#A600FF";
+                        break;
+                    }
+                }
+            }
+        }
+        else if (type == 'clear'){
+            icon = "fas fa-trash";
+            name = game.i18n.localize("MaterialDeck.FxMaster.Clear");
+        }
+
+        if (displayIcon) streamDeck.setIcon(context,icon,background,ring,ringColor);
+        else streamDeck.setIcon(context, "", background,ring,ringColor);
+        if (displayName == 0) name = ""; 
+        streamDeck.setTitle(name,context);
+    }
+
+    hexToRgb(hex) {
+        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+          red: parseInt(result[1], 16)/256,
+          green: parseInt(result[2], 16)/256,
+          blue: parseInt(result[3], 16)/256
+        } : null;
+      }
+
+    keyPressFxMaster(settings,context){
+        const fxmaster = game.modules.get("fxmaster");
+        if (fxmaster == undefined || fxmaster.active == false) return;
+
+        const type = (settings.fxMasterType == undefined) ? 'weatherControls' : settings.fxMasterType;
+
+        if (type == 'weatherControls') {
+            const effect = (settings.weatherEffect == undefined) ? 'leaves' : settings.weatherEffect;
+            let exists = false;
+            let newEffects = {};
+            let effects = canvas.scene.getFlag("fxmaster", "effects");
+            if (effects != undefined){
+                const weatherIds = Object.keys(effects);
+                for (let i=0; i<weatherIds.length; i++){
+                    const weather = effects[weatherIds[i]].type;
+                    if (weather === effect) {
+                        exists = true;
+                        continue;
+                    } 
+                    newEffects[weatherIds[i]] = effects[weatherIds[i]]; 
+                }
+            }
+
+            const density = (settings.densitySlider == undefined) ? 50 : settings.densitySlider;
+            const speed = (settings.speedSlider == undefined) ? 50 : settings.speedSlider;
+            const direction = (settings.directionSlider == undefined) ? 50 : settings.directionSlider;
+            const scale = (settings.scaleSlider == undefined) ? 50 : settings.scaleSlider;
+            const color = (settings.fxMasterWeatherColor == undefined) ? "#000000" : settings.fxMasterWeatherColor;
+            const applyColor = (settings.fxWeatherEnColor == undefined) ? false : settings.fxWeatherEnColor;
+            
+            if (exists == false) {
+                newEffects[randomID()] = {
+                    type: effect,
+                    options: {
+                        density: density,
+                        speed: speed,
+                        scale: scale,
+                        tint: color,
+                        direction: direction,
+                        apply_tint: applyColor
+                    }
+                };
+            }
+            canvas.scene.unsetFlag("fxmaster", "effects").then(() => {
+                canvas.scene.setFlag("fxmaster", "effects", newEffects);
+            });
+            
+        }
+        else if (type == 'colorize') {
+            const color = (settings.fxMasterColorizeColor == undefined) ? '#000000' : settings.fxMasterColorizeColor;
+            const filters = canvas.scene.getFlag("fxmaster", "filters");
+            let newFilters = {};
+            if (filters != undefined){
+                const filterObjects = Object.keys(filters);
+                for (let i=0; i<filterObjects.length; i++){
+                    if (filterObjects[i] == 'core_color'){
+                        //continue;
+                    }
+                    newFilters[filterObjects[i]] = filters[filterObjects[i]]; 
+                }
+            }
+            newFilters['core_color'] = {
+                type : 'color',
+                options: this.hexToRgb(color)
+            };
+            
+            canvas.scene.unsetFlag("fxmaster", "filters").then(() => {
+                canvas.scene.setFlag("fxmaster", "filters", newFilters);
+            });
+
+        }
+        else if (type == 'filters') {
+            const filter = (settings.fxMasterFilter == undefined) ? 'underwater' : settings.fxMasterFilter;
+            const filters = canvas.scene.getFlag("fxmaster", "filters");
+            let newFilters = {};
+            let exists = false;
+            if (filters != undefined){
+                const filterObjects = Object.keys(filters);
+                for (let i=0; i<filterObjects.length; i++){
+                    if (filterObjects[i] == 'core_'+filter){
+                        exists = true;
+                        continue;
+                    }
+                    newFilters[filterObjects[i]] = filters[filterObjects[i]]; 
+                }
+                
+            }
+            if (exists == false) {
+                newFilters['core_'+filter] = {type : filter};
+            }
+            canvas.scene.unsetFlag("fxmaster", "filters").then(() => {
+                canvas.scene.setFlag("fxmaster", "filters", newFilters);
+            });
+        }
+        else if (type == 'clear'){
+            canvas.scene.unsetFlag("fxmaster", "filters");
+            canvas.scene.unsetFlag("fxmaster", "effects");
+        }
+    }
+
+    findWeatherEffect(effect){
+        const effects = canvas.scene.getFlag("fxmaster", "effects");
+        if (effects == undefined) return undefined;
+
+        const weatherIds = Object.keys(effects);
+        for (let i = 0; i < weatherIds.length; ++i) {
+            const weather = effects[weatherIds[i]].type;
+            if (weather === effect) return weatherIds[i];
+        }
+        return undefined;
+    }
+
+    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
+    //GM Screen
+    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+    updateGMScreen(settings,context){
+        if (this.getModuleEnable("gm-screen") == false) return;
+
+        const background = settings.gmScreenBackground ? settings.gmScreenBackground : '#000000';
+        let ring = 1;
+        let ringColor = '#00FF00'
+        let src = '';
+        let txt = '';
+
+        //if (document.getElementsByClassName("gm-screen-app gm-screen-drawer expanded")[0] != undefined) ring = 2;
+        
+        if (settings.displayGmScreenIcon) src = "fas fa-book-reader";
+        streamDeck.setIcon(context,src,background,ring,ringColor);
+        if (settings.displayGmScreenName) txt = game.i18n.localize(`GMSCR.gmScreen.Open`); 
+        streamDeck.setTitle(txt,context);
+    }
+
+    keyPressGMScreen(settings,context){
+        if (this.getModuleEnable("gm-screen") == false) return;
+
+        document.getElementsByClassName("gm-screen-button")[0].click();
+    }
+}

src/macro.js

@@ -3,10 +3,12 @@ import {streamDeck} from "../MaterialDeck.js";
 
 export class MacroControl{
     constructor(){
+        this.active = false;
         this.offset = 0;
     }
 
     async updateAll(){
+        if (this.active == false) return;
         for (let i=0; i<32; i++){   
             let data = streamDeck.buttonContext[i];
             if (data == undefined || data.action != 'macro') continue;
@@ -15,25 +17,74 @@ export class MacroControl{
     }
 
     update(settings,context){
+        this.active = true;
         let mode = settings.macroMode;
         let displayName = settings.displayName;
         let macroNumber = settings.macroNumber;
         let background = settings.background;
+        let icon = false;
+        if (settings.displayIcon) icon = true;
+        let ringColor = "#000000";
+        let ring = 0;
         if(macroNumber == undefined || isNaN(parseInt(macroNumber))){
             macroNumber = 0;
         }
-        if (mode == undefined) mode = 0;
+        if (mode == undefined) mode = 'hotbar';
         if (displayName == undefined) displayName = false;
         if (background == undefined) background = '#000000';
 
         macroNumber = parseInt(macroNumber);
+        
+        if (mode == 'macroBoard') {  //Macro board
+            let name = "";
+            let src = ''; 
+            if (settings.macroBoardMode == 'offset') {  //Offset
+                let ringOffColor = settings.offRing;
+                if (ringOffColor == undefined) ringOffColor = '#000000';
 
-        //Macro Hotbar
-        if (mode < 2){
+                let ringOnColor = settings.onRing;
+                if (ringOnColor == undefined) ringOnColor = '#00FF00';
+
+                let macroOffset = parseInt(settings.macroOffset);
+                if (macroOffset == undefined || isNaN(macroOffset)) macroOffset = 0;
+                
+                if (macroOffset == parseInt(this.offset)) ringColor = ringOnColor;
+                else ringColor = ringOffColor;
+
+                ring = 2;
+            }
+            else { //Execute macro
+                macroNumber += this.offset - 1;
+                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;
+                    }
+                }
+                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 == 0) macroId = game.user.data.hotbar[macroNumber];
+            if (mode == 'hotbar') macroId = game.user.data.hotbar[macroNumber];
             else {
-                let macros = game.macros.apps[0].macros;
+                let macros;
+                if (mode == 'customHotbar' && game.modules.get('custom-hotbar') != undefined) { 
+                    macros = ui.customHotbar.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;
@@ -51,52 +102,18 @@ export class MacroControl{
                     src += macro.img;
                 }
             }
-            
-            streamDeck.setIcon(1,context,src,background);
-            if (displayName == 0) name = ""; 
-            streamDeck.setTitle(name,context);
-        }
-        else {
-            let name = "";
-            let src = '';
-            if (settings.macroBoardMode == 0) {
-                macroNumber += this.offset - 1;
-                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;
-                    }
-                }
-            }
-            else {
-                src = "";
-                let onBackground = settings.onBackground;
-                if (onBackground == undefined) onBackground = '#00FF00';
-                let offBackground = settings.offBackground;
-                if (offBackground == undefined) offBackground = '#000000';
-                let macroOffset = parseInt(settings.macroOffset);
-                if (macroOffset == undefined || isNaN(macroOffset)) macroOffset = 0;
-                
-                if (macroOffset == parseInt(this.offset)) background = onBackground;
-                else background = offBackground;
-            }
-            streamDeck.setIcon(1,context,src,background);
+            if (icon) streamDeck.setIcon(context,src,background);
+            else streamDeck.setIcon(context, "", background);
             if (displayName == 0) name = ""; 
             streamDeck.setTitle(name,context);
         }
+        
     }
 
     hotbar(macros){
         for (let i=0; i<32; i++){  
             let data = streamDeck.buttonContext[i];
-            if (data == undefined || data.action != 'macro') continue;
+            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;
@@ -107,16 +124,17 @@ export class MacroControl{
             if(macroNumber == undefined || isNaN(parseInt(macroNumber))){
                 macroNumber = 1;
             }
-            if (mode == undefined) mode = 0;
-            if (mode == 2) continue;
+            if (mode == undefined) mode = 'hotbar';
+            if (mode == 'Macro Board') continue;
             if (displayName == undefined) displayName = false;
             if (background == undefined) background = '#000000';
             
             let macroId;
-            if (mode == 0){
+            if (mode == 'hotbar'){
                 macroId = game.user.data.hotbar[macroNumber];
             }
             else {
+                if (macroNumber > 9) macroNumber = 0;
                 for (let j=0; j<10; j++){
                     if (macros[j].key == macroNumber){
                         if (macros[j].macro == null) macroId == undefined;
@@ -130,7 +148,7 @@ export class MacroControl{
                 name += macro.name;
                 src += macro.img;
             }
-            streamDeck.setIcon(1,context,src,background);
+            streamDeck.setIcon(context,src,background);
             if (displayName == 0) name = ""; 
             streamDeck.setTitle(name,context);
         }
@@ -138,32 +156,37 @@ export class MacroControl{
    
     keyPress(settings){
         let mode = settings.macroMode;
-        if (mode == undefined) mode = 0;
+        if (mode == undefined) mode = 'hotbar';
 
-        if (mode == 0 || mode == 1){
-            let macroNumber = settings.macroNumber;
-            if(macroNumber == undefined || isNaN(parseInt(macroNumber))){
-                macroNumber = 0;
-            }
-            this.executeHotbar(macroNumber,mode);
+        let macroNumber = settings.macroNumber;
+        if(macroNumber == undefined || isNaN(parseInt(macroNumber))){
+            macroNumber = 0;
         }
+
+        if (mode == 'hotbar' || mode == 'visibleHotbar' || mode == 'customHotbar')
+            this.executeHotbar(macroNumber,mode);
         else {
-            if (settings.macroBoardMode == 0)
-                this.executeBoard(macroNumber);
-            else {
+            if (settings.macroBoardMode == 'offset') {
                 let macroOffset = settings.macroOffset;
                 if (macroOffset == undefined) macroOffset = 0;
                 this.offset = macroOffset;
                 this.updateAll();
             }
+            else 
+                this.executeBoard(macroNumber);
         }
     }
 
     executeHotbar(macroNumber,mode){
         let macroId 
-        if (mode == 0) macroId = game.user.data.hotbar[macroNumber];
+        if (mode == 'hotbar') macroId = game.user.data.hotbar[macroNumber];
         else {
-            let macros = game.macros.apps[0].macros;
+            let macros;
+            if (mode == 'customHotbar' && game.modules.get('custom-hotbar') != undefined) { 
+                macros = ui.customHotbar.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;
@@ -185,11 +208,11 @@ export class MacroControl{
         if (macroId != undefined){
             let macro = game.macros.get(macroId);
             if (macro != undefined && macro != null) {
-                const args = game.settings.get(MODULE.moduleName,'macroArgs')[macroNumber];
+                const args = game.settings.get(MODULE.moduleName,'macroSettings').args;
                 let furnaceEnabled = false;
                 let furnace = game.modules.get("furnace");
                 if (furnace != undefined && furnace.active) furnaceEnabled = true;
-                if (args == "") furnaceEnabled = false;
+                if (args == undefined || args[macroNumber] == undefined || args[macroNumber] == "") furnaceEnabled = false;
                 if (furnaceEnabled == false) macro.execute();
                 else {
                     let chatData = {

src/misc.js

@@ -1,10 +1,12 @@
 import * as MODULE from "../MaterialDeck.js";
-import {macroControl} from "../MaterialDeck.js";
+import {macroControl,soundboard,playlistControl} from "../MaterialDeck.js";
 
 export class playlistConfigForm extends FormApplication {
     constructor(data, options) {
         super(data, options);
         this.data = data;
+        this.playlistNr;
+        this.updatePlaylistNr = false;
     }
 
     /**
@@ -13,7 +15,7 @@ export class playlistConfigForm extends FormApplication {
     static get defaultOptions() {
         return mergeObject(super.defaultOptions, {
             id: "playlist-config",
-            title: "Material Deck: Playlist Config",
+            title: "Material Deck: "+game.i18n.localize("MaterialDeck.Sett.PlaylistConfig"),
             template: "./modules/MaterialDeck/templates/playlistConfig.html",
             classes: ["sheet"],
             width: 500
@@ -24,28 +26,43 @@ export class playlistConfigForm extends FormApplication {
      * Provide data to the template
      */
     getData() {
-        const selectedPlaylists = game.settings.get(MODULE.moduleName,'selectedPlaylists');
-        let playlistData = {};
-
-        for (let i=0; i<9; i++){
-            let playlist;
-            playlist = MODULE.getFromJSONArray(selectedPlaylists,i);
-
+        let settings = game.settings.get(MODULE.moduleName,'playlists');
+        let selectedPlaylists = settings.selectedPlaylist;
+        if (selectedPlaylists == undefined) selectedPlaylists = [];
+        let selectedPlaylistMode = settings.playlistMode;
+        if (selectedPlaylistMode == undefined) selectedPlaylistMode = [];
+        let numberOfPlaylists = settings.playlistNumber;
+        if (this.updatePlaylistNr) numberOfPlaylists = this.playlistNr;
+        if (numberOfPlaylists == undefined) numberOfPlaylists = 9;
+        let playMode = settings.playMode;
+        if (playMode == undefined) playMode = 0;
+        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
             }
-            MODULE.setToJSONArray(playlistData,i,dataThis);
+            playlistData.push(dataThis);
         }
 
-        if (!this.data && selectedPlaylists) {
-            this.data = selectedPlaylists;
+        this.data = {
+            playMode: playMode,
+            playlistNumber: numberOfPlaylists,
+            selectedPlaylist: selectedPlaylists,
+            playlistMode: selectedPlaylistMode
         }
+
         return {
             playlists: game.playlists.entities,
+            numberOfPlaylists: numberOfPlaylists,
             playlistData: playlistData,
-            playMethod: game.settings.get(MODULE.moduleName,'playlistMethod')
+            playMode: playMode
         } 
     }
 
@@ -55,16 +72,44 @@ export class playlistConfigForm extends FormApplication {
      * @param {*} formData 
      */
     async _updateObject(event, formData) {
-        await game.settings.set(MODULE.moduleName,'selectedPlaylists', formData["selectedPlaylist"]);
-        await game.settings.set(MODULE.moduleName,'playlistMethod',formData["playMethod"]);
-        
 
     }
 
     activateListeners(html) {
         super.activateListeners(html);
+        const playMode = html.find("select[name='playMode']");
+        const numberOfPlaylists = html.find("input[name='plNum']");
+        const selectedPlaylist = html.find("select[name='selectedPlaylist']");
+        const playlistMode = html.find("select[name='playlistMode']");
 
-        
+        playMode.on("change", event => {
+            this.data.playMode=event.target.value;
+            this.updateSettings(this.data);
+        });
+
+        numberOfPlaylists.on("change", event => {
+            this.playlistNr = event.target.value;
+            this.updatePlaylistNr = true;
+            this.data.playlistNumber=event.target.value;
+            this.updateSettings(this.data);
+        });
+
+        selectedPlaylist.on("change", event => {
+            let id = event.target.id.replace('playlist','');
+            this.data.selectedPlaylist[id-1]=event.target.value;
+            this.updateSettings(this.data);
+        });
+
+        playlistMode.on("change", event => {
+            let id = event.target.id.replace('playlistMode','');
+            this.data.playlistMode[id-1]=event.target.value;
+            this.updateSettings(this.data);
+        });
+    }
+    async updateSettings(settings){
+        await game.settings.set(MODULE.moduleName,'playlists', settings);
+        if (MODULE.enableModule) playlistControl.updateAll();
+        this.render();
     }
 }
 
@@ -80,21 +125,21 @@ 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 = 500;
+            width = 550;
         else if (streamDeckModel == 1)
-            width= 800;
+            width= 1500;
         else   
             width = 1400;
-
+        */
         return mergeObject(super.defaultOptions, {
             id: "macro-config",
             title: "Material Deck: "+game.i18n.localize("MaterialDeck.Sett.MacroConfig"),
             template: "./modules/MaterialDeck/templates/macroConfig.html",
-            classes: ["sheet"],
-            width: width
+            classes: ["sheet"]
         });
     }
     
@@ -104,11 +149,11 @@ export class macroConfigForm extends FormApplication {
     getData() {
         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,'macroArgs');
+        var args = game.settings.get(MODULE.moduleName,'macroSettings').args;
         if (selectedMacros == undefined) selectedMacros = [];
         if (color == undefined) color = [];
         if (args == undefined) args = [];
-        let macroData = {};
+        let macroData = [];
         let furnaceEnabled = false;
         let furnace = game.modules.get("furnace");
         if (furnace != undefined && furnace.active) furnaceEnabled = true;
@@ -132,7 +177,7 @@ export class macroConfigForm extends FormApplication {
 
         let iteration = 0;
         for (let j=0; j<jMax; j++){
-            let macroThis = {};
+            let macroThis = [];
       
             for (let i=0; i<iMax; i++){
                 let colorThis = color[iteration];
@@ -156,13 +201,13 @@ export class macroConfigForm extends FormApplication {
                     args: args[iteration],
                     furnace: furnaceEnabled
                 }
-                MODULE.setToJSONArray(macroThis,i,dataThis);
+                macroThis.push(dataThis);
                 iteration++;
             }
             let data = {
                 dataThis: macroThis,
             };
-            MODULE.setToJSONArray(macroData,j,data);
+            macroData.push(data);
         }
         
         return {
@@ -179,19 +224,41 @@ export class macroConfigForm extends FormApplication {
      * @param {*} formData 
      */
     async _updateObject(event, formData) {
-       await game.settings.set(MODULE.moduleName,'macroSettings',{
-            macros: formData["macros"],
-            color: formData["colorPicker"]
-       });
 
-        let furnace = game.modules.get("furnace");
-        if (furnace != undefined && furnace.active) 
-            await game.settings.set(MODULE.moduleName,'macroArgs', formData["args"]);
-        macroControl.updateAll();
     }
 
     activateListeners(html) {
         super.activateListeners(html); 
+        const macro = html.find("select[name='macros']");
+        const args = html.find("input[name='args']");
+        const color = html.find("input[name='colorPicker']");
+
+        macro.on("change", event => {
+            let id = event.target.id.replace('macros','');
+            let settings = game.settings.get(MODULE.moduleName,'macroSettings');
+            settings.macros[id-1]=event.target.value;
+            this.updateSettings(settings);
+        });
+
+        args.on("change", event => {
+            let id = event.target.id.replace('args','');
+            let settings = game.settings.get(MODULE.moduleName,'macroSettings');
+            settings.args[id-1]=event.target.value;
+            this.updateSettings(settings);
+        });
+
+        color.on("change", event => {
+            let id = event.target.id.replace('colorpicker','');
+            let settings = game.settings.get(MODULE.moduleName,'macroSettings');
+            settings.color[id-1]=event.target.value;
+            this.updateSettings(settings);
+        });
+    }
+
+    async updateSettings(settings){
+        await game.settings.set(MODULE.moduleName,'macroSettings',settings);
+        if (MODULE.enableModule) macroControl.updateAll();
+        this.render();
     }
 }
 
@@ -201,30 +268,33 @@ export class soundboardConfigForm extends FormApplication {
     constructor(data, options) {
         super(data, options);
         this.data = data;
-        //this.soundData = {};
-        this.playlist;
+        this.playlists = [];
         this.updatePlaylist = false;
+        this.update = false;
+        this.iMax;
+        this.jMax;
+        this.settings = {};
     }
 
     /**
      * Default Options for this FormApplication
      */
     static get defaultOptions() {
+        /*
         let streamDeckModel = game.settings.get(MODULE.moduleName,'streamDeckModel');
         let width;
         if (streamDeckModel == 0)
-            width = 500;
+            width = 550;
         else if (streamDeckModel == 1)
-            width= 800;
+            width= 885;
         else   
             width = 1400;
-
+        */
         return mergeObject(super.defaultOptions, {
             id: "soundboard-config",
             title: "Material Deck: "+game.i18n.localize("MaterialDeck.Sett.SoundboardConfig"),
             template: "./modules/MaterialDeck/templates/soundboardConfig.html",
             classes: ["sheet"],
-            width: width,
             height: 720
         });
     }
@@ -237,82 +307,101 @@ export class soundboardConfigForm extends FormApplication {
     /**
      * Provide data to the template
      */
-    getData() {
-        let playlistId = game.settings.get(MODULE.moduleName,'soundboardSettings').playlist;
-        if (this.updatePlaylist) playlistId = this.playlist;
-        this.updatePlaylist = false;
-        let playlist = 'none';
-        let sounds = [];
-        if (playlistId != undefined){
-            playlist = game.playlists.entities.find(p => p._id == playlistId);
-            if (playlist != undefined) sounds = playlist.sounds;
-            else playlist = 'none';
+    getData() { 
+        if (this.update) {
+            this.update=false;
+            return {soundData: this.data};
+        }
+        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});
         }
-        let selectedSounds = game.settings.get(MODULE.moduleName,'soundboardSettings').sounds;
-        let colorOn = game.settings.get(MODULE.moduleName,'soundboardSettings').colorOn;
-        let colorOff = game.settings.get(MODULE.moduleName,'soundboardSettings').colorOff;
-        let mode = game.settings.get(MODULE.moduleName,'soundboardSettings').mode;
-        let volume = game.settings.get(MODULE.moduleName,'soundboardSettings').volume;
-        let img = game.settings.get(MODULE.moduleName,'soundboardSettings').img;
-        let name = game.settings.get(MODULE.moduleName,'soundboardSettings').name;
 
-        if (selectedSounds == undefined) selectedSounds = [];
-        if (colorOn == undefined) colorOn = [];
-        if (colorOff == undefined) colorOff = [];
-        if (mode == undefined) mode = [];
-        if (img == undefined) img = [];
-        if (name == undefined) name = [];
-        let soundData = {};
+        if (this.settings.sounds == undefined) this.settings.sounds = [];
+        if (this.settings.colorOn == undefined) this.settings.colorOn = [];
+        if (this.settings.colorOff == undefined) this.settings.colorOff = [];
+        if (this.settings.mode == undefined) this.settings.mode = [];
+        if (this.settings.img == undefined) this.settings.img = [];
+        if (this.settings.volume == undefined) this.settings.volume = [];
+        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 = [];
 
         let streamDeckModel = game.settings.get(MODULE.moduleName,'streamDeckModel');
-        let iMax,jMax;
+       
         if (streamDeckModel == 0){
-            jMax = 6;
-            iMax = 3;
+            this.jMax = 6;
+            this.iMax = 3;
         }
         else if (streamDeckModel == 1){
-            jMax = 6;
-            iMax = 5;
+            this.jMax = 6;
+            this.iMax = 5;
         }
         else {
-            jMax = 8;
-            iMax = 8;
+            this.jMax = 8;
+            this.iMax = 8;
         }
 
         let iteration = 0;
 
-        for (let j=0; j<jMax; j++){
-            let soundsThis = {};
-            for (let i=0; i<iMax; i++){
-                if (volume == undefined) volume = 50;
-                
-
+        for (let j=0; j<this.jMax; j++){
+            let soundsThis = [];
+            for (let i=0; i<this.iMax; i++){
+                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 {
+                    const pl = game.playlists.entities.find(p => p._id == this.settings.selectedPlaylists[iteration]);
+                    if (pl == undefined){
+                        selectedPlaylist = 'none';
+                        sounds = [];
+                    }
+                    else {
+                        sounds = pl.sounds;
+                        selectedPlaylist = pl._id;
+                    }  
+                }
+                let styleSS = "";
+                let styleFP ="display:none";
+                if (selectedPlaylist == 'FP') {
+                    styleSS = 'display:none';
+                    styleFP = ''
+                }
                 let dataThis = {
                     iteration: iteration+1,
-                    sound: selectedSounds[iteration],
+                    playlists: playlists,
+                    selectedPlaylist: selectedPlaylist,
+                    sound: this.settings.sounds[iteration],
                     sounds: sounds,
-                    colorOn: colorOn[iteration],
-                    colorOff: colorOff[iteration],
-                    mode: mode[iteration],
-                    volume: volume[iteration],
-                    imgPath: img[iteration],
-                    name: name[iteration]
+                    srcPath: this.settings.src[iteration],
+                    colorOn: this.settings.colorOn[iteration],
+                    colorOff: this.settings.colorOff[iteration],
+                    mode: this.settings.mode[iteration],
+                    volume: this.settings.volume[iteration],
+                    imgPath: this.settings.img[iteration],
+                    name: this.settings.name[iteration],
+                    styleSS: styleSS,
+                    styleFP: styleFP
                 }
-                MODULE.setToJSONArray(soundsThis,i,dataThis);
+                soundsThis.push(dataThis);
                 iteration++;
             }
             let data = {
                 dataThis: soundsThis,
             };
-            MODULE.setToJSONArray(soundData,j,data);
-
+            soundData.push(data);
         }
+        this.data = soundData;
+
         return {
-            playlists: game.playlists.entities,
-            playlist: playlistId,
-            sounds: sounds,
-            selectedSound81: selectedSounds.a,
-            soundData: soundData,
+            soundData: this.data
         } 
     }
 
@@ -322,88 +411,148 @@ export class soundboardConfigForm extends FormApplication {
      * @param {*} formData 
      */
     async _updateObject(event, formData) {
-        let length = formData["sounds"].length;
-        let img = [];
-        for (let i=0; i<length; i++){
-            let name = "img"+(i+1);
-            let src = formData[name];
-            img[i] = src;
-        }
-
-        await game.settings.set(MODULE.moduleName,'soundboardSettings',{
-            playlist: formData["playlist"],
-            sounds: formData["sounds"],
-            colorOn: formData["colorOn"],
-            colorOff: formData["colorOff"],
-            mode: formData["mode"],
-            img: img,
-            volume: formData["volume"],
-            name: formData["name"]
-        });
-        //MODULE.launchpad.audioSoundboardUpdate();
+   
     }
 
     async activateListeners(html) {
         super.activateListeners(html);
-        const colorPickerOn = html.find("button[name='colorPickerOn']");
-        const colorPickerOff = html.find("button[name='colorPickerOff']");
+        const nameField = html.find("input[name='namebox']");
         const playlistSelect = html.find("select[name='playlist']");
-        const volumeSlider = html.find("input[name='volume']");
         const soundSelect = html.find("select[name='sounds']");
+        const soundFP = html.find("input[name2='soundSrc']");
+        const imgFP = html.find("input[name2='imgSrc']");
+        const onCP = html.find("input[name='colorOn']");
+        const offCP = html.find("input[name='colorOff']");
+        const playMode = html.find("select[name='mode']");
+        const volume = html.find("input[name='volume']");
 
-        /*
-        colorPickerOn.on('click',(event) => {
-            let target = event.currentTarget.value;
-            let color = document.getElementById("colorOn"+target).value;
-            if ((color < 0 && color > 127) || color == "") color = 0;
-            MODULE.launchpad.colorPicker(target,1,color);
-            
-        });
-        colorPickerOff.on('click',(event) => {
-            let target = event.currentTarget.value;
-            let color = document.getElementById("colorOff"+target).value;
-            if ((color < 0 && color > 127) || color == "") color = 0;
-            MODULE.launchpad.colorPicker(target,0,color);
-            
+        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 => {
-                this.playlist = event.target.value;
-                this.updatePlaylist = true;
-                this.render();
-            });
-        }
-        volumeSlider.on('change', event => {
-            let id = event.target.id.replace('volume','');
-            let column = id%10-1;
-            let row = 8-Math.floor(id/10);
-            id = row*8+column;
-            let settings = game.settings.get(MODULE.moduleName,'soundboardSettings');
-            settings.volume[id] = event.target.value;
-            game.settings.set(MODULE.moduleName,'soundboardSettings',settings);
-            if (MODULE.launchpad.activeSounds[id] != false){
-                let volume = AudioHelper.inputToVolume(event.target.value/100) * game.settings.get("core", "globalInterfaceVolume");
-                MODULE.launchpad.activeSounds[id].volume(volume);
-            }
-        });
-        if (soundSelect.length > 0) {
-            soundSelect.on("change",event => {
-                let id = event.target.id.replace('soundSelect','');
-                let column = id%10-1;
-                let row = 8-Math.floor(id/10);
-                id = row*8+column;
-                let settings = game.settings.get(MODULE.moduleName,'soundboardSettings');
-                settings.sounds[id] = event.target.value;
-                game.settings.set(MODULE.moduleName,'soundboardSettings',settings);
-                if (MODULE.launchpad.activeSounds[id] != false){
-                    let mode = settings.mode[id];
-                    let repeat = false;
-                    if (mode == 1) repeat = true;
-                    MODULE.launchpad.playSound(id,repeat,false);
+                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;
+
+                let selectedPlaylist;
+                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 {
+                    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;
+
+                this.settings.selectedPlaylists[id]=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); 
+        });
+    }
+    
+    async updateSettings(settings){
+        await game.settings.set(MODULE.moduleName,'soundboardSettings',settings);
+        if (MODULE.enableModule) soundboard.updateAll();
+        this.render();
     }
     
 }

src/move.js

@@ -1,49 +1,121 @@
 import * as MODULE from "../MaterialDeck.js";
+import {streamDeck} from "../MaterialDeck.js";
 
 export class Move{
     constructor(){
+        this.active = false;
+    }
+
+    update(settings,context){
+        const background = settings.background ? settings.background : '#000000';
+        const mode = settings.mode ? settings.mode : 'canvas';
+        const type = settings.type ? settings.type : 'move';
+
+        let url = '';
+        if (mode == 'canvas' || (mode == 'selectedToken' && type == 'move')){
+            const dir = settings.dir ? settings.dir : 'center';
+            if (dir == 'center')  //center
+                url = "modules/MaterialDeck/img/move/center.png";
+            else if (dir == 'up') //up
+                url = "modules/MaterialDeck/img/move/up.png";
+            else if (dir == 'down') //down
+                url = "modules/MaterialDeck/img/move/down.png";
+            else if (dir == 'right') //right
+                url = "modules/MaterialDeck/img/move/right.png";
+            else if (dir == 'left') //left
+                url = "modules/MaterialDeck/img/move/left.png";
+            else if (dir == 'upRight') 
+                url = "modules/MaterialDeck/img/move/upright.png";
+            else if (dir == 'upLeft') 
+                url = "modules/MaterialDeck/img/move/upleft.png";
+            else if (dir == 'downRight') 
+                url = "modules/MaterialDeck/img/move/downright.png";
+            else if (dir == 'downLeft') 
+                url = "modules/MaterialDeck/img/move/downleft.png";
+            else if (dir == 'zoomIn') 
+                url = "modules/MaterialDeck/img/move/zoomin.png";
+            else if (dir ==  'zoomOut') 
+                url = "modules/MaterialDeck/img/move/zoomout.png";
+        }
+        else if (mode == 'selectedToken' && type == 'rotate'){
+            const value = isNaN(parseInt(settings.rotValue)) ? 0 : parseInt(settings.rotValue);
+            if (value >= 0) 
+                url = "modules/MaterialDeck/img/move/rotatecw.png";
+            else
+                url = "modules/MaterialDeck/img/move/rotateccw.png";
+        }
+        streamDeck.setIcon(context,url,background);
     }
 
     keyPress(settings){
-        let dir = settings.dir;
-        let mode = settings.mode;
-        if (mode == undefined) mode = 0;
-        if (dir == undefined) dir = 0;
-        if (settings.mode == '1')
-            this.moveToken(MODULE.selectedTokenId,dir);
-        else    
-            this.moveCanvas(dir);
+        if (canvas.scene == null) return;
+        const dir = settings.dir ? settings.dir : 'center';
+        const mode = settings.mode ? settings.mode : 'canvas';
+        const type = settings.type ? settings.type : 'move';
+
+        if (type == 'move'){
+            if (dir ==  'zoomIn') {//zoom in
+                let viewPosition = canvas.scene._viewPosition;
+                viewPosition.scale = viewPosition.scale*1.05;
+                viewPosition.duration = 100;
+                canvas.animatePan(viewPosition);
+            }
+            else if (dir == 'zoomOut') {//zoom out
+                let viewPosition = canvas.scene._viewPosition;
+                viewPosition.scale = viewPosition.scale*0.95;
+                viewPosition.duration = 100;
+                canvas.animatePan(viewPosition);
+            }
+            else {
+                if (settings.mode == 'selectedToken')
+                    this.moveToken(MODULE.selectedTokenId,dir);
+                else    
+                    this.moveCanvas(dir);
+            }
+        }
+        else if (type == 'rotate' && mode == 'selectedToken'){
+            const token = canvas.tokens.children[0].children.find(p => p.id == MODULE.selectedTokenId);
+            if (token == undefined) return;
+
+            const rotType = settings.rot ? settings.rot : 'to';
+            const value = isNaN(parseInt(settings.rotValue)) ? 0 : parseInt(settings.rotValue);
+
+            let rotationVal;
+            if (rotType == 'by') rotationVal = token.data.rotation + value;
+            else if (rotType == 'to') rotationVal = value;
+            
+            token.update({rotation: rotationVal});
+        }
     }
 
     async moveToken(tokenId,dir){
         if (tokenId == undefined) return;
-
         const token = canvas.tokens.children[0].children.find(p => p.id == tokenId);
         const gridSize = canvas.scene.data.grid;
         let x = token.x;
         let y = token.y;
 
-        if (dir == '1') y -= gridSize;
-        else if (dir == '2') y += gridSize;
-        else if (dir == '3') x += gridSize;
-        else if (dir == '4') x -= gridSize;
-        else if (dir == '5') {
+        if (dir == 'up') y -= gridSize;
+        else if (dir == 'down') y += gridSize;
+        else if (dir == 'right') x += gridSize;
+        else if (dir == 'left') x -= gridSize;
+        else if (dir == 'upRight') {
             x += gridSize;
             y -= gridSize;
         }
-        else if (dir == '6') {
+        else if (dir == 'upLeft') {
             x -= gridSize;
             y -= gridSize;
         }
-        else if (dir == '7') {
+        else if (dir == 'downRight') {
             x += gridSize;
             y += gridSize;
         }
-        else if (dir == '8') {
+        else if (dir == 'downLeft') {
             x -= gridSize;
             y += gridSize;
         }
-        else if (dir == '0') {
+        else if (dir == 'center') {
             let location = token.getCenter(x,y); 
             canvas.animatePan(location);
         }
@@ -56,27 +128,27 @@ export class Move{
         const gridSize = canvas.scene.data.grid;
         viewPosition.duration = 100;
         
-        if (dir == '1') viewPosition.y -= gridSize;
-        else if (dir == '2') viewPosition.y += gridSize;
-        else if (dir == '3') viewPosition.x += gridSize;
-        else if (dir == '4') viewPosition.x -= gridSize;
-        else if (dir == '5') {
+        if (dir == 'up') viewPosition.y -= gridSize;
+        else if (dir == 'down') viewPosition.y += gridSize;
+        else if (dir == 'right') viewPosition.x += gridSize;
+        else if (dir == 'left') viewPosition.x -= gridSize;
+        else if (dir == 'upRight') {
             viewPosition.x += gridSize;
             viewPosition.y -= gridSize;
         }
-        else if (dir == '6') {
+        else if (dir == 'upLeft') {
             viewPosition.x -= gridSize;
             viewPosition.y -= gridSize;
         }
-        else if (dir == '7') {
+        else if (dir == 'downRight') {
             viewPosition.x += gridSize;
             viewPosition.y += gridSize;
         }
-        else if (dir == '8') {
+        else if (dir == 'downLeft') {
             viewPosition.x -= gridSize;
             viewPosition.y += gridSize;
         }
-        else if (dir == '0') {
+        else if (dir == 'center') {
             viewPosition.x = (canvas.dimensions.sceneWidth+window.innerWidth)/2;
             viewPosition.y = (canvas.dimensions.sceneHeight+window.innerHeight)/2;
         }

src/othercontrols.js

@@ -3,10 +3,12 @@ import {streamDeck} from "../MaterialDeck.js";
 
 export class OtherControls{
     constructor(){
-        this.offset = 0;
+        this.active = false;
+        this.rollData = {};
     }
 
     async updateAll(){
+        if (this.active == false) return;
         for (let i=0; i<32; i++){   
             let data = streamDeck.buttonContext[i];
             if (data == undefined || data.action != 'other') continue;
@@ -15,437 +17,264 @@ export class OtherControls{
     }
 
     update(settings,context){
-        let mode = settings.otherMode;
-        if (mode == undefined) mode = 0;
+        this.active = true;
+        const mode = settings.otherMode ? settings.otherMode : 'pause';
 
-        if (mode == 0) {    //pause
-            this.updatePause(settings.pauseFunction,context);
-        }
-        else if (mode == 1) {   //scene selection
-            this.updateScene(settings,context);
-        }
-        else if (mode == 2){    //control buttons
+        if (mode == 'pause')    //pause
+            this.updatePause(settings,context);
+        else if (mode == 'controlButtons')    //control buttons
             this.updateControl(settings,context);
-        }
-        else if (mode == 3){    //darkness
+        else if (mode == 'darkness')   //darkness
             this.updateDarkness(settings,context);
-        }
-        else if (mode == 4){    //roll tables
+        else if (mode == 'rollDice')    //roll dice
+            this.updateRollDice(settings,context);
+        else if (mode == 'rollTables')    //roll tables
             this.updateRollTable(settings,context);
-        }
+        else if (mode == 'sidebarTab')    //open sidebar tab
+            this.updateSidebar(settings,context);
+        else if (mode == 'compendium')    //open compendium
+            this.updateCompendium(settings,context);
+        else if (mode == 'journal')    //open journal
+            this.updateJournal(settings,context);
+        else if (mode == 'chatMessage')
+            this.updateChatMessage(settings,context);
     }
 
-    keyPress(settings){
-        let mode = settings.otherMode;
-        if (mode == undefined) mode = 0;
+    keyPress(settings,context){
+        const mode = settings.otherMode ? settings.otherMode : 'pause';
 
-        if (mode == 0) {    //pause
-            this.keyPressPause(settings.pauseFunction);
-        }
-        else if (mode == 1) {   //scene
-            this.keyPressScene(settings);
-        }
-        else if (mode == 2) {   //control buttons
+        if (mode == 'pause')     //pause
+            this.keyPressPause(settings);
+        else if (mode == 'controlButtons')    //control buttons
             this.keyPressControl(settings);
-        }
-        else if (mode == 3) {   //darkness controll
+        else if (mode == 'darkness')    //darkness controll
             this.keyPressDarkness(settings);
-        }
-        else if (mode == 4) {   //roll tables
+        else if (mode == 'rollDice')    //roll dice
+            this.keyPressRollDice(settings,context);
+        else if (mode == 'rollTables')    //roll tables
             this.keyPressRollTable(settings);
-        }
+        else if (mode == 'sidebarTab')    //sidebar
+            this.keyPressSidebar(settings);
+        else if (mode == 'compendium')    //open compendium
+            this.keyPressCompendium(settings);
+        else if (mode == 'journal')    //open journal
+            this.keyPressJournal(settings);
+        else if (mode == 'chatMessage')
+            this.keyPressChatMessage(settings);
     }
 
     //////////////////////////////////////////////////////////////////////////////////////////////////
 
-    updatePause(pauseFunction,context){
-        
-        if (pauseFunction == undefined) pauseFunction = 0;
+    updatePause(settings,context){
         let src = "";
-        let name = "";
-        let background = "#000000";
-        if (pauseFunction == 0){ //Pause game
-            if (game.paused) background = "#00FF00"
-            src = 'action/images/other/pause/pause.png';
+        const pauseFunction = settings.pauseFunction ? settings.pauseFunction : 'pause';
+        const background = settings.background ? settings.background : '#000000';
+        const ringOffColor = settings.offRing ? settings.offRing : '#000000';
+        const ringOnColor = settings.onRing ? settings.onRing : '#00FF00';
+        let ringColor = game.paused ? ringOnColor : ringOffColor;
+
+        if (pauseFunction == 'pause') //Pause game
+            src = 'modules/MaterialDeck/img/other/pause/pause.png';
+        else if (pauseFunction == 'resume'){ //Resume game
+            ringColor = game.paused ? ringOffColor : ringOnColor;
+            src = 'modules/MaterialDeck/img/other/pause/resume.png';
         }
-        else if (pauseFunction == 1){ //Resume game
-            if (game.paused == false) background = "#00FF00"
-            src = 'action/images/other/pause/resume.png';
-        }
-        else if (pauseFunction == 2) { //toggle
-            if (game.paused == false) background = "#00FF00"
-            src = 'action/images/other/pause/playpause.png';
-        }
-        streamDeck.setIcon(0,context,src,background);
-        streamDeck.setTitle(name,context);
+        else if (pauseFunction == 'toggle')  //toggle
+            src = 'modules/MaterialDeck/img/other/pause/playpause.png';
+        streamDeck.setIcon(context,src,background,2,ringColor,true);
     }
 
-    keyPressPause(pauseFunction){
-        if (pauseFunction == undefined) pauseFunction = 0;
-        if (pauseFunction == 0){ //Pause game
+    keyPressPause(settings){
+        const pauseFunction = settings.pauseFunction ? settings.pauseFunction : 'pause';
+
+        if (pauseFunction == 'pause'){ //Pause game
             if (game.paused) return; 
             game.togglePause();
         }
-        else if (pauseFunction == 1){ //Resume game
+        else if (pauseFunction == 'resume'){ //Resume game
             if (game.paused == false) return; 
             game.togglePause();
         }
-        else if (pauseFunction == 2) { //toggle
+        else if (pauseFunction == 'toggle') { //toggle
             game.togglePause();
         }
     }
 
-    //////////////////////////////////////////////////////////////////////////////////////////////////
-
-    updateScene(settings,context){
-        let func = settings.sceneFunction;
-        if (func == undefined) func = 0;
-
-        if (func == 0){ //visible scenes
-            let nr = parseInt(settings.sceneNr);
-            if (isNaN(nr)) nr = 1;
-            nr--;
-
-            let background = settings.background;
-            if (background == undefined) background = "#000000";
-
-            let scene = game.scenes.apps[0].scenes[nr];
-            let name = "";
-            let src = "";
-            let ringColor = "#000000";
-            let ring = 1;
-            
-            if (scene != undefined){
-                if (scene.isView) {
-                    ringColor = "#00FF00";
-                    ring = 2;
-                }
-                if (settings.displaySceneName) name = scene.name;
-                if (settings.displaySceneIcon) src = scene.img;
-                if (scene.active) name += "\n(Active)";
-            }
-            streamDeck.setTitle(name,context);
-            streamDeck.setIcon(1, context,src,background,ring,ringColor);
-        }
-        else if (func == 1) {   //all scenes
-            let name = settings.sceneName;
-            if (name == undefined) return;
-
-            let background = settings.background;
-            if (background == undefined) background = "#000000";
-
-            let src = "";
-            let ringColor = "#000000";
-            let ring = 1;
-            let scene = game.scenes.apps[1].entities.find(p=>p.data.name == name);
-            name = "";
-            if (scene != undefined){
-                if (scene.isView) {
-                    ringColor = "#00FF00";
-                    ring = 2;
-                }
-                if (settings.displaySceneName) name = scene.name;
-                if (settings.displaySceneIcon) src = scene.img;
-                if (scene.active) name += "\n(Active)";
-            }
-            streamDeck.setTitle(name,context);
-            streamDeck.setIcon(1, context,src,background,ring,ringColor);
-        }
-    }
-
-    keyPressScene(settings){
-        let func = settings.sceneFunction;
-        if (func == undefined) func = 0;
-        if (func == 0){ //visible scenes
-            let viewFunc = settings.sceneViewFunction;
-            if (viewFunc == undefined) viewFunc = 0;
-
-            let nr = parseInt(settings.sceneNr);
-            if (isNaN(nr)) nr = 1;
-            nr--;
-            let scene = game.scenes.apps[0].scenes[nr];
-            
-            if (scene != undefined){
-                if (viewFunc == 0){
-                    scene.view();
-                }
-                else if (viewFunc == 1){
-                    scene.activate();
-                }
-                else {
-                    if (scene.isView) scene.activate();
-                    scene.view();
-                }
-            }
-            
-        }
-    }
     //////////////////////////////////////////////////////////////////////////////////////////
     
     updateControl(settings,context){
-        let control = settings.control;
-        if (control == undefined) control = 0;
-
-        let tool = settings.tool;
-        if (tool == undefined) tool = 0;
-
-        const controlName = this.getControlName(control);
-        const toolName = this.getToolName(control,tool);
-
+        const control = settings.control ? settings.control : 'dispControls';
+        const tool = settings.tool ?  settings.tool : 'open';
+        let background = settings.background ? settings.background : '#000000';
+        let ringColor = '#000000'
         let txt = "";
         let src = "";
-        let background = "#000000";
-        let ringColor = "#FF7B00"
-        let selectedControl;
-        let selectedTool;
-        let ring = 1;
-        let activeControl = ui.controls.activeControl;
-        let activeTool = ui.controls.activeTool;
+        const activeControl = ui.controls.activeControl;
+        const activeTool = ui.controls.activeTool;
 
-        if (control == 0){
+        if (control == 'dispControls') { //displayed controls
             let controlNr = parseInt(settings.controlNr);
             if (isNaN(controlNr)) controlNr = 1;
             controlNr--;
 
-            selectedControl = ui.controls.controls.find(c => c.name == ui.controls.activeControl);
+            const selectedControl = ui.controls.controls[controlNr];
             if (selectedControl != undefined){
-                selectedTool = selectedControl.tools[controlNr];
+                if (tool == 'open'){  //open category
+                    txt = game.i18n.localize(selectedControl.title);
+                    src = selectedControl.icon;
+                    if (activeControl == selectedControl.name)
+                        ringColor = "#FF7B00";
+                }
+            }
+        }
+        else if (control == 'dispTools'){  //displayed tools
+            let controlNr = parseInt(settings.controlNr);
+            if (isNaN(controlNr)) controlNr = 1;
+            controlNr--;
+
+            const selectedControl = ui.controls.controls.find(c => c.name == ui.controls.activeControl);
+            if (selectedControl != undefined){
+                const selectedTool = selectedControl.tools[controlNr];
                 if (selectedTool != undefined){
                     txt = game.i18n.localize(selectedTool.title);
                     src = selectedTool.icon;
                     if (selectedTool.toggle){
                         background = "#340057"
-                        if (selectedTool.active)
-                            ringColor = "#A600FF"
-                        else    
-                            ringColor = "#340057"
-                        ring = 2;
+                        ringColor = selectedTool.active ? "#A600FF" : "#340057";
                     }
                     else if (activeTool == selectedTool.name)
-                        ring = 2;
+                        ringColor = "#FF7B00";
                 }  
             }
         }
-        else {
-            selectedControl = ui.controls.controls.find(c => c.name == controlName);
+        else {  // specific control/tool
+            const selectedControl = ui.controls.controls.find(c => c.name == control);
             if (selectedControl != undefined){
-                if (tool == 0){  //open category
+                if (tool == 'open'){  //open category
                         txt = game.i18n.localize(selectedControl.title);
                         src = selectedControl.icon;
                         if (activeControl == selectedControl.name)
-                            ring = 2;
+                            ringColor = "#FF7B00";
                 }
                 else {
-                    selectedTool = selectedControl.tools.find(t => t.name == toolName);
+                    const selectedTool = selectedControl.tools.find(t => t.name == tool);
                     if (selectedTool != undefined){
                         txt = game.i18n.localize(selectedTool.title);
                         src = selectedTool.icon;
                         if (selectedTool.toggle){
-                            background = "#340057"
-                            if (selectedTool.active)
-                                ringColor = "#A600FF"
-                            else    
-                                ringColor = "#340057"
-                            ring = 2;
+                            background = "#340057";
+                            ringColor = selectedTool.active ? "#A600FF" : "#340057";
                         }
                         else if (activeTool == selectedTool.name && activeControl == selectedControl.name)
-                            ring = 2;
+                            ringColor = "#FF7B00";
                     }
                 }
             }
         }
-        streamDeck.setIcon(1,context,src,background,ring,ringColor);
+        streamDeck.setIcon(context,src,background,2,ringColor);
         streamDeck.setTitle(txt,context);
     }
 
     keyPressControl(settings){
-        let control = settings.control;
-        if (control == undefined) control = 0;
-
-        let tool = settings.tool;
-        if (tool == undefined) tool = 0;
-
-        const controlName = this.getControlName(control);
-        const toolName = this.getToolName(control,tool);
+        if (canvas.scene == null) return;
+        const control = settings.control ? settings.control : 'dispControls';
+        const tool = settings.tool ?  settings.tool : 'open';
         
-        if (control == 0){  //displayed tools
+        if (control == 'dispControls'){  //displayed controls
             let controlNr = parseInt(settings.controlNr);
             if (isNaN(controlNr)) controlNr = 1;
             controlNr--;
-            let selectedControl = ui.controls.controls.find(c => c.name == ui.controls.activeControl);
+            const selectedControl = ui.controls.controls[controlNr];
             if (selectedControl != undefined){
-                let selectedTool = selectedControl.tools[controlNr];
+                ui.controls.activeControl = 'token';
+                selectedControl.activeTool = selectedControl.activeTool;
+                canvas.getLayer(selectedControl.layer).activate();
+            }
+        }
+        else if (control == 'dispTools'){  //displayed tools
+            let controlNr = parseInt(settings.controlNr);
+            if (isNaN(controlNr)) controlNr = 1;
+            controlNr--;
+            const selectedControl = ui.controls.controls.find(c => c.name == ui.controls.activeControl);
+            if (selectedControl != undefined){
+                const selectedTool = selectedControl.tools[controlNr];
                 if (selectedTool != undefined){
-                    if (selectedTool.toggle){
-                        let newValue = !selectedTool.active;
-                        selectedTool.active = newValue;
+                    if (selectedTool.toggle) {
+                        selectedTool.active = !selectedTool.active;
+                        selectedTool.onClick(selectedTool.active);
                     }
                     else if (selectedTool.button){
                         selectedTool.onClick();
                     }
                     else
                         selectedControl.activeTool = selectedTool.name;
-                    ui.controls.render();
                 }  
             }
         }
         else {  //select control
-            let selectedControl = ui.controls.controls.find(c => c.name == controlName);
+            const selectedControl = ui.controls.controls.find(c => c.name == control);
             if (selectedControl != undefined){
-                if (tool == 0){  //open category
-                    ui.controls.activeControl = controlName;
+                if (tool == 'open'){  //open category
+                    ui.controls.activeControl = 'token';
                     selectedControl.activeTool = selectedControl.activeTool;
                     canvas.getLayer(selectedControl.layer).activate();
                 }
                 else {
-                    let selectedTool = selectedControl.tools.find(t => t.name == toolName);
+                    const selectedTool = selectedControl.tools.find(t => t.name == tool);
                     if (selectedTool != undefined){
-                        ui.controls.activeControl = controlName;
+                        ui.controls.activeControl = control;
                         canvas.getLayer(selectedControl.layer).activate();
-                        if (selectedTool.toggle){
-                            let newValue = !selectedTool.active;
-                            selectedTool.active = newValue;
+                        if (selectedTool.toggle) {
+                            selectedTool.active = !selectedTool.active;
+                            selectedTool.onClick(selectedTool.active);
                         }
                         else if (selectedTool.button){
                             selectedTool.onClick();
                         }
                         else
-                            selectedControl.activeTool = toolName;
+                            selectedControl.activeTool = tool;
                     }
                 }
-                ui.controls.render();
             }
-        }  
-    }
-
-
-
-
-
-//ui.controls.controls.find(c => c.name == 'token')
-//ui.controls.controls.find(c => c.name == 'walls').tools.find(t => t.name == 'snap').active=false
-//ui.controls.render()
-
-    getControlName(control){
-        control--;
-        let name;
-        if (control == 0) name = 'token';
-        else if (control == 1) name = 'measure';
-        else if (control == 2) name = 'tiles';
-        else if (control == 3) name = 'drawings';
-        else if (control == 4) name = 'walls';
-        else if (control == 5) name = 'lighting';
-        else if (control == 6) name = 'sounds';
-        else if (control == 7) name = 'notes';
-        return name;
-    }
-
-    getToolName(control,tool){
-        control--;
-        tool--;
-        let name;
-        if (control == 0){  //basic controls
-            if (tool == 0) name = 'select';
-            else if (tool == 1) name = 'target';
-            else if (tool == 2) name = 'ruler';
-        }
-        else if (control == 1){  //measurement controls
-            if (tool == 0) name = 'circle';
-            else if (tool == 1) name = 'cone';
-            else if (tool == 2) name = 'rect';
-            else if (tool == 3) name = 'ray';
-            else if (tool == 4) name = 'clear';
-        }
-        else if (control == 2){  //tile controls
-            if (tool == 0) name = 'select';
-            else if (tool == 1) name = 'tile';
-            else if (tool == 2) name = 'browse';
-        }
-        else if (control == 3){  //drawing tools
-            if (tool == 0) name = 'select';
-            else if (tool == 1) name = 'rect';
-            else if (tool == 2) name = 'ellipse';
-            else if (tool == 3) name = 'polygon';
-            else if (tool == 4) name = 'freehand';
-            else if (tool == 5) name = 'text';
-            else if (tool == 6) name = 'configure';
-            else if (tool == 7) name = 'clear';
-        }
-        else if (control == 4){  //wall controls
-            if (tool == 0) name = 'select';
-            else if (tool == 1) name = 'walls';
-            else if (tool == 2) name = 'terrain';
-            else if (tool == 3) name = 'invisible';
-            else if (tool == 4) name = 'ethereal';
-            else if (tool == 5) name = 'doors';
-            else if (tool == 6) name = 'secret';
-            else if (tool == 7) name = 'clone';
-            else if (tool == 8) name = 'snap';
-            else if (tool == 9) name = 'clear';
-        }
-        else if (control == 5){  //lighting controls
-            if (tool == 0) name = 'light';
-            else if (tool == 1) name = 'day';
-            else if (tool == 2) name = 'night';
-            else if (tool == 3) name = 'reset';
-            else if (tool == 4) name = 'clear';
-        }
-        else if (control == 6){  //ambient sound controls
-            if (tool == 0) name = 'sound';
-            else if (tool == 1) name = 'clear';
-        }
-        else if (control == 7){  //journal notes
-            if (tool == 0) name = 'select';
-            else if (tool == 1) name = 'toggle';
-            else if (tool == 2) name = 'clear';
-        }
-        return name;
+        } 
+        ui.controls.render(); 
     }
 
     //////////////////////////////////////////////////////////////////////////////////////////
 
     updateDarkness(settings,context){
-        let func = settings.darknessFunction;
-        if (func == undefined) func = 0;
-
-        let value = settings.darknessValue;
-        if (value == undefined) value = 0;
-
-        let background = settings.background;
-        if (background == undefined) background = "#000000";
+        const func = settings.darknessFunction ? settings.darknessFunction : 'value';
+        const value = parseFloat(settings.darknessValue) ? parseFloat(settings.darknessValue) : 0;
+        const background = settings.background ? settings.background : '#000000';
 
         let src = "";
         let txt = "";
 
-        if (func == 0){ //value
-            src = 'action/images/other/darkness/darkness.png';
+        if (func == 'value'){ //value
+            src = 'modules/MaterialDeck/img/other/darkness/darkness.png';
         }
-        else if (func == 1){ //increase/decrease
-            if (value < 0) src = 'action/images/other/darkness/decreasedarkness.png';
-            else src = 'action/images/other/darkness/increasedarkness.png';
+        else if (func == 'incDec'){ //increase/decrease
+            if (value < 0) src = 'modules/MaterialDeck/img/other/darkness/decreasedarkness.png';
+            else src = 'modules/MaterialDeck/img/other/darkness/increasedarkness.png';
         }
-        else if (func == 2){    //display darkness
-            src = 'action/images/other/darkness/darkness.png';
-            let darkness = Math.floor(canvas.scene.data.darkness*100)/100;
+        else if (func == 'disp'){    //display darkness
+            src = 'modules/MaterialDeck/img/other/darkness/darkness.png';
+            const darkness = canvas.scene != null ? Math.floor(canvas.scene.data.darkness*100)/100 : '';
             txt += darkness;
         }
         streamDeck.setTitle(txt,context);
-        streamDeck.setIcon(0, context,src,background);
+        streamDeck.setIcon(context,src,background);
     }
 
     keyPressDarkness(settings) {
-        let func = settings.darknessFunction;
-        if (func == undefined) func = 0;
+        if (canvas.scene == null) return;
+        const func = settings.darknessFunction ? settings.darknessFunction : 'value';
+        const value = parseFloat(settings.darknessValue) ? parseFloat(settings.darknessValue) : 0;
 
-        let value = parseFloat(settings.darknessValue);
-        if (value == undefined) value = 0;
-
-        if (func == 0){ //value
+        if (func == 'value') //value
             canvas.scene.update({darkness: value});
-        }
-        else if (func == 1){ //increase/decrease
-            let darkness = canvas.scene.data.darkness;
-            darkness += -1*value;
+        else if (func == 'incDec'){ //increase/decrease
+            let darkness = canvas.scene.data.darkness - value;
             if (darkness > 1) darkness = 1;
             if (darkness < 0) darkness = 0;
             canvas.scene.update({darkness: darkness});
@@ -454,48 +283,229 @@ export class OtherControls{
 
     //////////////////////////////////////////////////////////////////////////////////////////
 
+    updateRollDice(settings,context){
+        const background = settings.background ? settings.background : '#000000';
+        let txt = '';
+
+        if (settings.displayDiceName) txt = 'Roll: ' + settings.rollDiceFormula;
+
+        streamDeck.setTitle(txt,context);
+        streamDeck.setIcon(context,'',background);
+    }
+
+    keyPressRollDice(settings,context){
+        if (settings.rollDiceFormula == undefined || settings.rollDiceFormula == '') return;
+        const rollFunction = settings.rollDiceFunction ? settings.rollDiceFunction : 'public';
+
+        let actor;
+        let tokenControlled = false;
+
+        if (MODULE.selectedTokenId != undefined) actor = canvas.tokens.children[0].children.find(p => p.id == MODULE.selectedTokenId).actor;
+        if (actor != undefined) tokenControlled = true;
+
+        let r;
+        if (tokenControlled) r = new Roll(settings.rollDiceFormula,actor.getRollData());
+        else r = new Roll(settings.rollDiceFormula);
+
+        r.evaluate();
+        
+        if (rollFunction == 'public') {
+            r.toMessage(r,{rollMode:"roll"})
+        }
+        else if (rollFunction == 'private') {
+            r.toMessage(r,{rollMode:"selfroll"})
+        }
+        else if (rollFunction == 'sd'){
+            let txt = settings.displayDiceName ? 'Roll: '+settings.rollDiceFormula + '\nResult: ' : '';
+            txt += r.total;
+            streamDeck.setTitle(txt,context);
+            let data = this.rollData
+            data[context] = {
+                formula: settings.rollDiceFormula,
+                result: txt
+            }
+            this.rollData = data;
+        }
+    }
+
+    //////////////////////////////////////////////////////////////////////////////////////////
+
     updateRollTable(settings,context){
-        let name = settings.rollTableName;
+        const name = settings.rollTableName;
         if (name == undefined) return;
 
-        let background = settings.background;
-        if (background == undefined) background = "#000000";
+        const background = settings.background ? settings.background : '#000000';
+        const table = game.tables.entities.find(p=>p.name == name);
+        let txt = settings.displayRollName ? table.name : '';
+        let src = settings.displayRollIcon ? table.data.img : '';
 
-        let table = game.tables.entities.find(p=>p.name == name);
-
-        let txt = "";
-        let src = "";
-
-        if (table != undefined) {
-            if (settings.displayRollIcon) src = table.data.img;
-            if (settings.displayRollName) txt = table.name;
+        if (table == undefined) {
+            src = '';
+            txt = '';
         }
+
         streamDeck.setTitle(txt,context);
-        streamDeck.setIcon(1, context,src,background);
+        streamDeck.setIcon(context,src,background);
     }
 
     keyPressRollTable(settings){
-        let func = settings.rolltableFunction;
-        if (func == undefined) func = 0;
-
-        let name = settings.rollTableName;
+        const name = settings.rollTableName;
         if (name == undefined) return;
 
-        let background = settings.background;
-        if (background == undefined) background = "#000000";
-
-        let table = game.tables.entities.find(p=>p.name == name);
+        const func = settings.rolltableFunction ? settings.rolltableFunction : 'open';
+        const table = game.tables.entities.find(p=>p.name == name);
 
         if (table != undefined) {
-            if (func == 0){ //open
-                table.sheet.render(true);
+            if (func == 'open'){ //open
+                const element = document.getElementById(table.sheet.id);
+                if (element == null) table.sheet.render(true);
+                else table.sheet.close();
             }
-            else if (func == 1) {//Public roll
+            else if (func == 'public') //Public roll
                 table.draw({rollMode:"roll"});
-            }
-            else if (func == 2) {//private roll
+            else if (func == 'private') //private roll
                 table.draw({rollMode:"selfroll"});
-            }
         }
     }
+
+    //////////////////////////////////////////////////////////////////////////////////////////
+
+    getSidebarName(nr){
+        let name;
+        if (nr == 'chat') name = game.i18n.localize("SIDEBAR.TabChat");
+        else if (nr == 'combat') name = game.i18n.localize("SIDEBAR.TabCombat");
+        else if (nr == 'scenes') name = game.i18n.localize("SIDEBAR.TabScenes");
+        else if (nr == 'actors') name = game.i18n.localize("SIDEBAR.TabActors");
+        else if (nr == 'items') name = game.i18n.localize("SIDEBAR.TabItems");
+        else if (nr == 'journal') name = game.i18n.localize("SIDEBAR.TabJournal");
+        else if (nr == 'tables') name = game.i18n.localize("SIDEBAR.TabTables");
+        else if (nr == 'playlists') name = game.i18n.localize("SIDEBAR.TabPlaylists");
+        else if (nr == 'compendium') name = game.i18n.localize("SIDEBAR.TabCompendium");
+        else if (nr == 'settings') name = game.i18n.localize("SIDEBAR.TabSettings");
+        else if (nr == 'collapse') name = game.i18n.localize("SIDEBAR.CollapseToggle");
+        return name;
+    }
+
+    getSidebarIcon(nr){
+        let icon;
+        if (nr == 'chat') icon = window.CONFIG.ChatMessage.sidebarIcon;
+        else if (nr == 'combat') icon = window.CONFIG.Combat.sidebarIcon;
+        else if (nr == 'scenes') icon = window.CONFIG.Scene.sidebarIcon;
+        else if (nr == 'actors') icon = window.CONFIG.Actor.sidebarIcon;
+        else if (nr == 'items') icon = window.CONFIG.Item.sidebarIcon;
+        else if (nr == 'journal') icon = window.CONFIG.JournalEntry.sidebarIcon;
+        else if (nr == 'tables') icon = window.CONFIG.RollTable.sidebarIcon;
+        else if (nr == 'playlists') icon = window.CONFIG.Playlist.sidebarIcon;
+        else if (nr == 'compendium') icon = "fas fa-atlas";
+        else if (nr == 'settings') icon = "fas fa-cogs";
+        else if (nr == 'collapse') icon = "fas fa-caret-right";
+        return icon;
+    }
+    
+    updateSidebar(settings,context){
+        const sidebarTab = settings.sidebarTab ? settings.sidebarTab : 'chat';
+        const background = settings.background ? settings.background : '#000000';
+        const collapsed = ui.sidebar._collapsed;
+        const ringOffColor = settings.offRing ? settings.offRing : '#000000';
+        const ringOnColor = settings.onRing ? settings.onRing : '#00FF00';
+        const ringColor = (sidebarTab == 'collapse' && collapsed) ? ringOnColor : ringOffColor;
+        const name = settings.displaySidebarName ? this.getSidebarName(sidebarTab) : '';
+        const icon = settings.displaySidebarIcon ? this.getSidebarIcon(sidebarTab) : '';
+
+        streamDeck.setTitle(name,context);
+        streamDeck.setIcon(context,icon,background,2,ringColor);
+    }
+
+    keyPressSidebar(settings){
+        const sidebarTab = settings.sidebarTab ? settings.sidebarTab : 'chat';
+        
+        if (sidebarTab == 'collapse'){
+            const collapsed = ui.sidebar._collapsed;
+            if (collapsed) ui.sidebar.expand();
+            else if (collapsed == false) ui.sidebar.collapse();
+        }
+        else ui.sidebar.activateTab(sidebarTab);
+    }
+
+    //////////////////////////////////////////////////////////////////////////////////////////
+
+    updateCompendium(settings,context){
+        const name = settings.compendiumName;
+        if (name == undefined) return;
+
+        const compendium = game.packs.entries.find(p=>p.metadata.label == name);
+        if (compendium == undefined) return;
+
+        const background = settings.background ? settings.background : '#000000';
+        const ringOffColor = settings.offRing ? settings.offRing : '#000000';
+        const ringOnColor = settings.onRing ? settings.onRing : '#00FF00';
+        const ringColor = compendium.rendered ? ringOnColor : ringOffColor;
+        const txt = settings.displayCompendiumName ? name : '';
+
+        streamDeck.setTitle(txt,context);
+        streamDeck.setIcon(context,"",background,2,ringColor);
+    }
+
+    keyPressCompendium(settings){
+        let name = settings.compendiumName;
+        if (name == undefined) return;
+
+        const compendium = game.packs.entries.find(p=>p.metadata.label == name);
+        if (compendium == undefined) return;
+        if (compendium.rendered) compendium.close();
+        else compendium.render(true);
+    }
+
+    //////////////////////////////////////////////////////////////////////////////////////////
+
+    //Journals
+    //game.journal.entries[0].render(true)
+
+    updateJournal(settings,context){
+        const name = settings.compendiumName;
+        if (name == undefined) return;
+
+        const journal = game.journal.entries.find(p=>p.name == name);
+        if (journal == undefined) return;
+
+        const background = settings.background ? settings.background : '#000000';
+        const ringOffColor = settings.offRing ? settings.offRing : '#000000';
+        const ringOnColor = settings.onRing ? settings.onRing : '#00FF00';
+        const ringColor = journal.sheet.rendered ? ringOnColor : ringOffColor;
+        const txt = settings.displayCompendiumName ? name : '';
+
+        streamDeck.setTitle(txt,context);
+        streamDeck.setIcon(context,"",background,2,ringColor);
+    }
+
+    keyPressJournal(settings){
+        const name = settings.compendiumName;
+        if (name == undefined) return;
+
+        const journal = game.journal.entries.find(p=>p.name == name);
+        if (journal == undefined) return;
+
+        const element = document.getElementById("journal-"+journal.id);
+        if (element == null) journal.render(true);
+        else journal.sheet.close();
+    }
+
+//////////////////////////////////////////////////////////////////////////////////////////
+
+    updateChatMessage(settings,context){
+        const background = settings.background ? settings.background : '#000000';
+        streamDeck.setTitle("",context);
+        streamDeck.setIcon(context,"",background);
+    }
+
+    keyPressChatMessage(settings){
+        const message = settings.chatMessage ? settings.chatMessage : '';
+
+        let chatData = {
+            user: game.user._id,
+            speaker: ChatMessage.getSpeaker(),
+            content: message
+        };
+        ChatMessage.create(chatData, {});
+    }
 }

src/playlist.js

@@ -3,11 +3,13 @@ import {streamDeck} from "../MaterialDeck.js";
 
 export class PlaylistControl{
     constructor(){
+        this.active = false;
         this.playlistOffset = 0;
         this.trackOffset = 0;
     }
 
     async updateAll(){
+        if (this.active == false) return;
         for (let i=0; i<32; i++){   
             let data = streamDeck.buttonContext[i];
             if (data == undefined || data.action != 'playlist') continue;
@@ -16,81 +18,86 @@ export class PlaylistControl{
     }
 
     update(settings,context){
-        if (settings.playlistMode == undefined) settings.playlistMode = 0;
-        if (settings.playlistMode == 0){
+        this.active = true;
+        if (settings.playlistMode == undefined) settings.playlistMode = 'playlist';
+        if (settings.playlistMode == 'playlist'){
             this.updatePlaylist(settings,context);
         }
-        else if (settings.playlistMode == 1){
+        else if (settings.playlistMode == 'track'){
             this.updateTrack(settings,context);
         }
         else {
-            let src = 'action/images/playlist/stop.png';
-            streamDeck.setIcon(0,context,src,settings.background);
+            let src = 'modules/MaterialDeck/img/playlist/stop.png';
+            if (game.playlists.playing.length > 0)
+                streamDeck.setIcon(context,src,settings.background,2,'#00FF00',true);
+            else
+                streamDeck.setIcon(context,src,settings.background,1,'#000000',true);
         }
     }
 
     updatePlaylist(settings,context){
         let name = "";
-        let src = 'action/images/Black.png';
-        let background = '#000000';
+
+        let background = settings.background;
+        if(background == undefined) background = '#000000';
+
+        let ringColor = "#000000"
+
+        let ringOffColor = settings.offRing;
+        if (ringOffColor == undefined) ringOffColor = '#FF0000';
+
+        let ringOnColor = settings.onRing;
+        if (ringOnColor == undefined) ringOnColor = '#00FF00';
 
         let playlistType = settings.playlistType;
-        if (playlistType == undefined) playlistType = 0;
+        if (playlistType == undefined) playlistType = 'playStop';
 
         //Play/Stop
-        if (playlistType == 0){
+        if (playlistType == 'playStop'){
             let playlistNr = parseInt(settings.playlistNr);
             if (isNaN(playlistNr) || playlistNr < 1) playlistNr = 1;
             playlistNr--;
             playlistNr += this.playlistOffset;
 
-            let playBackground = settings.playBackground;
-            if (playBackground == undefined) playBackground == '#00FF00';
-            let stopBackground = settings.stopBackground;
-            if (stopBackground == undefined) stopBackground == '#FF0000';
-
             let playlist = this.getPlaylist(playlistNr);
             if (playlist != undefined){
-                if (playlist.playing) {
-                    background = playBackground;
-                    src = 'action/images/playlist/stop.png';
-                }
-                else {
-                    background = stopBackground;
-                    src = 'action/images/playlist/play.png';
-                }
+                if (playlist.playing) 
+                    ringColor = ringOnColor;
+                else
+                    ringColor = ringOffColor;
                 if (settings.displayName)
                     name = playlist.name;
             }
-            
         }
         //Offset
-        else {
-            src = "";
-            let onBackground = settings.onBackground;
-            if (onBackground == undefined) onBackground = '#00FF00';
-            let offBackground = settings.offBackground;
-            if (offBackground == undefined) offBackground = '#000000';
-            
+        else if (playlistType == 'offset') {
             let playlistOffset = parseInt(settings.offset);
             if (isNaN(playlistOffset)) playlistOffset = 0;
-            if (playlistOffset == this.playlistOffset) background = onBackground;
-            else background = offBackground;
+            if (playlistOffset == this.playlistOffset) ringColor = ringOnColor;
         }
-        streamDeck.setIcon(0,context,src,background);
+        streamDeck.setIcon(context,"",background,2,ringColor);
         streamDeck.setTitle(name,context);
     }
 
     updateTrack(settings,context){
         let name = "";
-        let src = 'action/images/Black.png';
-        let background = '#000000';
+
+        let background = settings.background;
+        if(background == undefined) background = '#000000';
+
+        let ringColor = "#000000"
+
+        let ringOffColor = settings.offRing;
+        if (ringOffColor == undefined) ringOffColor = '#FF0000';
+
+        let ringOnColor = settings.onRing;
+        if (ringOnColor == undefined) ringOnColor = '#00FF00';
 
         let playlistType = settings.playlistType;
-        if (playlistType == undefined) playlistType = 0;
+        if (playlistType == undefined) playlistType = 'playStop';
 
         //Play/Stop
-        if (playlistType == 0){
+        if (playlistType == 'playStop'){
             let playlistNr = parseInt(settings.playlistNr);
             if (isNaN(playlistNr) || playlistNr < 1) playlistNr = 1;
             playlistNr--;
@@ -100,56 +107,53 @@ export class PlaylistControl{
             trackNr--;
             trackNr += this.trackOffset;
 
-            let playBackground = settings.playBackground;
-            if (playBackground == undefined) playBackground == '#00FF00';
-            let stopBackground = settings.stopBackground;
-            if (stopBackground == undefined) stopBackground == '#FF0000';
-
             let playlist = this.getPlaylist(playlistNr);
             if (playlist != undefined){
                 let track = playlist.data.sounds[trackNr];
                 if (track != undefined){
-                    if (track.playing) {
-                        background = playBackground;
-                        src = 'action/images/playlist/stop.png';
-                    }
-                    else {
-                        background = stopBackground;
-                        src = 'action/images/playlist/play.png';
-                    }
+                    if (track.playing) 
+                        ringColor = ringOnColor;
+                    else
+                        ringColor = ringOffColor;
                     if (settings.displayName)
                         name = track.name;
                 }
-            }
-            
+            } 
         }
         //Offset
         else {
-            src = "";
-            let onBackground = settings.onBackground;
-            if (onBackground == undefined) onBackground = '#00FF00';
-            let offBackground = settings.offBackground;
-            if (offBackground == undefined) offBackground = '#000000';
-            
             let trackOffset = parseInt(settings.offset);
             if (isNaN(trackOffset)) trackOffset = 0;
-            if (trackOffset == this.trackOffset) background = onBackground;
-            else background = offBackground;
+            if (trackOffset == this.trackOffset) ringColor = ringOnColor;
         }
-        streamDeck.setIcon(0,context,src,background);
+        streamDeck.setIcon(context,"",background,2,ringColor);
         streamDeck.setTitle(name,context);
     }
 
-    stopAll(){
-        let playing = game.playlists.playing;
-        for (let i=0; i<playing.length; i++){
-            playing[i].stopAll();
+    stopAll(force=false){
+        if (force){
+            let playing = game.playlists.playing;
+            for (let i=0; i<playing.length; i++){
+                playing[i].stopAll();
+            }
+        }
+        else {
+            let playing = game.playlists.playing;
+            let settings = game.settings.get(MODULE.moduleName,'playlists');
+            let selectedPlaylists = settings.selectedPlaylist;
+            for (let i=0; i<playing.length; i++){
+                const playlistNr = selectedPlaylists.findIndex(p => p == playing[i]._id);
+                const mode = settings.playlistMode[playlistNr];
+                if (mode == 0) playing[i].stopAll();
+            }
         }
     }
 
     getPlaylist(num){
-        let playlistId = game.settings.get(MODULE.moduleName,'selectedPlaylists')[num];
-        return game.playlists.entities.find(p => p._id == playlistId);
+        let selectedPlaylists = game.settings.get(MODULE.moduleName,'playlists').selectedPlaylist;
+        if (selectedPlaylists != undefined) 
+            return game.playlists.entities.find(p => p._id == selectedPlaylists[num]);
+        else return undefined;
     }
 
     keyPress(settings,context){
@@ -162,24 +166,27 @@ export class PlaylistControl{
         trackNr--;
         trackNr += this.trackOffset;
 
-        if (settings.playlistMode == undefined) settings.playlistMode = 0;
-        if (settings.playlistType == undefined) settings.playlistType = 0;
-        if (settings.playlistMode < 2){
-            if (settings.playlistType == 0) {
+        if (settings.playlistMode == undefined) settings.playlistMode = 'playlist';
+        if (settings.playlistType == undefined) settings.playlistType = 'playStop';
+        if (settings.playlistMode == 'stopAll') {
+            this.stopAll(true);
+        } 
+        else {
+            if (settings.playlistType == 'playStop') {
                 let playlist = this.getPlaylist(playlistNr);
                 if (playlist != undefined){
-                    if (settings.playlistMode == 0)
-                        this.playPlaylist(playlist);
+                    if (settings.playlistMode == 'playlist')
+                        this.playPlaylist(playlist,playlistNr);
                     else {
                         let track = playlist.data.sounds[trackNr];
                         if (track != undefined){
-                            this.playTrack(track,playlist);
+                            this.playTrack(track,playlist,playlistNr);
                         }
                     }
                 }
             }
             else {
-                if (settings.playlistMode == 0) {
+                if (settings.playlistMode == 'playlist') {
                     this.playlistOffset = parseInt(settings.offset);
                     if (isNaN(this.playlistOffset)) this.playlistOffset = 0;
                 }
@@ -190,35 +197,37 @@ export class PlaylistControl{
                 this.updateAll();
             }
         }
-        else {
-            this.stopAll();
-        }   
+          
     }
 
-    async playPlaylist(playlist){
+    async playPlaylist(playlist,playlistNr){
         if (playlist.playing) {
             playlist.stopAll();
             return;
         }
-        let mode = game.settings.get(MODULE.moduleName,'playlistMethod');
-        if (mode == 2) await this.stopAll();
+        let mode = game.settings.get(MODULE.moduleName,'playlists').playlistMode[playlistNr];
+        if (mode == 0) {
+            mode = game.settings.get(MODULE.moduleName,'playlists').playMode;
+            if (mode == 2) await this.stopAll();
+        }
         playlist.playAll();
     }
     
-    async playTrack(track,playlist){
+    async playTrack(track,playlist,playlistNr){
         let play;
         if (track.playing)
             play = false;
         else {
             play = true;
-            let mode = game.settings.get(MODULE.moduleName,'playlistMethod');
-            if (mode == 1) await playlist.stopAll();
-            else if (mode == 2) await this.stopAll();
+            let mode = game.settings.get(MODULE.moduleName,'playlists').playlistMode[playlistNr];
+            if (mode == 0) {
+                mode = game.settings.get(MODULE.moduleName,'playlists').playMode;
+                if (mode == 1) await playlist.stopAll();
+                else if (mode == 2) await this.stopAll();
+            }
+            else if (mode == 2) await playlist.stopAll();
         }
         await playlist.updateEmbeddedEntity("PlaylistSound", {_id: track._id, playing: play});
         playlist.update({playing: play});
     }
-
-
-
 }

src/scene.js

@@ -0,0 +1,196 @@
+import * as MODULE from "../MaterialDeck.js";
+import {streamDeck} from "../MaterialDeck.js";
+
+export class SceneControl{
+    constructor(){
+        this.active = false;
+        this.rollData = {};
+        this.sceneOffset = 0;
+    }
+
+    async updateAll(){
+        if (this.active == false) return;
+        for (let i=0; i<32; i++){   
+            let data = streamDeck.buttonContext[i];
+            if (data == undefined || data.action != 'scene') continue;
+            await this.update(data.settings,data.context);
+        }
+    }
+
+    update(settings,context){
+        if (canvas.scene == null) return;
+        this.active = true;
+        const func = settings.sceneFunction ? settings.sceneFunction : 'visible';
+        const background = settings.background ? settings.background : '#000000';
+        const ringOffColor = settings.offRing ? settings.offRing : '#000000';
+        const ringOnColor = settings.onRing ? settings.onRing : '#00FF00';
+        let ringColor = "#000000";
+        let ring = 2;
+
+        let src = "";
+        let name = "";
+        if (func == 'visible'){ //visible scenes
+            let nr = parseInt(settings.sceneNr);
+            if (isNaN(nr) || nr < 1) nr = 1;
+            nr--;
+
+            let scene = game.scenes.apps[0].scenes[nr];
+            
+            if (scene != undefined){
+                if (scene.isView) 
+                    ringColor = ringOnColor;
+                else 
+                    ringColor = ringOffColor;
+                if (settings.displaySceneName) name = scene.name;
+                if (settings.displaySceneIcon) src = scene.img;
+                if (scene.active) name += "\n(Active)";
+            }
+        }
+        else if (func == 'dir') {   //from directory
+            let nr = parseInt(settings.sceneNr);
+            if (isNaN(nr) || nr < 1) nr = 1;
+            nr--;
+
+            let sceneList = [];
+            for (let i=0; i<ui.scenes.tree.children.length; i++){
+                const scenesInFolder = ui.scenes.tree.children[i].entities;
+                for (let j=0; j<scenesInFolder.length; j++)
+                    sceneList.push(scenesInFolder[j])
+            }
+            for (let i=0; i<ui.scenes.tree.content.length; i++)
+                sceneList.push(ui.scenes.tree.content[i])
+
+            const scene = sceneList[nr+this.sceneOffset];
+            
+            if (scene != undefined){
+                if (scene.isView) 
+                    ringColor = ringOnColor;
+                else if (scene.data.navigation && scene.data.permission.default == 0)
+                    ringColor = '#000791';
+                else if (scene.data.navigation)
+                    ringColor = '#2d2d2d';
+                else 
+                    ringColor = ringOffColor;
+                
+                if (settings.displaySceneName) name = scene.name;
+                if (settings.displaySceneIcon) src = scene.img;
+                if (scene.active) name += "\n(Active)";
+            }
+        }
+        else if (func == 'any') {   //by name
+            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;
+                if (settings.displaySceneName) name = scene.name;
+                if (settings.displaySceneIcon) src = scene.img;
+                if (scene.active) name += "\n(Active)";
+            }
+        }
+        else if (func == 'active'){
+            const scene = game.scenes.active;
+            if (scene == undefined) return;
+            if (settings.displaySceneName) name = scene.name;
+            if (settings.displaySceneIcon) src = scene.img;
+            ring = 0;
+        }
+        else if (func == 'offset'){
+            let offset = parseInt(settings.sceneOffset);
+            if (isNaN(offset)) offset = 0;
+            if (offset == this.sceneOffset) ringColor = ringOnColor;
+            else ringColor = ringOffColor;
+        }
+        streamDeck.setTitle(name,context);
+        streamDeck.setIcon(context,src,background,ring,ringColor);
+    }
+
+    keyPress(settings){
+        const func = settings.sceneFunction ? settings.sceneFunction : 'visible';
+
+        if (func == 'visible'){ //visible scenes
+            const viewFunc = settings.sceneViewFunction ? settings.sceneViewFunction : 'view';
+            let nr = parseInt(settings.sceneNr);
+            if (isNaN(nr) || nr < 1) nr = 1;
+            nr--;
+            let scene = game.scenes.apps[0].scenes[nr];
+            
+            if (scene != undefined){
+                if (viewFunc == 'view'){
+                    scene.view();
+                }
+                else if (viewFunc == 'activate'){
+                    scene.activate();
+                }
+                else {
+                    if (scene.isView) scene.activate();
+                    scene.view();
+                }
+            }  
+        }
+        else if (func == 'dir') {   //from directory
+            const viewFunc = settings.sceneViewFunction ? settings.sceneViewFunction : 'view';
+            let nr = parseInt(settings.sceneNr);
+            if (isNaN(nr) || nr < 1) nr = 1;
+            nr--;
+
+            let sceneList = [];
+            for (let i=0; i<ui.scenes.tree.children.length; i++){
+                const scenesInFolder = ui.scenes.tree.children[i].entities;
+                for (let j=0; j<scenesInFolder.length; j++)
+                    sceneList.push(scenesInFolder[j])
+            }
+            for (let i=0; i<ui.scenes.tree.content.length; i++)
+                sceneList.push(ui.scenes.tree.content[i])
+
+            const scene = sceneList[nr+this.sceneOffset];
+
+            if (scene != undefined){
+                if (viewFunc == 'view'){
+                    scene.view();
+                }
+                else if (viewFunc == 'activate'){
+                    scene.activate();
+                }
+                else {
+                    if (scene.isView) scene.activate();
+                    scene.view();
+                }
+            }  
+
+        }
+        else if (func == 'any'){ //by name
+            if (settings.sceneName == undefined || settings.sceneName == '') return;
+            const scenes = game.scenes.entries;
+            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';
+
+            if (viewFunc == 'view'){
+                scene.view();
+            }
+            else if (viewFunc == 'activate'){
+                scene.activate();
+            }
+            else {
+                if (scene.isView) scene.activate();
+                scene.view();
+            }
+        }
+        else if (func == 'active'){
+            const scene = game.scenes.active;
+            if (scene == undefined) return;
+            scene.view();
+        }
+        else if (func == 'offset'){
+            let offset = parseInt(settings.sceneOffset);
+            if (isNaN(offset)) offset = 0;
+            this.sceneOffset = offset;
+            this.updateAll();
+        }
+    }
+}

src/settings.js

@@ -9,47 +9,62 @@ export const registerSettings = function() {
     //Enabled the module
     game.settings.register(MODULE.moduleName,'Enable', {
         name: "MaterialDeck.Sett.Enable",
-        scope: "world",
+        scope: "global",
         config: true,
-        default: true,
+        default: false,
         type: Boolean,
         onChange: x => window.location.reload()
     });
 
     game.settings.register(MODULE.moduleName,'streamDeckModel', {
-        name: "Stream Deck Model",
-        hint: "Reduces the amount of macros and sounds in the macro and soundboard configuration screens. Gives a better overview, but if desired it can be set to XL to get the maximum number. This doesn't influence the operation of the module.",
+        name: "MaterialDeck.Sett.Model",
+        hint: "MaterialDeck.Sett.Model_Hint",
         scope: "world",
         config: true,
         type:Number,
         default:1,
-        choices:["Mini","Normal or Mobile","XL"],
+        choices:["MaterialDeck.Sett.Model_Mini","MaterialDeck.Sett.Model_Normal","MaterialDeck.Sett.Model_XL"],
+    });
+
+    /**
+     * Sets the ip address of the server
+     */
+    game.settings.register(MODULE.moduleName,'address', {
+        name: "MaterialDeck.Sett.ServerAddr",
+        hint: "MaterialDeck.Sett.ServerAddrHint",
+        scope: "world",
+        config: true,
+        default: "localhost:3001",
+        type: String,
+        onChange: x => window.location.reload()
+    });
+
+    game.settings.register(MODULE.moduleName, 'imageBuffer', {
+        name: "MaterialDeck.Sett.ImageBuffer",
+        hint: "MaterialDeck.Sett.ImageBufferHint",
+        default: 0,
+        type: Number,
+        scope: 'world',
+        range: { min: 0, max: 500, step: 10 },
+        config: true
+        
     });
 
     /**
      * Playlist soundboard
      */
-    game.settings.register(MODULE.moduleName,'playlistMethod', {
-        name: "Playlist play method",
-        scope: "world",
-        config: false,
-        type:Number,
-        default:0,
-        choices:["Default","One track per playlist","One track in total"],
-    });
-
     game.settings.registerMenu(MODULE.moduleName, 'playlistConfigMenu',{
-        name: "Playlist Config",
-        label: "Playlist Config",
+        name: "MaterialDeck.Sett.PlaylistConfig",
+        label: "MaterialDeck.Sett.PlaylistConfig",
         type: playlistConfigForm,
         restricted: true
     });
 
-    game.settings.register(MODULE.moduleName, 'selectedPlaylists', {
+    game.settings.register(MODULE.moduleName, 'playlists', {
         name: "selectedPlaylists",
         scope: "world",
         type: Object,
-        default: {a: "None",b: "None",c: "none",d: "none",e: "none",f: "none",g: "none",h: "none",i: "none"},
+        default: {},
         config: false
     });
 

src/soundboard.js

@@ -3,6 +3,7 @@ import {streamDeck} from "../MaterialDeck.js";
 
 export class SoundboardControl{
     constructor(){
+        this.active = false;
         this.offset = 0;
         this.activeSounds = [];
         for (let i=0; i<64; i++)
@@ -10,6 +11,7 @@ export class SoundboardControl{
     }
 
     async updateAll(){
+        if (this.active == false) return;
         for (let i=0; i<32; i++){   
             let data = streamDeck.buttonContext[i];
             if (data == undefined || data.action != 'soundboard') continue;
@@ -18,14 +20,19 @@ export class SoundboardControl{
     }
 
     update(settings,context){
+        this.active = true;
         let mode = settings.soundboardMode;
-        if (mode == undefined) mode = 0;
+        if (mode == undefined) mode = 'playSound';
 
         let txt = "";
         let src = "";
-        let background = "#000000";
+        
+        let background = settings.background;
+        if (background == undefined) background = '#000000';
 
-        if (mode == 0){ //play sound
+        let ringColor = "#000000"
+
+        if (mode == 'playSound'){ //play sound
             let soundNr = parseInt(settings.soundNr);
             if (isNaN(soundNr)) soundNr = 1;
             soundNr--;
@@ -33,44 +40,46 @@ export class SoundboardControl{
 
             let soundboardSettings = game.settings.get(MODULE.moduleName, 'soundboardSettings');
             
-            let onColor = soundboardSettings.colorOn[soundNr];
-            let offColor = soundboardSettings.colorOff[soundNr];
+            if (this.activeSounds[soundNr]==false)
+                ringColor = soundboardSettings.colorOff[soundNr];
+            else 
+                ringColor = soundboardSettings.colorOn[soundNr];
 
-            background = onColor;
-            let ring = 2;
-            if (this.activeSounds[soundNr]==false) {
-                background = offColor;
-                ring = 1;
-            }
-            if (settings.displayName) txt = soundboardSettings.name[soundNr];
-            if (settings.displayIcon) src = soundboardSettings.img[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(1,context,src,background,ring,background);
+            streamDeck.setIcon(context,src,background,2,ringColor);
         }
-        else if (mode == 1) { //Offset
-            src = "";
-            let onBackground = settings.onBackground;
-            if (onBackground == undefined) onBackground = '#00FF00';
-            let offBackground = settings.offBackground;
-            if (offBackground == undefined) offBackground = '#000000';
+        else if (mode == 'offset') { //Offset
+            let ringOffColor = settings.offRing;
+            if (ringOffColor == undefined) ringOffColor = '#000000';
+
+            let ringOnColor = settings.onRing;
+            if (ringOnColor == undefined) ringOnColor = '#00FF00';
 
             let offset = parseInt(settings.offset);
             if (isNaN(offset)) offset = 0;
-            if (offset == this.offset) background = onBackground;
-            else background = offBackground;
+            if (offset == this.offset) ringColor = ringOnColor;
+            else ringColor = ringOffColor;
             streamDeck.setTitle(txt,context);
-            streamDeck.setIcon(1,context,src,background);
+            streamDeck.setIcon(context,"",background,2,ringColor);
         }
-        else if (mode == 2) {   //Stop all sounds
-            let src = 'action/images/soundboard/stop.png';
-            streamDeck.setIcon(0,context,src,settings.background);
+        else if (mode == 'stopAll') {   //Stop all sounds
+            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 (soundPlaying)
+                streamDeck.setIcon(context,src,settings.background,2,'#00FF00',true);
+            else
+                streamDeck.setIcon(context,src,settings.background,1,'#000000',true);
         }
     }
 
     keyPressDown(settings){
         let mode = settings.soundboardMode;
-        if (mode == undefined) mode = 0;
-        if (mode == 0) {    //Play sound
+        if (mode == undefined) mode = 'playSound';
+        if (mode == 'playSound') {    //Play sound
             let soundNr = parseInt(settings.soundNr);
             if (isNaN(soundNr)) soundNr = 1;
             soundNr--;
@@ -84,13 +93,13 @@ export class SoundboardControl{
             if (this.activeSounds[soundNr] == false) play = true;
             this.playSound(soundNr,repeat,play);
         }
-        else if (mode == 1) { //Offset
+        else if (mode == 'offset') { //Offset
             let offset = parseInt(settings.offset);
             if (isNaN(offset)) offset = 0;
             this.offset = offset;
             this.updateAll();
         }
-        else {  //Stop All Sounds
+        else if (mode == 'stopAll') {  //Stop All Sounds
             for (let i=0; i<64; i++) {
                 if (this.activeSounds[i] != false){
                     this.playSound(i,false,false);
@@ -101,8 +110,8 @@ export class SoundboardControl{
 
     keyPressUp(settings){
         let mode = settings.soundboardMode;
-        if (mode == undefined) mode = 0;
-        if (mode != 0) return;
+        if (mode == undefined) mode = 'playSound';
+        if (mode != 'playSound') return;
         let soundNr = parseInt(settings.soundNr);
         if (isNaN(soundNr)) soundNr = 1;
         soundNr--;
@@ -114,30 +123,47 @@ export class SoundboardControl{
             this.playSound(soundNr,false,false);
     }
 
-    playSound(soundNr,repeat,play){  
-        let trackId = game.settings.get(MODULE.moduleName,'soundboardSettings').sounds[soundNr];
+    async playSound(soundNr,repeat,play){  
+        const soundBoardSettings = game.settings.get(MODULE.moduleName,'soundboardSettings');
+        let playlistId;
+        if (soundBoardSettings.selectedPlaylists != undefined) playlistId = soundBoardSettings.selectedPlaylists[soundNr];
+        let src;
+        if (playlistId == "" || playlistId == undefined) return;
+        if (playlistId == 'none') return;
+        else if (playlistId == 'FP') {
+            src = soundBoardSettings.src[soundNr];
+            const ret = await FilePicker.browse("data", src, {wildcard:true});
+            const files = ret.files;
+            if (files.length == 1) src = files;
+            else {
+                let value = Math.floor(Math.random() * Math.floor(files.length));
+                src = files[value];
+            }
+        }
+        else {
+            const soundId = soundBoardSettings.sounds[soundNr];
+            const sounds = game.playlists.entities.find(p => p._id == playlistId).data.sounds;
+            if (sounds == undefined) return;
+            const sound = sounds.find(p => p._id == soundId);
+            if (sound == undefined) return;
+            src = sound.path;
+        }
+
         let volume = game.settings.get(MODULE.moduleName,'soundboardSettings').volume[soundNr]/100;
         volume = AudioHelper.inputToVolume(volume);
-        if (trackId == "" || trackId == undefined) return;
+        
         let payload = {
             "msgType": "playSound", 
             "trackNr": soundNr,
+            "src": src,
             "repeat": repeat,
             "play": play,
             "volume": volume
         };
         game.socket.emit(`module.MaterialDeck`, payload);
+
         if (play){
-            let trackId = game.settings.get(MODULE.moduleName,'soundboardSettings').sounds[soundNr];
-            let playlistId = game.settings.get(MODULE.moduleName,'soundboardSettings').playlist;
-            let sounds = game.playlists.entities.find(p => p._id == playlistId).data.sounds;
-            let sound = sounds.find(p => p._id == trackId);
-            if (sound == undefined){
-                this.activeSounds[soundNr] = false;
-                return;
-            }
             volume *= game.settings.get("core", "globalInterfaceVolume");
-            let src = sound.path;
 
             let howl = new Howl({src, volume, loop: repeat, onend: (id)=>{
                 if (repeat == false){

src/streamDeck.js

@@ -23,6 +23,13 @@ export class StreamDeck{
         let canvasBox = document.createElement('div');
         canvasBox.id = 'sdCanvasBox';
         document.body.appendChild(canvasBox); // adds the canvas to the body element
+
+        this.syllableRegex = /[^aeiouy]*[aeiouy]+(?:[^aeiouy]*$|[^aeiouy](?=[^aeiouy]))?/gi;
+
+        
+        this.imageBuffer = [];
+        this.imageBufferCounter = 0;
+        
     }
 
     setScreen(action){
@@ -42,25 +49,100 @@ export class StreamDeck{
     clearContext(action,coordinates = {column:0,row:0}){
         let num = coordinates.column + coordinates.row*8;
         this.buttonContext[num] = undefined;
+        if (this.getActive(action) == false){
+            if (action == 'token') MODULE.tokenControl.active = false; 
+            else if (action == 'macro') MODULE.macroControl.active = false; 
+            else if (action == 'combattracker') MODULE.combatTracker.active = false; 
+            else if (action == 'playlist') MODULE.playlistControl.active = false;
+            else if (action == 'soundboard') MODULE.soundboard.active = false;
+            else if (action == 'other') MODULE.otherControls.active = false;
+            else if (action == 'external') MODULE.externalModules.active = false;
+            else if (action == 'scene') MODULE.sceneControl.active = false;
+        }
     }
 
-    formatTitle(txt){
-        let txtArray = txt.split(" ");
-        let txtNew = "";
-        for (let i=0; i<txtArray.length; i++){
-            let txtNewPart = txtArray[i];
-            if (i<txtArray.length-1 && txtArray[i].length + txtArray[i+1].length < 8) {
-                txtNewPart = txtArray[i] + " " + txtArray[i+1];
-                i++;
+    getActive(action){
+        for (let i=0; i<this.buttonContext.length; i++){
+            if (this.buttonContext[i] != undefined && this.buttonContext[i].action == action)
+                return true;
+        }
+        return false;
+    }
+    
+    /*
+    *  Get syllables of a word. Taken from: https://stackoverflow.com/a/49407494
+    */
+    syllabify(words) {
+        return words.match(this.syllableRegex);
+    }
+
+    formatTitle(txt=''){
+        let txtArrayOriginal = txt.split("\n");
+        let txtArray = [];
+        let counter = 0;
+        for (let i=0; i<txtArrayOriginal.length; i++){
+            if (i>0){
+                txtArray[counter] = '';
+                counter++;
             }
+            let txtArrayTemp = txtArrayOriginal[i].split(" ");
+            for (let j=0; j<txtArrayTemp.length; j++){
+                txtArray[counter] = txtArrayTemp[j];
+                counter++;
+            }
+        }
+        let txtNew = "";
+        let newTxtArray = ['','','','','','','','','','','','','','','','','','','',''];
+        counter = 0;
+        for (let i=0; i<txtArray.length; i++){
+            
+            let txtNewPart = txtArray[i];
+            
+            if (txtNewPart != undefined && txtNewPart.length > 10){
+                let syllables = this.syllabify(txtNewPart);
+
+                for (let j=0; j<syllables.length; j++){
+                    if (syllables.length == 0){
+                        newTxtArray[counter] = txtNewPart;
+                        counter++;
+                    }
+                    else if (syllables[j+1] == undefined){
+                        newTxtArray[counter] = syllables[j];
+                        counter++;
+                    }
+                    else if ((syllables[j].length+syllables[j+1].length) < 10){
+                        newTxtArray[counter] = syllables[j]+syllables[j+1]; 
+                        if (syllables.length-2 > j) newTxtArray[counter] += '-';
+                        counter++;
+                        j++;
+                    }
+                    else {
+                        newTxtArray[counter] = syllables[j];
+                        if (syllables.length > j) newTxtArray[counter] += '-';
+                        counter++;
+                    }
+                }
+            }
+            else{
+                newTxtArray[counter] = txtNewPart;
+                counter++;
+            }
+        }
+        for (let i=0; i<counter; i++){
             if (txtNew.length > 0)
                 txtNew += "\n";
-            txtNew += txtNewPart;
+            if (i<counter-1 && newTxtArray[i].length + newTxtArray[i+1].length < 10) {
+                txtNew += newTxtArray[i] + " " + newTxtArray[i+1];
+                i++;
+            }
+            else
+                txtNew += newTxtArray[i];
         }
         return txtNew;
     }
 
     setTitle(txt,context){
+        if (txt == null || txt == undefined) txt = '';
         txt = this.formatTitle(txt);
         for (let i=0; i<32; i++){
             if (this.buttonContext[i] == undefined) continue;
@@ -72,6 +154,7 @@ export class StreamDeck{
             }
         }
         let msg = {
+            target: "SD",
             event: 'setTitle',
             context: context,
             payload: {
@@ -84,6 +167,7 @@ export class StreamDeck{
     
     setColor(context,color = '#000000'){
         let msg = {
+            target: "SD",
             event: 'setIcon',
             context: context,
             url: '',
@@ -93,57 +177,84 @@ export class StreamDeck{
         MODULE.sendWS(JSON.stringify(msg));
     }
 
-    setImage(image,context){
-        //var image = "data:image/svg+xml;charset=utf8,<?xml version=\"1.0\" encoding=\"iso-8859-1\"?><!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"	 viewBox=\"0 0 288 288\" style=\"enable-background:new 0 0 288 288;\" xml:space=\"preserve\">	 <style>	 	.text {			 font-family: sans-serif;			 fill: red;			 font-size: 10em;		 }	</style><g>  <text x=\"0px\" y=\"100px\"  class=\"text\">GPUUTILIZATION</text></g></svg>";
-
+    setImage(image,context,nr,id){
         var json = {
+            target: "SD",
             event: "setImage",
             context: context,
             payload: {
-            image: "" + image,
-            target: 0
+                nr: nr,
+                id: id,
+                image: "" + image,
+                target: 0
             }
         };
         MODULE.sendWS(JSON.stringify(json));
     }
 
-    setIcon(iconLocation, context,src,background = '#000000',ring=0,ringColor = "#000000"){
+    setBufferImage(context,nr,id){
+        var json = {
+            target: "SD",
+            event: "setBufferImage",
+            context: context,
+            payload: {
+                nr: nr,
+                id: id,
+                target: 0
+            }
+        };
+        MODULE.sendWS(JSON.stringify(json));
+    }
+
+    setIcon(context,src='',background = '#000000',ring=0,ringColor = "#000000",overlay=false){
+        if (src == null || src == undefined) src = '';
+        if (src == '') src = 'modules/MaterialDeck/img/black.png';
         for (let i=0; i<32; i++){
             if (this.buttonContext[i] == undefined) continue;
             if (this.buttonContext[i].context == context) {
-                if (this.buttonContext[i].icon == src && this.buttonContext[i].ring == ring && this.buttonContext[i].ringColor == ringColor && this.buttonContext[i].background == background && this.buttonContext[i].iconLocation == iconLocation) 
+                if (this.buttonContext[i].icon == src && this.buttonContext[i].ring == ring && this.buttonContext[i].ringColor == ringColor && this.buttonContext[i].background == background) 
                     return;
                 this.buttonContext[i].icon = src;
                 this.buttonContext[i].ring = ring;
                 this.buttonContext[i].ringColor = ringColor;
                 this.buttonContext[i].background = background;
-                this.buttonContext[i].iconLocation = iconLocation;
             }
         }
-
-        let split = src.split('?');
-        split = split[0].split('.');
-        let format = split[split.length-1];
-        split = src.split(' ');
+        const data = {
+            url: src,
+            background:background,
+            ring:ring,
+            ringColor:ringColor,
+            overlay:overlay
+        }
+        const imgBuffer = this.checkImageBuffer(data);
+        if (imgBuffer != false) {
+            this.setBufferImage(context,imgBuffer,this.getImageBufferId(data))
+            return;
+        }
+        
+        let split = src.split('.');
+        //filter out stuff from Tokenizer
+        let format = split[split.length-1].split('?')[0];
+        split = split[0].split(' ');
         if (split[0] == 'fas' || split[0] == 'far' || split[0] == 'fal' || split[0] == 'fad') format = 'icon';
         let msg = {
+            target: "SD",
             event: 'setIcon',
             context: context,
             url: src,
             format: format,
             background: background,
             ring: ring,
-            ringColor: ringColor
+            ringColor: ringColor,
+            overlay: overlay
         };
-        if (iconLocation == 0){
-            MODULE.sendWS(JSON.stringify(msg));
-        }
-        else 
-            this.getImage(msg);
+        this.getImage(msg);
     }
 
     setState(state,context,action){
         let msg = {
+            target: "SD",
             event: 'setStateCustom',
             context: context,
             action: action,
@@ -157,12 +268,13 @@ export class StreamDeck{
         if (action == 'playlistcontrol')
             profile = 'MaterialDeck-Playlist'
         var json = {
-            "source": 1,
-            "event": "switchToProfile",
-            "context": this.pluginId,
-            "device": device,
-            "payload": {
-                "profile": profile
+            target: "SD",
+            source: 1,
+            event: "switchToProfile",
+            context: this.pluginId,
+            device: device,
+            payload: {
+                profile: profile
             }
         };
         MODULE.sendWS(JSON.stringify(json));
@@ -180,7 +292,6 @@ export class StreamDeck{
         var content = window.getComputedStyle(
             elm, ':before'
         ).getPropertyValue('content')
-        //console.log(elm);
         document.body.removeChild(elm);
         return content;
     };
@@ -188,7 +299,7 @@ export class StreamDeck{
     getImage(data){
         if (data == undefined) 
             return;
-        console.log('image',data)
+        
         const context = data.context;
         var url = data.url;
         const format = data.format;
@@ -203,14 +314,11 @@ export class StreamDeck{
         if (BGvalid == false) background = '#000000';
 
         let canvas;
-        let canvasId = 'sdCanvas' + this.counter;
-        canvas = document.getElementById(canvasId);
-        if (canvas == null){
+        if (canvas == null || canvas == undefined){
             canvas = document.createElement('canvas');
-            canvas.id = canvasId;
             canvas.width="144";
             canvas.height="144";
-            canvas.style="background-color:transparent";
+            canvas.style="background-color:transparent;visibility:hidden";
             document.getElementById('sdCanvasBox').appendChild(canvas); // adds the canvas to #someBox
         }
         this.counter++;
@@ -246,19 +354,21 @@ export class StreamDeck{
             var content = window.getComputedStyle(
             elm, ':before'
             ).getPropertyValue('content')
-            //console.log(content[1]);
             canvas.removeChild(elm);
-            ctx.fillText(content[1], 35, 105);
+            const iconMeasurement = ctx.measureText(content[1]);
+            const horOffset = (144-iconMeasurement.width)/2;
+            const vertOffset = 144-(iconMeasurement.actualBoundingBoxAscent-iconMeasurement.actualBoundingBoxDescent)/2;
+            ctx.fillText(content[1], horOffset, vertOffset);
         }
 
         if (format != 'jpg' && format != 'jpeg' && format != 'png' && format != 'webm' && format != 'webp' && format != 'gif' && format != 'svg') url = "modules/MaterialDeck/img/transparant.png";
-        if (url == "") url = "modules/MaterialDeck/img/transparant.png"
-        //console.log(url);
+        //if (url == "") url = "modules/MaterialDeck/img/transparant.png"
         let resImageURL = url;
-        
         let img = new Image();
+        img.setAttribute('crossorigin', 'anonymous');
         img.onload = () => {
             if (format == 'color') ctx.filter = "opacity(0)";
+            if (data.overlay) ctx.filter = "brightness(60%)";
             //ctx.filter = "brightness(0) saturate(100%) invert(38%) sepia(62%) saturate(2063%) hue-rotate(209deg) brightness(90%) contrast(95%)";
             var imageAspectRatio = img.width / img.height;
             var canvasAspectRatio = canvas.width / canvas.height;
@@ -291,8 +401,47 @@ export class StreamDeck{
             }
             ctx.drawImage(img, xStart+margin, yStart+margin, renderableWidth - 2*margin, renderableHeight - 2*margin);
             var dataURL = canvas.toDataURL();
-            this.setImage(dataURL,data.context);
+            canvas.remove();
+            const nr = this.addToImageBuffer(dataURL,data);
+            this.setImage(dataURL,data.context,nr,this.getImageBufferId(data));
         };
         img.src = resImageURL;
     }
+
+    getImageBufferId(data){
+        return data.url+data.background+data.ring+data.ringColor+data.overlay;
+    }
+
+    addToImageBuffer(img,data){
+        const id = this.getImageBufferId(data);
+        const maxBufferSize = game.settings.get(MODULE.moduleName,'imageBuffer');
+        if (maxBufferSize == 0) return false;
+        if (this.imageBufferCounter > maxBufferSize) this.imageBufferCounter = 0;
+        
+        const newData = {
+            id: id,
+            img: img
+        }
+
+        if (this.imageBuffer[this.imageBufferCounter] == undefined) this.imageBuffer.push(newData);
+        else this.imageBuffer[this.imageBufferCounter] = newData;
+        this.imageBufferCounter++;
+        
+        return this.imageBufferCounter - 1;
+    }
+
+    checkImageBuffer(data){
+        if (game.settings.get(MODULE.moduleName,'imageBuffer') == 0) return false;
+        const id = this.getImageBufferId(data);
+        
+        for (let i=0; i<this.imageBuffer.length; i++){
+            if (this.imageBuffer[i].id == id) return i;
+        }
+        return false;
+    }
+
+    resetImageBuffer(){
+        this.imageBufferCounter = 0;
+        this.imageBuffer = [];
+    }
 }

src/token.js

@@ -3,10 +3,11 @@ import {streamDeck} from "../MaterialDeck.js";
 
 export class TokenControl{
     constructor(){
+        this.active = false;
     }
 
     async update(tokenId){
-        console.log('tokenId',tokenId)
+        if (this.active == false) return;
         for (let i=0; i<32; i++){   
             let data = streamDeck.buttonContext[i];
             if (data == undefined || data.action != 'token') continue;
@@ -15,103 +16,463 @@ export class TokenControl{
     }
 
     pushData(tokenId,settings,context,ring=0,ringColor='#000000'){
-        console.log('tk',tokenId,settings)
         let name = false;
         let icon = false;
-        let type = 0;
+        let stats =  settings.stats;
         let background = "#000000";
 
         if (settings.displayIcon) icon = true;
         if (settings.displayName) name = true;
-        if (settings.stats != undefined) type = settings.stats;
+        let system = settings.system;
+        if (system == undefined) system = 'dnd5e';
+        if (system == 'demonlord') stats = settings.statsDemonlord;
+        if (stats == undefined) stats = 'none';
         if (settings.background) background = settings.background;
-        
+
         let tokenName = "";
-        let hp = "";
-        let AC = "";
-        let speed = "";
-        let initiative = "";
         let txt = "";
         let iconSrc = "";
+        let overlay = false;
         if (tokenId != undefined) {
             let token = canvas.tokens.children[0].children.find(p => p.id == tokenId);
             tokenName = token.data.name;
-            iconSrc += token.data.img;
+            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;
-            let system = game.system.id;
-            if (system == 'dnd5e'){
-                let attributes = actor.data.data.attributes;
-                let hpCurrent = attributes.hp.value;
-                let hpMax = attributes.hp.max;
-                hp = hpCurrent + "/" + hpMax;
-                AC = attributes.ac.value;
-                
-                if (attributes.speed._deprecated){
-                    if (attributes.movement.burrow > 0) speed += attributes.movement.burrow + attributes.movement.units + " burrow";
-                    if (attributes.movement.climb > 0) {
-                        if (speed.length > 0) speed += '\n';
-                        speed += attributes.movement.climb + attributes.movement.units + " climb";
+            if (stats == 'custom'){
+                const custom = settings.custom ? settings.custom : '';
+                let split = custom.split('[');
+                for (let i=0; i<split.length; i++) split[i] = split[i].split(']');
+                for (let i=0; i<split.length; i++)
+                    for (let j=0; j<split[i].length; j++){
+                        if (split[i][j][0] != '@') txt += split[i][j];
+                        else {
+                            const dataPath = split[i][j].split('@')[1].split('.');
+                            let data = token;
+                            
+                            for (let i=0; i<dataPath.length; i++)
+                                data = data?.[dataPath[i]];
+                            if (data == undefined) txt += '[undef]';
+                            else txt += data;
+                        }
                     }
-                    if (attributes.movement.fly > 0) {
-                        if (speed.length > 0) speed += '\n';
-                        speed += attributes.movement.fly + attributes.movement.units + " fly";
-                    }
-                    if (attributes.movement.hover > 0) {
-                        if (speed.length > 0) speed += '\n';
-                        speed += attributes.movement.hover + attributes.movement.units + " hover";
-                    }
-                    if (attributes.movement.swim > 0) {
-                        if (speed.length > 0) speed += '\n';
-                        speed += attributes.movement.swim + attributes.movement.units + " swim";
-                    }
-                    if (attributes.movement.walk > 0) {
-                        if (speed.length > 0) speed += '\n';
-                        speed += attributes.movement.walk + attributes.movement.units + " walk";
-                    }
-                }
-                else {
-                    speed = attributes.speed.value;
-                    if (attributes.speed.special.length > 0) speed + "\n" + attributes.speed.special;
-                }
-                initiative = attributes.init.total;
             }
-            else return;
+            else if (system == 'dnd5e' && game.system.id == 'dnd5e'){
+                let attributes = actor.data.data.attributes;
+                if (stats == 'HP') {
+                    txt += attributes.hp.value + "/" + attributes.hp.max;
+                }
+                else if (stats == 'TempHP') {
+                    txt += attributes.hp.temp;
+                    if (attributes.hp.tempmax != null)
+                    txt += "/" + attributes.hp.tempmax;
+                }
+                else if (stats == 'AC') txt += attributes.ac.value;
+                else if (stats == 'Speed'){
+                    let speed = "";
+                    if (attributes.movement != undefined){
+                        if (attributes.movement.burrow > 0) speed += game.i18n.localize("DND5E.MovementBurrow") + ': ' +  attributes.movement.burrow + attributes.movement.units;
+                        if (attributes.movement.climb > 0) {
+                            if (speed.length > 0) speed += '\n';
+                            speed += game.i18n.localize("DND5E.MovementClimb") + ': ' + attributes.movement.climb + attributes.movement.units;
+                        }
+                        if (attributes.movement.fly > 0) {
+                            if (speed.length > 0) speed += '\n';
+                            speed += game.i18n.localize("DND5E.MovementFly") + ': ' + attributes.movement.fly + attributes.movement.units;
+                        }
+                        if (attributes.movement.hover > 0) {
+                            if (speed.length > 0) speed += '\n';
+                            speed += game.i18n.localize("DND5E.MovementHover") + ': ' + attributes.movement.hover + attributes.movement.units;
+                        }
+                        if (attributes.movement.swim > 0) {
+                            if (speed.length > 0) speed += '\n';
+                            speed += game.i18n.localize("DND5E.MovementSwim") + ': ' + attributes.movement.swim + attributes.movement.units;
+                        }
+                        if (attributes.movement.walk > 0) {
+                            if (speed.length > 0) speed += '\n';
+                            speed += game.i18n.localize("DND5E.MovementWalk") + ': ' + attributes.movement.walk + attributes.movement.units;
+                        }
+                    }
+                    else {
+                        speed = attributes.speed.value;
+                        if (attributes.speed.special.length > 0) speed + "\n" + attributes.speed.special;
+                    }
+                    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 ((system == 'dnd3.5e' && game.system.id == 'D35E') || (system == 'pf1e' && game.system.id == 'pf1')){
+                let attributes = 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';
+                    else txt += attributes.hp.temp;
+                }
+                else if (stats == 'AC') txt += attributes.ac.normal.total;
+                else if (stats == 'Speed'){
+                    let speed = "";
+                    if (attributes.speed.burrow.total > 0) speed += 'Burrow: ' +  attributes.speed.burrow.total + 'Ft';
+                    if (attributes.speed.climb.total > 0) {
+                        if (speed.length > 0) speed += '\n';
+                        speed += 'Climb: ' + attributes.speed.climb.total + 'Ft';
+                    }
+                    if (attributes.speed.fly.total > 0) {
+                        if (speed.length > 0) speed += '\n';
+                        speed += 'Fly: ' + attributes.speed.fly.total + 'Ft';
+                    }
+                    if (attributes.speed.land.total > 0) {
+                        if (speed.length > 0) speed += '\n';
+                        speed += 'Land: ' + attributes.speed.land.total + 'Ft';
+                    }
+                    if (attributes.speed.swim.total > 0) {
+                        if (speed.length > 0) speed += '\n';
+                        speed += 'Swim: ' + attributes.speed.swim.total + 'Ft';
+                    }
+                    txt += speed;
+                }
+                else if (stats == 'Init') txt += attributes.init.total;
+            }
+            else if (system == 'pf2e' && game.system.id == 'pf2e'){
+                let attributes = 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';
+                    else {
+                        txt += attributes.hp.temp;
+                        if (attributes.hp.tempmax > 0) txt += '/' + attributes.hp.tempmax;
+                    }  
+                }
+                else if (stats == 'AC') txt += attributes.ac.value;
+                else if (stats == 'Speed'){
+                    let speed = "Land: " + attributes.speed.value.replace('feet','') + ' feet';
+                    const otherSpeeds = attributes.speed.otherSpeeds;
+                    if (otherSpeeds.length > 0)
+                        for (let i=0; i<otherSpeeds.length; i++)
+                            speed += '\n' + otherSpeeds[i].type + ": " + otherSpeeds[i].value;    
+                    txt += speed;
+                }
+                else if (stats == 'Init') {
+                    let init = attributes.initiative.totalModifier;
+                    if (init != undefined) txt += init;
+                }
+            }
+            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";
+            }
+            else {
+                //Other systems
+
+
+
+
+            }
+
+            if (settings.onClick == 'visibility') { //toggle visibility
+                ring = 1;
+                if (token.data.hidden){
+                    ring = 2;
+                    ringColor = "#FF7B00";
+                }
+                if (icon == false) {
+                    iconSrc = window.CONFIG.controlIcons.visibility;
+                    overlay = true;
+                }
+            }
+            else if (settings.onClick == 'combatState') { //toggle combat state
+                ring = 1;
+                if (token.inCombat){
+                    ring = 2;
+                    ringColor = "#FF7B00";
+                }
+                if (icon == false) {
+                    iconSrc = window.CONFIG.controlIcons.combat;
+                    overlay = true;
+                }
+            }
+            else if (settings.onClick == 'target') { //target token
+                ring = 1;
+                if (token.isTargeted){
+                    ring = 2;
+                    ringColor = "#FF7B00";
+                }
+                if (icon == false) {
+                    iconSrc = "fas fa-bullseye";
+                }
+            }
+            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';
+                    if (condition == 'removeAll' && icon == false)
+                        iconSrc = window.CONFIG.controlIcons.effects;
+                    else if (icon == false) {
+                        let effect = CONFIG.statusEffects.find(e => e.id === condition);
+                        iconSrc = effect.icon;
+                        let effects = token.actor.effects.entries;
+                        let active = effects.find(e => e.isTemporary === condition);
+                        if (active != undefined){
+                            ring = 2;
+                            ringColor = "#FF7B00";
+                        } 
+                    } 
+                }
+                else if (system == 'pf2e' && game.system.id == 'pf2e') {
+                    let condition = settings.conditionPF2E;
+                    if (condition == undefined) condition = 'removeAll';
+                    if (condition == 'removeAll' && icon == false)
+                        iconSrc = window.CONFIG.controlIcons.effects;
+                    else if (icon == false) {
+                        let effects = token.data.effects;
+                        for (let i=0; i<effects.length; i++){
+                            if (this.pf2eCondition(condition) == effects[i]){
+                                ring = 2;
+                                ringColor = "#FF7B00";
+                            }       
+                        }
+                        iconSrc = this.pf2eCondition(condition);
+                    } 
+                }
+                else if (system == 'demonlord' && game.system.id == 'demonlord'){
+                    let condition = settings.conditionDemonlord;
+                    if (condition == undefined) condition = 'removeAll';
+                    if (condition == 'removeAll' && icon == false)
+                        iconSrc = window.CONFIG.controlIcons.effects;
+                    else if (icon == false) {
+                        let effect = CONFIG.statusEffects.find(e => e.id === condition);
+                        iconSrc = effect.icon;
+                        let effects = token.actor.effects.entries;
+                        let active = effects.find(e => e.isTemporary === condition);
+                        if (active != undefined){
+                            ring = 2;
+                            ringColor = "#FF7B00";
+                        } 
+                    } 
+                }
+                else
+                    iconSrc = "";
+                overlay = true;
+            }
         }
         else {
             iconSrc += "";
+            if (settings.onClick == 'visibility') { //toggle visibility
+                if (icon == false) {
+                    iconSrc = window.CONFIG.controlIcons.visibility;
+                    ring = 2;
+                    overlay = true;
+                }
+            }
+            else if (settings.onClick == 'combatState') { //toggle combat state
+                if (icon == false) {
+                    iconSrc = window.CONFIG.controlIcons.combat;
+                    ring = 2;
+                    overlay = true;
+                }
+            }
+            else if (settings.onClick == 'target') { //target token
+                if (icon == false) {
+                    iconSrc = "fas fa-bullseye";
+                    ring = 2;
+                    overlay = true;
+                }
+            }
+            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';
+
+                    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';
+    
+                    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';
+
+                    if (condition == 'removeAll' && icon == false)
+                        iconSrc = window.CONFIG.controlIcons.effects;
+                    else if (icon == false) 
+                        iconSrc = CONFIG.statusEffects.find(e => e.id === condition).icon;
+                }
+                ring = 1;
+                overlay = true;
+            }
         }
-        if (icon) streamDeck.setIcon(1,context,iconSrc,background,ring,ringColor);
+        if (icon == false){
+            if (stats == 'HP' || stats == 'TempHP') //HP
+                iconSrc = "modules/MaterialDeck/img/token/hp.png";
+            else if (stats == 'AC' || stats == 'ShieldHP') //AC
+                iconSrc = "modules/MaterialDeck/img/token/ac.webp";
+            else if (stats == 'Speed') //Speed
+                iconSrc = "modules/MaterialDeck/img/token/speed.webp";
+            else if (stats == 'Init') //Initiative
+                iconSrc = "modules/MaterialDeck/img/token/init.png";
+            else if (stats == 'PassivePerception') 
+                iconSrc = "modules/MaterialDeck/img/black.png";
+            else if (stats == 'PassiveInvestigation') 
+                iconSrc = "modules/MaterialDeck/img/black.png";
+        } 
+        streamDeck.setIcon(context,iconSrc,background,ring,ringColor,overlay);
         
-        if (name) txt += tokenName;
-        if (name && type > 0) txt += "\n";
-        if (type == 1) txt += hp;
-        else if (type == 2) txt += AC;
-        else if (type == 3) txt += speed;
-        else if (type == 4) txt += initiative;
         streamDeck.setTitle(txt,context);
     }
     
-    keyPress(settings){
+    async keyPress(settings){
         if (MODULE.selectedTokenId == undefined) return;
         const tokenId = MODULE.selectedTokenId;
 
         let onClick = settings.onClick;
-        if (onClick == undefined) conClick = 0;
+        if (onClick == undefined) onClick = 'doNothing';
 
         const token = canvas.tokens.children[0].children.find(p => p.id == tokenId);
         if (token == undefined) return;
 
-        if (onClick == 0)   //Do nothing
+        let system = settings.system;
+        if (system == undefined) system = 'dnd5e';
+
+        if (onClick == 'doNothing')   //Do nothing
             return;
-        else if (onClick == 1){ //center on token
+        else if (onClick == 'center'){ //center on token
             let location = token.getCenter(token.x,token.y); 
             canvas.animatePan(location);
         }
-        else if (onClick == 2){ //Open character sheet
-            token.actor.sheet.render(true);
+        else if (onClick == 'charSheet'){ //Open character sheet
+            const element = document.getElementById(token.actor.sheet.id);
+            if (element == null) token.actor.sheet.render(true);
+            else token.actor.sheet.close();
         }
-        else {  //Open token config
-            token.sheet._render(true);
+        else if (onClick == 'tokenConfig') {  //Open token config
+            const element = document.getElementById(token.sheet.id);
+            if (element == null) token.sheet.render(true);
+            else token.sheet.close();
+        }
+        else if (onClick == 'visibility') {    //Toggle visibility
+            token.toggleVisibility();
+        }
+        else if (onClick == 'combatState') {    //Toggle combat state
+            token.toggleCombat();
+        }
+        else if (onClick == 'target') {    //Target token
+            token.setTarget(!token.isTargeted,{releaseOthers:false});
+        }
+        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';
+
+                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)
+                    }
+                }
+                else {
+                    const effect = CONFIG.statusEffects.find(e => e.id === condition);
+                    await token.toggleEffect(effect);
+                }
+            }
+            else if (system == 'pf2e' && game.system.id == 'pf2e'){
+                let condition = settings.conditionPF2E;
+                if (condition == undefined) condition = '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)
+                    }
+                }
+                else {
+                    const effect = this.pf2eCondition(condition);
+                    await token.toggleEffect(effect);
+                }
+            }  
+            else if (system == 'demonlord' && game.system.id == 'demonlord'){
+                let condition = settings.conditionDemonlord;
+                if (condition == undefined) 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)
+                    }
+                }
+                else {
+                    const effect = CONFIG.statusEffects.find(e => e.id === condition);
+                    await token.toggleEffect(effect);
+                }
+            }  
+            this.update(tokenId);
+            
+        }
+        else if (onClick == 'vision'){
+            const token = canvas.tokens.children[0].children.find(p => p.id == tokenId);
+            if (token == undefined) return;
+            let tokenData = token.data;
+
+            const dimVision = parseInt(settings.dimVision);
+            const brightVision = parseInt(settings.brightVision);
+            const sightAngle = parseInt(settings.sightAngle);
+            const dimRadius = parseInt(settings.dimRadius);
+            const brightRadius = parseInt(settings.brightRadius);
+            const emissionAngle = parseInt(settings.emissionAngle);
+            const lightColor = settings.lightColor ? settings.lightColor : '#000000';
+            const colorIntensity = isNaN(parseInt(settings.colorIntensity)) ? 0 : parseInt(settings.colorIntensity)/100;
+            const animationType = settings.animationType ? settings.animationType : 'none';
+            const animationSpeed = isNaN(parseInt(settings.animationSpeed)) ? 1 : parseInt(settings.animationSpeed);
+            const animationIntensity = isNaN(parseInt(settings.animationIntensity)) ? 1 : parseInt(settings.animationIntensity);
+
+            let data = {};
+            if (isNaN(dimVision)==false) data.dimSight = dimVision;
+            if (isNaN(brightVision)==false) data.brightSight = brightVision;
+            if (isNaN(sightAngle)==false) data.sightAngle = sightAngle;
+            if (isNaN(dimRadius)==false) data.dimLight = dimRadius;
+            if (isNaN(brightRadius)==false) data.brightLight = brightRadius;
+            if (isNaN(emissionAngle)==false) data.lightAngle = emissionAngle;
+            data.lightColor = lightColor;
+            data.lightAlpha = Math.sqrt(colorIntensity).toNearest(0.05)
+            let animation = {
+                type: '',
+                speed: tokenData.lightAnimation.speed,
+                intensity: tokenData.lightAnimation.intensity
+            };
+            if (animationType != 'none'){
+                animation.type = animationType;
+                animation.intensity = animationIntensity;
+                animation.speed = animationSpeed;
+            }
+            data.lightAnimation = animation;
+
+            token.update(data);
+        }
+        else if (system == 'demonlord' && game.system.id == 'demonlord' && onClick == 'initiative'){
+            token.actor.update({
+                'data.fastturn': !token.actor.data?.data?.fastturn
+            })
+            
         }
     }
+
+    pf2eCondition(condition){
+        return "systems/pf2e/icons/conditions-2/" + condition + ".png";
+    }
 }

templates/macroConfig.html

@@ -3,7 +3,7 @@
         .boxed {
             border: 1px solid black ;
             border-radius: 5px ; 
-            width: 100px;
+            max-width: 166px;
             height: {{height}}px;
         }
     </style>
@@ -13,12 +13,12 @@
             {{#each this.dataThis}}
                 <div class="boxed" style="padding: 5px; margin:2px">
                     <div style="text-align:center;">                    
-                        {{localize "MaterialDeck.Macro.Macro"}} {{this.iteration}}
+                        {{localize "MaterialDeck.Macro"}} {{this.iteration}}
                     </div>
                     <div>
-                        <select name="macros" class="macros-select" default="" style="max-width:140px;">
+                        <select name="macros" class="macros-select" id="macros{{this.iteration}}" default="" style="max-width:140px;">
                             {{#select this.macro}}
-                                <option value="">{{localize "MaterialDeck.Playlist.None"}}</option>
+                                <option value="">{{localize "MaterialDeck.None"}}</option>
                                 {{#each macros}}
                                 <option value="{{this._id}}">{{this.name}}</option>
                                 {{/each}}
@@ -26,20 +26,16 @@
                         </select>
                     </div>
                     {{#if this.furnace}}
-                        <label>{{localize "MaterialDeck.Macro.FurnaceArgs"}}</label>
-                        <input type="text" name="args" value="{{this.args}}">
+                        <label>{{localize "MaterialDeck.FurnaceArgs"}}</label>
+                        <input type="text" name="args" id="args{{this.iteration}}" value="{{this.args}}">
                     {{/if}}
                     
                     <div class="flex-container" style="display:flex;flex-direction:row;padding-top:10px">  
-                        <label style="flex:1">{{localize "MaterialDeck.Macro.Background"}}</label>
-                        <input style="flex:1" type="color" name="colorPicker" data-dtype="String" value="{{this.color}}">
+                        <label style="flex:1">{{localize "MaterialDeck.Background"}}</label>
+                        <input style="flex:1" type="color" name="colorPicker" id="colorpicker{{this.iteration}}" data-dtype="String" value="{{this.color}}">
                     </div>
                 </div>
             {{/each}}
         </div>
     {{/each}}
-    <button type="submit" name="submit">
-        <i class="far fa-save"></i> {{localize "MaterialDeck.Playlist.Save"}}
-    </button>
-
 </form>

templates/playlistConfig.html

@@ -1,36 +1,43 @@
 <form autocomplete="off" onsubmit="event.preventDefault()">
     <div >                    
-        <h2>{{localize "MaterialDeck.Playlist.Playmethod.Header"}}</h2>
+        <h2>{{localize "MaterialDeck.PL.Settings"}}</h2>
     </div>
     <div class="form-group">     
-        <label>{{localize "MaterialDeck.Playlist.Playmethod.Label"}}</label>
-        <select name="playMethod" class="playMethod" default="">
-            {{#select playMethod}}
-                <option value="0">{{localize "MaterialDeck.Playlist.Playmethod.Unrestricted"}}</option>
-                <option value="1">{{localize "MaterialDeck.Playlist.Playmethod.OneTrackPlaylist"}}</option>
-                <option value="2">{{localize "MaterialDeck.Playlist.Playmethod.OneTrackTotal"}}</option>
+        <label>{{localize "MaterialDeck.PL.Mode"}}</label>
+        <select name="playMode" class="playMode" default="">
+            {{#select playMode}}
+                <option value="0">{{localize "MaterialDeck.PL.Unrestricted"}}</option>
+                <option value="1">{{localize "MaterialDeck.PL.OneTrackPlaylist"}}</option>
+                <option value="2">{{localize "MaterialDeck.PL.OneTrackTotal"}}</option>
             {{/select}}
         </select>
     </div>
+    <div class="form-group">     
+        <label>{{localize "MaterialDeck.PL.Nr"}}</label>
+        <input type="number" id="numberOfPlaylists" name="plNum" min="0" max="127" value={{numberOfPlaylists}}>
+    </div>
     <div>                    
-        <h2>{{localize "MaterialDeck.Playlist.Playlists"}}</h2>
+        <h2>{{localize "MaterialDeck.Playlists"}}</h2>
     </div>
     {{#each playlistData}}
         <div class="form-group">
-            <label>{{localize "MaterialDeck.Playlist.Playlist"}} {{this.iteration}}</label>
-            <select name="selectedPlaylist" class="playlist-select" default="">
+            <label>{{localize "MaterialDeck.Playlist"}} {{this.iteration}}</label>
+            <select name="selectedPlaylist" class="playlist-select" id="playlist{{this.iteration}}" default="">
                 {{#select this.playlist}}
-                    <option value="">{{localize "MaterialDeck.Playlist.None"}}</option>
+                    <option value="">{{localize "MaterialDeck.None"}}</option>
                     {{#each this.playlists}}
                     <option value="{{this._id}}">{{this.name}}</option>
                     {{/each}}
                 {{/select}}
             </select>
+            &nbsp;
+            <select name="playlistMode" class="playlistMode" id="playlistMode{{this.iteration}}" default="">
+                {{#select this.playlistMode}}
+                    <option value="0">{{localize "MaterialDeck.PL.Mode"}}</option>
+                    <option value="1">{{localize "MaterialDeck.PL.Unrestricted"}}</option>
+                    <option value="2">{{localize "MaterialDeck.PL.OneTrack"}}</option>
+                {{/select}}
+            </select>
         </div>
     {{/each}}
-
-    <button type="submit" name="submit">
-        <i class="far fa-save"></i> {{localize "MaterialDeck.Playlist.Save"}}
-    </button>
-
 </form>

templates/soundboardConfig.html

@@ -3,73 +3,83 @@
         .boxed {
             border: 1px solid black ;
             border-radius: 5px ; 
-            width: 100px;
-            height: 255px;
+            max-width: 166px;
+            height: 300px;
         }
     </style>
-    <div class="form-group">
-        <label>{{localize "MaterialDeck.Playlist.Playlist"}}&nbsp;&nbsp;&nbsp;</label>
-        <select name="playlist" class="playlist-select" default="" style="max-width:200px;">
-            {{#select playlist}}
-                <option value="">{{localize "MaterialDeck.Playlist.None"}}</option>
-                {{#each playlists}}
-                <option value="{{this._id}}">{{this.name}}</option>
-                {{/each}}
-            {{/select}}
-        </select>
-    </div>
+    
     {{#each soundData}}
         <div class="form-group">
             {{#each this.dataThis}}
                 <div class="boxed" style="padding: 5px; margin:2px">
                     <div style="text-align:center;">                    
-                        {{localize "MaterialDeck.Soundboard.Sound"}} {{this.iteration}}
+                        {{localize "MaterialDeck.Sound"}} {{this.iteration}}
                     </div>
                     <div style="text-align:center;">                    
                         {{localize "MaterialDeck.Name"}}
                     </div>
-                    <input type="text" name="name" value="{{this.name}}">
+                    <input type="text" name="namebox" value="{{this.name}}" id="name{{this.iteration}}" style="width:100%;" >
+
                     <div style="text-align:center;">                    
-                        {{localize "MaterialDeck.Soundboard.Sound"}}
+                        {{localize "MaterialDeck.Playlist"}}
                     </div>
                     <div>
-                        <select name="sounds" class="sounds-select" default="" style="width:132px;" id="soundSelect{{this.iteration}}">
+                        <select name="playlist" class="playlist-select" default="" style="width:100%;" id="playlists{{this.iteration}}">
+                            {{#select this.selectedPlaylist}}
+                                {{#each playlists}}
+                                <option value="{{this.id}}">{{this.name}}</option>
+                                {{/each}}
+                            {{/select}}
+                        </select>
+                    </div>
+
+                    <div style="text-align:center;">                    
+                        {{localize "MaterialDeck.Sound"}}
+                    </div>
+                    <div class="form-fields" style={{this.styleSS}}>
+                        <select name="sounds" class="sounds-select" default="" style="width:100%;" id="soundSelect{{this.iteration}}">
                             {{#select this.sound}}
-                                <option value="">{{localize "MaterialDeck.Playlist.None"}}</option>
+                                <option value="">{{localize "MaterialDeck.None"}}</option>
                                 {{#each sounds}}
                                 <option value="{{this._id}}">{{this.name}}</option>
                                 {{/each}}
                             {{/select}}
                         </select>
                     </div>
+                    <div class="form-fields" 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>
+                        <input class="image" type="text" name="src{{this.iteration}}" name2="soundSrc" id="srcPath{{this.iteration}}" placeholder="path/audio.mp3" value={{this.srcPath}}>
+                    </div>
                     <div style="text-align:center;">                    
-                        {{localize "MaterialDeck.Soundboard.Icon"}}
+                        {{localize "MaterialDeck.Icon"}}
                     </div>
                     <div class="form-fields">
                         <button type="button" class="file-picker" data-type="image" data-target="img{{this.iteration}}" title="Browse Files" tabindex="-1">
                             <i class="fas fa-file-import fa-fw"></i>
                         </button>
-                        <input class="image" type="text" name="img{{this.iteration}}" id="imgPath{{this.iteration}}" placeholder="path/image.png" value={{this.imgPath}}>
+                        <input class="image" type="text" name="img{{this.iteration}}" name2="imgSrc"  id="imgPath{{this.iteration}}" placeholder="path/image.png" value={{this.imgPath}}>
                     </div>
                     <div class="flex-container" style="display:flex;flex-direction:row;padding-top:5px">  
-                        <label style="flex:1">{{localize "MaterialDeck.Soundboard.On"}}&nbsp;&nbsp;&nbsp;</label>
+                        <label style="flex:1">{{localize "MaterialDeck.On"}}&nbsp;&nbsp;&nbsp;</label>
                         <input style="flex:1" type="color" id="colorOn{{this.iteration}}" name="colorOn" style="flex:4" data-dtype="String" value="{{this.colorOn}}">
-                        <label style="flex:1">&nbsp;{{localize "MaterialDeck.Soundboard.Off"}}&nbsp;&nbsp;</label>
+                        <label style="flex:1">&nbsp;{{localize "MaterialDeck.Off"}}&nbsp;&nbsp;</label>
                         <input style="flex:1" type="color" id="colorOff{{this.iteration}}" name="colorOff" style="flex:4" data-dtype="String" value="{{this.colorOff}}"> 
                     </div>
                     
                     <div class="form-group options">
-                        <label>{{localize "MaterialDeck.Soundboard.Playback"}}</label>
-                        <select name="mode" style="flex:1">
+                        <label>{{localize "MaterialDeck.Playback"}}</label>
+                        <select name="mode" id="playmode{{this.iteration}}" style="flex:1">
                             {{#select this.mode}}
-                            <option value="0">{{localize "MaterialDeck.Soundboard.Once"}}</option>
-                            <option value="1">{{localize "MaterialDeck.Soundboard.Repeat"}}</option>
-                            <option value="2">{{localize "MaterialDeck.Soundboard.Hold"}}</option>
+                            <option value="0">{{localize "MaterialDeck.Once"}}</option>
+                            <option value="1">{{localize "MaterialDeck.Repeat"}}</option>
+                            <option value="2">{{localize "MaterialDeck.Hold"}}</option>
                             {{/select}}
                         </select>  
                     </div>
                     <div class="form-group options">
-                    <label>{{localize "MaterialDeck.Soundboard.Volume"}}</label>
+                    <label>{{localize "MaterialDeck.Volume"}}</label>
                         <input type="range" min="0" max="100" value={{this.volume}} class="slider" name="volume" id="volume{{this.iteration}}">
                     </div>
 
@@ -77,8 +87,4 @@
             {{/each}}
         </div>
     {{/each}}
-    <button type="submit" name="submit">
-        <i class="far fa-save"></i> {{localize "MaterialDeck.Playlist.Save"}}
-    </button>
-
 </form>