Punkt.Fizn is an Android and Arduino powered bike navigation system. Unlike most navigation systems we didn’t focus on a display. Instead directions will be given only through vibrations in the handlebars. Riding a bike with Punkt.Fizn is like knowing your way already.

How does it work?
1. Choose a route from openrouteservice
2. Download the route XML
3. Upload it here
4. Start the android app and enjoy your bike ride…

Every time you have to turn, gentle vibrations in the handlebars will show you the way.

Material research:
We tried different materials in order to compare its conductibility of vibration. At first we used “Thermoplast”, plastic-granulate which melts on 60Celsius.
Its mold able, when still warm and gets very strong and quite flexible when cooled.
Unfortunately you can’t sanding it very good and it has a poor grind ability.

So we decided to try a soft industrial-design-foam which was good to work with.
The conductibility of the vibration was very good. One draw back with this material was its indurabilty.

Finally we used a more durable foam. Its has a good vibra-conductabilty and its workability lead to a smooth surface.

Coding:
To create a relatively simple but working navigation we wrote an Android application. We used Bluetooth to communicate between Android and Arduino..
Our code is based on the Bluetooth Chat Example from Android.com.
There are two Android Examples available:
1. Navigation System
2. Demo Example (can be a good starting point if you want to build your own Android 2 Arduino Example)

PHP Script
To get the routing we used OpenRouteService. Since the OpenRouteService XML data could not directly addressed over an API, we had to build a small PHP script that allows to simplify the desired route of OpenRouteService.org and load it up in the right format to a webserver. To parse and rebuild the XML we used SimpleXML from PHP. The current state of the navigation system is a prototype. Therefore only one device can access it at the time.
Here is the sourcecode of this script:

		Routeuploader
 
<h1>Bike-Navigation</h1>
 
 
<a id="link" href="http://openrouteservice.org/">download openrouteservice-xml here</a>
	<!-- The data encoding type, enctype, MUST be specified as below -->
<form enctype="multipart/form-data" method="POST"><input type="hidden" name="phpMyAdmin" value="3qaPcWk7TqTEf77hyhNmbFFoa%2C1" />
    		<!-- MAX_FILE_SIZE must precede the file input field -->
 
   			 <!-- Name of input element determines name in $_FILES array -->
			 Send this file:
</form>

Arduino
The Arduino microcontroller recieves the sent values from the Android application and starts a vibrations pattern for the handlebars. For each direction we have two different patterns.
Here is the code:

// This Code Reads the Serial Data whoch comes from Android
 
char incomingByte = 0;	// for incoming serial data
 
// ------ DIRECTION PINS INIT ---------------------
 
int pinArrayLeft[] = {12, 13, 14};
int pinArrayLittleLeft[] = {12, 13};
int pinArrayRight[] = {2, 3, 4};
int pinArrayLittleRight[] = {2, 3};
// ------------------------------------------------
int timer = 100;
int timerLittle =400;
int count = 0;
 
