This WellLog Localization tutorial shows how to change the displayed WellLog widget language (Locale). The following example provides four locales: US English (en), French (fr), Russian (ru), Chinese (cn) and demonstrates PDF export with the Locale. The Localization widget uses a third party library MomentJS to change Locales. Please visit the Localization tutorial in the WellLogWidgets section.
# How to Change Locale
Using the third party library MomentJS, set the default geotoolkit/util/DateTimeFormatFactory to MomentDateTimeFormat-Factory.
Then, set the Locale for geotoolkit/axis/AdaptiveDateTimeTickGenerator().
import {DateTimeFormatFactory} from '@int/geotoolkit/util/DateTimeFormatFactory';
import {TrackType} from '@int/geotoolkit/welllog/widgets/TrackType';
import {LogAxis} from '@int/geotoolkit/welllog/LogAxis';
import {AdaptiveDateTimeTickGenerator} from '@int/geotoolkit/axis/AdaptiveDateTimeTickGenerator';
// Change default DateTimeFormatFactory
DateTimeFormatFactory.setDefault(new MomentDateTimeFormatFactory());
// Set Locales for AdaptiveDateTimeTickGenerator
const logAxis = new LogAxis()
.setName('Time');
logAxis.setTickGenerator(new AdaptiveDateTimeTickGenerator()
.setLocale('en'));
// Another approach to set locale and name for existing track
// setTrackOptions API can also be used to set locale and name for track By following way
widget.setIndexType('time');
const _leftTrack = widget.addTrack(TrackType.IndexTrack);
_leftTrack.setDepthLimits(minValue, maxValue).setWidth(50);
widget.setTrackOptions(_leftTrack, {
'axis': {
'locale': 'en',
'name': 'time'
}
});# WellLog Widget In Different Locales
Click the Change Language radio buttons at the bottom of the image to display the language needed.
import { DateTimeFormatFactory } from "@int/geotoolkit/util/DateTimeFormatFactory.ts";
import { MomentDateTimeFormatFactory } from "/src/code/WellLog/AdditionalFunctionality/Localization/momentdatetimeformatfactory.ts";
import { TextStyle } from "@int/geotoolkit/attributes/TextStyle.ts";
import { LogCurveDataSource } from "@int/geotoolkit/welllog/data/LogCurveDataSource.ts";
import { DataBindingRegistry } from "@int/geotoolkit/data/DataBindingRegistry.ts";
import { LogCurve } from "@int/geotoolkit/welllog/LogCurve.ts";
import { LogAxis } from "@int/geotoolkit/welllog/LogAxis.ts";
import { TrackType as WellLogTrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { from } from "@int/geotoolkit/selection/from.ts";
import { LogTrack } from "@int/geotoolkit/welllog/LogTrack.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { FontSubType } from "@int/geotoolkit/pdf/FontSubType.ts";
import { HttpClient } from "@int/geotoolkit/http/HttpClient.ts";
import robotoFont from "/src/assets/fonts/roboto.ttf?import";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
const httpClient = HttpClient.getInstance().getHttp();
const CUSTOM_TEXT_STYLE = new TextStyle({
"font": "10px roboto"
});
class Localization {
constructor(canvas, useDateTime) {
DateTimeFormatFactory.setDefault(new MomentDateTimeFormatFactory());
this._useDateTime = useDateTime;
this._widget = this.createWidget();
this._curFont = robotoFont;
this._base64Font = "";
this._plot = new Plot({
"canvaselement": canvas,
"root": this._widget
});
this._widget.fitToHeight();
}
createBasicWidget() {
return createWellLogWidget();
}
createTestData(minDepth, maxDepth) {
const depths = [];
for (let i = 0; i < 20; i++) {
depths[i] = minDepth + i * (maxDepth - minDepth) / 19;
}
return {
"GR": new LogCurveDataSource({
"name": "GR",
"depths": depths,
"values": [40, 45, 65, 75, 50, 80, 40, 95, 100, 45, 50, 55, 80, 48, 50, 75, 82, 50, 73, 75]
}),
"CALI": new LogCurveDataSource({
"name": "CALI",
"depths": depths,
"values": [6, 8, 10, 10, 6, 9, 11, 7, 6, 9, 7, 8, 11, 6, 9, 7, 8, 11, 6, 10]
})
};
}
createWidget() {
let minValue = new Date(2e3, 0, 1, 0, 0, 0, 0).getTime();
let maxValue = new Date(2e3, 5, 1, 0, 0, 0, 0).getTime();
if (this._useDateTime === false) {
minValue = 0;
maxValue = 1e3;
}
const dataSource = this.createTestData(minValue, maxValue);
const registry = new DataBindingRegistry().add({
accept: function(node) {
return node instanceof LogCurve;
},
bind: function(curve) {
const id = curve.getId();
curve.setData(dataSource[id]);
}
});
const widget = this.createBasicWidget().setIndexType(this._useDateTime ? "time" : "depth").setDeviceUnit("cm").setIndexUnit(this._useDateTime ? "ms" : "m").setDepthLimits(minValue, maxValue).setVisibleDepthLimits(minValue, maxValue).setDataBinding(registry);
const headerProvider = widget.getHeaderContainer().getHeaderProvider();
const curveAxisHeader = headerProvider.getHeaderProvider(LogCurve.getClassName());
if (curveAxisHeader != null) {
headerProvider.registerHeaderProvider(LogCurve.getClassName(), curveAxisHeader.clone().setTextStyle(CUSTOM_TEXT_STYLE));
}
const logAxisHeader = headerProvider.getHeaderProvider(LogAxis.getClassName());
if (logAxisHeader != null) {
headerProvider.registerHeaderProvider(LogAxis.getClassName(), logAxisHeader.clone().setDisplayValueTextStyle(CUSTOM_TEXT_STYLE));
}
widget.addTrack(WellLogTrackType.IndexTrack).setWidth(70);
widget.addTrack(WellLogTrackType.LinearTrack).addChild([
new LogCurve().setId("CALI").setLineStyle(KnownColors.Orange)
]);
widget.addTrack(WellLogTrackType.LinearTrack).addChild([
new LogCurve().setId("GR").setLineStyle(KnownColors.Green)
]);
widget.addTrack(WellLogTrackType.IndexTrack).setWidth(70);
from(widget).where((node) => node instanceof LogTrack).select((track) => {
widget.setTrackOptions(track, {
"axis": {
"locale": "en",
"name": this._useDateTime ? "Time" : "Depth"
}
});
});
from(widget).where((node) => node instanceof LogAxis).select((axis) => {
const tickGenerator = axis.getTickGenerator();
tickGenerator.setLabelStyle("edge", CUSTOM_TEXT_STYLE);
tickGenerator.setLabelStyle("major", CUSTOM_TEXT_STYLE);
});
return widget;
}
updateValuesOfWidget(time, locale, caliName, grName) {
from(this._widget).where((node) => node instanceof LogTrack).select((track) => {
this._widget.setTrackOptions(track, {
"axis": {
"locale": locale,
"name": time
}
});
});
from(this._widget).where((node) => node instanceof LogCurve).select((node) => {
if (node.getId() === "CALI") {
node.setName(caliName);
} else {
node.setName(grName);
}
});
}
parseScale(pdfPrintSettings) {
if (pdfPrintSettings["scale"] == null) {
return void 0;
}
const scaleParts = pdfPrintSettings["scale"].split(":");
if (this._useDateTime) {
switch (scaleParts[1]) {
case "10min":
return 10;
case "30min":
return 30;
case "1h":
return 1 * 60;
case "5h":
return 5 * 60;
case "10h":
return 10 * 60;
case "1d":
return 24 * 60;
case "1w":
return 7 * 24 * 60;
case "2w":
return 14 * 24 * 60;
case "4w":
return 4 * 7 * 24 * 60;
}
} else {
switch (scaleParts[1]) {
case "10m":
return 10;
case "50m":
return 50;
case "100m":
return 100;
case "1km":
return 1e3;
case "10km":
return 1e4;
}
}
return void 0;
}
createExportToPdfOptions(options) {
const pdfPrintSettings = options["printSettings"];
const scale = this.parseScale(pdfPrintSettings);
const limits = this._widget.getDepthLimits();
return {
"output": "Widget",
"printsettings": pdfPrintSettings,
"deviceunit": "cm",
"indexunit": this._useDateTime ? "min" : "m",
"scale": scale,
"limits": {
"start": limits.getLow(),
"end": limits.getHigh()
},
"progress": options["progress"]
};
}
exportWidgetToPdfWithCustomFont(pdfPrintSettings) {
const options = this.createExportToPdfOptions(pdfPrintSettings);
return new Promise((resolve, reject) => {
if (this._base64Font.length > 0) {
resolve();
return;
}
httpClient.get(this._curFont, {
"responsetype": "blob"
}).then((result) => {
const reader = new FileReader();
reader.readAsDataURL(result["data"]);
reader.onloadend = () => {
this._base64Font = reader.result.split(",")[1];
resolve();
};
reader.onerror = reject;
}, reject);
}).then(() => {
options["embededfonts"] = [{
subtype: FontSubType.TrueType,
fontname: "roboto",
fontweight: "normal",
fontstyle: "normal",
fontbase64encodedfile: this._base64Font,
encoding: "Identity-H"
}];
return this._widget.exportToPdf(options);
});
}
setFont(value) {
if (this._curFont === value)
return;
this._curFont = value;
this._base64Font = "";
}
getPlot() {
return this._plot;
}
}
function createScene(canvas) {
return new Localization(canvas, true);
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));