@mxtommy/kip 1.3.0 → 2.0.0

package/src/app/svg-autopilot/svg-autopilot.component.spec.ts

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

package/src/app/svg-autopilot/svg-autopilot.component.ts

@@ -1,174 +0,0 @@
-import { Component, Input, ViewChild, ElementRef, SimpleChanges } from '@angular/core';
-import { trigger, state, style, animate, transition } from '@angular/animations';
-
-
-@Component({
-  selector: 'app-svg-autopilot',
-  templateUrl: './svg-autopilot.component.html',
-  // uses svg-wind SCSS styles
-  animations: [
-    trigger('fadeInOut', [
-      state('connected', style({
-        opacity: 0,
-      })),
-      state('disconnected', style({
-        opacity: 1,
-      })),
-      transition('connected => disconnected', [
-        animate('.3s')
-      ]),
-      transition('disconnected => connected', [
-        animate('1s')
-      ]),
-    ]),
-  ]
-})
-export class SvgAutopilotComponent {
-  // AP screen
-  @ViewChild('apStencil', {static: true, read: ElementRef}) ApStencil: ElementRef;
-  @ViewChild('countDown', {static: true, read: ElementRef}) countDown: ElementRef;
-
-  // SVG
-  @ViewChild('compassAnimate', {static: true, read: ElementRef}) compassAnimate: ElementRef;
-  @ViewChild('appWindAnimate', {static: true, read: ElementRef}) appWindAnimate: ElementRef;
-  @ViewChild('rudderPrtAnimate', {static: true, read: ElementRef}) rudderPrtAnimate: ElementRef;
-  @ViewChild('rudderStbAnimate', {static: true, read: ElementRef}) rudderStbAnimate: ElementRef;
-
-  @Input('compassHeading') compassHeading: number;
-  @Input('appWindAngle') appWindAngle: number;
-  @Input('rudderAngle') rudderAngle: number;
-  @Input('apState') apState: string;
-  @Input('apTargetAppWindAngle') apTargetAppWindAngle: string;
-  @Input('isApConnected') isApConnected: boolean;
-
-  constructor() { }
-
-  // compass
-  oldCompassRotate: number = 0;
-  newCompassRotate: number = 0;
-  headingValue: string ="0";
-
-  // Apparent wind
-  oldAppWindAngle: string = "0";
-  newAppWindAngle: string = "0";
-  oldAppWindRotateAngle: string = "0";
-  newAppWindRotateAngle: string = "0";
-
-  // rudder
-  oldRudderPrtAngle: number = 0;
-  newRudderPrtAngle: number = 0;
-  oldRudderStbAngle: number = 0;
-  newRudderStbAngle: number = 0;
-
-  activityIconVisibility: string = "hidden;";
-  errorIconVisibility: string = "hidden";
-  msgStencilVisibility: string = "hidden";
-  msgStencilInnerHTML: string = "Empty Message Stencil";
-  errorStencilVisibility: string = "hidden";
-  errorStencilInnerText: string = "Empty Error Stencil";
-  messageVisibility: string = "hidden";
-  messageInnerText: string = "";
-
-
-  ngOnChanges(changes: SimpleChanges) {
-
-    //heading
-    if (changes.compassHeading) {
-      if (! changes.compassHeading.firstChange) {
-        this.oldCompassRotate = this.newCompassRotate;
-        this.newCompassRotate = changes.compassHeading.currentValue;
-        this.headingValue = this.newCompassRotate.toFixed(0);
-        this.compassAnimate.nativeElement.beginElement();
-      }
-    }
-
-    //AP State
-    if (changes.apState) {
-      if (! changes.apState.firstChange) {
-        this.apState = this.apState.toUpperCase();
-      }
-    }
-
-    //AP Target Apparent Wind Angle
-    if (changes.apTargetAppWindAngle) {
-      if (! changes.apTargetAppWindAngle.firstChange) {
-        this.apTargetAppWindAngle = changes.apTargetAppWindAngle.currentValue.toFixed(0);
-      }
-    }
-
-    //appWindAngle
-    if (changes.appWindAngle) {
-      if (! changes.appWindAngle.firstChange) {
-        this.oldAppWindAngle = this.newAppWindAngle;
-        this.newAppWindAngle = changes.appWindAngle.currentValue.toFixed(0);
-
-        let oldAngle = Number(this.oldAppWindAngle)
-        let newAngle = Number(this.newAppWindAngle);
-        let diff = oldAngle - newAngle;
-
-        // only update if on DOM and value rounded changed
-        if (this.appWindAnimate && (diff != 0)) {
-          // Special cases to smooth out passing between 359 to/from 0
-          // if more than half the circle, it could need to go over the 359 / 0 values
-          if ( Math.abs(diff) > 180 ) {
-            // In what direction are we moving?
-            if (Math.sign(diff) == 1) {
-              if (oldAngle == 359) {
-                // special cases
-                this.oldAppWindAngle = "0";
-                this.appWindAnimate.nativeElement.beginElement();
-              } else {
-                this.newAppWindAngle = "359";
-                this.appWindAnimate.nativeElement.beginElement();
-                this.oldAppWindAngle = "0";
-                this.newAppWindAngle = changes.appWindAngle.currentValue.toFixed(0);
-                this.appWindAnimate.nativeElement.beginElement();
-              }
-            } else {
-              if (oldAngle == 0) {
-                // special cases
-                this.oldAppWindAngle = "359";
-                this.appWindAnimate.nativeElement.beginElement();
-              } else {
-                this.newAppWindAngle = "0";
-                this.appWindAnimate.nativeElement.beginElement();
-                this.oldAppWindAngle = "359";
-                this.newAppWindAngle = changes.appWindAngle.currentValue.toFixed(0);
-                this.appWindAnimate.nativeElement.beginElement();
-              }
-            }
-          } else {
-            this.appWindAnimate.nativeElement.beginElement();
-          }
-        }
-      }
-    }
-
-    //rudderAngle
-    if (changes.rudderAngle) {
-      if (! changes.rudderAngle.firstChange) {
-        if (changes.rudderAngle.currentValue <=0) {
-          this.oldRudderPrtAngle = 0;
-          this.newRudderPrtAngle = 0;
-
-          this.oldRudderStbAngle = this.newRudderStbAngle
-          this.newRudderStbAngle = Math.round(changes.rudderAngle.currentValue * 7.16 * -1); //pixel to angle ratio for rudder box and set positive
-        } else {
-          this.oldRudderStbAngle = 0;
-          this.newRudderStbAngle = 0;
-
-          this.oldRudderPrtAngle = this.newRudderPrtAngle;
-          this.newRudderPrtAngle = Math.round(changes.rudderAngle.currentValue * 7.16); //pixel to angle ratio for rudder box
-        }
-
-        if (this.rudderPrtAnimate) { // only update if on dom...
-          this.rudderPrtAnimate.nativeElement.beginElement();
-        }
-        if (this.rudderStbAnimate) { // only update if on dom...
-          this.rudderStbAnimate.nativeElement.beginElement();
-        }
-      }
-    }
-  }
-
-}

