This tutorial demonstrates how the provided set of units can be used and converted. It also shows how new units can be added to the factory.
# Base Units
import { UnitFactory } from "@int/geotoolkit/util/UnitFactory.ts";
import { Line } from "@int/geotoolkit/scene/shapes/Line.ts";
import { Point } from "@int/geotoolkit/util/Point.ts";
import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
function createScene(canvas) {
const factory = UnitFactory.getInstance();
const classes = ["Length", "Time", "Temperature", "Volume", "Pressure"];
const shapes = [];
shapes.push(new Line({
"from": new Point(0, 50),
"to": new Point(800, 50),
"linestyle": {
"color": KnownColors.DarkGray,
"pixelsnapmode": true
}
}));
const stepX = 800 / classes.length;
let stepY;
for (let i = 0; i < classes.length; ++i) {
if (i > 0) {
shapes.push(new Line({
"from": new Point(i * stepX, 0),
"to": new Point(i * stepX, 400),
"linestyle": {
"color": KnownColors.Gray,
"pixelsnapmode": true
}
}));
}
shapes.push(new Text({
"text": classes[i],
"ax": stepX * (i + 0.5),
"ay": 25,
"textstyle": {
"font": "20px sans-serif"
}
}));
const units = factory.getUnitSymbolsByClass(classes[i]);
stepY = 350 / (1 + units.length);
for (let j = 0; j < units.length; ++j) {
shapes.push(new Text({
"text": units[j],
"ax": stepX * (i + 0.5),
"ay": 50 + stepY * (1 + j),
"textstyle": {
"font": "18px sans-serif"
}
}));
}
}
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(shapes)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Use Units and Convert Values
Below is an example of converted units and units which cannot convert.
import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { UnitFactory } from "@int/geotoolkit/util/UnitFactory.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
function createScene(canvas) {
const factory = UnitFactory.getInstance();
const unit = factory.getUnit("foot");
const shapes = [];
const strings = [];
strings.push(unit.getName() + " (" + unit.getSymbol() + ") is a unit of " + unit.getQuantityType()[0]);
strings.push("");
strings.push(unit.getName() + " can" + (unit.canConvertTo("m") ? "" : "'t") + " convert to " + factory.getUnit("m").getName());
strings.push("1500.00 " + unit.getSymbol() + " = " + unit.convert(1500, "m").toFixed(2) + " m");
strings.push("");
const lengthsyms = factory.getUnitSymbolsByClass(unit.getQuantityType()[0]);
const rdm = 0;
const num = 750;
strings.push(unit.getName() + " can" + (unit.canConvertTo(lengthsyms[rdm]) ? "" : "'t") + " convert to " + factory.getUnit(lengthsyms[rdm]).getName());
strings.push(num + " " + unit.getSymbol() + " = " + unit.convert(+num, lengthsyms[rdm]).toFixed(2) + " " + lengthsyms[rdm]);
strings.push("");
strings.push(unit.getName() + " can" + (unit.canConvertTo("F") ? "" : "'t") + " convert to " + factory.getUnit("F").getName());
strings.push("1500.00 " + unit.getSymbol() + " = " + unit.convert(1500, "F") + " F");
const stepY = 350 / (strings.length + 1);
for (let i = 0; i < strings.length; ++i) {
shapes.push(new Text({
"text": strings[i],
"ax": 400,
"ay": stepY * (i + 1)
}));
let color = KnownColors.Blue;
if (i > 1) {
color = KnownColors.Green;
}
if (i > 6) {
color = KnownColors.Orange;
}
shapes[i].getTextStyle().setColor(color);
}
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(shapes)
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));
# Add New Units to Factory
Below is an example of adding new units to the factory.
import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { UnitFactory } from "@int/geotoolkit/util/UnitFactory.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
let factory = null;
function createScene(canvas) {
factory = UnitFactory.getInstance();
factory.addUnit(
"pint",
"volume",
"pt",
"m3",
0,
473176e-9,
1,
0,
"drink responsibly"
);
factory.addUnitClass(
"volume",
"m3",
"pt"
);
const unit = factory.getUnit("pint");
const shapes = [];
const strings = [];
strings.push(unit.getName() + " (" + unit.getSymbol() + ") is a unit of " + unit.getQuantityType()[0]);
strings.push("");
strings.push(unit.getName() + " can" + (unit.canConvertTo("m3") ? "" : "'t") + " convert to " + factory.getUnit("m3").getName());
strings.push("1500.00 " + unit.getSymbol() + " = " + unit.convert(1500, "m3").toFixed(2) + " m3");
strings.push("");
const lengthsyms = factory.getUnitSymbolsByClass(unit.getQuantityType()[0]);
const rdm = 0;
const num = 750;
strings.push(unit.getName() + " can" + (unit.canConvertTo(lengthsyms[rdm]) ? "" : "'t") + " convert to " + factory.getUnit(lengthsyms[rdm]).getName());
strings.push(num + " " + unit.getSymbol() + " = " + unit.convert(+num, lengthsyms[rdm]).toFixed(2) + " " + lengthsyms[rdm]);
strings.push("");
strings.push(unit.getName() + " can" + (unit.canConvertTo("ft") ? "" : "'t") + " convert to " + factory.getUnit("ft").getName());
strings.push("1500.00 " + unit.getSymbol() + " = " + unit.convert(1500, "ft") + " ft");
const stepY = 350 / (strings.length + 1);
for (let i = 0; i < strings.length; ++i) {
shapes.push(new Text({
"text": strings[i],
"ax": 400,
"ay": stepY * (i + 1)
}));
let color = KnownColors.Blue;
if (i > 1)
color = KnownColors.Green;
if (i > 6)
color = KnownColors.Orange;
shapes[i].getTextStyle().setColor(color);
}
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild(shapes)
});
}
function clearUnit() {
if (factory) {
factory.removeUnit("pint");
factory.removeUnitClass({
"name": "volume",
"unitsymbols": "pt"
});
}
}
export { clearUnit, createScene };
createScene(document.querySelector('[ref="plot"]'));