Permalink

There is an article about Ushahidi on the ACM-Website. Ushahidi is a remarkable system that was originally used for election monitoring in Kenya.

The system is used to collect, evaluate, visualize and map reports or eyewitness accounts. The central element is a web server. There are mobile apps for different devices, but information can also be gathered via SMS. The system is now being used in disaster relief, as well as “community” projects (in terms of regional communities). More information is available in the Ushahidi wiki and in this presentation by Heather Leson.

Permalink

Rotating Billboard with CSS-Animations

Billboard with changing picturesIn 1998, I have presented “Meier’s billboard”. It is a virtual display panel with changing images. I have developed it as Java-applet. In 2009, I have rewritten the billboard with JavaScript and jQuery.

Today we can define simple animations in CSS3 style definitions. Thus, we can build a rotating advertising Billboard without JavaScript.

Basic Structure:

We set up the basic framework like in the solution with JavaScript:

Funktionsweise: Eine Liste von Bildern wird unter einem Fenster hindurchgeschoben.

There is a frame and a list of images. The meaning of frame here is that of a picture-frame, not that of a HTML-frame.

We manipulate the “top” coordinate of the list to create the motion. The clipping property is responsible to let us see only the inside of the frame.

Animation

The definition of a css-animation consists of two parts.

The first part is the definition of “key frames”, so the key scenes. In the simplest case, we need only two key frames: an opening scene and a final scene. If we want to move an image 200 points upwards, we use a definition like this:

@keyframes slideup {  
  from {    top: 0px;  }  
  to {    top: -200px;  }
}

On the next we must determine an element on which the newly-defined animation is applied. In addition we can determine parameters for this animation here: when it starts, and how often it is repeated. The ‘animation-name’ field name must match the @keyframes-element.

#billboard ul li{   
  animation-delay: 1s;   
  animation-duration: 3s;   
  animation-iteration-count: infinite;   
  animation-name: slideup;  
... 
}

This works good so far:

Demo

Multiple images

We want to show more than two images in our billboard. But CSS is no imperative programming language, so we can not put together the animations in a controlled way like with JavaScript.

Instead can we do the opposite, and divide the large animation with small intermediate steps. The points of time of the intermediate steps are specified as a percentage of the total animation:

@keyframes slideup {   
  from { top: 0px; }   
  16% { top: -200px; }  
  33% { top: -200px; }
  50% { top: -400px; }   
  67% { top: -400px; }  
  84% { top: -600px; }   
  to { top: -600px; } 
}

The billboard is almost ready for use: we need to increase the animation duration compared with our original solution, as we now specify the duration of a passage of all images.

To achieve a clean transition between last and first image, we reuse the trick to repeat the first image after the last image.

Demo

You find the source code in my repository on Github.

Permalink

Nokia Asha from a developers point of view

Bild von Nokia Asha 303 und 311

I was among the winners of the Nokia Asha Touch Competition 2012. I was awarded for the feedback I have given on the new Nokia developer tools. From the laudation:

“for his very focused and relevant feedback around core app development. The issues raised showed a great understanding of the product and what areas most need improvement.”

So Nokia sent me with two new devices, an Asha 303 ​​and an Asha 311. Continue Reading →

Permalink

Codename One – Swap Grid Cells

illustation of swapping cells

What is Codename One?

The platform “Codename One” offers operating system-independent development of apps for smartphones. An important component is a library for user interfaces. Codename One is a successor of LWUIT, which in turn uses concepts of the Java Swing library.

To develop a user interface, you insert the various controls such as labels, buttons or input fields in a container object. The positioning is not handled by the container itself, but by an associated object of the class layout manager. For example, you attach a Gridlayout object to position the items in a table. This is often very useful, because the Gridlayout object will automatically adjust the positions and sizes for various display sizes.

Continue Reading →

Permalink

(Deutsch) Ruby On Rails Datenbankoptimierung Teil 2

[Zu Teil 1]

Verknüpfungen mit dem SQL-join

Relationale Datenbanken erlauben es, Tabellen miteinander zu verknüpfen. In SQL gibt es für diese Verknüpfung das Schlüsselwort “JOIN“. Eine solche Verknüpfung kann theoretisch sehr frei spezifiziert werden, in der Praxis wird man fast immer aufgrund der Gleichheit bestimmter ID-Spalten verknüpfen.

In unserem Beispiel eines Schiffsinformationssystems haben wir eine Tabelle “vessels” mit den Schiffsdaten und eine Tabelle “countries” mit den Daten zu einem Flaggenstaat. Typischerweise wollen wir die Schiffsdaten zusammen mit der Daten des dazugehörigen Flaggenstaates ausgeben. Dazu verknüpfen wir die Tabellen an Hand des Fremdschlüssels “legal_country_id”.

