is there a canvas widget?

[rozek]

...which I can use to draw into from a script?

[KlausSchaefers]

Hi, can you elaborate a little on you use case? What are you trying to do?

If you create a SVG drawing, and SVG widget (SVGPaths) is used under the hood. You can inspect the

{
    "type": "SVGPaths",
    "name": "Path",
    "x": 1156,
    "y": 1648,
    "w": 252,
    "h": 136,
    "z": 16,
    "props": {
        "paths": [
            {
                "id": "p1711190560381",
                "name": "Path",
                "type": "Path",
                "stroke": "#333333",
                "strokeWidth": 1,
                "fill": "",
                "closed": true,
                "d": [
                    {
                        "t": "M",
                        "x": 0,
                        "y": 0
                    },
                    {
                        "t": "L",
                        "x": 252,
                        "y": 0
                    },
                    {
                        "t": "L",
                        "x": 252,
                        "y": 136
                    },
                    {
                        "t": "L",
                        "x": 0,
                        "y": 136
                    }
                ]
            }
        ],
        "bbox": {
            "w": 252,
            "h": 136
        }
    },
    "has": {
        "onclick": true
    },
    "actions": {},
    "style": {},
    "id": "w10047_6495",
    "created": 1711190562710
}

Through a script you should be able to set the paths in the props. on the qux object use the

// get the element...

element.setProp({
   'paths': [... your data]
})

` 

[rozek]

well, I am currently investigating quant-ux to see if I could use it for myself and/or for my students.

Often, I need a element for custom 2D and 3D graphics - and I just wanted to see what a Canvas widget together with the scripting facility could be good for

[KlausSchaefers]

Hi,

the scripts are run in a webworker which has no access to the DOM tree. Beside working with the SVG paths you could also try the following. In the script you create SVG string and encode it as a data url (https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) The data url you pass to the data object, e.g.

data.image = dataurl

You can use the data image and data binding to show the image. This should work, but I have not tested this.

[KlausSchaefers]

Hi,

tried this script and it works:

let svg = `
   <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-plant"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 15h10v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2v-4z" /><path d="M12 9a6 6 0 0 0 -6 -6h-3v2a6 6 0 0 0 6 6h3" /><path d="M12 11a6 6 0 0 1 6 -6h3v1a6 6 0 0 1 -6 6h-3" /><path d="M12 15l0 -6" /></svg>
`
var dataUri = "data:image/svg+xml;base64," + btoa(svg);
console.debug(dataUri)
data.image = dataUri

You have to use the dev.quant-ux.com instance.

[KlausSchaefers]

I also shared the prototype with you.

[rozek]

sorry for the late response, but I had to meet a submission deadline for another project first...

So, I'll have to provide the SVG contents via script - that's ok for me - thanks!