@mxtommy/kip 1.3.0 → 2.0.0

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

@@ -1,17 +0,0 @@
-<div class="mainWrapper">
-
-  <div class="switchContainer">
-    <label class="switch">
-      <input #switchSlider type="checkbox" [checked]="state" (change)="sendDelta(switchSlider.checked)">
-      <span class="slider"></span>
-    </label>
-  </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-switch/widget-switch.component.spec.ts

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

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

@@ -1,134 +0,0 @@
-import { Component, Input, OnInit, OnDestroy, Inject } 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 { SignalkRequestsService, skRequest } from '../signalk-requests.service';
-import { WidgetManagerService, IWidget, IWidgetConfig } from '../widget-manager.service';
-
-
-const defaultConfig: IWidgetConfig = {
-  displayName: null,
-  filterSelfPaths: true,
-  paths: {
-    "statePath": {
-      description: "State Data",
-      path: null,
-      source: null,
-      pathType: "boolean",
-      isPathConfigurable: true,
-      convertUnitTo: "unitless"
-    }
-  },
-};
-
-@Component({
-  selector: 'app-widget-switch',
-  templateUrl: './widget-switch.component.html',
-  styleUrls: ['./widget-switch.component.css']
-})
-export class WidgetSwitchComponent implements OnInit, OnDestroy {
-
-  @Input('widgetUUID') widgetUUID: string;
-  @Input('unlockStatus') unlockStatus: boolean;
-
-  activeWidget: IWidget;
-  config: IWidgetConfig;
-
-  dataValue: number = null;
-  dataTimestamp: number = Date.now();
-  valueSub: Subscription = null;
-
-  skRequestSub: Subscription = null;
-
-  state: boolean = null;
-
-  constructor(
-    public dialog:MatDialog,
-    private SignalKService: SignalKService,
-    private SignalkRequestsService: SignalkRequestsService,
-    private WidgetManagerService: WidgetManagerService) {
-  }
-
-  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.subscribeSKRequest();
-  }
-
-  ngOnDestroy() {
-    this.unsubscribePath();
-    this.unsubscribeSKRequest();
-  }
-
-  subscribePath() {
-    this.unsubscribePath();
-    if (typeof(this.config.paths['statePath'].path) != 'string') { return } // nothing to sub to...
-
-    this.valueSub = this.SignalKService.subscribePath(this.widgetUUID, this.config.paths['statePath'].path, this.config.paths['statePath'].source).subscribe(
-      newValue => {
-        this.state = newValue.value;
-      }
-    );
-  }
-
-  unsubscribePath() {
-    if (this.valueSub !== null) {
-      this.valueSub.unsubscribe();
-      this.valueSub = null;
-      this.SignalKService.unsubscribePath(this.widgetUUID, this.config.paths['statePath'].path);
-    }
-  }
-
-  subscribeSKRequest() {
-    this.skRequestSub = this.SignalkRequestsService.subscribeRequest().subscribe(requestResult => {
-      if (requestResult.widgetUUID == this.widgetUUID) {
-        if (requestResult.statusCode != 200){
-          let errMsg = requestResult.statusCode + " - " +requestResult.statusCodeDescription;
-          if (requestResult.message){
-            errMsg = errMsg + " Server Message: " + requestResult.message;
-          }
-          alert('[Widget Name: ' + errMsg);
-        } else {
-          console.log("AP Received: \n" + JSON.stringify(requestResult));
-        }
-      }
-    });
-  }
-
-  unsubscribeSKRequest() {
-    this.skRequestSub.unsubscribe();
-  }
-
-  sendDelta(value: boolean) {
-   this.SignalkRequestsService.putRequest(this.config.paths['statePath'].path, value, this.widgetUUID);
-  }
-
-  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();
-      }
-    });
-  }
-
-}

package/src/app/widget-text-generic/widget-text-generic.component.css

