Getting started

Schematics.JS is designed to visualize well downhole equipment throughout its lifecycle. It provides a flexible and high-quality graphic engine to accommodate the needs of a variety of applications such as well design, BHA displays for monitoring drilling operations or detailed wellbore schematic and well intervention visualization. Schematics.JS can visualize vertical, deviated, and horizontal wells.

Schematics.JS offers a wide set of schematic elements and allows the user to extend or modify this set.

On other hand if a user is OK with a component's general graphical representation, though the component's shapes it's built of are expected to look different in terms of their line/fill styles, then rendering hints can be used.

Linear or compressed views of the schematic data are available along with custom views support.

Also supported is animation (e.g., displaying fluids inside a wellbore), labeling strategies , lithology and track schematics

This Schematics tutorial demonstrates how to initialize schematics data and visualize it in HTML5 canvas. Familiarization with the First Step tutorial in CarnacJS is beneficial.

Schematics data is stored in a WellBoreData object which is a container to hold all the schematics components. The WellBoreData object uses its addComponent method to accumulate components.

The steps required to visualize schematics data added to the WellBoreData object are:

1. Create a WellBoreNode shape and pass the WellBoreData object as a parameter. WellBoreNode is geotoolkit/scene/Node implementation to visualize the schematics data that the user created.

   • If custom elements are not needed (i.e. geotoolkit/schematics/scene/ComponentNode implementations), a reference to the data is the only argument to pass to WellBoreNode constructor. This is shown in the code below.

   • If custom elements are needed, then a geotoolkit/schematics/factory/ComponentNodeFactoryRegistry instance must be passed as a parameter of the WellBoreNode initialization object.
     Please refer to the Nodes customization tutorial for more details.

2. Create a Carnac Plot object and set the WellBoreNode shape as a root.

import { ViewMode, WellBoreNode } from "@int/geotoolkit/schematics/scene/WellBoreNode.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { WellBoreData } from "@int/geotoolkit/schematics/data/WellBoreData.ts";
import data from "/src/assets/data/wellBoreData.json?import";
const createScene = (canvas) => {
  const wellBoreNode = new WellBoreNode({
    "data": new WellBoreData(data),
    "viewmode": ViewMode.Compressed
  });
  const plot = new Plot({
    "canvaselement": canvas,
    "root": wellBoreNode
  });
  wellBoreNode.setBounds(new Rect(10, 0, 380, 750));
  return plot;
};
export { createScene };

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