Use rdkitjs in local application

Electron is tool to build cross platform desktop apps with javascript, HTML, and CSS.
http://electron.atom.io/
Users can develop their own app like web app. I think it’s interesting, because the developed application will run local environment.

Today I tried to use electron. My code (index.js) is almost same as quick start.
I installed browserfiy, rdkitjs, jquery and highcharts via using ‘npm install command’. ( highcharts was not used following code.)

To start, at first type…

npm init

Then I got packages.json

{
  "name": "electron_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "iwatobipen",
  "license": "GPL",
  "dependencies": {
    "highcharts": "^4.2.5",
    "jquery": "^3.0.0",
    "rdkit": "^0.1.1"
  },
  "devDependencies": {
    "electron-prebuilt": "^1.2.2"
  }
}

Then made index.js ( same as quick start ).

const electron = require('electron');
const $ = require( 'jquery' );
const Highcharts = require('highcharts');
// Module to control application life.
const {app} = electron;
// Module to create native browser window.
const {BrowserWindow} = electron;

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600, 'node-integration': false});

  // 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;
  });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow();
  }
});

// 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.

Next, I wrote index.html.
This code gets smiles as input and write molecule as SVG image.
It’s very simple.
Before writing code, I installed browserify, so the code can call library using require( ‘package name’ ).
BTW, I want to use jQuery but following it couldn’t call jQuery. So I wrote document.getElementById ….. instead of $( ‘#hogehoge’ )…. ;-(

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>RDKIT js with electron</title>
    <!-- jQuery is not loaded first run. Why???  -->
    <script> window.$ = window.jQuery =  require( 'jquery' );</script>
    <script> var Highcharts = require( 'highcharts' );</script>
    <script> var RDKit = require( 'rdkit' );</script>
    <script> var drawmol = function() {
                        var smi = document.getElementById('smi').value;
                        console.log( smi );
			var mol = RDKit.Molecule.fromSmiles( smi );
			mol.Kekulize();
			var svg = mol.Drawing2D();
			var svg = svg.split('svg:').join('');
                        document.getElementById("drawer").innerHTML = svg;         
               };
    </script>

  </head>
  <body>
    <h1>Smiles parser</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.<br>
    <p>This is simple smiles converter using RDKit js.</p>
    <p>Input smiles to text box and push the button.</p>
    <input id='smi' type='text' ><br>
    <button type='button' onclick='drawmol()' >draw</button><br>

    <div id='drawer'></div>
  </body>
</html>

Next run electron.

electron .

Then app will run. And input smiles, push button I got following image.
electron-test

It’s seems work well.
Electron-packager can make local app for multi platforms.
For convenient, just type
$ electron-packager . –all
I got electron-test.app. and the code run local environment.
😉
I uploaded the code to my repo.
https://github.com/iwatobipen/chemo_info/tree/master/electron_test/electron_test
Maybe zip archive will run without installing further js library.

Electron can make application like a web app it’s amazing for me.

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中