changelog update

MaterialDeck.js

@@ -45,7 +45,7 @@ async function analyzeWSmessage(msg,passthrough = false){
     if (enableModule == false) return;
     const data = JSON.parse(msg);
     if (data == undefined || data.payload == undefined) return;
-    console.log(data);  
+    //console.log(data);  
     const action = data.action;
     const event = data.event;
     const context = data.context;

changelog.md

@@ -1,6 +1,29 @@
 # Changelog Material Deck Module
+### 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<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>

module.json

@@ -2,7 +2,7 @@
     "name": "MaterialDeck",
     "title": "Material Deck",
     "description": "",
-    "version": "0.8.2",
+    "version": "0.8.4",
     "author": "CDeenen",
     "esmodules": [
       "./MaterialDeck.js"

src/macro.js

@@ -19,6 +19,8 @@ export class MacroControl{
         let displayName = settings.displayName;
         let macroNumber = settings.macroNumber;
         let background = settings.background;
+        let ringColor = "#000000";
+        let ring = 0;
         if(macroNumber == undefined || isNaN(parseInt(macroNumber))){
             macroNumber = 0;
         }
@@ -76,18 +78,21 @@ export class MacroControl{
                 }
             }
             else {
-                src = "";
-                let onBackground = settings.onBackground;
-                if (onBackground == undefined) onBackground = '#00FF00';
-                let offBackground = settings.offBackground;
-                if (offBackground == undefined) offBackground = '#000000';
+                let ringOffColor = settings.offRing;
+                if (ringOffColor == undefined) ringOffColor = '#000000';
+
+                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)) background = onBackground;
-                else background = offBackground;
+                if (macroOffset == parseInt(this.offset)) ringColor = ringOnColor;
+                else ringColor = ringOffColor;
+
+                ring = 2;
             }
-            streamDeck.setIcon(1,context,src,background);
+            streamDeck.setIcon(1, context,src,background,ring,ringColor);
             if (displayName == 0) name = ""; 
             streamDeck.setTitle(name,context);
         }
@@ -140,13 +145,13 @@ export class MacroControl{
         let mode = settings.macroMode;
         if (mode == undefined) mode = 0;
 
-        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 == 0 || mode == 1)
+            this.executeHotbar(macroNumber,mode);
         else {
             if (settings.macroBoardMode == 0)
                 this.executeBoard(macroNumber);

src/othercontrols.js

@@ -59,25 +59,39 @@ export class OtherControls{
     //////////////////////////////////////////////////////////////////////////////////////////////////
 
     updatePause(pauseFunction,context){
-        
-        if (pauseFunction == undefined) pauseFunction = 0;
         let src = "";
-        let name = "";
-        let background = "#000000";
+        if (pauseFunction == undefined) pauseFunction = 0;
+        
+        let background = settings.background;
+        if(background == undefined) background = '#000000';
+
+        let ringColor = "#000000";
+
+        let ringOffColor = settings.offRing;
+        if (ringOffColor == undefined) ringOffColor = '#000000';
+
+        let ringOnColor = settings.onRing;
+        if (ringOnColor == undefined) ringOnColor = '#00FF00';
+
+        let playlistType = settings.playlistType;
+        if (playlistType == undefined) playlistType = 0;
+
         if (pauseFunction == 0){ //Pause game
-            if (game.paused) background = "#00FF00"
+            if (game.paused) ringColor = ringOnColor;
+            else ringColor = ringOffColor;
             src = 'action/images/other/pause/pause.png';
         }
         else if (pauseFunction == 1){ //Resume game
-            if (game.paused == false) background = "#00FF00"
+            if (game.paused == false) ringColor = ringOnColor;
+            else ringColor = ringOffColor;
             src = 'action/images/other/pause/resume.png';
         }
         else if (pauseFunction == 2) { //toggle
-            if (game.paused == false) background = "#00FF00"
+            if (game.paused == false) ringColor = ringOnColor;
+            else ringColor = ringOffColor;
             src = 'action/images/other/pause/playpause.png';
         }
-        streamDeck.setIcon(0,context,src,background);
-        streamDeck.setTitle(name,context);
+        streamDeck.setIcon(0,context,src,background,2,ringColor);
     }
 
     keyPressPause(pauseFunction){
@@ -101,56 +115,54 @@ export class OtherControls{
         let func = settings.sceneFunction;
         if (func == undefined) func = 0;
 
+        let background = settings.background;
+        if(background == undefined) background = '#000000';
+
+        let ringColor = "#000000";
+
+        let ringOffColor = settings.offRing;
+        if (ringOffColor == undefined) ringOffColor = '#000000';
+
+        let ringOnColor = settings.onRing;
+        if (ringOnColor == undefined) ringOnColor = '#00FF00';
+
+        let playlistType = settings.playlistType;
+        if (playlistType == undefined) playlistType = 0;
+
+        let src = "";
+        let name = "";
         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 (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)";
             }
-            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 (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)";
             }
-            streamDeck.setTitle(name,context);
-            streamDeck.setIcon(1, context,src,background,ring,ringColor);
         }
+        streamDeck.setTitle(name,context);
+        streamDeck.setIcon(1, context,src,background,2,ringColor);
     }
 
     keyPressScene(settings){
@@ -176,10 +188,10 @@ export class OtherControls{
                     if (scene.isView) scene.activate();
                     scene.view();
                 }
-            }
-            
+            }  
         }
     }
