Home

Awesome

#electron-vibrancy

Build Status Build status npm version

As of #7898 Vibrancy is now supported in Electron for macOS.

This module is intended to give an Electron BrowserWindow blur on its behind. Electron does not support 'blur behind' from a transparent window and this module uses native API calls to achieve the effect.

Running

Since this is a native addon, you will need your platforms build tools. Visual Studio,XCode etc.Also Python for node-gyp.

git clone https://github.com/arkenthera/electron-vibrancy
cd electron-vibrancy
npm install
cd spec/app # Go to sample app
electron . # electron --version should be 1.6.8

To rebuild again:

npm run conf
npm run rebuild

Also available through NPM.

npm install electron-vibrancy

To run tests see scripts/ci

Current Supported Platforms

Things to note

Although it works, I dont recommend using this module on a machine below Windows 10. See platforms section below for more information for macOS.

API

There are several methods depending on what you want to do and what platform you are on.

SetVibrancy(window, material) win , macOS

Returns Integer.View id of NSVisualEffectView. You need this for UpdateView or RemoveView. material has no effect on Windows.

Enables or disables vibrancy for the WHOLE window. It will resize automatically. If you want something custom, see AddView. See here for more info about NSVisualEffectMaterial.

DisableVibrancy(window) win, macOS

Disables Vibrancy completely.

AddView(window,options) macOS

Returns Integer.View id of NSVisualEffectView. You need this for UpdateView or RemoveView.

Adds a NSVisualEffectView to the window with the specified properties.If you dont specify a ResizeMask,default value for it is 2.

UpdateView(window,options) macOS

Returns Boolean.

Updates the NSVisualEffectView with the specified properties.

RemoveView(window,viewId) macOS

Returns Boolean.

Removes the NSVisualEffectView.

How to use

// Require the module
var electronVibrancy = require('..');
electronVibrancy.SetVibrancy(true,browserWindowInstance.getNativeWindowHandle());


// Preferred Usage

// mainWindow with show: false
mainWindow.on('ready-to-show',function() {
  var electronVibrancy = require('..');
  
  // Whole window vibrancy with Material 0 and auto resize
  electronVibrancy.SetVibrancy(mainWindow, 0);

  // auto resizing vibrant view at {0,0} with size {300,300} with Material 0
  electronVibrancy.AddView(mainWindow, { Width: 300,Height:300,X:0,Y:0,ResizeMask:2,Material:0 })

  // non-resizing vibrant view at {0,0} with size {300,300} with Material 0
  electronVibrancy.AddView(mainWindow, { Width: 300,Height:300,X:0,Y:0,ResizeMask:3,Material:0 })

  //Remove a view
  var viewId = electronVibrancy.SetVibrancy(mainWindow, 0);
  electronVibrancy.RemoveView(mainWindow,viewId);

  // Add a view then update it
  var viewId = electronVibrancy.SetVibrancy(mainWindow, 0);
  electronVibrancy.UpdateView(mainWindow,{ ViewId: viewId,Width: 600, Height: 600 });

  // Multipe views with different materials
  var viewId1 = electronVibrancy.AddView(mainWindow, { Width: 300,Height:300,X:0,Y:0,ResizeMask:3,Material:0 })
  var viewId2 = electronVibrancy.AddView(mainWindow, { Width: 300,Height:300,X:300,Y:0,ResizeMask:3,Material:2 })

  console.log(viewId1);
  console.log(viewId2);

  // electronVibrancy.RemoveView(mainWindow,0);
  // electronVibrancy.RemoveView(mainWindow,1);

  // or

  electronVibrancy.DisableVibrancy(mainWindow);
})

Screenshots

Platform notices

Windows

On Windows 10 the addon uses SetWindowCompositionAttribute, which is an undocumented API, which means it can be changed by Microsoft any time and break the functionality.

MacOS

Requires Yosemite and above.Some materials require 10.11+. Since this is the case, if you use a material that's not available on that macOS version, it will fallback to the default material value which is 0, which might not be what you want.

License

This project is under MIT. See LICENSE