mkdir apex-app-desktop cd apex-app-desktop npm init
{ "name": "apex-app-desktop", "version": "1.0.0", "description": "APEX Desktop Application using Github Electron", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/Dani3lSun/apex-app-desktop.git" }, "author": "Daniel Hochleitner", "license": "MIT", "bugs": { "url": "https://github.com/Dani3lSun/apex-app-desktop/issues" }, "homepage": "https://github.com/Dani3lSun/apex-app-desktop#readme", "devDependencies": { "electron-prebuilt": "^1.1.0" } }
{ "name": "apex-app-desktop", "version": "1.0.0", "description": "APEX Desktop Application using Github Electron", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "electron ." }, "repository": { "type": "git", "url": "git+https://github.com/Dani3lSun/apex-app-desktop.git" }, "author": "Daniel Hochleitner", "license": "MIT", "bugs": { "url": "https://github.com/Dani3lSun/apex-app-desktop/issues" }, "homepage": "https://github.com/Dani3lSun/apex-app-desktop#readme", "devDependencies": { "electron-prebuilt": "^1.1.0" } }
npm i electron-prebuilt --save-dev #for local app folder npm i -g electron-prebuilt #globally for using commandline
// Libraries used in the app var app = require('electron').app; var BrowserWindow = require('electron').BrowserWindow; var appMenu = require('electron').Menu; var appTray = require('electron').Tray; var path = require('path'); const { crashReporter } = require('electron'); app.commandLine.appendSwitch('ignore-certificate-errors', 'true'); // Crash Reporter (Optional) crashReporter.start({ productName: 'APEX Plugins', companyName: 'Daniel Hochleitner', submitURL: 'https://github.com/Dani3lSun/apex-app-desktop/issues', autoSubmit: false }); // Init mainWindow and Tray var mainWindow = null; var appIcon = null; // Kill the app when all windows are closed app.on('window-all-closed', function() { if (process.platform != 'darwin') { app.quit(); } }); // App is loaded app.on('ready', function() { // Tray icon // template var trayTemplate = [{ label: "About Application", selector: "orderFrontStandardAboutPanel:" }, { label: "Quit", click: function() { app.quit(); } }]; // set tray icon with context menu appIcon = new appTray(path.join(__dirname, 'img/tray.png')); appIcon.setContextMenu(appMenu.buildFromTemplate(trayTemplate)); // Create the main window for the app mainWindow = new BrowserWindow({ "width": 1280, // init width "height": 800, // init height "minWidth": 1024, "minHeight": 800, "resizable": true, "useContentSize": true, //"transparent": true, // better look in OSX "titleBarStyle": "hidden-inset", // better look in OSX "icon": path.join(__dirname, 'img/tray.png') // app icon (for linux build) }); // Load in content with webview to APEX app mainWindow.loadURL('file://' + __dirname + '/index.html'); // Ensure that garbage collection occurs when the window is closed mainWindow.on('closed', function(e) { mainWindow = null; }); // Create the Application main menu (required for Copy&Paste Support) // Application menu var menuTemplate = [{ label: "Application", submenu: [{ label: "About Application", selector: "orderFrontStandardAboutPanel:" }, { type: "separator" }, { label: "Quit", accelerator: "Command+Q", click: function() { app.quit(); } }] // Edit menu }, { label: "Edit", submenu: [{ label: "Undo", accelerator: "CmdOrCtrl+Z", selector: "undo:" }, { label: "Redo", accelerator: "Shift+CmdOrCtrl+Z", selector: "redo:" }, { type: "separator" }, { label: "Cut", accelerator: "CmdOrCtrl+X", selector: "cut:" }, { label: "Copy", accelerator: "CmdOrCtrl+C", selector: "copy:" }, { label: "Paste", accelerator: "CmdOrCtrl+V", selector: "paste:" }, { label: "Select All", accelerator: "CmdOrCtrl+A", selector: "selectAll:" }] }, { // View menu label: 'View', submenu: [{ label: 'Reload', accelerator: 'CmdOrCtrl+R', click: function(item, focusedWindow) { if (focusedWindow) focusedWindow.reload(); } }, { label: 'Toggle Full Screen', accelerator: (function() { if (process.platform == 'darwin') return 'Ctrl+Command+F'; else return 'F11'; })(), click: function(item, focusedWindow) { if (focusedWindow) focusedWindow.setFullScreen(!focusedWindow.isFullScreen()); } }, { label: 'Toggle Developer Tools', accelerator: (function() { if (process.platform == 'darwin') return 'Alt+Command+I'; else return 'Ctrl+Shift+I'; })(), click: function(item, focusedWindow) { if (focusedWindow) focusedWindow.toggleDevTools(); } }] }]; // set menu with options from above appMenu.setApplicationMenu(appMenu.buildFromTemplate(menuTemplate)); }); // Create the main window for the app when App is reopened from OSX Dock app.on('activate', function(e, hasVisibleWindows) { if (mainWindow === null) { mainWindow = new BrowserWindow({ "width": 1280, //init width "height": 800, // init height "minWidth": 1024, "minHeight": 800, "resizable": true, "useContentSize": true, "transparent": true, // better look in OSX "titleBarStyle": "hidden-inset", // better look in OSX "icon": path.join(__dirname, 'img/tray.png') // app icon (for linux build) }); mainWindow.loadURL('file://' + __dirname + '/index.html'); mainWindow.on('closed', function() { mainWindow = null; }); } });
APEX Plugins
// Functions for APEX triggered events in electron // opponent for electronapex.js functions inside APEX // // electron functions electron = window.require('electron'); var stringDevider = "::"; module.exports = { // opens a local file from consol.log text from APEX openLocalFile: function(consoleString) { var position = consoleString.indexOf(stringDevider) + 2; path = consoleString.substr(position); var shell = electron.shell; shell.openItem(path); } };
// Functions for electron used in APEX // functions often uses wrapper around console.log (webview.addEventListener('console-message' gets these events)) // upload to APEX App! var stringDevider = "::"; // global namespace var electronapex = { // open file openFile: function(path) { var type = 'open-file'; console.log(type + stringDevider + path); }, // check if notifications are enabled notifyCheck: function() { // Let's check if the browser supports notifications if (!("Notification" in window)) { alert("This browser does not support system notifications"); } // Let's check whether notification permissions have already been granted else if (Notification.permission === "granted") { // If it's okay let's create a notification var notification = new Notification("You already have granted Notification permissions, great!:)"); } // Otherwise, we need to ask the user for permission else if (Notification.permission !== 'denied') { Notification.requestPermission(function(permission) { // If the user accepts, let's create a notification if (permission === "granted") { var notification = new Notification("Now Notifications should work!"); } }); } }, // send a notification doNotify: function(text) { var notification = new Notification(text); } };
npm install #installs all dependencies from package.json npm start
npm start
npm install electron-packager -g
cd apex-app-desktop electron-packager . "APEX Plugins" --platform=darwin --arch=x64 --version=0.36.4 --app-version=1.0.0 --icon img/app.icns
cd apex-app-desktop electron-packager . "APEX Plugins" --platform=linux --arch=x64 --version=0.36.4 --app-version=1.0.0
cd apex-app-desktop electron-packager . "APEX Plugins" --platform=win32 --arch=x64 --version=0.36.4 --app-version=1.0.0 --icon img/app.ico

                                    ├── Contents (you are here!) │ ├── Architecture │ ├── * What can be used for? │ ├── In Electron Project │ └── In Nodejs/Electron Project │ ├── * Install │ ├── * Instruction1: ProcessManager │   ├── Require it in main.js(electron) │   └── Open process-manager window for your application │ ├── * Instruction2: Service │   ├── The arguments to create a service │   ├── Enable service auto reload after code changed │   └── The methods of a Service instance │ ├── * Instruction3: MessageChannel │   ├── The methods of MessageChannel │   └── A full usage │ ├── * Instruction4: ChildProcessPool │   ├── Create a childprocess pool │   ├── Send request to a process instance │   ├── Send request to all process instances │   ├── Destroy the child processes of the process pool │   └── Set the max instance limit of pool │ ├── * Instruction5: ProcessHost │   ├── Require it in a sub process │   ├── Registry a task with unique name │   ├── Working with ChildProcessPool │   └── Unregistry a task with unique name │ ├── Examples
