This WellLog CSS Customization tutorial demonstrates how to apply CSS (Cascading Style Sheet) rules to the WellLog widget in order to customize the WellLog visualization. The CSS properties section under each class documentation lists all the properties that can be used to customize.
# Using CSS Styles
The following example shows how to customize the WellLog Widget using CSS styles.
import { HeaderType as LogAxisVisualHeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { TrackType as WellLogTrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { configureHeaders, createCurve, createTestData } from "/src/code/WellLog/AdditionalFunctionality/CssCustomization/cssCustomizationCommon.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createWidgetWithCss() {
const widget = createWellLogWidget().setAxisHeaderType(LogAxisVisualHeaderType.Simple);
configureHeaders(widget);
const css = `
.geotoolkit.axis.Axis[cssclass="indexTrack"] {
tickgenerator-labelformat-type : number;
tickgenerator-labelformat-grouplength : 0;
}
*[cssclass="horizontalGrid"] {
tickgenerator-major-tickstyle-color: #5b9bd5;
tickgenerator-minor-tickstyle-color: #5b9bd5;
}
*[cssclass="verticalGrid"] {
linestyle: #5b9bd5;
}
*[cssclass="indexTrack"] {
tickgenerator-major-labelstyle-color: #5b9bd5;
tickgenerator-edge-labelstyle-color: #5b9bd5;
}
.geotoolkit.welllog.header.AdaptiveLogCurveVisualHeader {
element-scalefrom-radius : 2;
element-scalefrom-linestyle: #DFE0E3;
element-scalefrom-fillstyle: #DFE0E319;
element-scalefrom-paddingstyle : 2px;
element-tracking-radius : 2;
element-tracking-linestyle: #DFE0E3;
element-tracking-fillstyle: #DFE0E319;
element-tracking-paddingstyle : 2px;
element-scaleto-radius : 2;
element-scaleto-linestyle: #DFE0E3;
element-scaleto-fillstyle: #DFE0E319;
element-scaleto-paddingstyle : 2px;
}
`;
widget.setCss(css);
widget.addTrack(WellLogTrackType.IndexTrack);
widget.addTrack(WellLogTrackType.LinearTrack).addChild([
createCurve(createTestData(4500, 10, "GR")).setLineStyle(KnownColors.Green),
createCurve(createTestData(4500, 10, "CALI")).setLineStyle(KnownColors.Orange)
]);
return widget;
}
function createScene(canvas) {
const widget = createWidgetWithCss();
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
widget.setHeaderHeight("auto");
return plot;
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Using CSS Styles with Custom Headers
This WellLog CSS Customization tutorial demonstrates how to customize headers for the WellLog widget and apply CSS rules to customize header display.
import { ButtonManipulator } from "/src/code/WellLog/AdditionalFunctionality/CssCustomization/buttonManipulator.ts";
import { TrackType as WellLogTrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { AdaptiveLogCurveVisualHeader, Elements } from "@int/geotoolkit/welllog/header/AdaptiveLogCurveVisualHeader.ts";
import { LogCurve } from "@int/geotoolkit/welllog/LogCurve.ts";
import { LogAxis } from "@int/geotoolkit/welllog/LogAxis.ts";
import { CustomLogAxisVisualHeader } from "/src/code/WellLog/AdditionalFunctionality/CssCustomization/customLogAxisVisualHeader.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Sections } from "@int/geotoolkit/welllog/header/AdaptiveLogVisualHeader.ts";
import { createCurve, createTestData } from "/src/code/WellLog/AdditionalFunctionality/CssCustomization/cssCustomizationCommon.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createCustomWidget() {
const widget = createWellLogWidget({
"horizontalscrollable": false,
"verticalscrollable": true,
"highlight": {
"linestyle": {
"color": "#FFFFFF",
"pixelsnapmode": true
},
"fillstyle": "rgba(117, 117,117, 0.2)"
},
"footer": {
"visible": true
},
"trackcontainer": {
"border": {
"visible": false,
"color": "lightgray"
}
},
"border": {
"visible": false,
"color": "lightgray"
}
});
configureCustomHeaders(widget);
widget.addTrack(WellLogTrackType.IndexTrack);
widget.addTrack(WellLogTrackType.LinearTrack).addChild([
createCurve(createTestData(4500, 10, "GR")).setLineStyle("#81D4FA"),
createCurve(createTestData(4500, 10, "CALI")).setLineStyle("#FFF176")
]);
widget.addTrack(WellLogTrackType.LinearTrack).addChild([
createCurve(createTestData(4500, 10, "RHOB")).setLineStyle("#FFFFFF")
]);
widget.getToolByName("cross-hair").setProperties({
"horizontal": {
"color": "#FFFFFF",
"pattern": [4, 2]
}
});
widget.setHeaderHeight("auto").setFooterHeight("auto");
applyBlackThemeCSS(widget);
return widget;
}
function applyBlackThemeCSS(widget) {
widget.setCss(
generateBlackThemeCSS()
);
}
function generateBlackThemeCSS() {
const DEFAULT_WLW_CLASSES = `
*[cssclass="horizontalGrid"] {
tickgenerator-major-tickstyle-color: #FFD180;
tickgenerator-minor-tickstyle-color: #EFEFEF;
}
*[cssclass="verticalGrid"] {
linestyle-color: #EFEFEF;
}
`;
const DEFAULT_CARNAC_CLASSES = `
* {
textstyle-font : 11px Roboto;
textstyle-color : #FFFFFF;
}
`;
const DEFAULT_CONTAINERS_CLASS = `
*[cssclass="headerPlotControl"] {
fillstyle: #303030;
}
*[cssclass="footerPlotControl"] {
fillstyle: #303030;
}
*[cssclass="trackPlotControl"] {
fillstyle: #303030;
}
`;
const DEFAULT_INDEXTRACK_HEADER = `
.geotoolkit.welllog.header {
displayvaluetextstyle-color: #FFFFFF;
displayvaluetextstyle-font: bold 12px Roboto;
fillStyle: #303030;
borderlinestyle: #303030;
}
.CustomLogAxisVisualHeader {
displayvaluetextstyle-color: #FFFFFF;
displayvaluetextstyle-font: bold 12px Roboto;
fillStyle: #303030;
borderlinestyle: #303030;
}
.CustomLogAxisVisualHeader[cssclass="FooterAxis"] {
valuetypestyle: text;
headertype: simple;
}
`;
const DEFAULT_LOGCURVE_ADAPTIVE_HEADER = `
.geotoolkit.welllog.header.AdaptiveLogCurveVisualHeader {
element-tracking-textstyle-font : bold 14px Roboto;
element-tracking-textstyle-color : #FFFFFF;
fillStyle : #303030;
textstyle-color : #FFFFFF;
textstyle-font : 12px Roboto;
}
`;
const EXAMPLE_BY_NAME = `
*[name="Track # 2"] {
backgroundcolor-color : #5D4037;
}
`;
const EXAMPLE_BY_ID = `
*[id="AXIS"] {
tickgenerator-major-tickstyle-color: #FFD180;
tickgenerator-major-tickstyle-width: 2;
tickgenerator-major-labelstyle-color: #EFEFEF;
tickgenerator-major-labelstyle-font: 12px Roboto;
tickgenerator-minor-tickstyle-color: #EFEFEF;
tickgenerator-edge-tickstyle-color: #EFEFEF;
tickgenerator-edge-labelstyle-color: #EFEFEF;
tickgenerator-edge-labelstyle-font: 12px Roboto;
}
`;
const SCROLL_BAR_CSSCLASS = `
*[cssclass="headerverticalscroll"] {
fillstyle: darkgray;
caretfillstyle: #303030;
arrowlinestyle: black;
}
*[cssclass="trackhorizontalscroll"] {
fillstyle: darkgray;
caretfillstyle: #303030;
arrowlinestyle: black;
}
*[cssclass="trackverticalscroll"] {
fillstyle: darkgray;
caretfillstyle: #303030;
arrowlinestyle: black;
}
*[cssclass="footerverticalscroll"] {
fillstyle: darkgray;
caretfillstyle: #303030;
arrowlinestyle: black;
}
`;
const SPLITTER_CSSCLASS = `
*[cssclass="containersplitter"] {
fillStyle: white;
linestyle: white;
}
*[cssclass="tracksplitter"] {
fillStyle: white;
linestyle: white;
}
`;
return [
DEFAULT_WLW_CLASSES,
DEFAULT_CARNAC_CLASSES,
DEFAULT_CONTAINERS_CLASS,
DEFAULT_INDEXTRACK_HEADER,
DEFAULT_LOGCURVE_ADAPTIVE_HEADER,
EXAMPLE_BY_NAME,
EXAMPLE_BY_ID,
SCROLL_BAR_CSSCLASS,
SPLITTER_CSSCLASS
].join("");
}
function configureCustomHeaders(widget) {
const header = new AdaptiveLogCurveVisualHeader().setElement({
[Elements.ScaleTo]: { "section": Sections.Top },
[Elements.ScaleFrom]: { "section": Sections.Top },
[Elements.Name]: { "section": Sections.Top },
[Elements.Unit]: { "section": Sections.Bottom },
[Elements.Tracking]: { "section": Sections.Bottom }
});
widget.getHeaderContainer().getHeaderProvider().registerHeaderProvider(LogCurve.getClassName(), header).registerHeaderProvider(LogAxis.getClassName(), new CustomLogAxisVisualHeader());
widget.getFooterContainer().getHeaderProvider().registerHeaderProvider(LogCurve.getClassName(), header).registerHeaderProvider(LogAxis.getClassName(), new CustomLogAxisVisualHeader().setCssClass("FooterAxis"));
}
function createScene(canvas, tooltip) {
const widget = createCustomWidget();
widget.getTool().insert(0, new ButtonManipulator(widget, tooltip));
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'), document.querySelector('[ref="tooltip"]'));
# Advanced Styling
The following example shows how to apply complex customizations like the CSS pseudo-class hover and selection styles. Please note that it is necessary to activate the DOM support tool for using hover and highlight.
import { HeaderType as LogAxisVisualHeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { TrackType as WellLogTrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { PatternFactory } from "@int/geotoolkit/attributes/PatternFactory.ts";
import { configureHeaders, createCurve, createTestData } from "/src/code/WellLog/AdditionalFunctionality/CssCustomization/cssCustomizationCommon.ts";
import modernPng from "/src/assets/images/modern.png?import";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createModernWidget() {
const widget = createWellLogWidget({
"viewcache": false,
"indent": 10,
"highlight": {
"cssclass": "highlight"
}
}).setAxisHeaderType(LogAxisVisualHeaderType.Simple);
configureHeaders(widget);
applyModernThemeCSS(widget);
widget.addTrack(WellLogTrackType.IndexTrack);
widget.addTrack(WellLogTrackType.LinearTrack).setWidth(150).addChild([
createCurve(createTestData(4500, 10, "GR")).setLineStyle("#81D4FA"),
createCurve(createTestData(4500, 10, "CALI")).setLineStyle("#FFF176")
]);
widget.addTrack(WellLogTrackType.LinearTrack).setWidth(150).addChild([
createCurve(createTestData(4500, 10, "RHOB")).setLineStyle("#18CEDB")
]);
widget.addTrack(WellLogTrackType.AnnotationTrack).setSelectable(false).setWidth(20).setFillStyle(null).getBorder().setLineStyle(null);
widget.addTrack(WellLogTrackType.LinearTrack).setWidth(150).addChild([
createCurve(createTestData(4500, 10, "SP")).setLineStyle("#F4F133")
]);
widget.addTrack(WellLogTrackType.IndexTrack);
widget.getToolByName("cross-hair").setProperties({
"horizontal": {
"color": "#FFFFFF",
"pattern": [4, 2],
"pixelsnapmode": true
}
});
widget.getToolByName("splitter").setEnabled(false);
widget.getToolByName("horizontal-splitter").setEnabled(false);
widget.setHeaderHeight("auto");
return widget;
}
function applyModernThemeCSS(widget) {
const css = `
* {
textstyle-font : 10px Roboto;
textstyle-color : #C8C8C8;
}
.geotoolkit.welllog.header.AdaptiveLogCurveVisualHeader {
element-tracking-textstyle-font : bold 10px Roboto;
element-tracking-textstyle-color : #C8C8C8;
}
.geotoolkit.welllog.header.LogTrackHeader {
borderfillstyle-style: lineargradient;
borderfillstyle-unittype: absoluteCoordinates;
borderfillstyle-startpoint-x: 0;
borderfillstyle-startpoint-y: 0;
borderfillstyle-startcolor: rgba(39, 42, 136, 1);
borderfillstyle-endpoint-x: 0;
borderfillstyle-endpoint-y: 500;
borderfillstyle-endcolor: rgba(39, 42, 136, 0);
borderlinestyle: null;
border-visible: true;
border-left: true;
border-top: true;
border-right: true;
border-bottom: false;
}
.geotoolkit.welllog.LogTrack {
backgroundcolor-style: lineargradient;
backgroundcolor-unittype: absoluteCoordinates;
backgroundcolor-startpoint-x: 0;
backgroundcolor-startpoint-y: 0;
backgroundcolor-startcolor: rgba(39, 42, 136, 1);
backgroundcolor-endpoint-x: 0;
backgroundcolor-endpoint-y: 500;
backgroundcolor-endcolor: rgba(39, 42, 136, 0.1);
clipping : true;
borderstrategy: top;
border-visible : true;
border-borderstyle: VisibleBounds;
border-linestyle: 1px #C8C8C8;
border-left : true;
border-right : true;
border-top : false;
border-bottom : true;
}
.geotoolkit.welllog.LogAxis {
tickgenerator-major-labelstyle-color: #C8C8C8;
tickgenerator-major-labelstyle-font: 10px Roboto;
tickgenerator-major-tickstyle-color: #C8C8C8;
tickgenerator-minor-tickstyle-color: #646464;
tickgenerator-edge-labelstyle-color: #C8C8C8;
tickgenerator-edge-labelstyle-font: 10px Roboto;
tickgenerator-edge-tickstyle-color: #EFFFFF;
}
*[cssclass="horizontalGrid"] {
tickgenerator-major-tickstyle-color: #C8C8C8;
tickgenerator-minor-tickstyle-color: #646464;
}
*[cssclass="verticalGrid"] {
linestyle: 1px #646464;
}
.geotoolkit.welllog.LogCurve:hover {
linestyle-width: 2;
linestyle-shadow-enable: true;
linestyle-shadow-blur: 5;
linestyle-shadow-offsetx: 0;
linestyle-shadow-offsety: 0;
}
.geotoolkit.welllog.LogCurve:highlight {
linestyle-width: 3;
linestyle-shadow-enable: true;
linestyle-shadow-blur: 10;
linestyle-shadow-offsetx: 0;
linestyle-shadow-offsety: 0;
}
.geotoolkit.welllog.LogTrack:hover {
linestyle-color: #FFD800;
linestyle-width: 2;
linestyle-shadow-enable: true;
linestyle-shadow-blur: 5;
linestyle-shadow-offsetx: 0;
linestyle-shadow-offsety: 0;
}
.geotoolkit.welllog.LogTrack:highlight {
linestyle-color: #FFD800;
linestyle-width: 3;
linestyle-shadow-enable: true;
linestyle-shadow-blur: 10;
linestyle-shadow-offsetx: 0;
linestyle-shadow-offsety: 0;
}
`;
widget.setCss(css);
}
function addWidgetToCanvasWithBackGround(canvas, widget) {
return new Plot({
"canvaselement": canvas,
"root": widget.setFillStyle({
"pattern": PatternFactory.getInstance().createPattern(modernPng)
}).setPaddingStyle(10)
});
}
function createScene(canvas) {
const widget = createModernWidget();
return addWidgetToCanvasWithBackGround(canvas, widget);
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));