Posts Tagged ‘tools’

Use your Raspberry Pi as your local NodeJS Webserver

June 12th, 2016 17 comments


*** An updated version of the article is available here ***

A couple of months ago, I tinkered around with NodeJS on my local machine. After a while I got kinda addicted to the NodeJS Plattform for webservice (SOA) applications as well as Desktop Apps (Electron/NodeWebkit). Hence more complicated NodeJS experiments will start, I decided to set-up my own webserver environment for my (local) network with a Raspberry Pi 2 B. My tools of choice are:

  • Raspian Jessie Lite from 2016-05-27
  • GIT v2.1.4: Version control for source code
  • NodeJS v6.2.0: for REST APIs and Websocket applications
  • Nginx Webserver: Deliver static files, Reverse Proxy for NodeJS, and Load Balancing
  • MySQL Server and Client: for Relational Databases
  • CouchDB v1.6.1: as my NoSQL Database with strong JavaScript tools
  • PM2: NodeJS Process Manager for starting and stoping NodeJS Apps
  • Nodeadmin: Admin Tool for MySQL (like PHPmyAdmin)

Let's get started:


Download Raspian Jessie Lite from the foundation website and write the image on your class 10 SD Card. For more information please read this tutorial (in German).


My most important Twitter Messages #16

July 1st, 2013 No comments

My most important Twitter Messages #15

February 8th, 2013 No comments

Get in touch with JavaScript

August 26th, 2012 4 comments

Some time passed since this Adobe public relation dilemma about Flex and Flash happened. Honestly, it hit me very hard. Exactly at this time, I was diving deeper into the Flex 4 Component Framework and tried to adapt my new knowledge to Flex Mobile. After some failures and misunderstandings I was on a good way and I was convinced that the (new) Flex 4 Framework is a real step forward for developing User Interface. For this reason, I got a little bit mad about the whole discussion of HTML5 vs. Flex. I expected that HTML5 + CSS3 + JavaScript will come, but not so fast and powerful. However, I got a good opportunity and checked what it is all about this new hype of web technologies. As a Flex and Flash Develeoper the transition to this open standard development approach is not very difficult, except the tooling is like from another planet.  I had the feeling that finding the right tooling is as difficult as finding the appropriate life partner. There doesn't exist an one simple solution for everything like Flash Builder environment. In my case I recommend for writing Code to use the IDE Webstorm, for debugging I am using Firebug for Firefox. Whatever everyone has his own preferences, so decide for yourself what is the best.


My most important Twitter Messages #8

December 23rd, 2010 No comments

Creative Coding Tools, which is the best?

June 2nd, 2010 13 comments

Now I am almost studying Interactive Art for one year. Me, as a Flash and Flex Developer, like coding with audio-visual and interaction-based content. But if I am honest, in the last time I did not use Flash in my projects at all. I had to deal with some other powerful creative coding tools. Some of these tools provide me, as an artist, much more freedom than the Flash plattform can ever provide. For example, creating a visual output for multi-displays applications, programming on hardware (arduino), some real-time video tracking (face detection) experiments, using special Open-GL Renderer for 3D graphics and so on. But I also ran into problems, which I would never have with using Flash. Especially, when I worked together with unexperienced programmer. For this reason, I will describe some of these creative coding tools with their inherent advantages and disadvantages. After this article you should have a good overview about the available tools in creative coding.

Creative Coding Tools Overview

Creative Coding Tools Overview


Collaboration Tools for your projects

March 9th, 2010 6 comments

In the last months I worked with people from abroad or with big physical distances. The first time I thought, yeah that is not a problem. Everybody has got an internet connection and that is all what we need. In my old company the Liip AG - who I worked for - their whole project management and file management systems were almost accessible over an internet connection. For this reason I could work from everywhere I want. I thought, that would not change in my future time, because the internet has solutions for everything. Yeah, I have to say that is true. But it was not easy to find the right tools and services for exchanging ideas, files, time schedules and other stuff for free. My projects are not so big that it makes sense to implement this infrastructures by my own. I found some free or at least some cheap services which you can use for working together with friends or other small projects.

