In the first post we described what WebKit and JavaScriptCore is, how to program a simple WebKitGTK+ application and how to extend the JavaScript functionality with a dumb (empty) class. In the second post, we extended JavaScript to enable desktop notifications.
In this third tutorial we are going to extend WebKit/JavaScriptCore to enable access to system information, specifically, battery status. We'll do this using D-Bus.
What's D-Bus?
Today's desktop environments, like GNOME and KDE, quickly respond to USB events: when an external drive is connected, a file navigator appears. How does it work?
GNOME and KDE provide a standard system for interprocess communication, called D-Bus. D-Bus communications is object oriented: applications expose objects with their methods, properties and events, and they are remotely available.
There are GUI applications to play with D-Bus. One of them is D-Feet. To install it on Ubuntu, type:
$ sudo apt-get install d-feet
In D-Feet we can connect to two default buses: the session bus and the system bus. Regular desktop applications use the session bus, tied to the user running the current desktop session. The system bus has a lower level and used by services in the operating system. This screenshot shows D-Feet connected to the session bus:
And finally the enigma is solved: if the desktop wants to know when a new disk is attached to the computer, it just can do it using D-Bus and UDisks interface: actually, the operating system uses the system bus to communicate disk events.
D-Bus and battery status: UPower.
In the screenshot above, on the right we can see the interfaces, methods and properties exposed by UPower in the system bus. For example, the list of power devices (batteries and power line) is available using the EnumerateDevices() method, which returns the device list as and array of objects. Another interface, UPower.Device, gives us access to the battery status, and we'll use it to build our custom JavaScript class.
In order to connect to D-Bus, we use the Glib's D-Bus bindings. To install the development libraries, type:
$ sudo apt-get install libdbus-glib-1-dev
The actual code is this:
#include <stdlib.h>
#include <dbus/dbus.h>
#include <dbus/dbus-glib.h>
#include <gtk/gtk.h>
#include <webkit/webkit.h>
#include <JavaScriptCore/JavaScript.h>
DBusGConnection *conn;
DBusGProxy *proxy;
DBusGProxy *properties_proxy;
/* Class initialize */
static void battery_init_cb(JSContextRef ctx,
JSObjectRef object)
{
GError *error = NULL;
/* Connection to the system bus */
conn = dbus_g_bus_get (DBUS_BUS_SYSTEM, &error);
if (conn == NULL)
{
g_printerr ("Failed to open connection to bus: %s\n", error->message);
g_error_free (error);
return;
}
/* Create a proxy object for "org.freedesktop.UPower" */
proxy = dbus_g_proxy_new_for_name (conn,
"org.freedesktop.UPower",
"/org/freedesktop/UPower/devices/battery_BAT0",
"org.freedesktop.UPower.Device.Properties");
if (proxy == NULL)
{
g_printerr ("Failed to create proxy object\n");
return;
}
/* Creates a proxy using an existing proxy as a template */
properties_proxy = dbus_g_proxy_new_from_proxy (proxy,
"org.freedesktop.DBus.Properties",
dbus_g_proxy_get_path (proxy));
if (properties_proxy == NULL)
{
g_object_unref (proxy)
g_printerr ("Failed to create proxy object\n");
return;
}
error = NULL;
}
/* Class finalize */
static void battery_destroy_cb(JSObjectRef object)
{
/* Ends Battery. Free allocated memory. */
if (proxy != NULL) g_object_unref (proxy);
if (properties_proxy != NULL) g_object_unref (properties_proxy);
}
static gboolean proxy_property_value(char *property,
GValue *get_value,
GError **error)
{
/* Call Get method, wait for reply */
return dbus_g_proxy_call (properties_proxy, "Get", error,
G_TYPE_STRING, "/org/freedesktop/UPower/devices/battery_BAT0",
G_TYPE_STRING, property,
G_TYPE_INVALID,
G_TYPE_VALUE, get_value,
G_TYPE_INVALID);
}
static JSValueRef proxy_double_value(JSContextRef context,
char *property,
size_t argumentCount)
{
/* Calls to UPower to get a double value */
GError *error = NULL;
GValue get_value = {0, };
if (argumentCount == 0) {
/* Get property value */
if (!proxy_property_value(property, &get_value, &error))
{
g_printerr ("Error: %s\n", error->message);
g_error_free (error);
return JSValueMakeUndefined(context);
}
/* Convert value to double */
gdouble value = g_value_get_double(&get_value);
g_value_unset(&get_value);
return JSValueMakeNumber(context, value);
}
return JSValueMakeUndefined(context);
}
static JSValueRef proxy_uint64_value(JSContextRef context,
char *property,
size_t argumentCount)
{
/* Calls to UPower to get a uint64 value */
GError *error = NULL;
GValue get_value = {0, };
if (argumentCount == 0) {
/* Get property value */
if (!proxy_property_value(property, &get_value, &error))
{
g_printerr ("Error: %s\n", error->message);
g_error_free (error);
return JSValueMakeUndefined(context);
}
/* Convert value to uint64 */
guint64 value = g_value_get_uint64(&get_value);
g_value_unset(&get_value);
return JSValueMakeNumber(context, value);
}
return JSValueMakeUndefined(context);
}
static JSValueRef proxy_boolean_value(JSContextRef context,
char *property,
size_t argumentCount)
{
/* Calls to UPower to get a boolean value */
GError *error = NULL;
GValue get_value = {0, };
if (argumentCount == 0) {
/* Call method, wait for reply */
if (!proxy_property_value(property, &get_value, &error))
{
g_printerr ("Error: %s\n", error->message);
g_error_free (error);
return JSValueMakeUndefined(context);
}
/* Convert value to boolean */
gboolean value = g_value_get_boolean(&get_value);
g_value_unset(&get_value);
return JSValueMakeBoolean(context, value);
}
return JSValueMakeUndefined(context);
}
/* Battery.capacity method callback implementation */
static JSValueRef battery_capacity_cb(JSContextRef context,
JSObjectRef function,
JSObjectRef thisObject,
size_t argumentCount,
const JSValueRef arguments[],
JSValueRef *exception)
{
/* Get battery capacity status */
return proxy_double_value(context, "Capacity", argumentCount);
}
/* Battery.percentage method callback implementation */
static JSValueRef battery_percentage_cb(JSContextRef context,
JSObjectRef function,
JSObjectRef thisObject,
size_t argumentCount,
const JSValueRef arguments[],
JSValueRef *exception)
{
/* Get battery percentage status */
return proxy_double_value(context, "Percentage", argumentCount);
}
/* Battery.voltage method callback implementation */
static JSValueRef battery_voltage_cb(JSContextRef context,
JSObjectRef function,
JSObjectRef thisObject,
size_t argumentCount,
const JSValueRef arguments[],
JSValueRef *exception)
{
/* Get battery voltage status */
return proxy_double_value(context, "Voltage", argumentCount);
}
/* Battery.updateTime method callback implementation */
static JSValueRef battery_update_time_cb(JSContextRef context,
JSObjectRef function,
JSObjectRef thisObject,
size_t argumentCount,
const JSValueRef arguments[],
JSValueRef *exception)
{
/* Get battery update time */
return proxy_uint64_value(context, "UpdateTime", argumentCount);
}
/* Battery.PowerSupply method callback implementation */
static JSValueRef battery_power_supply_cb(JSContextRef context,
JSObjectRef function,
JSObjectRef thisObject,
size_t argumentCount,
const JSValueRef arguments[],
JSValueRef *exception)
{
/* Get battery power supply */
return proxy_boolean_value(context, "PowerSupply", argumentCount);
}
/* Class method declarations */
static const JSStaticFunction battery_staticfuncs[] =
{
{ "capacity", battery_capacity_cb, kJSPropertyAttributeReadOnly },
{ "percentage", battery_percentage_cb, kJSPropertyAttributeReadOnly },
{ "voltage", battery_voltage_cb, kJSPropertyAttributeReadOnly },
{ "updateTime", battery_update_time_cb, kJSPropertyAttributeReadOnly },
{ "powerSupply", battery_power_supply_cb, kJSPropertyAttributeReadOnly },
{ NULL, NULL, 0 }
};
static const JSClassDefinition notification_def =
{
0, // version
kJSClassAttributeNone, // attributes
"Battery", // className
NULL, // parentClass
NULL, // staticValues
battery_staticfuncs, // staticFunctions
battery_init_cb, // initialize
battery_destroy_cb, // finalize
NULL, // hasProperty
NULL, // getProperty
NULL, // setProperty
NULL, // deleteProperty
NULL, // getPropertyNames
NULL, // callAsFunction
NULL, // callAsConstructor
NULL, // hasInstance
NULL // convertToType
};
/* Callback - JavaScript window object has been cleared */
static void window_object_cleared_cb(WebKitWebView *web_view,
WebKitWebFrame *frame,
gpointer context,
gpointer window_object,
gpointer user_data)
{
/* Add classes to JavaScriptCore */
JSClassRef classDef = JSClassCreate(¬ification_def);
JSObjectRef classObj = JSObjectMake(context, classDef, context);
JSObjectRef globalObj = JSContextGetGlobalObject(context);
JSStringRef str = JSStringCreateWithUTF8CString("Battery");
JSObjectSetProperty(context, globalObj, str, classObj, kJSPropertyAttributeNone, NULL);
}
/* Destroy callback */
static void destroy(GtkWidget *widget,
gpointer data )
{
gtk_main_quit();
}
int
main (int argc, char* argv[])
{
/* Initialize the widget set */
gtk_init (&argc, &argv);
/* Create the window widgets */
GtkWidget *main_window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
GtkWidget *scrolled_window = gtk_scrolled_window_new (NULL, NULL);
/* Create the WebKit Web View widget */
GtkWidget *web_view = webkit_web_view_new ();
/* Connect the window object cleared event with callback */
g_signal_connect (G_OBJECT (web_view), "window-object-cleared", G_CALLBACK(window_object_cleared_cb), web_view);
/* Place the WebKitWebView in the GtkScrolledWindow */
gtk_container_add (GTK_CONTAINER (scrolled_window), web_view);
gtk_container_add (GTK_CONTAINER (main_window), scrolled_window);
/* Connect the destroy window event with destroy function */
g_signal_connect (G_OBJECT (main_window), "destroy", G_CALLBACK (destroy), NULL);
/* Open webpage */
webkit_web_view_load_uri (WEBKIT_WEB_VIEW (web_view), "file://webkit-04.html");
/* Create the main window */
gtk_window_set_default_size (GTK_WINDOW (main_window), 800, 600);
/* Show the application window */
gtk_widget_show_all (main_window);
/* Enter the main event loop, and wait for user interaction */
gtk_main ();
/* The user lost interest */
return 0;
}
This program creates a new JavaScript class, called Battery, with some useful methods, like Battery.percentage(), Battery.capacity() and Battery.powerSupply(). When the class is initiated, a system bus connection is created, which is used later by the methods to obtain actual battery values.
This is webkit-04.html, a simple web file which uses the newly created Battery class:
<html>
<head>
<meta https-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Extending JavaScript with WebKit. Battery class.</h1>
<script type="text/javascript">
document.write("Capacity: " + Battery.capacity() + "<br>");
document.write("Percentage: " + Battery.percentage() + "%<br>");
document.write("Voltage: " + Battery.voltage() + "<br>");
document.write("Update Time: " + Battery.updateTime() + "<br>");
document.write("Power supply: " + Battery.powerSupply() + "<br>");
</script>
</body>
</html>
To compile and run the program, type:
$ gcc -o webkit-04 webkit-04.c `pkg-config --cflags --libs webkitgtk-3.0 dbus-glib-1`
$ ./webkit-04
The program, if running on a laptop with batteries, will display something like this:
Great, isn't it!? :-)
The source code is available at github.com/vrruiz/WebKit-JavaScriptCore-Extensions.
As we've seen, D-Bus is a powerful system. Mixing JavaScript with D-Bus gives us incredible possibilities. See you in the next post!
Amazing, thanks very much! :)
Posted by: John | September 23, 2018 at 12:16 AM