tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fixed show ticks and start donut angle for gauge; Refactoring

pull/3395/head
Vladyslav_Prykhodko 6 years ago
parent
4af92b2537
commit
c4fd3cb5ac
5 changed files with 108 additions and 92 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      ui-ngx/src/app/modules/home/components/widget/lib/analogue-linear-gauge.ts
  2. 2
      ui-ngx/src/app/modules/home/components/widget/lib/analogue-radial-gauge.ts
  3. 136
      ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts
  4. 8
      ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.models.ts
  5. 52
      ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts

2
ui-ngx/src/app/modules/home/components/widget/lib/analogue-linear-gauge.ts
View File

@ -32,7 +32,7 @@ const tinycolor = tinycolor_;
const analogueLinearGaugeSettingsSchemaValue = getAnalogueLinearGaugeSettingsSchema(); const analogueLinearGaugeSettingsSchemaValue = getAnalogueLinearGaugeSettingsSchema();
export class TbAnalogueLinearGauge extends TbAnalogueGauge<AnalogueLinearGaugeSettings,LinearGaugeOptions>{ export class TbAnalogueLinearGauge extends TbAnalogueGauge<AnalogueLinearGaugeSettings, LinearGaugeOptions>{
static get settingsSchema(): JsonSettingsSchema { static get settingsSchema(): JsonSettingsSchema {
return analogueLinearGaugeSettingsSchemaValue; return analogueLinearGaugeSettingsSchemaValue;

2
ui-ngx/src/app/modules/home/components/widget/lib/analogue-radial-gauge.ts
View File

@ -28,7 +28,7 @@ import BaseGauge = CanvasGauges.BaseGauge;
const analogueRadialGaugeSettingsSchemaValue = getAnalogueRadialGaugeSettingsSchema(); const analogueRadialGaugeSettingsSchemaValue = getAnalogueRadialGaugeSettingsSchema();
export class TbAnalogueRadialGauge extends TbAnalogueGauge<AnalogueRadialGaugeSettings,RadialGaugeOptions>{ export class TbAnalogueRadialGauge extends TbAnalogueGauge<AnalogueRadialGaugeSettings, RadialGaugeOptions>{
static get settingsSchema(): JsonSettingsSchema { static get settingsSchema(): JsonSettingsSchema {
return analogueRadialGaugeSettingsSchemaValue; return analogueRadialGaugeSettingsSchemaValue;

136
ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts
View File

@ -18,7 +18,7 @@ import * as CanvasGauges from 'canvas-gauges';
import { FontStyle, FontWeight } from '@home/components/widget/lib/settings.models'; import { FontStyle, FontWeight } from '@home/components/widget/lib/settings.models';
import * as tinycolor_ from 'tinycolor2'; import * as tinycolor_ from 'tinycolor2';
import { ColorFormats } from 'tinycolor2'; import { ColorFormats } from 'tinycolor2';
import { isDefined, isString, isUndefined, padValue } from '@core/utils'; import { isDefined, isDefinedAndNotNull, isString, isUndefined, padValue } from '@core/utils';
import GenericOptions = CanvasGauges.GenericOptions; import GenericOptions = CanvasGauges.GenericOptions;
import BaseGauge = CanvasGauges.BaseGauge; import BaseGauge = CanvasGauges.BaseGauge;
@ -220,7 +220,7 @@ export class CanvasDigitalGauge extends BaseGauge {
public _value: number; public _value: number;
constructor(options: CanvasDigitalGaugeOptions) { constructor(options: CanvasDigitalGaugeOptions) {
options = {...defaultDigitalGaugeOptions,...(options || {})}; options = {...defaultDigitalGaugeOptions, ...(options || {})};
super(CanvasDigitalGauge.configure(options)); super(CanvasDigitalGauge.configure(options));
this.initValueClone(); this.initValueClone();
} }
@ -236,10 +236,10 @@ export class CanvasDigitalGauge extends BaseGauge {
} }
if (options.gaugeType === 'donut') { if (options.gaugeType === 'donut') {
if (!options.donutStartAngle) { if (!isDefinedAndNotNull(options.donutStartAngle)) {
options.donutStartAngle = 1.5 * Math.PI; options.donutStartAngle = 1.5 * Math.PI;
} }
if (!options.donutEndAngle) { if (!isDefinedAndNotNull(options.donutEndAngle)) {
options.donutEndAngle = options.donutStartAngle + 2 * Math.PI; options.donutEndAngle = options.donutStartAngle + 2 * Math.PI;
} }
} }
@ -255,7 +255,7 @@ export class CanvasDigitalGauge extends BaseGauge {
const levelColor: any = options.levelColors[i]; const levelColor: any = options.levelColors[i];
if (levelColor !== null) { if (levelColor !== null) {
let percentage: number; let percentage: number;
if(isColorProperty){ if (isColorProperty) {
percentage = inc * i; percentage = inc * i;
} else { } else {
percentage = CanvasDigitalGauge.normalizeValue(levelColor.value, options.minValue, options.maxValue); percentage = CanvasDigitalGauge.normalizeValue(levelColor.value, options.minValue, options.maxValue);
@ -280,7 +280,7 @@ export class CanvasDigitalGauge extends BaseGauge {
options.ticksValue = []; options.ticksValue = [];
for (const tick of options.ticks) { for (const tick of options.ticks) {
if (tick !== null) { if (tick !== null) {
options.ticksValue.push(CanvasDigitalGauge.normalizeValue(tick, options.minValue, options.maxValue)) options.ticksValue.push(CanvasDigitalGauge.normalizeValue(tick, options.minValue, options.maxValue));
} }
} }
@ -294,7 +294,7 @@ export class CanvasDigitalGauge extends BaseGauge {
return options; return options;
} }
static normalizeValue (value: number, min: number, max: number): number { static normalizeValue(value: number, min: number, max: number): number {
const normalValue = (value - min) / (max - min); const normalValue = (value - min) / (max - min);
if (normalValue <= 0) { if (normalValue <= 0) {
return 0; return 0;
@ -539,8 +539,8 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
titleOffset += bd.fontSizeFactor * 2; titleOffset += bd.fontSizeFactor * 2;
bd.titleY = bd.baseY + titleOffset; bd.titleY = bd.baseY + titleOffset;
titleOffset += bd.fontSizeFactor * 2; titleOffset += bd.fontSizeFactor * 2;
bd.Cy += titleOffset/2; bd.Cy += titleOffset / 2;
bd.Ro -= titleOffset/2; bd.Ro -= titleOffset / 2;
} }
bd.Ri = bd.Ro - bd.width / 6.666666666666667 * gws * 1.2; bd.Ri = bd.Ro - bd.width / 6.666666666666667 * gws * 1.2;
bd.Cx = bd.baseX + bd.width / 2; bd.Cx = bd.baseX + bd.width / 2;
@ -575,8 +575,8 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
const valueHeight = determineFontHeight(options, 'Value', bd.fontSizeFactor).height; const valueHeight = determineFontHeight(options, 'Value', bd.fontSizeFactor).height;
const labelHeight = determineFontHeight(options, 'Label', bd.fontSizeFactor).height; const labelHeight = determineFontHeight(options, 'Label', bd.fontSizeFactor).height;
const total = valueHeight + labelHeight; const total = valueHeight + labelHeight;
bd.labelY = bd.Cy + total/2; bd.labelY = bd.Cy + total / 2;
bd.valueY = bd.Cy - total/2 + valueHeight/2; bd.valueY = bd.Cy - total / 2 + valueHeight / 2;
} else { } else {
bd.valueY = bd.Cy; bd.valueY = bd.Cy;
} }
@ -586,8 +586,8 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
bd.labelY = bd.Cy + (8 + options.fontLabelSize) * bd.fontSizeFactor; bd.labelY = bd.Cy + (8 + options.fontLabelSize) * bd.fontSizeFactor;
bd.minY = bd.maxY = bd.labelY; bd.minY = bd.maxY = bd.labelY;
if (options.roundedLineCap) { if (options.roundedLineCap) {
bd.minY += bd.strokeWidth/2; bd.minY += bd.strokeWidth / 2;
bd.maxY += bd.strokeWidth/2; bd.maxY += bd.strokeWidth / 2;
} }
bd.minX = bd.Cx - bd.Rm; bd.minX = bd.Cx - bd.Rm;
bd.maxX = bd.Cx + bd.Rm; bd.maxX = bd.Cx + bd.Rm;
@ -604,15 +604,15 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
if (options.hideMinMax && options.label === '') { if (options.hideMinMax && options.label === '') {
bd.labelY = bd.barBottom; bd.labelY = bd.barBottom;
bd.barLeft = bd.origBaseX + options.fontMinMaxSize/3 * bd.fontSizeFactor; bd.barLeft = bd.origBaseX + options.fontMinMaxSize / 3 * bd.fontSizeFactor;
bd.barRight = bd.origBaseX + w + /*bd.width*/ - options.fontMinMaxSize/3 * bd.fontSizeFactor; bd.barRight = bd.origBaseX + w + /*bd.width*/ -options.fontMinMaxSize / 3 * bd.fontSizeFactor;
} else { } else {
context.font = Drawings.font(options, 'MinMax', bd.fontSizeFactor); context.font = Drawings.font(options, 'MinMax', bd.fontSizeFactor);
const minTextWidth = context.measureText(options.minValue+'').width; const minTextWidth = context.measureText(options.minValue + '').width;
const maxTextWidth = context.measureText(options.maxValue+'').width; const maxTextWidth = context.measureText(options.maxValue + '').width;
const maxW = Math.max(minTextWidth, maxTextWidth); const maxW = Math.max(minTextWidth, maxTextWidth);
bd.minX = bd.origBaseX + maxW/2 + options.fontMinMaxSize/3 * bd.fontSizeFactor; bd.minX = bd.origBaseX + maxW / 2 + options.fontMinMaxSize / 3 * bd.fontSizeFactor;
bd.maxX = bd.origBaseX + w + /*bd.width*/ - maxW/2 - options.fontMinMaxSize/3 * bd.fontSizeFactor; bd.maxX = bd.origBaseX + w + /*bd.width*/ -maxW / 2 - options.fontMinMaxSize / 3 * bd.fontSizeFactor;
bd.barLeft = bd.minX; bd.barLeft = bd.minX;
bd.barRight = bd.maxX; bd.barRight = bd.maxX;
bd.labelY = bd.barBottom + (8 + options.fontLabelSize) * bd.fontSizeFactor; bd.labelY = bd.barBottom + (8 + options.fontLabelSize) * bd.fontSizeFactor;
@ -632,7 +632,7 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
bd.barBottom = bd.labelY - (8 + options.fontLabelSize) * bd.fontSizeFactor; bd.barBottom = bd.labelY - (8 + options.fontLabelSize) * bd.fontSizeFactor;
} }
bd.minX = bd.maxX = bd.minX = bd.maxX =
bd.baseX + bd.width/2 + bd.strokeWidth/2 + options.fontMinMaxSize/3 * bd.fontSizeFactor; bd.baseX + bd.width / 2 + bd.strokeWidth / 2 + options.fontMinMaxSize / 3 * bd.fontSizeFactor;
bd.minY = bd.barBottom; bd.minY = bd.barBottom;
bd.maxY = bd.barTop; bd.maxY = bd.barTop;
bd.fontMinMaxBaseline = 'middle'; bd.fontMinMaxBaseline = 'middle';
@ -658,13 +658,13 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
// tslint:disable-next-line:no-bitwise // tslint:disable-next-line:no-bitwise
dashCount = (dashCount - 1) | 1; dashCount = (dashCount - 1) | 1;
} }
bd.dashLength = Math.ceil(circumference/dashCount); bd.dashLength = Math.ceil(circumference / dashCount);
} }
return bd; return bd;
} }
function determineFontHeight (options: CanvasDigitalGaugeOptions, target: string, baseSize: number): FontHeightInfo { function determineFontHeight(options: CanvasDigitalGaugeOptions, target: string, baseSize: number): FontHeightInfo {
const fontStyleStr = 'font-style:' + options['font' + target + 'Style'] + ';font-weight:' + const fontStyleStr = 'font-style:' + options['font' + target + 'Style'] + ';font-weight:' +
options['font' + target + 'Weight'] + ';font-size:' + options['font' + target + 'Weight'] + ';font-size:' +
options['font' + target + 'Size'] * baseSize + 'px;font-family:' + options['font' + target + 'Size'] * baseSize + 'px;font-family:' +
@ -688,9 +688,9 @@ function determineFontHeight (options: CanvasDigitalGaugeOptions, target: string
try { try {
result = {}; result = {};
block.css({ verticalAlign: 'baseline' }); block.css({verticalAlign: 'baseline'});
result.ascent = block.offset().top - text.offset().top; result.ascent = block.offset().top - text.offset().top;
block.css({ verticalAlign: 'bottom' }); block.css({verticalAlign: 'bottom'});
result.height = block.offset().top - text.offset().top; result.height = block.offset().top - text.offset().top;
result.descent = result.height - result.ascent; result.descent = result.height - result.ascent;
} finally { } finally {
@ -720,15 +720,15 @@ function drawBackground(context: DigitalGaugeCanvasRenderingContext2D, options:
context.stroke(); context.stroke();
} else if (options.gaugeType === 'arc') { } else if (options.gaugeType === 'arc') {
context.arc(context.barDimensions.Cx, context.barDimensions.Cy, context.arc(context.barDimensions.Cx, context.barDimensions.Cy,
context.barDimensions.Rm, Math.PI, 2*Math.PI); context.barDimensions.Rm, Math.PI, 2 * Math.PI);
context.stroke(); context.stroke();
} else if (options.gaugeType === 'horizontalBar') { } else if (options.gaugeType === 'horizontalBar') {
context.moveTo(barLeft,barTop + strokeWidth/2); context.moveTo(barLeft, barTop + strokeWidth / 2);
context.lineTo(barRight,barTop + strokeWidth/2); context.lineTo(barRight, barTop + strokeWidth / 2);
context.stroke(); context.stroke();
} else if (options.gaugeType === 'verticalBar') { } else if (options.gaugeType === 'verticalBar') {
context.moveTo(baseX + width/2, barBottom); context.moveTo(baseX + width / 2, barBottom);
context.lineTo(baseX + width/2, barTop); context.lineTo(baseX + width / 2, barTop);
context.stroke(); context.stroke();
} }
} }
@ -740,7 +740,9 @@ function drawText(context: DigitalGaugeCanvasRenderingContext2D, options: Canvas
} }
function drawDigitalTitle(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions) { function drawDigitalTitle(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions) {
if (!options.title || typeof options.title !== 'string') return; if (!options.title || typeof options.title !== 'string') {
return;
}
const {titleY, width, baseX, fontSizeFactor} = const {titleY, width, baseX, fontSizeFactor} =
context.barDimensions; context.barDimensions;
@ -756,7 +758,9 @@ function drawDigitalTitle(context: DigitalGaugeCanvasRenderingContext2D, options
} }
function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions) { function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions) {
if (!options.label || options.label === '') return; if (!options.label || options.label === '') {
return;
}
const {labelY, baseX, width, fontSizeFactor} = const {labelY, baseX, width, fontSizeFactor} =
context.barDimensions; context.barDimensions;
@ -772,7 +776,9 @@ function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options
} }
function drawDigitalMinMax(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions) { function drawDigitalMinMax(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions) {
if (options.hideMinMax || options.gaugeType === 'donut') return; if (options.hideMinMax || options.gaugeType === 'donut') {
return;
}
const {minY, maxY, minX, maxX, fontSizeFactor, fontMinMaxAlign, fontMinMaxBaseline} = const {minY, maxY, minX, maxX, fontSizeFactor, fontMinMaxAlign, fontMinMaxBaseline} =
context.barDimensions; context.barDimensions;
@ -782,12 +788,14 @@ function drawDigitalMinMax(context: DigitalGaugeCanvasRenderingContext2D, option
context.textBaseline = fontMinMaxBaseline; context.textBaseline = fontMinMaxBaseline;
context.font = Drawings.font(options, 'MinMax', fontSizeFactor); context.font = Drawings.font(options, 'MinMax', fontSizeFactor);
context.lineWidth = 0; context.lineWidth = 0;
drawText(context, options, 'MinMax', options.minValue+'', minX, minY); drawText(context, options, 'MinMax', options.minValue + '', minX, minY);
drawText(context, options, 'MinMax', options.maxValue+'', maxX, maxY); drawText(context, options, 'MinMax', options.maxValue + '', maxX, maxY);
} }
function drawDigitalValue(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions, value: any) { function drawDigitalValue(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions, value: any) {
if (options.hideValue) return; if (options.hideValue) {
return;
}
const {valueY, baseX, width, fontSizeFactor, fontValueBaseline} = const {valueY, baseX, width, fontSizeFactor, fontValueBaseline} =
context.barDimensions; context.barDimensions;
@ -837,16 +845,16 @@ function drawArcGlow(context: DigitalGaugeCanvasRenderingContext2D,
context.setLineDash([]); context.setLineDash([]);
const strokeWidth = Ro - Ri; const strokeWidth = Ro - Ri;
const blur = 0.55; const blur = 0.55;
const edge = strokeWidth*blur; const edge = strokeWidth * blur;
context.lineWidth = strokeWidth+edge; context.lineWidth = strokeWidth + edge;
const stop = blur/(2*blur+2); const stop = blur / (2 * blur + 2);
const glowGradient = context.createRadialGradient(Cx,Cy,Ri-edge/2,Cx,Cy,Ro+edge/2); const glowGradient = context.createRadialGradient(Cx, Cy, Ri - edge / 2, Cx, Cy, Ro + edge / 2);
const color1 = tinycolor(color).setAlpha(0.5).toRgbString(); const color1 = tinycolor(color).setAlpha(0.5).toRgbString();
const color2 = tinycolor(color).setAlpha(0).toRgbString(); const color2 = tinycolor(color).setAlpha(0).toRgbString();
glowGradient.addColorStop(0,color2); glowGradient.addColorStop(0, color2);
glowGradient.addColorStop(stop,color1); glowGradient.addColorStop(stop, color1);
glowGradient.addColorStop(1.0-stop,color1); glowGradient.addColorStop(1.0 - stop, color1);
glowGradient.addColorStop(1,color2); glowGradient.addColorStop(1, color2);
context.strokeStyle = glowGradient; context.strokeStyle = glowGradient;
context.beginPath(); context.beginPath();
const e = 0.01 * Math.PI; const e = 0.01 * Math.PI;
@ -863,21 +871,21 @@ function drawBarGlow(context: DigitalGaugeCanvasRenderingContext2D, startX: numb
endX: number, endY: number, color: string, strokeWidth: number, isVertical: boolean) { endX: number, endY: number, color: string, strokeWidth: number, isVertical: boolean) {
context.setLineDash([]); context.setLineDash([]);
const blur = 0.55; const blur = 0.55;
const edge = strokeWidth*blur; const edge = strokeWidth * blur;
context.lineWidth = strokeWidth+edge; context.lineWidth = strokeWidth + edge;
const stop = blur/(2*blur+2); const stop = blur / (2 * blur + 2);
const gradientStartX = isVertical ? startX - context.lineWidth/2 : 0; const gradientStartX = isVertical ? startX - context.lineWidth / 2 : 0;
const gradientStartY = isVertical ? 0 : startY - context.lineWidth/2; const gradientStartY = isVertical ? 0 : startY - context.lineWidth / 2;
const gradientStopX = isVertical ? startX + context.lineWidth/2 : 0; const gradientStopX = isVertical ? startX + context.lineWidth / 2 : 0;
const gradientStopY = isVertical ? 0 : startY + context.lineWidth/2; const gradientStopY = isVertical ? 0 : startY + context.lineWidth / 2;
const glowGradient = context.createLinearGradient(gradientStartX,gradientStartY,gradientStopX,gradientStopY); const glowGradient = context.createLinearGradient(gradientStartX, gradientStartY, gradientStopX, gradientStopY);
const color1 = tinycolor(color).setAlpha(0.5).toRgbString(); const color1 = tinycolor(color).setAlpha(0.5).toRgbString();
const color2 = tinycolor(color).setAlpha(0).toRgbString(); const color2 = tinycolor(color).setAlpha(0).toRgbString();
glowGradient.addColorStop(0,color2); glowGradient.addColorStop(0, color2);
glowGradient.addColorStop(stop,color1); glowGradient.addColorStop(stop, color1);
glowGradient.addColorStop(1.0-stop,color1); glowGradient.addColorStop(1.0 - stop, color1);
glowGradient.addColorStop(1,color2); glowGradient.addColorStop(1, color2);
context.strokeStyle = glowGradient; context.strokeStyle = glowGradient;
const dx = isVertical ? 0 : 0.05 * context.lineWidth; const dx = isVertical ? 0 : 0.05 * context.lineWidth;
const dy = isVertical ? 0.05 * context.lineWidth : 0; const dy = isVertical ? 0.05 * context.lineWidth : 0;
@ -984,12 +992,12 @@ function drawProgress(context: DigitalGaugeCanvasRenderingContext2D,
context.strokeStyle = neonColor; context.strokeStyle = neonColor;
} }
context.beginPath(); context.beginPath();
context.moveTo(barLeft,barTop + strokeWidth/2); context.moveTo(barLeft, barTop + strokeWidth / 2);
context.lineTo(barLeft + (barRight-barLeft)*progress, barTop + strokeWidth/2); context.lineTo(barLeft + (barRight - barLeft) * progress, barTop + strokeWidth / 2);
context.stroke(); context.stroke();
if (options.neonGlowBrightness && !options.isMobile) { if (options.neonGlowBrightness && !options.isMobile) {
drawBarGlow(context, barLeft, barTop + strokeWidth/2, drawBarGlow(context, barLeft, barTop + strokeWidth / 2,
barLeft + (barRight-barLeft)*progress, barTop + strokeWidth/2, barLeft + (barRight - barLeft) * progress, barTop + strokeWidth / 2,
neonColor, strokeWidth, false); neonColor, strokeWidth, false);
} }
drawTickBar(context, options.ticksValue, barLeft, barTop, barRight - barLeft, strokeWidth, drawTickBar(context, options.ticksValue, barLeft, barTop, barRight - barLeft, strokeWidth,
@ -999,12 +1007,12 @@ function drawProgress(context: DigitalGaugeCanvasRenderingContext2D,
context.strokeStyle = neonColor; context.strokeStyle = neonColor;
} }
context.beginPath(); context.beginPath();
context.moveTo(baseX + width/2, barBottom); context.moveTo(baseX + width / 2, barBottom);
context.lineTo(baseX + width/2, barBottom - (barBottom-barTop)*progress); context.lineTo(baseX + width / 2, barBottom - (barBottom - barTop) * progress);
context.stroke(); context.stroke();
if (options.neonGlowBrightness && !options.isMobile) { if (options.neonGlowBrightness && !options.isMobile) {
drawBarGlow(context, baseX + width/2, barBottom, drawBarGlow(context, baseX + width / 2, barBottom,
baseX + width/2, barBottom - (barBottom-barTop)*progress, baseX + width / 2, barBottom - (barBottom - barTop) * progress,
neonColor, strokeWidth, true); neonColor, strokeWidth, true);
} }
drawTickBar(context, options.ticksValue, baseX + width / 2, barTop, barTop - barBottom, strokeWidth, drawTickBar(context, options.ticksValue, baseX + width / 2, barTop, barTop - barBottom, strokeWidth,

8
ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.models.ts
View File

@ -694,7 +694,7 @@ export const digitalGaugeSettingsSchema: JsonSettingsSchema = {
}, },
{ {
value: '700', value: '700',
label: '800' label: '700'
}, },
{ {
value: '800', value: '800',
@ -783,7 +783,7 @@ export const digitalGaugeSettingsSchema: JsonSettingsSchema = {
}, },
{ {
value: '700', value: '700',
label: '800' label: '700'
}, },
{ {
value: '800', value: '800',
@ -872,7 +872,7 @@ export const digitalGaugeSettingsSchema: JsonSettingsSchema = {
}, },
{ {
value: '700', value: '700',
label: '800' label: '700'
}, },
{ {
value: '800', value: '800',
@ -961,7 +961,7 @@ export const digitalGaugeSettingsSchema: JsonSettingsSchema = {
}, },
{ {
value: '700', value: '700',
label: '800' label: '700'
}, },
{ {
value: '800', value: '800',

52
ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts
View File

@ -25,7 +25,7 @@ import {
FixedLevelColors FixedLevelColors
} from '@home/components/widget/lib/digital-gauge.models'; } from '@home/components/widget/lib/digital-gauge.models';
import * as tinycolor_ from 'tinycolor2'; import * as tinycolor_ from 'tinycolor2';
import { isDefined } from '@core/utils'; import { isDefined, isDefinedAndNotNull } from '@core/utils';
import { prepareFontSettings } from '@home/components/widget/lib/settings.models'; import { prepareFontSettings } from '@home/components/widget/lib/settings.models';
import { CanvasDigitalGauge, CanvasDigitalGaugeOptions } from '@home/components/widget/lib/canvas-digital-gauge'; import { CanvasDigitalGauge, CanvasDigitalGaugeOptions } from '@home/components/widget/lib/canvas-digital-gauge';
import { DatePipe } from '@angular/common'; import { DatePipe } from '@angular/common';
@ -53,7 +53,7 @@ export class TbCanvasDigitalGauge {
} }
constructor(protected ctx: WidgetContext, canvasId: string) { constructor(protected ctx: WidgetContext, canvasId: string) {
const gaugeElement = $('#'+canvasId, ctx.$container)[0]; const gaugeElement = $('#' + canvasId, ctx.$container)[0];
const settings: DigitalGaugeSettings = ctx.settings; const settings: DigitalGaugeSettings = ctx.settings;
this.localSettings = {}; this.localSettings = {};
@ -80,7 +80,7 @@ export class TbCanvasDigitalGauge {
this.localSettings.useFixedLevelColor = settings.useFixedLevelColor || false; this.localSettings.useFixedLevelColor = settings.useFixedLevelColor || false;
if (!settings.useFixedLevelColor) { if (!settings.useFixedLevelColor) {
if (!settings.levelColors || settings.levelColors.length <= 0) { if (!settings.levelColors || settings.levelColors.length === 0) {
this.localSettings.levelColors = [keyColor]; this.localSettings.levelColors = [keyColor];
} else { } else {
this.localSettings.levelColors = settings.levelColors.slice(); this.localSettings.levelColors = settings.levelColors.slice();
@ -97,14 +97,15 @@ export class TbCanvasDigitalGauge {
this.localSettings.colorTicks = settings.colorTicks || '#666'; this.localSettings.colorTicks = settings.colorTicks || '#666';
this.localSettings.decimals = isDefined(dataKey.decimals) ? dataKey.decimals : this.localSettings.decimals = isDefined(dataKey.decimals) ? dataKey.decimals :
((isDefined(settings.decimals) && settings.decimals !== null) (isDefinedAndNotNull(settings.decimals) ? settings.decimals : ctx.decimals);
? settings.decimals : ctx.decimals);
this.localSettings.units = dataKey.units && dataKey.units.length ? dataKey.units : this.localSettings.units = dataKey.units && dataKey.units.length ? dataKey.units :
(isDefined(settings.units) && settings.units.length > 0 ? settings.units : ctx.units); (isDefined(settings.units) && settings.units.length > 0 ? settings.units : ctx.units);
this.localSettings.hideValue = settings.showValue !== true; this.localSettings.hideValue = settings.showValue !== true;
this.localSettings.hideMinMax = settings.showMinMax !== true; this.localSettings.hideMinMax = settings.showMinMax !== true;
this.localSettings.donutStartAngle = isDefinedAndNotNull(settings.donutStartAngle) ?
-TbCanvasDigitalGauge.toRadians(settings.donutStartAngle) : null;
this.localSettings.title = ((settings.showTitle === true) ? this.localSettings.title = ((settings.showTitle === true) ?
(settings.title && settings.title.length > 0 ? (settings.title && settings.title.length > 0 ?
@ -191,14 +192,15 @@ export class TbCanvasDigitalGauge {
hideValue: this.localSettings.hideValue, hideValue: this.localSettings.hideValue,
hideMinMax: this.localSettings.hideMinMax, hideMinMax: this.localSettings.hideMinMax,
donutStartAngle: this.localSettings.donutStartAngle,
valueDec: this.localSettings.decimals, valueDec: this.localSettings.decimals,
neonGlowBrightness: this.localSettings.neonGlowBrightness, neonGlowBrightness: this.localSettings.neonGlowBrightness,
// animations // animations
animation: settings.animation !== false && !ctx.isMobile, animation: settings.animation !== false && !ctx.isMobile,
animationDuration: (isDefined(settings.animationDuration) && settings.animationDuration !== null) animationDuration: isDefinedAndNotNull(settings.animationDuration) ? settings.animationDuration : 500,
? settings.animationDuration : 500,
animationRule: settings.animationRule || 'linear', animationRule: settings.animationRule || 'linear',
isMobile: ctx.isMobile isMobile: ctx.isMobile
@ -241,7 +243,7 @@ export class TbCanvasDigitalGauge {
if (findDataKey) { if (findDataKey) {
findDataKey.settings.push(settings); findDataKey.settings.push(settings);
} else { } else {
datasource.dataKeys.push(dataKey) datasource.dataKeys.push(dataKey);
} }
} else { } else {
const datasourceAttribute: Datasource = { const datasourceAttribute: Datasource = {
@ -257,17 +259,23 @@ export class TbCanvasDigitalGauge {
return datasources; return datasources;
} }
private static toRadians(angle: number): number {
return angle * (Math.PI / 180);
}
init() { init() {
if (this.localSettings.useFixedLevelColor) { let updateSetting = false;
if (this.localSettings.fixedLevelColors && this.localSettings.fixedLevelColors.length > 0) {
this.localSettings.levelColors = this.settingLevelColorsSubscribe(this.localSettings.fixedLevelColors);
}
if (this.localSettings.showTicks) { if (this.localSettings.useFixedLevelColor && this.localSettings.fixedLevelColors?.length > 0) {
if (this.localSettings.ticksValue && this.localSettings.ticksValue.length) { this.localSettings.levelColors = this.settingLevelColorsSubscribe(this.localSettings.fixedLevelColors);
this.localSettings.ticks = this.settingTicksSubscribe(this.localSettings.ticksValue); updateSetting = true;
} }
} if (this.localSettings.showTicks && this.localSettings.ticksValue?.length) {
this.localSettings.ticks = this.settingTicksSubscribe(this.localSettings.ticksValue);
updateSetting = true;
}
if (updateSetting) {
this.updateSetting(); this.updateSetting();
} }
} }
@ -281,7 +289,7 @@ export class TbCanvasDigitalGauge {
predefineLevelColors.push({ predefineLevelColors.push({
value: levelSetting.value, value: levelSetting.value,
color color
}) });
} else if (levelSetting.entityAlias && levelSetting.attribute) { } else if (levelSetting.entityAlias && levelSetting.attribute) {
try { try {
levelColorsDatasource = TbCanvasDigitalGauge.generateDatasource(this.ctx, levelColorsDatasource, levelColorsDatasource = TbCanvasDigitalGauge.generateDatasource(this.ctx, levelColorsDatasource,
@ -293,7 +301,7 @@ export class TbCanvasDigitalGauge {
} }
} }
for(const levelColor of options){ for (const levelColor of options) {
if (levelColor.from) { if (levelColor.from) {
setLevelColor.call(this, levelColor.from, levelColor.color); setLevelColor.call(this, levelColor.from, levelColor.color);
} }
@ -313,9 +321,9 @@ export class TbCanvasDigitalGauge {
let ticksDatasource: Datasource[] = []; let ticksDatasource: Datasource[] = [];
const predefineTicks: number[] = []; const predefineTicks: number[] = [];
for(const tick of options){ for (const tick of options) {
if (tick.valueSource === 'predefinedValue' && isFinite(tick.value)) { if (tick.valueSource === 'predefinedValue' && isFinite(tick.value)) {
predefineTicks.push(tick.value) predefineTicks.push(tick.value);
} else if (tick.entityAlias && tick.attribute) { } else if (tick.entityAlias && tick.attribute) {
try { try {
ticksDatasource = TbCanvasDigitalGauge ticksDatasource = TbCanvasDigitalGauge
@ -398,7 +406,7 @@ export class TbCanvasDigitalGauge {
filter.transform(timestamp, this.localSettings.timestampFormat); filter.transform(timestamp, this.localSettings.timestampFormat);
} }
const value = tvPair[1]; const value = tvPair[1];
if(value !== this.gauge.value) { if (value !== this.gauge.value) {
if (!this.gauge.options.animation) { if (!this.gauge.options.animation) {
this.gauge._value = value; this.gauge._value = value;
} }

Write Preview
Loading…
Cancel
Save