Idea Development and Sharing

Creating and developing ideas with people, who are not physical available, is not very easy. Maintaining and extending are also two not very minor problems. In the last time I found a very good workflow for me and my friends. We do a telephone conference via skype and in the same time we use the service Mindmeister (Online Mindmapping Tool) and the tool Balsamiq MockUp. At the moment our solution works good and it is totally free with some limitations. A more professional solution for idea development and exchange may be the Service ProtoShare. Unfortunately, there is no real free pricing model available, therefore I never tested this service. Read more...

Categories: Allgemein, english Tags: , ,

My most important Twitter Messages #4

January 5th, 2010 No comments

Mastering the Flex Charts

July 3rd, 2009 4 comments

Disclaimer Start:

Please be pleasant with my English. I am not a native English speaker and the English language is one of my personal weaknesses. To improve my English skills, I am planning to write some blog posts in English. So if I wrote any bullshit in these blog posts, please correct me!

Disclaimer End:

At my work at Liip I had to work quite a lot with the Flex Chart API. At some point I was very disappointed about the lack of deeper documentations or advanced flex charts examples. In my mind the whole dashboard flex chart examples are not really helpful, because the examples are not very good real-life examples. But after a few months ago I found some very nice examples for the Flex Chart Advanced stuff and now I would like to give you a short guidance, how you can handle the complex and powerful Flex Chart API.

First Step - Check your Skills

Make sure that you understand the Flex Component Life Cycle and the rendering procedure behind the Flex Framework. The whole Chart Topic is very complex in handling data and handling a good rendering procedure. So that is the reason why it is very important that you understand the basics of the Flex Framework. If you have got some problems to understand the concepts behind the Flex Framework, no problem, I highly recommend the Adobe Max presentation Diving Deep with the Flex Component Lifecycle from Deepa Subramaniam. Otherwise have a look on my SFUG Presentation “Moving from AS3 to Flex

Second Step – Set up your documentation for the Flex Chart Basic Stuff:

Yeah, the Flex Chart API is very huge. So you have to work a lot with the documentation. Fortunately, the basic Flex Chart stuff is documented very well. If you want to do some minor changes on your chart, please have a look on the Flex Data Visualization documentation (Livedocs) and on the Language Reference.  Sometimes you would not get a solution from this documentation, than have a look on the Flex Chart examples at Mostly I use the tags-Content overview and press the Buttons “CTRL+F” in Mozilla Firefox for the string search. After that I typed in “LineChart” for Line Chart examples or “Charting” for Flex charts in general. So I am quite fast and I always find the right code snippets. This procedure fits for the basic chart stuff very well.

Third Step – Things are becoming complicated

Oh no, our client wants to have some special item renderings and user interaction on the charts… At this point the Flex Chart could become a nightmare. Why?!

  • Because of the Flex Charts API Architecture is very complex. A lot of classes are related to each other and so on
  • The Adobe Livedocs documentation doesn’t really deliver any advanced flex charts examples and doesn’t explain the ideas behind the Flex Charts API Architecture
  • You don’t have access to the source code of the Flex Charts API, so it is always a black box for you
  • There are very less information (and blog post) about Advanced Flex Charts API stuff on the internet or you have to pay for this information (lectures in Flex Charts)


Medien: Ist der interaktive Film schon tot?

December 8th, 2008 7 comments

storytronstart mixed reality storyengine videotracetrack

