Skip to content

Category: english

Compiling Inkscape

Inkscape running

Inkscape is a Open Source vector graphics editor that works with SVG (Scalable Vector Graphics) format, Inkscape works with transparency, gradients, node editing, pattern fills, PNG export, and more. It also runs on Linux, Windows and OSX, those three are officially supported, but also runs in a broad list of Operational Systems. Is a software that I work daily and frequently is featured here in my blog.

You can download Inkscape or directly install it via some package system like Apt:

sudo apt-get install inskcape

But sometimes we need some special feature that is not available yet in the repositories or we want gain speed by having special binaries for our platforms or we want to help developing a new feature. In those cases we need to compile the software by ourself.

Those tips are valid for Ubuntu 8.04 but some part of them can be applied in others distributions. The Inkscape compiled here is the version 0.46+devel so newest versions can have compiling procedures slightly different.

Getting sources via APT.The easiest way to compile Inkscape on Ubuntu is

sudo su
apt-get build-dep inkscape
apt-get source inkscape
cd inkscape
./autogen.sh
./configure
make
make install

This will get a version of inkscape, compile it and install. If the first step doesn’t work well, you can try install all necessary packages by yourself using:

sudo apt-get install autotools-dev fakeroot dh-make build-essential autoconf automake intltool libglib2.0-dev libpng12-dev libgc-dev libfreetype6-dev liblcms1-dev libgtkmm-2.4-dev libxslt1-dev libboost-dev libpopt-dev libgsl0ldbl libgsl0-dev libgsl0-dbg libgnome-vfsmm-2.6-dev libssl-dev libmagick++9-dev libwpg-dev

Getting sources via SVN. The recipe I showed above will compile a stable version of Inkscape but not the last version of Inkscape. For that we need to grab the source directly from the Subversion repositories and so compile it.

At your home folder:

sudo apt-get install subversion
svn checkout https://inkscape.svn.sourceforge.net/svnroot/inkscape/inkscape/trunk inkscape

A alternative way to subversion is getting sources from here. Those are tarballs built every hour after someone change something in the development repositories. Download a tarball, and decompress it on your home folder.

Install all tools we need to compile Inkscape, this should fits:

sudo apt-get install autotools-dev fakeroot dh-make build-essential autoconf automake intltool libglib2.0-dev libpng12-dev libgc-dev libfreetype6-dev liblcms1-dev libgtkmm-2.4-dev libxslt1-dev libboost-dev libpopt-dev libgsl0ldbl libgsl0-dev libgsl0-dbg libgnome-vfsmm-2.6-dev libssl-dev libmagick++9-dev libwpg-dev

Enter in the directory with the Inkscape source and do:

./autogen.sh
mkdir build
cd build
../configure
make
sudo make install

In both cases, grabbing sources via svn or via apt, or can set the place where the software will be installed so it not cause conflicts with you already installed version of Inkscape. You can do that replacing the ./configure step with something like:

./configure –prefix=/home/yourname/inkscape

If you had some trouble in one of those steps, consider reading some of those other tutorials:

ps: thanks guys from the inkscape-devel@lists.sourceforge.net specially heathenx.

JavaFX, creating a sphere with shadow

This is a short tutorial about some JavaFX elements like ellipses, circles, effects and gradients.

In the first code we are creating a frame with a ellipse with center in (120,140), 60 pixels of horizontal radius, 20 pixels of vertical radius and color black. We have also a circle with center in (100,100), 50 pixels of radius and color red. The idea is make this circle appears like a sphere and make the ellipse look like a shadow.

import javafx.application.*;
import javafx.scene.paint.*;
import javafx.scene.geometry.*;
 
Frame {
    title: "JavaFX Sphere", width: 300, height: 300, visible: true
    stage: Stage {
        content: [
            Ellipse {
                 centerX: 120, centerY: 140, radiusX: 60, radiusY: 20
                 fill: Color.BLACK
            },
            Circle { centerX: 100, centerY: 100, radius: 50, fill: Color.RED }
        ]
    }
}

Now we will just add two thing, a effect and a radial gradient.

First we’ll just add javafx.scene.effect.* to our import list and just call the gaussian blur effect in our ellipse with

effect: GaussianBlur{ radius: 20 }

This creates a gaussian blur of radius 20. The first ellipse was like

and now with the effect becomes

Now we create a radial gradient for the circle appears like a sphere. We do that using the RadialGradient class at

RadialGradient {
   centerX: 75, centerY: 75, radius: 50, proportional: false
   stops: [
      Stop {offset: 0.0 color: Color.WHITE},
      Stop {offset: 0.3 color: Color.RED},
      Stop {offset: 1.0 color: Color.DARKRED},
   ]
}

First lets look at the gradient. It starts with a white color, going to red during the first 30% of the way. The remaining of the way is the color red going to a dark red. It creates a gradient like this one:

But it is a radial gradient, with center in (75,75) and radius 50. So this radial gradient looks like this:

As we place this radial gradient in our circle, it was like this:

And now is like this:

Now the complete code. I guess it’s simple and also concise.

