Additional media keys with icons (#307)
* Add missing scancodes for media keystrokes * Use icons for media keys * Fix media scancodes.
This commit is contained in:
József Farkas
committed by
László Monda
László Monda
parent
a8a659dadd
commit
1a456c2ced
@@ -567,31 +567,91 @@
|
||||
},
|
||||
{
|
||||
"id": "128",
|
||||
"text": "Volume Up"
|
||||
"text": "Volume Up",
|
||||
"additional": {
|
||||
"type": "media",
|
||||
"scancode": 233
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "129",
|
||||
"text": "Volume Down"
|
||||
"text": "Volume Down",
|
||||
"additional": {
|
||||
"type": "media",
|
||||
"scancode": 234
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "",
|
||||
"text": "Next Track"
|
||||
"id": "130",
|
||||
"text": "Next Track",
|
||||
"additional": {
|
||||
"type": "media",
|
||||
"scancode": 181
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "",
|
||||
"text": "Previous Track"
|
||||
"id": "131",
|
||||
"text": "Previous Track",
|
||||
"additional": {
|
||||
"type": "media",
|
||||
"scancode": 182
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "",
|
||||
"text": "Stop"
|
||||
"id": "132",
|
||||
"text": "Stop/Eject",
|
||||
"additional": {
|
||||
"type": "media",
|
||||
"scancode": 204
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "",
|
||||
"text": "Play/Pause"
|
||||
"id": "133",
|
||||
"text": "Play/Pause",
|
||||
"additional": {
|
||||
"type": "media",
|
||||
"scancode": 205
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "",
|
||||
"text": "Eject"
|
||||
"id": "134",
|
||||
"text": "Play",
|
||||
"additional": {
|
||||
"type": "media",
|
||||
"scancode": 176
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "135",
|
||||
"text": "Pause",
|
||||
"additional": {
|
||||
"type": "media",
|
||||
"scancode": 177
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "136",
|
||||
"text": "Stop",
|
||||
"additional": {
|
||||
"type": "media",
|
||||
"scancode": 183
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "137",
|
||||
"text": "Eject",
|
||||
"additional": {
|
||||
"type": "media",
|
||||
"scancode": 184
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "138",
|
||||
"text": "WWW",
|
||||
"additional": {
|
||||
"type": "media",
|
||||
"scancode": 138
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -221,8 +221,8 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
|
||||
if (!keyAction.hasActiveModifier() && keyAction.hasScancode()) {
|
||||
const scancode: number = keyAction.scancode;
|
||||
newLabelSource = this.mapper.scanCodeToText(scancode, keyAction.type);
|
||||
if (this.mapper.hasScancodeIcon(scancode)) {
|
||||
this.labelSource = this.mapper.scanCodeToSvgImagePath(scancode);
|
||||
if (this.mapper.hasScancodeIcon(scancode, keyAction.type)) {
|
||||
this.labelSource = this.mapper.scanCodeToSvgImagePath(scancode, keyAction.type);
|
||||
this.labelType = LabelTypes.SingleIcon;
|
||||
} else if (newLabelSource !== undefined) {
|
||||
if (newLabelSource.length === 1) {
|
||||
|
||||
@@ -141,7 +141,7 @@ export class SvgKeystrokeKeyComponent implements OnInit, OnChanges {
|
||||
this.labelType = 'two-line';
|
||||
}
|
||||
} else {
|
||||
this.labelSource = this.mapper.scanCodeToSvgImagePath(scancode);
|
||||
this.labelSource = this.mapper.scanCodeToSvgImagePath(scancode, this.keystrokeAction.type);
|
||||
this.labelType = 'icon';
|
||||
}
|
||||
} else {
|
||||
|
||||
@@ -11,12 +11,13 @@ export class MapperService {
|
||||
private basicScanCodeTextMap: Map<number, string[]>;
|
||||
private mediaScanCodeTextMap: Map<number, string[]>;
|
||||
|
||||
private scanCodeFileName: Map<number, string>;
|
||||
private basicScancodeIcons: Map<number, string>;
|
||||
private mediaScancodeIcons: Map<number, string>;
|
||||
private nameToFileName: Map<string, string>;
|
||||
|
||||
constructor() {
|
||||
this.initScanCodeTextMap();
|
||||
this.initScanCodeFileName();
|
||||
this.initScancodeIcons();
|
||||
this.initNameToFileNames();
|
||||
}
|
||||
|
||||
@@ -34,16 +35,36 @@ export class MapperService {
|
||||
return map.get(scanCode);
|
||||
}
|
||||
|
||||
public hasScancodeIcon(scancode: number): boolean {
|
||||
return this.scanCodeFileName.has(scancode);
|
||||
public hasScancodeIcon(scancode: number, type = KeystrokeType.basic): boolean {
|
||||
let map: Map<number, string>;
|
||||
switch (type) {
|
||||
case KeystrokeType.basic:
|
||||
map = this.basicScancodeIcons;
|
||||
break;
|
||||
case KeystrokeType.shortMedia:
|
||||
case KeystrokeType.longMedia:
|
||||
map = this.mediaScancodeIcons;
|
||||
break;
|
||||
default:
|
||||
map = new Map<number, string>();
|
||||
}
|
||||
return map.has(scancode);
|
||||
}
|
||||
|
||||
public scanCodeToSvgImagePath(scanCode: number): string {
|
||||
const fileName: string = this.scanCodeFileName.get(scanCode);
|
||||
if (fileName) {
|
||||
return 'assets/compiled_sprite.svg#' + fileName;
|
||||
public scanCodeToSvgImagePath(scanCode: number, type = KeystrokeType.basic): string {
|
||||
let map: Map<number, string>;
|
||||
switch (type) {
|
||||
case KeystrokeType.basic:
|
||||
map = this.basicScancodeIcons;
|
||||
break;
|
||||
case KeystrokeType.shortMedia:
|
||||
case KeystrokeType.longMedia:
|
||||
map = this.mediaScancodeIcons;
|
||||
break;
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
return undefined;
|
||||
return 'assets/compiled_sprite.svg#' + map.get(scanCode);
|
||||
}
|
||||
|
||||
public getIcon(iconName: string): string {
|
||||
@@ -174,27 +195,34 @@ export class MapperService {
|
||||
this.basicScanCodeTextMap.set(177, ['000']);
|
||||
|
||||
this.mediaScanCodeTextMap = new Map<number, string[]>();
|
||||
this.mediaScanCodeTextMap.set(138, ['WWW']);
|
||||
this.mediaScanCodeTextMap.set(176, ['Play']);
|
||||
this.mediaScanCodeTextMap.set(177, ['Pause']);
|
||||
this.mediaScanCodeTextMap.set(181, ['Next']);
|
||||
this.mediaScanCodeTextMap.set(182, ['Prev']);
|
||||
this.mediaScanCodeTextMap.set(183, ['Stop']);
|
||||
this.mediaScanCodeTextMap.set(184, ['Eject']);
|
||||
this.mediaScanCodeTextMap.set(204, ['Eject', 'Stop']);
|
||||
this.mediaScanCodeTextMap.set(205, ['Pause', 'Play']);
|
||||
this.mediaScanCodeTextMap.set(226, ['Mute']);
|
||||
this.mediaScanCodeTextMap.set(232, ['Play']);
|
||||
this.mediaScanCodeTextMap.set(233, ['Stop']);
|
||||
this.mediaScanCodeTextMap.set(234, ['Prev']);
|
||||
this.mediaScanCodeTextMap.set(235, ['Next']);
|
||||
this.mediaScanCodeTextMap.set(236, ['Eject']);
|
||||
this.mediaScanCodeTextMap.set(237, ['Vol +']);
|
||||
this.mediaScanCodeTextMap.set(238, ['Vol -']);
|
||||
this.mediaScanCodeTextMap.set(240, ['WWW']);
|
||||
this.mediaScanCodeTextMap.set(241, ['Bckwrd']);
|
||||
this.mediaScanCodeTextMap.set(242, ['Frwrd']);
|
||||
this.mediaScanCodeTextMap.set(243, ['Cancel']);
|
||||
this.mediaScanCodeTextMap.set(233, ['Vol +']);
|
||||
this.mediaScanCodeTextMap.set(234, ['Vol -']);
|
||||
}
|
||||
|
||||
private initScanCodeFileName(): void {
|
||||
this.scanCodeFileName = new Map<number, string>();
|
||||
this.scanCodeFileName.set(79, 'icon-kbd__mod--arrow-right');
|
||||
this.scanCodeFileName.set(80, 'icon-kbd__mod--arrow-left');
|
||||
this.scanCodeFileName.set(81, 'icon-kbd__mod--arrow-down');
|
||||
this.scanCodeFileName.set(82, 'icon-kbd__mod--arrow-up');
|
||||
this.scanCodeFileName.set(118, 'icon-kbd__mod--menu');
|
||||
private initScancodeIcons(): void {
|
||||
this.basicScancodeIcons = new Map<number, string>();
|
||||
this.basicScancodeIcons.set(79, 'icon-kbd__mod--arrow-right');
|
||||
this.basicScancodeIcons.set(80, 'icon-kbd__mod--arrow-left');
|
||||
this.basicScancodeIcons.set(81, 'icon-kbd__mod--arrow-down');
|
||||
this.basicScancodeIcons.set(82, 'icon-kbd__mod--arrow-up');
|
||||
this.basicScancodeIcons.set(118, 'icon-kbd__mod--menu');
|
||||
|
||||
this.mediaScancodeIcons = new Map<number, string>();
|
||||
this.mediaScancodeIcons.set(176, 'icon-kbd__media--play');
|
||||
this.mediaScancodeIcons.set(177, 'icon-kbd__media--pause');
|
||||
this.mediaScancodeIcons.set(181, 'icon-kbd__media--next');
|
||||
this.mediaScancodeIcons.set(182, 'icon-kbd__media--prev');
|
||||
this.mediaScancodeIcons.set(226, 'icon-kbd__media--mute');
|
||||
}
|
||||
|
||||
private initNameToFileNames(): void {
|
||||
|
||||
Reference in New Issue
Block a user