Svg based presentations with Inkscape and Sozi

Up

Have you ever heard of deck.js, Impress or Reveal ? These are tools that allows one to create nice web-based presentations with plenty of animations. As strange as it may sound, I first looked at these apps because I wanted some smooth drop shadows for the pictures in my own LibreOffice presentations. CSS can be used to get that effect. I tried all the above mentioned libraries and tools and was disappointed by the fact that adding images and graphics seems to be an after-thought. These tools are excellent for text-based presentations but placing vector graphics, like svg, in a particular position and making graphically-rich presentations is not their main domain of use. Users circumvented these limitations by writing extensions, see examples for deck.js here.

Wandering on the web led me to a tool that allows graphic rich presentations to be made with the best open source tool for vector graphics creation: Inkscape. One of the integrated plug-ins, called JessyInk, allows one to use a succesion of layers to create an svg file that, when opened with a web browser, are shown one after the other. JessyInk is an impressive tool, allowing one to annotate ‘live’ the presentation or to show an overview by clever keyboard shortcuts, but I did not like the fact that the original svg had to superpose all the layers. Additionally, the svg file is modified by JessyInk with some elements not being rendered at all in the obtained presentation. Not good.

In search for an alternative, I found Sozi, an application that takes a different approach from JessyInk. It allows something that I did not thought possible – take a poster, done with Inkscape or other svg creator, and make a presentation based on succesive views of different parts of the large image. Everything is integrated in a html/json pair of files that integrate the original svg with JavaScript magic. While the Sozi interface is in need of some ergonomy improvements, the tool is robust enough to allow me to create a 60 slides presentations in an evening, from a large svg file that I already had in Inkscape. A few of the slides  can be viewed on my bitbucket site (although some images lack from the presentation). Scrolling allows zooming in and out of the slides and clicking on the slide number opens a nice menu with all the slide titles, for fast navigation. The first slide, as a screenshot of my current Ubuntu desktop (clicking on the image goes to the presentation page):

Sozi presentation, first slide

I would very likely use Sozi and Inkscape for presentations in the future. There are a few things to consider though:

1. Images inserted in the SVG file are better handled through relative links and should be kept in a directory that is close to the svg file itself. Moving the presentation around becomes possible if the html, json and img folder are moved together.
2. Sozi does not allow for the moment to easily have several versions of the presentation based on the same svg but this feature might come in the future. It will be also very useful to allow the existence of svgs where text was converted to paths, so that one does not need to carry some exotic fonts around just to be able to show a presentation. If you want to duplicate a presentation, you have to duplicate the html, json and original svg and change their name so that they match each other.
3. One has to be familiar with Inkscape and its quirks.
4. Web browsers are not exactly familiar to the idea of presentations, the mouse pointer, for example, insists on showing the title of the web page.
5. Do not use layers in the original Inkscape presentation. Somehow, Sozi becomes confused and might transform the layers differently, giving a very strange result. Better to use blocked elements, if you want to make a pattern of rectangular regions as template for the graphical elements of the presentation.
6. Always do a backup of your presentation in PDF – sozi-to-pdf does it gracefully. It is a module that has to be installed separately. It generates a rather large pdf file because it is composed of high quality graphic png. While it is large, it will not depend on locally installed fonts or any additional resources to be displayed as you expect it to be.

Update (April 2017). For the type of presentation I usually do, better distribute the images or drawings in separate svg files. This helps a lot in finding a particular image or result, more difficult with very large SVG files, as those used for a Sozi presentation.

Customize Ubuntu 14.04 on a HP Zbook

A few notes about things I did to be able to work with Linux on a HP Zbook 14 G2. Dual boot was problematic because gparted had difficulties with the M.2 SATA SSD. In the end, Linux lives happily on the HDD and a NTFS partition ensures bidirectional communication with Windows.

Once Ubuntu LTS 14.04 was installed, several changes were needed to adapt the display resolution (920×1080 pixels), adjust battery usage, add some useful utilities and hide or show disk partitions at will:

