SwirlyMyself

2011-06-18T10:48:39+00:00

Better PDF screenshots with gtk 3

Half a year ago, I experimented with gtk+ and cairo to extract a PDF screenshot out of a progam, i.e. a screenshot of the window that is not a table of colored dots as a regular PNG file would be, but rather a vector graphic that scales perfectly and has selectable text. The main use that I see is documentation: A scalable screenshots looks much better in print, and even in an online-PDF-file, having the full-text-search also find the text in the images is useful.

My experiments back then were successful in a proof-of-concept way, but they were very ugly hacks. With the new version 3 of gtk+, though, things become much easier, as only one cairo context is used, instead of each widget creating its own context to draw on.

By now, the first gtk-3 applications have reached Debian unstable, so I thought it would be time to re-do the experiment. And the result is very pleasing: The pdf screenshot program comes as a gtk module that you can load by setting an environment variable before launching a gtk-3 program. The application will run as usual, but there is an additional PDF screenshot button. If you click it, you get a “Save File” dialog (with a nice, live-updated preview of the screenshot, as an additional gimmick) that lets you save a PDF file. Its as easy as that. You can check out the resulting PDF file of gucharmap and a screencast of me creating that file, including copy’n’pasting from the resulting document.

PS: I would offer the video as well on YouTube, but it seems it does not accept Ogg Theora videos. I hope all of you can make use of the above links.

Update: By popular demand, I also created a SVG version. It even looks better because the embedded pixmaps have a higher resolution – probably gtk is confused by the resolution of the PDF cairo surface. The code is almost trivially the same. I guess I could add other formats (PNG, PS) as well. Now I just have to find out how to tame GtkFileChooser to offer this feature better.

Comments

SVG screenshots would be better since they could be included into HTML pages.
#1 foo am 2011-06-18T13:34:11+00:00
SVG should work just as well, I’ll see how good the resulting SVG files are.
#2 Joachim Breitner (Homepage) am 2011-06-18T13:44:41+00:00
Brilliant idea.

I agree that SVG is a good idea, since most* people read documentation online on html/web pages.


*) it's my assumption anyway.
#3 Frank lin Piat (Homepage) am 2011-06-20T06:57:26+00:00
Done: http://www.joachim-breitner.de/various/pdf_screenshot_3.svg

It is really amazing how exactly like the original program it looks.
#4 Joachim Breitner (Homepage) am 2011-06-20T07:39:36+00:00
cool -- will we see this as code & packaged soon, or is this rather work in progress that still needs reworking?
#5 me am 2011-06-18T13:35:30+00:00
It could be released soon. It still needs some UI to select the window in case the application has more than one.

Ideally, I’d like to take screenshots of any running program, not only those started with the right GTK module. But I don’t know if it is possible to hook into a running gtk program without resorting to too much hacks.

Or maybe the gtk module is included by default in all running applications, and activated by some signalling, e.g. via the X properties of the window.

But other than those bells and whistles, the code is ok so far.

It does not work in all cases, of course. It can only handle gtk-3 applications, and excludes those that do not use cairo for drawing (e.g. gnome-terminal’s vty widget).
#6 Joachim Breitner (Homepage) am 2011-06-18T13:47:41+00:00
Pretty nifty. You can actually do similar things in Qt: QPainter draw calls can be serialized into SVG via QSvg. The resulting SVG lacks some polish, and if the app buffers any rendering through pixmaps it will embed raster data for those elements which then can't scale, but depending on the app it can be of some use. Perhaps your work will inspire some additional improvements there.
#7 Eike Hein am 2011-06-19T17:26:43+00:00
Brillant !
It opens an interesting path for UI functional testing of GTK+ 3 apps.
#8 Ludovic Danigo am 2011-06-19T20:56:13+00:00
This could be very cool in GitHub and let others help you :) Maybe with Qt support and improvements.
#9 Ignacio Lago (Homepage) am 2011-06-20T09:05:48+00:00
Soon. But if anything, then on gitorious.org – I prefer cloud services based on Free Software :-)
#10 Joachim Breitner (Homepage) am 2011-06-20T09:50:31+00:00
What is the difference with File, Print, Print to file, PDF file?
#11 Elessar (Homepage) am 2011-06-20T15:10:57+00:00
You’ll get a PDF document of the edited file, but not of the application. Very different things.
#12 Joachim Breitner (Homepage) am 2011-06-20T15:25:34+00:00
nice!
but when i read it on golem at first i thought that text remains text...:)
would be pretty cool! no, it really would be awesome!!
i do not mean ocr stuff. i was thinking about exporting "selectable text" as text.
if you can select text as a user, it should be possible for a process as well, right?
ps: have you finished your double-diploma yet?
#13 Daniel Dreke am 2011-06-20T22:52:42+00:00
Yes, you thought right: text stays text. Check out the PDF file, you can select the text. Or check out the screencast, I am copying the unicode smiley.

