# 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: .. image:: ../../images/MrkPartImageLabel.png

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

Conversation saved
HOOPSY BETA

### Hello! I'm HOOPSY

Your Docs generative AI assistant. Ask me anything about HOOPS Envision for Web or choose a sample question below to start a conversation:

What is HOOPS Envision for Web?
What are the latest release notes for HOOPS Envision for Web?
How do I start evaluating HOOPS Envision for Web?
How do I write my first sample application?
How can I get assistance?

HOOPSY may store conversations according to OpenAI's policy. Responses may not always be accurate.

HOOPSY is thinking...