$: npm install electron-re --save # or $: yarn add electron-re
const { MessageChannel, // must required in main.js even if you don't use it ProcessManager } = require('electron-re');
ProcessManager.openWindow();
const { BrowserService } = require('electron-re'); const myServcie = new BrowserService('app', path.join(__dirname, 'path/to/app.service.js'));
/* --- main.js --- */ const myService = new BrowserService('app', 'path/to/app.service.js', options);
/* --- main.js --- */ const myService = new BrowserService('app', 'path/to/app.service.js', { ...options, // set dev mode dev: true, // with webSecurity closed webPreferences: { webSecurity: false } });
/* --- main.js --- */ const { BrowserService, MessageChannel // must required in main.js even if you don't use it } = require('electron-re'); ... app.whenReady().then(async() => { // after app is ready in main process const myService = new BrowserService('app', 'path/to/app.service.js'); // async await myService.connected(); mhyService.openDevTools(); /* work with webContents method, also you can use MessageChannel instead */ mhyService.webContents.send('channel1', { value: 'test1' }); }); ...
/* --- app.service.js --- */ const { ipcRenderer } = require('electron'); /* working with ipc method, also you can use MessageChannel instead */ ipcRenderer.on('channel1', (event, result) => { // works ... });
/* send data to a service - like the build-in ipcMain.send */ MessageChannel.send('service-name', channel, params); /* send data to a service and return a Promise - extension method */ MessageChannel.invoke('service-name', channel, params); /* send data to a renderer/servcie which id is same as the given windowId/webContentsId, same as ipcRenderer.sendTo, recommend to use it when you want to send data from main/service to a renderer window */ MessageChannel.sendTo('windowId/webContentsId', channel, params); /* listen a channel, same as ipcMain.on/ipcRenderer.on */ MessageChannel.on(channel, func); /* listen a channel once, same as ipcMain.once/ipcRenderer.once */ MessageChannel.once(channel, func);
/* send data to main process - like the build-in ipcRender.send */ MessageChannel.send('main', channel, params); /* send data to main process and return a Promise - extension method */ MessageChannel.invoke('main', channel, params);
/* handle a channel signal, extension method, and you can return data directly or return a Promise instance */ MessageChannel.handle(channel, processorFunc);
const { BrowserService, MessageChannel // must required in main.js even if you don't use it } = require('electron-re'); const isInDev = process.env.NODE_ENV === 'dev'; ... /* use MessageChannel instead of build-in method */ app.whenReady().then(() => { const myService = new BrowserService('app', 'path/to/app.service.js'); myService.connected().then(() => { // open devtools in dev mode for debugging if (isInDev) myService.openDevTools(); MessageChannel.send('app', 'channel1', { value: 'test1' }); MessageChannel.invoke('app', 'channel2', { value: 'test2' }).then((response) => { console.log(response); }); MessageChannel.on('channel3', (event, response) => { console.log(response); }); MessageChannel.handle('channel4', (event, response) => { console.log(response); return { res: 'channel4-res' }; }); }) });
const { ipcRenderer } = require('electron'); const { MessageChannel } = require('electron-re'); MessageChannel.on('channel1', (event, result) => { console.log(result); }); MessageChannel.handle('channel2', (event, result) => { console.log(result); return { response: 'channel2-response' } }); MessageChannel.invoke('app2', 'channel3', { value: 'channel3' }).then((event, result) => { console.log(result); }); MessageChannel.send('app2', 'channel4', { value: 'channel4' });
MessageChannel.handle('channel3', (event, result) => { console.log(result); return { response: 'channel3-response' } }); MessageChannel.once('channel4', (event, result) => { console.log(result); }); MessageChannel.send('main', 'channel3', { value: 'channel3' }); MessageChannel.send('main', 'channel3', { value: 'channel3' }); MessageChannel.invoke('main', 'channel4', { value: 'channel4' });
const { ipcRenderer } = require('electron'); const { MessageChannel } = require('electron-re'); MessageChannel.send('app', 'channel1', { value: 'test1'}); MessageChannel.invoke('app2', 'channel3', { value: 'test2' }); MessageChannel.send('main', 'channel3', { value: 'test3' }); MessageChannel.invoke('main', 'channel4', { value: 'test4' });
const { ChildProcessPool } = require('electron-re'); global.ipcUploadProcess = new ChildProcessPool({ path: path.join(app.getAppPath(), 'app/services/child/upload.js'), max: 6, env: { lang: global.lang, NODE_ENV: nodeEnv } });
global.ipcUploadProcess.send( 'init-works', { name: 'fileName', type: 'fileType', size: 'fileSize', }, uploadId ) .then((rsp) => { console.log(rsp); });
global.ipcUploadProcess.sendToAll( 'record-get-all', { data: 'test' } ) .then((rsp) => { console.log(rsp); });
global.ipcUploadProcess.disconnect(id);
global.ipcUploadProcess.setMaxInstanceLimit(number);
const { ProcessHost } = require('electron-re');
ProcessHost .registry('init-works', (params) => { return initWorks(params); }) .registry('async-works', (params) => { return asyncWorks(params); }); function initWorks(params) { console.log(params); return params; } function asyncWorks(params) { console.log(params); return fetch(url); }
/* 1. send a request in main process */ global.ipcUploadProcess.send( 'init-works', { name: 'fileName', type: 'fileType', size: 'fileSize', }, uploadId ); ... /* 2. handle this request in sub process */ ...
ProcessHost .unregistry('init-works') .unregistry('async-works') ...

                                    /* ** When image is dragged on editor, addImageBlobHook will be called ** Returned callback will be shown on editor */ editorOptions: { hideModeSwitch: false, usageStatistics: false, highlightFormatting: true, hooks: { 'addImageBlobHook': (blob, callback) => { this.LoadingNotification = true; this.uploadFileAsync(blob).then(res => { if (!res) { this.LoadingNotification = false; this.showNotification("Error: Upload Failed by Connection", "error"); } else callback(res); }) return false; } }, }, /* ** Image blob file to base64 ** con file contains setting information (json file) */ async uploadFileAsync(blob) { let base64 = await this.readFileAsync(blob); // for github api V3 authentication header setting (axios) // axios instance must be created let uploadAxios = this.$http.create({ timeout: 10000, headers: { 'Authorization': 'token ' + con.token, 'Content-Type': 'application/json' } }); // for github api V3 : upload content in repo let repo_parm = { "message": con.uploadMsg, "branch": con.branch, "content": base64 } // content name must be distinguished : upload time append const uid = new Date(); // upload content -> response is "uploaded content url" return uploadAxios.put(con.repoURL + 'screenshot-' + uid + ".png", repo_parm) .then(res => { this.LoadingNotification = false; this.showNotification("Successfully Uploaded Image!", "success"); return res.data.content.html_url + '?raw=true' }) .catch(err => { console.log(err) return false; }) },
tmpSave() { if (this.newFlag) { this.newNoteLoading = true this.$store.dispatch('getMenuId').then(menuId => { if (!menuId) alert("Saving Note Failed : Invalid Menu!") else { let postData = { title_text: this.title_text, subtitle: this.subtitle, todo: this.checkIcon, completed: false, bgImage: this.backgroundUrl, content_text: this.content_text, menuId: menuId, createdAt: this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss"), updatedAt: "", }; db.collection("notes/").add(postData) .then((docRef) => { this.newNoteLoading = false; this.id = docRef.id; this.newFlag = false; console.log("Saved with ID: ", docRef.id); this.showNotification("Successfully Saved New Note", ""); }) .catch((error) => { console.error("Error saving document: ", error); }); } }) } else { if (this.id == "") { console.log("Note must be saved before temporary save!"); return 0; } this.newNoteLoading = true; let postData = { title_text: this.title_text, subtitle: this.subtitle, todo: this.checkIcon, bgImage: this.backgroundUrl, content_text: this.content_text, updatedAt: this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss"), }; db.collection("notes").doc(this.id).update(postData).then(() => { console.log("updated " + this.id) this.newNoteLoading = false; this.showNotification("Successfully Saved Temporary Note", ""); }); } },
/* //  // Get electron window.webContents // printToPDF, encode to 'base64' // convert base64 to blob // - modified 190721 - */ exportAsPdf() { remote.getCurrentWebContents().printToPDF({ marginsType: 2, printBackground: true, printSelectionOnly: false, landscape: false }, (error, data) => { if (error) throw error const blob = new Blob([data], { type: 'application/pdf' }) const e = document.createEvent('MouseEvents'), a = document.createElement('a'); a.download = this.title_text + ".pdf"; a.href = window.URL.createObjectURL(blob); a.dataset.downloadurl = ['application/pdf', a.download, a.href].join(':'); e.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); a.dispatchEvent(e); }) }, /* //  // Get content text data // convert text data to blob // - modified 190721 - */ exportAsFile() { const data = this.content_text const blob = new Blob([data], { type: 'text/plain' }) const e = document.createEvent('MouseEvents'), a = document.createElement('a'); a.download = this.title_text + ".md"; a.href = window.URL.createObjectURL(blob); a.dataset.downloadurl = ['text/json', a.download, a.href].join(':'); e.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); a.dispatchEvent(e); },
this.$http.get('https://source.unsplash.com/random/800x600').then(r => { this.backgroundUrl = r.request.responseURL; console.log("random background image set") });

const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;

const nodePath = require("path");

const os = require('os-utils');

let window;

function createWindow() {
    const window = new electronBrowserWindow({
        x: 0,
        y: 0,
        width: 800,
        height: 600,
        show: false,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            preload: nodePath.join(__dirname, 'preload.js')
        }
    });

    window.loadFile('index.html')
        .then(() => { window.show(); });

    return window;
}

function cpuStats() {
    return new Promise((resolve) => {
        os.cpuUsage((value) => {
            let data = {
                'cpu': (value * 100).toFixed(2),
                'mem': (os.freememPercentage() * 100).toFixed(2),
                'totalMem': (os.totalmem() / 1024).toFixed(2)
            }

            resolve(data);
        })
    })
}

electronApp.on('ready', () => {
    window = createWindow();

    setInterval(() => {
        cpuStats()
            .then((data) => {
                window.webContents.send('cpuStats:update', data);
                console.log(data) // Testing
            })
    }, 1000);
});

electronApp.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        electronApp.quit();
    }
});

electronApp.on('activate', () => {
    if (electronBrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

    
        
        CPU Stats Monitor
    

    
        
            CPU (%)
            -
        

        
            Free Mem (%)
            -
        

        
            Total Mem (GB)
            -
        
    

    

// Import the necessary Electron components.
const contextBridge = require('electron').contextBridge;
const ipcRenderer = require('electron').ipcRenderer;

// White-listed channels.
const ipc = {
    'render': {
        // From render to main.
        'send': [],
        // From main to render.
        'receive': [
            'cpuStats:update'
        ],
        // From render to main and back again.
        'sendReceive': []
    }
};

// Exposed protected methods in the render process.
contextBridge.exposeInMainWorld(
    // Allowed 'ipcRenderer' methods.
    'ipcRender', {
        // From render to main.
        send: (channel, args) => {
            let validChannels = ipc.render.send;
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, args);
            }
        },
        // From main to render.
        receive: (channel, listener) => {
            let validChannels = ipc.render.receive;
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender`.
                ipcRenderer.on(channel, (event, ...args) => listener(...args));
            }
        },
        // From render to main and back again.
        invoke: (channel, args) => {
            let validChannels = ipc.render.sendReceive;
            if (validChannels.includes(channel)) {
                return ipcRenderer.invoke(channel, args);
            }
        }
    }
);

// Allowed 'ipcRenderer' methods.
'ipcRender', {
    // From render to main.
    send: (channel, args) => {
        let validChannels = ipc.render.send;
        if (validChannels.includes(channel)) {
            ipcRenderer.send(channel, args);
        }
    },
    ...
}

// Import the necessary Electron components.
const contextBridge = require('electron').contextBridge;
const ipcRenderer = require('electron').ipcRenderer;

// White-listed channels.
const ipc = {
    'render': {
        // From render to main.
        'send': [
            'brightness:increment',
            'brightness:decrement'
        ],
        // From main to render.
        'receive': [],
        // From render to main and back again.
        'sendReceive': []
    }
};

// Exposed protected methods in the render process.
contextBridge.exposeInMainWorld(
    // Allowed 'ipcRenderer' methods.
    'ipcRender', {
        // From render to main.
        send: (channel, args) => {
            let validChannels = ipc.render.send;
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, args);
            }
        },
        // From main to render.
        receive: (channel, listener) => {
            let validChannels = ipc.render.receive;
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender`.
                ipcRenderer.on(channel, (event, ...args) => listener(...args));
            }
        },
        // From render to main and back again.
        invoke: (channel, args) => {
            let validChannels = ipc.render.sendReceive;
            if (validChannels.includes(channel)) {
                return ipcRenderer.invoke(channel, args);
            }
        }
    }
);

const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;
const electronIpcMain = require('electron').ipcMain;

const nodeFs = require("fs");
const nodePath = require("path");

// Prevent garbage collection
let window;

function createWindow() {
    const window = new electronBrowserWindow({
        x: 0,
        y: 0,
        width: 800,
        height: 600,
        show: false,
        webPreferences: {
            nodeIntegration: false, // For safety, let's disable Node integration
            contextIsolation: true, // For safety, let's enable context isolation
            preload: nodePath.join(__dirname, 'preload.js') // Let's use our preload script
        }
    });

    window.loadFile('index.html')
        .then(() => { window.show(); });

    return window;
}

electronApp.on('ready', () => {
    window = createWindow();
});

electronApp.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        electronApp.quit();
    }
});

electronApp.on('activate', () => {
    if (electronBrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

// Let's listen for messages to increment or decrement the brightness
electronIpcMain.on('brightness:increment', () => {
    adjustBrightness(10);
})

electronIpcMain.on('brightness:decrement', () => {
    adjustBrightness(-10);
})

// Function to adjust screen brightness
function adjustBrightness(adjustment) {
    let data = nodeFs.readFileSync('/sys/class/backlight/amdgpu_bl1/brightness', 'utf-8');

    let newData = parseInt(data) + adjustment;

    if (newData > 255) {
        newData = 255;
    } else if (newData < 0) {
        newData = 0;
    }

    newData = newData.toString();

    nodeFs.writeFileSync('/sys/class/backlight/amdgpu_bl1/brightness', newData, 'utf-8');
}

    
        
        Clock App
    

    
        
        
    

    

// Import the necessary Electron components.
const contextBridge = require('electron').contextBridge;
const ipcRenderer = require('electron').ipcRenderer;

// Exposed protected methods in the render process.
contextBridge.exposeInMainWorld("electron", {
    ipcRenderer: {
        on(channel, listener) {
            ipcRenderer.on(channel, (evt, message) => {
                listener(evt, message);
            });
        },
        removeListener(channel, listener) {
            ipcRenderer.removeListener(channel, (evt, message) => {
                listener(evt, message);
            });
        },
        invoke(channel, data) {
            return ipcRenderer.invoke(channel, data);
        }
    }
};

const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;
const electronIpcMain = require('electron').ipcMain;

const nodePath = require("path");

// Prevent garbage collection
let window;

function createWindow() {
    return new electronBrowserWindow({
        x: 0,
        y: 0,
        width: 800,
        height: 600,
        show: false,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            preload: nodePath.join(__dirname, 'preload.js')
        }
    });
}

function showMainWindow() {
    window.loadFile('index.html')
        .then(() => { window.show(); })
}

function showLoginWindow() {
    // window.loadURL('https://www.your-site.com/login')
    window.loadFile('login.html') // For testing purposes only
        .then(() => { window.show(); })
}

electronApp.on('ready', () => {
    window = createWindow();
    showMainWindow();
});

electronApp.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        electronApp.quit();
    }
});

electronApp.on('activate', () => {
    if (electronBrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

// ----- IPC -----

electronIpcMain.on('message:loginShow', (event) => {
    showLoginWindow();
})

electronIpcMain.on('message:loginSuccessful', (event, session) => {
    showMainWindow();
})

    
        
        Main Window
    

    
        Main Window

        Login
    

    

    
        
        Login Window
    

    
        Login Window

        Username: 
        


        Password: 
        


        Login
    

    

// Import the necessary Electron components.
const contextBridge = require('electron').contextBridge;
const ipcRenderer = require('electron').ipcRenderer;

// White-listed channels.
const ipc = {
    'render': {
        // From render to main.
        'send': [
            'message:loginShow',
            'message:loginSuccessful'
        ],
        // From main to render.
        'receive': [],
        // From render to main and back again.
        'sendReceive': []
    }
};

// Exposed protected methods in the render process.
contextBridge.exposeInMainWorld(
    // Allowed 'ipcRenderer' methods.
    'ipcRender', {
        // From render to main.
        send: (channel, args) => {
            let validChannels = ipc.render.send;
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, args);
            }
        },
        // From main to render.
        receive: (channel, listener) => {
            let validChannels = ipc.render.receive;
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender`.
                ipcRenderer.on(channel, (event, ...args) => listener(...args));
            }
        },
        // From render to main and back again.
        invoke: (channel, args) => {
            let validChannels = ipc.render.sendReceive;
            if (validChannels.includes(channel)) {
                return ipcRenderer.invoke(channel, args);
            }
        }
    }
);

// Import the necessary Electron components.
const contextBridge = require('electron').contextBridge;
const ipcRenderer = require('electron').ipcRenderer;

// White-listed channels.
const ipc = {
    'render': {
        // From render to main.
        'send': [],
        // From main to render.
        'receive': [],
        // From render to main and back again.
        'sendReceive': [
            'getPath'
        ]
    }
};

// Exposed protected methods in the render process.
contextBridge.exposeInMainWorld(
    // Allowed 'ipcRenderer' methods.
    'ipcRender', {
        // From render to main.
        send: (channel, args) => {
            let validChannels = ipc.render.send;
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, args);
            }
        },
        // From main to render.
        receive: (channel, listener) => {
            let validChannels = ipc.render.receive;
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender`.
                ipcRenderer.on(channel, (event, ...args) => listener(...args));
            }
        },
        // From render to main and back again.
        invoke: (channel, args) => {
            let validChannels = ipc.render.sendReceive;
            if (validChannels.includes(channel)) {
                return ipcRenderer.invoke(channel, args);
            }
        }
    }
);

const electronBrowserWindow = require('electron').BrowserWindow;
const electronDialog = require('electron').dialog;
const electronIpcMain = require('electron').ipcMain;

const nodePath = require("path");

let window;

function createWindow() {
    const window = new electronBrowserWindow({
        x: 0,
        y: 0,
        width: 800,
        height: 600,
        show: false,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            preload: nodePath.join(__dirname, 'preload.js')
        }
    });

    window.loadFile('index.html')
        .then(() => { window.show(); });

    return window;
}

