Saturday, October 31, 2015

html2canvas and css transform rotate

If you are using html2canvas ( to generate screenshots of your website via javascript, you maybe facing the problem that your rotated image or text is not beeing rotated on the screenshot.
The problem is, that html2canvas does not support the css transform rotate feature.

But there is a workaround you can use: rotate your text/image within a canvas. html2canvas supports the rendering of other canvas elements, so you can do your rotation not via css rule, but via JS within a canvas element.

If you old code looked like that:
<div class="vertical">Hello</div>
.vertical {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 80px;
    height: 30px;
    background: #747573;
    font-family: Arial;
    color: white;
    transform: rotate(90deg);

You can reimplement it as canvas like that:
<canvas id="vertical" width="30" height="80">Hello</canvas>
var ctx = document.getElementById('vertical').getContext('2d');

ctx.fillStyle = '#747573';
ctx.fillRect(0, 0, 30, 80);

ctx.rotate( 90*Math.PI/180 );
ctx.fillStyle = '#fff';

var fontSize = '14px';
ctx.font = fontSize+" Arial";

var txt = 'Hello';

// can be used for positioning
//var twidth = ctx.measureText(txt).width;

ctx.fillText(txt, 0, 0);

You can see a completed working example at jsfiddle:
html2canvas with rotated elements

Wednesday, April 29, 2015

Android GraphView 4.0.1 released

Finally the next version of my Android plotting library GraphView 4.0.1 is released now. You can download the exported jar, or change your dependency in your build.gradle to 4.0.1.
See the documentation on the GraphView homepage.

This release contains many bug fixes and minor changes:

To see the full changelog please visit the git log:

The GraphView-Demo project has also been updated to show the new features:

Many thanks to all users and those who report bugs at the github bug tracker.

Friday, January 2, 2015

Jackrabbit 2.9 with PostgreSQL

Because I had some issues with the configuration of Jackrabbit to use with PostgreSQL, I want to show you how to run Jackrabbit on PostgreSQL.

First I created an empty Gradle project with the application plugin, to run java from console.

Add the dependencies: You need javax.jcr, postgresql jdbc connector and jackrabbit-core.

apply plugin: 'java'
apply plugin: 'application'

mainClassName = 'com.jjoe64.jcrpsql.Main'

sourceCompatibility = 1.8
version = '1.0'

repositories {

dependencies {
    compile 'org.apache.jackrabbit:jackrabbit-core:2.9.0'
    compile 'javax.jcr:jcr:2.0'
    compile 'org.postgresql:postgresql:9.3-1102-jdbc41'
    testCompile group: 'junit', name: 'junit', version: '4.11'

Now you can use Jackrabbit with default configuration as described in the official Jackrabbit tutorial.

 public static void main(String[] args) throws RepositoryException {
  Repository repository = JcrUtils.getRepository();
  Session session = repository.login(new GuestCredentials());
  try {
   String user = session.getUserID();
   String name = repository.getDescriptor(Repository.REP_NAME_DESC);
     "Logged in as " + user + " to a " + name + " repository.");
  } finally {

When you run this code, this will automatically create the directory "jackrabbit" with the default configuration "repository.xml".
We will alter this configuration in order to connect jackrabbit with our PostgreSQL database.

Open the file jackrabbit/repository.xml and modify all of the <FileSystem> and <PersistenceManager> tags.

The first tag <FileSystem> under <Repository> and the tag <FileSystem> under the <Workspace> template, looks like that:

<FileSystem class="org.apache.jackrabbit.core.fs.local.LocalFileSystem"> <param name="path" value="${rep.home}/repository"/>

Replace it with this:
<FileSystem class="org.apache.jackrabbit.core.fs.db.DbFileSystem">
 <param name="driver" value="org.postgresql.Driver"/>
 <param name="url" value="jdbc:postgresql://localhost:5432/YOUR_DATABASE_NAME"/>
 <param name="schema" value="postgresql"/>
 <param name="user" value="YOUR_USER"/>
 <param name="password" value="YOUR_PASSWORD"/>

The next tag <FileSystem> under the <Versioning>, looks like that:
<FileSystem class="org.apache.jackrabbit.core.fs.local.LocalFileSystem">
 <param name="path" value="${rep.home}/version" />

Replace it with this:
<FileSystem class="org.apache.jackrabbit.core.fs.db.DbFileSystem">
 <param name="driver" value="org.postgresql.Driver"/>
 <param name="url" value="jdbc:postgresql://localhost:5432/YOUR_DATABASE_NAME"/>
 <param name="schema" value="postgresql"/>
 <param name="user" value="YOUR_USER"/>
 <param name="password" value="YOUR_PASSWORD"/>
 <param name="schemaObjectPrefix" value="version_"/>

The tag <PersistenceManager> under the <Workspace> template looks like that:
<PersistenceManager class="org.apache.jackrabbit.core.persistence.pool.DerbyPersistenceManager">
 <param name="url" value="jdbc:derby:${wsp.home}/db;create=true"/>
 <param name="schemaObjectPrefix" value="${}_"/>

replace it with this:
<PersistenceManager class="org.apache.jackrabbit.core.persistence.bundle.PostgreSQLPersistenceManager">
 <param name="driver" value="org.postgresql.Driver"/>
 <param name="url" value="jdbc:postgresql://localhost:5432/YOUR_DATABASE_NAME"/>
 <param name="schema" value="postgresql"/>
 <param name="user" value="YOUR_USER"/>
 <param name="password" value="YOUR_PASSWORD"/>
 <param name="schemaObjectPrefix" value="jcr_${}_"/>

The other <PersistenceManager> under <Versioning> looks like that:
<PersistenceManager class="org.apache.jackrabbit.core.persistence.pool.DerbyPersistenceManager">
 <param name="url" value="jdbc:derby:${rep.home}/version/db;create=true"/>
 <param name="schemaObjectPrefix" value="version_"/>

Replace it with this:
<PersistenceManager class="org.apache.jackrabbit.core.persistence.bundle.PostgreSQLPersistenceManager">
 <param name="driver" value="org.postgresql.Driver"/>
 <param name="url" value="jdbc:postgresql://localhost:5432/YOUR_DATABASE_NAME"/>
 <param name="schema" value="postgresql"/>
 <param name="user" value="YOUR_USER"/>
 <param name="password" value="YOUR_PASSWORD"/>
 <param name="schemaObjectPrefix" value="version_"/>

Remove the subdirectories in the jackrabbit folder, so that the repository configuration will be regenerated.

You can see the full repository.xml file at the Jackrabbit Postgresql Example at github:

Important: schema is not the schema name in your database, it's the db type! Must always be postgresql. If you use another value, you will get an exception like that:

Exception in thread "main" javax.jcr.RepositoryException: File system initialization failure.
 at org.apache.jackrabbit.core.config.RepositoryConfigurationParser$6.getFileSystem(
 at org.apache.jackrabbit.core.config.RepositoryConfig.getFileSystem(
 at org.apache.jackrabbit.core.RepositoryImpl.<init>(
 at org.apache.jackrabbit.core.RepositoryImpl.create(
 at org.apache.jackrabbit.core.TransientRepository$3.getRepository(
 at org.apache.jackrabbit.core.TransientRepository.startRepository(
 at org.apache.jackrabbit.core.TransientRepository.login(
 at org.apache.jackrabbit.commons.AbstractRepository.login(
 at com.example.integration.Main.main(
Caused by: org.apache.jackrabbit.core.fs.FileSystemException: failed to initialize file system
 at org.apache.jackrabbit.core.fs.db.DatabaseFileSystem.init(
 at org.apache.jackrabbit.core.config.RepositoryConfigurationParser$6.getFileSystem(
 ... 8 more
Caused by: java.lang.NullPointerException
 at org.apache.jackrabbit.core.fs.db.DatabaseFileSystem.init(
 ... 9 more

Thursday, September 11, 2014

c++11 shared pointer example

Shared pointers, also called smart pointers, is an elegant way to manage pointers in C++11.
It can be compared to the Optional class from the Guava library in the Java world. One important point is that the shared pointers will automatically destroy the object if there is no more (smart) pointer to it.

I show you how to use them in combination with a QImage class from the Qt library.

This example resizes an image when the setScale() method gets called. The currentScaledImage() method returns the latest scaled image.


#include <QObject>
#include <QImage>

using namespace std;

class ImageCaptureSimulator : public QObject
    explicit ImageCaptureSimulator(QObject *parent = 0);
    QImage currentScaledImage();
    void setScale(int);

    QImage* img;
    shared_ptr<QImage> scaledImg;



And the cpp file:
#include "imagecapturesimulator.h"

ImageCaptureSimulator::ImageCaptureSimulator(QObject *parent) :
    img = new QImage("/path/to/image.jpg");
    scaledImg.reset(new QImage);
    *scaledImg = *img;

QImage ImageCaptureSimulator::currentScaledImage() {
    return (*scaledImg);

void ImageCaptureSimulator::setScale(int width) {
    QImage* x = new QImage(img->scaledToWidth(width));
    scaledImg.reset(new QImage);
    *scaledImg = *x;

The important method is the shared_ptr::reset() method. This will delete the current object behind it and allocate a QImage pointer. Now you can set the pointer behind it with the call:
*scaledImg = *img;

and you can get the pointer with

Wednesday, August 13, 2014

GraphView 3.1.3 on maven central

Just published the new version of GraphView 3.1.3
Beside some bug fixes and minor changes the highlight is, that the GraphView library is now available on maven central repository.

So if you use Gradle/Android Studio you can include it with just adding that line to your build.grade file into the dependencies block:

    compile 'com.jjoe64:graphview:3.1.3'

Summary of the last changes:
  • available on maven central
  • Option to Show/Hide Graph labels
  • multiline labels support (break line)
  • Styling: show vertical and/or horizontal grid lines or no grid lines
  • no active logging
  • warning if static labels and setNum...Labels are used together
  • no arrayindexoutofbounds if no data is there
  • check the values order and throws an exception if it is wrong
Thanks to all that support GraphView with reporting issues, make pull requests and using it ;)

Wednesday, August 6, 2014

Background Task Java

Here I show you how to define scheduling background jobs (Cron Jobs) in your Java Web Application. We are using Spring with Quartz to achieve this.

Important is to use Quartz 1.8 and not Quartz 2, because Quartz 2 is not compatible with Spring 3.


First include the dependencies to your project. If you are using Maven include this lines to your pom.xml. If you are not using Maven you have to download the jar's manually and add it to your libs folder.


<!-- Spring for background job -->

Activate Spring

If your web applications doesn't already have Spring included, you have to add this to your WEB-INF/web.xml file.

Create your Job class

Now you can create a job class with a public work() method, where you can implement your job. In this example I call the class BackgroundJob.

package com.example;

public class BackgroundJob {
 public void work() {
  // ... to something
  System.out.println("working ...");

Create/Modify spring-servlet.xml

If your Application already has Spring included, the file should exist. Find it and extend it with the background job and scheduler part. If you have not already Spring included, you have to create the file in the WEB-INF folder.
<?xml version="1.0" encoding="utf-8"?>
<beans xmlns=""

  <!-- ////// Background Job -->
  <!-- The bean that does the actual work -->
  <bean id="backgroundJob" class="com.example.BackgroundJob" />
  <!-- //// A simple job factory: MethodInvokingJobDetailFactoryBean
If you just need to invoke a method from an object, use this bean factory 
See: 25.6.2 Using the MethodInvokingJobDetailFactoryBean
@ -->
  <bean id="methodBackgroundJobBean"
  p:concurrent="false" p:targetObject-ref="backgroundJob"
  p:targetMethod="work" />
  <bean id="backgroundJobTrigger"
  p:jobDetail-ref="methodBackgroundJobBean" p:startDelay="10000"
  p:cronExpression="0 59 18 * * ?" />
  <!-- ////// SCHEDULER -->
  <!-- Schedules the jobs 
Triggers need to be scheduled. Spring offers a SchedulerFactoryBean that exposes triggers to be set as properties. 
SchedulerFactoryBean schedules the actual jobs with those triggers
See: 25.6.3 Wiring up jobs using triggers and the SchedulerFactoryBean
  <bean class="org.springframework.scheduling.quartz.SchedulerFactoryBean"
    <property name="triggers">
        <ref bean="backgroundJobTrigger" />

The important points here:

  1. Job Bean
  2. Method Invoking Bean
    This bean references to the work method in your job class.
  3. Cron Trigger Bean
    This bean triggers the MethodInvokingBean in the given time interval. The cronExpression attribute defines the interval. See for more information about the syntax.
  4. Scheduler Factory Bean
    The scheduler allows the configuration of triggers.
That's it! Oh, I have two more points to show you.

Trigger the job manually

You may need a way to trigger the job manually due the web application, e.g. on the Admin panel.
org.springframework.scheduling.quartz.SchedulerFactoryBean scheduler;

// loop jobs by group
for (String groupName : scheduler.getScheduler().getJobGroupNames()) {
 // get jobkey
 for (String jobName : scheduler.getScheduler().getJobNames(groupName)) {
  scheduler.getScheduler().triggerJob(jobName,  groupName);

Check whether a job is currently running

If you want to display if the job is currently running, you can do this so:
org.springframework.scheduling.quartz.SchedulerFactoryBean scheduler;

List<?> jobs = scheduler.getScheduler().getCurrentlyExecutingJobs();
importRunning = jobs.size()>0;

Wednesday, April 2, 2014

Native looking Android App with Qt

This article is part of my Qt on Android series. In the previous article I show you how to get started developing Qt for Android: Tutorial: Qt for Android - set up SDK and Hello World

Qt Quick vs. Qt Widgets

First we need to discuss the goal of your app. If you have a complex UI with many different standard widgets (e.g. Checkbox, Radiobutton, Text-Input Fields, etc.) you may want to use Qt Widgets. There are many different Widgets and all of them are usable on Android. But unfortunately they will look not native and not only that - they could look strange thus they are designed to be used on Desktop with a simple Pixel-based screen. So you have to test it very properly.

On the other hand we have Qt Quick, which is really great for rapid prototyping and creating custom UIs. The big point is that there are no build-in standard widgets available and it's also completely theme-less. So you have to design and construct your all your UI elements.

So let's get started...

Native looking Qt Widgets on Android

The first important point is to create a correctly scaling layout.

  • Set the basis widget to vertical layout (Lay out vertically-Button in the top toolbar)
  • Place a LineEdit and a PushButton into it
  • Use Vertical Spacers to align the Textbox and Button to the middle of the screen

layout graph

The very important point is to set the Vertical Size Policy to Minimum (or Expanding if it makes sense). Do not use fixed size at all, because then the real size on the mobile screen can be very different!

LineEdit properties

Run it on your Android phone. It will look like this:

It's the Qt look and not the Android theme (called Holo). So your App will feel like a foreign body.  The trick is to use Ministro.

  • Switch to Projects mode
  • Select the Run Settings for Android
  • Open Deploy configurations Details
  • Select Use Ministro service to install Qt

Now the Qt Widgets will have a native Android look. But there is a big drawback: Your App has now a dependency to the Ministro App. The App will check on startup if Ministro is installed on your device. If it is not installed the user is forced to install it over the Android Play Store.

When all dependencies are installed, your app will look like this:

Native looking widgets based on Qt Quick

In the version of 5.2 Qt Quick has no high-level ui components. There are only the base elements to create your own ui components. I will show you a strategy how to create Android-looking custom UI widgets.
As example we will create a Holo-themed button.

In the first step, find and download the button images from the Android Style Guide:

To get nice images you have to edit the images you have caught from the Android Style Guide and remove the text on them.
Create the two important buttons states as image: normal, pressed

Create a new directory for the images in your project path: HelloAndroid/qml/HelloAndroid/images
Save the two images in the new images directory.

Create new QML file: HelloWorld/qml/HelloAndroid/HoloButton.qml

import QtQuick 2.0

Rectangle {
    width: 100
    height: 62

    state: "normal"
    property alias text: text1.text

    BorderImage {
        id: borderImage1
        x: 0
        y: 0
        width: parent.width
        height: parent.height 6
        border.left: 6
        border.right: 6
        border.bottom: 6
        source: "images/button-normal.png"

        Text {
            id: text1
            anchors.centerIn: parent
            text: qsTr("Text")
    MouseArea {
        id: mouseArea1
        x: 0
        y: 0
        width: parent.width
        height: parent.height
        onPressed: parent.state = "pressed"
        onReleased: parent.state = "normal"

    states: [
        State {
            name: "normal"
            PropertyChanges {
                target: borderImage1
                source: "images/button-normal.png"
        State {
            name: "pressed"
            PropertyChanges {
                target: borderImage1
                source: "images/button-pressed.png"


Now you can use the HoloButton in your main.qml file:

import QtQuick 2.0

Rectangle {
    id: rectangle1
    width: 360
    height: 360

    HoloButton {
        id: textInput1
        height: parent.height * 0.1
        width: parent.width * 0.8
        text: qsTr("Text Input")
        anchors.centerIn: parent


This is the result on the Android phone:

You can find this project at github: