SwitchKeymap rendering

config-serializer/config-items/UhkConfiguration.ts

@@ -1,6 +1,7 @@
 import {Serializable} from '../Serializable';
 import {ModuleConfigurations} from './ModuleConfigurations';
 import {KeyMaps} from './KeyMaps';
+import {KeyMap} from './KeyMap';
 import {Macros} from './Macros';
 import {UhkBuffer} from '../UhkBuffer';
 import {assertUInt8, assertUInt32} from '../assert';
@@ -85,4 +86,13 @@ export class UhkConfiguration extends Serializable<UhkConfiguration> {
     toString(): string {
         return `<UhkConfiguration signature="${this.signature}">`;
     }
+
+    getKeymap(keymapId: number): KeyMap {
+        let keyMaps: KeyMap[] = this.keyMaps.elements;
+        for (let i = 0; i < keyMaps.length; ++i) {
+            if (keymapId === keyMaps[i].id) {
+                return keyMaps[i];
+            }
+        }
+    }
 }

config-serializer/uhk-config.json

@@ -392,7 +392,8 @@
                                     "keyActionType": "none"
                                 },
                                 {
-                                    "keyActionType": "none"
+                                    "keyActionType": "switchKeymap",
+                                    "keymapId": 2
                                 },
                                 {
                                     "keyActionType": "none"
@@ -824,6 +825,28 @@
                     ]
                 }
             ]
