Static, non erasable background feature

[panciunio]

Hi, At first - this toll is very usable and required for our children and teachers - thanks for that! This is not an issue but I don't know how to mark it as enhancement...

I want to ask about feature to have non erasable background on the whiteboard like 5 lines template for music notes. Is possible to add it?

Regards, Blazej

[AtillaPehlivan]

hi @panciunio Basically, you can add Image element in the which id is dravingArea and add pointer-events:none attribute

if your template is dynamic, set the image src attribute new one

[panciunio]

Thanks for your reply @AtillaPehlivan, I'll check this kind of method. In mid time I tried use 'grid' tool by modify it as below and effect is more or less as expected:

`(function grid() { //Code isolation

var index = 1; //grid off by default
var states = ["none", "url(#grid)", "url(#dots)"];

function toggleGrid(evt) {
    index = (index + 1) % states.length;
    gridContainer.setAttributeNS(null, "fill", states[index]);
}

function createPatterns() {
    // create patterns
    // small (inner) grid
    var smallGrid = Tools.createSVGElement("pattern", {
        id: "smallGrid",
        width: "3000",
        height: "40",
        patternUnits: "userSpaceOnUse"
    });
    smallGrid.appendChild(
        Tools.createSVGElement("path", {
            d: "M 3000 0 L 0 0 0 30",
            fill: "none",
            stroke: "black",
            'stroke-width': "1"
        })
    );
    // (outer) grid
    var grid = Tools.createSVGElement("pattern", {
        id: "grid",
        width: "3000",
        height: "240",
        patternUnits: "userSpaceOnUse"
    });
    grid.appendChild(Tools.createSVGElement("rect", {
        width: "3000",
        height: "240",
        fill: "url(#smallGrid)"
    }));
    grid.appendChild(
        Tools.createSVGElement("path", {
            d: "M 3000 0 L 0 0 0 240",
            fill: "none",
            stroke: "white", 'stroke-width': "2"
        })
    );
    // dots
    var dots = Tools.createSVGElement("pattern", {
        id: "dots",
        width: "30",
        height: "30",
        x: "-10",
        y: "-10",
        patternUnits: "userSpaceOnUse"
    });
    dots.appendChild(Tools.createSVGElement("circle", {
        fill: "gray",
        cx: "10",
        cy: "10",
        r: "2"
    }));

    var defs = Tools.svg.getElementById("defs");
    defs.appendChild(smallGrid);
    defs.appendChild(grid);
    defs.appendChild(dots);
}

var gridContainer = (function init() {
    // initialize patterns
    createPatterns();
    // create grid container
    var gridContainer = Tools.createSVGElement("rect", {
        id: "gridContainer",
        width: "100%", height: "100%",
        fill: states[index]
    });
    Tools.svg.insertBefore(gridContainer, Tools.drawingArea);
    return gridContainer;
})();

Tools.add({ //The new tool
    "name": "Grid",
    "shortcut": "g",
    "listeners": {},
    "icon": "tools/grid/icon.svg",
    "oneTouch": true,
    "onstart": toggleGrid,
    "mouseCursor": "crosshair",
});

})(); //End of code isolation `

[AtillaPehlivan]

@panciunio congrats, another good solution that you want

[1a7r0ch3]

I reused a substantial part of WBO code source to write an editable beamer slideshow tool for live online lectures. If you create beforehand SVG files containing the desired "static, non erasable background" and put it in the right place with the right names (by default, 'beamer/slides/slide_%d.svg', '%d' being the consecutive slide indexes starting from 1), you should get the functionnality you want. I'd be glad that you report here or on the Gitlab page of my project if you find it useful!