add option to change the background image grid

config.default.yml

@@ -31,6 +31,9 @@ frontend:
   # draw the background grid to images on download ? (If True, even PNGs are also not transparent anymore) -- boolean
   drawBackgroundGrid: false
 
+  # Background Image; Can be "bg_grid.png" or "bg_dots.png"  -- string
+  backgroundGridImage: "bg_grid.png"
+
   # Frontend performance tweaks
   performance:
     # Refresh frequency of the debug / info div (in Hz i.e. /s) -- number

scripts/config/config-schema.json

@@ -54,6 +54,9 @@
         "drawBackgroundGrid": {
           "type": "boolean"
         },
+        "backgroundGridImage": {
+          "type": "string"
+        },
         "performance": {
           "type": "object",
           "additionalProperties": false,

src/js/main.js

@@ -140,6 +140,7 @@ function initWhiteboard() {
             //Load the whiteboard
             whiteboardId: whiteboardId,
             username: btoa(myUsername),
+            backgroundGridUrl: "./images/" + ConfigService.backgroundGridImage,
             sendFunction: function (content) {
                 if (ReadOnlyService.readOnlyActive) return;
                 //ADD IN LATER THROUGH CONFIG

src/js/services/ConfigService.js

@@ -48,6 +48,14 @@ class ConfigService {
         return this.#drawBackgroundGrid;
     }
 
+    /**
+     * @type {string}
+     */
+    #backgroundGridImage = "bg_grid.png";
+    get backgroundGridImage() {
+        return this.#backgroundGridImage;
+    }
+
     /**
      * @type {{minDistDelta: number, minTimeDelta: number}}
      */
@@ -78,6 +86,7 @@ class ConfigService {
             showSmallestScreenIndicator,
             imageDownloadFormat,
             drawBackgroundGrid,
+            backgroundGridImage,
             performance,
         } = common;
 
@@ -85,6 +94,7 @@ class ConfigService {
         this.#showSmallestScreenIndicator = showSmallestScreenIndicator;
         this.#imageDownloadFormat = imageDownloadFormat;
         this.#drawBackgroundGrid = drawBackgroundGrid;
+        this.#backgroundGridImage = backgroundGridImage;
         this.#refreshInfoInterval = 1000 / performance.refreshInfoFreq;
 
         console.log("Whiteboard config from server:", configFromServer, "parsed:", this);

src/js/whiteboard.js

@@ -4,7 +4,6 @@ import ReadOnlyService from "./services/ReadOnlyService";
 import InfoService from "./services/InfoService";
 import ThrottlingService from "./services/ThrottlingService";
 import ConfigService from "./services/ConfigService";
-import { fillTextMultiLine } from "./utils";
 import html2canvas from "html2canvas";
 
 const RAD_TO_DEG = 180.0 / Math.PI;
@@ -51,7 +50,7 @@ const whiteboard = {
         whiteboardId: "0",
         username: "unknown",
         sendFunction: null,
-        backgroundGridUrl: "./images/KtEBa2.png",
+        backgroundGridUrl: "./images/gb_grid.png",
     },
     lastPointerSentTime: 0,
     /**