How to set zoomFactor of a window?


#1

I defined my window like this:

window = new browser({
      width: 1280, height: 768,
      transparent: true, frame: false,
      icon: NativeImage.createFromPath(__dirname + '/icon-128.png'),
      'node-integration': false // node integration must to be off
    });

When I try to set zoomFactor:

window.webContents.setZoomFactor(0.8);

It says TypeError: window.webContents.setZoomFactor is not a function

window.zoomFactor(0.8); same error.

What is the correct way to set zoomFactor?


#2

From looking at the docs, it should be window.webPreferences.zoomFactor(0.8).


#3

@DamnedScholar I’m getting TypeError: Cannot read property 'zoomFactor' of undefined this time.

Could you take a look what is wrong with my code: https://github.com/mertyildiran/Dermatron/blob/master/.electrify/index.js


#4

There’s no zoomFactor in that code, so I can’t be sure, but it looks like window is undefined at whatever point you’re trying to set that.


#5

@DamnedScholar Output of console.log(window);:

BrowserWindow {                               
  _events: 
   { blur: [Function],
     focus: [Function],
     'devtools-opened': [Function] },
  _eventsCount: 3,
  devToolsWebContents: [Getter] }

Output of console.log(window.webContents);:

EventEmitter {                                
  destroy: [Function: destroy],
  isDestroyed: [Function: isDestroyed],
  getId: [Function: getId],
  equal: [Function: equal],
  _loadURL: [Function: _loadURL],
  downloadURL: [Function: downloadURL],
  _getURL: [Function: _getURL],
  getTitle: [Function: getTitle],
  isLoading: [Function: isLoading],
  isWaitingForResponse: [Function: isWaitingForResponse],
  _stop: [Function: _stop],
  _goBack: [Function: _goBack],
  _goForward: [Function: _goForward],
  _goToOffset: [Function: _goToOffset],
  isCrashed: [Function: isCrashed],
  setUserAgent: [Function: setUserAgent],
  getUserAgent: [Function: getUserAgent],
  insertCSS: [Function: insertCSS],
  savePage: [Function: savePage],
  _executeJavaScript: [Function: _executeJavaScript],
  openDevTools: [Function: openDevTools],
  closeDevTools: [Function: closeDevTools],
  isDevToolsOpened: [Function: isDevToolsOpened],
  enableDeviceEmulation: [Function: enableDeviceEmulation],
  disableDeviceEmulation: [Function: disableDeviceEmulation],
  toggleDevTools: [Function: toggleDevTools],
  inspectElement: [Function: inspectElement],
  setAudioMuted: [Function: setAudioMuted],
  isAudioMuted: [Function: isAudioMuted],
  undo: [Function: undo],
  redo: [Function: redo],
  cut: [Function: cut],
  copy: [Function: copy],
  paste: [Function: paste],
  pasteAndMatchStyle: [Function: pasteAndMatchStyle],
  delete: [Function: delete],
  selectAll: [Function: selectAll],
  unselect: [Function: unselect],
  replace: [Function: replace],
  replaceMisspelling: [Function: replaceMisspelling],
  focus: [Function: focus],
  tabTraverse: [Function: tabTraverse],
  _send: [Function: _send],
  sendInputEvent: [Function: sendInputEvent],
  beginFrameSubscription: [Function: beginFrameSubscription],
  endFrameSubscription: [Function: endFrameSubscription],
  setSize: [Function: setSize],
  setAllowTransparency: [Function: setAllowTransparency],
  isGuest: [Function: isGuest],
  getWebPreferences: [Function: getWebPreferences],
  getOwnerBrowserWindow: [Function: getOwnerBrowserWindow],
  hasServiceWorker: [Function: hasServiceWorker],
  unregisterServiceWorker: [Function: unregisterServiceWorker],
  inspectServiceWorker: [Function: inspectServiceWorker],
  print: [Function: print],
  _printToPDF: [Function: _printToPDF],
  addWorkSpace: [Function: addWorkSpace],
  removeWorkSpace: [Function: removeWorkSpace],
  session: [Getter],
  devToolsWebContents: [Getter],
  send: [Function],
  executeJavaScript: [Function],
  _events: 
   { 'navigation-entry-commited': [Function],
     'ipc-message': [Function],
     'ipc-message-sync': [Function],
     'pepper-context-menu': [Function],
     'did-fail-provisional-load': [Function],
     '-page-title-updated': [Function],
     'page-title-updated': [ [Function], [Function] ],
     '-new-window': [Function],
     move: [Function],
     activate: [Function],
     crashed: [Function],
     'devtools-focused': [Function],
     'devtools-opened': [Function],
     'devtools-closed': [Function] },
  _eventsCount: 14,
  loadURL: [Function],
  getURL: [Function],
  stop: [Function],
  reload: [Function],
  reloadIgnoringCache: [Function],
  canGoBack: [Function],
  canGoForward: [Function],
  canGoToIndex: [Function],
  canGoToOffset: [Function],
  clearHistory: [Function],
  goBack: [Function],
  goForward: [Function],
  goToIndex: [Function],
  goToOffset: [Function],
  getActiveIndex: [Function],
  length: [Function],
  loadUrl: [Function],
  getUrl: [Function],
  printToPDF: [Function],
  browserWindowOptions: 
   { width: 1280,
     height: 768,
     transparent: true,
     frame: false,
     icon: 
      { toPng: [Function: toPng],
        toJpeg: [Function: toJpeg],
        toDataURL: [Function: toDataURL],
        toDataUrl: [Function: toDataUrl],
        isEmpty: [Function: isEmpty],
        getSize: [Function: getSize],
        setTemplateImage: [Function: setTemplateImage],
        isTemplateImage: [Function: isTemplateImage] },
     nodeIntegration: false } }

