QmlWeb is not dead

It’s been 363 days now, since I last blogged about QmlWeb here. I hope to find more time to develop and blog about it, but for now just a quick note to let you all know, QmlWeb is still alive. Development is moving slower than I would wish, but it is moving.

QmlWeb based MineHunter

A minesweeper game running in the webbrowser using QmlWeb.

Maybe you can already guess, why I am writing this. Right. I plan to go to Randa in August, in order to continue feature development and for looking into some possible real-world applications of QmlWeb. And we are raising money for that. For me as a student if I can go there actually does depend on whether we gain enough money or not.

Tomorrow (2014-07-09) is the last day of the fundraising campaign, so if you are interested in supporting my work on QmlWeb, please click here and donate whatever you can and will, in order to make the Randa development sprint possible – every euro or dollar (or money of any other currency) does make a difference.

Thank you :)

About QmlWeb:

QML consists out of an easy declarative syntax plus JavaScript. QtQuick uses a scenegraph to render the UI. A webbrowser implements JavaScript and a scenegraph to render UIs. QmlWeb is the bridge between those worlds: It’s a library, purely written in JavaScript itself, that implements a full QML engine and QtQuick libraries and uses the browser’s technologies to execute JavaScript and render QtQuick-UIs into the webbrowser.

With property bindings and anchor layouting, it already brings most of the convinience of QML to the web development world. Nevertheless, it still has a long way to go, until it’s ready for production. With your help (may it be financial or by contributing) we are able to go that long way.

akreuzkamp

WebApps written in QML: Not far from Reality anymore

Have you ever tried to vertically center an element using CSS or wanted an element to just use the whole remaining space or similar things? Did you ever struggle with complex interfaces when writing a modern website? Did you ever use QML for a desktop-app and were in wonder how amazingly it just works? Then there probably was also the point where you thought ”why can’t I just use QML for my webapp?”. So have I.

And in fact it is nearer to reality than you would think: Say hello to QmlWeb.

QmlWeb is a JavaScript library that is able to parse QML-code and create a website out of it using normal HTML/DOM elements and absolute positions within CSS, translating the QML properties into CSS properties. Currently it’s also able to paint into a canvas but as canvas is far less powerful, that’s probably going to be dropped. So using the DOM-backend there is no need for HTML5. The webbrowser needs to support ECMAScript5 for now, though.
QmlWeb is a small project by Lauri Paimen that he’s already developing for a few years now. In the last months, I entered into the development refactoring parts of the library, so by now Lauri yielded the maintainance to me. The biggest part of the credits, though, are due to him.

As of today, I’m proud to announce that QmlWeb will be from now on a KDE-Project.

QmlWeb-Demopage
(A small prototype of a website for QmlWeb – of course written using QML ;) )

QmlWeb of course doesn’t yet support everything Qt’s implementation of QML does, but it already supports a quite usable subset of it. It supports nearly all of the most basic QML syntax. The element types it supports, are

  • Item
  • Rectangle
  • Text
  • Image
  • BorderImage
  • MouseArea
  • Repeater
  • ListModel
  • NumberAnimation
  • SequentialAnimation

Moreover it has support for HTML input elements (Button, TextInput, TextArea are currently supported, more to come).
Positioning using anchors works like a charm, Components work too, so does the signal-slot system. Basic animations work nicely (Animations in QML are most probably far more powerful, but what works in QmlWeb is already quite nice :) ). Keyboard-control is missing as well as States. Layouts (Row, Column, etc.) are currently under development.

Of course there are many more little features missing, but the library is already quite usable. In fact I’m already using it for one webapp, I’m currently writing. There are some places where I’m still using direct html/css, but that’s another nice feature of QmlWeb. You can easily integrate it with normal html/css: QmlWeb exposes the element-id to css-classes, so you can easily include a stylesheet in your surrounding html-file and set all css-properties, you can’t control (yet) with QML, to your QML-element.

That’s soooo awesome! How can I use it?

Just grab the latest code from git://anongit.kde.org/qmlweb, put the qmlweb folder in the same directory like your webpage and put the following code into your index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>QmlWeb Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../qmlweb/src/parser.js"></script>
        <script type="text/javascript" src="../qmlweb/src/process.js"></script>
        <script type="text/javascript" src="../qmlweb/src/import.js"></script>
        <script type="text/javascript" src="../qmlweb/src/qtcore.js"></script>
    </head>
    <body style="margin: 0;">
        <script type="text/javascript">
            var qmlEngine = new QMLEngine();
            qmlEngine.loadFile("main.qml");
            qmlEngine.start();
        </script>
    </body>
</html>

Then add a file main.qml containing your QML-coded website. (Tip: use “anchors.fill: parent” in your root element to use the whole size of the inner window)

But it can’t do XYZ!!

