From dee9c1077bb06014be28f09fdcb15f36f94cc884 Mon Sep 17 00:00:00 2001 From: Nejc Zdovc Date: Mon, 29 Aug 2016 21:51:30 +0200 Subject: [PATCH] Add keymap page (#80) --- src/app.module.ts | 18 +- .../keymap/add/keymap-add.component.html | 32 + .../keymap/add/keymap-add.component.scss | 61 ++ .../keymap/add/keymap-add.component.ts | 27 + src/components/keymap/index.ts | 1 + src/components/keymap/keymap.component.ts | 3 +- src/components/keymap/keymap.routes.ts | 5 + .../side-menu/side-menu.component.html | 2 +- .../side-menu/side-menu.component.ts | 1 - .../svg/keyboard/svg-keyboard.component.html | 3 +- .../svg/keyboard/svg-keyboard.component.ts | 12 +- .../svg/module/svg-module.component.html | 5 +- .../svg/module/svg-module.component.ts | 19 +- .../svg/wrap/svg-keyboard-wrap.component.html | 17 +- .../svg/wrap/svg-keyboard-wrap.component.scss | 36 +- .../svg/wrap/svg-keyboard-wrap.component.ts | 90 +- src/config-serializer/config-items/Keymap.ts | 6 + src/config-serializer/default-keymaps.json | 947 ++++++++++++++++++ src/config-serializer/uhk-config.json | 3 + src/services/data-provider.service.ts | 4 + 20 files changed, 1258 insertions(+), 34 deletions(-) create mode 100644 src/components/keymap/add/keymap-add.component.html create mode 100644 src/components/keymap/add/keymap-add.component.scss create mode 100644 src/components/keymap/add/keymap-add.component.ts create mode 100644 src/config-serializer/default-keymaps.json diff --git a/src/app.module.ts b/src/app.module.ts index 6b0bf163..25015fab 100644 --- a/src/app.module.ts +++ b/src/app.module.ts @@ -10,11 +10,15 @@ import { KeymapComponent } from './components/keymap'; import { MacroComponent } from './components/macro'; import { LegacyLoaderComponent } from './components/legacy-loader'; import { NotificationComponent } from './components/notification'; -import { SvgKeystrokeKeyComponent, SvgOneLineTextKeyComponent, SvgTwoLineTextKeyComponent } from './components/svg/keys'; -import {SvgKeyboardWrapComponent} from './components/svg/wrap/svg-keyboard-wrap.component'; -import {LayersComponent} from './components/layers/layers.component'; -import {SvgKeyboardComponent} from './components/svg/keyboard/svg-keyboard.component'; -import {PopoverComponent} from './components/popover/popover.component'; +import { + SvgKeystrokeKeyComponent, SvgOneLineTextKeyComponent, SvgTwoLineTextKeyComponent +} from './components/svg/keys'; +import { SvgKeyboardWrapComponent } from './components/svg/wrap'; +import { LayersComponent } from './components/layers'; +import { SvgKeyboardComponent } from './components/svg/keyboard'; +import { PopoverComponent } from './components/popover'; +import { KeymapAddComponent } from './components/keymap'; +import {UhkConfigurationService} from './services/uhk-configuration.service'; @NgModule({ declarations: [ @@ -29,11 +33,13 @@ import {PopoverComponent} from './components/popover/popover.component'; SvgKeyboardWrapComponent, LayersComponent, PopoverComponent, - SvgKeyboardComponent + SvgKeyboardComponent, + KeymapAddComponent ], imports: [BrowserModule], providers: [ DataProviderService, + UhkConfigurationService, MapperService, APP_ROUTER_PROVIDERS, { provide: LocationStrategy, useClass: HashLocationStrategy } diff --git a/src/components/keymap/add/keymap-add.component.html b/src/components/keymap/add/keymap-add.component.html new file mode 100644 index 00000000..212216b8 --- /dev/null +++ b/src/components/keymap/add/keymap-add.component.html @@ -0,0 +1,32 @@ +

+ + Add new keymap +

+
+
+ + + + +
+
+ {{ keymaps.length }} / {{ keymapsAll.length }} keymaps shown +
+
+
+
+

{{ keymap.name }}

+

+ {{ keymap.description }} +

+ + +
+ +
+
+
\ No newline at end of file diff --git a/src/components/keymap/add/keymap-add.component.scss b/src/components/keymap/add/keymap-add.component.scss new file mode 100644 index 00000000..1e6d3c35 --- /dev/null +++ b/src/components/keymap/add/keymap-add.component.scss @@ -0,0 +1,61 @@ +:host { + overflow-y: auto; + display: block; + height: 100%; +} + +.uhk__layer-switcher--wrapper { + position: relative; + + &:before { + content: attr(data-title); + display: inline-block; + position: absolute; + bottom: -0.3em; + right: 100%; + font-size: 2.4rem; + padding-right: 0.25em; + margin: 0; + } +} + +.keymap { + &__search { + margin-top: 10px; + + .input-group { + width: 100%; + max-width: 350px; + float: left; + } + + &_amount { + float: left; + margin: 7px 0 0 20px; + } + } + + &__description { + margin-bottom: 20px; + } + + &__list { + margin-top: 40px; + + &_item { + margin-bottom: 50px; + } + + .btn-group-lg { + margin: 30px 0 0; + width: 100%; + text-align: center; + + .btn { + float: none; + padding-left: 50px; + padding-right: 50px; + } + } + } +} diff --git a/src/components/keymap/add/keymap-add.component.ts b/src/components/keymap/add/keymap-add.component.ts new file mode 100644 index 00000000..e2e82be8 --- /dev/null +++ b/src/components/keymap/add/keymap-add.component.ts @@ -0,0 +1,27 @@ +import { Component } from '@angular/core'; +import { Keymap } from '../../../config-serializer/config-items/Keymap'; +import { Keymaps } from '../../../config-serializer/config-items/Keymaps'; +import {DataProviderService} from '../../../services/data-provider.service'; + +@Component({ + selector: 'keymap-add', + template: require('./keymap-add.component.html'), + styles: [require('./keymap-add.component.scss')] +}) +export class KeymapAddComponent { + private keymaps: Keymap[]; + private keymapsAll: Keymap[]; + private currentKeyboards: number; + + constructor(data: DataProviderService) { + let json: any = data.getDefaultKeymaps(); + let all: Keymaps = new Keymaps().fromJsObject(json.keymaps); + this.keymaps = all.elements; + this.keymapsAll = this.keymaps.slice(0); + this.currentKeyboards = this.keymaps.length; + } + + filterKeyboards(value: string) { + this.keymaps = this.keymapsAll.filter((item: Keymap) => item.name.toLocaleLowerCase().indexOf(value) !== -1); + } +} diff --git a/src/components/keymap/index.ts b/src/components/keymap/index.ts index 69136468..753c64f3 100644 --- a/src/components/keymap/index.ts +++ b/src/components/keymap/index.ts @@ -1,2 +1,3 @@ export * from './keymap.component'; export * from './keymap.routes'; +export * from './add/keymap-add.component'; diff --git a/src/components/keymap/keymap.component.ts b/src/components/keymap/keymap.component.ts index 73e4b0de..5a245910 100644 --- a/src/components/keymap/keymap.component.ts +++ b/src/components/keymap/keymap.component.ts @@ -9,8 +9,7 @@ import { Subscription } from 'rxjs/Subscription'; @Component({ selector: 'keymap', template: require('./keymap.component.html'), - styles: [require('./keymap.component.scss')], - providers: [UhkConfigurationService] + styles: [require('./keymap.component.scss')] }) export class KeymapComponent implements OnInit { private keymapId: number = 0; diff --git a/src/components/keymap/keymap.routes.ts b/src/components/keymap/keymap.routes.ts index 1d9e5771..549cb152 100644 --- a/src/components/keymap/keymap.routes.ts +++ b/src/components/keymap/keymap.routes.ts @@ -1,5 +1,6 @@ import { RouterConfig } from '@angular/router'; import { KeymapComponent } from './keymap.component'; +import { KeymapAddComponent } from './add/keymap-add.component'; export const keymapRoutes: RouterConfig = [ { @@ -11,6 +12,10 @@ export const keymapRoutes: RouterConfig = [ path: 'keymap', component: KeymapComponent }, + { + path: 'keymap/add', + component: KeymapAddComponent + }, { path: 'keymap/:id', component: KeymapComponent diff --git a/src/components/side-menu/side-menu.component.html b/src/components/side-menu/side-menu.component.html index c79f7d6a..dfbebeea 100644 --- a/src/components/side-menu/side-menu.component.html +++ b/src/components/side-menu/side-menu.component.html @@ -2,7 +2,7 @@
  • Keymaps - + diff --git a/src/components/side-menu/side-menu.component.ts b/src/components/side-menu/side-menu.component.ts index a3288f22..4909bdc6 100644 --- a/src/components/side-menu/side-menu.component.ts +++ b/src/components/side-menu/side-menu.component.ts @@ -9,7 +9,6 @@ import { ROUTER_DIRECTIVES } from '@angular/router'; selector: 'side-menu', template: require('./side-menu.component.html'), styles: [require('./side-menu.component.scss')], - providers: [UhkConfigurationService], directives: [ROUTER_DIRECTIVES] }) export class SideMenuComponent implements OnInit { diff --git a/src/components/svg/keyboard/svg-keyboard.component.html b/src/components/svg/keyboard/svg-keyboard.component.html index b41655db..1c187522 100644 --- a/src/components/svg/keyboard/svg-keyboard.component.html +++ b/src/components/svg/keyboard/svg-keyboard.component.html @@ -5,7 +5,8 @@ [keyboardKeys]="module.keyboardKeys" [attr.transform]="module.attributes.transform" [keyActions]="moduleConfig[i].keyActions.elements" - (editKeyActionRequest)="onEditKeyActionRequest(i, $event)" + (keyClick)="onKeyClick(i, $event)" + (keyHover)="onKeyHover($event.index, $event.event, $event.over, i)" /> \ No newline at end of file diff --git a/src/components/svg/keyboard/svg-keyboard.component.ts b/src/components/svg/keyboard/svg-keyboard.component.ts index 28ac841f..76f6ee48 100644 --- a/src/components/svg/keyboard/svg-keyboard.component.ts +++ b/src/components/svg/keyboard/svg-keyboard.component.ts @@ -13,6 +13,7 @@ import {DataProviderService} from '../../../services/data-provider.service'; export class SvgKeyboardComponent implements OnInit { @Input() moduleConfig: Module[]; @Output() keyClick = new EventEmitter(); + @Output() keyHover = new EventEmitter(); private modules: SvgModule[]; private svgAttributes: { viewBox: string, transform: string, fill: string }; @@ -26,11 +27,20 @@ export class SvgKeyboardComponent implements OnInit { this.modules = this.dps.getSvgModules(); } - onEditKeyActionRequest(moduleId: number, keyId: number): void { + onKeyClick(moduleId: number, keyId: number): void { this.keyClick.emit({ moduleId, keyId }); } + onKeyHover(keyId: number, event: MouseEvent, over: boolean, moduleId: number): void { + this.keyHover.emit({ + moduleId, + event, + over, + keyId + }); + } + } diff --git a/src/components/svg/module/svg-module.component.html b/src/components/svg/module/svg-module.component.html index 83cb4f6f..793b7b27 100644 --- a/src/components/svg/module/svg-module.component.html +++ b/src/components/svg/module/svg-module.component.html @@ -6,5 +6,6 @@ [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'" [keyAction]="keyActions[i]" (click)="onKeyClick(i)" -/> - \ No newline at end of file + (mouseover)="onKeyHover(i, $event, true)" + (mouseleave)="onKeyHover(i, $event, false)" +/> \ No newline at end of file diff --git a/src/components/svg/module/svg-module.component.ts b/src/components/svg/module/svg-module.component.ts index 03a3d9d0..08074822 100644 --- a/src/components/svg/module/svg-module.component.ts +++ b/src/components/svg/module/svg-module.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { Component, Input, Output, EventEmitter } from '@angular/core'; import { SvgKeyboardKey, SvgKeyboardKeyComponent } from '../keys'; import {KeyAction} from '../../../config-serializer/config-items/KeyAction'; @@ -9,20 +9,27 @@ import {KeyAction} from '../../../config-serializer/config-items/KeyAction'; styles: [require('./svg-module.component.scss')], directives: [SvgKeyboardKeyComponent] }) -export class SvgModuleComponent implements OnInit { +export class SvgModuleComponent { @Input() coverages: any[]; @Input() keyboardKeys: SvgKeyboardKey[]; @Input() keyActions: KeyAction[]; - @Output() editKeyActionRequest = new EventEmitter(); + @Output() keyClick = new EventEmitter(); + @Output() keyHover = new EventEmitter(); constructor() { this.keyboardKeys = []; } - ngOnInit() { } - onKeyClick(index: number): void { - this.editKeyActionRequest.emit(index); + this.keyClick.emit(index); + } + + onKeyHover(index: number, event: MouseEvent, over: boolean): void { + this.keyHover.emit({ + index, + event, + over + }); } } diff --git a/src/components/svg/wrap/svg-keyboard-wrap.component.html b/src/components/svg/wrap/svg-keyboard-wrap.component.html index ac45a820..8e526b63 100644 --- a/src/components/svg/wrap/svg-keyboard-wrap.component.html +++ b/src/components/svg/wrap/svg-keyboard-wrap.component.html @@ -1,12 +1,25 @@ \ No newline at end of file diff --git a/src/components/svg/wrap/svg-keyboard-wrap.component.scss b/src/components/svg/wrap/svg-keyboard-wrap.component.scss index 3debdd8c..34569d4f 100644 --- a/src/components/svg/wrap/svg-keyboard-wrap.component.scss +++ b/src/components/svg/wrap/svg-keyboard-wrap.component.scss @@ -10,12 +10,42 @@ svg-keyboard { max-width: 1400px; position: absolute; left: 0; - transform: translateX(-100%); + transform: translateX(-101%); } .keyboard-slider { - height: calc(100% - 145px); position: relative; overflow: hidden; - width: 100%; + /* TODO create dynamic */ + height: 500px; + margin-top: 30px; +} +.tooltip { + position: fixed; + transform: translate(-50%, -85%); + + &-inner { + background: #fff; + color: #000; + box-shadow: 0 1px 5px #000; + text-align: left; + + p { + margin-bottom: 2px; + + &:last-of-type { + margin-bottom: 0; + } + } + } + + &.top { + .tooltip-arrow { + border-top-color: #fff; + } + } + + &.in { + opacity: 1; + } } diff --git a/src/components/svg/wrap/svg-keyboard-wrap.component.ts b/src/components/svg/wrap/svg-keyboard-wrap.component.ts index 03fd21aa..6706f56a 100644 --- a/src/components/svg/wrap/svg-keyboard-wrap.component.ts +++ b/src/components/svg/wrap/svg-keyboard-wrap.component.ts @@ -1,15 +1,17 @@ import { Component, Input, OnInit, style, - state, animate, transition, trigger + state, animate, transition, trigger, OnChanges } from '@angular/core'; import { KeyAction } from '../../../config-serializer/config-items/KeyAction'; import { Layer } from '../../../config-serializer/config-items/Layer'; +import { NoneAction } from '../../../config-serializer/config-items/NoneAction'; @Component({ selector: 'svg-keyboard-wrap', template: require('./svg-keyboard-wrap.component.html'), styles: [require('./svg-keyboard-wrap.component.scss')], + // We use 101%, because there was still a trace of the keyboard in the screen when animation was done animations: [ trigger('layerState', [ /* Right -> Left animation*/ @@ -18,7 +20,7 @@ import { Layer } from '../../../config-serializer/config-items/Layer'; left: '50%' })), state('leftOut', style({ - transform: 'translateX(-100%)', + transform: 'translateX(-101%)', left: '0' })), /* Right -> Left animation */ @@ -28,14 +30,14 @@ import { Layer } from '../../../config-serializer/config-items/Layer'; })), state('rightOut', style({ transform: 'translateX(0%)', - left: '100%' + left: '101%' })), /* Transitions */ transition('none => leftIn, leftOut => leftIn', [ style({ opacity: 0, transform: 'translateX(0%)', - left: '100%' + left: '101%' }), style({ opacity: 1 @@ -45,7 +47,7 @@ import { Layer } from '../../../config-serializer/config-items/Layer'; transition('* => none', [ style({ opacity: 0, - transform: 'translateX(-100%)', + transform: 'translateX(-101%)', left: '0' }), style({ @@ -55,7 +57,7 @@ import { Layer } from '../../../config-serializer/config-items/Layer'; transition('none => rightIn, rightOut => rightIn', [ style({ opacity: 0, - transform: 'translateX(-100%)', + transform: 'translateX(-101%)', left: '0' }), style({ @@ -73,21 +75,29 @@ import { Layer } from '../../../config-serializer/config-items/Layer'; ]) ] }) -export class SvgKeyboardWrapComponent implements OnInit { +export class SvgKeyboardWrapComponent implements OnInit, OnChanges { @Input() layers: Layer[]; @Input() popoverEnabled: boolean = true; - @Input() animationEnabled: boolean = true; + @Input() tooltipEnabled: boolean = false; private popoverShown: boolean; private keyEditConfig: { moduleId: number, keyId: number }; private popoverInitKeyAction: KeyAction; private currentLayer: number = 0; + private tooltipData: { posTop: number, posLeft: number, content: {name: string, value: string}[], shown: boolean }; constructor() { this.keyEditConfig = { moduleId: undefined, keyId: undefined }; + + this.tooltipData = { + posTop: 0, + posLeft: 0, + content: [], + shown: false + }; } ngOnInit() { @@ -107,7 +117,7 @@ export class SvgKeyboardWrapComponent implements OnInit { } onKeyClick(moduleId: number, keyId: number): void { - if (!this.popoverShown) { + if (!this.popoverShown && this.popoverEnabled) { this.keyEditConfig = { moduleId, keyId @@ -118,6 +128,18 @@ export class SvgKeyboardWrapComponent implements OnInit { } } + onKeyHover(moduleId: number, event: MouseEvent, over: boolean, keyId: number): void { + let keyActionToEdit: KeyAction = this.layers[this.currentLayer].modules.elements[moduleId].keyActions.elements[keyId]; + + if (this.tooltipEnabled) { + if (over) { + this.showTooltip(keyActionToEdit, event); + } else { + this.hideTooltip(event); + } + } + } + onRemap(keyAction: KeyAction): void { this.changeKeyAction(keyAction); this.hidePopover(); @@ -128,6 +150,56 @@ export class SvgKeyboardWrapComponent implements OnInit { this.popoverShown = true; } + showTooltip(keyAction: KeyAction, event: MouseEvent): void { + + if (keyAction instanceof NoneAction || keyAction === undefined) { + return; + } + + let el: Element = event.target as Element || event.srcElement; + let position: ClientRect = el.getBoundingClientRect(); + let posLeft: number = this.tooltipData.posLeft; + let posTop: number = this.tooltipData.posTop; + + if (el.tagName === 'rect') { + posLeft = position.left + (position.width / 2); + posTop = position.top; + } + + // TODO connect with real data + let dummyData = [ + { + name: 'Key action', + value: 'o' + }, + { + name: 'Scancode', + value: '55' + } + ]; + + this.tooltipData = { + posLeft: posLeft, + posTop: posTop, + content: dummyData, + shown: true + }; + } + + hideTooltip(event: MouseEvent) { + let target: HTMLElement = event.relatedTarget as HTMLElement; + if (!target) { + this.tooltipData.shown = false; + return; + } + + // Check if we are hovering tooltip + let list: DOMTokenList = target.classList; + if (!list.contains('tooltip') && !list.contains('tooltip-inner')) { + this.tooltipData.shown = false; + } + } + hidePopover(): void { this.popoverShown = false; this.popoverInitKeyAction = undefined; diff --git a/src/config-serializer/config-items/Keymap.ts b/src/config-serializer/config-items/Keymap.ts index f4697054..4d20d67c 100644 --- a/src/config-serializer/config-items/Keymap.ts +++ b/src/config-serializer/config-items/Keymap.ts @@ -10,6 +10,8 @@ export class Keymap extends Serializable { name: string; + description: string; + abbreviation: string; isDefault: boolean; @@ -21,6 +23,7 @@ export class Keymap extends Serializable { this.isDefault = jsObject.isDefault; this.abbreviation = jsObject.abbreviation; this.name = jsObject.name; + this.description = jsObject.description; this.layers = new Layers().fromJsObject(jsObject.layers); return this; } @@ -30,6 +33,7 @@ export class Keymap extends Serializable { this.isDefault = buffer.readBoolean(); this.abbreviation = buffer.readString(); this.name = buffer.readString(); + this.description = buffer.readString(); this.layers = new Layers().fromBinary(buffer); return this; } @@ -40,6 +44,7 @@ export class Keymap extends Serializable { isDefault: this.isDefault, abbreviation: this.abbreviation, name: this.name, + description: this.description, layers: this.layers.toJsObject() }; } @@ -49,6 +54,7 @@ export class Keymap extends Serializable { buffer.writeBoolean(this.isDefault); buffer.writeString(this.abbreviation); buffer.writeString(this.name); + buffer.writeString(this.description); this.layers.toBinary(buffer); } diff --git a/src/config-serializer/default-keymaps.json b/src/config-serializer/default-keymaps.json new file mode 100644 index 00000000..48ca34b3 --- /dev/null +++ b/src/config-serializer/default-keymaps.json @@ -0,0 +1,947 @@ +{ + "keymaps": [ + { + "id": 0, + "isDefault": true, + "abbreviation": "QTY", + "name": "QWERTY", + "description": "Maecenas sem dui, ullamcorper consequat pellentesque ut, mattis at velit. Duis scelerisque eleifend gravida. Aenean at mauris rhoncus, dictum mi vitae, semper eros. Quisque maximus est elit, at condimentum ligula consectetur vel. Aenean lorem felis, molestie id ex suscipit, sagittis mollis dui. Phasellus in felis in libero bibendum ornare. Duis vestibulum dolor sed diam tempor vulputate. Curabitur scelerisque pretium ipsum. Phasellus non orci vestibulum, vehicula lectus sit amet, lacinia velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In diam lacus, cursus at pretium vel, ullamcorper at ante.", + "layers": [ + { + "modules": [ + { + "id": 0, + "pointerRole": "move", + "keyActions": [ + { + "keyActionType": "keystroke", + "scancode": 36 + }, + { + "keyActionType": "keystroke", + "scancode": 37 + }, + { + "keyActionType": "keystroke", + "scancode": 38 + }, + { + "keyActionType": "keystroke", + "scancode": 39 + }, + { + "keyActionType": "keystroke", + "scancode": 45 + }, + { + "keyActionType": "keystroke", + "scancode": 46 + }, + { + "keyActionType": "keystroke", + "scancode": 42 + }, + { + "keyActionType": "keystroke", + "scancode": 28 + }, + { + "keyActionType": "keystroke", + "scancode": 24 + }, + { + "keyActionType": "keystroke", + "scancode": 12 + }, + { + "keyActionType": "keystroke", + "scancode": 18 + }, + { + "keyActionType": "keystroke", + "scancode": 19 + }, + { + "keyActionType": "keystroke", + "scancode": 47 + }, + { + "keyActionType": "keystroke", + "scancode": 48 + }, + { + "keyActionType": "keystroke", + "scancode": 49 + }, + { + "keyActionType": "keystroke", + "scancode": 11 + }, + { + "keyActionType": "keystroke", + "scancode": 13 + }, + { + "keyActionType": "keystroke", + "scancode": 14 + }, + { + "keyActionType": "keystroke", + "scancode": 15 + }, + { + "keyActionType": "keystroke", + "scancode": 51 + }, + { + "keyActionType": "keystroke", + "scancode": 52 + }, + { + "keyActionType": "keystroke", + "scancode": 40 + }, + { + "keyActionType": "keystroke", + "scancode": 17 + }, + { + "keyActionType": "keystroke", + "scancode": 16 + }, + { + "keyActionType": "keystroke", + "scancode": 54 + }, + { + "keyActionType": "keystroke", + "scancode": 55 + }, + { + "keyActionType": "keystroke", + "scancode": 56 + }, + { + "keyActionType": "keystroke", + "modifierMask": 32 + }, + { + "keyActionType": "keystroke", + "scancode": 44 + }, + { + "keyActionType": "switchLayer", + "layer": "fn", + "toggle": false + }, + { + "keyActionType": "keystroke", + "modifierMask": 64 + }, + { + "keyActionType": "keystroke", + "modifierMask": 128 + }, + { + "keyActionType": "keystroke", + "modifierMask": 16 + }, + { + "keyActionType": "switchLayer", + "layer": "mod", + "toggle": false + } + ] + }, + { + "id": 1, + "pointerRole": "move", + "keyActions": [ + { + "keyActionType": "keystroke", + "scancode": 53 + }, + { + "keyActionType": "keystroke", + "scancode": 30 + }, + { + "keyActionType": "keystroke", + "scancode": 31 + }, + { + "keyActionType": "keystroke", + "scancode": 32 + }, + { + "keyActionType": "keystroke", + "scancode": 33 + }, + { + "keyActionType": "keystroke", + "scancode": 34 + }, + { + "keyActionType": "keystroke", + "scancode": 35 + }, + { + "keyActionType": "keystroke", + "scancode": 43 + }, + { + "keyActionType": "keystroke", + "scancode": 20 + }, + { + "keyActionType": "keystroke", + "scancode": 26 + }, + { + "keyActionType": "keystroke", + "scancode": 8 + }, + { + "keyActionType": "keystroke", + "scancode": 21 + }, + { + "keyActionType": "keystroke", + "scancode": 23 + }, + { + "keyActionType": "switchLayer", + "layer": "mouse", + "toggle": false + }, + { + "keyActionType": "keystroke", + "scancode": 4 + }, + { + "keyActionType": "keystroke", + "scancode": 22 + }, + { + "keyActionType": "keystroke", + "scancode": 7 + }, + { + "keyActionType": "keystroke", + "scancode": 9 + }, + { + "keyActionType": "keystroke", + "scancode": 10 + }, + { + "keyActionType": "keystroke", + "modifierMask": 2 + }, + { + "keyActionType": "keystroke", + "scancode": 29 + }, + { + "keyActionType": "keystroke", + "scancode": 27 + }, + { + "keyActionType": "keystroke", + "scancode": 6 + }, + { + "keyActionType": "keystroke", + "scancode": 25 + }, + { + "keyActionType": "keystroke", + "scancode": 5 + }, + { + "keyActionType": "keystroke", + "modifierMask": 1 + }, + { + "keyActionType": "keystroke", + "modifierMask": 8 + }, + { + "keyActionType": "keystroke", + "modifierMask": 4 + }, + { + "keyActionType": "switchLayer", + "layer": "fn", + "toggle": false + }, + { + "keyActionType": "switchLayer", + "layer": "mod", + "toggle": false + }, + { + "keyActionType": "keystroke", + "scancode": 44 + } + ] + }, + { + "id": 2, + "pointerRole": "scroll", + "keyActions": [] + } + ] + }, + { + "modules": [ + { + "id": 0, + "pointerRole": "none", + "keyActions": [ + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "keystroke", + "scancode": 75 + }, + { + "keyActionType": "keystroke", + "scancode": 74 + }, + { + "keyActionType": "keystroke", + "scancode": 82 + }, + { + "keyActionType": "keystroke", + "scancode": 77 + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "keystroke", + "scancode": 78 + }, + { + "keyActionType": "keystroke", + "scancode": 80 + }, + { + "keyActionType": "keystroke", + "scancode": 81 + }, + { + "keyActionType": "keystroke", + "scancode": 79 + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "switchKeymap", + "keymapId": 2 + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "keystroke", + "scancode": 118 + }, + { + "keyActionType": "keystroke", + "modifierMask": 32 + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "switchLayer", + "layer": "fn", + "toggle": false + }, + { + "keyActionType": "keystroke", + "modifierMask": 64 + }, + { + "keyActionType": "keystroke", + "modifierMask": 128 + }, + { + "keyActionType": "keystroke", + "modifierMask": 16 + }, + { + "keyActionType": "switchLayer", + "layer": "mod", + "toggle": false + } + ] + }, + { + "id": 1, + "pointerRole": "none", + "keyActions": [ + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "switchLayer", + "layer": "mouse", + "toggle": false + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "keystroke", + "modifierMask": 2 + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "keystroke", + "modifierMask": 1 + }, + { + "keyActionType": "keystroke", + "modifierMask": 8 + }, + { + "keyActionType": "keystroke", + "modifierMask": 4 + }, + { + "keyActionType": "switchLayer", + "layer": "fn", + "toggle": false + }, + { + "keyActionType": "switchLayer", + "layer": "mod", + "toggle": false + }, + { + "keyActionType": "none" + } + ] + } + ] + }, + { + "modules": [ + { + "id": 0, + "pointerRole": "move", + "keyActions": [ + { + "keyActionType": "switchLayer", + "layer": "fn", + "toggle": true + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "keystroke", + "scancode": 232 + }, + { + "keyActionType": "keystroke", + "scancode": 237 + }, + { + "keyActionType": "keystroke", + "scancode": 233 + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "keystroke", + "scancode": 234 + }, + { + "keyActionType": "keystroke", + "scancode": 238 + }, + { + "keyActionType": "keystroke", + "scancode": 235 + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "keystroke", + "scancode": 239 + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "keystroke", + "modifierMask": 32 + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "switchLayer", + "layer": "fn", + "toggle": false + }, + { + "keyActionType": "keystroke", + "modifierMask": 64 + }, + { + "keyActionType": "keystroke", + "modifierMask": 128 + }, + { + "keyActionType": "keystroke", + "modifierMask": 16 + }, + { + "keyActionType": "switchLayer", + "layer": "mod", + "toggle": true + } + ] + }, + { + "id": 1, + "pointerRole": "scroll", + "keyActions": [ + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "switchLayer", + "layer": "mouse", + "toggle": true + }, + { + "keyActionType": "switchLayer", + "layer": "mod", + "toggle": true + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "switchLayer", + "layer": "mouse", + "toggle": true + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "keystroke", + "modifierMask": 2 + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "none" + }, + { + "keyActionType": "keystroke", + "modifierMask": 1 + }, + { + "keyActionType": "keystroke", + "modifierMask": 8 + }, + { + "keyActionType": "keystroke", + "modifierMask": 4 + }, + { + "keyActionType": "switchLayer", + "layer": "fn", + "toggle": false + }, + { + "keyActionType": "switchLayer", + "layer": "mod", + "toggle": true + }, + { + "keyActionType": "none" + } + ] + } + ] + }, + { + "modules": [ + { + "id": 0, + "pointerRole": "move", + "keyActions": [] + }, + { + "id": 1, + "pointerRole": "move", + "keyActions": [] + } + ] + } + ] + }, + { + "id": 1, + "isDefault": false, + "abbreviation": "VIM", + "name": "VIM", + "description": "Phasellus egestas ac tellus id tincidunt. Ut non nisl turpis. Morbi molestie diam elit, et cursus nibh tempus vel. Vestibulum mattis arcu nec nisi dictum, quis facilisis augue rutrum. Fusce vel tristique metus. Nullam pretium elit et enim maximus ornare. Praesent ultrices ligula ut mi convallis, quis ultrices enim venenatis. Aenean interdum odio aliquam quam vestibulum, vel bibendum elit ornare. Morbi leo enim, ullamcorper a bibendum sit amet, ultrices vitae ligula. Etiam consectetur et massa a convallis. Nullam non nisi aliquet, suscipit nulla a, tempor odio. Praesent eu turpis euismod, pellentesque mauris ut, imperdiet felis. Pellentesque vehicula luctus purus, et mattis ante volutpat eu. Quisque venenatis porta odio.", + "layers": [ + { + "modules": [ + { + "id": 0, + "pointerRole": "move", + "keyActions": [ + { + "keyActionType": "mouse", + "mouseAction": "scrollDown" + }, + { + "keyActionType": "playMacro", + "macroId": 0 + }, + { + "keyActionType": "switchKeymap", + "keymapId": 1 + } + ] + }, + { + "id": 1, + "pointerRole": "scroll", + "keyActions": [] + }, + { + "id": 2, + "pointerRole": "move", + "keyActions": [ + { + "keyActionType": "keystroke", + "scancode": 111 + } + ] + } + ] + }, + { + "modules": [ + { + "id": 0, + "pointerRole": "move", + "keyActions": [] + }, + { + "id": 1, + "pointerRole": "move", + "keyActions": [] + } + ] + }, + { + "modules": [ + { + "id": 0, + "pointerRole": "move", + "keyActions": [] + }, + { + "id": 1, + "pointerRole": "move", + "keyActions": [] + } + ] + }, + { + "modules": [ + { + "id": 0, + "pointerRole": "move", + "keyActions": [] + }, + { + "id": 1, + "pointerRole": "move", + "keyActions": [] + } + ] + } + ] + }, + { + "id": 2, + "isDefault": false, + "abbreviation": "DVR", + "name": "DVR", + "description": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean dictum sollicitudin massa, ut lacinia ipsum. Ut bibendum ipsum ac pulvinar vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat lobortis lacus, id viverra nisl varius eu. Aliquam vitae eros a augue fermentum ultricies. Nam tempus dui sed ante ultricies bibendum. In ligula velit, aliquet a felis vitae, gravida tincidunt ante. Proin euismod velit odio, at pretium lacus porta egestas. Suspendisse aliquam, lacus accumsan dapibus elementum, orci felis egestas leo, non vulputate lorem turpis nec risus. Curabitur id volutpat orci. Sed aliquet finibus iaculis. In venenatis neque ac dolor posuere, vel vestibulum augue posuere.", + "layers": [ + { + "modules": [ + { + "id": 0, + "pointerRole": "move", + "keyActions": [] + }, + { + "id": 1, + "pointerRole": "move", + "keyActions": [] + } + ] + }, + { + "modules": [ + { + "id": 0, + "pointerRole": "move", + "keyActions": [] + }, + { + "id": 1, + "pointerRole": "move", + "keyActions": [] + } + ] + }, + { + "modules": [ + { + "id": 0, + "pointerRole": "move", + "keyActions": [] + }, + { + "id": 1, + "pointerRole": "move", + "keyActions": [] + } + ] + }, + { + "modules": [ + { + "id": 0, + "pointerRole": "move", + "keyActions": [] + }, + { + "id": 1, + "pointerRole": "move", + "keyActions": [] + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/src/config-serializer/uhk-config.json b/src/config-serializer/uhk-config.json index ec0ea54c..18b81b9f 100644 --- a/src/config-serializer/uhk-config.json +++ b/src/config-serializer/uhk-config.json @@ -18,6 +18,7 @@ "isDefault": true, "abbreviation": "QTY", "name": "QWERTY", + "description": "", "layers": [ { "modules": [ @@ -812,6 +813,7 @@ "isDefault": false, "abbreviation": "VIM", "name": "VIM", + "description": "", "layers": [ { "modules": [ @@ -914,6 +916,7 @@ "isDefault": false, "abbreviation": "DVR", "name": "DVR", + "description": "", "layers": [ { "modules": [ diff --git a/src/services/data-provider.service.ts b/src/services/data-provider.service.ts index 59a67f73..81e98e63 100644 --- a/src/services/data-provider.service.ts +++ b/src/services/data-provider.service.ts @@ -11,6 +11,10 @@ export class DataProviderService { return require('json!../config-serializer/uhk-config.json'); } + getDefaultKeymaps(): any { + return require('json!../config-serializer/default-keymaps.json'); + } + getKeyboardSvgAttributes(): { viewBox: string, transform: string, fill: string } { let svg: any = this.getBaseLayer(); return {