ElectronOverlayPrototype

main.js

const electron = require('electron')
const { dialog } = require('electron')
const fs = require('fs');
const spawn = require('child_process').spawn;

// Module to control application life.
const app = electron.app
console.log(`App Path: ${app.getAppPath()}, DLL exists: ${fs.existsSync(app.getAppPath() + '/bin/klover-x86.dll')}`);

let x86 = spawn(app.getAppPath() + '\\bin\\klover-helper-x86.exe', []);
let x64 = spawn(app.getAppPath() + '\\bin\\klover-helper-x64.exe', []);

// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow

const path = require('path')
const url = require('url')
const net = require('net')

const createSharedMemory = require('hot-gossip').createSharedMemory;

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
let sharedBuffer
const overlayWidth = 1280;
const overlayHeight = 720;
const rendererJS = path.resolve(path.join(__dirname, 'renderer.js'))

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600, webPreferences: { preload: rendererJS} })
  sharedBuffer = createSharedMemory('KlientOverlay', overlayWidth * overlayHeight * 4);
  if (sharedBuffer) {
    console.log('Shared buffer created!');
  } else {
    console.error('Shared buffer failed to create');
    process.exit(1);
  }

  dialog.showOpenDialog({
    title: 'Choose a game',
    properties: ['openFile']}, (files) => {
      let env = { KONG_KLOVER_ENABLED: 'true' };
      let file = files.pop();
      console.log(`Spawning ${file}`);
      Object.assign(env, process.env);
      spawn(file, [], { env: env });
  });

  // and load the index.html of the app.
  let url = 'https://webref.ru/assets/images/canvasdeepdive/checkerboard.png';
  url = 'http://kong.dreamhosters.com/overlay/';
  mainWindow.loadURL(url); /*url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))*/

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

  win = new BrowserWindow({
    width: overlayWidth,
    height: overlayHeight,
    frame: false,
    show: false,
    transparent: true,
    webPreferences: {
      // offscreen: true,
      // nodeIntegration: false,
      preload: rendererJS
    }
  });

  //win.loadURL('https://media.giphy.com/media/FnGJfc18tDDHy/giphy.gif')
  //win.loadURL('http://blogfiles.wfmu.org/OH/2013/December/KUNG_FURY_Time_Hack_Board.gif');
  //win.loadURL('https://jqueryui.com/resources/demos/effect/show.html');
  //win.loadURL('https://jqueryui.com/resources/demos/button/default.html');
  //win.loadURL('http://netdna.webdesignerdepot.com/uploads7/3-elegant-css3-image-caption-effects/demo-3.html');
  //win.loadURL('http://kong.dreamhosters.com/overlay/', {extraHeaders: "pragma: no-cache\n"});
  win.loadURL(url, {extraHeaders: "pragma: no-cache\n"});
  /*let which = false;
  setInterval(function() {
    win.webContents.sendInputEvent({
      type: 'mouseMove',
      x: 256,
      y: which ? 100 : 300,
    });
    which = !which;
    console.log('Toggled element');
  }, 5000);*/

  let server = net.createServer(function(stream) {
    console.log('Client connected');
    stream.on('data', function(data) {
      data = data.toString('utf-8');
      let messages = data.split('\n');
      messages.forEach((msg) => {
        let parts = msg.split(',');
        if (parts.length < 2) return;

        console.log('message:', parts);

        let x = parseInt(parts[1]);
        let y = parseInt(parts[2]);
        let evt = {
          x: x,
          y: y,
          globalX: x,
          globalY: y,
          button: 'left'
        };

        if (parts[0] === 'move') {
          evt.type = 'mouseMove';
        } else if(parts[0] === 'down') {
          evt.clickCount = 1;
          evt.type = 'mouseDown';
        } else if(parts[0] === 'up') {
          evt.clickCount = 1;
          evt.type = 'mouseUp';
        } else if(parts[0] === 'keydown'){
          evt.type = 'keyDown';
          evt.keyCode = String.fromCharCode(parseInt(parts[1], 10));
        } else if(parts[0] === 'keyup') {
          evt.type = 'keyUp';
          evt.keyCode = String.fromCharCode(parseInt(parts[1], 10));
        } else if(parts[0] === 'char') {
          if (parts[1] === '\u0016') {
            console.log('PASTING');
            win.webContents.paste();
            return;
          } else if(parts[1] === '\u0001') {
            win.webContents.selectAll();
            return;
          } else if (parts[1] === '\u0018') {
            win.webContents.cut();
            return;
          } else if(parts[1] === '\u0003') {
            win.webContents.copy();
            return;
          }
          evt.type = 'char';
          evt.keyCode = parts[1];
        } else {
          return;
        }

        win.webContents.sendInputEvent(evt);
      });
    });
  });

  server.listen("\\\\.\\pipe\\KlientOverlay", function(){
    console.log('Server listening');
  });

  win.webContents.on('did-frame-finish-load', () => {
    win.webContents.executeJavaScript("var s = document.styleSheets[0];s.insertRule('::-webkit-scrollbar { display:none; }');");
  });

  /*win.webContents.on('paint', (event, dirty, image) => {
    let bmp = image.getBitmap();
    for(let y = dirty.y; y < dirty.y + dirty.height; y++) {
      let start = (overlayWidth * y + dirty.x) * 4;
      bmp.copy(sharedBuffer, start, start, start + dirty.width * 4);
    }
  });*/

  win.webContents.beginFrameSubscription(false, (bmp, dirty) => {
    for(let y = dirty.y; y < dirty.y + dirty.height; y++) {
      let srcStart = dirty.width * y * 4;
      let dstStart = (overlayWidth * y + dirty.x) * 4;
      bmp.copy(sharedBuffer, dstStart, srcStart, srcStart + dirty.width * 4);
    }
  });
  win.webContents.setFrameRate(30)

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// 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 (mainWindow === null) {
    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.