Well, QmlWeb is not finished, yet. And I’m looking for people willing to help. :)
Just grab the code, fix it and join our mailinglist <this project’s name>@kde.org, join us on #kde-qmlweb on Freenode/irc or get in touch with me, directly: <my nick>@web.de (btw. the project’s name is qmlweb and my nick is akreuzkamp ;) )

Btw.:
I'm going to Akademy 2013! :)

Edit: I added information about how it renders QML to websites (QmlWeb is using normal HTML/DOM elements and absolute positions within CSS, translating the QML properties into CSS properties to paint elements).

Edit2: I corrected the code example, added a tip how to use the full window size and added information about the mailinglist and irc-channel.

Rethinking Virtual Desktops

First of all: This is my first blog-post on planetkde. So I’ll introduce myself:
My name is Anton Kreuzkamp, I am 15 years old and am from Germany (near Frankfurt). I am using KDE for about 3 years now and am developer for about 1½ years. I’m kind of a migrant worker in KDE, I do some feature here, some patch there, but no fix project (so far I’ve contributed to Plasma, KWin and Rekonq but I have plans for Calligra, Kontact and other projects as well).

So let’s come to the real topic of this post.
There were times when people used virtual desktops (VD) to seperate their different activities on the computer. Now KDE has Activities ‒ a much more powerful way to seperate different tasks than VD. So why do we still need virtual desktops? Why do we have two different concepts doing the same? The answer is easy and has been given a dozen times before: Because they are NOT the same, but are made for different kind of tasks. Activities are about… well, activities, a logical separation of different tasks. VD are about extending the available space of  the desktop, where the windows are to many to fit on the screen nicely.

I have never used VD. My windows use to be more than half of my screen in size, so I can’t have multiple windows shown completely on the screen, and even VD don’t help there. But wouldn’t it be nice if you could combine the free space of two virtual desktops? Then a window would fit in that space. But of course you can’t have one half of a window on one VD and the other half on the another VD and still use it. So I implemented this idea in form of a kwin effect:
The Workspace Strap
The Workspace Strap Effect
It allows you to organize your windows on a linear strap, either horizontally or vertically, that supports stepless scrolling. When you press Alt+Meta (configurable) you get a preview of the strap (see above) and can easily scroll by dragging.

But as a picture says more than 1000 words and a screencast is made of a thousand pictures, here’s one for explanation:

http://www.youtube.com/watch?v=lm2z-V7zhus

This implementation is just a kind of experiment to see whether it’s a satisfying experience, to integrate it upstream, it will probably need to be rewritten deeper in Kwin (like virtual desktops or window tiling), but if it’s coming over well I will try to find the time for it.

The code can be found at kde-apps.org or in my personal scratch-repo: git://anongit.kde.org/scratch/akreuzkamp/workspacestrap.git

I appreciate feedback of all kinds.
Have fun.

PS: I tried half a dozen screencast applications and none of it worked. I finally managed to make the screencast using an application not made for taking screencasts but to display videos: VLC media player. Real time encoding, full HD-quality with 20fps, no performance regressions (on my machine), without crashes. Thanks a lot to the VLC team.

Ubuntu (Gnome) oder OpenSuse (KDE)?

Dieser Post ist als Entscheidungshilfe für Leute gedacht, die auf Linux umsteigen wollen, aber nicht wissen welche Distribution. Ich werde im Folgenden die Distributionen Ubuntu und OpenSuse (mit KDE) auf Vor- und Nachteile für einen durchschnittlichen, von Windows kommenden Privatanwender vergleichen.

Erstmal vorneweg: Ich selbst benutze OpenSuse, Ubuntu habe ich nur angetestet, es ist also wahrscheinlich, dass der Vergleich nicht 100% objektiv ist. Des Weiteren sind viele Punkte nur Tendenzen und die tatsächlichen Unterschiede möglicherweise weit geringer als hier dargestellt. Auch hat dieser Artikel nicht den Anspruch auf Vollständigkeit, es geht um eine grobe Entscheidungshilfe.

Zu erst aber eine kleine Einführung in den Aufbau von Linux:

Wie ist ein Betriebssystem aufgebaut?
Ein Betriebssystem ist nicht ein einzelnes Programm, sondern besteht aus vielen Einzelkomponenten. Die wichtigste Komponente ist der Kernel (wir wollen außer Acht lassen, dass auch der Kernel wiederum aus mehreren Komponenten besteht). Der Kernel (engl. für Kern) kümmert sich darum, die Hardware (Grafikkarte, Festplatte, USB-Stick,…) anzusprechen, sorgt dafür, dass sich mehrere Programme gleichzeitig ausführen lassen (Prozessverwaltung) und Vieles mehr. Der Kernel stellt den Programmen eine Schnittstelle zur Verfügung über die sie auf die Hardware (wie z.B. Dateien auf der Festplatte) zugreifen können.
Doch damit können Sie Ihr System noch lange nicht verwenden. Sie brauchen noch Programme, die Ihnen ermöglichen auf Ihre Dateien zuzugreifen, oder die den Bildschirmhintergrund oder die Fensterleiste (bei Windows am unteren Bildschirmrand) darstellen, Sie brauchen überhaupt erstmal ein Programm das Ihnen erlaubt den Computer z.B. mit der Maus zu bedienen. Für diese Zwecke sind eine Vielzahl einzelner Programme zuständig, deren die meisten Benutzer sich gar nicht bewusst sind. Ein großer Teil dieser Programme werden unter dem Namen Desktopumgebung zusammengefasst. (Die Desktopumgebung beinhaltet beinahe alles was Sie vom Betriebssystem sehen)

