This tutorial demonstrates how to add a simple image or raster log in the track. For more information on how to create tracks, see the Tracks tutorial.
# Display an Image
To insert an image in the track, first create the WellLog widget, then add tracks and curves to it. Create a simple image shape and add it to the track using addChild() method. In this case, the INT logo has been added and its X position is set between 0 - 1. Y position of the image is based on the depth of the WellLog.
import { AnchorType } from "@int/geotoolkit/util/AnchorType.ts";
import { Image } from "@int/geotoolkit/scene/shapes/Image.ts";
import { LogFill } from "@int/geotoolkit/welllog/LogFill.ts";
import { LogCurve } from "@int/geotoolkit/welllog/LogCurve.ts";
import { PatternFactory } from "@int/geotoolkit/attributes/PatternFactory.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { LogData } from "@int/geotoolkit/welllog/data/LogData.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createScene(canvas) {
const data = new LogData({
"name": "Curve1",
"depths": [
100,
116,
132,
148,
164,
180,
196,
212,
228,
244,
260,
276,
292,
308,
324,
340,
356,
372,
388,
404,
420,
436,
452,
468,
484,
500
],
"values": [20, 25, 30, 35, 30, 25, 40, 25, 30, 35, 40, 100, 80, 90, 100, 90, 95, 90, 40, 90, 40, 35, 40, 35, 40, 35]
});
const customPattern = PatternFactory.getInstance().createPattern(
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAQCAYAAABQrvyxAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAScwAAEnMBjCK5BwAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAo0lEQVRIS81WQQ6AIAzj/5/GaAIq26DVQDmYYEJ1XVtGyjmn8qR0Lu93dq3Am+K/FlFwq/EXgfanbBFKvCm+ZyePWEQW3fsbj/pcZZG2oUZthIDSIiOL1xBHRBiJvW/Mxg8JIAop9xgC7AnUFr8a/yKwa1B7CodTmO2kKujuIGOvFrODCimABpFVZnZGqFNox4zABFQej+xcm4lYR+lxbxI/SR1oUFAhMA7PXAAAAABJRU5ErkJggg=="
);
const widget = createWellLogWidget().setDepthLimits(100, 400);
widget.addTrack(TrackType.IndexTrack);
const curve = new LogCurve(data).setLineStyle({
"color": "#ef6c00",
"width": 2
});
const fill = new LogFill({
"curve1": curve,
"fillstyle": {
"color": "rgba(21,101,192,0.25)",
"pattern": customPattern,
"foreground": "rgba(21,101,192,0.5)"
}
});
const image = new Image({
"x": 0.4,
"y": 200,
"alignment": AnchorType.LeftTop,
"url": "src/assets/images/int-32x32.png",
"sizeisindevicespace": true
});
widget.addTrack(TrackType.LinearTrack).addChild([fill, curve, image]).setLayoutStyle({
"minwidth": 100
});
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Display a RasterLog
Raster Log requires initializing the tile provider, which requests tiles from the provided server according to implementation of the provider. In addition, mapping of image sizes and depth ranges must be provided. This example creates only one mapping interval of the whole image.
import { RasterLog } from "@int/geotoolkit/welllog/RasterLog.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { HttpClient } from "@int/geotoolkit/http/HttpClient.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { warn } from "@int/geotoolkit/base.js";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createRasterLog(filename, width, height) {
const imageSize = new Rect(0, 0, width, height);
const modelRect = new Rect(0, 0, 1, 11e3);
return new RasterLog({
"name": filename,
"formatter": (data) => {
const deviceArea = data["devicearea"];
const deviceTotal = data["transformedmodelrect"];
const cropRect = deviceArea.clone().intersect(deviceTotal);
const cropWidth = Math.min(deviceTotal.getWidth(), Math.ceil(cropRect.getWidth()));
const cropHeight = Math.min(deviceTotal.getHeight(), Math.ceil(cropRect.getHeight()));
return "https://demo.int.com/INTGeoServer/json/imagereader/scaledtile?filePath=images/" + filename + "&x=" + (cropRect.getX() - deviceTotal.getX()) + "&y=" + (cropRect.getY() - deviceTotal.getY()) + "&imageWidth=" + deviceTotal.getWidth() + "&imageHeight=" + deviceTotal.getHeight() + "&cropWidth=" + cropWidth + "&cropHeight=" + cropHeight;
},
"imagesize": imageSize,
"mapping": [{
"src": imageSize,
"dst": modelRect
}]
});
}
function loadRasterLog(track) {
const filename = "02914516_1957-01-05_Electric Log.tif";
const url = "https://demo.int.com/INTGeoServer/json/imagereader/info?filePath=images/" + filename;
HttpClient.getInstance().getHttp().get(url, { "responsetype": "json" }).then((response) => {
if (track.isDisposed())
return;
const data = response.data;
track.addChild(
createRasterLog(filename, data["imagePixelWidth"], data["imagePixelHeight"])
);
}, () => {
warn("No working server found at " + url);
});
}
function createScene(canvas) {
const widget = createWellLogWidget().setHeaderHeight(40).setDepthLimits(80, 11e3);
const track = widget.addTrack(TrackType.LinearTrack).setWidth(800);
loadRasterLog(track);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));