Fullscreen and transparent doesn't work AND how to size with external variables?


#1

In the electron-quick-start I modified the creation of main window to be

  mainWindow = new BrowserWindow({transparent:true, fullscreen:true });

but then the window appears full screen, but is not transparent… even with

  mainWindow = new BrowserWindow({transparent:true, frame:false, fullscreen:true, alwaysOnTop:true });

it’s not transparent (and the text looks kind of blurry/smudged on the loaded page)

So instead I can do something like

    mainWindow = new BrowserWindow({x 0, y:0, width:1920,  height:1080, transparent:true, frame:false, alwaysOnTop:true });

which works… so I did some searching and found I could read environment variables…

  var _x = process.env.POS_X;
  var _y = process.env.POS_Y;
  var _width = process.env.SCREEN_WIDTH;
  var _height = process.env.SCREEN_HEIGHT;
  console.log( 'x %d %d %d %d \n' , _x , _y , _width , _height );
  mainWindow = new BrowserWindow({x:_x, y:_y, width:_width, height:_height, transparent:true, frame:false, alwaysOnTop:true });

But that doesn’t work. I’m a javascript noob sorry… the values exist and are Numbers (the console.log shows the right values) but the window still opens in the center of the screen 800x600 sized.

(at least for windows… )
And - as I was writing this I find that a transparent window isn’t mouse-transparent. Would be nice to set WS_EX_TRANSPARENT along with WS_EX_LAYERED… TRANSPARENT on MSDN only says ‘The window should not be painted until siblings beneath the window (that were created by the same thread) have been painted. The window appears transparent because the bits of underlying sibling windows have already been painted.’ but it also applies to mouse behavior such that the window only receives mousevents on non-transparent pixels. (maybe just another property to enable that? Maybe it exists, but re-reading https://github.com/atom/electron/blob/master/docs/api/browser-window.md doesn’t seem to indicate such an option…


#2

So I got the sources; and managed to get it to compile;
not sure how to package it to a node.js package to substitute/run in parallel with the existing electron I installed…

Or I’m not sure what the path is from ‘npm start’ until 'electron ’ is to just run a batch file for testing…

Also in teh sources I see a .patch file that includes stuff about transparent window status; but I don’t see that .patch as being applied to code in the tree… (and since it builds in-source I don’t see generated/patches sources) in the build tree either…


#3

I found docs/tutorial which at least helps me run it inplace.

with

  mainWindow = new BrowserWindow({transparent:true, fullscreen:true });

pressing ALT multiple times

(taken from electorn-quick-start/index.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

the ‘we are using node…’ text gets darker and darker and darker… (earlier in my intro I stated the text was ‘blurry’) reload (ctrl-R) refreshes back to nice thin-line text… I gues when the edit portion on the right side pops up it it causes a refresh that doesn’t clear the background and just draws the text over itself; so the antialiased edges of the characters get more opaqued with progressive redraws.


Now if I could just backtrack to where CreateWindow is called or how the window is created in the first place (since I really don’t see that anywhere except error reporting)… I really wonder how it manages to create a window; even if it was a dynamic link sort of thing, that should still exist as text somewhere…


#4

So I’ve been tracking through this for a bit. I see the ‘preferred’ way is to use WS_EX_COMPOSITED instead of WS_EX_LAYERED; and I misinterpreted my WS_EX_TRANSPARENT which is actually an option to pass all mouse messages no matter what.

I found the place that exStyle flags are being modified; and can ass WS_EX_TRANSPARENT, but can’t seem to get it to take WS_EX_LAYERED instead of WS_EX_COMPOSITED… though deep in chromium/content/browser/compostior/software_output_device_Win.cc is this in EndPaint()…

    DWORD style = GetWindowLong(hwnd_, GWL_EXSTYLE);
    style &= ~WS_EX_COMPOSITED;
    style |= WS_EX_LAYERED;
    SetWindowLong(hwnd_, GWL_EXSTYLE, style);

though I don’t see where it re-sets COMPOSITED or clears that out; if I use SpyXX on the window, it only has an ex style of 0x20 (which is actually WS_EX_TRANSPARENT, which I did not enable) So Still lost.

I do have a usage where alpha transparent mouse-event filtering is perfectly useful… it would be nice to have an option to enable that.

I still haven’t figured out why fullscreen and transparent don’t work together.


Re the Javascript error. I added a conversion to Number and it works…

  var _x = Number(process.env.POS_X);
  var _y = Number(process.env.POS_Y);
  var _width = Number(process.env.SCREEN_WIDTH);
  var _height = Number(process.env.SCREEN_HEIGHT);

and now it works fine to take the position settings from the environment. (For instance if I want to put it fullscreen on a left or right monitor).


#5

Fullscreen was always giving me problems. This worked for me finally:

modalWin = new BrowserWindow({
    width: window.screen.availWidth,
    height: window.screen.availHeight,
fullscreen: false,
});