@@ -1,55 +0,0 @@
-canvas {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-
-.textGenericWrapper {
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
-.textGenericLabel {
-    position: absolute;
-    top: 5%;
-    left: 5%;
-
-}
-
-.textGenericValue {
-    position: absolute;    
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: "Arial", Times, serif;
-    font-weight: bold;
-}
-
-.textGenericUnit {
-    position: absolute;
-    bottom: 5%;
-    right: 5%;
-}
-
-
-.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-text-generic/widget-text-generic.component.html

@@ -1,9 +0,0 @@
-<div #wrapperDiv class="textGenericWrapper">
-  <canvas id="canvasValue" #canvasEl></canvas>
-  <canvas id="cancasBG" #canvasBG></canvas>
-  <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-text-generic/widget-text-generic.component.spec.ts

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

package/src/app/widget-text-generic/widget-text-generic.component.ts

@@ -1,253 +0,0 @@
-import { Component, Input, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-
-import { ModalWidgetComponent } from '../modal-widget/modal-widget.component';
-import { SignalKService } from '../signalk.service';
-import { AppSettingsService } from '../app-settings.service';
-import { WidgetManagerService, IWidget, IWidgetConfig } from '../widget-manager.service';
-import { isNull } from 'util';
-
-
-const defaultConfig: IWidgetConfig = {
-  displayName: null,
-  filterSelfPaths: true,
-  paths: {
-    "stringPath": {
-      description: "String Data",
-      path: null,
-      source: null,
-      pathType: "string",
-      isPathConfigurable: true,
-    }
-  },
-};
-
-@Component({
-  selector: 'app-widget-text-generic',
-  templateUrl: './widget-text-generic.component.html',
-  styleUrls: ['./widget-text-generic.component.css']
-})
-export class WidgetTextGenericComponent implements OnInit, OnDestroy {
-
-  @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;
-
-  activeWidget: IWidget;
-    config: IWidgetConfig;
-
-  dataValue: any = null;
-
-  dataTimestamp: number = Date.now();
-
-  valueFontSize: number = 1;
-  currentValueLength: number = 0; // length (in charaters) of value text to be displayed. if changed from last time, need to recalculate font size...
-  canvasCtx;
-  canvasBGCtx;
-
-  //subs
-  valueSub: Subscription = null;
-
-  // dynamics theme support
-  themeNameSub: Subscription = null;
-
-
-  constructor(
-    public dialog:MatDialog,
-    private SignalKService: SignalKService,
-    private WidgetManagerService: WidgetManagerService,
-    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.canvasCtx = this.canvasEl.nativeElement.getContext('2d');
-    this.canvasBGCtx = this.canvasBG.nativeElement.getContext('2d');
-
-    this.subscribePath();
-    this.subscribeTheme();
-    this.resizeWidget();
-  }
-
-  ngOnDestroy() {
-    this.unsubscribePath();
-    this.unsubscribeTheme();
-  }
-
-  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.updateCanvas();
-      this.updateCanvasBG();
-    }
-
-  }
-
-
-  subscribePath() {
-    this.unsubscribePath();
-    if (typeof(this.config.paths['stringPath'].path) != 'string') { return } // nothing to sub to...
-    this.valueSub = this.SignalKService.subscribePath(this.widgetUUID, this.config.paths['stringPath'].path, this.config.paths['stringPath'].source).subscribe(
-      newValue => {
-        this.dataValue = newValue.value;
-        this.updateCanvas();
-      }
-    );
-  }
-
-  unsubscribePath() {
-    if (this.valueSub !== null) {
-      this.valueSub.unsubscribe();
-      this.valueSub = null;
-      this.SignalKService.unsubscribePath(this.widgetUUID, this.config.paths['stringPath'].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.drawTitle();
-        this.drawValue();
-      }, 100);
-    })
-  }
-
-  unsubscribeTheme(){
-    if (this.themeNameSub !== null) {
-      this.themeNameSub.unsubscribe();
-      this.themeNameSub = null;
-    }
-  }
-
-  openWidgetSettings(content) {
-
-    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.resizeWidget();
-      }
-
-    });
-  }
-
-
-/* ******************************************************************************************* */
-/* ******************************************************************************************* */
-/* ******************************************************************************************* */
-/*                                  Canvas                                                     */
-/* ******************************************************************************************* */
-/* ******************************************************************************************* */
-/* ******************************************************************************************* */
-
-  updateCanvas() {
-    if (this.canvasCtx) {
-      this.canvasCtx.clearRect(0,0,this.canvasEl.nativeElement.width, this.canvasEl.nativeElement.height);
-      this.drawValue();
-    }
-  }
-
-  updateCanvasBG() {
-    if (this.canvasBGCtx) {
-      this.canvasBGCtx.clearRect(0,0,this.canvasEl.nativeElement.width, this.canvasEl.nativeElement.height);
-      this.drawTitle();
-    }
-  }
-
-  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 : string;
-
-    if (this.dataValue === null) {
-      valueText = "--";
-    } else {
-      valueText = this.dataValue;
-    }
-    //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";
-      }
-    }
-
-    this.canvasCtx.font = "bold " + this.valueFontSize.toString() + "px Arial";
-    this.canvasCtx.textAlign = "center";
-    this.canvasCtx.textBaseline="middle";
-    this.canvasCtx.fillStyle = window.getComputedStyle(this.wrapperDiv.nativeElement).color;
-    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; }
-    var fontSize = 1;
-
-    this.canvasBGCtx.font = "bold " + fontSize.toString() + "px Arial"; // need to init it so we do loop at least once :)
-    while ( (this.canvasBGCtx.measureText(this.config.displayName).width < maxTextWidth) && (fontSize < maxTextHeight)) {
-        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);
-  }
-
-
-
-
-}

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

