"Thermodiagram"
-
visualization class for JS.
It`s based on native html-canvas.
Usage:
import Thermodiagram from './thermodiagram.js';
const td = new Thermodiagram({
container: document.getElementById('div_id'),
diagram_type: 'tephigram', // 'cartesian', 'emagram', 'stuvegram', 'skewt', 'tephigram'
min_p: 100,
min_t: -40,
max_p: 1020,
max_t: 60,
// optional:
step_p: 100,
step_t: 10,
left_ruler: true,
right_ruler: true,
left_wind: false,
right_wind: true,
background_color: '#FFFFFF',
headers: [
"It may be",
"a multyline header",
"defined by",
"an array"
],
language: 'en', // 'en', 'ru' may be expanded in dictionary.js
hodograph_placement: null, // 'left', 'right', 'internal',
width: container.getBoundingClientRect().width,
height: container.getBoundingClientRect().height,
font: "12px Curier",
big_font: "14px Curier",
large_font: "16px Curier",
huge_font: "24px Curier",
wind_colors: ['#e0a', '#c0a', '#a0a', '#80a', '#60a', '#40a', '#20a', '#01a', '#02a',
'#03a', '#04a', '#058', '#066', '#074', '#282', '#490', '#6a0', '#8b0'],
mouse_stickiness: 20,
dot_radius: 2,
background_color: 'transparent',
foreground_color: '#111111',
dew_point_color: '#07b307',
temperature_color: '#FE0909',
wet_bulb_color: '#0A0AFF',
parcel_profile_color: '#0F0A0A',
isobar_color: 'darkgrey',
isogram_color: 'darkgreen',
isotherm_color: 'darkgrey',
isotherm_zero_color: '#990022',
dry_adiabata_color: '#FF5533',
moist_adiabata_color: '#3355FF',
hodograph_color: '#111111',
dew_point_type: 'solid',
temperature_type: 'solid',
wet_bulb_type: 'solid',
parcel_profile_type: 'solid',
isobar_type: 'dashed',
isogram_type: 'dotted',
isotherm_type: 'solid',
dry_adiabata_type: 'solid',
moist_adiabata_type: 'solid',
hodograph_type: 'dotted',
dew_point_width: 2,
temperature_width: 2,
wet_bulb_width: 2,
parcel_profile_width: 2,
hodograph_width: 1,
});
Methods:
Visualisation (all arguments are optional):
td.showBackPlan(background_color = 'transparent', z_index = undefined);
td.showHeader(textes = this.headers, left_indent = 0.5, align = 'center');
td.showText(textes = [], layer_name = 'text', left_indent = 0.65,
clear_all = false, align = 'left', font = this.font,
color = this.axis_color, background_color = 'transparent', z_index = undefined);
td.showDewPoint(background_color = 'transparent', z_index = undefined);
td.showTemperature(background_color = 'transparent', z_index = undefined);
td.showWind(background_color = '#FFFFFF', z_index = undefined);
td.hideBackPlan();
td.hideHeader();
td.hideText(layer_name = 'text');
td.hideDewPoint();
td.hideTemperature();
td.hideWind();
Image getting:
td.downloadPicture(filename = 'diagram.png', imagetype = 'image/png');
td.getPicture(imagetype = 'image/png'); // returns byte-array
Events processing, as usual:
td.addEventListener(type, listener, options);
Methods for calculating coefficients:
td.calc_LCL(t_dew, base_t); // returns three numbers in array [temperature, pressure, height], i.e. [°C, hPa, m] or null
td.calc_CCL(temperature[], pressure[], t_dew); // returns three numbers in array [temperature, pressure, height], i.e. [°C, hPa, m] or null
td.calc_CT(temperature[], pressure[], t_dew); // returns °C or null
td.calc_FL(temperature[], pressure[]); // returns two numbers in array [pressure, height], i.e. [hPa, m] or null
td.cacl_EL(temperature[], pressure[], base_t); // returns three numbers in array [temperature, pressure, height], i.e. [°C, hPa, m] or null
td.cacl_LFC(temperature[], pressure[], base_t); // returns three numbers in array [temperature, pressure, height], i.e. [°C, hPa, m] or null
td.cacl_CIN(temperature[], pressure[], t_dew); // returns one number
td.cacl_SBCIN = td.cacl_CIN;
cacl_MLCIN(temperature[], pressure[], t_dew);
cacl_MUCIN(temperature[], pressure[], t_dew)
td.cacl_CAPE(temperature[], pressure[], t_dew, base_t, shift = 0); // returns one number
td.cacl_SBCAPE = td.cacl_CAPE;
td.cacl_MLCAPE(temperature[], pressure[], t_dew);
td.cacl_MUCAPE(temperature[], pressure[], t_dew);
td.cacl_Ki(temperature[], pressure[], dew_temp, dew_press); // returns one number
td.cacl_LI(temperature[], pressure[]); // returns two numbers in array [temperature, pressure], i.e. [°C, hPa] or null
cacl_SHEAR(pressure[], speed[], direction[], height); // returns an object
Left Cartesian coordinates
const td1 = new Thermodiagram({
container: document.getElementById('diagram-1'),
diagram_type: 'cartesian',
min_p: 100,
min_t: -40,
max_p: 1020,
max_t: 60,
step_p: 100,
step_t: 10,
left_ruler: true,
right_ruler: true,
left_wind: true,
right_wind: true,
headers: ["Widespread electrification",
"of the southern provinces will give a powerful impetus",
"to the rise of agriculture."],
});
Emagram
const td2 = new Thermodiagram({
container: document.getElementById('diagram-2'),
diagram_type: 'emagram',
min_p: 100,
min_t: -40,
max_p: 1020,
max_t: 60,
step_p: 100,
step_t: 10,
left_ruler: true,
right_ruler: true,
left_wind: true,
right_wind: true,
background_color: '#FFFFEE',
headers: ["Widespread electrification",
"of the southern provinces will give a powerful impetus",
"to the rise of agriculture."],
});
Stuvegram
const td3 = new Thermodiagram({
container: document.getElementById('diagram-3'),
diagram_type: 'stuvegram',
min_p: 100,
min_t: -40,
max_p: 1020,
max_t: 60,
step_p: 100,
step_t: 10,
left_ruler: true,
right_ruler: true,
left_wind: true,
right_wind: true,
background_color: '#FFEEFF',
headers: ["Widespread electrification",
"of the southern provinces will give a powerful impetus",
"to the rise of agriculture."],
hodograph_placement: 'left',
});
Skew-T Log-P
const td4 = new Thermodiagram({
container: document.getElementById('diagram-4'),
diagram_type: 'skewt',
min_p: 100,
min_t: -40,
max_p: 1020,
max_t: 60,
step_p: 100,
step_t: 10,
left_ruler: true,
right_ruler: true,
left_wind: true,
right_wind: true,
background_color: '#EEFFFF',
headers: ["Widespread electrification",
"of the southern provinces will give a powerful impetus",
"to the rise of agriculture."],
hodograph_placement: 'right',
});
Tephigram
const td5 = new Thermodiagram({
container: document.getElementById('diagram-5'),
diagram_type: 'tephigram',
min_p: 100,
min_t: -40,
max_p: 1020,
max_t: 60,
step_p: 100,
step_t: 10,
left_ruler: true,
right_ruler: true,
left_wind: false,
right_wind: true,
background_color: '#FFFFFF',
headers: ["Widespread electrification",
"of the southern provinces will give a powerful impetus",
"to the rise of agriculture."],
hodograph_placement: 'internal',
});