package/src/app/svg-simple-linear-gauge/svg-simple-linear-gauge.component.html

@@ -1,119 +0,0 @@
-
-<svg
-   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   height="100%"
-   width="100%"
-   viewBox="0 0 205 50"
-   version="1.1"
-   id="svg8">
-   <defs
-     id="defs2">
-    <linearGradient id="gaugeBarGradient">
-      <stop
-         id="stop849"
-         offset="0"
-         style="stop-opacity:1;"
-         [style.stop-color]="barColorGradient" />
-      <stop
-         id="stop851"
-         offset="0.40"
-         style="stop-opacity:0;"
-         [style.stop-color]="barColorGradient" />
-    </linearGradient>
-    <linearGradient
-       gradientTransform="translate(5,-30)"
-       gradientUnits="userSpaceOnUse"
-       y2="34.5"
-       x2="-5"
-       y1="34.5"
-       x1="-6"
-       id="linearGradient855"
-       xlink:href="#gaugeBarGradient" />
-  </defs>
-  <g
-     id="layer1"
-     style="display:inline">
-    <rect
-       style="opacity:1;fill-opacity:1;stroke:none;stroke-width:0.265899;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       [style.fill]="barColorBackground"
-       id="GaugeBackground"
-       width="195"
-       height="9"
-       x="5"
-       y="30"
-       ry="0" />
-    <defs>
-      <g
-        id="gaugeBar">
-        <rect
-          id="gaugeValue"
-          width="1"
-          height="9"
-          x="0"
-          y="0"
-          ry="0"
-          style="mix-blend-mode:normal;fill-opacity:1;stroke-width:0.0864229;"
-          />
-        <rect
-          id="GaugeValueGradient"
-          transform="scale(-1,1)"
-          width="1"
-          height="9"
-          x="-1"
-          y="0"
-          ry="0"
-          style="display:inline;opacity:0.38141;mix-blend-mode:multiply;fill:url(#linearGradient855);fill-opacity:1;stroke-width:0.0864229"/>
-      </g>
-    </defs>
-    <use xlink:href="#gaugeBar" transform="translate(5,30)" [style.fill]="barColor">
-      <animateTransform #gaugeBarAnimate attributeName="transform"
-      type="scale"
-      [attr.from]="oldGaugeValue + ' 1'"
-      [attr.to]="newGaugeValue +' 1'"
-      begin="indefinite"
-      dur="0.5s"
-      additive="sum"
-      fill="freeze" />
-    </use>
-  </g>
-  <g
-     id="layer2"
-     style="display:inline">
-    <text
-       xml:space="preserve"
-       class="wind-text"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.7px;line-height:1.25;font-family:Arial;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;"
-       x="4.1731763"
-       y="25.413595"
-       id="displayNameText"><tspan
-         id="tspan1945"
-         x="4.1731763"
-         y="25.413595"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.7px;font-family:Arial;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;">{{displayName}}</tspan>
-    </text>
-    <text
-       text-anchor="end"
-       id="gaugeTexts"
-       y="25.293016"
-       x="200.37138"
-       class="wind-text"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;line-height:1.25;font-family:Arial;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;"
-       xml:space="preserve">
-       <tspan
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:Arial;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;"
-         y="25.293016"
-         x="200.37138"
-         id="valueText">{{dataValue}}</tspan>
-        <tspan
-         dy="-9"
-         id="unitText"
-         style="text-transform: capitalize;font-size:9.87778px">{{unitLabel}}</tspan>
-    </text>
-  </g>
-</svg>

