GUADEC a la española

Tapas, jamón are the first words that come to my mind after this year GUADEC in Almería

One of the best part of traveling is discovering new customs and trying new things…

 

 

 

 

Do you want tomato with your toast for breakfast?

– Sure!

 

 

 

What about tuna?

– why not!

 

 

 

 

But more important than food, for me GUADEC is always about the people, meeting new people, people you always respected (still can not believe I meet the legendary JH) or putting a face to an irc nickname or email (albfan, never expected you to be so tall!) and of course catching up with old friends because being able to continue talking with someone like if it was yesterday when in fact it was a year, is priceless.

This GUADEC was special to me because it was the first time I did not talked about Glade, instead I showed a new library called Maxwell I made working at Endless.

What is Maxwell?

Maxwell is a proof of concept library that extends WebKitWebView and lets you embed/pack Gtk widgets in it as a regular Gtk container.

Etymology

The project started inspired by the Broadway Gdk backend which lets you run any Gtk application over HTTP using HTML5 and web sockets which was named after X Consortium’s Broadway release where one of its key features was X-Agent 96.

X Agent 96 => Agent 86 => Maxwell Smart => Maxwell

How does it work?

The introduction of the split process model in WebKit2 made embedding widgets in WebView rather difficult since part of WebKit operates in one process and the rest like WebCore and JS engine in another (UI/Web process).

Maxwell takes a similar approach to Broadway, all it needs is a way to render widgets in the DOM tree and get events from them.

To render widgets we use a CANVAS element the same size of the widget and a custom URI scheme to get the raw image data from each widget.

/* Get image data from widget */
let xhr = new XMLHttpRequest();
xhr.open('GET', 'maxwell:///widget_id', false);
xhr.responseType = 'arraybuffer';
xhr.send();

/* Render image data in canvas */
let data = new Uint8ClampedArray(xhr.response);
let image = new ImageData(data, canvas.width, canvas.height);
canvas.getContext('2d').putImageData(image, 0, 0);

On the Gtk side, each child is rendered in an offscreen window which we use as the source image data to implement the custom URI scheme handler.

Gtk UI process JavaScript/WebCore
GtkWidget:draw↴
Damage event ⟶ JS child_draw() ⟶ GET maxwell://
URI handler ⟵
↳[offscreen]⟶[GdkPixbuf]⟶GIOStream ⟶ [ImageData]↴
putImageData()

For events all we have to do is properly implement GdkWindow::pick-embedded-child and let Gtk know which child widget should get the event. In order to do so we need to keep track of the elements position relative to WebView’s viewport which can be calculated with getBoundingClientRect().

API

The API is pretty straightforward, all you have to do is name the child widget and add it using regular GtkContainer API.

/* Create a Maxwell Web View */
webview = maxwell_web_view_new ();

/* Create a widget to embed */
entry = gtk_entry_new ();

/* Set a unique name on the widget */
gtk_widget_set_name (entry, "myentry");

/* Add widget to web view container */
gtk_container_add (GTK_CONTAINER (webview), entry);

In order for MaxwellWebView to know where to place a child in the DOM tree you need to add a CANVAS element with a “GtkWidget” class and the unique ID you used as the widget’s name.

<canvas class="GtkWidget" id="myentry"></canvas>

Maxwell will also try to honor width and height style properties set on the canvas element. So for example if you want your widget to expand horizontally you can do:

<canvas class="GtkWidget" style="width: 100%;" id="myentry"></canvas>

You can get it at https://github.com/endlessm/maxwell

Sponsored by GNOME FoundationAs usual I would like to thanks the GNOME Foundation for sponsoring my trip to Spain and making all this possible.

 

 

 

Finally some extra pictures…

It’s always fun to be at GUADEC

Sponsored by GNOME FoundationAs usual I would like to thanks the GNOME foundation for sponsoring my trip to Manchester to enjoy such a wonderful conference and give me the opportunity to present to the community the work I been doing on Glade’s UI for the past few months.

You can find the slides at https://people.gnome.org/~jpu/docs/2017-GUADEC/

Obviously they are made with Glade, something which might seems odd, but is it really?

modern-ui branch

 

So besides a PDF you will find a tarball with all the source files. BTW You can use glade-previewer and PgUp and PgDown to switch pages

