@mxtommy/kip 1.3.0 → 2.0.1

package/src/app/widget-manager.service.ts

@@ -1,141 +0,0 @@
-import { Injectable } from '@angular/core';
-import { AppSettingsService } from './app-settings.service';
-import { Format, Policy } from "./signalk-interfaces";
-
-export interface IWidget {
-  uuid: string;
-  type: string;
-  config: IWidgetConfig;
-}
-
-export interface IWidgetConfig {
-  displayName?: string;
-  filterSelfPaths?: boolean; //widget filter self paths only?
-  paths?: {
-    [key: string]: IWidgetPaths;
-  },
-  convertUnitTo?: string;
-  usage?: {
-    [key: string]: string[]; // Autopilot: key should match key in paths, specifies autopilot widget possible paths for AP mode
-  },
-  typeVal?: {
-    [key: string]: string; // Autopilot: key should match key in paths, specifies autopilot widget paths value type for AP mode
-  },
-
-  //numeric data
-  numDecimal?: number; // number of decimal places if a number
-  numInt?: number;
-  showMin?: boolean;
-  showMax?: boolean;
-
-  //Wind Gauge data
-  windSectorEnable?: boolean;
-  windSectorWindowSeconds?: number;
-  laylineEnable?: boolean;
-  laylineAngle?: number;
-
-  //gauge Data
-  gaugeType?: string;
-  gaugeUnitLabelFormat?: string;
-  gaugeTicks?: boolean;
-  barGraph?: boolean;
-  backgroundColor?: string;
-  frameColor?: string;
-  barColor?: string;
-  radialSize?: string;
-  minValue?: number;
-  maxValue?: number;
-  rotateFace?: boolean;
-  autoStart?: boolean;
-  compassUseNumbers?: boolean;
-
-  //Historical
-  dataSetUUID?: string;
-  invertData?: boolean;
-  displayMinMax?: boolean;
-  animateGraph?: boolean;
-  includeZero?: boolean;
-  verticalGraph?: boolean;
-
-  //Puts
-  putEnable?: boolean;
-  putMomentary?: boolean;
-  putMomentaryValue?: boolean;
-
-  //iFrame
-  widgetUrl?: string;
-}
-
-interface IWidgetPaths {
-  description: string;
-  path: string | null;       //can be null or set
-  source: string | null;     //can be null or set
-  pathType: string  | null;
-  pathFilter?: string,     //Future - use to filter path list ie. self.navigation.* or *.navigation.*.blabla.*
-  convertUnitTo?: string;    // Convert SignalK value to specific format for display. Also used as a source to identify conversion group
-  isPathConfigurable: boolean; // should we show this path in Widget Path config or is it static and hidden
-  period?: number;    // SignalK - period=[millisecs] becomes the transmission rate, e.g. every period/1000 seconds. Default: 1000
-  format?: Format;     // SignalK - format=[delta|full] specifies delta or full format. Default: delta
-  policy?: Policy;     // SignalK - policy=[instant|ideal|fixed]. Default: ideal
-  minPeriod?: number;  // SignalK - minPeriod=[millisecs] becomes the fastest message transmission rate allowed, e.g. every minPeriod/1000 seconds. This is only relevant for policy='instant' to avoid swamping the client or network.
-}
-
-
-
-@Injectable()
-export class WidgetManagerService {
-
-  widgets: Array<IWidget>;
-
-  constructor(
-    private AppSettingsService: AppSettingsService
-  ) {
-    this.widgets = this.AppSettingsService.getWidgets();
-  }
-
-
-
-  private newUuid() {
-        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-            var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
-            return v.toString(16);
-        });
-  }
-
-  getWidget(uuid: string) {
-      return this.widgets.find(w => w.uuid == uuid);
-  }
-
-  newWidget() {
-    let uuid = this.newUuid();
-    this.widgets.push({ uuid: uuid, type: "WidgetBlank", config: null });
-    this.saveWidgets();
-    return uuid;
-  }
-
-  deleteWidget(uuid) {
-    let wIndex = this.widgets.findIndex(w => w.uuid == uuid)
-    if (wIndex < 0) { return; } // not found
-    this.widgets.splice(wIndex, 1);
-  }
-
-  updateWidgetType(uuid: string, newNodeType: string) {
-    let wIndex = this.widgets.findIndex(w => w.uuid == uuid)
-    if (wIndex < 0) { return; } // not found
-    this.widgets[wIndex].config = null;
-    this.widgets[wIndex].type = newNodeType;
-    this.saveWidgets();
-  }
-
-  updateWidgetConfig(uuid: string, newConfig) {
-    let wIndex = this.widgets.findIndex(w => w.uuid == uuid)
-    if (wIndex < 0) { return; } // not found
-    this.widgets[wIndex].config = newConfig;
-    this.saveWidgets();
-  }
-
-  saveWidgets() {
-    this.AppSettingsService.saveWidgets(this.widgets);
-  }
-
-}