+        },
+        {
+            "id": 2,
+            "isDefault": false,
+            "abbreviation": "DVR",
+            "name": "DVR",
+            "layers": [
+                {
+                    "modules": [
+                        {
+                            "id": 0,
+                            "pointerRole": "move",
+                            "keyActions": []
+                        },
+                        {
+                            "id": 1,
+                            "pointerRole": "move",
+                            "keyActions": []
+                        }
+                    ]
+                }
+            ]
         }
     ],
     "macros": [

src/components/keys/svg-keyboard-key.component.ts

@@ -6,17 +6,22 @@ import {KeystrokeAction} from '../../../config-serializer/config-items/Keystroke
 import {KeystrokeModifiersAction, KeyModifiers} from '../../../config-serializer/config-items/KeystrokeModifiersAction';
 import {SwitchLayerAction, LayerName}  from '../../../config-serializer/config-items/SwitchLayerAction';
 import {MapperService} from '../../services/mapper.service';
+import {SwitchKeymapAction} from '../../../config-serializer/config-items/SwitchKeymapAction';
+import {UhkConfiguration} from '../../../config-serializer/config-items/UhkConfiguration';
+import {UhkConfigurationService} from '../../services/uhk-configuration.service';
 
 import {SvgOneLineTextKeyComponent} from './svg-one-line-text-key.component';
 import {SvgTwoLineTextKeyComponent} from './svg-two-line-text-key.component';
 import {SvgSingleIconKeyComponent} from './svg-single-icon-key.component';
 import {SvgTextIconKeyComponent} from './svg-text-icon-key.component';
+import {SvgSwitchKeymapKeyComponent} from './svg-switch-keymap-key.component';
 
 enum LabelTypes {
     OneLineText,
     TwoLineText,
     TextIcon,
-    SingleIcon
+    SingleIcon,
+    SwitchKeymap
 }
 
 @Component({
@@ -49,6 +54,11 @@ enum LabelTypes {
                     [width]="width"
                     [icon]="labelSource">
             </svg:g>
+            <svg:g svg-switch-keymap-key *ngSwitchWhen="enumLabelTypes.SwitchKeymap"
+                    [height]="height"
+                    [width]="width"
+                    [abbreviation]="labelSource">
+            </svg:g>
         </svg:g>
      `,
     directives:
@@ -58,7 +68,8 @@ enum LabelTypes {
         SvgOneLineTextKeyComponent,
         SvgTwoLineTextKeyComponent,
         SvgSingleIconKeyComponent,
-        SvgTextIconKeyComponent
+        SvgTextIconKeyComponent,
+        SvgSwitchKeymapKeyComponent
     ]
 })
 export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
@@ -77,7 +88,7 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
     private labelSource: any;
     private labelType: LabelTypes;
 
-    constructor(private mapperService: MapperService) { }
+    constructor(private mapperService: MapperService, private uhkConfigurationService: UhkConfigurationService) { }
 
     ngOnInit() {
         this.setLabels();
@@ -163,11 +174,15 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
                     text: newLabelSource,
                     icon: this.mapperService.getIcon('toggle')
                 };
-                console.log(keyAction, this.labelSource);
             } else {
                 this.labelType = LabelTypes.OneLineText;
                 this.labelSource = newLabelSource;
             }
+        } else if (this.keyAction instanceof SwitchKeymapAction) {
+            let keyAction: SwitchKeymapAction = this.keyAction as SwitchKeymapAction;
+            this.labelType = LabelTypes.SwitchKeymap;
+            let uhkConfiguration: UhkConfiguration = this.uhkConfigurationService.getUhkConfiguration();
+            this.labelSource = uhkConfiguration.getKeymap(keyAction.keymapId).abbreviation;
         }
 
     }

src/components/keys/svg-switch-keymap-key.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import {MapperService} from '../../services/mapper.service';
+
+@Component({
+    moduleId: module.id,
+    selector: 'g[svg-switch-keymap-key]',
+    template:
+    `
+        <svg:use [attr.xlink:href]="icon"
+                [attr.width]="width / 4"
+                [attr.height]="height / 4"
+                [attr.x]="width * 3 / 8"
+                [attr.y]="height / 5"
+                fill="white">
+        </svg:use>
+        <svg:text
+            [attr.x]="0"
+            [attr.y]="height * 2 / 3"
+            [attr.text-anchor]="'middle'"
+            [attr.font-size]="19"
+            [attr.font-family]="'Helvetica'"
+            [attr.fill]="'#ffffff'"
+            style="dominant-baseline: central">
+                <tspan [attr.x]="width / 2">{{ abbreviation }}</tspan>
+        </svg:text>
+    `
+})
+export class SvgSwitchKeymapKeyComponent implements OnInit {
+    @Input() width: number;
+    @Input() height: number;
+    @Input() abbreviation: string;
+    private icon: string;
+
+    constructor(private mapperService: MapperService) { }
+
+    ngOnInit() {
+        this.icon = this.mapperService.getIcon('switch-keymap');
+    }
+
+}

src/components/keys/svg-text-icon-key.component.ts

@@ -32,8 +32,6 @@ export class SvgTextIconKeyComponent implements OnInit {
 
     constructor() { }
 
-    ngOnInit() {
+    ngOnInit() { }
-        console.log(this);
-    }
 
 }

src/main-app.component.ts

@@ -1,12 +1,12 @@
 import { Component, OnInit, AfterViewInit, Renderer, ViewChildren, QueryList, ElementRef} from '@angular/core';
 
-import {UhkConfiguration} from '../config-serializer/config-items/UhkConfiguration';
 import {Layers} from '../config-serializer/config-items/Layers';
 
 import {SvgKeyboardComponent} from './components/svg-keyboard.component';
 import {SvgModule} from './components/svg-module.model';
 
 import {DataProviderService} from './services/data-provider.service';
+import {UhkConfigurationService} from './services/uhk-configuration.service';
 
 @Component({
     selector: 'main-app',
@@ -96,7 +96,8 @@ import {DataProviderService} from './services/data-provider.service';
         }
 
     `],
-    directives: [SvgKeyboardComponent]
+    directives: [SvgKeyboardComponent],
+    providers: [UhkConfigurationService]
 })
 export class MainAppComponent implements OnInit, AfterViewInit {
     @ViewChildren('baseButton,modButton,fnButton,mouseButton')
@@ -115,7 +116,11 @@ export class MainAppComponent implements OnInit, AfterViewInit {
 
     private numAnimationInProgress: number;
 
-    constructor(private renderer: Renderer, private dps: DataProviderService) {
+    constructor(
+        private renderer: Renderer,
+        private dps: DataProviderService,
+        private uhkConfigurationService: UhkConfigurationService
+    ) {
         this.buttons = [];
         this.keyboards = [];
         this.selectedLayerIndex = -1;
@@ -132,9 +137,7 @@ export class MainAppComponent implements OnInit, AfterViewInit {
         this.modules = svg.g[0].g.map(obj => new SvgModule(obj));
         this.modules = [this.modules[1], this.modules[0]]; // TODO: remove if the svg will be correct
 
-        let uhkConfig: UhkConfiguration = new UhkConfiguration();
+        this.layers = this.uhkConfigurationService.getUhkConfiguration().keyMaps.elements[0].layers;
-        uhkConfig.fromJsObject(this.dps.getUHKConfig());
-        this.layers = uhkConfig.keyMaps.elements[0].layers;
 
     }
 

src/services/mapper.service.ts

@@ -125,7 +125,7 @@ export class MapperService {
     private initNameToFileNames(): void {
         this.nameToFileName = new Map<string, string>();
         this.nameToFileName.set('toggle', 'icon-kbd__fn--toggle');
+        this.nameToFileName.set('switch-keymap', 'icon-kbd__mod--switch-layout');
     }
 
-
 }

src/services/uhk-configuration.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import {DataProviderService} from './data-provider.service';
+
+import {UhkConfiguration} from '../../config-serializer/config-items/UhkConfiguration';
+
+@Injectable()
+export class UhkConfigurationService {
+
+    private configuration: UhkConfiguration;
+
+    constructor(private dataProviderService: DataProviderService) {
+        this.configuration = new UhkConfiguration().fromJsObject(this.dataProviderService.getUHKConfig());
+    }
+
+    getUhkConfiguration(): UhkConfiguration {
+        return this.configuration;
+    }
+
+}