josephj · March 24, 2020 04:48 · Mar 24, 2020 · Mar 24, 2020
diff --git a/preload.js b/preload.js
@@ -1 +0,0 @@
-// Empty

diff --git a/renderer.js b/renderer.js
@@ -1 +0,0 @@
-// Empty

diff --git a/styles.css b/styles.css
@@ -1 +0,0 @@
-/* Empty */

diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <link rel="stylesheet" type="text/css" href="./styles.css">
+    <style>html, body {background: black; color: #fff}
+    button {padding: 10px; border-radius: 6px; border: none;}
+    </style>
+  </head>
+  <body>
+    <div id="wrapper">
+      <button data-char="A">A</Button>
+      <button data-char="B">B</Button>
+      <button data-char="C">C</Button>
+      <button data-char="D">D</Button>
+      <button data-char="E">E</Button>
+      <button data-char="F">F</Button>
+      <button data-char="G">G</Button>
+      <button data-char="H">H</Button>
+    </div>
+    <div id="output"></div>
+    <script>
+    const { ipcRenderer } = require('electron');
+    const wrapperEl = document.getElementById('wrapper');
+    const outputEl = document.getElementById('output');
+    wrapperEl.addEventListener('click', e => {
+      const target = e.target;
+      if (!target.dataset.char) return;
+      outputEl.innerHTML += ' ' + target.dataset.char;
+      ipcRenderer.send('keyboard', target.dataset.char);
+    });
+    </script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,56 @@
+// Modules to control application life and create native browser window
+const {app, BrowserView, BrowserWindow} = require('electron')
+const { ipcMain } = require('electron');
+
+function createWindow () {
+  // Create the browser window.
+  const mainWindow = new BrowserWindow({
+    width: 1000,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+  // and load the index.html of the app.
+  mainWindow.loadURL('https://www.google.com/')
+
+  let bottomView = new BrowserView({
+    webPreferences: {
+      nodeIntegration: true
+    }
+  });
+  mainWindow.setBrowserView(bottomView)
+  bottomView.setBounds({ x: 0, y: 500, width: 1000, height: 100 })
+  bottomView.webContents.loadFile('index.html')
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools()
+  ipcMain.on('keyboard', (event, char) => {
+    mainWindow.webContents.sendInputEvent({type: 'char', keyCode: char});
+  });
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow)
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+  // On OS X it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', function () {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.
diff --git a/preload.js b/preload.js
@@ -0,0 +1 @@
+// Empty
diff --git a/renderer.js b/renderer.js
@@ -0,0 +1 @@
+// Empty
diff --git a/styles.css b/styles.css
@@ -0,0 +1 @@
+/* Empty */
No results found