Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can electron webview transform mouse event to touch event?

Tags:

electron

I want to simulate a mobile device in desktop environment. I can't find a argument to transform mouse event to touch event.

How can I approach this job? Any hint will be great. Thank you so much.

like image 686
JamesYin Avatar asked Oct 27 '25 05:10

JamesYin


1 Answers

I think I figured it out. Dev environment:

  • node 7.4.0
  • Chromium 54.0.2840.101
  • Electron 1.5.1

    const app = electron.app 
    const BrowserWindow = electron.BrowserWindow

    let mainWindow;
    function createWindow() {

      mainWindow = new BrowserWindow({
        width: 1024,
        height: 768,
        frame: false,
        x: -1920,
        y: 0,
        autoHideMenuBar: true,
        icon: 'assets/icons/win/app-win-icon.ico'
      });

      try {
        // works with 1.1 too
        mainWindow.webContents.debugger.attach('1.2')
      } catch (err) {
        console.log('Debugger attach failed: ', err)
      }

      const isDebuggerAttached = mainWindow.webContents.debugger.isAttached()
      console.log('debugger attached? ', isDebuggerAttached)

      mainWindow.webContents.debugger.on('detach', (event, reason) => {
        console.log('Debugger detached due to: ', reason)
      });

      // This is where the magic happens!
      mainWindow.webContents.debugger.sendCommand('Emulation.setTouchEmulationEnabled', {
        enabled: true,
        configuration: 'mobile',
      });

      mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true,
        show: false,
        backgroundColor: '#8e24aa ',
      }));

      // Show the mainwindow when it is loaded and ready to show
      mainWindow.once('ready-to-show', () => {
          mainWindow.show()
      })
    }

    // Listen for app to be ready
    app.on('ready', createWindow);

like image 159
thorstorm Avatar answered Oct 30 '25 16:10

thorstorm