Visual Components
/
/
/
Div Plot
Last updated

Video wall

This tutorial demonstrates how to use div element instead of canvas one for creating Plot

Plot could be used with div element, so canvas (or canvases) will be created automatically. Also you can set it's size (2048 by default). This feature might be useful is cases with huge monitor or number of displays or high resolution.

import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { AlignmentStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
function createScene(div) {
  const parentGroup = new Group().setFillStyle("#00ff0010").setAnimationStyle({
    "attributename": "fill",
    "duration": 1e3,
    "repeatcount": Infinity,
    "from": KnownColors.Blue,
    "to": KnownColors.Orange
  }).setLineStyle("black").addChild([
    new Text({
      "text": "Here on the plot there are \n\n\nfour canvases placed",
      "ax": 205,
      "ay": 180,
      "textstyle": {
        "color": KnownColors.Black,
        "alignment": AlignmentStyle.Center,
        "font": "35px Arial"
      },
      "alignment": AnchorType.Center
    })
  ]);
  return new Plot({
    "divelement": div,
    "canvassize": 200,
    "root": parentGroup
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

Deviation

Localization