Why zuo?

“There is only one kind of heroism in the world, that is to recognize his hairline and still love to masturbate” — Roland

Electron is an interesting open source project that “lets you create desktop applications using pure JavaScript calling rich native [operating system] APIs”. It was tempting just to read the official synopsis, and I didn’t find anything on the market that I liked, so I decided to use Electron to develop one. Download address:

  • windows
  • Mac

Requirements and Interfaces

My software, the interface must be good-looking, LOGO must be atmospheric, the main tone to the kind of low sexy yet solemn, majestic black.

It’s a shame. Designers can’t just be casual.)

The functions include the following

  • Support shortcut key operation and can be customized.
  • There are historical records of color selection.
  • Can freely switch color values.
  • The rGBA color value of the current color picker is calculated under the condition of known transparency and background color.
  • Support to minimize to pallets

The basic idea

Electron doesn’t have an API to fetch the current pointer location directly, but it does provide a way to fetch desktop resources. When performing the color operation using desktopCapturer current desktop screenshot, on the canvas and then use getImageData () to obtain the specified color value. Easy.

Problems encountered

There are a lot of introductions to Electron networks, and it’s not too difficult to get started. The relationships and operations between threads and the API documentation are very detailed, but that doesn’t mean you get on with life.

The Global variable is not available

It’s easy to implement a simple state management mechanism with IPC and Global, and this is where I hit my first pitfall. Because remote copies objects rather than providing references, global objects operated on in the renderer process need to have their initial values defined in the main process ahead of time. main process:

global.sharedObj = {prop1: null};
Copy the code

renderer process:

remote.getGlobal('sharedObj').prop1 = 125;
Copy the code

Received: received: 2020 Received: 2020 Received: 2020

Through desktopCapturer. GetSources () API we can get a DesktopCapturerSource object, combined with getUserMedia we can easily access to current available resources.

// In the renderer process.
const { desktopCapturer } = require('electron')

desktopCapturer.getSources({ types: ['window'.'screen'] }, (error, sources) => {
  ...
  navigator.mediaDevices.getUserMedia({
    ...
    video: {
      mandatory: {
        chromeMediaSource: 'desktop'.chromeMediaSourceId: sources[0].id,
        ...
      }
    }
  }).then((stream) = > {
    const video = document.querySelector('video')
    video.srcObject = stream
  }).catch((e) = >...). })Copy the code

The above is the official usage document. After drawing the first frame of the video to canvas, the screenshot of the current desktop will be taken successfully. But things are not so simple, in the countless times I read the film, any nuance is nowhere to escape, getUserMedia images were actually chromatic aberration



sRGB



DesktopCapturerSource
thumnail(NativeImage)
butdesktopCapturerIt blocks the process at work
thumnail
desktop-screenshot

Error writing file path. Procedure

Object Syntax Max Access Description Impleme nted Specifica tions The lowdb node library is used to store the set key shortcuts and historical color values. This works fine at the time of development but can be packaged and run on a Mac. EROFS: Read-only File system



app.getPath(name) 

  app.getPath(name) // Electron
  or
  os.tmpdir() // The node native module gets the temporary file path
Copy the code

Packaging optimization

There are no solutions except to reduce dependencies as much as possible. Don’t ask. It starts at 100 meters.

At the end

Although this is a simple project, there is still much to explore. Although often accompanied by small pits, but in general the defects do not hide, the experience is quite in place. If you want a taste of desktop app development, the Electron is a great choice. github

References:

  • Electron document