package/src/app/widget-numeric/widget-numeric.component.html

@@ -1,13 +0,0 @@
-<div #wrapperDiv class="textGenericWrapper">
-  <canvas id="canvasValue" class="canvas-size" #canvasEl></canvas>
-  <canvas id="cancasBG" class="canvas-size numeric-labels" #canvasBG></canvas>
-
-  <div #warn class='warn' style="display: none;"></div>
-  <div #warncontrast class='warn-contrast' style="display: none;"></div>
-
-  <div class="settingsButton" *ngIf="unlockStatus">
-    <button  color="accent" mat-mini-fab class="selector-fab" (click)="openWidgetSettings()">
-        <span class="fa-solid fa-cog"></span>
-    </button>
-  </div>
-</div>

package/src/app/widget-numeric/widget-numeric.component.scss

@@ -1,52 +0,0 @@
-@use '~@angular/material' as mat;
-
-@mixin widget-numeric-theme($theme) {
-  $primary: map-get($theme, primary);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-  $wind: map-get($theme, wind);
-
-  .warn {
-    color: mat.get-color-from-palette($warn, 500);
-  }
-
-  .warn-contrast {
-    color: mat.get-contrast-color-from-palette($warn, 500);
-  }
-
-}
-
-canvas.numeric-labels {
-}
-
-.textGenericWrapper {
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
-
-.canvas-size {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-.settingsButton {
-    position: absolute;
-    bottom: 5%;
-    left: 50%;
-    transform: translate(-50%);
-}
-
-.tab-group {
-    border: 1px solid #e8e8e8;
-}
-
-.tab-content {
-    padding: 16px;
-}
-
-.full-width {
-    width: 100%;
-}

package/src/app/widget-numeric/widget-numeric.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { WidgetNumericComponent } from './widget-numeric.component';
-
-describe('WidgetNumericComponent', () => {
-  let component: WidgetNumericComponent;
-  let fixture: ComponentFixture<WidgetNumericComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ WidgetNumericComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(WidgetNumericComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/app/widget-numeric/widget-numeric.component.ts

@@ -1,457 +0,0 @@
-import { Component, Input, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { MatDialog } from '@angular/material/dialog';
-
-import { ModalWidgetComponent } from '../modal-widget/modal-widget.component';
-import { SignalKService } from '../signalk.service';
-import { WidgetManagerService, IWidget, IWidgetConfig } from '../widget-manager.service';
-import { UnitsService } from '../units.service';
-import { AppSettingsService, ZoneState } from '../app-settings.service';
-
-
-const defaultConfig: IWidgetConfig = {
-  displayName: null,
-  filterSelfPaths: true,
-  paths: {
-    "numericPath": {
-      description: "Numeric Data",
-      path: null,
-      source: null,
-      pathType: "number",
-      isPathConfigurable: true,
-      convertUnitTo: "unitless"
-    }
-  },
-  showMax: false,
-  showMin: false,
-  numDecimal: 1,
-  numInt: 1
-};
-
-@Component({
-  selector: 'app-widget-numeric',
-  templateUrl: './widget-numeric.component.html',
-  styleUrls: ['./widget-numeric.component.scss']
-})
-export class WidgetNumericComponent implements OnInit, OnDestroy, AfterViewChecked {
-
-  @Input('widgetUUID') widgetUUID: string;
-  @Input('unlockStatus') unlockStatus: boolean;
-  @ViewChild('canvasEl', {static: true, read: ElementRef}) canvasEl: ElementRef;
-  @ViewChild('canvasBG', {static: true, read: ElementRef}) canvasBG: ElementRef;
-  @ViewChild('wrapperDiv', {static: true, read: ElementRef}) wrapperDiv: ElementRef;
-  @ViewChild('warn', {static: true, read: ElementRef}) private warnElement: ElementRef;
-  @ViewChild('warncontrast', {static: true, read: ElementRef}) private warnContrastElement: ElementRef;
-
-  activeWidget: IWidget;
-  config: IWidgetConfig;
-
-  dataValue: number = null;
-  zoneState: ZoneState = null;
-  maxValue: number = null;
-  minValue: number = null;
-  dataTimestamp: number = Date.now();
-  currentValueLength: number = 0; // length (in charaters) of value text to be displayed. if changed from last time, need to recalculate font size...
-  currentMinMaxLength: number = 0;
-  valueFontSize: number = 1;
-  minMaxFontSize: number = 1;
-  flashOn: boolean = false;
-  flashInterval;
-
-  //subs
-  valueSub: Subscription = null;
-
-  // dynamics theme support
-  themeNameSub: Subscription = null;
-
-  canvasCtx;
-  canvasBGCtx;
-
-  constructor(
-    public dialog:MatDialog,
-    private SignalKService: SignalKService,
-    private WidgetManagerService: WidgetManagerService,
-    private UnitsService: UnitsService,
-    private AppSettingsService: AppSettingsService, // need for theme change subscription
-    ) {
-  }
-
-  ngOnInit() {
-    this.activeWidget = this.WidgetManagerService.getWidget(this.widgetUUID);
-    if (this.activeWidget.config === null) {
-        // no data, let's set some!
-      this.WidgetManagerService.updateWidgetConfig(this.widgetUUID, defaultConfig);
-      this.config = defaultConfig; // load default config.
-    } else {
-      this.config = this.activeWidget.config;
-    }
-    this.subscribePath();
-    this.subscribeTheme();
-
-    this.canvasCtx = this.canvasEl.nativeElement.getContext('2d');
-    this.canvasBGCtx = this.canvasBG.nativeElement.getContext('2d');
-    this.resizeWidget();
-  }
-
-  ngOnDestroy() {
-    this.unsubscribePath();
-    this.unsubscribeTheme();
-    if (this.flashInterval) {
-      clearInterval(this.flashInterval);
-      this.flashInterval = null;
-    }
-  }
-
-  ngAfterViewChecked() {
-    this.resizeWidget();
-  }
-
-  resizeWidget() {
-    let rect = this.wrapperDiv.nativeElement.getBoundingClientRect();
-
-    if (rect.height < 50) { return; }
-    if (rect.width < 50) { return; }
-    if ((this.canvasEl.nativeElement.width != Math.floor(rect.width)) || (this.canvasEl.nativeElement.height != Math.floor(rect.height))) {
-      this.canvasEl.nativeElement.width = Math.floor(rect.width);
-      this.canvasEl.nativeElement.height = Math.floor(rect.height);
-      this.canvasBG.nativeElement.width = Math.floor(rect.width);
-      this.canvasBG.nativeElement.height = Math.floor(rect.height);
-      this.currentValueLength = 0; //will force resetting the font size
-      this.currentMinMaxLength = 0;
-      this.updateCanvas();
-      this.updateCanvasBG();
-    }
-
-  }
-
-  subscribePath() {
-    this.unsubscribePath();
-    if (typeof(this.config.paths['numericPath'].path) != 'string') { return } // nothing to sub to...
-
-    this.valueSub = this.SignalKService.subscribePath(this.widgetUUID, this.config.paths['numericPath'].path, this.config.paths['numericPath'].source).subscribe(
-      newValue => {
-        this.dataValue = newValue.value;
-        this.zoneState = newValue.state;
-        //start flashing if alarm
-        if (this.zoneState == ZoneState.alarm && !this.flashInterval) {
-          this.flashInterval = setInterval(() => { 
-            this.flashOn = !this.flashOn;
-            this.updateCanvas();
-          }, 350); // used to flash stuff in alarm
-        } else if (this.zoneState != ZoneState.alarm) {
-          // stop alarming if not in alarm state
-          if (this.flashInterval) {
-            clearInterval(this.flashInterval);
-            this.flashInterval = null;
-          }
-        }
-        // init min/max
-        if (this.minValue === null) { this.minValue = this.dataValue; }
-        if (this.maxValue === null) { this.maxValue = this.dataValue; }
-        if (this.dataValue > this.maxValue) { this.maxValue = this.dataValue; }
-        if (this.dataValue < this.minValue) { this.minValue = this.dataValue; }
-        this.updateCanvas();
-      }
-    );
-  }
-
-  unsubscribePath() {
-    if (this.valueSub !== null) {
-      this.valueSub.unsubscribe();
-      this.valueSub = null;
-
-      this.SignalKService.unsubscribePath(this.widgetUUID, this.config.paths['numericPath'].path);
-    }
-  }
-
-// Subscribe to theme event
-subscribeTheme() {
-  this.themeNameSub = this.AppSettingsService.getThemeNameAsO().subscribe(
-    themeChange => {
-     setTimeout(() => {   // need a delay so browser getComputedStyles has time to complete theme application.
-      this.updateCanvas();
-      this.updateCanvasBG();
-     }, 100);
-  })
-}
-
-unsubscribeTheme(){
-  if (this.themeNameSub !== null) {
-    this.themeNameSub.unsubscribe();
-    this.themeNameSub = null;
-  }
-}
-
-  openWidgetSettings() {
-
-    let dialogRef = this.dialog.open(ModalWidgetComponent, {
-      width: '80%',
-      data: this.config
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      // save new settings
-      if (result) {
-        console.log(result);
-        this.unsubscribePath();//unsub now as we will change variables so wont know what was subbed before...
-        this.config = result;
-        this.WidgetManagerService.updateWidgetConfig(this.widgetUUID, this.config);
-        this.subscribePath();
-        this.updateCanvas();
-        this.updateCanvasBG();
-      }
-    });
-  }
-
-/* ******************************************************************************************* */
-/* ******************************************************************************************* */
-/* ******************************************************************************************* */
-/*                                  Canvas                                                     */
-/* ******************************************************************************************* */
-/* ******************************************************************************************* */
-/* ******************************************************************************************* */
-
-  updateCanvas() {
-    if (this.canvasCtx) {
-      this.canvasCtx.clearRect(0,0,this.canvasEl.nativeElement.width, this.canvasEl.nativeElement.height);
-      this.drawValue();
-      if (this.config.showMax || this.config.showMin) {
-        this.drawMinMax();
-      }
-    }
-  }
-
-  updateCanvasBG() {
-    if (this.canvasBGCtx) {
-      this.canvasBGCtx.clearRect(0,0,this.canvasEl.nativeElement.width, this.canvasEl.nativeElement.height);
-      this.drawTitle();
-      this.drawUnit();
-    }
-  }
-
-
-
-  drawValue() {
-    let maxTextWidth = Math.floor(this.canvasEl.nativeElement.width - (this.canvasEl.nativeElement.width * 0.15));
-    let maxTextHeight = Math.floor(this.canvasEl.nativeElement.height - (this.canvasEl.nativeElement.height * 0.2));
-    let valueText: any;
-
-    if (this.dataValue != null) {
-      let converted: number = Number(this.dataValue);
-      converted = this.UnitsService.convertUnit(this.config.paths['numericPath'].convertUnitTo, this.dataValue);
-      if (!isNaN(converted)) { // retest as convert stuff might have returned a text string
-        valueText = this.padValue(converted.toFixed(this.config.numDecimal), this.config.numInt, this.config.numDecimal);
-      } else {
-        valueText = converted;
-      }
-
-    } else {
-      valueText = "--";
-    }
-    //check if length of string has changed since laste time.
-    if (this.currentValueLength != valueText.length) {
-      //we need to set font size...
-      this.currentValueLength = valueText.length;
-
-      // start with large font, no sense in going bigger than the size of the canvas :) 
-      this.valueFontSize = maxTextHeight;
-      this.canvasCtx.font = "bold " + this.valueFontSize.toString() + "px Arial";
-      let measure = this.canvasCtx.measureText(valueText).width;
-      
-      // if we are not too wide, we stop there, maxHeight was our limit... if we're too wide, we need to scale back
-      if (measure > maxTextWidth) {
-        let estimateRatio = maxTextWidth / measure;
-        this.valueFontSize = Math.floor(this.valueFontSize * estimateRatio);
-        this.canvasCtx.font = "bold " + this.valueFontSize.toString() + "px Arial";
-      }
-      // now decrease by 1 to in case still too big
-      while (this.canvasCtx.measureText(valueText).width > maxTextWidth && this.valueFontSize > 0) {
-        this.valueFontSize--;
-        this.canvasCtx.font = "bold " + this.valueFontSize.toString() + "px Arial";
-      }
-    }
-
-    // get color based on zone
-    switch (this.zoneState) {
-
-      case ZoneState.alarm:
-
-        if (this.flashOn) {
-          this.canvasCtx.fillStyle = window.getComputedStyle(this.warnElement.nativeElement).color;
-        } else {
-          // draw warn background
-          this.canvasCtx.fillStyle = window.getComputedStyle(this.warnElement.nativeElement).color;
-          this.canvasCtx.fillRect(0,0,this.canvasEl.nativeElement.width, this.canvasEl.nativeElement.height);
-          // text color
-          this.canvasCtx.fillStyle = window.getComputedStyle(this.warnContrastElement.nativeElement).color;
-        }
-
-
-        break;
-
-      case ZoneState.warning:
-        this.canvasCtx.fillStyle = window.getComputedStyle(this.warnElement.nativeElement).color;
-        break;
-
-      default:
-        this.canvasCtx.fillStyle = window.getComputedStyle(this.wrapperDiv.nativeElement).color;
-    }
-
-    this.canvasCtx.font = "bold " + this.valueFontSize.toString() + "px Arial";
-    this.canvasCtx.textAlign = "center";
-    this.canvasCtx.textBaseline="middle";
-    this.canvasCtx.fillText(valueText,this.canvasEl.nativeElement.width/2,(this.canvasEl.nativeElement.height/2)+(this.valueFontSize/15), maxTextWidth);
-  }
-
-  drawTitle() {
-    var maxTextWidth = Math.floor(this.canvasEl.nativeElement.width - (this.canvasEl.nativeElement.width * 0.2));
-    var maxTextHeight = Math.floor(this.canvasEl.nativeElement.height - (this.canvasEl.nativeElement.height * 0.8));
-    // set font small and make bigger until we hit a max.
-    if (this.config.displayName === null) { return; }
-
-    // start with large font, no sense in going bigger than the size of the canvas :) 
-    var fontSize = maxTextHeight;
-    this.canvasBGCtx.font = "bold " + fontSize.toString() + "px Arial";
-    let measure = this.canvasBGCtx.measureText(this.config.displayName).width;
-    
-    // if we are not too wide, we stop there, maxHeight was our limit... if we're too wide, we need to scale back
-    if (measure > maxTextWidth) {
-      let estimateRatio = maxTextWidth / measure;
-      fontSize = Math.floor(fontSize * estimateRatio);
-      this.canvasBGCtx.font = "bold " + fontSize.toString() + "px Arial";
-    }
-    // now decrease by 1 to in case still too big
-    while (this.canvasBGCtx.measureText(this.config.displayName).width > maxTextWidth && fontSize > 0) {
-      fontSize--;
-      this.canvasBGCtx.font = "bold " + fontSize.toString() + "px Arial";
-    }
-
-    this.canvasBGCtx.textAlign = "left";
-    this.canvasBGCtx.textBaseline="top";
-    this.canvasBGCtx.fillStyle = window.getComputedStyle(this.wrapperDiv.nativeElement).color;
-    this.canvasBGCtx.fillText(this.config.displayName,this.canvasEl.nativeElement.width*0.03,this.canvasEl.nativeElement.height*0.03, maxTextWidth);
-  }
-
-  drawUnit() {
-    if (this.config.paths['numericPath'].convertUnitTo == 'unitless') { return; }
-    if (this.config.paths['numericPath'].convertUnitTo.startsWith('percent')) { return; }
-    if (this.config.paths['numericPath'].convertUnitTo == 'ratio') { return; }
-    if (this.config.paths['numericPath'].convertUnitTo.startsWith('lat')) { return; }
-    if (this.config.paths['numericPath'].convertUnitTo.startsWith('lon')) { return; }
-    var maxTextWidth = Math.floor(this.canvasEl.nativeElement.width - (this.canvasEl.nativeElement.width * 0.8));
-    var maxTextHeight = Math.floor(this.canvasEl.nativeElement.height - (this.canvasEl.nativeElement.height * 0.8));
-
-    // start with large font, no sense in going bigger than the size of the canvas :) 
-    var fontSize = maxTextHeight;
-    this.canvasBGCtx.font = "bold " + fontSize.toString() + "px Arial";
-    let measure = this.canvasBGCtx.measureText(this.config.paths['numericPath'].convertUnitTo).width;
-    
-    // if we are not too wide, we stop there, maxHeight was our limit... if we're too wide, we need to scale back
-    if (measure > maxTextWidth) {
-      let estimateRatio = maxTextWidth / measure;
-      fontSize = Math.floor(fontSize * estimateRatio);
-      this.canvasBGCtx.font = "bold " + fontSize.toString() + "px Arial";
-    }
-    // now decrease by 1 to in case still too big
-    while (this.canvasBGCtx.measureText(this.config.paths['numericPath'].convertUnitTo).width > maxTextWidth && fontSize > 0) {
-      fontSize--;
-      this.canvasBGCtx.font = "bold " + fontSize.toString() + "px Arial";
-    }
-
-    this.canvasBGCtx.textAlign = "right";
-    this.canvasBGCtx.textBaseline="bottom";
-    this.canvasBGCtx.fillStyle = window.getComputedStyle(this.wrapperDiv.nativeElement).color;
-    this.canvasBGCtx.fillText(this.config.paths['numericPath'].convertUnitTo,this.canvasEl.nativeElement.width*0.97,this.canvasEl.nativeElement.height*0.97, maxTextWidth);
-  }
-
-  drawMinMax() {
-
-    if (!this.config.showMin && !this.config.showMax) { return; } //no need to do anything if we're not showing min/max
-
-    let valueText: string = '';
-
-    if (this.config.showMin) {
-      if (this.minValue != null) {
-        let converted: number = this.UnitsService.convertUnit(this.config.paths['numericPath'].convertUnitTo, this.minValue);
-        if (!isNaN(converted)) { // retest as convert stuff might have returned a text string
-          valueText = valueText + " Min: " + this.padValue(converted.toFixed(this.config.numDecimal), this.config.numInt, this.config.numDecimal);
-        } else {
-          valueText = valueText + " Min: " + converted;
-        }
-
-      } else {
-        valueText = valueText + " Min: --";
-      }
-    }
-    if (this.config.showMax) {
-      if (this.maxValue != null) {
-        let converted = this.UnitsService.convertUnit(this.config.paths['numericPath'].convertUnitTo, this.maxValue);
-        if (!isNaN(converted)) { // retest as convert stuff might have returned a text string
-          valueText = valueText + " Max: " + this.padValue(converted.toFixed(this.config.numDecimal), this.config.numInt, this.config.numDecimal);
-        } else {
-          valueText = valueText + " Max: " + converted;
-        }
-      } else {
-        valueText = valueText + " Max: --";
-      }
-    }
-    valueText = valueText.trim();
-
-    if (this.currentMinMaxLength != valueText.length) {
-      this.currentMinMaxLength = valueText.length;
-      var maxTextWidth = Math.floor(this.canvasEl.nativeElement.width - (this.canvasEl.nativeElement.width * 0.6));
-      var maxTextHeight = Math.floor(this.canvasEl.nativeElement.height - (this.canvasEl.nativeElement.height * 0.85));
-
-      // start with large font, no sense in going bigger than the size of the canvas :) 
-      this.minMaxFontSize = maxTextHeight;
-      this.canvasBGCtx.font = "bold " + this.minMaxFontSize.toString() + "px Arial";
-      let measure = this.canvasBGCtx.measureText(valueText).width;
-      
-      // if we are not too wide, we stop there, maxHeight was our limit... if we're too wide, we need to scale back
-      if (measure > maxTextWidth) {
-        let estimateRatio = maxTextWidth / measure;
-        this.minMaxFontSize = Math.floor(this.minMaxFontSize * estimateRatio);
-        this.canvasBGCtx.font = "bold " + this.minMaxFontSize.toString() + "px Arial";
-      }
-      // now decrease by 1 to in case still too big
-      while (this.canvasBGCtx.measureText(valueText).width > maxTextWidth && this.minMaxFontSize > 0) {
-        this.minMaxFontSize--;
-        this.canvasBGCtx.font = "bold " + this.minMaxFontSize.toString() + "px Arial";
-      }
-
-    }
-
-    this.canvasCtx.font = "bold " + this.minMaxFontSize.toString() + "px Arial";
-    this.canvasCtx.textAlign = "left";
-    this.canvasCtx.textBaseline="bottom";
-    this.canvasCtx.fillStyle = window.getComputedStyle(this.wrapperDiv.nativeElement).color;
-    this.canvasCtx.fillText(valueText,this.canvasEl.nativeElement.width*0.03,this.canvasEl.nativeElement.height*0.97, maxTextWidth);
-  }
-
-  padValue(val, int, dec): string {
-    let i = 0;
-    let s, n, foo;
-    let strVal: string
-    val = parseFloat(val);
-    n = (val < 0);
-    val = Math.abs(val);
-    if (dec > 0) {
-        foo = val.toFixed(dec).toString().split('.');
-        s = int - foo[0].length;
-        for (; i < s; ++i) {
-            foo[0] = '0' + foo[0];
-        }
-        strVal = (n ? '-' : '') + foo[0] + '.' + foo[1];
-    }
-    else {
-        strVal = Math.round(val).toString();
-        s = int - strVal.length;
-        for (; i < s; ++i) {
-            strVal = '0' + strVal;
-        }
-        strVal = (n ? '-' : '') + strVal;
-    }
-    return strVal;
-  }
-
-}