import javafx.application.*;
import javafx.scene.paint.*;
import javafx.scene.effect.*;
import javafx.scene.geometry.*;
 
Frame {
    title: "JavaFX Sphere", width: 300, height: 300, visible: true
    stage: Stage {
        content: [
            Ellipse {
                centerX: 120, centerY: 140, radiusX: 60, radiusY: 20
                fill: Color.BLACK
                effect: GaussianBlur{ radius: 20 }
            },
            Circle {
                centerX: 100, centerY: 100, radius: 50
                fill: RadialGradient {
                    centerX: 75, centerY: 75, radius: 50, proportional: false
                    stops: [
                        Stop {offset: 0.0 color: Color.WHITE},
                        Stop {offset: 0.3 color: Color.RED},
                        Stop {offset: 1.0 color: Color.DARKRED},
                    ]
                }
            }
        ]
    }
}

Here is the final screenshot:

JavaFX, handling events with overlapping elements

Here is a problem I faced those days while programming with JavaFX.
When you perform a click in a JavaFX area, mouse events are called to all nodes through that position. You can see this behavior in this video.

Example 1.

Here is the code.

import javafx.application.*;
import javafx.scene.geometry.*;
import javafx.scene.geometry.Rectangle;
import javafx.scene.paint.Color;
import javafx.input.MouseEvent;
 
Frame {
    width: 200
    height: 200
    visible: true
    stage: Stage {
        content: [
            Rectangle {
                var color1 = Color.BLUE;
                x: 10, y: 10, width: 140, height: 90, fill: bind color1
                onMouseClicked: function( e: MouseEvent ):Void {
                    if (color1==Color.BLUE){
                        color1 = Color.GREEN;
                    } else {
                        color1 = Color.BLUE
                    }
                }
            },
            Circle {
                var color2 = Color.RED
                centerX: 100, centerY: 100, radius: 40, fill: bind color2
                onMouseClicked: function( e: MouseEvent ):Void {
                    if (color2==Color.YELLOW){
                        color2 = Color.RED;
                    } else {
                        color2 = Color.YELLOW
                    }
                }
            }
        ]
    }
}

This is the default behavior. All node are called with a mouse event. Is a expected and robust behavior but sometimes we just don’t want that. We want events called to just one node or a set of nodes.

Example 2.

Is exactly the same code but with blocksMouse: true in the circle node. When blocksMouse is true the mouse event will not be called to others node behind it.

package overlapping;
 
import javafx.application.*;
import javafx.scene.geometry.*;
import javafx.scene.geometry.Rectangle;
import javafx.scene.paint.Color;
import javafx.input.MouseEvent;
 
Frame {
    width: 200
    height: 200
    visible: true
    stage: Stage {
        content: [
            Rectangle {
                var color1 = Color.BLUE;
                x: 10, y: 10, width: 140, height: 90, fill: bind color1
                onMouseClicked: function( e: MouseEvent ):Void {
                    if (color1==Color.BLUE){
                        color1 = Color.GREEN;
                    } else {
                        color1 = Color.BLUE
                    }
                }
            },
            Circle {
                var color2 = Color.RED
                centerX: 100, centerY: 100, radius: 40, fill: bind color2
                blocksMouse: true
                onMouseClicked: function( e: MouseEvent ):Void {
                    if (color2==Color.YELLOW){
                        color2 = Color.RED;
                    } else {
                        color2 = Color.YELLOW
                    }
                }
            }
        ]
    }
}

Thanks guys on the OpenJDK user mail list and at OpenJFX Forum, specially this thread.

Script to Installing JavaFX Compiler

Right in this moment you can choose between three options to develop JavaFX:

I did this little script to download the last version of JavaFX continuos build and install it for you.

#!/bin/sh
envfile=$HOME/.bash_profile
 
#download and unpatch the last build of JavaFx
mkdir jfx
cd jfx
wget http://openjfx.java.sun.com/hudson/job/openjfx-compiler/lastBuild/artifact/openjfx-compiler/dist//*zip*/dist.zip
unzip dist.zip
rm dist.zip
 
#set files at bin folder as executable
chmod +x dist/bin/*
 
#add those executables to the path
echo "PATH=\$PATH:`pwd`/dist/bin" >> $envfile

Save this script as install_jfx.sh and execute it. Probably you want to execute it at you home directory. If you want to install JavaFX to root change envfile for /root/.bash_profile, if you want to install to all users change for /etc/profile. I tested this script successfully on my Ubuntu 8.04.

After that open a new terminal and try to see if javafx, javafxc and javafxdoc are available. You can test your enviroment with this simple program.

import javafx.ui.*;
import java.lang.*;
 
Frame {
  visible: true
  content: FlowPanel {
  content: Button {
      var n = 0
      text: bind Integer.toString(n)
      action: function() {
        n++;
      }
    }
  }
}

Save it as Counter.fx, compile with javafxc Counter.fx and so execute it with javafx Counter.fx.

To know more, take a look into the preliminary JavaFX API or in the article Using JavaFX GUI Toolkit.