Code works on the HTML editor, but not into Weweb

Ask us anything
1

Hello, This code works on the HTML editor, I can draw on an image (what the code does), but when I paste this code into an HTML element inside a web page, it doesn’t work , you know why ?

https://codepen.io/theocouetfr/pen/RwdyqqV

2

here you can read why:

1 Like
3

Hello @dorilama and thank you very much for your help.

I’m not an expert in javascript but I seem to have fixed the code with the help of your documentation, unfortunately it still doesn’t seem to work.

It still works on codepen but not when I add it in weweb. Do you have another idea, or have I really corrected it according to your documentation?

thanks in advance.

https://codepen.io/theocouetfr/pen/RwdyqqV

4

it can be many things. my suggestion is to always use js actions if you need to run code so you can decide when it runs. If you need an element to be in the page you have now the onmount workflow trigger, so it’s easier to know when you can run the code.

1 Like
5

Thank you for your response @dorilama , I tried to add the javascript code to a workflow when I pressed a button below my image to be sure to launch the script later, but it doesn’t work.

image
i also try to add javascript on monted component, same problem, i’m lost

6

Hi, you can try to replace every reference to “document” by “wwLib.getFrontDocument()” instead

For me it’s working (with the on mounted method)

I used this code

    function initializeCanvas() {
    const canvas = wwLib.getFrontDocument().getElementById('drawing-canvas');
    const ctx = canvas.getContext('2d');
    const container = wwLib.getFrontDocument().getElementById('drawing-container');

    canvas.width = container.offsetWidth;
    canvas.height = container.offsetHeight;

    let drawing = false;

    function startDrawing(e) {
        drawing = true;
        draw(e);
    }

    function stopDrawing() {
        drawing = false;
        ctx.beginPath();
    }

    function draw(e) {
        if (!drawing) return;
        ctx.lineWidth = 25;
        ctx.lineCap = 'round';
        ctx.strokeStyle = 'red';

        const rect = canvas.getBoundingClientRect();
        ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);
    }

    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('mousemove', draw);
}


initializeCanvas();
7

thank you for your valuable help, with your response I was able to see that there was a blog article and other questions on this subject. I’m not knowledgeable enough to understand why it’s necessary to replace it with that, but I’ll try to read the documentation to understand.

thanks again

8

You’re welcome, that’s because in the editor your app is displayed inside an iframe but your custom code is executed inside the editor.

So for your code to target your app we have some snipped like wwLib.getFrontWindow() or wwLib.getFrontDocument()

So instead of doing window. or document. you have to use these snippets, otherwise it will target the editor, not your app.

1 Like