$ glade-previewer -f talk.glade --css talk.css --slideshow

https://www.youtube.com/watch?v=0krTtJCJ0Pg

 

And some random pictures from GUADEC…

Developer Experience Hackfest 2016

Sponsored by GNOME FoundationFirst of all I would like to thanks the GNOME Foundation for sponsoring once again my trip to Brussels for the GNOME Developer Experience Hackfest.
Besides hacking on Glade and attending FOSDEM I had a great time meeting with old friends and making new ones, not to mention the amount and variety of beers consumed!

beerBut beer was not the only thing we had!

wafles

Back on the hacking, together with Tristan we managed to fix several bugs and add the much needed support for id-less objects! This way Glade is one step closer to support every Gtk+ template file.
I will not go into much details since it was already covered by him in his blog post

Pretty workspace

Besides doing some CSS cleanups in the workspace and user survey window to improve theme compatibility I added the modernized original Glade logo to the workspace background as a tribute to Glade roots!
Glade workspace logo

I also got the chance to work on the Glade User Survey results, the final results will be posted soon on Glade’s website once I finish automating the results from the Data Base.

Glade User Survey Preliminary Results

3114 people took the time to fill the survey since 11-11-2013.
54 % of them use it for commercial purposes and 42 % for personal use.
Most users are from the US and Brazil with Germany, China and France as a close third.

USA 10.98 % Italy 3.44 %
Brazil 10.18 % Spain 3.37 %
Germany 6.29 % UK 3.11 %
China 5.59 % Canada 2.37 %
France 4.65 % Poland 2.21 %
Mexico 4.07 % Argentina 1.70 %
Russia 3.85 % Australia 1.47 %
India 3.76 % Turkey 1.44 %

How long have you been programming? (years)

< 1 5.17 % 11 – 20 15.83 %
1 – 2 30.72 % 21 – 30 6.26 %
3 – 5 18.49 % 31 – 40 2.95 %
6 – 10 18.33 % > 40 2.21 %

Not Programmer 16.66 %

Preferred programming languages do you prefer?

Python 50.32 % JavaScript 21.80 %
C 47.01 % C Sharp 15.25 %
CPP 38.59 % Vala 9.24 %
Java 24.85 % Perl 6.96 %
Other 25.49 %

When did you start using Glade? (years ago)

1 58.38 % 4 – 5 5.94 %
2 4.94 % 6 – 10 6.48 %
3 2.79 % > 11 2.98 %

Which version do you normally use?

What is available in my OS 82.72 % Master 1.47 %
Latest stable from sources 9.44 % Other 0.83 %
3.8 for Gtk+ 2 3.94 %

On what operating system?

Linux 58.83 % OSX 1.02 %
Windows 2.69 % BSD 0.96 %
Other 1.25 % Solaris 0.44 %

How often do you use it?

Every day 43.89 % Few days a week 10.82 %
A few times a year 20 % Every week 5.84 %
A few times a month 13.96 % Once a month 3.94 %

What level of Glade user would you say you are?

Beginner 78.29 %
Intermediate 16.44 %
Advanced 3.78 %

Under what kind of license(s) do you release the software you used Glade to create?

Free Software 42.19 % None 25.72 %
Open Source 34.32 % Commercial 9.5 %

In which field(s) is the software you used Glade to create generally used?

Desktop applications 42.77 % Industrial applications 8.95 %
Academic 18.68 % Embedded applications 7.35 %
Educational 13.48 % Accounting 4.56 %
Scientific 12.13 % Medical 2.92 %

In your opinion what is the biggest problem with Glade?

Lack of documentation 66.89 %
Other 11.23 %
Lack of publicity/exposure 9.79 %
Lack of official binary releases for other OS (Win32, OSX) 5.78 %
Lack of professional training 2.63 %
Lack of professional support 1.5 %

18 % of users found a bug, 6.9 % reported it and 21.96 % contributed to the project.

Cosimo and Denny wants to see YOU in Boston!!

Sponsored by GNOME FoundationI am really pleased to say that GNOME foundation is sponsoring me again to travel to Boston for my first hackfest after a very personally successful GUADEC.

Not only GUADEC was a success for me professionally but most importantly on a personal level since I got the opportunity to meet the persons behind those IRC nicks and email addresses I knew for so long.

I hope to see you again in Boston!