void setup() {
  // Start serial communication
  Serial1.begin(115200);
  Serial.begin(57600);
 
  for (count=0;count<3;count++) {     //////////////// LINKS     pinMode(pinArrayLeft[count], OUTPUT);     pinMode(pinArrayLittleLeft[count], OUTPUT);     //////////////// RECHTS     pinMode(pinArrayRight[count], OUTPUT);     pinMode(pinArrayLittleRight[count], OUTPUT);   } } void loop() {   while (Serial1.available() > 0)
  {
 
    byte serialreadbytevalue = Serial1.read();
    Serial.println(serialreadbytevalue);
 
    switch(serialreadbytevalue)
    {
      case 49:
        goLeft();
        break;
      case 50:
        goLittleLeft();
        break;
      case 51:
        goRight();
        break;
      case 52:
        goLittleRight();
        break;
    }
  }
 
}
 
void goLeft() {
 
  for (count=0;count<3;count++) {
   digitalWrite(pinArrayLeft[count], HIGH);
   delay(timer);
   digitalWrite(pinArrayLeft[count], LOW);
   delay(timer);
  }
 
}
 
void goRight() {
  for (count=0;count<3;count++) {
   digitalWrite(pinArrayRight[count], HIGH);
   delay(timer);
   digitalWrite(pinArrayRight[count], LOW);
   delay(timer);
  }
}
void goLittleLeft() {
  for (count=0;count<2;count++) {
   digitalWrite(pinArrayLittleLeft[count], HIGH);
   delay(timerLittle);
   digitalWrite(pinArrayLittleLeft[count], LOW);
   delay(timerLittle);
 
  }
}
 
void goLittleRight() {
  for (count=0;count<2;count++) {
   digitalWrite(pinArrayLittleRight[count], HIGH);
   delay(timerLittle);
   digitalWrite(pinArrayLittleRight[count], LOW);
   delay(timerLittle);
 
  }
}

Next Steps
The next step would be integrate OSMAND for the navigation. This way the hole navigation process would be easier.

Team
Alain Groeneweg | Danny Arielli | Michael Fretz

Links to site or magazines that mention us
androidportal.hu
androidpolice.com
http://techup.ch/105/40th-swiss-flash-user-group-meeting
http://iad.zhdk.ch/de/stories/11/01/embodied-interaction-press
Weave, interactive design, konzeption & development 02.11 April/Mai Page 16

This project was part of Embodied Interacion Modul at the Interaction Design Programm from the university of the arts in Zurich. All infos about this course http://blogs.iad.zhdk.ch/embodied-interaction/bike-navigatio/
Teachers: Max Rheiner and Karmen Franinovic

What is “Who is Muh”?
“Who is Muh” is an interactive platform for the Migros brand Terra Suisse. This interactive site shows different animals from the Terra Suisse program and explains what each animal does and how the animals are being treated and raised by their farmers.

Terra Suisse Animals and there Language
In the section animals and their language each animal explains briefly how they are being treated and what they do all day long. Each animal explains some things about its live and the environment it grows up in.

Muh Mix
The Muh Mix is a game like part of the site. Per drag and drop users can place animals into a play-list and arrange the order of the animal voices. If a user is happy with his choice he can play the song he created, share it on Facebook or send it through an email to his friends. If a user thinks the song he just made is great he can download it as an mp3 or m4r (iPhone Ring-tone format).

iPhone App
In addition to this site there is an iPhone app, available on the iTunes Store. Install it and enjoy cute animals on your phone.

Coding Base
The hole application is build in Object Oriented AS3. I was able to apply some design patterns in this app, for example I applied the singelton pattern on the objects that store the data in the application. This enabled me easy access to all my data from anywhere in the application.. Everything language related is saved in XML and dynamicaly loaded by the migros website. The platform runs on a FreeBSD server managed by my own Company Cubera Solutions GmbH. For generating the mp3 and m4r we created a php script which concatted the different small animal sound fragments to one mp3 file and for the secondary download option as m4r we used ffmpeg to convert.

Looking back
After finishing this project I’m very happy with it. All requested functionality could be built even-though we didn’t know if it is possible in the first place. The site works quite good and its cute and fun to play with it.
Many thanks to Claude Ebersold from Jung von Matt for providing all the cute graphics and for pushing me to work all day and night. Also thanks to Nadja Holdener for helping us where-ever help was needed, for creating many of the animations, and especially for learning and handling SVN so quickly. A special thank goes to Matthias Adolf for leading the project and letting me be part of it. Thank you all!

Try it
You can try this application here (german)

Download the XMLwithoutCaching.as File

Font Embedding

Because most time you visualize data you need to write some text to it. If you have done any pure ActionScript projects in Flex or FDT you know this stuff sucks. The resulting code looks like this and it takes hours of googling to get to the right embed parameters/tags.

But now the way of font handling in Actionscript changed. My colleague Philipp Laeubli created a plugin for eclipse which makes font embedding a piece of cake. If your interested in this, just apply for a private beta account on mojofont.badmojo.ch.
Here a little example how to embed a font with the mojofont plugin.

Instead of writing a whole bunch of metacode and doing some strange font registration, you import your font, and then you can use ist like this: Helvetica.createTextField(). Thats it. All the nasty embedding code and other things are completely handled by the plugin which generates a simple to use and embed swc file.

Tweening
For the hole tweening I used the tweenlite library from http://blog.greensock.com/tweenliteas3/. In my opinion it is one of the best tweening libarys and very easy to use.

XML Loading
I wrote a XMLLoader class. The XMLLoader class loads the hole data of the XML into a String. As soon as its finishes with loading, it dispatches an event. With the getter methods its easy to recive the data and use it afterwards in your programm.

PHP File to generate XML
Many of you will ask why I id use XML. In my opinion its the easiest way of recieving data and its easy to generate it from a database. To generate the XML file I developed a PHP file. This file connects to a MySQL database and loads the whole content of the defined table.  At the moment you will have to define the used fields by hand. First of all, be sure you have all the needed fields in your database. Afterwards change the values in the begin of the mysqlToXML.php file. You have two options. 1: Make the PHP file look like an XML after loading it or 2: let it generate an external file. The first one is the better way if you change often data but dont have to many visitors. The option with the external file is a good option if you want to save database connections because you only ned to generate the XML file once you have changed some data. If you use the external XML file option, be sure that you have the write permission set on your webspace. After you generated your XML just make sure your XML loader class in your Actionscript project knows the path to the file. If you use the other option just add the path of the mysqlToXML.php in your Actionscript project.
Download mysqlToXML.php

Vorlesungsverzeichnis nachdem das Departement XML geladen ist.

Übersicht der Module welche in einer Vertiefung angeboten werden. Durch dir Pfeile kann durch die Module durchgeblättert werden.

Anzeige eines Moduls.

Zur Programmierung:

Die Dokumentklasse fungiert als Viewer und Controller. Alle Elemente werden hier plaziert. Je nach dem was geklickt wird, entscheidet die Dokumentklasse welches XML geladen werden soll.

Die XML Loaderklasse kann jedes beliebige XML laden. Sind die Daten geladen wird ein Dispatch Event ausgeschossen. Über get Methoden werden Name und Daten zurück geliefert.

Auszug aus der XML Loaderklasse

Die XML Manager Klasse bekommt die Daten aus der XML Loaderklasse. Die erhaltenen Daten werden in einen Array gespeichert und anschliessend wird ein Dispatch Event ausgeschossen.

Auszug aus der XML Manager Klasse

URL zur Demo: http://vorlesungsverzeichnis.michaelfretz.com

Download Flex Projekt des Vorlesungsverzeichnis (104 KB)