Was ist Linux?
Linux ist ein Kernel, also nur ein kleiner Teil, quasi das Fundament, des Betriebsystems. Alle anderen Komponenten und Programme werden von getrennten Projekten entwickelt. Daher gibt es viele Komponenten auch mehrfach, von verschiedenen Projekten. Zum Beispiel gibt es verschiedene Desktopumgebungen für Linux, die auf den ersten Blick wie komplett verschiedene Betriebssysteme aussehen. Die zwei bekanntesten sind Gnome und KDE.
Wollten Sie also ein komplettes linuxbasiertes System selbst installieren, müssten Sie Linux und alle weiteren Komponenten einzeln installieren und aufeinander abstimmen. Da die meisten dafür weder die Zeit, noch das Wissen haben, gibt es Projekte, die dies für Sie erledigen und Ihnen ein fertiges System zur Installation bereitstellen. Das sind die Distributionen. Verschiedene Distributionen können natürlich unterschiedliche Komponenten und Einstellungen verwenden, so dass alle Distributionen ein wenig, bis sehr unterschiedlich sind.

Ubuntu (Gnome)

Ubuntu ist eine Distribution, deren Ziel es ist, möglichst einfach zu bedienen zu sein. Sie setzt auf Gnome als Desktopumgebung.Der Ubuntu Desktop

Vorteile:

  • Einfaches Bedienungkonzept

Nachteile:

  • Gewöhnungsbedürftiger, da Windows unähnlicher
  • Weniger Einstellungsmöglichkeiten
  • Programme haben oft weniger Funktionen, da auf seltener benutzte Funktionalitäten verzichtet wird

OpenSuse (KDE)

OpenSuse ist eine Distribution, deren Ziel es ist, für durchschnittliche, aber auch für seltenere Anwendungsfälle eine möglichst einfache Bedienung zu ermöglichen, die gleichzeitig jedoch möglichst reich an Funktionalitäten und Automatismen ist.
OpenSuse ist mit 5 verschiedenen Desktopumgebungen verfügbar, betrachtet wird hier die KDE Variante (die meiner Meinung nach am besten in das openSuse Konzept passt).Der OpenSuse Desktop

Vorteile:

  • Windows ähnlicher, daher schnellere Umgewöhnung
  • Weitreichende Einstellungsmöglichkeiten geben die Möglichkeit, das System auf die eigenen Arbeitsabläufe zu optimieren, wodurch sie effizienter gestaltet werden können
  • Mächtigere (funktionsreichere) Programme, dadurch bleibt auch bei komplexeren Aufgaben die Benutzerfreundlichkeit gleich

Nachteile:

  • Geringere Anfängerfreundlichkeit
  • Schwierigere, da größere, Einstellungsdialoge

Die Listen sind bisher recht kurz, ich werde versuchen sie noch zu erweitern, sobald mir weitere Vor- und Nachteile einfallen.

Noch zu erwähnen ist, dass alle Programme, die unter Ubuntu standardmäßig installiert sind, sich auch unter OpenSuse installieren lassen, und umgekehrt, Sie können also ohne Probleme, die eine Distribution verwenden, ein oder mehrere Programme jedoch ersetzen.

Ich hoffe, der kurze Überblick hilft bei der Entscheidung. Viel Erfolg und Spaß mit Linux!

WordPress 3.1 Multisite on OpenSuse 11.4

Hello World :)

Finally I managed to get the multisite setup of wordpress working, so in this first blogpost I will simply list some problems I had together with the solution.
I used the WordPress package from the Suse-repositories.
The problems might be quite self-evident to an experienced sysadmin, but if you’re like me self-taught and just learning by doing, they can be a problem.

  1. Where is the wp-config.php?
    The wp-config.php is not where all the other wordpress-stuff lies, but where configs belong in: in /etc/wordpress/wp-config.php
  2. I added a new site to the network, but when I open it, I get 404!
    The problem here is that the .htaccess doesn’t get observed.
    The solution: edit the /etc/apache2/conf.d/wordpress.conf and set AllowOverwrite to All.
  3. 404 is gone! In Favor of 403…
    This one is because mod_rewrite is not allowed because FollowSymLinks is off. The solution: Edit the /etc/apache2/conf.d/wordpress.conf and add the line Options SymLinksIfOwnerMatch between the Directory-tags.

That’s it for the first blog. Hopefully it helps people having the same problems.

Cheers