1. Make fonts larger on high dpi screen for the grub menu (from http://b.wardje.eu/2014/08/increase-font-in-grub-for-high-dpi.html):
sudo grub-mkfont --output=/boot/grub/fonts/DejaVuSansMono24.pf2 --size=24 /usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf

Add the following lines to the grub configuration file (can be edited with “sudo gedit /etc/default/grub”):
## More readable font on high dpi screen, generated with
## sudo grub-mkfont --output=/boot/grub/fonts/DejaVuSansMono24.pf2 \
## --size=24 /usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf
GRUB_FONT=/boot/grub/fonts/DejaVuSansMono24.pf2

Update grub to take into account the new configuration:
sudo update-grub


2. Install LibreOffice 5:
sudo add-apt-repository ppa:libreoffice/libreoffice-5-0
sudo apt-get update
sudo apt-get dist-upgrade

3. Install a very capable FTP client (lftp) and an alternative file manager (Double Commander):
sudo apt-get install lftp
sudo add-apt-repository ppa:alexx2000/doublecmd
sudo apt-get update
sudo apt-get dist-upgrade
sudo apt-get install doublecmd-gtk

4. Install exFAT support
sudo apt-get install exfat-fuse exfat-utils

5. Command line information on battery usage:

upower -i /org/freedesktop/UPower/devices/battery_BAT0

Get information on battery usage (11.5 W average):
sudo apt-get install powerstat
powerstat -d 1

Test if hibernate works; no it does not work well, forget about it.
sudo pm-hibernate

6. Optimize energy consumption with tlp:

Install tlp from ppa (will be included in the main repository for further versions of ubuntu)
sudo apt-add-repository ppa:linrunner/tlp
sudo apt-get update
sudo apt-get install tlp

Configure TLP:
cd /etc/default/
cp tlp ~/tlpconfig.backup
sudo gedit tlp
# modify SATA option, from http://refugeeks.com/use-tlp-to-optimize-the-power-consumption-in-ubuntu/
# modify SATA_LINKPWR_ON_BAT=min_power to max_performance

7. Hide windows partitions from XFCE and Unity and automount partitions:
cd /etc/udev/rules.d/
sudo gedit 99-hide-disks.rules
# use the right names for the disks or their identifiers
#KERNEL=="sda1", ENV{UDISKS_IGNORE}="1"
#KERNEL=="sdb2", ENV{UDISKS_IGNORE}="1"
# at reboot the sda1 and sdb2 partitions will not be visible any more
# inactivate fast boot option in Windows, otherwise shared disks are unmountable in Linux

# Automatically mount removable partitions
# https://help.ubuntu.com/community/AutomaticallyMountPartitions
# First, get the identifier of the partition with "mount" -> /dev/sda3
# Get the uiid:
ls -al /dev/disk/by-uuid/
# lrwxrwxrwx 1 root root 10 mars 2 08:31 someuiid...
# Add to startup items:
/usr/bin/udisksctl mount --block-device /dev/disk/by-uuid/someuiid

8. Packages required to install R on Ubuntu:
# Various packages required for installation of R parts, if packages complain about missing libraries:
sudo apt-get install libxml2-dev
sudo apt-get install libssl-dev
sudo apt-get install libcurl4-gnutls-dev

9. Display customization and other tricks:

Change dpi settings in the “Displays” preference > scale 1.38
Install Unsettings to change Unity settings
sudo add-apt-repository ppa:diesch/testing
sudo apt-get update
sudo apt-get install unsettings

Change the brown color of selected item to something else (blue)
sudo apt-get install gtk-theme-config

Make text and other things larger on high dpi for Firefox
Write: *about:config* in the address bar
Then change the layout.css.devPixelsPerPx value to 1.4 (user set string)
The same can be done for Thunderbird (Preferences > Advanced > Edit config)