readme update

MaterialDeck.js

@@ -11,10 +11,10 @@ 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 const moduleName = "MaterialDeck";
 export var selectedTokenId;
@@ -30,7 +30,7 @@ var enableModule;
 
 //Websocket variables
 let ip = "localhost";       //Ip address of the websocket server
-let port = "3003";                //Port of the websocket server
+let port = "3001";                //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 +41,20 @@ 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");
+    }
+
+
+
+
     if (data == undefined || data.payload == undefined) return;
-    //console.log(data);  
+      
     const action = data.action;
     const event = data.event;
     const context = data.context;
@@ -62,9 +71,9 @@ 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 == 'macro')
             macroControl.update(settings,context);
         else if (action == 'combattracker')
@@ -114,11 +123,10 @@ async function analyzeWSmessage(msg,passthrough = false){
  */
 function startWebsocket() {
     //ip = localhost;
-    ws = new WebSocket('ws://'+ip+':'+port+'/1');
+    ws = new WebSocket('ws://'+ip+':'+port);
 
     ws.onmessage = function(msg){
         //console.log(msg);
-        
         analyzeWSmessage(msg.data);
         clearInterval(wsInterval);
         wsInterval = setInterval(resetWS, 5000);
@@ -126,12 +134,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") +": "+ip+':'+port);
         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);
     }
@@ -276,6 +290,7 @@ Hooks.on('renderHotbar', (hotbar)=>{
 Hooks.on('renderCombatTracker',()=>{
     if (enableModule == false || ready == false) return;
     combatTracker.updateAll();
+    tokenControl.update(selectedTokenId);
 });
 
 Hooks.on('renderPlaylistDirectory', (playlistDirectory)=>{
@@ -309,6 +324,11 @@ Hooks.on('renderSceneControls',()=>{
     otherControls.updateAll();
 });
 
+Hooks.on('targetToken',(user,token,targeted)=>{
+    if (enableModule == false || ready == false) return;
+    if (token.id == selectedTokenId) tokenControl.update(selectedTokenId);
+});
+
   Hooks.once('init', ()=>{
     //CONFIG.debug.hooks = true;
     registerSettings(); //in ./src/settings.js

README.md

@@ -7,6 +7,6 @@ Instructions are on the <a href="https://github.com/CDeenen/MaterialDeck/wiki">w
 ## 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

changelog.md

@@ -1,4 +1,32 @@
 # Changelog Material Deck Module
+### 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>
@@ -9,7 +37,7 @@
 <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>
+Server v0.2.4 (no change)<br>
 SD plugin v0.7.1<br>
 
 ### v0.8.3 - 10-11-2020

lang/en.json

@@ -1,39 +1,40 @@
 {
-    "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.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.Macro.Macro": "Macro",
-    "MaterialDeck.Macro.Background": "Background",
-    "MaterialDeck.Macro.FurnaceArgs": "Furnace arguments",
-
-    "MaterialDeck.Name": "Name"
+    "MaterialDeck.PL.Unrestricted": "Unrestricted",
+    "MaterialDeck.PL.OneTrackPlaylist": "One track per playlist",
+    "MaterialDeck.PL.OneTrackTotal": "One track in total",
+    "MaterialDeck.PL.Header": "Play Method",
+    "MaterialDeck.PL.Label": "Method",
+    
+    "MaterialDeck.Playlists": "Playlists",
+    "MaterialDeck.Playlist": "Playlist",
+    "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"
 }
 

module.json

@@ -2,14 +2,14 @@
     "name": "MaterialDeck",
     "title": "Material Deck",
     "description": "",
-    "version": "0.8.4",
+    "version": "0.8.6",
     "author": "CDeenen",
     "esmodules": [
       "./MaterialDeck.js"
     ],
     "socket": true,
     "minimumCoreVersion": "0.7.5",
-    "compatibleCoreVersion": "0.7.6",
+    "compatibleCoreVersion": "0.7.7",
     "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,6 +17,7 @@ export class CombatTracker{
     }
 
     update(settings,context){
+        this.active = true;
         let ctFunction = settings.combatTrackerFunction;
         if (ctFunction == undefined) ctFunction == 0;
         

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,10 +17,13 @@ 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))){
@@ -53,15 +58,15 @@ export class MacroControl{
                     src += macro.img;
                 }
             }
-            
-            streamDeck.setIcon(1,context,src,background);
+            if (icon) streamDeck.setIcon(1,context,src,background);
+            else streamDeck.setIcon(0, context, "", background);
             if (displayName == 0) name = ""; 
             streamDeck.setTitle(name,context);
         }
-        else {
+        else {  //Macro board
             let name = "";
             let src = '';
-            if (settings.macroBoardMode == 0) {
+            if (settings.macroBoardMode == 0) { //Execute macro
                 macroNumber += this.offset - 1;
                 if (macroNumber < 0) macroNumber = 0;
                 var macroId = game.settings.get(MODULE.moduleName,'macroSettings').macros[macroNumber];
@@ -76,8 +81,8 @@ export class MacroControl{
                         src += macro.img;
                     }
                 }
-            }
-            else {
+            }   
+            else {  //Offset
                 let ringOffColor = settings.offRing;
                 if (ringOffColor == undefined) ringOffColor = '#000000';
 
@@ -92,7 +97,8 @@ export class MacroControl{
 
                 ring = 2;
             }
-            streamDeck.setIcon(1, context,src,background,ring,ringColor);
+            if (icon) streamDeck.setIcon(1, context,src,background,ring,ringColor);
+            else streamDeck.setIcon(0, context, "", background,ring,ringColor);
             if (displayName == 0) name = ""; 
             streamDeck.setTitle(name,context);
         }

src/misc.js

@@ -13,7 +13,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

src/move.js

@@ -2,22 +2,37 @@ import * as MODULE from "../MaterialDeck.js";
 
 export class Move{
     constructor(){
+        this.active = false;
     }
 
     keyPress(settings){
+        console.log('move',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 (dir < 9){
+            if (settings.mode == '1')
+                this.moveToken(MODULE.selectedTokenId,dir);
+            else    
+                this.moveCanvas(dir);
+        }
+        else if (dir == 9) {//zoom in
+            let viewPosition = canvas.scene._viewPosition;
+            viewPosition.scale = viewPosition.scale*1.05;
+            viewPosition.duration = 100;
+            canvas.animatePan(viewPosition);
+        }
+        else if (dir == 10) {//zoom out
+            let viewPosition = canvas.scene._viewPosition;
+            viewPosition.scale = viewPosition.scale*0.95;
+            viewPosition.duration = 100;
+            canvas.animatePan(viewPosition);
+        }
     }
 
     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;

src/othercontrols.js

@@ -3,10 +3,12 @@ import {streamDeck} from "../MaterialDeck.js";
 
 export class OtherControls{
     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 != 'other') continue;
@@ -15,6 +17,7 @@ export class OtherControls{
     }
 
     update(settings,context){
+        this.active = true;
         let mode = settings.otherMode;
         if (mode == undefined) mode = 0;
 
@@ -312,8 +315,10 @@ export class OtherControls{
             if (selectedControl != undefined){
                 const selectedTool = selectedControl.tools[controlNr];
                 if (selectedTool != undefined){
-                    if (selectedTool.toggle)
+                    if (selectedTool.toggle) {
                         selectedTool.active = !selectedTool.active;
+                        selectedTool.onClick(selectedTool.active);
+                    }
                     else if (selectedTool.button){
                         selectedTool.onClick();
                     }
@@ -335,8 +340,10 @@ export class OtherControls{
                     if (selectedTool != undefined){
                         ui.controls.activeControl = controlName;
                         canvas.getLayer(selectedControl.layer).activate();
-                        if (selectedTool.toggle)
+                        if (selectedTool.toggle) {
                             selectedTool.active = !selectedTool.active;
+                            selectedTool.onClick(selectedTool.active);
+                        }
                         else if (selectedTool.button){
                             selectedTool.onClick();
                         }

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,6 +18,7 @@ export class PlaylistControl{
     }
 
     update(settings,context){
+        this.active = true;
         if (settings.playlistMode == undefined) settings.playlistMode = 0;
         if (settings.playlistMode == 0){
             this.updatePlaylist(settings,context);

src/settings.js

@@ -17,13 +17,13 @@ export const registerSettings = function() {
     });
 
     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"],
     });
 
     /**
@@ -35,12 +35,12 @@ export const registerSettings = function() {
         config: false,
         type:Number,
         default:0,
-        choices:["Default","One track per playlist","One track in total"],
+        choices:["MaterialDeck.Playlist.Playmethod.Unrestricted","MaterialDeck.Playlist.Playmethod.OneTrackPlaylist","MaterialDeck.Playlist.Playmethod.OneTrackTotal"],
     });
 
     game.settings.registerMenu(MODULE.moduleName, 'playlistConfigMenu',{
-        name: "Playlist Config",
-        label: "Playlist Config",
+        name: "MaterialDeck.Sett.PlaylistConfig",
+        label: "MaterialDeck.Sett.PlaylistConfig",
         type: playlistConfigForm,
         restricted: true
     });

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,6 +20,7 @@ export class SoundboardControl{
     }
 
     update(settings,context){
+        this.active = true;
         let mode = settings.soundboardMode;
         if (mode == undefined) mode = 0;
 

src/streamDeck.js

@@ -23,6 +23,8 @@ 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;
     }
 
     setScreen(action){
@@ -42,20 +44,90 @@ 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;
+        }
+    }
+
+    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 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++;
+        let txtArrayOriginal = txt.split("\n");
+        let txtArray = [];
+        let counter = 0;
+        for (let i=0; i<txtArrayOriginal.length; i++){
+            
+            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;
     }
@@ -72,6 +144,7 @@ export class StreamDeck{
             }
         }
         let msg = {
+            target: "SD",
             event: 'setTitle',
             context: context,
             payload: {
@@ -84,6 +157,7 @@ export class StreamDeck{
     
     setColor(context,color = '#000000'){
         let msg = {
+            target: "SD",
             event: 'setIcon',
             context: context,
             url: '',
@@ -97,6 +171,7 @@ export class StreamDeck{
         //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>";
 
         var json = {
+            target: "SD",
             event: "setImage",
             context: context,
             payload: {
@@ -107,7 +182,7 @@ export class StreamDeck{
         MODULE.sendWS(JSON.stringify(json));
     }
 
-    setIcon(iconLocation, context,src,background = '#000000',ring=0,ringColor = "#000000"){
+    setIcon(iconLocation, context,src,background = '#000000',ring=0,ringColor = "#000000",overlay=false){
         for (let i=0; i<32; i++){
             if (this.buttonContext[i] == undefined) continue;
             if (this.buttonContext[i].context == context) {
@@ -120,20 +195,22 @@ export class StreamDeck{
                 this.buttonContext[i].iconLocation = iconLocation;
             }
         }
-
-        let split = src.split('?');
-        split = split[0].split('.');
-        let format = split[split.length-1];
-        split = src.split(' ');
+        
+        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));
@@ -144,6 +221,7 @@ export class StreamDeck{
 
     setState(state,context,action){
         let msg = {
+            target: "SD",
             event: 'setStateCustom',
             context: context,
             action: action,
@@ -157,12 +235,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));
@@ -257,8 +336,10 @@ export class StreamDeck{
         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;

src/token.js

@@ -3,9 +3,11 @@ import {streamDeck} from "../MaterialDeck.js";
 
 export class TokenControl{
     constructor(){
+        this.active = false;
     }
 
     async update(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;
@@ -73,10 +75,99 @@ export class TokenControl{
                 }
                 initiative = attributes.init.total;
             }
-            else return;
+            else {
+                //Other systems
+
+
+
+
+            }
+            if (settings.onClick == 4) { //toggle visibility
+                ring = 1;
+                if (token.data.hidden){
+                    ring = 2;
+                    ringColor = "#FF7B00";
+                }
+                if (icon == false) {
+                    iconSrc = window.CONFIG.controlIcons.visibility;
+                    streamDeck.setIcon(1,context,iconSrc,background,ring,ringColor,true);
+                }
+            }
+            else if (settings.onClick == 5) { //toggle combat state
+                ring = 1;
+                if (token.inCombat){
+                    ring = 2;
+                    ringColor = "#FF7B00";
+                }
+                if (icon == false) {
+                    iconSrc = window.CONFIG.controlIcons.combat;
+                    streamDeck.setIcon(1,context,iconSrc,background,ring,ringColor,true);
+                }
+            }
+            else if (settings.onClick == 6) { //target token
+                ring = 1;
+                if (token.isTargeted){
+                    ring = 2;
+                    ringColor = "#FF7B00";
+                }
+                if (icon == false) {
+                    iconSrc = "fas fa-bullseye";
+                    streamDeck.setIcon(1,context,iconSrc,background,ring,ringColor);
+                }
+            }
+            else if (settings.onClick == 7) { //toggle condition
+                ring = 1;
+                let condition = settings.condition;
+                if (condition == undefined) condition = 0;
+
+                if (condition == 0 && icon == false){
+                    iconSrc = window.CONFIG.controlIcons.effects;
+                }
+                else if (icon == false) {
+                    let effect = CONFIG.statusEffects.find(e => e.id === this.getStatusId(condition));
+                    iconSrc = effect.icon;
+                    let effects = token.actor.effects.entries;
+                    let active = effects.find(e => e.isTemporary === this.getStatusId(condition));
+                    if (active != undefined){
+                        ring = 2;
+                        ringColor = "#FF7B00";
+                    }
+                } 
+                streamDeck.setIcon(1,context,iconSrc,background,ring,ringColor,true);
+            }
         }
         else {
             iconSrc += "";
+            if (settings.onClick == 4) { //toggle visibility
+                if (icon == false) {
+                    iconSrc = window.CONFIG.controlIcons.visibility;
+                    streamDeck.setIcon(1,context,iconSrc,background,1,'#000000',true);
+                }
+            }
+            else if (settings.onClick == 5) { //toggle combat state
+                if (icon == false) {
+                    iconSrc = window.CONFIG.controlIcons.combat;
+                    streamDeck.setIcon(1,context,iconSrc,background,1,'#000000',true);
+                }
+            }
+            else if (settings.onClick == 6) { //target token
+                if (icon == false) {
+                    iconSrc = "fas fa-bullseye";
+                    streamDeck.setIcon(1,context,iconSrc,background,1,'#000000');
+                }
+            }
+            else if (settings.onClick == 7) { //toggle condition
+                let condition = settings.condition;
+                if (condition == undefined) condition = 0;
+
+                if (condition == 0 && icon == false){
+                    iconSrc = window.CONFIG.controlIcons.effects;
+                }
+                else if (icon == false) {
+                    iconSrc = CONFIG.statusEffects.find(e => e.id === this.getStatusId(condition)).icon;
+                } 
+                streamDeck.setIcon(1,context,iconSrc,background,1,'#000000',true);
+            }
         }
         if (icon) streamDeck.setIcon(1,context,iconSrc,background,ring,ringColor);
         
@@ -89,7 +180,7 @@ export class TokenControl{
         streamDeck.setTitle(txt,context);
     }
     
-    keyPress(settings){
+    async keyPress(settings){
         if (MODULE.selectedTokenId == undefined) return;
         const tokenId = MODULE.selectedTokenId;
 
@@ -108,8 +199,72 @@ export class TokenControl{
         else if (onClick == 2){ //Open character sheet
             token.actor.sheet.render(true);
         }
-        else {  //Open token config
+        else if (onClick == 3) {  //Open token config
             token.sheet._render(true);
         }
+        else if (onClick == 4) {    //Toggle visibility
+            token.toggleVisibility();
+        }
+        else if (onClick == 5) {    //Toggle combat state
+            token.toggleCombat();
+        }
+        else if (onClick == 6) {    //Target token
+            token.setTarget(!token.isTargeted,{releaseOthers:false});
+        }
+        else if (onClick == 7) {    //Toggle condition
+            let condition = settings.condition;
+            if (condition == undefined) condition = 0;
+
+            if (condition == 0){
+                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 === this.getStatusId(condition));
+                token.toggleEffect(effect);
+            }
+            
+        }
+    }
+
+    getStatusId(nr){
+        let id;
+        if (nr == 1) id = 'dead';
+        else if (nr == 2) id = 'unconscious';
+        else if (nr == 3) id = 'sleep';
+        else if (nr == 4) id = 'stun';
+        else if (nr == 5) id = 'prone';
+        else if (nr == 6) id = 'restrain';
+        else if (nr == 7) id = 'paralysis';
+        else if (nr == 8) id = 'fly';
+        else if (nr == 9) id = 'bind';
+        else if (nr == 10) id = 'deaf';
+        else if (nr == 11) id = 'silence';
+        else if (nr == 12) id = 'fear';
+        else if (nr == 13) id = 'burning';
+        else if (nr == 14) id = 'frozen';
+        else if (nr == 15) id = 'shock';
+        else if (nr == 16) id = 'corrode';
+        else if (nr == 17) id = 'bleeding';
+        else if (nr == 18) id = 'disease';
+        else if (nr == 19) id = 'poison';
+        else if (nr == 20) id = 'radiation';
+        else if (nr == 21) id = 'regen';
+        else if (nr == 22) id = 'degen';
+        else if (nr == 23) id = 'upgrade';
+        else if (nr == 24) id = 'downgrade';
+        else if (nr == 25) id = 'target';
+        else if (nr == 26) id = 'eye';
+        else if (nr == 27) id = 'curse';
+        else if (nr == 28) id = 'bless';
+        else if (nr == 29) id = 'fireShield';
+        else if (nr == 30) id = 'coldShield';
+        else if (nr == 31) id = 'magicShield';
+        else if (nr == 32) id = 'holyShield';
+
+        return id;
     }
 }

templates/macroConfig.html

@@ -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 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,12 +26,12 @@
                         </select>
                     </div>
                     {{#if this.furnace}}
-                        <label>{{localize "MaterialDeck.Macro.FurnaceArgs"}}</label>
+                        <label>{{localize "MaterialDeck.FurnaceArgs"}}</label>
                         <input type="text" name="args" 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>
+                        <label style="flex:1">{{localize "MaterialDeck.Background"}}</label>
                         <input style="flex:1" type="color" name="colorPicker" data-dtype="String" value="{{this.color}}">
                     </div>
                 </div>
@@ -39,7 +39,7 @@
         </div>
     {{/each}}
     <button type="submit" name="submit">
-        <i class="far fa-save"></i> {{localize "MaterialDeck.Playlist.Save"}}
+        <i class="far fa-save"></i> {{localize "MaterialDeck.Save"}}
     </button>
 
 </form>

templates/playlistConfig.html

@@ -1,26 +1,26 @@
 <form autocomplete="off" onsubmit="event.preventDefault()">
     <div >                    
-        <h2>{{localize "MaterialDeck.Playlist.Playmethod.Header"}}</h2>
+        <h2>{{localize "MaterialDeck.PL.Header"}}</h2>
     </div>
     <div class="form-group">     
-        <label>{{localize "MaterialDeck.Playlist.Playmethod.Label"}}</label>
+        <label>{{localize "MaterialDeck.PL.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>
+                <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>                    
-        <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>
+            <label>{{localize "MaterialDeck.Playlist"}} {{this.iteration}}</label>
             <select name="selectedPlaylist" class="playlist-select" 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}}
@@ -30,7 +30,7 @@
     {{/each}}
 
     <button type="submit" name="submit">
-        <i class="far fa-save"></i> {{localize "MaterialDeck.Playlist.Save"}}
+        <i class="far fa-save"></i> {{localize "MaterialDeck.Save"}}
     </button>
 
 </form>

templates/soundboardConfig.html

@@ -8,10 +8,10 @@
         }
     </style>
     <div class="form-group">
-        <label>{{localize "MaterialDeck.Playlist.Playlist"}}&nbsp;&nbsp;&nbsp;</label>
+        <label>{{localize "MaterialDeck.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>
+                <option value="">{{localize "MaterialDeck.None"}}</option>
                 {{#each playlists}}
                 <option value="{{this._id}}">{{this.name}}</option>
                 {{/each}}
@@ -23,19 +23,19 @@
             {{#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}}">
                     <div style="text-align:center;">                    
-                        {{localize "MaterialDeck.Soundboard.Sound"}}
+                        {{localize "MaterialDeck.Sound"}}
                     </div>
                     <div>
                         <select name="sounds" class="sounds-select" default="" style="width:132px;" 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}}
@@ -43,7 +43,7 @@
                         </select>
                     </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">
@@ -52,24 +52,24 @@
                         <input class="image" type="text" name="img{{this.iteration}}" 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>
+                        <label>{{localize "MaterialDeck.Playback"}}</label>
                         <select name="mode" 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>
 
@@ -78,7 +78,7 @@
         </div>
     {{/each}}
     <button type="submit" name="submit">
-        <i class="far fa-save"></i> {{localize "MaterialDeck.Playlist.Save"}}
+        <i class="far fa-save"></i> {{localize "MaterialDeck.Save"}}
     </button>
 
 </form>