diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts b/ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts index 336dc7de2f..a58f928b2b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts @@ -166,6 +166,31 @@ interface FontHeightInfo { descent?: number; } +export class Drawings { + static font(options: CanvasGauges.GenericOptions, target: string, baseSize: number): string { + return options['font' + target + 'Style'] + ' ' + + options['font' + target + 'Weight'] + ' ' + + options['font' + target + 'Size'] * baseSize + 'px ' + + options['font' + target]; + } + static normalizedValue(options: CanvasGauges.GenericOptions): {normal: number, indented: number} { + const value = options.value; + const min = options.minValue; + const max = options.maxValue; + const dt = (max - min) * 0.01; + return { + normal: value < min ? min : value > max ? max : value, + indented: value < min ? min - dt : value > max ? max + dt : value + }; + } + static verifyError(err: any) { + if (err instanceof DOMException && (err as any).result === 0x8053000b) { + return ; // ignore it + } + throw err; + } +} + export class CanvasDigitalGauge extends BaseGauge { static heightCache: {[key: string]: FontHeightInfo} = {}; @@ -350,7 +375,7 @@ export class CanvasDigitalGauge extends BaseGauge { valueChanged = true; } - const progress = (CanvasGauges.drawings.normalizedValue(options).normal - options.minValue) / + const progress = (Drawings.normalizedValue(options).normal - options.minValue) / (options.maxValue - options.minValue); const fixedProgress = progress.toFixed(3); @@ -385,7 +410,7 @@ export class CanvasDigitalGauge extends BaseGauge { super.draw(); } catch (err) { - CanvasGauges.drawings.verifyError(err); + Drawings.verifyError(err); } return this; } @@ -395,7 +420,7 @@ export class CanvasDigitalGauge extends BaseGauge { let color = this.contextProgressClone.currentColor; const options = this.options as CanvasDigitalGaugeOptions; if (!color) { - const progress = (CanvasGauges.drawings.normalizedValue(options).normal - options.minValue) / + const progress = (Drawings.normalizedValue(options).normal - options.minValue) / (options.maxValue - options.minValue); if (options.neonGlowBrightness) { color = getProgressColor(progress, options.neonColorsRange); @@ -539,7 +564,7 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D, bd.barLeft = bd.origBaseX + options.fontMinMaxSize/3 * bd.fontSizeFactor; bd.barRight = bd.origBaseX + w + /*bd.width*/ - options.fontMinMaxSize/3 * bd.fontSizeFactor; } else { - context.font = CanvasGauges.drawings.font(options, 'MinMax', bd.fontSizeFactor); + context.font = Drawings.font(options, 'MinMax', bd.fontSizeFactor); const minTextWidth = context.measureText(options.minValue+'').width; const maxTextWidth = context.measureText(options.maxValue+'').width; const maxW = Math.max(minTextWidth, maxTextWidth); @@ -682,7 +707,7 @@ function drawDigitalTitle(context: DigitalGaugeCanvasRenderingContext2D, options context.save(); context.textAlign = 'center'; - context.font = CanvasGauges.drawings.font(options, 'Title', fontSizeFactor); + context.font = Drawings.font(options, 'Title', fontSizeFactor); context.lineWidth = 0; drawText(context, options, 'Title', options.title.toUpperCase(), textX, textY); } @@ -698,7 +723,7 @@ function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options context.save(); context.textAlign = 'center'; - context.font = CanvasGauges.drawings.font(options, 'Label', fontSizeFactor); + context.font = Drawings.font(options, 'Label', fontSizeFactor); context.lineWidth = 0; drawText(context, options, 'Label', options.label.toUpperCase(), textX, textY); } @@ -712,7 +737,7 @@ function drawDigitalMinMax(context: DigitalGaugeCanvasRenderingContext2D, option context.save(); context.textAlign = fontMinMaxAlign; context.textBaseline = fontMinMaxBaseline; - context.font = CanvasGauges.drawings.font(options, 'MinMax', fontSizeFactor); + context.font = Drawings.font(options, 'MinMax', fontSizeFactor); context.lineWidth = 0; drawText(context, options, 'MinMax', options.minValue+'', minX, minY); drawText(context, options, 'MinMax', options.maxValue+'', maxX, maxY); @@ -751,7 +776,7 @@ function drawDigitalValue(context: DigitalGaugeCanvasRenderingContext2D, options context.save(); context.textAlign = 'center'; context.textBaseline = fontValueBaseline; - context.font = CanvasGauges.drawings.font(options, 'Value', fontSizeFactor); + context.font = Drawings.font(options, 'Value', fontSizeFactor); context.lineWidth = 0; drawText(context, options, 'Value', text, textX, textY); } diff --git a/ui-ngx/src/typings/canvas-gauges.typings.d.ts b/ui-ngx/src/typings/canvas-gauges.typings.d.ts deleted file mode 100644 index a221d528ef..0000000000 --- a/ui-ngx/src/typings/canvas-gauges.typings.d.ts +++ /dev/null @@ -1,27 +0,0 @@ -/// -/// Copyright © 2016-2019 The Thingsboard Authors -/// -/// Licensed under the Apache License, Version 2.0 (the "License"); -/// you may not use this file except in compliance with the License. -/// You may obtain a copy of the License at -/// -/// http://www.apache.org/licenses/LICENSE-2.0 -/// -/// Unless required by applicable law or agreed to in writing, software -/// distributed under the License is distributed on an "AS IS" BASIS, -/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -/// See the License for the specific language governing permissions and -/// limitations under the License. -/// - - -// tslint:disable-next-line:no-namespace -declare namespace CanvasGauges { - const drawings: Drawings; -} - -interface Drawings { - font(options: CanvasGauges.GenericOptions, target: string, baseSize: number): string; - normalizedValue(options: CanvasGauges.GenericOptions): {normal: number, indented: number}; - verifyError(err: any); -} diff --git a/ui-ngx/tsconfig.json b/ui-ngx/tsconfig.json index c2f74dcebe..a35b8a413f 100644 --- a/ui-ngx/tsconfig.json +++ b/ui-ngx/tsconfig.json @@ -19,8 +19,7 @@ "src/typings/jquery.typings.d.ts", "src/typings/jquery.flot.typings.d.ts", "src/typings/jquery.jstree.typings.d.ts", - "src/typings/split.js.typings.d.ts", - "src/typings/canvas-gauges.typings.d.ts" + "src/typings/split.js.typings.d.ts" ], "paths": { "@app/*": ["src/app/*"],