In unserem Beispiel liefert der SQL-Join eine Tabelle, in der Schiffe gleich mit den dazugehörigen Flaggenstaaten eingetragen sind. Die Daten dieser Tabelle kann man zum Beispiel auf einer Übersichtseite darstellen. Es ist nur eine Datenbankabfrage nötig, obwohl man Daten aus zwei Tabellen anzeigt.

Es stellt sich dann allerdings die Frage, was eigentlich mit Schiffen ohne Flaggenstaat passiert?

Um das steuern zu können gibt es verschiedene “Geschmacksrichtungen” des Joins:

INNER JOIN: Beide Datensätze müssen vorhanden sein. Wenn einem Schiff (noch) kein Flaggenstaat zugewiesen wurde, wird es auch nicht geliefert.

OUTER JOIN, LEFT JOIN: Es wird auch dann ein Ergebnis geliefert, wenn es keinen verknüpften Datensatz gibt. Es werden also auch Schiffe ohne definierten Flaggenstaat geliefert. Dabei werden Daten aus der ersten (in Leserichtung linken) Tabelle geliefert.

RIGHT JOIN Es wird auch dann ein Ergebnis geliefert, wenn es nur in der zweiten Tabelle einen Datensatz gibt. Ein RIGHT JOIN würde also Staaten liefern, in denen kein Schiff registriert sind. In der Praxis ist das öfter verwirrend als nützlich, so dass man besser die Reihenfolge umdreht und dann einen LEFT JOIN nimmt.

Wie nutzt man join von Rails

Zunächst gibt es in Ruby schon eine Methode, die “join” heißt, die aber semantisch etwas ganz anderes macht. Sie verbindet die Elemente eines Array zu einem String:

[1, 2, 3, 4].join(‘-‘)
‘1-2-3-4’

Zusätzlich bietet ActiveRecord bzw. ActiveRelation eine Methode “joins”. Wichtig ist das “s” am Ende. Die Methode sieht zunächst sehr vielversprechend aus.

company = Company.find_by_name(‘Hapag-Lloyd’)

company.container_vessels.joins(:legal_country)

SQL:

SELECT “container_vessels”.*

FROM “container_vessels”

INNER JOIN “countries” ON “countries”.”id” = “container_vessels”.”legal_country_id”

WHERE “container_vessels”.”company_id” = 3

Leider liefert die Magie von Ruby-on-Rails diesmal nicht das gewünschte. Es wird zwar ein SQL-Join erzeugt, die Spalten der anderen Tabelle werden jedoch weggeschmissen. Active-Record ist ein sogennanter Object-Relation-Mapper (ORM), und als solcher darauf optimiert, immer Objekte einer Klasse zu liefern, in unserem Fall also ContainerVessel. Wenn man später auf die verknüpften Objekte zugreift, werden diese doch wieder einzeln geholt.

ActiveRecord-Abfragen liefern Objekte der jeweiligen Klasse zurück!

Einziger Effekt des generierten INNER JOIN ist, das nur Schiffe mit existierenden Flaggenstaat geliefert werden.

Das zeigt auch auf, wofür die joins() Methode trotzdem gut: Man kann mit ihr Objekte aufgrund von Eigenschaften von verknüpften Objekten auswählen.

Beispielsweise kann man so alle Schiffe einer Reederei auswählen, die einen EU-Flaggenstaat haben.

hapag.container_vessels.joins(:legal_country).where('countries.in_eu' => 'true')
hapag.container_vessels.joins(:legal_country).where(:countries => {:in_eu => true})

SELECT “container_vessels”.*

FROM “container_vessels”

INNER JOIN “countries” ON “countries”.”id” = “container_vessels”.”legal_country_id”

WHERE “container_vessels”.”company_id” = 3 AND “countries”.”in_eu” = ‘t’

Der SQL-Join führt dazu, das die passenden Datensätze schon in der Datenbank ausgewählt werden. Der Rails-Prozess sieht die Country-Datensätze noch nicht mal. Und was nicht da ist, kostet keinen Hauptspeicher und auch keine Performance.

In der Syntax muss man aufpassen: In der Spezifikation der Bedingungen bewegt man sich auf SQL-Ebene (‘countries’), während man in der joins-Methode die Rails-Association angibt(‘legal_country’).

(Demnächst geht es weiter mit echten Joins in Rails…) Continue Reading →

Permalink

Optimize the Ruby-on-Rails database – part one

Reduce the number of database queries

A typical web application does many database queries before it delivers the response page to the web browser. The application needs to wait for the response of each of these database queries. It gets an additional slow down because of process switching. The database server must analyze each request, and also the communication between the database and the application takes time. So less database queries reduce the overall load on the system. The system scales better.
Continue Reading →