electronApp.on('ready', () => {
    window = createWindow();
});

electronApp.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        electronApp.quit();
    }
});

electronApp.on('activate', () => {
    if (electronBrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

// -----

// Let's listen for a call on the 'getPath' channel
electronIpcMain.handle('getPath', async () => {
    // Dialog options.
    const options = {
        properties: ["openFile"],
        filters: [
            {
                name: "DSC Projects",
                extensions: ["DSCProj"],
            }
        ]
    }

    // When available, return the modified path back to the render thread via IPC
    return await openDialog(window, options)
        .then((result) => {
            // User cancelled the dialog
            if (result.canceled === true) { return; }

            // Modify and return the path
            let path = result.filePaths[0];
            let modifiedPath = nodePath.parse(path).dir; // Here's the magic.
            console.log(modifiedPath); // Testing

            return modifiedPath;
        })
})

// Create an open dialog
function openDialog(parentWindow, options) {
    return electronDialog.showOpenDialog(parentWindow, options)
        .then((result) => { if (result) { return result; } })
        .catch((error) => { console.error('Show open dialog error: ' + error); });
}

    
        
        Open Project Test
    

    
        
    

    

// Import the necessary Electron modules
const electronApp = require('electron').app;
const electronMenu = require('electron').Menu;

const isMac = process.platform === 'darwin'
const isWin = process.platform === 'win32'

function build() {
    const template = [
        // { role: 'appMenu' }
        ...(isMac ? [{
            label: electronApp.name,
            submenu: [
                { role: 'about' },
                { type: 'separator' },
                { role: 'services' },
                { type: 'separator' },
                { role: 'hide' },
                { role: 'hideOthers' },
                { role: 'unhide' },
                { type: 'separator' },
                { role: 'quit' }
            ]
        }] : []),
        // more menu code...
        {
            role: 'help',
            submenu: [
                {
                    label: 'Learn More',
                    click: async () => {
                        const { shell } = require('electron')
                        await shell.openExternal('https://github.com/aronsommer/eddy-g')
                    }
                }
            ]
        }
    ];
    
    electronMenu.setApplicationMenu(electronMenu.buildFromTemplate(template));
}

// Export the publicly available function
module.exports = {build};

const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;

const nodePath = require("path");

const appMenu = require('menu');

let window;

function createWindow() {
    const window = new electronBrowserWindow({
        x: 0,
        y: 0,
        width: 800,
        height: 600,
        show: false,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            preload: nodePath.join(__dirname, 'preload.js')
        }
    });

    window.loadFile('index.html')
        .then(() => { appMenu.build(); } // Build the menu
        .then(() => { window.show(); });

    return window;
}

electronApp.on('ready', () => {
    window = createWindow();
});

electronApp.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        electronApp.quit();
    }
});