As for the diploma: I am waiting for the transfer of credits from India, then I should be done with the computer science diploma.
#14 Joachim Breitner (Homepage) am 2011-06-21T06:37:09+00:00
ah ok, i just checked the svg version, where text is converted :/
not checked pdf file yet, but man, that's awesome!
ps: thumbs up for finishing :)
pps: the text-selection color in this comment box is not distinguishable from the background color, intention or does something went wrong with css? (ff4, win7)
#15 Daniel Dreke am 2011-06-21T10:02:09+00:00
Ah, I see. I did not know that with SVG, the font gets included as shapes. Slight disadvantage, but maybe that can be fixed within Cairo. Filed a bug report at https://bugs.freedesktop.org/show_bug.cgi?id=38516

It is here. Try tilting your laptop screen, if I tilt mine down, it becomes indistinguishable.
#16 Joachim Breitner (Homepage) am 2011-06-21T10:16:59+00:00
Yeah, the text-selection background color is almost the same as the page background color, and nearly identical to the text box background color.

This, on a desktop LCD with a backlight so bright that it'd fry your retina if you looked at it for too long. ;-)

(need to get some sun-glasses...)
#17 Ben am 2011-06-21T13:47:23+00:00
le Gall Erwan <erwanlegall@free.fr> tried to comment here but it did not work properly, hence I am pasting his mailed comment:

Inkscape can convert Pdf to Svg, while asking you if you want to convert text to shape (or not).
A test made with the Joachim's PDF sample worked very well: I was able to edit and translate all texts from German to French, even the smileys! ;-]
Very useful to send translation in context (i. e. showing labels that are too short to contain a translated text), both in a portable manner (all modern browsers are indeed able to show svg graphics) and an indexable one (svg are text, easy to index and edit). Gzip compressed svgz graphics are generally lighter (i. e. 1/7 in this case) than equivalent png bitmaps. Very nice for good quality printing too!

Lots of advantages. Thanks to Joachim for this brilliant idea.
#18 Joachim Breitner (Homepage) am 2011-06-26T19:23:22+00:00
"tilt your laptop screen" haha, i'm sitting in front of an eizo flexscan s2100...or in other words, pretty true colors :) i activated picture mode and i am still not able to distinguish the colors.
#19 Daniel Dreke am 2011-06-21T16:14:55+00:00
Strange. You are not saying that my annoying angle-dependent T400 display has a better color range than some high-end monitor?

Anyways, I’m not too worried about that at the moment. The layout of the webpage is not too great any more anyways.
#20 Joachim Breitner (Homepage) am 2011-06-21T20:30:10+00:00
I'm very interested in your application as I'm working on documentation for an application that we've developed. The application interface is through a supported browser i.e. Firefox. I would love to be able to get vectorised screenshots. My question: If install firefox running it on a distro that supports GTK3 (I think Fedora would be easy) will I be able to capture vectored screenshots of the application using GTK Vector?
#21 Ciaran Mulloy am 2014-07-22T16:55:30+00:00
I haven’t played around with this for a while, but theoretically, it should work.
But Firefox might have changed a lot since then, so I can’t promise anything.
#22 Joachim Breitner (Homepage) am 2014-07-22T21:42:26+00:00

Have something to say? You can post a comment by sending an e-Mail to me at <mail@joachim-breitner.de>, and I will include it here.