If the title reads a little weird, you have successfully spotted my failure in using coding jargon effectively.

Processing.js allows you to create beautiful applications with Java or Javascript, or a mix of both if you are particularly hard to please. Here’s a tutorial on how to put your existing Processing.js applications inside a GTK window.

1)Make your Processing application. The documentation on the websites is easy to pickup.

2)Export the application to javascript after downloading/installing the javascript mode from the processing.js website. When you do this, four objects are generated inside the web-export folder inside the folder that contains your Processing files(.pde files). These are
->An index.html file
->A mysterious folder called libs that has nothing in it. (?)
->Your application file, a "your-application-name".pde file
->The processing.js script itself

3)Copy the above files/folders into the folder in which you want to create your GTK application, let the path of this folder be ~/suddenly-wishful

4)Create a file of your choice in ~/suddenly-wishful/, say “your-application-name”.js

5)The “your-application-name”.js file should be this:


const GLib = imports.gi.GLib;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
const Webkit = imports.gi.WebKit;

const HelloGNOME = new Lang.Class ({
Name: 'Hello GNOME',

// Create the application itself
_init: function () {
this.application = new Gtk.Application ();

// Connect 'activate' and 'startup' signals to the callback functions
this.application.connect('activate', Lang.bind(this, this._onActivate));
this.application.connect('startup', Lang.bind(this, this._onStartup));

// Callback function for 'activate' signal presents windows when active
_onActivate: function () {
this._window.present ();

// Callback function for 'startup' signal builds the UI
_onStartup: function () {
this._buildUI ();

// Build the application's UI
_buildUI: function () {

// Create the application window
this._window = new Gtk.ApplicationWindow ({
application: this.application,
title: "My awesome application",
default_height: 708,
default_width: 1200,
window_position: Gtk.WindowPosition.CENTER

// Create a webview to show the web app
this._webView = new Webkit.WebView ();
settings = this._webView.get_settings()
settings.set_property('enable-file-access-from-file-uris', 1)
// Put the web app into the webview
this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
"/index.html", null));

// Put the webview into the window
this._window.add (this._webView);

// Show the window and all child widgets


// Run the application
let app = new HelloGNOME ();
app.application.run (ARGV);

6)Run your application now, by using gjs .js

The above code snippet is a complete rip-off of the javascript tutorial for helloWorld.js on developer.gnome.org[1] except for the addition of

settings.set_property('enable-file-access-from-file-uris', 1)

in the code which enables you to use an existing html file for the diasplay inside your GTK window instead of loading a URL. In other words, you can use a File URI for the display inside your GTK window.

Processing.js inside a GTK window

Processing.js inside a GTK window

(The application can also be found at http://anura28.github.io/HCF/)

[1] – https://developer.gnome.org/gnome-devel-demos/3.6/helloWorld.js.html.en

About these ads