@@ -1,34 +0,0 @@
-<h1>
-  Welcome to KIP!
-</h1>
-
-<p>NOTES: For complete functionality, certain SignalK plugin should be installed on the server you are connecting to.</p>
-<ul>
-  <li>@signalk-alarm-silencer: To silence Notifications on the server. This enables Kip to instruct the SignalK server to silence said alarm for on all devices supporting SignalK Notifications, else Kip will be silenced.</li>
-  <li>@signalk/signalk-autopilot: required for the N2k Autopilot to function.<br/><b>Use the Kip N2k autopilot at your own risk. Use with caution and constant supervision.</b></li>
-</ul>
-
-<p>If you want to dive right in to see what KIP can do, you can use this button to load demo configuration:</p>
-<button mat-raised-button routerLink="/demo">Load Demo</button>
-
-<div *ngIf="!unlockStatus">
-  <h2>Unlocking</h2>
-  <p>
-    KIP is "Locked" by default. This is to prevent accidental interaction from touch screens from changing anything.
-    You can unlock KIP using the hamburger icon in the lower right corner and selecting "Configuration -> Edit Layout". Go Ahead try it now!
-  </p>
-</div>
-<div *ngIf="unlockStatus">
-  <h2>Configuring</h2>
-  <p>
-    Now that KIP is unlocked, you can do a few actions.
-  </p>
-  <ul>
-    <li>The icon in the lower right can be used to select the Widget you would like to display</li>
-    <li>The icon in the lower left can be used to "split" the existing area. You can use this to display multiple items on one page</li>
-    <li>The "X" in the upper right can be used to delete an area (basically undoing a split)</li>
-    <li>Once a widget is selected, there will be a gear in the lower middle. Clicking it will allow you to setup the widget parameters</li>
-  </ul>
-
-
-</div>

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

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

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

@@ -1,18 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-widget-tutorial',
-  templateUrl: './widget-tutorial.component.html',
-  styleUrls: ['./widget-tutorial.component.css']
-})
-export class WidgetTutorialComponent implements OnInit {
-
-  @Input('widgetUUID') widgetUUID: string;
-  @Input('unlockStatus') unlockStatus: boolean;
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

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

@@ -1,3 +0,0 @@
-<p>
-  widget-unknown!
-</p>

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

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

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

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-widget-unknown',
-  templateUrl: './widget-unknown.component.html',
-  styleUrls: ['./widget-unknown.component.css']
-})
-export class WidgetUnknownComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

package/src/app/widget-wind/widget-wind.component.css

@@ -1,24 +0,0 @@
-.wrapper {
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
-
-.settingsButton {
-    position: absolute;
-    bottom: 5%;
-    left: 50%;
-    transform: translate(-50%);
-}
-
-.tab-group {
-    border: 1px solid #e8e8e8;
-}
-
-.tab-content {
-    padding: 16px;
-}
-
-.full-width {
-    width: 100%;
-}