Design Changes

package.json

@@ -1,10 +1,11 @@
 {
   "name": "lcd-simulator-electron",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "author": "Tobias Ganzhorn",
   "description": "Simple LCD-Simulator for the Mikrocontroller-Labor-Board.",
   "dependencies": {
+    "@material-ui/core": "^4.11.4",
     "@testing-library/jest-dom": "^5.13.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",

public/electron.js

@@ -1,6 +1,7 @@
 const { app, BrowserWindow } = require("electron");
 const isDev = require("electron-is-dev");
 const path = require("path");
+const ipcMain = require('electron').ipcMain;
 
 // Conditionally include the dev tools installer to load React Dev Tools
 let installExtension, REACT_DEVELOPER_TOOLS;
@@ -15,9 +16,11 @@ if (isDev) {
 
 function createWindow() {
   const mainWindow = new BrowserWindow({
-    width: 800,
-    height: 820,
+    width: 490,
+    height: 670,
+    frame: false,
     icon: __dirname + '/favicon.ico',
+    transparent: true,
     webPreferences: {
       nodeIntegration: false,
       contextIsolation: true,
@@ -27,15 +30,29 @@ function createWindow() {
     },
   });
 
+  ipcMain.on('close-window', () => {
+    mainWindow.close();
+  });
+
+  ipcMain.on('minimize-window', () => {
+    mainWindow.minimize();
+  });
+
+  ipcMain.on('maximize-window', () => {
+    mainWindow.maximize();
+  });
+
+  ipcMain.on('restore-window', () => {
+    mainWindow.restore();
+  })
+
   mainWindow.setMenu(null);
 
   mainWindow.webContents.session.on('select-serial-port', (event, portList, webContents, callback) => {
     event.preventDefault();
-    console.log(portList);
     const selectedPort = portList.find((device) => {
       return device.productId === '24597' && device.vendorId === '1027'
     });
-    console.log(selectedPort);
     if (!selectedPort) {
       callback('');
     } else {

public/preload.js

@@ -1,3 +1,8 @@
-const { contextBridge, ipcRenderer } = require("electron");
+const { contextBridge, remote, ipcRenderer } = require("electron");
 
-contextBridge.exposeInMainWorld("api", {});
+contextBridge.exposeInMainWorld("api", {
+    close: () => ipcRenderer.send('close-window'),
+    minimize: () => ipcRenderer.send('minimize-window'),
+    maximize: () => ipcRenderer.send('maximize-window'),
+    restore: () => ipcRenderer.send('restore-window'),    
+});