initial commit

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015",
+    "react"
+  ]
+}

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+*.log
+node_modules
+dist
+*.node
+**/.*.s[a-w][a-z]

index.js

@@ -0,0 +1,24 @@
+'use strict';
+
+const path = require('path');
+const electron = require('electron');
+
+const app = electron.app;
+require('electron-debug')();
+
+let mainWindow;
+
+function createMainWindow () {
+  const win = new electron.BrowserWindow({
+    title: app.getName(),
+    height: 500,
+    width: 960,
+    backgroundColor: '#263238'
+  });
+  win.loadURL('file://' + __dirname + '/src/index.html');
+  win.setMenu(null);
+  return win;
+}
+app.on('ready', function() {
+  mainWindow = createMainWindow();
+});

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "msi-keyboard-gui",
+  "author": "Steve Lacy <me@slacy.me> http://slacy.me",
+  "scripts": {
+    "start": "electron .",
+    "build:linux": "electron-packager . --overwrite --asar --out=dist  --platform=linux --arch=x64 --app-bundle-id=com.stevelacy.msikeyboard --app-version=$npm_package_version "
+  },
+  "dependencies": {
+    "electron-debug": "^0.7.0",
+    "msi-keyboard": "^0.3.0"
+  },
+  "devDependencies": {
+    "babel": "^6.5.2",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-register": "^6.8.0",
+    "classnames": "^2.2.5",
+    "electron-packager": "^7.0.1",
+    "electron-prebuilt": "^0.37.8",
+    "react": "^15.0.2",
+    "react-dom": "^15.0.2",
+    "react-router": "^2.4.0"
+  }
+}

src/index.css

@@ -0,0 +1,189 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes perspective {
+  from {
+    transform: rotateX(0deg);
+  }
+  to {
+    transform: rotateX(50deg);
+  }
+}
+
+@keyframes vertHeight {
+  from {
+    transform: scaleY(0);
+  }
+  to {
+    transform: scaleY(1);
+  }
+}
+
+html, body, #root {
+  padding: 0;
+  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
+  font-weight: 300;
+  font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  margin: 0;
+  background: #263238;
+  height: 100%;
+}
+
+.index-component {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-flow: column
+}
+
+.modal-component {
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(10, 10, 10, .6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.modal-component .modal-content {
+  padding: 40px;
+  background: #fff;
+}
+.modal-component .modal-content .error {
+  color: red
+}
+
+.tips-component {
+  transition: all .3s;
+  color: #BEC3CD;
+  height: 20px;
+}
+
+.keyboard-component {
+  perspective: 80rem;
+}
+.keyboard {
+  display: flex;
+  position: relative;
+  padding: 5px;
+  box-shadow: 0 0 2px;
+  opacity: 1;
+  animation-name: perspective, fadeIn;
+  animation-duration: 1s;
+  transform: rotateX(50deg);
+}
+.keyboard .region {
+  height: 200px;
+  min-width: 250px;
+  margin: 5px;
+  background: rgba(50, 50, 50, 1);
+  border: 5px solid #222E34;
+  cursor: pointer;
+}
+
+.color-picker-component {
+  transition: all .3s;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: 0 auto;
+  padding: 25px;
+  box-shadow: 0 0 5px #000;
+  background: #37474F;
+  transform: translate(-50%);
+  z-index: 2;
+  display: flex;
+  visibility: hidden;
+  opacity: 0;
+}
+.color-picker-component.active {
+  visibility: visible;
+  opacity: 1;
+}
+.color-picker-component .color {
+  transition: all .3s;
+  height: 60px;
+  width: 60px;
+  margin: 5px;
+  cursor: pointer;
+  opacity: .9;
+}
+.color-picker-component .color:hover {
+  opacity: 1
+}
+.color-picker-component .close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: #171717;
+  padding: 6px;
+  height: 15px;
+  width: 15px;
+  text-align: center;
+  font-size: 15px;
+  box-shadow: 0 0 1px #000;
+  cursor: pointer;
+  color: #555;
+}
+
+.vert-line {
+  display: block;
+  clear: both;
+  width: 1px;
+  height: 50px;
+  background: #1EC1C8;
+  opacity: 1;
+  animation-duration: 2s;
+  animation-name: fadeIn, vertHeight;
+}
+
+.button.submit {
+  display: block;
+  clear: both;
+  text-transform: uppercase;
+  padding: 15px 20px;
+  background: #1EC1C8;
+  box-shadow: 0 0 2px #000;
+  display: block;
+  margin: 20px auto;
+  color: #fff;
+  cursor: pointer;
+  border: 0;
+  box-shadow: 0 0 5px #000;
+  outline: none;
+  animation: 1s fadeIn;
+}
+
+.button.toggle {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  width: 60px;
+  height: 25px;
+  background: #28292e;
+  transition: all .3s;
+  cursor: pointer;
+  box-shadow: 0 0 1px #000 inset;
+}
+.button.toggle .handle {
+  background: #333439;
+  height: 100%;
+  width: 50%;
+  transition: all .3s;
+  box-shadow: 0 0 3px #000;
+}
+.button.toggle.active .handle {
+  margin-left: 50%;
+  background: #1EC1C8;
+}

src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang='en'>
+  <head>
+    <title>MSI Keyboard</title>
+    <meta charset='utf-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link href='index.css' rel='stylesheet' />
+  </head>
+  <body>
+    <div id='root'>
+    </div>
+  </body>
+  <script src='index.js'></script>
+</html>

src/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+require('babel-register');
+
+var React = require('react');
+var render = require('react-dom').render;
+var App = require('./views/App');
+
+render(
+  React.createElement(App),
+  document.getElementById('root')
+);

src/lib/keyboard.js

@@ -0,0 +1,14 @@
+import Keyboard from 'msi-keyboard'
+let keyboard
+
+function load () {
+  try {
+    keyboard = Keyboard()
+  }
+  catch (e) {
+    return e
+  }
+  return keyboard
+}
+
+module.exports = load()