package/src/app/svg-simple-linear-gauge/svg-simple-linear-gauge.component.spec.ts

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

package/src/app/svg-simple-linear-gauge/svg-simple-linear-gauge.component.ts

@@ -1,49 +0,0 @@
-import { ViewChild, ElementRef, Input, Component, SimpleChanges, OnChanges } from '@angular/core';
-
-@Component({
-  selector: 'svg-simple-linear-gauge',
-  templateUrl: './svg-simple-linear-gauge.component.html',
-  styleUrls: ['./svg-simple-linear-gauge.component.scss']
-})
-export class SvgSimpleLinearGaugeComponent implements OnChanges {
-  @ViewChild('gaugeBarAnimate', {static: true}) gaugeBarAnimate: ElementRef;
-  @Input('displayName') displayName: string;
-  @Input('dataValue') dataValue: number;
-  @Input('unitLabel') unitLabel: string;
-  @Input('barColor') barColor: string;
-  @Input('barColorGradient') barColorGradient: string;
-  @Input('barColorBackground') barColorBackground: string;
-  @Input('gaugeValue') gaugeValue: number;
-  @Input('gaugeMinValue') gaugeMinValue: number;
-  @Input('gaugeMaxValue') gaugeMaxValue: number;
-
-  newGaugeValue: number = 1;
-  oldGaugeValue: number = 1;
-
-  constructor() { }
-
-
-  ngOnChanges(changes: SimpleChanges) {
-
-    // Data Value
-    if (changes.dataValue) {
-      if (! changes.dataValue.firstChange) {
-        this.dataValue = changes.dataValue.currentValue;
-      }
-    }
-
-    // Gauge bar value
-    if (changes.gaugeValue) {
-      if (! changes.gaugeValue.firstChange) {
-        // scale value to svg gauge pixel length (195), proportional to gauge min/max set values
-        let scaleRange = this.gaugeMaxValue - this.gaugeMinValue;
-        let scaleSliceValue = 195 / scaleRange;
-
-        this.oldGaugeValue = this.newGaugeValue;
-        this.newGaugeValue = changes.gaugeValue.currentValue * scaleSliceValue;
-
-        this.gaugeBarAnimate.nativeElement.beginElement();
-      }
-    }
-  }
-}