{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Tools","description":"Accelerate E&P application development and protect your innovation by consuming our Data and Domain APIs / Platform APIs.","lang":"en-US","meta":[{"name":"robots","content":"noindex"}],"llmstxt":{"hide":true,"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"tools","__idx":0},"children":["Tools"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Seismic widget provides many tools for zooming, panning, cursor tracking, scrolling, etc. These tools are available by default. This tutorial shows how to modify and activate a few of these tools."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For this tutorial, the base class of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SeismicWidget"]}," which is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SeismicViewWidget"]}," is used. This class shows how to access the cross hair tool and modify its settings to display a tooltip. Then, it demonstrates how to activate the rubberband zoom (zoom to a specific region) and other zoom options, including panning. Please refer to the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Tools/BasicTools/basicTools"},"children":["Basic Tools"]}," tutorial in CarnacJS for more details on the basic concepts of tools."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customize-crosshair-tool","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Seismic/Tools/tools#CrossHair"},"children":["#"]}," Customize CrossHair Tool"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The code below shows how to access the default cross hair tool and customize it to add a tooltip and modify the cross hair line style and color."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"activate-zoom-options","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Seismic/Tools/tools#RubberBand"},"children":["#"]}," Activate Zoom Options"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The seismic widget provides various zoom tools, such as 'zoom reset', 'zoom out', 'zoom in' and 'zoom to a specific region'. The code below shows how to activate the rubberband zoom on a seismic image and then reset the zoom. These options are activated on 'onclick' action of the button."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"create-floating-toolbar","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Seismic/Tools/tools#Toolbar"},"children":["#"]}," Create Floating Toolbar"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Interaction buttons can be added to a floating toolbar, which is displayed on the canvas itself."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"activate-panning","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Seismic/Tools/tools#Panning"},"children":["#"]}," Activate Panning"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The code below shows how to activate the panning tool in seismic widget. Please note that in this example, when the rubberband zoom tool is off, the user can pan the seismic image inside the widget."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customize-floating-colorbar","__idx":5},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Seismic/Tools/tools#FloatingColorbar"},"children":["#"]}," Customize Floating Colorbar"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The code below shows how to customize floating colorbar. To activate floating color-bar, drag color-bar from left annotation to the center."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"result","__idx":6},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Seismic/Tools/tools#Result"},"children":["#"]}," Result"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Events as rubberBandEvents } from \"@int/geotoolkit/controls/tools/RubberBand.ts\";\nimport { SeismicWidget } from \"@int/geotoolkit/seismic/widgets/SeismicWidget.ts\";\nimport { ManipulatorType } from \"@int/geotoolkit/seismic/widgets/SeismicViewWidget.ts\";\nimport { CrossHair, Events as CrossHairEvents, LabelDisplayMode } from \"@int/geotoolkit/controls/tools/CrossHair.ts\";\nimport { NormalizationType } from \"@int/geotoolkit/seismic/pipeline/NormalizationType.ts\";\nimport { SeismicColors } from \"@int/geotoolkit/seismic/util/SeismicColors.ts\";\nimport { SeismicPipeline } from \"@int/geotoolkit/seismic/pipeline/SeismicPipeline.ts\";\nimport { FieldDesc } from \"@int/geotoolkit/seismic/data/FieldDesc.ts\";\nimport { MemoryReader } from \"@int/geotoolkit/seismic/data/MemoryReader.ts\";\nimport { AutoNumberFormat } from \"@int/geotoolkit/util/AutoNumberFormat.ts\";\nimport { Label } from \"@int/geotoolkit/controls/toolbar/Label.ts\";\nimport { AnnotationLocation } from \"@int/geotoolkit/layout/AnnotationLocation.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { Orientation } from \"@int/geotoolkit/util/Orientation.ts\";\nimport { Button } from \"@int/geotoolkit/controls/toolbar/Button.ts\";\nimport { Toolbar } from \"@int/geotoolkit/controls/toolbar/Toolbar.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nconst DEFAULT_DARK_COLOR = \"#757575\";\nconst DEFAULT_LIGHT_COLOR = \"#f5f5f5\";\nconst DEFAULT_SHADOW_COLOR = \"rgba(60, 60, 60, 0.5)\";\nconst DEFAULT_SHADOW_STYLE = {\n  \"enable\": true,\n  \"color\": DEFAULT_SHADOW_COLOR,\n  \"blur\": 6,\n  \"offsetx\": 0,\n  \"offsety\": 4\n};\nlet STATUS_BAR = null;\nfunction createScene(canvas, cb) {\n  const widget = seismicToolsDisplay();\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  widget.fitToHeight();\n  new Toolbar({\n    \"size\": 30,\n    \"fontsize\": 13,\n    \"offset\": 10,\n    \"border\": \"1px gray solid\",\n    \"gap\": 0,\n    \"buttons\": [\n      new Button({\n        \"icon\": \"fas fa-home\",\n        \"title\": \"Restore zoom\",\n        \"action\": function(tools, enabled) {\n          widget.resetZoom();\n        }\n      }),\n      \"-\",\n      \"zoom-in\",\n      \"zoom-out\"\n    ],\n    \"orientation\": Orientation.Vertical,\n    \"alignment\": AnchorType.RightTop,\n    \"tools\": plot.getTool(),\n    \"node\": widget.getAnnotation(AnnotationLocation.Center)\n  });\n  let sampleStatus, valueStatus, traceStatus;\n  STATUS_BAR = new Toolbar({\n    \"size\": 30,\n    \"fontsize\": 15,\n    \"offset\": 10,\n    \"border\": \"1px solid black\",\n    \"classname\": \"cs_status_bar\",\n    \"gap\": 0,\n    \"buttons\": [\n      sampleStatus = new Label({\n        \"text\": \"Depth\",\n        \"title\": \"Depth value\",\n        \"init\": function() {\n          this.getElement().style = \"font-size: 0.8em; color: black;\";\n        }\n      }).setSize(70, 20),\n      \"-\",\n      traceStatus = new Label({\n        \"padding\": 5,\n        \"text\": \"Trace\",\n        \"title\": \"Trace index\",\n        \"init\": function() {\n          this.getElement().style = \"font-size: 0.8em; color: black;\";\n        }\n      }).setSize(70, 20),\n      valueStatus = new Label({\n        \"padding\": 15,\n        \"text\": \"Value\",\n        \"title\": \"Sample value\",\n        \"init\": function() {\n          this.getElement().style = \"font-size: 0.8em; color: black;\";\n        }\n      }).setSize(120, 20)\n    ],\n    \"orientation\": Orientation.Horizontal,\n    \"alignment\": AnchorType.RightBottom,\n    \"tools\": plot.getTool(),\n    \"node\": widget.getAnnotation(AnnotationLocation.Center)\n  });\n  new Toolbar({\n    \"size\": 30,\n    \"fontsize\": 20,\n    \"offset\": 10,\n    \"border\": \"1px solid black\",\n    \"gap\": 0,\n    \"buttons\": [\n      new Label({\n        \"text\": \"WSW\",\n        \"title\": \"Orientation\",\n        \"init\": function() {\n          this.getElement().style = \"font-size: 0.8em; color: black;\";\n        }\n      })\n    ],\n    \"orientation\": Orientation.Vertical,\n    \"alignment\": AnchorType.LeftTop,\n    \"tools\": plot.getTool(),\n    \"node\": widget.getAnnotation(AnnotationLocation.Center)\n  });\n  widget.setOptions({\n    \"statusbar\": {\n      \"visible\": false,\n      \"sections\": {\n        \"info\": function(widget2, x, y, sample) {\n          const autoFormat = new AutoNumberFormat();\n          let depthValue = Math.round(y * 100) / 100;\n          let sampleValue;\n          let traceNumber;\n          if (sample) {\n            traceNumber = sample[\"traceNumber\"] + 1;\n            sampleValue = Math.round(sample[\"sampleValue\"] * 1e4) / 1e4;\n            depthValue = Math.round(sample[\"location\"][\"y\"] * 100) / 100;\n          }\n          sampleStatus.setText(\" Depth: \" + (depthValue != null ? autoFormat.format(depthValue) : \"\"));\n          valueStatus.setText(\" Value: \" + (sampleValue != null ? autoFormat.format(sampleValue) : \"\"));\n          traceStatus.setText(\" Trace: \" + (traceNumber != null ? autoFormat.format(traceNumber) : \"\"));\n          return {\n            \"samples\": \" Time: \" + autoFormat.format(depthValue),\n            \"value\": \" Values: \" + sampleValue,\n            \"traces\": \" Trace: \" + traceNumber\n          };\n        }\n      }\n    }\n  });\n  widget.getToolByName(\"rubberband\").on(rubberBandEvents.onZoomEnd, cb);\n  return plot;\n}\nconst createSeismicReader = function() {\n  const sampleRate = 1;\n  const sampleCount = 350;\n  const traceCount = 500;\n  const reader = new MemoryReader({\n    \"numberoftraces\": traceCount,\n    \"numberofsamples\": sampleCount,\n    \"samplerate\": sampleRate\n  }).setTraceProcessor({\n    \"getTraceData\": function(reader2, trace, traceId) {\n      const thickness = 30;\n      const start = 80;\n      for (let i = start; i < start + thickness; i++) {\n        trace[i + Math.round(thickness * Math.cos(traceId / 64))] = Math.cos(i / 2);\n      }\n    },\n    \"getDataStatistics\": function() {\n      return {\n        \"average\": 0,\n        \"min\": -1,\n        \"max\": 1,\n        \"rms\": Math.sqrt(2) / 2\n      };\n    },\n    \"getTraceHeaderFields\": function() {\n      return [new FieldDesc(0, \"TraceId\")];\n    },\n    \"getTraceHeader\": function(reader2, header, headerData, traceId) {\n      const data = headerData;\n      data[0] = traceId;\n    }\n  });\n  return reader;\n};\nconst createPipeline = function(reader) {\n  const pipeline = new SeismicPipeline({\n    \"name\": \"MemorySeismic\",\n    \"reader\": reader,\n    \"statistics\": reader.getStatistics()\n  });\n  const colorProvider = SeismicColors.getDefault();\n  pipeline.setOptions({\n    \"colors\": {\n      \"colormap\": colorProvider.createNamedColorMap(\"RedWhiteBlue\")\n    },\n    \"normalization\": {\n      \"type\": NormalizationType.Limits,\n      \"limits\": {\n        \"min\": -1,\n        \"max\": 1\n      }\n    },\n    \"plot\": {\n      \"type\": {\n        \"wiggle\": true,\n        \"interpolateddensity\": true\n      },\n      \"decimationspacing\": 5\n    }\n  });\n  return pipeline;\n};\nfunction seismicToolsDisplay() {\n  const seismicReader = createSeismicReader();\n  const pipeline = createPipeline(seismicReader);\n  const widget = createWidget(pipeline);\n  customizeCrossHairTool(widget);\n  return widget;\n}\nfunction customizeCrossHairTool(widget) {\n  const crossHair = widget.getToolByType(CrossHair);\n  const manipulatorLayer = crossHair.getManipulatorLayer();\n  const crossHairSettings = {\n    \"layer\": manipulatorLayer,\n    \"center\": {\n      \"displaymode\": LabelDisplayMode.DivElement,\n      \"tooltip\": {\n        \"cssclasses\": \"cg-tooltip cg-tooltip-center\",\n        \"offsetx\": 5,\n        \"offsety\": 5\n      },\n      \"visible\": true,\n      \"z-index\": 999,\n      \"textstyle\": {\n        \"font\": \"12px sans-serif\"\n      },\n      \"alignment\": AnchorType.LeftBottom,\n      \"fillstyle\": {\n        \"color\": DEFAULT_LIGHT_COLOR,\n        \"shadow\": DEFAULT_SHADOW_STYLE\n      },\n      \"linestyle\": {\n        \"color\": DEFAULT_DARK_COLOR,\n        \"pixelsnapmode\": true\n      },\n      \"offset\": 4,\n      \"paddingstyle\": 6,\n      \"radius\": 4,\n      \"textconverter\": (x, y) => \"TraceId: \" + Math.round(x) + \"<br>Depth: \" + Math.round(y) + \"ft\"\n    },\n    \"north\": {\n      \"displaymode\": LabelDisplayMode.DivElement,\n      \"visible\": true,\n      \"z-index\": 999,\n      \"textstyle\": {\n        \"font\": \"12px sans-serif\"\n      },\n      \"alignment\": AnchorType.BottomCenter,\n      \"fillstyle\": {\n        \"color\": DEFAULT_LIGHT_COLOR,\n        \"shadow\": DEFAULT_SHADOW_STYLE\n      },\n      \"linestyle\": {\n        \"color\": DEFAULT_DARK_COLOR,\n        \"pixelsnapmode\": true\n      },\n      \"offset\": 4,\n      \"paddingstyle\": 6,\n      \"radius\": 4,\n      \"textconverter\": (x, y) => \"TraceId: \" + Math.round(x)\n    },\n    \"south\": {\n      \"visible\": false\n    },\n    \"west\": {\n      \"displaymode\": LabelDisplayMode.DivElement,\n      \"visible\": true,\n      \"z-index\": 999,\n      \"textstyle\": {\n        \"font\": \"12px sans-serif\"\n      },\n      \"alignment\": AnchorType.RightCenter,\n      \"fillstyle\": {\n        \"color\": DEFAULT_LIGHT_COLOR,\n        \"shadow\": DEFAULT_SHADOW_STYLE\n      },\n      \"linestyle\": {\n        \"color\": DEFAULT_DARK_COLOR,\n        \"pixelsnapmode\": true\n      },\n      \"offset\": 4,\n      \"paddingstyle\": 6,\n      \"radius\": 4,\n      \"textconverter\": (x, y) => \"Depth: \" + Math.round(y) + \"ft\"\n    },\n    \"east\": {\n      \"visible\": false\n    },\n    \"linestyle\": {\n      \"color\": \"blue\",\n      \"width\": 2,\n      \"pattern\": [6, 4],\n      \"pixelsnapmode\": true\n    }\n  };\n  crossHair.setProperties(crossHairSettings);\n  let timerInterval = null;\n  crossHair.on(CrossHairEvents.onPositionChanged, (evt, sender, eventArgs) => {\n    if (timerInterval != null && isNaN(eventArgs.getPosition().getX())) {\n      clearTimeout(timerInterval);\n      timerInterval = null;\n      const plotSceneBounds = widget.getModel().getVisibleDeviceLimits();\n      if (plotSceneBounds.contains(eventArgs.getPlotPoint()) === false) {\n        STATUS_BAR.setVisible(false);\n      }\n      return;\n    }\n    STATUS_BAR.setVisible(true);\n    STATUS_BAR.getElement().style.transition = \"opacity 0s linear 0s\";\n    STATUS_BAR.getElement().style.opacity = \"1\";\n    if (timerInterval != null) {\n      clearTimeout(timerInterval);\n      timerInterval = null;\n    }\n    timerInterval = window.setTimeout(() => {\n      clearTimeout(timerInterval);\n      timerInterval = null;\n      STATUS_BAR.getElement().style.transition = \"opacity 1s linear 1s\";\n      STATUS_BAR.getElement().style.opacity = \"0\";\n    }, 200);\n  });\n}\nfunction activateRubberBand(plot) {\n  const widget = plot.getRoot();\n  widget.setManipulatorType(ManipulatorType.RubberBand);\n}\nfunction resetZoom(plot) {\n  const widget = plot.getRoot();\n  widget.resetZoom();\n  widget.setManipulatorType(ManipulatorType.Panning);\n}\nfunction createWidget(pipeline) {\n  return new SeismicWidget({\n    \"pipeline\": pipeline,\n    \"colorbar\": {\n      \"axis\": {\n        \"tickgenerator\": {\n          \"edge\": {\n            \"tickvisible\": false,\n            \"labelvisible\": false\n          }\n        }\n      }\n    },\n    \"layouttype\": \"inside\",\n    \"statusbar\": {\n      \"visible\": false\n    },\n    \"tools\": {\n      \"colorbar\": {\n        \"enabled\": true,\n        \"radius\": 0,\n        \"linestyle\": {\n          \"color\": \"rgba(80, 80, 80, 0.5)\",\n          \"pixelsnapmode\": true,\n          \"width\": 1\n        },\n        \"fillstyle\": {\n          \"color\": \"white\",\n          \"shadow\": DEFAULT_SHADOW_STYLE\n        },\n        \"textstyle\": {\n          \"font\": \"12px sans-serif\",\n          \"color\": \"rgba(80, 80, 80, 1)\"\n        }\n      }\n    }\n  });\n}\nexport { activateRubberBand, createScene, resetZoom };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'), () => {\n            this.setRubberBandEnabled(false);\n        });\n\n","lang":"ts"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Seismic/Tools/tools?section=Result&extract=true","width":"100%","height":"540.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Tools","id":"tools","depth":1},{"value":"Customize CrossHair Tool","id":"customize-crosshair-tool","depth":3},{"value":"Activate Zoom Options","id":"activate-zoom-options","depth":3},{"value":"Create Floating Toolbar","id":"create-floating-toolbar","depth":3},{"value":"Activate Panning","id":"activate-panning","depth":3},{"value":"Customize Floating Colorbar","id":"customize-floating-colorbar","depth":3},{"value":"Result","id":"result","depth":3}],"frontmatter":{"title":"Tools","seo":{"title":"Tools"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/seismic/tools","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}