PartImageLabel

class cee.mrk.PartImageLabel()

Defines a part showing an image attached to a 3d coordinate that can be shown in a MarkupModel.

The image is provided as a Texture. The texture can be created from ImageData or from a HTMLImageElement.

The label will always be visible and rendered in front of any model. The anchor point will be rendered at the depth of the specified 3d coordinate.

Creating the texture

To create the ImageData for the texture you have some options:

1. Create an offscreen canvas element, and use the 2d context to render text, draw lines, etc

let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");

canvas.width = 200;
canvas.height = 50;
ctx.font = "20px Georgia";
ctx.fillStyle = "red";
ctx.fillText("Hello EnvisionWeb!", 10, 40);

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const texture = cee.Texture.fromImageData(imageData,
   { generateMipmaps: false,
     wrapMode: cee.TextureWrapMode.CLAMP_TO_EDGE,
     minFilter: cee.TextureMinFilter.LINEAR
   });
part.set(texture, pickInfo.intersectionPoint);

2. Provide an RGBA array with pixel data for the image

const sizeX = 256;
const sizeY = 256;
const pixelArr = new Uint8ClampedArray(4*sizeX*sizeY);
let idx = 0;

for (let y = 0; y < sizeY; ++y) {
    for (let x = 0; x < sizeX; ++x) {
        pixelArr[idx++]  = y%2 == 0 ? 255 : 0;
        pixelArr[idx++]  = x%2 == 0 ? 255 : 0;
        pixelArr[idx++]  = (x+y)%2 == 0 ? 255 : 0;
        pixelArr[idx++]  = 255;
    }
}

const imageData  = new ImageData(pixelArr, sizeX, sizeY);
const texture = cee.Texture.fromImageData(imageData,
   { generateMipmaps: false,
     wrapMode: cee.TextureWrapMode.CLAMP_TO_EDGE,
     minFilter: cee.TextureMinFilter.LINEAR
   });
part.set(texture, pickInfo.intersectionPoint);

3. Render HTML using SVG/XML

// Render HTML with SVG and XML
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 300;
canvas.height = 200;

// Background gradient
{
   var grd = ctx.createLinearGradient(0, 0, canvas.width, 0);
   grd.addColorStop(0, "#eeeeee");
   grd.addColorStop(1, "#ffffff");

   ctx.fillStyle = grd;
   ctx.fillRect(0, 0, canvas.width, canvas.height);
}

// Draw border
{
   ctx.lineWidth = 2;
   ctx.fillStyle = "black";
   ctx.strokeRect(0, 0, canvas.width, canvas.height);
}

const data = `
data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg' width='${canvas.width}' height='${canvas.height}'>
 <foreignObject width='100%' height='100%'>
   <div xmlns='http://www.w3.org/1999/xhtml' style='font-size:12px;font-family:verdana;   padding-top: 0px; padding-right: 10px;padding-bottom: 10px;padding-left: 10px;'>
     <h1>Region ${this.m_labelMrkModel.partCount}</h1>
     <table>
       <tr><td><b>Surface Area</b></td><td></td><td>0.02e-4 m^2</td></tr>
       <tr><td><b>Minimum</b></td><td><b>Average</b></td><td><b>Maximum</b></td></tr>
       <tr><td>0.1e-2 m^2</td><td>0.2e-2 m^2</td><td>0.4e-2 m^2</td></tr>
       <tr><td><b>Flow rate:</b></td><td></td><td>0.2e-2 m^3/s</td></tr>
       <tr><td> </td><td></td><td></td></tr>
       <tr><td><b>Pressure force:</b></td><td></td><td></td></tr>
       <tr><td>x: 0.1e-2 N</td><td>y: 0.2e-2 N</td><td>z: 0.4e-2 N</td></tr>
     </table>
   </div>
 </foreignObject>
</svg>
`;

const img = new Image();
img.src = data;
const myThis = this;
img.onload = (_ev: Event) => {
   ctx.drawImage(img, 0, 0);
   const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
   const texture = cee.Texture.fromImageData(imageData,
     { generateMipmaps: false,
       wrapMode: cee.TextureWrapMode.CLAMP_TO_EDGE,
       minFilter: cee.TextureMinFilter.LINEAR
     });
   myThis.m_pickingImageLabelPart.set(texture, pickInfo.intersectionPoint);
}

Note: If you want to use a NPOT (non-power-of-two) texture, make sure you provide texture options cee.TextureOptions without mipmap when you generate the texture, e.g.:

{
  generateMipmaps: false,
  wrapMode: cee.TextureWrapMode.CLAMP_TO_EDGE,
  minFilter: cee.TextureMinFilter.LINEAR
}

Use MarkupModel.addImageLabelPart to create a new instance of this class.

Example showing HTML text rendered to SVG/XML and shown as PartImageLabel parts:

Accessors

• attachmentAppearance

• customData

Methods

• rayIntersect

• set

---

Accessors

PartImageLabel.attachmentAppearance()

Returns an active reference to the attachment appearance settings for this part.

Return type:

LabelAttachmentAppearance

PartImageLabel.customData()

Custom data for the part. This field is not used by EnvisionWeb.

Return type:

any

PartImageLabel.customData(data)

Arguments:

• data (any) – None

Return type:

void

Methods

rayIntersect

PartImageLabel.rayIntersect(ray, hitItem)

Arguments:

• ray (Ray) – None

• hitItem (PartHitItem) – None

Picking

Return type:

boolean

set

PartImageLabel.set(image, pos)

Arguments:

• image (Texture) – None

• pos (Vec3) – None

Set the image to use for the label and the position (3d coordinate) of the label

Return type:

void