This WellLog Headers tutorial shows how to create the different types of track and visual headers. The header is the annotation area, usually located above, displaying information about the track or visual. Headers are displayed by default for all log visuals, such as curve, fill and lithology.
A header is automatically generated for the entire track by using the LogTrackHeader object. LogAxisVisualHeader can be used to create header for index tracks to display a scale or information related to the axis. All visual headers will have the same style which can be easily modified.
Header containers can be used to group several track headers and can be combined with track containers and added to the parent group which holds all the objects. See the Header Customization tutorial for more information.
Headers can also be adaptive and collapsible. See the Adaptive and Collapsible tutorial.
# Depth Index Headers
Depth Index headers use the name of the axis and the track container's unit to display as the header.
.cg-tooltip-holder {
position: relative;
}
.cg-tooltip {
position: absolute;
display: block;
padding: 2px 12px 3px 7px;
overflow: visible !important;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-size: 13px;
background: white !important;
opacity: 0.9;
color: #333333;
border: solid 1px gray;
border-radius: 5px;
text-align: left;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 5px;
margin: 0 !important;
z-index: 10000;
max-width: 400px;
text-wrap: normal !important;
white-space: normal !important;
}
/* Default setting for tooltip */
.cg-tooltip-container {
position: absolute;
display: block;
overflow: visible !important;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-size: 12px;
padding: 3px 7px;
background: #f7f7f7;
color: #333333;
border: 1px solid #938e8e;
opacity: 0.8;
text-align: left;
box-shadow: 3px 3px 10px #888;
margin: 0 !important;
z-index: 10000;
max-width: 400px;
text-wrap: normal !important;
white-space: normal !important;
user-select: none;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.cg-tooltip-container {
border-radius: 0;
}
}
/* Default left arrow for tooltip */
.cg-tooltip-arrow-left::before {
content: '';
position: absolute;
display: block;
width: 0px;
left: 0;
top: 50%;
border: 5px solid transparent;
border-left: 0;
border-right: 5px solid #938e8e;
transform: translate(calc(-100%), -50%);
}
.cg-tooltip-arrow-left::after {
content: '';
position: absolute;
display: block;
width: 0px;
left: 0;
top: 50%;
border: 4px solid transparent;
border-left: 0;
border-right: 4px solid #f7f7f7;
transform: translate(calc(-100%), -50%);
}
/* Default top arrow for tooltip */
.cg-tooltip-arrow-top::before {
content: '';
position: absolute;
display: block;
width: 0px;
left: 50%;
top: 0;
border: 5px solid transparent;
border-top: 0;
border-bottom: 5px solid #938e8e;
transform: translate(-50%, -100%);
}
.cg-tooltip-arrow-top::after {
content: '';
position: absolute;
display: block;
width: 0px;
left: 50%;
top: 0;
border: 4px solid transparent;
border-top: 0;
border-bottom: 4px solid #f7f7f7;
transform: translate(-50%, -100%);
}
/* Default right arrow for tooltip */
.cg-tooltip-arrow-right::before {
content: '';
position: absolute;
display: block;
width: 0px;
right: 0;
top: 50%;
border: 5px solid transparent;
border-right: 0;
border-left: 5px solid #938e8e;
transform: translate(100%, -50%);
}
.cg-tooltip-arrow-right::after {
content: '';
position: absolute;
display: block;
width: 0px;
right: 0;
top: 50%;
border: 4px solid transparent;
border-right: 0;
border-left: 4px solid #f7f7f7;
transform: translate(100%, -50%);
}
/* Default bottom arrow for tooltip */
.cg-tooltip-arrow-bottom::before {
content: '';
position: absolute;
display: block;
width: 0px;
left: 50%;
bottom: 0px;
border: 5px solid transparent;
border-bottom: 0;
border-top: 5px solid #938e8e;
transform: translate(-50%, 100%);
z-index: 10000;
}
.cg-tooltip-arrow-bottom::after {
content: '';
position: absolute;
display: block;
width: 0px;
left: 50%;
bottom: 0;
border: 4px solid transparent;
border-bottom: 0;
border-top: 4px solid #f7f7f7;
transform: translate(-50%, 100%);
z-index: 10000;
}
/* Tooltip item name */
/* Tooltip item value */
/* .cg-tooltip-item-value */
/* Tooltip item value */
.cg-tooltip-item-unit {
text-transform: none;
}
.cg-tooltip-item-name {
text-transform: capitalize;
white-space: nowrap;
vertical-align: middle;
font-size: 13px;
}
.cg-tooltip-row {
display: flex;
flex-direction: row;
align-items: center;
white-space: pre-wrap;
font-size: 12px;
line-height: 100%;
margin: 1px 0;
}
.cg-tooltip-title {
font-size: 13px;
height: 14px;
text-transform: capitalize;
}
.cg-tooltip-title .cg-tooltip-symbol {
margin-right: 0 !important;
}
.cg-tooltip-title-name {
vertical-align: middle;
}
.cg-tooltip-row + .cg-tooltip-row {
margin-top: 4px;
}
.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {
margin-top: 5px;
}
.cg-tooltip-item-value + .cg-tooltip-item-unit {
margin-left: 1px;
}
/* Tooltip symbol */
.cg-tooltip-symbol-cell {
display: inline-flex;
min-width: 13px; /* 10px size + 3px margin */
}
.cg-tooltip-symbol {
margin-right: 3px;
background-color: transparent;
display: block;
}
.cg-tooltip-symbol > img {
display: block;
}
.cg-tooltip-list-cell {
display: inline-flex;
}
.cg-tooltip-list-symbol {
display: block;
margin-right: 3px;
width: 6px;
height: 6px;
vertical-align: middle;
border-radius: 50%;
border: 1px solid rgba(0,0,0,.4);
}
.cg-tooltip-symbol-legacy {
border-radius: 4px;
margin-right: 5px;
height: 8px;
width: 8px;
display: inline-block;
}
.cg-tooltip-title-legacy {
font-weight: 900;
}
/* Tooltip symbol circle */
.cg-tooltip-symbol.circle {
height: 10px;
width: 10px;
display: inline-block;
border-radius: 50%;
border: 1px solid rgba(0,0,0,.4);
}
/* Tooltip symbol line */
.cg-tooltip-symbol.line {
height: 10px;
width: 10px;
display: inline-block;
transform: scale(1.2, 0.2);
}
/* Tooltip symbol diamond */
.cg-tooltip-symbol.diamond {
height: 10px;
width: 10px;
display: inline-block;
transform: rotate(45deg);
border-radius: 0px;
}
/* Tooltip symbol square */
.cg-tooltip-symbol.square {
height: 10px;
width: 10px;
display: inline-block;
border-radius: 0px;
border: 1px solid rgba(0,0,0,.4);
}
# Depth Index Headers with Scale or Range
Depth Index headers use the name of the axis and the track container's unit to display as the header.
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { createBasicWidget, createBasicWPlot } from "/src/code/WellLog/Headers/BasicHeaders/common.ts";
function createScene(canvas, canvas1) {
const widget = createBasicWidget(100, 200).setAxisHeaderType(HeaderType.Scale).setIndexUnit("m");
widget.addTrack(TrackType.IndexTrack);
const widget1 = createBasicWidget(100, 200).setAxisHeaderType(HeaderType.Range).setIndexUnit("m");
widget1.addTrack(TrackType.IndexTrack);
return [
createBasicWPlot(canvas, widget),
createBasicWPlot(canvas1, widget1)
];
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'), document.querySelector('[ref="plot1"]'));
# Fill Headers
Fill headers display information based on the fill of a track.
import { LogFill } from "@int/geotoolkit/welllog/LogFill.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { createBasicWidget, createBasicWPlot, createCurve, createDataSource } from "/src/code/WellLog/Headers/BasicHeaders/common.ts";
function createScene(canvas) {
const widget = createBasicWidget();
widget.addTrack(TrackType.IndexTrack);
const curve = createCurve(createDataSource());
const fill = new LogFill({
"curve1": curve,
"fillstyle": "orange"
});
widget.addTrack(TrackType.LinearTrack).addChild(fill);
return createBasicWPlot(canvas, widget);
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Curve Headers
Curve headers display information about the curves themselves and can be grouped together in LogTrackHeader. For creating more advanced headers, please refer to the Adaptive Header tutorial. It also shows how to add custom symbols and tracking elements to the header.
import { DiamondPainter } from "@int/geotoolkit/scene/shapes/painters/DiamondPainter.ts";
import { SymbolShape } from "@int/geotoolkit/scene/shapes/SymbolShape.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { createBasicWidget, createBasicWPlot, createCurve, createDataSource } from "/src/code/WellLog/Headers/BasicHeaders/common.ts";
function createScene(canvas) {
const curve = createCurve(createDataSource());
const widget = createBasicWidget();
widget.addTrack(TrackType.IndexTrack);
const symbol = new SymbolShape({
"height": 10,
"width": 10,
"painter": DiamondPainter,
"fillstyle": "green",
"visible": true
});
curve.setSymbol(symbol).setDisplayMode(["line", "symbol"]).setSymbolDecimationStep(1);
widget.addTrack(TrackType.LinearTrack).addChild(curve);
return createBasicWPlot(canvas, widget);
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Min & Max Precision
Set the minimum, maximum and value precision in a AdaptiveLogCurveVisualHeader use method setElement() and method changeHeaderProvider at LogVisualHeaderProvider.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { LogCurve } from "@int/geotoolkit/welllog/LogCurve.ts";
import { AutoNumberFormat } from "@int/geotoolkit/util/AutoNumberFormat.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { Elements } from "@int/geotoolkit/welllog/header/AdaptiveLogCurveVisualHeader.ts";
import { createBasicWidget, createCurve, createTestDataPrecision } from "/src/code/WellLog/Headers/BasicHeaders/common.ts";
function createMaxMinPrecision() {
const curve = createCurve(createTestDataPrecision());
const widget = createBasicWidget();
widget.getHeaderContainer().getHeaderProvider().changeHeaderProvider(LogCurve.getClassName(), (header) => {
header.setElement([Elements.ScaleFrom, Elements.ScaleTo], {
"numberformat": new AutoNumberFormat({ "maximumfractiondigits": 4 })
});
});
widget.addTrack(TrackType.LinearTrack).addChild(curve);
return widget;
}
function createScene(canvas) {
return new Plot({
"canvaselement": canvas,
"root": createMaxMinPrecision()
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Lithology Headers
Lithology headers display each of the layers of a lithology track. A lithology is a graphical representation of a type of rock.
import { LogLithology } from "@int/geotoolkit/welllog/LogLithology.ts";
import { PatternFactory } from "@int/geotoolkit/attributes/PatternFactory.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { createBasicWidget, createBasicWPlot } from "/src/code/WellLog/Headers/BasicHeaders/common.ts";
import { loadResources } from "/src/helpers/resources.ts";
function createScene(canvas) {
loadResources("patterns");
const widget = createBasicWidget();
widget.addTrack(TrackType.IndexTrack);
widget.setHeaderHeight(100);
const patternFactory = PatternFactory.getInstance();
const fillStyles = [{
"color": KnownColors.Green,
"pattern": patternFactory.getPattern("chert")
}, {
"color": KnownColors.Yellow,
"pattern": patternFactory.getPattern("lime")
}, {
"color": KnownColors.Red,
"pattern": patternFactory.getPattern("shale")
}, {
"color": KnownColors.Yellow,
"pattern": patternFactory.getPattern("lime")
}, {
"color": KnownColors.Green,
"pattern": patternFactory.getPattern("chert")
}, {
"color": KnownColors.Blue,
"pattern": patternFactory.getPattern("shale")
}, {
"color": KnownColors.Yellow,
"pattern": patternFactory.getPattern("lime")
}];
const lithology = new LogLithology({
"fillstyles": fillStyles,
"titles": ["chert", "lime", "shale", "lime", "chert", "shale", "lime"],
"depths": [100, 150, 200, 250, 300, 350, 400]
});
widget.addTrack(TrackType.LinearTrack).addChild(lithology);
return createBasicWPlot(canvas, widget);
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Lithology Customized Headers
Lithology headers could be set up or replaced with customized headers.
import { LogLithology } from "@int/geotoolkit/welllog/LogLithology.ts";
import { HeaderType as LogLithologyHeaderType, LogLithologyHeader } from "@int/geotoolkit/welllog/header/LogLithologyHeader.ts";
import { PatternFactory } from "@int/geotoolkit/attributes/PatternFactory.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { createBasicWidget, createBasicWPlot } from "/src/code/WellLog/Headers/BasicHeaders/common.ts";
import { loadResources } from "/src/helpers/resources.ts";
import { AdaptiveLogLithologyHeader } from "@int/geotoolkit/welllog/header/AdaptiveLogLithologyHeader.ts";
import { DiscreteFillDisplayType } from "@int/geotoolkit/welllog/header/AdaptiveDiscreteFillVisualHeader.ts";
function createScene(canvas) {
loadResources("patterns");
const widget = createBasicWidget(90, 430);
widget.addTrack(TrackType.IndexTrack);
const patternFactory = PatternFactory.getInstance();
const lithology1 = new LogLithology({
"fillstyles": [{
"color": KnownColors.Green,
"pattern": patternFactory.getPattern("chert")
}, {
"color": KnownColors.Yellow,
"pattern": patternFactory.getPattern("lime")
}],
"titles": ["chert", "lime"],
"depths": [100, 150, 200]
});
const lithology2 = new LogLithology({
"fillstyles": [{
"color": KnownColors.Red,
"pattern": patternFactory.getPattern("shale")
}, {
"color": KnownColors.Yellow,
"pattern": patternFactory.getPattern("lime")
}],
"titles": ["shale", "lime"],
"depths": [220, 240, 260]
});
const lithology3 = new LogLithology({
"fillstyles": [{
"color": KnownColors.Green,
"pattern": patternFactory.getPattern("chert")
}, {
"color": KnownColors.Blue,
"pattern": patternFactory.getPattern("shale")
}],
"titles": ["chert", "shale"],
"depths": [280, 350, 420]
});
widget.addTrack(TrackType.LinearTrack).addChild([lithology1, lithology2, lithology3]);
const headerProvider = widget.getHeaderContainer().getHeaderProvider();
const lithologyHeader2 = headerProvider.getHeader(lithology2);
if (lithologyHeader2 instanceof LogLithologyHeader) {
lithologyHeader2.setHeaderType(LogLithologyHeaderType.BoxesLeft);
} else if (lithologyHeader2 instanceof AdaptiveLogLithologyHeader) {
lithologyHeader2.setDiscreteDisplayType(DiscreteFillDisplayType.BoxesLeft);
}
const lithologyHeader3 = headerProvider.getHeader(lithology3);
if (lithologyHeader3 instanceof LogLithologyHeader) {
lithologyHeader3.setHeaderType(LogLithologyHeaderType.BoxesRight);
} else if (lithologyHeader3 instanceof AdaptiveLogLithologyHeader) {
lithologyHeader3.setDiscreteDisplayType(DiscreteFillDisplayType.BoxesRight);
}
return createBasicWPlot(canvas, widget);
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Lithology FlexBox Layout Headers
Lithology headers have option to display using flexible layout similars to flexbox in css.
It's especially useful when the log has large amount of headers.
The header prioritizes displaying items horizontally and reorganizes its layout automatically when it doesn't have enough horizontal space to display all its items.
Change header width by dragging the header handles to see flexbox layout effect.
import { LogLithology } from "@int/geotoolkit/welllog/LogLithology.ts";
import { PatternFactory } from "@int/geotoolkit/attributes/PatternFactory.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { createBasicWidget, createBasicWPlot } from "/src/code/WellLog/Headers/BasicHeaders/common.ts";
import { loadResources } from "/src/helpers/resources.ts";
import { LogLithologyHeader } from "@int/geotoolkit/welllog/header/LogLithologyHeader.ts";
import { AdaptiveLogLithologyHeader } from "@int/geotoolkit/welllog/header/AdaptiveLogLithologyHeader.ts";
import { DiscreteFillDisplayType } from "@int/geotoolkit/welllog/header/AdaptiveDiscreteFillVisualHeader.ts";
function createScene(canvas) {
loadResources("patterns");
const widget = createBasicWidget();
widget.addTrack(TrackType.IndexTrack);
widget.setHeaderHeight("auto");
const patternFactory = PatternFactory.getInstance();
const fillStyles = [{
"color": KnownColors.Green,
"pattern": patternFactory.getPattern("chert")
}, {
"color": KnownColors.Yellow,
"pattern": patternFactory.getPattern("lime")
}, {
"color": KnownColors.Red,
"pattern": patternFactory.getPattern("shale")
}, {
"color": KnownColors.Yellow,
"pattern": patternFactory.getPattern("lime")
}, {
"color": KnownColors.Green,
"pattern": patternFactory.getPattern("chert")
}, {
"color": KnownColors.Blue,
"pattern": patternFactory.getPattern("shale")
}, {
"color": KnownColors.Yellow,
"pattern": patternFactory.getPattern("lime")
}];
const lithologyFlexBox = new LogLithology({
"fillstyles": fillStyles,
"titles": ["chert", "lime", "shale", "lime", "chert", "shale", "lime"],
"depths": [100, 150, 200, 250, 300, 350, 400]
});
widget.addTrack(TrackType.LinearTrack).addChild(lithologyFlexBox);
const headerProvider = widget.getHeaderContainer().getHeaderProvider();
const lithologyFlexBoxHeader = headerProvider.getHeader(lithologyFlexBox);
if (lithologyFlexBoxHeader instanceof LogLithologyHeader) {
lithologyFlexBoxHeader.setFlexBoxOptions({
"enabled": true
});
} else if (lithologyFlexBoxHeader instanceof AdaptiveLogLithologyHeader) {
lithologyFlexBoxHeader.setDiscreteDisplayType(DiscreteFillDisplayType.FlexBox);
}
return createBasicWPlot(canvas, widget);
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Array Log Headers
Array Log headers show values displayed with the color bar.
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { create2DVisual, createBasicWidget, createBasicWPlot, loadLog2DData } from "/src/code/WellLog/Headers/BasicHeaders/common.ts";
function createLogWidget() {
const widget = createBasicWidget(4770, 5050);
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
create2DVisual(loadLog2DData())
]);
return widget;
}
function createScene(canvas) {
const widget = createLogWidget();
return createBasicWPlot(canvas, widget);
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Log Track Headers
Log Track headers greatly simplify the process of adding headers by automatically creating headers based on entire track objects. If microposition is set, header merging is enabled by default and the header will try to fit as many micropositioned headers on one line as it can without overlap.
import { DiamondPainter } from "@int/geotoolkit/scene/shapes/painters/DiamondPainter.ts";
import { SymbolShape } from "@int/geotoolkit/scene/shapes/SymbolShape.ts";
import { LogFill } from "@int/geotoolkit/welllog/LogFill.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { createBasicWidget, createBasicWPlot, createCurve, createDataSource } from "/src/code/WellLog/Headers/BasicHeaders/common.ts";
function createScene(canvas) {
const curve = createCurve(createDataSource());
const widget = createBasicWidget();
const fill = new LogFill({
"curve1": curve,
"fillstyle": "orange"
});
const symbol = new SymbolShape({
"height": 10,
"width": 10,
"painter": DiamondPainter,
"fillstyle": "green",
"visible": true
});
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild(fill);
curve.setSymbol(symbol).setDisplayMode(["line", "symbol"]).setSymbolDecimationStep(1);
widget.addTrack(TrackType.LinearTrack).addChild(curve);
return createBasicWPlot(canvas, widget);
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Composite Header
Composite headers using LogCompositeVisualHeader can contains any scenegraph elements.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Events as LogVisualHeaderEvents } from "@int/geotoolkit/welllog/header/LogVisualHeader.ts";
import { from } from "@int/geotoolkit/selection/from.ts";
import { DefaultColorProvider } from "@int/geotoolkit/util/DefaultColorProvider.ts";
import { ColorBarLocation } from "@int/geotoolkit/controls/shapes/ColorBarLocation.ts";
import { ColorBar } from "@int/geotoolkit/controls/shapes/ColorBar.ts";
import { AdaptiveLogVisualHeader, Sections } from "@int/geotoolkit/welllog/header/AdaptiveLogVisualHeader.ts";
import { Orientation } from "@int/geotoolkit/util/Orientation.ts";
import { LabelPosition, TickPosition } from "@int/geotoolkit/axis/TickInfo.ts";
import { Axis } from "@int/geotoolkit/axis/Axis.ts";
import { VerticalBoxLayout } from "@int/geotoolkit/layout/VerticalBoxLayout.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { LogCompositeVisualHeader } from "@int/geotoolkit/welllog/header/LogCompositeVisualHeader.ts";
import { NumericLinearTickGenerator } from "@int/geotoolkit/axis/NumericLinearTickGenerator.ts";
import { LineStyle } from "@int/geotoolkit/attributes/LineStyle.ts";
import { TextStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { create2DVisual, loadLog2DData } from "/src/code/WellLog/Headers/BasicHeaders/common.ts";
function createCompositeHeader() {
const headerTextStyle = new TextStyle({
"color": "black",
"font": "12px sans-serif"
});
const headerLineStyle = new LineStyle("gray");
const tickGenerator = new NumericLinearTickGenerator().setTickStep("major", 0.25).setFormatLabelHandler((ref, parent, orient, tickInfo, tickIndex, value) => {
let labels;
if (tickInfo.getGrade() === "edge") {
labels = ["U", "U"];
return labels[tickIndex];
} else if (tickInfo.getGrade() === "major") {
labels = ["R", "B", "L"];
return labels[tickIndex];
}
return "";
}).setTickStyle("major", headerLineStyle).setTickStyle("edge", headerLineStyle).setLabelStyle("major", headerTextStyle).setLabelStyle("edge", headerTextStyle);
const log2dVisualHeader = new LogCompositeVisualHeader().setBounds(new Rect(0, 0, 100, 180)).setLayout(new VerticalBoxLayout()).setAutoModelLimitsMode(true).addChild([
new Axis({
"tickposition": TickPosition.Bottom,
"orientation": Orientation.Horizontal,
"labelposition": LabelPosition.Top
}).setBaseLineStyle(headerLineStyle).setTickGenerator(tickGenerator).setTickPosition(TickPosition.Top).setModelLimits(new Rect(0, 0, 1, 10)).setLayoutStyle({
"height": 20
}),
new AdaptiveLogVisualHeader().setElement({
"Orientation": {
"updatemethod": function(header) {
const tag = header.getVisual().getTag();
return tag != null ? tag["orientation"] : "Orientation";
},
"anchor": AnchorType.Center,
"section": Sections.Middle,
"cut": "left-to-right",
"textstyle": headerTextStyle
}
}).setSections([Sections.Middle]).setLayoutStyle({
"height": 20
}),
new ColorBar({
"location": ColorBarLocation.North,
"componentsizes": {
"colorbox": 20,
"axis": 20,
"title": 0
},
"axis": {
"textstyle": headerTextStyle
},
"colorprovider": new DefaultColorProvider({
"values": [0, 1],
"colors": [
"black",
"white"
]
})
}).setAutoModelLimitsMode(true).setLayoutStyle({
"height": 40
}).execute(function() {
this.getTickGenerator().setTickStyle("major", headerLineStyle);
this.getTickGenerator().setTickStyle("edge", headerLineStyle);
this.getTickGenerator().setLabelStyle("major", headerTextStyle);
this.getTickGenerator().setLabelStyle("edge", headerTextStyle);
}),
new AdaptiveLogVisualHeader().setPaddingStyle("5px").setElement({
"Name": {
"updatemethod": function(header) {
const tag = header.getVisual().getTag();
return tag != null ? tag["name"] : header.getVisual().getName();
},
"anchor": AnchorType.Center,
"section": Sections.Top,
"cut": "left-to-right",
"textstyle": headerTextStyle
},
"Unit": {
"updatemethod": function(header) {
const tag = header.getVisual().getTag();
return tag != null ? tag["unit"] : "Unit";
},
"anchor": AnchorType.Center,
"section": Sections.Bottom,
"textstyle": headerTextStyle
}
}).setLayoutStyle({
"height": 60
})
]);
const applyContent = function(eventType, header, visual) {
if (visual == null)
return;
from(header).where(
(node) => node instanceof ColorBar || node instanceof Axis
).select((node) => {
const left = visual.getMicroPositionLeft();
const width = visual.getMicroPositionRight() - visual.getMicroPositionLeft();
node.setLayoutStyle({
"left": left * 100 + "%",
"width": width * 100 + "%"
});
});
const colorBar = from(header).where((node) => node instanceof ColorBar).selectFirst();
if (colorBar != null) {
colorBar.setOptions({
"min": visual.getColorProvider().getMinValue(),
"max": visual.getColorProvider().getMaxValue(),
"colorprovider": visual.getColorProvider()
});
}
};
log2dVisualHeader.on(LogVisualHeaderEvents.VisualChanged, applyContent).on(LogVisualHeaderEvents.VisualInvalidate, applyContent);
return log2dVisualHeader;
}
function createScene(canvas) {
const group = new Group().setAutoModelLimitsMode(true).addChild([
createCompositeHeader().setVisual(create2DVisual(loadLog2DData()).setTag({
"orientation": "Orientation: Top of Hole",
"name": "RAB - MicroScope RM Deep Button Image<br>MicroScope RM",
"unit": "(ohm.m)"
})).setBounds(new Rect(0, 0, 300, 150))
]);
return new Plot({
"canvaselement": canvas,
"root": group
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Custom Header
To create a custom header from LogVisualHeader, the 'render' method must be overridden.
If the header type is expected to be instantiated from within LogVisualHeaderProvider, then the method 'clone' must be overridden.
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { CustomVisualHeader } from "/src/code/WellLog/Headers/HeaderCustomization/customVisualHeader.ts";
import { createCurve, createTestDataPrecision } from "/src/code/WellLog/Headers/BasicHeaders/common.ts";
function createScene(canvas) {
const curve = createCurve(createTestDataPrecision());
const group = new Group().setAutoModelLimitsMode(true).addChild([
new CustomVisualHeader(curve).setBounds(new Rect(0, 0, 200, 40))
]);
return new Plot({
"canvaselement": canvas,
"root": group
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));