Windows

Streamlining Electron.js App with Tray Icons

In the realm of desktop application development, Electron.js stands out as a robust framework for building cross-platform apps using web technologies. Among its many features, integrating tray icons can significantly enhance user experience by providing quick access to essential functionalities. Today, let’s explore how we can implement tray icons in our Electron.js application, from setup to implementation.

Setting Up A Electron.js Project

First things first, let’s set up a basic Electron.js project:

1. Initialize a new Node.js project

mkdir project_name && cd project_name
npm init -y

2. Install Electron.js

npm install electron

3. Create project files

project_name/
├── icon.png
├── index.html
├── index.js
├── node_modules
├── package.json
└── package-lock.json

– `index.html` for the application’s UI.

– `index.js` for Electron main process code.

– An icon file (`icon.png`) for the tray icon.

– add `start` command in package.json like this.

{
  "name": "project_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^29.0.1"
  }
}

Implementing Tray Icon Functionality

Next, let’s dive into implementing the tray icon functionality in `index.js` file:

const { app, Tray, BrowserWindow } = require('electron');
const path = require('path');

let tray = null;
let mainWindow = null;

app.on('ready', () => {
  tray = new Tray(path.join(__dirname, 'icon.png'));

  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    show: false,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');

  tray.on('click', () => {
    mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
  });
});

Running Your Electron.js Application

To run Electron.js application, execute the following command in the terminal:

npm start

This command will start Electron application, and we should see the tray icon appear in our system tray. Clicking on the tray icon should toggle the visibility of the application window.

Conclusion

Integrating tray icons into Electron.js application is a straightforward process that can greatly improve user experience. Whether it’s for displaying notifications, providing quick access to features, or simply adding a professional touch to our app, tray icons are a valuable addition to any desktop application.

With Electron.js, implementing tray icons becomes seamless, allowing us to focus on crafting an exceptional user experience for our desktop application. So why not enhance our Electron.js app with a sleek tray icon for innovative ideas?

Hope you enjoy that.

By Asahi



AmazonLightsailとtailscaleを使ったお手軽固定IPの取得

Static IPをアタッチしたLightsailとLinuxが動作しているローカルPCをtailscaleのVPNで繋いで
手軽に固定IPを利用してみます。

続きを読む

Encrypt and Decrypt files with GPG in linux

Today, I would like to share about encrypting and decrypting files with GPG in linux. Let’s take a look.

GPG, known as GNU Privacy Guard (GnuPG), is an open-source command-line tool to encrypt things like files, emails, messages and so on.

Installation

GPG usually pre-installed with most of the Linux Distributions. But just in case, you can install by the following command in terminal.

sudo apt install gnupg

Usage

Generate keys

To encrypt files, you need to generate a GPG key on the system firstly.

gpg –full-generate-key

If the options to select are asked, you can read and use default values by pressing Enter.

But you will need to fill name and email.

Checking GPG keys

You can also check your key lists as follows.

Encrypting a file

Firstly, let’s create a sample text file with some text.

And let’s encrypt a file by the following command.

The recipient argument is the email you wrote when creating key.

The above command output the encrypted file with .gpg extension. You can delete original file after encryption.

And we can see the contents of the encrypted file as follow.

Decrypting a file

You can decrypt an encrypted gpg file by the following command.

This command outputs a decrypted file named decrypted_test.txt. Now you can see correct text contents of the file.

So this is all for now and for more details, I recommend to read here.

Hope you enjoy that.

By Asahi



ラズベリーパイOSをPC上で動かしてみました

PCにインストール可能なRaspberryPi用のOS(Raspberry Pi Desktop for PC)があります。
今回はこのOSを VirtualBox上の仮想PC にインストールしてみます。

続きを読む

virtualbox上のゲストOSのApacheHttpServerへアクセスする

virtualboxのゲストOSとしてCentOSをインストールしました。
今回はその上で動くApacheHttpServerへ
ホストOSのブラウザからアクセスするまでの手順をご紹介します。

続きを読む


アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833(平日 10:00~17:00)

お問い合わせフォーム