SVG icons for buttons

package.json

@@ -43,6 +43,7 @@
     "mkdirp": "^0.5.1",
     "recursive-copy": "^2.0.10",
     "rimraf": "^3.0.0",
+    "svg-inline-loader": "^0.8.2",
     "sylvester.js": "^0.1.1",
     "tinyh264": "0.0.5",
     "tslint": "^5.16.0",

src/DeviceController.ts

@@ -8,6 +8,7 @@ import CommandControlEvent from './controlEvent/CommandControlEvent';
 import ControlEvent from './controlEvent/ControlEvent';
 import TextControlEvent from './controlEvent/TextControlEvent';
 import DeviceMessage from './DeviceMessage';
+import SvgImage from "./ui/SvgImage";
 
 export interface DeviceControllerParams {
     url: string;
@@ -172,27 +173,28 @@ export class DeviceController implements DeviceMessageListener {
         }
         const list = [{
             code: KeyEvent.KEYCODE_POWER,
-            name: 'power'
+            icon: SvgImage.Icon.POWER
         },{
             code: KeyEvent.KEYCODE_VOLUME_DOWN,
-            name: 'volume-down'
+            icon: SvgImage.Icon.VOLUME_DOWN
         },{
             code: KeyEvent.KEYCODE_VOLUME_UP,
-            name: 'volume-up'
+            icon: SvgImage.Icon.VOLUME_UP
         },{
             code: KeyEvent.KEYCODE_BACK,
-            name: 'back'
+            icon: SvgImage.Icon.BACK
         },{
             code: KeyEvent.KEYCODE_HOME,
-            name: 'home'
+            icon: SvgImage.Icon.HOME
         }, {
             code: KeyEvent.KEYCODE_APP_SWITCH,
-            name: 'app-switch'
+            icon: SvgImage.Icon.OVERVIEW
         }];
         list.forEach(item => {
-            const {code, name} = item;
+            const {code, icon} = item;
             const btn = document.createElement('button');
-            btn.classList.add('control-button', name);
+            btn.classList.add('control-button');
+            btn.appendChild(SvgImage.create(icon));
             btn.onmousedown = () => {
                 const event = new KeyCodeControlEvent(KeyEvent.ACTION_DOWN, code, 0);
                 connection.sendEvent(event);
@@ -205,7 +207,8 @@ export class DeviceController implements DeviceMessageListener {
         });
         if (decoder.supportsScreenshot) {
             const screenshotButton = document.createElement('button');
-            screenshotButton.classList.add('control-button', 'screen-shot');
+            screenshotButton.classList.add('control-button');
+            screenshotButton.appendChild(SvgImage.create(SvgImage.Icon.CAMERA));
             screenshotButton.onclick = () => {
                 decoder.createScreenshot(connection.getDeviceName());
             }

src/public/style.css

@@ -242,54 +242,9 @@ pre.might-overflow:hover {
     width: 30px;
     height: 30px;
     border: none;
-    background-image: url('icons.png');
     opacity: 0.75;
 }
 
 .control-button:hover {
     opacity: 1;
 }
-
-.control-button.menu {
-    background-position: 0 0;
-}
-
-.control-button.app-switch {
-    background-position: -30px 0;
-}
-
-.control-button.home {
-    background-position: -60px 0;
-}
-
-.control-button.back {
-    background-position: -90px 0;
-}
-
-.control-button.zoom {
-    background-position: 0 -30px;
-}
-
-.control-button.screen-shot {
-    background-position: -30px -30px;
-}
-
-.control-button.rotate-clockwise {
-    background-position: -60px -30px;
-}
-
-.control-button.rotate-counter-clockwise {
-    background-position: -90px -30px;
-}
-
-.control-button.volume-down {
-    background-position: 0 -60px;
-}
-
-.control-button.volume-up {
-    background-position: -30px -60px;
-}
-
-.control-button.power {
-    background-position: -60px -60px;
-}

src/ui/SvgImage.ts

@@ -0,0 +1,54 @@
+import KeyboardSVG from '../../svg/skin-light/ic_keyboard_678_48dp.svg';
+import MoreSVG from '../../svg/skin-light/ic_more_horiz_678_48dp.svg';
+import CameraSVG from '../../svg/skin-light/ic_photo_camera_678_48dp.svg';
+import PowerSVG from '../../svg/skin-light/ic_power_settings_new_678_48px.svg';
+import VolumeDownSVG from '../../svg/skin-light/ic_volume_down_678_48px.svg';
+import VolumeUpSVG from '../../svg/skin-light/ic_volume_up_678_48px.svg';
+import BackSVG from '../../svg/skin-light/System_Back_678.svg';
+import HomeSVG from '../../svg/skin-light/System_Home_678.svg';
+import OverviewSVG from '../../svg/skin-light/System_Overview_678.svg';
+
+enum Icon {
+    BACK,
+    HOME,
+    OVERVIEW,
+    POWER,
+    VOLUME_UP,
+    VOLUME_DOWN,
+    MORE,
+    CAMERA,
+    KEYBOARD
+}
+
+export default class SvgImage {
+    static Icon = Icon;
+    private static getSvgString(type: Icon): string {
+        switch (type) {
+            case Icon.KEYBOARD:
+                return KeyboardSVG;
+            case Icon.MORE:
+                return MoreSVG;
+            case Icon.CAMERA:
+                return CameraSVG;
+            case Icon.POWER:
+                return PowerSVG;
+            case Icon.VOLUME_DOWN:
+                return VolumeDownSVG;
+            case Icon.VOLUME_UP:
+                return VolumeUpSVG;
+            case Icon.BACK:
+                return BackSVG;
+            case Icon.HOME:
+                return HomeSVG;
+            case Icon.OVERVIEW:
+                return OverviewSVG;
+            default:
+                return '';
+        }
+    }
+    public static create(type: Icon): Element {
+        const dummy = document.createElement('div');
+        dummy.innerHTML = this.getSvgString(type);
+        return dummy.children[0];
+    }
+}

svg/skin-light/SOURCE

@@ -0,0 +1 @@
+https://android.googlesource.com/platform/external/qemu/+/emu-2.0-release/android/skin/qt/images/light/

tsconfig.json

@@ -54,6 +54,7 @@
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
   },
   "include":[
+    "./typings/**/*",
     "./src/**/*"
   ]
 }

typings/custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+    const content: any;
+    export default content;
+}

webpack.config.js

@@ -13,6 +13,10 @@ module.exports = {
         test: /\.worker\.js$/,
         use: { loader: 'worker-loader' }
       },
+      {
+        test: /\.svg$/,
+        loader: 'svg-inline-loader'
+      },
       {
         test: /\.(asset)$/i,
         use: [