topic Add a canvas to a widget dynamically? in Web AppBuilder Custom Widgets Questions

Add a canvas to a widget dynamically?

GregRieck — Wed, 01 Mar 2017 00:58:08 GMT

Hello,

How can I add a canvas to a widget dynamically?

var canvas = document.createElement("canvas");
canvas.id = 'outer';
canvas.width = '300' ;
canvas.height = '200';
canvas.style.border = '2x solid';
if (!canvas.getContext) return;
var ctx = canvas.getContext('2d');

//add to widget????

Re: Add a canvas to a widget dynamically?

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:32:34 GMT

Greg,

I would personally use dojo dom-construct for the whole process:

var canvas = domConstruct.create("canvas",{ "width": 300, "height": 200, "style": "border: 2px solid"});
domConstruct.place(canvas, "example"); //Where example is a template element‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
if (!canvas.getContext) return;
var ctx = canvas.getContext('2d');‍‍‍‍‍‍‍‍‍‍‍‍

html template:

<div data-dojo-attach-point="example"></div>‍‍

Re: Add a canvas to a widget dynamically?

RobertScheitlin__GISP — Thu, 02 Mar 2017 13:48:58 GMT

Greg,

Did the code I provided answer your question?

Re: Add a canvas to a widget dynamically?

GregRieck — Thu, 02 Mar 2017 16:12:49 GMT

Robert, my apologies for the delay, I was off yesterday and away from my office.

No, I'm getting an error Cannot read property 'appendChild' of null.

Here is my html:

<div data-dojo-attach-point="example">
Splice Point: <input id="txtName" type="text" style="font-weight:bold;border:none" readonly><br>
Location: <input id="txtLocation" type="text" style="font-weight:bold;border:none" readonly><br>
Address: <input id="txtAddress" type="text" style="font-weight:bold;border:none" readonly><br>
Address Notes: <input id="txtAddressNotes" style="font-weight:bold;border:none" readonly><br>
Manufacturer: <input id="txtManufacturer" style="font-weight:bold;border:none" readonly><br>
Part #: <input id="txtPartNo" type="text" style="font-weight:bold;border:none" readonly><br>
Splice Comments: <input id="txtSpliceComments" type="text" style="font-weight:bold;border:none" readonly><br>
</div>

and I add a reference to 'dojo/dom-construct'

Here is my JS:

var canvas = domConstruct.create("canvas", { "width": 300, "height": 200, "style": "border: 2px solid" });
domConstruct.place(canvas, "example"); //Where example is a template element
if (!canvas.getContext) return;
var ctx = canvas.getContext('2d');
ctx.lineWidth = 4;
ctx.strokeStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);

I have attached an image of what I'm trying to accomplish. I have this working in my desktop version using WPF. I'm trying to convert the concept to a web based solution. This represents a fiber optic network location where different fiber cables are spliced together. The span is a fiber cable the numbers 3-48 represent individual fibers numbered 3-48.

Re: Add a canvas to a widget dynamically?

RobertScheitlin__GISP — Thu, 02 Mar 2017 16:17:36 GMT

Greg,

Try modifying this line (for testing purposes)

var canvas = domConstruct.create("canvas"); //, { "width": 300, "height": 200, "style": "border: 2px solid" });‍

Re: Add a canvas to a widget dynamically?

GregRieck — Thu, 02 Mar 2017 16:38:05 GMT

Same error, canvas is valid. The error is in the domConstruct.place(canvas, "example"); line of code. Is it having issues finding "example"? As you can see from my example image above I need to create three canvases.

I previously had the canvas defined in the html. However, I need to be able to create "N" amount of canvas'. The number of canvases I will need to create depends on how many fiber cables are coming into the particular location, ie. "N" number of canvases. That's the reason for wanting to create them dynamically.

html canvas:

Re: Add a canvas to a widget dynamically?

RobertScheitlin__GISP — Thu, 02 Mar 2017 17:04:55 GMT

Ahh, Sorry about that that line of code should be:

domConstruct.place(canvas, this.example);

Re: Add a canvas to a widget dynamically?

GregRieck — Thu, 02 Mar 2017 17:10:35 GMT

Thanks Robert, I should of caught that too, no worries. It works correctly now.

So, I was looking at the "place" on the domCreate it looks like I can create additional canvases and place them under the previous canvas. So inside a for loop create "N" canvases and place them "after" the previous one. I'm going to attempt that next.

Greg