...
|
...
|
@@ -166,6 +166,31 @@ interface FontHeightInfo { |
166
|
166
|
descent?: number;
|
167
|
167
|
}
|
168
|
168
|
|
|
169
|
+export class Drawings {
|
|
170
|
+ static font(options: CanvasGauges.GenericOptions, target: string, baseSize: number): string {
|
|
171
|
+ return options['font' + target + 'Style'] + ' ' +
|
|
172
|
+ options['font' + target + 'Weight'] + ' ' +
|
|
173
|
+ options['font' + target + 'Size'] * baseSize + 'px ' +
|
|
174
|
+ options['font' + target];
|
|
175
|
+ }
|
|
176
|
+ static normalizedValue(options: CanvasGauges.GenericOptions): {normal: number, indented: number} {
|
|
177
|
+ const value = options.value;
|
|
178
|
+ const min = options.minValue;
|
|
179
|
+ const max = options.maxValue;
|
|
180
|
+ const dt = (max - min) * 0.01;
|
|
181
|
+ return {
|
|
182
|
+ normal: value < min ? min : value > max ? max : value,
|
|
183
|
+ indented: value < min ? min - dt : value > max ? max + dt : value
|
|
184
|
+ };
|
|
185
|
+ }
|
|
186
|
+ static verifyError(err: any) {
|
|
187
|
+ if (err instanceof DOMException && (err as any).result === 0x8053000b) {
|
|
188
|
+ return ; // ignore it
|
|
189
|
+ }
|
|
190
|
+ throw err;
|
|
191
|
+ }
|
|
192
|
+}
|
|
193
|
+
|
169
|
194
|
export class CanvasDigitalGauge extends BaseGauge {
|
170
|
195
|
|
171
|
196
|
static heightCache: {[key: string]: FontHeightInfo} = {};
|
...
|
...
|
@@ -350,7 +375,7 @@ export class CanvasDigitalGauge extends BaseGauge { |
350
|
375
|
valueChanged = true;
|
351
|
376
|
}
|
352
|
377
|
|
353
|
|
- const progress = (CanvasGauges.drawings.normalizedValue(options).normal - options.minValue) /
|
|
378
|
+ const progress = (Drawings.normalizedValue(options).normal - options.minValue) /
|
354
|
379
|
(options.maxValue - options.minValue);
|
355
|
380
|
|
356
|
381
|
const fixedProgress = progress.toFixed(3);
|
...
|
...
|
@@ -385,7 +410,7 @@ export class CanvasDigitalGauge extends BaseGauge { |
385
|
410
|
super.draw();
|
386
|
411
|
|
387
|
412
|
} catch (err) {
|
388
|
|
- CanvasGauges.drawings.verifyError(err);
|
|
413
|
+ Drawings.verifyError(err);
|
389
|
414
|
}
|
390
|
415
|
return this;
|
391
|
416
|
}
|
...
|
...
|
@@ -395,7 +420,7 @@ export class CanvasDigitalGauge extends BaseGauge { |
395
|
420
|
let color = this.contextProgressClone.currentColor;
|
396
|
421
|
const options = this.options as CanvasDigitalGaugeOptions;
|
397
|
422
|
if (!color) {
|
398
|
|
- const progress = (CanvasGauges.drawings.normalizedValue(options).normal - options.minValue) /
|
|
423
|
+ const progress = (Drawings.normalizedValue(options).normal - options.minValue) /
|
399
|
424
|
(options.maxValue - options.minValue);
|
400
|
425
|
if (options.neonGlowBrightness) {
|
401
|
426
|
color = getProgressColor(progress, options.neonColorsRange);
|
...
|
...
|
@@ -539,7 +564,7 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D, |
539
|
564
|
bd.barLeft = bd.origBaseX + options.fontMinMaxSize/3 * bd.fontSizeFactor;
|
540
|
565
|
bd.barRight = bd.origBaseX + w + /*bd.width*/ - options.fontMinMaxSize/3 * bd.fontSizeFactor;
|
541
|
566
|
} else {
|
542
|
|
- context.font = CanvasGauges.drawings.font(options, 'MinMax', bd.fontSizeFactor);
|
|
567
|
+ context.font = Drawings.font(options, 'MinMax', bd.fontSizeFactor);
|
543
|
568
|
const minTextWidth = context.measureText(options.minValue+'').width;
|
544
|
569
|
const maxTextWidth = context.measureText(options.maxValue+'').width;
|
545
|
570
|
const maxW = Math.max(minTextWidth, maxTextWidth);
|
...
|
...
|
@@ -682,7 +707,7 @@ function drawDigitalTitle(context: DigitalGaugeCanvasRenderingContext2D, options |
682
|
707
|
|
683
|
708
|
context.save();
|
684
|
709
|
context.textAlign = 'center';
|
685
|
|
- context.font = CanvasGauges.drawings.font(options, 'Title', fontSizeFactor);
|
|
710
|
+ context.font = Drawings.font(options, 'Title', fontSizeFactor);
|
686
|
711
|
context.lineWidth = 0;
|
687
|
712
|
drawText(context, options, 'Title', options.title.toUpperCase(), textX, textY);
|
688
|
713
|
}
|
...
|
...
|
@@ -698,7 +723,7 @@ function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options |
698
|
723
|
|
699
|
724
|
context.save();
|
700
|
725
|
context.textAlign = 'center';
|
701
|
|
- context.font = CanvasGauges.drawings.font(options, 'Label', fontSizeFactor);
|
|
726
|
+ context.font = Drawings.font(options, 'Label', fontSizeFactor);
|
702
|
727
|
context.lineWidth = 0;
|
703
|
728
|
drawText(context, options, 'Label', options.label.toUpperCase(), textX, textY);
|
704
|
729
|
}
|
...
|
...
|
@@ -712,7 +737,7 @@ function drawDigitalMinMax(context: DigitalGaugeCanvasRenderingContext2D, option |
712
|
737
|
context.save();
|
713
|
738
|
context.textAlign = fontMinMaxAlign;
|
714
|
739
|
context.textBaseline = fontMinMaxBaseline;
|
715
|
|
- context.font = CanvasGauges.drawings.font(options, 'MinMax', fontSizeFactor);
|
|
740
|
+ context.font = Drawings.font(options, 'MinMax', fontSizeFactor);
|
716
|
741
|
context.lineWidth = 0;
|
717
|
742
|
drawText(context, options, 'MinMax', options.minValue+'', minX, minY);
|
718
|
743
|
drawText(context, options, 'MinMax', options.maxValue+'', maxX, maxY);
|
...
|
...
|
@@ -751,7 +776,7 @@ function drawDigitalValue(context: DigitalGaugeCanvasRenderingContext2D, options |
751
|
776
|
context.save();
|
752
|
777
|
context.textAlign = 'center';
|
753
|
778
|
context.textBaseline = fontValueBaseline;
|
754
|
|
- context.font = CanvasGauges.drawings.font(options, 'Value', fontSizeFactor);
|
|
779
|
+ context.font = Drawings.font(options, 'Value', fontSizeFactor);
|
755
|
780
|
context.lineWidth = 0;
|
756
|
781
|
drawText(context, options, 'Value', text, textX, textY);
|
757
|
782
|
}
|
...
|
...
|
|