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:
#!/usr/bin/gjs
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
this._window.show_all();
},
});
// 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
(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
