The tutorial demonstrates how to specify gradient curves using a data source. The gradient curve in this case is built using two curves. One curve is used for its data values and the color from the other curve is used to create a gradient in the colors. The fill style uses a data source to add a gradient to the colors.
# Data Binding
Data binding is the process of establishing a connection between the UI and the code logic. After the binding is performed, the color element will reflect changes in the bound data automatically. See the example below.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { KnownScales } from "@int/geotoolkit/util/ColorProvider.ts";
import { LogData } from "@int/geotoolkit/welllog/data/LogData.ts";
import { LogCurve } from "@int/geotoolkit/welllog/LogCurve.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { DataSource } from "/src/code/WellLog/Visuals/GradientCurve/ts/dataSource.ts";
import { clearDataBinding, registerDataBinding } from "/src/code/WellLog/Visuals/GradientCurve/ts/util.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createScene(canvas) {
registerDataBinding();
const data = new DataSource();
const widget = createWellLogWidget().setData(data).setDepthLimits(data.getIndexRange()).setAxisHeaderType(HeaderType.Simple).scale(5);
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).setWidth(150).addChild([
new LogCurve(new LogData("ROP")).setSymbolDecimationStep(1).setDisplayMode(["line"]).setLineStyle({
"color": "lightgray",
"pixelsnapmode": true
}).setTag({
"id": "ROP",
"gradient": null
})
]);
widget.addTrack(TrackType.LogTrack).setWidth(150).addChild([
new LogCurve(new LogData("GR")).setSymbolDecimationStep(2).setDisplayMode(["line"]).setBarsRightAligned(true).setLineStyle({
"color": "lightgreen",
"pixelsnapmode": true
}).setTag({
"id": "GR",
"gradient": {
"source": "GR",
"scale": KnownScales.Rainbow
},
"wrap": {
"ltGradient": {
"source": "GR",
"scale": KnownScales.Cool
},
"gtGradient": {
"source": "GR",
"scale": KnownScales.Cool
}
}
})
]);
widget.addTrack(TrackType.LogTrack).setWidth(150).addChild([
new LogCurve(new LogData("ROP")).setSymbolDecimationStep(4).setDisplayMode(["line"]).setLineStyle({
"color": "lightblue",
"pixelsnapmode": true
}).setTag({
"id": "ROP",
"gradient": {
"source": "GR",
"scale": KnownScales.Rainbow
}
})
]);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
function dispose() {
clearDataBinding();
}
export { createScene, dispose };
createScene(document.querySelector('[ref="plot"]'));
# Symbols
Symbols can be substituted for the default curve line. The code is identical but now the values are represented by symbols with gradient colors rather than a continuous curve.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { SymbolShape } from "@int/geotoolkit/scene/shapes/SymbolShape.ts";
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { DiamondPainter } from "@int/geotoolkit/scene/shapes/painters/DiamondPainter.ts";
import { KnownScales } from "@int/geotoolkit/util/ColorProvider.ts";
import { LogData } from "@int/geotoolkit/welllog/data/LogData.ts";
import { LogCurve } from "@int/geotoolkit/welllog/LogCurve.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { DataSource } from "/src/code/WellLog/Visuals/GradientCurve/ts/dataSource.ts";
import { clearDataBinding, registerDataBinding } from "/src/code/WellLog/Visuals/GradientCurve/ts/util.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createSymbol(lineStyle, fillStyle) {
return new SymbolShape({
"width": 8,
"height": 8,
"alignment": AnchorType.Center,
"painter": DiamondPainter,
"linestyle": lineStyle,
"fillstyle": fillStyle
});
}
function createScene(canvas) {
registerDataBinding();
const data = new DataSource();
const widget = createWellLogWidget().setData(data).setDepthLimits(data.getIndexRange()).setAxisHeaderType(HeaderType.Simple).scale(5);
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).setWidth(150).addChild([
new LogCurve(new LogData("ROP")).setSymbol(createSymbol("black", "lightgray")).setSymbolDecimationStep(1).setDisplayMode(["symbol"]).setLineStyle({
"color": "lightgray",
"pixelsnapmode": true
}).setTag({
"id": "ROP",
"gradient": null
})
]);
widget.addTrack(TrackType.LogTrack).setWidth(150).addChild([
new LogCurve(new LogData("GR")).setSymbol(createSymbol("black", "lightgreen")).setSymbolDecimationStep(2).setDisplayMode(["symbol"]).setBarsRightAligned(true).setLineStyle({
"color": "lightgreen",
"pixelsnapmode": true
}).setTag({
"id": "GR",
"gradient": {
"source": "GR",
"scale": KnownScales.Rainbow
},
"wrap": {
"ltGradient": {
"source": "GR",
"scale": KnownScales.Cool
},
"gtGradient": {
"source": "GR",
"scale": KnownScales.Cool
}
}
})
]);
widget.addTrack(TrackType.LogTrack).setWidth(150).addChild([
new LogCurve(new LogData("ROP")).setSymbol(createSymbol("black", "lightblue")).setSymbolDecimationStep(4).setDisplayMode(["symbol"]).setLineStyle({
"color": "lightblue",
"pixelsnapmode": true
}).setTag({
"id": "ROP",
"gradient": {
"source": "GR",
"scale": KnownScales.Rainbow
}
})
]);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
function dispose() {
clearDataBinding();
}
export { createScene, dispose };
createScene(document.querySelector('[ref="plot"]'));
# Bars
Bars can be substituted for the default curve line as well.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { KnownScales } from "@int/geotoolkit/util/ColorProvider.ts";
import { LogData } from "@int/geotoolkit/welllog/data/LogData.ts";
import { LogCurve } from "@int/geotoolkit/welllog/LogCurve.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { DataSource } from "/src/code/WellLog/Visuals/GradientCurve/ts/dataSource.ts";
import { clearDataBinding, registerDataBinding } from "/src/code/WellLog/Visuals/GradientCurve/ts/util.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createScene(canvas) {
registerDataBinding();
const data = new DataSource();
const widget = createWellLogWidget().setData(data).setDepthLimits(data.getIndexRange()).setAxisHeaderType(HeaderType.Simple).scale(5);
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).setWidth(150).addChild([
new LogCurve(new LogData("ROP")).setSymbolDecimationStep(1).setDisplayMode(["bar"]).setLineStyle({
"color": "lightgray",
"pixelsnapmode": true
}).setTag({
"id": "ROP",
"gradient": null
})
]);
widget.addTrack(TrackType.LogTrack).setWidth(150).addChild([
new LogCurve(new LogData("GR")).setSymbolDecimationStep(2).setDisplayMode(["bar"]).setBarsRightAligned(true).setLineStyle({
"color": "lightgreen",
"pixelsnapmode": true
}).setTag({
"id": "GR",
"gradient": {
"source": "GR",
"scale": KnownScales.Rainbow
},
"wrap": {
"ltGradient": {
"source": "GR",
"scale": KnownScales.Cool
},
"gtGradient": {
"source": "GR",
"scale": KnownScales.Cool
}
}
})
]);
widget.addTrack(TrackType.LogTrack).setWidth(150).addChild([
new LogCurve(new LogData("ROP")).setSymbolDecimationStep(4).setDisplayMode(["bar"]).setLineStyle({
"color": "lightblue",
"pixelsnapmode": true
}).setTag({
"id": "ROP",
"gradient": {
"source": "GR",
"scale": KnownScales.Rainbow
}
})
]);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
function dispose() {
clearDataBinding();
}
export { createScene, dispose };
createScene(document.querySelector('[ref="plot"]'));