This tutorial shows how to create a Schematics Widget, which is a high-level component designed for quick wellbore data visualization. The Schematic Widget is derived from geotoolkit/widgets/AnnotatedWidget and includes some of its default tools. It has default labeling capability, component and label highlight and several other options that can be set using setOptions().
It uses geotoolkit/schematics/scene/WellBoreNode as the data model and by default it implements geotoolkit/schematics/factory/ComponentNodeFactoryRegistry. For example, to represent grayscale elements (no color mode) one can implement geotoolkit/schematics/factory/GrayScaleComponentFactoryRegistry() or another custom implementation. Please refer to the Vertical Schematics Demo for more information on this.
# Widget Initialization
The following example demonstrates how to create data using WellBoreData and use it to initialize the Schematics Widget. The code snippet shows a few highlights.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { WellBoreData } from "@int/geotoolkit/schematics/data/WellBoreData.ts";
import { CompositeSchematicsWidget } from "@int/geotoolkit/schematics/widgets/CompositeSchematicsWidget.ts";
import data from "/src/assets/data/wellBoreData.json?import";
function createScene(canvas) {
function createWellBoreData() {
return new WellBoreData(data);
}
const options = {
"north": { "title": { "text": "Schematics Widget" } },
"gap": {
"top": {
"visible": false,
"resizable": false,
"size": "0"
},
"left": {
"visible": true,
"resizable": false,
"size": "30px"
},
"right": {
"visible": true,
"resizable": false,
"size": "30px"
},
"bottom": {
"visible": false,
"resizable": false,
"size": "0"
}
},
"annotationssizes": {
"south": 0
},
"data": {
"elements": createWellBoreData()
}
};
return new Plot({
"canvaselement": canvas,
"root": new CompositeSchematicsWidget(options)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));