dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5433 from vvlladd28/bug/gauge-firefox/after-work-move-center

Browse Source 
[3.3.2] UI: Fixed gauge widgets incorrect display after work some time
This commit is contained in:
Igor Kulikov 2021-10-27 15:58:06 +03:00 committed by GitHub
commit fc5193e7f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui-ngx/patches/canvas-gauges+2.1.7.patch Normal file
View File

File diff suppressed because one or more lines are too long

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

@ -400,10 +400,8 @@ export class CanvasDigitalGauge extends BaseGauge {
const context = this.contextValueClone; const context = this.contextValueClone;
// clear the cache // clear the cache
context.clearRect(x, y, w, h); context.clearRect(x, y, w, h);
context.save();
context.drawImage(canvas.elementClone, x, y, w, h); context.drawImage(canvas.elementClone, x, y, w, h);
context.save();
drawDigitalValue(context, options, this.elementValueClone.renderedValue); drawDigitalValue(context, options, this.elementValueClone.renderedValue);
@ -426,10 +424,8 @@ export class CanvasDigitalGauge extends BaseGauge {
const context = this.contextProgressClone; const context = this.contextProgressClone;
// clear the cache // clear the cache
context.clearRect(x, y, w, h); context.clearRect(x, y, w, h);
context.save();
context.drawImage(this.elementValueClone, x, y, w, h); context.drawImage(this.elementValueClone, x, y, w, h);
context.save();
if (Number(fixedProgress) > 0) { if (Number(fixedProgress) > 0) {
drawProgress(context, options, progress); drawProgress(context, options, progress);
@ -443,10 +439,8 @@ export class CanvasDigitalGauge extends BaseGauge {
// clear the canvas // clear the canvas
canvas.context.clearRect(x, y, w, h); canvas.context.clearRect(x, y, w, h);
canvas.context.save();
canvas.context.drawImage(this.elementProgressClone, x, y, w, h); canvas.context.drawImage(this.elementProgressClone, x, y, w, h);
canvas.context.save();
// @ts-ignore // @ts-ignore
super.draw(); super.draw();
@ -754,6 +748,7 @@ function drawDigitalTitle(context: DigitalGaugeCanvasRenderingContext2D, options
context.font = Drawings.font(options, 'Title', fontSizeFactor); context.font = Drawings.font(options, 'Title', fontSizeFactor);
context.lineWidth = 0; context.lineWidth = 0;
drawText(context, options, 'Title', options.title.toUpperCase(), textX, textY); drawText(context, options, 'Title', options.title.toUpperCase(), textX, textY);
context.restore();
} }
function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions) { function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions) {
@ -772,6 +767,7 @@ function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options
context.font = Drawings.font(options, 'Label', fontSizeFactor); context.font = Drawings.font(options, 'Label', fontSizeFactor);
context.lineWidth = 0; context.lineWidth = 0;
drawText(context, options, 'Label', options.label, textX, textY); drawText(context, options, 'Label', options.label, textX, textY);
context.restore();
} }
function drawDigitalMinMax(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions) { function drawDigitalMinMax(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions) {
@ -789,6 +785,7 @@ function drawDigitalMinMax(context: DigitalGaugeCanvasRenderingContext2D, option
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);
context.restore();
} }
function drawDigitalValue(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions, value: any) { function drawDigitalValue(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions, value: any) {
@ -811,6 +808,7 @@ function drawDigitalValue(context: DigitalGaugeCanvasRenderingContext2D, options
context.font = Drawings.font(options, 'Value', fontSizeFactor); context.font = Drawings.font(options, 'Value', fontSizeFactor);
context.lineWidth = 0; context.lineWidth = 0;
drawText(context, options, 'Value', text, textX, textY); drawText(context, options, 'Value', text, textX, textY);
context.restore();
} }
function getProgressColor(progress: number, colorsRange: DigitalGaugeColorRange[]): string { function getProgressColor(progress: number, colorsRange: DigitalGaugeColorRange[]): string {
@ -944,6 +942,7 @@ function drawTickBar(context: DigitalGaugeCanvasRenderingContext2D, tickValues:
function drawProgress(context: DigitalGaugeCanvasRenderingContext2D, function drawProgress(context: DigitalGaugeCanvasRenderingContext2D,
options: CanvasDigitalGaugeOptions, progress: number) { options: CanvasDigitalGaugeOptions, progress: number) {
let neonColor; let neonColor;
context.save();
if (options.neonGlowBrightness) { if (options.neonGlowBrightness) {
context.currentColor = neonColor = getProgressColor(progress, options.neonColorsRange); context.currentColor = neonColor = getProgressColor(progress, options.neonColorsRange);
} else { } else {
@ -1019,4 +1018,5 @@ function drawProgress(context: DigitalGaugeCanvasRenderingContext2D,
true, options.colorTicks, options.tickWidth); true, options.colorTicks, options.tickWidth);
} }
context.restore();
} }