window is not undefined.


#6

No, I was looking in the wrong place because I think I misunderstood the original problem. You were closer to being right than I was.

I went into Electron’s code and searched for “zoom” and found this, from which I take that it might be worth trying win.webFrame.setZoomFactor(0.8).


#7

@DamnedScholar same error :sweat:

My electron version is "electron-prebuilt": "^0.35.4" because I’m using electrify to generate electron app from meteor app and its an unmaintained package for a year.

But I will update my electron version to 1.4.0 and I will post the result.


#8

Ohhh. That might be part of the problem.


#9

@DamnedScholar Output of console.log(process.versions.electron); is 1.4.8.

So I tried all functions, each one of them giving TypeError except window.webContents.setZoomFactor(0.8);

But I can not detect any zoom. For example I tried: window.webContents.setZoomFactor(2.0); but page still same.

I tried to pass as an option like this:

window = new BrowserWindow({
      width: 1200, height: 900,
      'zoom-factor': 2.0,
      'node-integration': false // node integration must to be off
    });

Reference

Again no change.


#10

Those options you passed to BrowserWindow are invalid, this is how you should set them:

window = new BrowserWindow({
      width: 1200, height: 900,
      webPreferences: {
        zoomFactor: 2.0,
        nodeIntegration: false
      }
});

#11

@enlight I realized that thanks! But how can I change zoomFactor after that?

I mean I want to zoom-in zoom-out programmatically.


#12

From what I can tell, in your renderer process, you can import webFrame:

var webFrame = require(‘electron’).webFrame

webFrame.setZoomFactor(2.0)

to use hot-keys to control zoom behavior, I think you’ll need to use the ipcRenderer

const ipcRenderer = require(‘electron’).ipcRenderer
and send events from your window menu

mainWindow.webContents.send(‘zoomIn’);

and then listen in the renderer.

Look at these docs: https://github.com/electron/electron/blob/master/docs/api/web-frame.md


#13

I got it to work with the angular-electron repository (see my stack overflow explanation)

Basically, in a service you should:

import { webFrame } from 'electron';
...
webFrame: typeof webFrame;
...
constructor() {
  if(this.Electron()) {
  ...
  this.webFrame = window.require('electron').webFrame;
...
}

And then in your templates, once you inject the service, you can:

this.electronService.webFrame.setZoomFactor(0.8);