ForeignObject - Documentation

Usage (signatures)

board.create('foreignobject', [content, position, sizeopt]);

Parameters

Name	Type	Attributes	Description
`content`	String		HTML content of the foreignObject. May also be <video> or <iframe>
`position`	Array		Position of the foreignObject given by `[x, y]` in user coordinates. Same as for Image.
`size`	Array	<optional>	(Optional) argument size of the foreignObject in user coordinates. If not given, size is specified by the HTML attributes or CSS properties of the content.

Examples

var p = board.create('point', [1, 7], {size: 16});
var fo = board.create('foreignobject', [
    '<video width="300" height="200" src="https://eucbeniki.sio.si/vega2/278/Video_metanje_oge_.mp4" type="html5video" controls>',
    [0, -3], [9, 6]],
    {layer: 8, fixed: true}
 );

var p = board.create('point', [1, 7], {size: 16});
var fo = board.create('fo', [
    '<div style="background-color:blue; color: yellow; padding:20px; width:200px; height:50px; ">Hello</div>',
    [-7, -6]],
    {layer: 1, fixed: false}
 );

board.renderer.container.style.backgroundColor = 'lightblue';
var points = [];
points.push( board.create('point', [-2, 3.5], {fixed:false,color: 'yellow', size: 6,name:'6 am'}) );
points.push( board.create('point', [0, 3.5],  {fixed:false,color: 'yellow', size: 6,name:'12 pm'}) );
points.push( board.create('point', [2, 3.5],  {fixed:false,color: 'yellow', size: 6,name:'6 pm'}) );

var fo = board.create('fo', [
    '<video width="100%" height="100%" src="https://benedu.net/moodle/aaimg/ajx_img/astro/tr/1vd.mp4" type="html5video" controls>',
    [-6, -4], [12, 8]],
    {layer: 0, fixed: true}
 );

var f = JXG.Math.Numerics.lagrangePolynomial(points);
var graph = board.create('functiongraph', [f, -10, 10], {fixed:true,strokeWidth:3, layer: 8});


Video "24-hour time-lapse in Cascais, Portugal. Produced by Nuno Miguel Duarte" adapted from
https://www.pbslearningmedia.org/resource/buac18-k2-sci-ess-sunposition/changing-position-of-the-sun-in-the-sky/,
©2016 Nuno Miguel Duarte.

Attributes

Own

attractors

evaluateOnlyOnce

attractors

Description: List of attractor elements. If the distance of the foreignobject is less than attractorDistance the foreignobject is made to glider of this element.
Type: Array
Default Value: empty
Source: options.js, line 5449

evaluateOnlyOnce

Description: If set to true, this object is only evaluated once and not re-evaluated on update. This is necessary if you want to have a board within a foreignObject of another board.
Type: Boolean
Default Value: false
Source: options.js, line 5461