Configuring IntelliJ IDEA for Electron

Standard

In the last blog¬†post on¬†Setting Up Electron Framework for Desktop Apps, we talked about Electron framework and its installation, we also tried a “Hello World” example in Electron. This post will a short one and will help you to configure¬†Electron in an IDE – IntelliJ IDEA 2016.

Let’s get started with our configuration, first thing is¬†making sure you are using JavaScript ECMAScript 6. Go to File > Settings > Languages and Frameworks > JavaScript and select ECMAScript 6. Now we need to install the JavaScript library for Electron called github-electron-DefinitelyTyped. This can be done by heading over to,

File > Settings > Languages and Frameworks > JavaScript > Libraries > (Select) Download.

After all the libraries are loaded search for github-electron-DefinitelyTyped  and download and install it. After that check / select that library.

settings_007

To enable “Coding Assistance” go to¬†File > Settings > Languages and Frameworks > Node.js and NPM > Enable the Coding Assistance for Node.js Core Library.

Run/Debug Configuration:

Select a Node.js run configuration. In the Node interpreter, give the path to the Electron executable. Also, in JavaScript file field give the path your main JavaScript file in the project and save this configuration and Run.

run-debug-configurations_008

Here’s a great Material Design desktop app I made with Electron Framework. In case you are wondering, I used Material Design Lite library for Material¬†Design components.

This slideshow requires JavaScript.

Fork this app on Github:

image4233

Read my other post on Setting Up Electron Framework for Desktop Apps. Download the best IDE in town here at JetBrains IntelliJ IDEA.

Advertisements

Setting up Electron framework for Desktop apps

Standard

So, I recently came across a bunch beautifully designed and developed desktop apps on my Linux. Now, as a Linux user, I am used to overlooking design and aesthetics over functionality. Linux desktop developers usually don’t spend their energy on making their apps more user-friendly and appealing instead they invest it in improving its functionality. And it is generally assumed by them that the user is someone who is well versed in Linux Vedas and can handle the “rugged” nature of their desktop apps. But this notion is slowly changing with the introduction of new cross-platform¬†desktop application frameworks like Electron. I have been using a few Electron apps for a¬†couple of months now and I will just leave it to you to decide how aesthetically pleasing they are.

This slideshow requires JavaScript.

What is Electron ?

Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.

Want to build cross-platform desktop applications ? Here’s how you go about setting up Electron in Linux.
First, we install npm to manage Node.js packages :

$ sudo apt-get install npm

Then we install Node.js :

$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
$ sudo apt-get install -y nodejs

Finally, we install Electron package. This command installs Electron globally but you can install it locally for your project.

$ sudo npm install -g electron

Now that we have installed Electron let us try a “Hello World” example as a part of our initiation¬†ceremony! Any Electron app source code primarily has three important components, the JavaScript, the HTML (CSS optional) and the JSON file called package.json.

This package.json file is important with respect to Electron to define the app name, version and its main process, which usually is the JavaScript (index.js).

{
  "name" : "Hello World",
  "version" : "0.1.0",
  "main" : "main.js"
}

The JavaScrip file consists of all the Electron APIs and it is necessary to define¬†const {app, BrowserWindow} = require('electron') in the .js file to include the Electron APIs. In this file you can include the rest of your app’s specific main process code. You can also put them in separate files and require them here.

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  win.loadURL(`file://${__dirname}/index.html`)

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

The BrowserWindow object creates a Window using the given width and height dimensions. When Electron has finished initialization and is ready to create browser windows we call the  app.on('ready', createWindow) method. Some APIs can only be used after this event occurs.
At last, we define the HTML tags we want to use in our index.html file and design our app as per our requirements. In this example, we will stick to the h1 tag.
To execute our Electron app, go to the project directory and execute with the electron command:

$ electron .
hello-world_006

Hello World – Electron App running on Linux Mint 18

Download the Hello World example here:

image4233

Further Readings :

Let me know your thoughts and experiments with Electron in the comments section below.

Flickr Wallpapers daily for Linux Mint & Ubuntu

Standard

Linux has very few options for ‘Automatic Wallpaper Setter’.¬†Variety¬†is at the top. I loved it, it has lots of image sources, effects, a digital clock and daily quotes. You can also set your wallpaper-switching¬†interval. It is really worth checking out. But what I wanted was a simple script that would download images from Flickr¬†daily and set them as my desktop wallpaper. So here is the Python script to download and set wallpapers on Linux Mint and Ubuntu from Flickr based on an image’s interestingness.

So, to get a list of interesting photos from Flickr we will require Flickr API keys (used strictly for non-commercial use). You can get them from here. The API we are going to use for our script is : flickr.interestingness.getList more info about this API can be found here. You can set its arguments as per your requirements. For this script, I am requesting the response in XML format but you can also get it in JSON. When we are done with tuning the API it would look something like this.

https://api.flickr.com/services/rest/?method=flickr.interestingness.getList&date=2016-04-11&per_page=5&api_key=YOUR_API_KEY

(You need put your API key there…). The above REST request doesn’t actually return an image URL but it returns Image IDs, Server IDs and Secret alphanumeric IDs of interesting images as per your limit (in this case 5) and date. Now our job is to map these image IDs to their respective static URLs so that it will be convenient for us to download them.

https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}_[mstzb].jpg

With the help of the above API, we can construct the source URLs of the images. At the tail of this API, we need to specify the size of the image we want to download. More info about this can be found here.

Let’s get back to our script. We need to select a date for retrieving interesting images on that date. Ideally, this date should be at least two days before. The limit for retrieving¬†the number of images should be around five as you will need only one wallpaper daily. We will now generate our API URL and request it via HTTP request which will return us an XML response which we have to parse (Sample XML Response from the Flickr Interesting API can be found here). Parsing XML in Python is quite simple and can be done with¬†ElementTree XML¬†.¬†After parsing the response we have to save all of its necessary attributes in independent variables and also replace any whitespaces with an underscore (to avoid any kind of conflicts while setting the wallpaper). With the help of these attributes we will generate our static URLs and add them in List[]. Also, we will create a Dictionary{} to maintain a mapping between image titles and URLs {'photo_url': 'photo_title'}.

So, we have five image URLs in a list and we can choose any one randomly (if you want) to set as our wallpaper. Once we have our desired image URL we can download the image file and save it in a directory. In this script, I have set the download directory as: ~/Pictures/Flickr/

If this download directory doesn’t exist¬†it will be created so that images can be saved there (in .jpg format). This script is specifically targeted to Cinnamon Desktop Environment [Linux Mint 17.X]. Wallpapers can be changed in Cinnamon as follows:

gsettings set org.cinnamon.desktop.background picture-uri file:////absolute_path_of_image_no_spaces

The same can be achieved in Ubuntu with Unity DE as follows:

gsettings set org.gnome.desktop.background picture-uri file:////absolute_path_of_image_no_spaces

Now this script sets wallpaper only if there is no image for that day in the download directory, but you can change that logic according to your preferences. To automate this script ie. to execute it whenever you are connected to the internet you can try this software Cuttlefish.  More info about Cuttlefish at Ubuntu handbook and OMGUbuntu. If you want to do it the hard way refer the Ubuntu guide for OnNetworkConnectionRunScript and this post on AskUbuntu.

This slideshow requires JavaScript.

This script is available on Github you can modify it as per your needs. If you encounter any bugs let me now.

image4233