Eel: Borderless UI?

[Taha-Ansari]

Hi,

I was wondering if there was anyway to get rid of or hide the window frame that eel creates around the website as a container. Kind of like running an app in border-less mode. I know electron has this feature and i've tried setting chromeFlags to things like '--kiosk' but it hasn't been working so I believe it should be done through some kind of parameter for eel.start?

[ChrisKnott]

Do you mean fullscreen borderless, or windowed borderless?

[Taha-Ansari]

Do you mean fullscreen borderless, or windowed borderless?

windowed borderless

[ChrisKnott]

I think it is only possible if you use Electron as the browser. You can set this up yourself using 'custom' mode, or wait a few weeks for v1.0.0 which will include explicit 'electron' mode.

This is not possible in 'chrome-app' mode (the default) as Chrome does not support it, sorry.

[sedthh]

Is it possible to add menu / context menu items? I understand I can write my own menu items in the HTML and use CSS to make them look similar to the OS's, but I was wondering if this was possible or if tehre was an additional library that allows this? Thank you.

[04fsnape]

To run it via electron just do this

options = {
    'mode': 'custom',
    'args': ['node_modules/electron/dist/electron.exe', '.']
}

if __name__ == "__main__":
    eel.init('web')
    eel.start('index.html', options=options)

Obviously you'll need electron installed. You can download the electron-quick-start app and throw your gui.py in there. Then, modify the main.js file to point to your eel app, e.g. mainWindow.loadURL('http://localhost:8000/index.html'). You should replace mainWindow.loadFile('index.html') with that.

Then, in your instantiation of the BrowserWindow, you need to define some things to make it fullscreen and remove the frame, e.g.

mainWindow = new BrowserWindow({
    frame: false,
    fullscreen: true,
    webPreferences: {
      nodeIntegration: true
    }
})

Hope that helps you with the problem.

[nicofilliol]

@04fsnape Thanks a lot for sharing your approach, was able to get it running like that. However, do you know, is it possible to access the eel module from within the main.js script rather than only in the script tags within the html document? I am quite unexperienced with JavaScript so would be great if you could help me with that. For example, I am trying to set up a menu bar and call a function in the python script when Quit is clicked.

...
{
        label: 'Quit',
        accelerator: 'CmdOrCtrl+Q',
        click() {
          eel.quit_app();
          app.quit()
        }
}
...

The menu shows up as expected, however, whenever I try to click Quit, the following error message appears:

A JavaScript error occurred in the main process

Uncaught Exception:
ReferenceError: eel is not defined
    at click (/Users/XXX/Desktop/08 - Eelectron-quick-start/main.js:23:11)

[ChrisKnott]

I'm not sure what the nicest way to do this is. Maybe use window.webContents.executeJavascript('eel.close()');

To be honest I think it's maybe better to just listen for the websocket to close on the Python side, as it would cover all possible ways of closing, including crashes

[nicofilliol]

@ChrisKnott Thanks a lot for your answer. You are right, maybe the quit example wasn't such a good one. However, in other cases, how would it be possible to run python functions from within the main.js (something like eel.python_function()) without getting the ReferenceError: eel is not defined. Do I somehow have to import the module? I am really sorry, this seems like a very simple question but I wasn't able to find an answer to this on Google since /eel.js doesn't really exist (?, comment in example hello.html says <!-- Include eel.js - note this file doesn't exist in the 'web' directory -->).

[ChrisKnott]

The eel.js file is generated when you run the program, because it has to include information about the functions that have been exposed in Python. This is the "magic" that allows JS to know the names of the Python functions and create the equivalents.

The problem with loading /eel.js from main.js is that it requires a websocket to be connected from the JS interpreter to the Python interpreter, and I'm not sure if Node let's you open websockets from the main process.

There is a possible solution here https://stackoverflow.com/a/23569631

[nicofilliol]

I tried to play around with this a bit but and came up with the following code based on this:

// Load Eel module
  var http = require('http')
    , vm = require('vm')
    , concat = require('concat-stream'); // this is just a helper to receive the
  // http payload in a single callback
  // see https://www.npmjs.com/package/concat-stream

  http.get({
    host: 'localhost',
    port: 8000,
    path: '/eel.js'
  },
    function (res) {
      res.setEncoding('utf8');
      res.pipe(concat({ encoding: 'string' }, function (remoteSrc) {
        vm.runInThisContext(remoteSrc, 'remote_modules/eel.js');
      }));
    });

now I get errors such as this one:

Uncaught Exception:
remote_modules/eel.js:2
    _host: window.location.origin,
           ^
ReferenceError: window is not defined

This is really out of my skill level so I will leave it for the moment I think. Thanks a lot for your help though!

[ChrisKnott]

It's a valuable feature you've identified but it will require some changes to how the library works to implement I think.

Basically I originally wrote it with an implicit assumption that it was running in a browser and therefore stuff like "window" would be available.

Thanks for your interest, I hope you manage to get a workaround working!

I'm going to close this issue now because the original problem (borderless window) has been answered.