Color Bars

This tutorial demonstrates how a Color Bar can be used to customize the display. A Color Bar displays a ColorProvider with reference to the values it can support. This tutorial will use the following Color Provider for all tutorials:

import { DefaultColorProvider } from "@int/geotoolkit/util/DefaultColorProvider.ts";
import { KnownColors as KnownColorsProvider } from "@int/geotoolkit/util/ColorProvider.ts";
import { KnownColors as KnownColorsColorUtil } from "@int/geotoolkit/util/ColorUtil.ts";
function createColorProvider() {
  const colorprovider = new DefaultColorProvider({
    "values": [-2, -1, 0, 1, 2],
    "colors": [
      KnownColorsColorUtil.Orange,
      KnownColorsColorUtil.Yellow,
      KnownColorsColorUtil.Blue,
      KnownColorsColorUtil.Green,
      KnownColorsColorUtil.Gray
    ]
  });
  colorprovider.setNamedColor(KnownColorsProvider.NegativeInfinity, KnownColorsColorUtil.Orange);
  colorprovider.setNamedColor(KnownColorsProvider.NaN, "black");
  colorprovider.setNamedColor(KnownColorsProvider.PositiveInfinity, KnownColorsColorUtil.Gray);
  return colorprovider;
}
export { createColorProvider };

createScene();

# Base Color Box

Below is a basic Color Box.

import { ColorBar } from "@int/geotoolkit/controls/shapes/ColorBar.ts";
import { ColorBarLocation } from "@int/geotoolkit/controls/shapes/ColorBarLocation.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { createColorProvider } from "/src/code/Carnac/Utils/ColorBars/overview.ts";
function createScene(canvas) {
  const colorBar = new ColorBar({
    "location": ColorBarLocation.South,
    "colorprovider": createColorProvider(),
    "title": {
      "text": "Demo Color Bar"
    }
  }).setBounds(new Rect(40, 40, 310, 160));
  return new Plot({
    "canvaselement": canvas,
    "root": new Group().addChild(colorBar)
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Modifying Color Bar layout

Below is a modified Color Bar layout.

import { ColorBar } from "@int/geotoolkit/controls/shapes/ColorBar.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { createColorProvider } from "/src/code/Carnac/Utils/ColorBars/overview.ts";
function createScene(canvas) {
  const colorBar = new ColorBar({
    "colorprovider": createColorProvider(),
    "title": {
      "text": "Demo Color Bar",
      "size": 20
    },
    "colorbox": {
      "size": 40
    },
    "axis": {
      "size": 30
    }
  }).setBounds(new Rect(105, 20, 250, 180));
  return new Plot({
    "canvaselement": canvas,
    "root": new Group().addChild(colorBar)
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Showing Known Colors

Below is a Color Bar showing known colors, as well as Nan, and positive and negative infinity.

import { ColorBar } from "@int/geotoolkit/controls/shapes/ColorBar.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { createColorProvider } from "/src/code/Carnac/Utils/ColorBars/overview.ts";
function createScene(canvas) {
  const colorBar = new ColorBar({
    "colorprovider": createColorProvider(),
    "title": {
      "text": "Demo Color Bar",
      "size": 20
    },
    "colorbox": {
      "size": 40
    },
    "axis": {
      "size": 30
    },
    "namedcolors": {
      "visible": true,
      "size": 20
    }
  }).setBounds(new Rect(105, 20, 250, 180));
  return new Plot({
    "canvaselement": canvas,
    "root": new Group().addChild(colorBar)
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Orientation and Flip

Below is a Color Bar flipped vertically. The title also flips.

import { ColorBar } from "@int/geotoolkit/controls/shapes/ColorBar.ts";
import { ColorBarLocation } from "@int/geotoolkit/controls/shapes/ColorBarLocation.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { createColorProvider } from "/src/code/Carnac/Utils/ColorBars/overview.ts";
function createScene(canvas) {
  const colorBar = new ColorBar({
    "location": ColorBarLocation.West,
    "colorprovider": createColorProvider(),
    "title": {
      "text": "Demo Color Bar",
      "size": 20
    },
    "colorbox": {
      "size": 40
    },
    "axis": {
      "size": 30
    },
    "flip": true,
    "namedcolors": {
      "visible": true,
      "size": 20
    }
  }).setBounds(new Rect(105, 20, 250, 180));
  return new Plot({
    "canvaselement": canvas,
    "root": new Group().addChild(colorBar)
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Auto Limits

This example shows how to add different limits algorithm for Color Bar.

import { ColorBar } from "@int/geotoolkit/controls/shapes/ColorBar.ts";
import { ColorBarLocation } from "@int/geotoolkit/controls/shapes/ColorBarLocation.ts";
import { Rect } from "@int/geotoolkit/util/Rect.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { DefaultColorProvider } from "@int/geotoolkit/util/DefaultColorProvider.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
const LimitsTypes = {
  OriginalLimits: "Original Limits",
  PreciseLimits: "Neat Precise Limits"
};
function createColorProvider() {
  return new DefaultColorProvider({
    "values": [-2.4, -1, 0, 1, 2.42],
    "colors": [
      KnownColors.Orange,
      KnownColors.Yellow,
      KnownColors.Blue,
      KnownColors.Green,
      KnownColors.Gray
    ]
  });
}
function createScene(canvas) {
  const colorBar = new ColorBar({
    "location": ColorBarLocation.South,
    "colorprovider": createColorProvider(),
    "title": {
      "text": "Auto Limits Color Bar"
    }
  }).setBounds(new Rect(40, 40, 310, 160));
  return new Plot({
    "canvaselement": canvas,
    "root": new Group().addChild(colorBar)
  });
}
function setLimitsType(colorBar, limitsType) {
  colorBar.setOptions({
    "preciselimits": LimitsTypes.PreciseLimits === limitsType
  });
}
export { createScene, LimitsTypes, setLimitsType };

createScene(document.querySelector('[ref="plot"]'));