+
     //////////////////////////////////////////////////////////////////////////////////////////
     
     updateControl(settings,context){
@@ -189,27 +201,42 @@ export class OtherControls{
         let tool = settings.tool;
         if (tool == undefined) tool = 0;
 
+        let background = settings.background;
+        if (background == undefined) background = '#000000';
+
+        let ringColor = '#000000'
+
         const controlName = this.getControlName(control);
         const toolName = this.getToolName(control,tool);
 
         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 == 0) { //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 == 0){  //open category
+                    txt = game.i18n.localize(selectedControl.title);
+                    src = selectedControl.icon;
+                    if (activeControl == selectedControl.name)
+                        ringColor = "#FF7B00";
+                }
+            }
+        }
+        else if (control == 1){  //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;
@@ -218,25 +245,24 @@ export class OtherControls{
                         if (selectedTool.active)
                             ringColor = "#A600FF"
                         else    
-                            ringColor = "#340057"
-                        ring = 2;
+                            ringColor = "#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 == controlName);
             if (selectedControl != undefined){
                 if (tool == 0){  //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 == toolName);
                     if (selectedTool != undefined){
                         txt = game.i18n.localize(selectedTool.title);
                         src = selectedTool.icon;
@@ -246,15 +272,14 @@ export class OtherControls{
                                 ringColor = "#A600FF"
                             else    
                                 ringColor = "#340057"
-                            ring = 2;
                         }
                         else if (activeTool == selectedTool.name && activeControl == selectedControl.name)
-                            ring = 2;
+                            ringColor = "#FF7B00";
                     }
                 }
             }
         }
-        streamDeck.setIcon(1,context,src,background,ring,ringColor);
+        streamDeck.setIcon(1,context,src,background,2,ringColor);
         streamDeck.setTitle(txt,context);
     }
 
@@ -268,29 +293,37 @@ export class OtherControls{
         const controlName = this.getControlName(control);
         const toolName = this.getToolName(control,tool);
         
-        if (control == 0){  //displayed tools
+        if (control == 0){  //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 = controlName;
+                selectedControl.activeTool = selectedControl.activeTool;
+                canvas.getLayer(selectedControl.layer).activate();
+            }
+        }
+        else if (control == 1){  //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;
                     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 == controlName);
             if (selectedControl != undefined){
                 if (tool == 0){  //open category
                     ui.controls.activeControl = controlName;
@@ -298,14 +331,12 @@ export class OtherControls{
                     canvas.getLayer(selectedControl.layer).activate();
                 }
                 else {
-                    let selectedTool = selectedControl.tools.find(t => t.name == toolName);
+                    const selectedTool = selectedControl.tools.find(t => t.name == toolName);
                     if (selectedTool != undefined){
                         ui.controls.activeControl = controlName;
                         canvas.getLayer(selectedControl.layer).activate();
-                        if (selectedTool.toggle){
-                            let newValue = !selectedTool.active;
-                            selectedTool.active = newValue;
-                        }
+                        if (selectedTool.toggle)
+                            selectedTool.active = !selectedTool.active;
                         else if (selectedTool.button){
                             selectedTool.onClick();
                         }
@@ -313,21 +344,13 @@ export class OtherControls{
                             selectedControl.activeTool = toolName;
                     }
                 }
-                ui.controls.render();
             }
-        }  
+        } 
+        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--;
+        control -= 2;
         let name;
         if (control == 0) name = 'token';
         else if (control == 1) name = 'measure';
@@ -341,7 +364,7 @@ export class OtherControls{
     }
 
     getToolName(control,tool){
-        control--;
+        control -= 2;
         tool--;
         let name;
         if (control == 0){  //basic controls

src/playlist.js

@@ -31,8 +31,17 @@ export class PlaylistControl{
 
     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;
@@ -44,47 +53,39 @@ export class PlaylistControl{
             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';
-            
             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(0,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;
@@ -100,43 +101,26 @@ 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(0,context,"",background,2,ringColor);
         streamDeck.setTitle(name,context);
     }
 

src/soundboard.js

@@ -23,7 +23,11 @@ export class SoundboardControl{
 
         let txt = "";
         let src = "";
-        let background = "#000000";
+        
+        let background = settings.background;
+        if (background == undefined) background = '#000000';
+
+        let ringColor = "#000000"
 
         if (mode == 0){ //play sound
             let soundNr = parseInt(settings.soundNr);
@@ -33,37 +37,33 @@ 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];
             streamDeck.setTitle(txt,context);
-            streamDeck.setIcon(1,context,src,background,ring,background);
+            streamDeck.setIcon(1,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';
+            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(1,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);
+            streamDeck.setIcon(0,context,src,background);
         }
     }
 

src/streamDeck.js

@@ -180,7 +180,6 @@ export class StreamDeck{
         var content = window.getComputedStyle(
             elm, ':before'
         ).getPropertyValue('content')
-        //console.log(elm);
         document.body.removeChild(elm);
         return content;
     };
@@ -188,7 +187,7 @@ export class StreamDeck{
     getImage(data){
         if (data == undefined) 
             return;
-        console.log('image',data)
+        //console.log('image',data)
         const context = data.context;
         var url = data.url;
         const format = data.format;
@@ -246,14 +245,15 @@ 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);
         let resImageURL = url;
         
         let img = new Image();

src/token.js

@@ -6,7 +6,6 @@ export class TokenControl{
     }
 
     async update(tokenId){
-        console.log('tokenId',tokenId)
         for (let i=0; i<32; i++){   
             let data = streamDeck.buttonContext[i];
             if (data == undefined || data.action != 'token') continue;
@@ -15,7 +14,6 @@ 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;