electronApp.on('activate', () => {
    if (electronBrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

// Rebuild the menu on localisation change.
appEvents.on('locale:changed', () => {
    build();
});

const popupLogin = (htmlFile, parentWindow, width, height) => {

    // Get the customers id from whatever source necessary.
    let id = 99;

    // Create the window.
    let modal = new BrowserWindow({
        width: 600,
        height: 500,
        modal: true,
        resizable: false,
        icon: path.join(__dirname + 
 '/public/auxwall/logos/favicon.png'),
        parent: MainWindow,
        frame: false,
        show: false, // Hide possible flash and DOM update(s).
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            contextIsolation: true, // Set to true
            nodeIntegration: true,  // Node integration (removed in Electron v12)
        }
    })

    // Load the window.
    // Note: The loadFile() method returns a promise.
    modal.loadFile(`${__dirname}/pages/Company/login.html`)
        .then(() => { modal.webContents.send('login:id', id); })
        .then(() => { modal.show(); }) // Now show the modal

    return modal;
}

const contextBridge = require('electron').contextBridge;
const ipcRenderer = require('electron').ipcRenderer;

// White-listed channels.
const ipc = {
    'render': {
        // From render to main.
        'send': [],
        // From main to render.
        'receive': [
            'login:id'
        ],
        // From render to main and back again.
        'sendReceive': []
    }
};

contextBridge.exposeInMainWorld(
    // Allowed 'ipcRenderer' methods.
    'ipcRender', {
        send: (channel, args) => {
            let validChannels = ipc.render.send;
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, args);
            }
        },
        receive: (channel, listener) => {
            let validChannels = ipc.render.receive;
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender`
                ipcRenderer.on(channel, (event, ...args) => listener(...args));
            }
        },
        invoke: (channel, args) => {
            let validChannels = ipc.render.sendReceive;
            if (validChannels.includes(channel)) {
                return ipcRenderer.invoke(channel, args);
            }
        }
    }
);

    
        
        Title
        
        
    
    
        ....
    

(function() => {
        window.ipcRender.receive('login:id', (event, id) => { customerId(id); });
})();

function customerId(id) {
   console.log(id);
}