Bekanntlich Leben Totgesagte länger und so wie es aussieht geht es dem Medium interaktiver Film ähnlich. Die Idee des interaktiven Films gibt es schon seit einigen Jahren und dank des Rückkanals, welcher das Internet bietet, konnte dieses Medium Ende der neunziger Jahre einem breiterem Publikum zur Verfügung gestellt werden. Aber der wirkliche Durchbruch blieb bis heute aus, man könnte den interaktiven Film eigentlich auch als Totgeburt bezeichnen, obwohl das doch meiner Meinung zu hart klingt. Hauptsächlich lag es bestimmt an der Lean-Back Mentalität der Zuschauer, welche noch heute eine Hauptcharakteristik im Medium Film und Fernseh ist. Durch die immer stärker werdende Macht der interaktiven Medien (Internet und Games) wird sich dies Userverhalten auf die Dauer sicherlich mehr zu Gunsten der Interaktion verändern, und vielleicht gibt genau diese neue Entwicklung in der Mediennutzung dem interaktiven Film wieder ein Aufwind. Einen ersten Anfang hat YouTube mit der Einführung des Vermerk-Features (Video Annotation Feature) gemacht, welches von einigen Interactive Media Designer schon sehr schön für interaktive Filme eingesetzt wurde. Dennoch denke ich das diese Entwicklung noch nicht ausreicht, denn dem User muss selbst überlassen werden, wie sehr er sich interaktiv am Film beteiligt, so dass kein Überforderungs und auch kein Unterforderungsgefühl beim User auftritt. Aus diesem Grund haben wir (das erste Team am Klickfilm Projekt) versucht eine Story Engine zu entwickeln, die eine logische, sinnvolle und dramaturgische korrekte Erzählstruktur simuliert. Die ersten zwei Punkte konnten wir anhand von Tagging Techniken relativ gut umsetzen, nur die dramaturgischen Simulation ist um einiges komplexer und wurde am Ende von uns aussen vorgelassen. Dennoch war ich mit den Ergebnissen sehr zufrieden, weil mir dieses Projekt gezeigt hat, dass man einen interaktiven Film mit einem dynamischen Interaktionsgrad realisieren kann.

Mittlerweile ist seitdem einige Zeit (ca. 2-3 Jahre) vergangen. Aber nun gibt es einige wirklich hilfreiche Entwicklungen, die meiner Meinung nach den interaktiven Film zum neuen Auferstehen helfen können. Dazu gehören die positive Weiterentwicklung von StoryEngines, die zum Teil von der Game Industrie erstellt werden, die andere Entwicklung kommt aus der immer weiter voranschreitenen Disziplin der Bildverarbeitung (Image Processing).

Die Story Engine kümmert sich bei dem interaktiven Film fortgehend um eine logische und dramaturgische Narration (Erzählstruktur). Sie muss auf User Interaktionen reagieren können und eine passende Antwort bzw. eine passende Fortführung der Geschichte geben. Wenn keine Interaktion von Userseite geschieht oder wenn der User eine nicht passenden Befehl gibt, darf die Narration (bzw. der Geschichtsfluss) nicht unterbrochen werden. Die StoryEngine muss einen passenden weg dazu finden die Geschichte weiter fort zuführen. Einige interessante Informationen zu solchen Story Engines kann man hier finden:

Von Seiten der Bildverarbeitung werden immer besser werdende Objekterkennungs- und Trackingverfahren für Videobilder entwickelt. Diese Algorithmen könnte man sehr gut für die Verlinkung und Visualisierung von Interaktionsmöglickeiten im Videobild nutzen. Denn in unserem Projekt mussten wir einzelne klickbare Bereiche (Hotareas) im Videobild sehr mühevoll maskieren und im nach hinein Tracken. Diese Arbeit stand in keinen sinnvollen Aufwand/Nutzen Verhältnis, jedoch machen mir diese neuen Verfahren sehr gute Hoffnung einem Video leichter interaktive Elemente hinzu zufügen.

Ich hoffe doch sehr, dass sich diese zwei sehr unterschiedlichen Disziplinen zusammefinden und noch ein paar gute Filmleute ins Boot holen, und schon könnte aus dieser Mischung ein richtig guter interaktiver Film entstehen, der dazu nebenher den so sehr herbei gewünschten Traum von der perfekten Medienkonvergenz erreicht 😉