FindMe
Nicht mehr suchen, sondern finden!

Kurzfassung:

Das ist das Motto einer Positionssoftware für Mobiltelefone.
Diese Software betreibt allerdings kein Map-Matching um den Nutzer selbst auf eine Karte zu finden. Nein vielmehr findet sie Freunde des Nutzers in der Umgebung.

Dies soll den Nutzer ein nerviges Suchen von Freunden in großen Menschenmengen ersparen oder aber auch Informationen geben, wie weit der jeweilige Freund entfernt ist, der einen abholen soll. Abgesehen von netten Informationen ist sicher ein gewisser Spaßfaktor in der Freizeit gegeben.

Entstehungsgeschichte:

Diese Software entstand in einem Unterrichtsfach des Studiengangs “Intelligente Verkehrssysteme” der FH Technikum Wien. In diesem Unterrichtsfach musste ein Projekt bis zur Bachelorarbeit gestaltet werden. Das “FindMe” Team hatte dann die Idee dieser Applikation.

In 4 Semestern wurde sie dann umgesetzt und ist heute bei Sourceforge unter der GPL zu finden.

Wie FindMe funktioniert:

Um die Funktion von FindMe zu gewährleisten wurde das System in 3 Teile unterteilt. Dem GPS Empfänger, dem Server und dem Handy. Hier der Systemüberblick:Das Handy erhält über die Bluetoothverbindung die GPS Daten und sendet Sie an den Server. Gleichzeitig kontrolliert das Handy ob neue Freundschaftsanfragen vorhanden sind und lädt die Positionsdaten von benötigten Freunden herunter.

Freundschaftseinladungen sind analog den sozialen Netzwerken wie Facebook und co. umgesetzt. Erst wenn beide Parteien die Freundschaft akzeptiert haben, können daten versendet werden.

Aussehen der Applikation auf dem Mobiltelefon:

Da das Projektteam wollte, dass es auf so gut wie jedem Mobiltelefon läuft, wurde das Design recht schlicht gestaltet. Ein Freund wird durch einen farbigen Punkt repräsentiert und man selbst ist immer der rote Punkt in der Mitte. Ein blauer Pfeil zeigt die berechnete Nordrichtung an. Das ganze funktioniert auch mit Fixpunkten.

Mehr Screenshots findet ihr im Benutzerhandbuch!

Kann man FindMe nun einfach downloaden und schon gehts los?

Nein, das kann man leider derzeit nicht. Wie bereits erwähnt benötigt das System einen Server. Dieser ist derzeit inaktiv und wird nicht mehr verwendet. Da das Projekt allerdings unter GPL als OpenSource verfügbar ist, kann man es gerne downloaden auf seinem eigenen Server und Mobiltelefon installieren und dann loslegen.

An dieser Stelle möchte ich mich noch einmal sehr bedanken bei meinen Kollegen die mit mir dieses Projekt damals umgesetzt haben!

• Christoph Chmela
• Petrina Papazek
• und Lucas Weiß

Mehr informationen?

http://sourceforge.net/projects/findme/

Dort findet ihr alles von Projektplänen bis Quelltext, JavaDoc bist Vortragsmaterialien!
Derzeit ist alles mal soweit hochgeladen, um optisch bessere Aufbereitung werde ich mich zukünftig kümmern. Falls irgendwer interesse hat dieses Projekt weiterzuführen, ist er herzlich eingeladen mich zu kontaktieren!

Jeder kennt den Effekt der gestreiften Tabelle. Sind die Zeilen abwechselnd in unterschiedlichen Farben, verliert man nicht so einfach den Überblick. Oftmals wird diese nette optische Unterstützung serverseitig (z.B.: in PHP) gelöst, aber manchmal ist es doch einfacher es mit JavaScript zu erledigen.

Doch wie macht man das nun einfach in JavaScript? Ich werde nun erklären wie das geht und einige Erweiterungen dazu geben.

Ich möchte hier kurz erwähnen, dass ich auch einige Ideen aus dem Internet habe, jedoch die Quellen nicht mehr finden kann! Sollte ich die Seite finden die mir den Anstoß gegeben hat, werde ich sie natürlich als Quelle führen!

Leider gibt es das Problem, dass CSS Eigenschaften auf der Tabellenreihe nicht ziehen. Deswegen färben wir jede Tabellendata (<td>)  einzeln.

/**
* Funktion zum streifen einer Tabelle
* @param id: Die Tabelle muss über eine ID verfügen und die wird hier übergeben
*/
function stripe(id) {
	//Variable fürs Farbwechseln
	var even = false;
	//Farbe für ungerade Zeilen
	var evenColor = "#ffffff";
	//Farbe für gerade Zeilen
	var oddColor = "#eeeeff";
	//Wir holen uns das Objekt der Tabelle
	var table = document.getElementById(id);
	//Wenn wir keine Tabelle erhalten haben, dann ist hier Ende
	if(! table) { return; }
	//Wir wollen nur den Tabllenbody streifen.
	var tbodies = table.getElementsByTagName("tbody");
	//Wichtig hier ist es, dass es laut Definition mehrere tbodys geben kann! Deswegen die Schleife
	for (var h = 0; h < tbodies.length; h++) {
		//Wir holen uns die Reihen
		var trs = tbodies[h].getElementsByTagName("tr");
		//Wir laufen eine Reihe nach der anderen durch
		for (var i = 0; i < trs.length; i++) {
			//Wir laufen nun alle Tabellendata durch
			for (var j = 0; j < tds.length; j++) {
				//Jetzt noch schnell den Hintergrund färben
				tds[j].style.backgroundColor = even ? evenColor : oddColor;
			}
			//Farbwechsel realisieren
			even =  ! even;
		}
	}
}

Ist jetzt glaube ich nicht so schwer. Deswegen werden wir diese Funktion erweitern!

Nehmen wir einmal an, wir wollen über ein PHP Script bestimmte Zellen schon vorfärben die unsere Funktion nicht ändern soll. Das heißt es sollen nur die geändert werden die keine Hintergrundfarbe besitzten.

Auch das ist noch relativ einfach gemacht. Wir müssen dazu nur eine if verzweigung vor dem färben hinzufügen

for (var j = 0; j < tds.length; j++) {
				if(!tds[j].style.backgroundColor){
					tds[j].style.backgroundColor = even ? evenColor : oddColor;
				}
			}

Das war einmal Teil I des Berichts. Im zweiten Teil zeige ich euch dann, wie man markierungen von Zeilen mit einer erweiterten Variante der Funktion realisieren kann.

Ebenso zeig ich euch eine Einfach variante mit der man auf unterschiedlichen Farben reagieren kann.

Denn leider ist es nicht möglich mit einem

if(tds[j].style.backgroundColor == "#FFFFFF")

zu vergleichen. Vor allem weil wenn man mit einem

alert(tds[j].style.backgroundColor);

Im InternetExplorer den Hexwert erhält und im FireFox einen rgb wert.
Freut euch schon auf Teil 2

Es gibt bereits sehr viele Scripte die Bilder vorladen mit oder ohne Statusanzeige.

Allerdings sind mir diese oft zu groß oder gewesen oder haben nur alle Bilder geladen die bereits über einen <img> Tag in der Homepage waren. Ich brauchte aber ein sehr kleines Script, da es auf mobilen Endgeräten ausgeführt werden sollte. Und es sollte nicht automatisch alle Bilder laden sondern erst auf Knopfdruck.

Leider habe ich dann nichts mehr passendes gefunden, deshalb habe ich mir folgende Funktionen selber geschrieben.

Das preloading wird erst ausgelöst wenn man die Funktion startPreloading() aufgerufen wird. Dann wird der Browser durch das erzeugen eines neuen Bilders und dem zuweisen einer URL dazu veranlasst dieses Bild zu laden. (Eigentlich erst durch das zuweisen der URL)

Über das Attribut “complete” kann nun überprüft werden ob das Laden beendet ist. Ein counter zählt die fertigen durch. Sind alle fertig geladen, dann wird die Funktion doSomething() aufgerufen. Wichtig dabei ist, dass man die 250ms pause beibehält. Denn wenn man keine Pause einbaut, erzeugt man ein Script, welches den Browser blockiert bis es fertig ist!

//Liste der Bilder
var global_imageList = new Array("bild1.jpg","bild2.jpg","bild3.jpg");
//Funktion die das Preloading startet
function startPreloading(){
	//Statusmeldung aktualisieren
	document.getElementById("status").innerHTML = "Lade Bilder für Animation...";
	pictures = new Array();
	if(global_imageList != null && global_imageList.length > 0){
		//Jedes Bild laden
		for(i=0;i<global_imageList.length;i++){
			tmp_img = new Image();
			tmp_img.src = url;
			pictures[i] = tmp_img;
		}
	}
	//Funktion zum kontrolieren aufrufen
	preloading(pictures);
}

function preloading(pictures){
	counter = 0;
	for(i=0;i<pictures.length;i++){
		if(pictures[i].complete){
			counter++;
		}
	}
	//Wenn alle Bilder geladen sind
	if(counter == pictures.length){
		//Jetzt sind alle Bilder geladen, also:
		doSomething();
	//Sonst status
	} else {
		document.getElementById("status").innerHTML = "Lade Bilder für Animation... ("+counter+"/"+pictures.length+")";
		//Eine Pause einlegen, sonst bleibt das Script hängen
		setTimeout(function(){preloading(pictures);},250);
	}
}

Das Script ist nun auch einfach anzupassen. Man muss nur die global_Imagelist mit seinen Bildern einfügen. Die Statusanzeige Passiert als text, indem der <div> Block mit dem Namen “Status” verändert wird.

In einem Ferialpraktikum hatte ich einmal das Problem, dass ich eine Exceldatei aus einer C# Anwendung lesen musste. Dazu habe ich mir 2 Klassen geschrieben. myExcelApplication, welches mir eine Instanz von Microsoft Excel öffnet und nach Beendigung wieder schließt. Und myWorkbook, welche mir den Zugriff auf ein Workbook ermöglicht.

Wichtig sind vor allem die Referenzen. Man muss Microsoft.Office.Core sowie Microsoft.Office.Interop.Excel einbinden, damit es sicher funktioniert

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Forms;
using Excel = Microsoft.Office.Interop.Excel;
using System.Runtime.InteropServices; //Für DllImport!
using System.Diagnostics; //Für Process

myExcelApplication:

public class myExcelApplication : IDisposable
{
	#region user32 Funktionen
	// Windows OS Funktionen deklarieren
	[DllImport("user32")]
	private static extern IntPtr FindWindow(string lpClassName, string lpWindowName);

	[DllImport("user32.dll", SetLastError = true)]
	static extern uint GetWindowThreadProcessId(IntPtr hWnd, out int lpdwProcessId);

	// Ende Os Funktionen
	#endregion

	public Excel.ApplicationClass ExApp; //Besitzt alle Excelfunktionen
	private string ApplicationID; //Ist meine Programmid
	private IntPtr hWnd; // Window Handle
	private int iProcID; // Prozess ID des markierten EXCELs
	private Process p = null; // entsprechendes Process object
	public myExcelApplication()
	{
		//defaulteinstellungen
		System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("en-US");
		this.ApplicationID = "Excel_" + System.Guid.NewGuid().ToString().ToUpper(); //ID erzeugen
		this.ExApp = new Excel.ApplicationClass(); //Excelklasse zuweisen
		this.ExApp.DisplayAlerts = false; //keine Warnmeldungen Anzeigen
		this.ExApp.AskToUpdateLinks = false; //Updateabfrage deaktivieren
		this.ExApp.Visible = false; //unsichtbar
		this.ExApp.Caption = this.ApplicationID; //Id zuweisen

	}
	~myExcelApplication()
	{
		this.Dispose();
	}

	#region IDisposable Members

	public void Dispose()
	{
		/*
		 * Folgendes funktioniert nicht:
		 * ExApp.Application.Quit(); oder this.ExApp.Quit();
		 * Leider weiß ich nicht mehr woher ich das habe.
		 * Aber deswegen haben wir die EXCEL Applikation markiert
		 */
		hWnd = FindWindow(null, ApplicationID);
		if (hWnd == IntPtr.Zero) return;
		// zu dem Fenster holen wir uns die Prozess-ID ...
		GetWindowThreadProcessId(hWnd, out iProcID);
		if (iProcID == 0) return;
		// erzeugen ein entsprechendes .NET Prozess Objekt ..
		p = Process.GetProcessById((int)iProcID);
		if (p == null) return;
		// jetzt ist Feierabend ...
		p.CloseMainWindow();    // schliesse Fenster
		p.Refresh();            // gebe alle Prozess-Informationen frei
		if (p != null)
		{
			p.Kill();               // und tschuess ...
		}
	}

	#endregion
}

myWorkbook:

public class myWorkbook
{
	public Excel.Workbook myWb;
	public string Datei;
	public myExcelApplication ExApp;
	public bool schreibschutz = false;
	private bool _calculation;
	public bool calculation
	{
		get { return this._calculation; }
		set
		{
			this._calculation = value;
			this.calculate();
		}
	}
	public string aktivsheet;

	public myWorkbook(string datei, myExcelApplication EApp)
	{
		this.Datei = datei;
		this.ExApp = EApp;
	}
	public myWorkbook()
	{
		//leerer konstruktor
	}
	public void open()
	{
		try
		{
			this.myWb = ExApp.ExApp.Workbooks.Open(this.Datei, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing);
		}
		catch (Exception e)
		{
			//
		}
		//this.myWb = ExApp.ExApp.Workbooks.Open(this.Datei, 0, true, 5, "", "", true,Excel.XlPlatform.xlWindows, "\t", false, false, 0, true, false, false);

		if (this.myWb.ReadOnly) { this.schreibschutz = true; }
		this.calculation = false; //Abschalten der automatischen Berechnung
	}
	public void close()
	{
		object Save = Excel.XlSaveAction.xlSaveChanges; //Speichern oder nicht speichern Variable hier setzen
		this.calculation = true; //Noch einmal schnell rechnen lassen vorm schließen
		this.myWb.Close(Save, Type.Missing, Type.Missing); //schließen
	}
	private void calculate()
	{
		//Schaltet automatische Berechnung ab bzw. aktiviert sie wieder
		if (!this.calculation)
		{
			this.ExApp.ExApp.Calculation = Excel.XlCalculation.xlCalculationManual;
		}
		else
		{
			this.ExApp.ExApp.Calculation = Excel.XlCalculation.xlCalculationAutomatic;
			this.ExApp.ExApp.Calculate();
		}
	}
	public Excel.Range Zelle(int Zeile, int Spalte)
	{
		return (Excel.Range)((Excel.Worksheet)this.myWb.Worksheets[this.aktivsheet]).Cells[Zeile, Spalte];
	}
	public Excel.Range Zelle(int Zeile, int Spalte, string Worksheet)
	{
		return (Excel.Range)((Excel.Worksheet)this.myWb.Worksheets[Worksheet]).Cells[Zeile, Spalte];
	}
}

Hier ein Beispiel, wie man mit diesen Klassen, die Erste Zelle des Blattes “Tabelle1″ auslesen kann:

//Applikation starten
myExcelApplication EApp = new myExcelApplication();
//Workbook erzeugen
myWorkbook ExcelFile = new myWorkbook("c:\\test.xls", EApp);
//Excelfile öffnen
ExcelFile.open();
//Sheet wählen
ExcelFile.aktivsheet = "Tabelle1";
//Zeile auslesen
String zelle1 = ExcelFile.Zelle(1, 1).Value2;
//Workbook schließen
ExcelFile.close();
//Applikation schließen
EApp.Dispose();

Tipp: Schaltet die automatische Berechnung von Zellen ab und erst kurz vorm speichern wieder an. Das spart oftmals wertvolle Rechenzeit

AJAX ist eine nette Sache! Dieses Akronym steht für „Asynchronous JavaScript and XML“ und ermöglicht unter anderem dynamisches Nachladen von Inhalten in die HTML Seite. Wer sich ganz genau dafür interessiert, kann ja auf WIKIPEDIA nachschauen

Natürlich findet man jetzt eine große Menge an Bibliotheken die man nutzen kann und sollte, aber hier möchte ich euch eine Quick and Dirty Lösung zeigen.

//AJAX Initialisieren und Funktionen zur Handhabung
var request = false;

// Request senden
function setRequest(url,send,irfunction) {
	// Request erzeugen
	if (window.XMLHttpRequest) {
		request = new XMLHttpRequest(); // Mozilla, Safari, Opera
	} else if (window.ActiveXObject) {
		try {
			request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
		} catch (e) {
			try {
				request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
			} catch (e) {}
		}
	}
		// überprüfen, ob Request erzeugt wurde
	if (!request) {
		alert("Kann keine XMLHTTP-Instanz erzeugen");
		return false;
	} else {
		// Request öffnen
		request.open('post', url, true);
		// Requestheader senden
		request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
		// Request senden
		request.send(send);
		// Request auswerten
		request.onreadystatechange = function() {
			interpretRequest(irfunction);
		}
	}
}
// Request auswerten
function interpretRequest(irfunction) {
	switch (request.readyState) {
		// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
		case 4:
			if (request.status != 200) {
				alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
			} else {
				irfunction();
			}
			break;
		default:
			break;
	}
}
//ENDE AJAX Funktionen

Wie verwendet man diese Funktionen nun richtig?

Angenommen wir haben eine Formular bei dem sich ein User registrieren muss und wir wollen checken ob der Nick schon vorhanden ist.

Dazu verwenden wir eine PHP Datei, die auf im selben Ordner liegt und abfrage.php heißt. Diese macht uns eine MYSQL Abfrage und liefert uns dann false zurück, wenn der Nickname schon vorhanden ist. Die 2 JavaScript Funktionen die wir zusätzlich noch in der HTML Datei brauchen sind folgende:

function check_name(nick) {
	//Request abschicken mit Post Variable Nickname
	setRequest("/abfrage.php","nickname="+nick,check_name_finish);
}
function check_name_finish() {
	var content = request.responseText;
	//Do something
}

Die Funktion check_name(nick) wird vom Inputfeld aufgerufen, wenn dieses nicht mehr beschrieben wird.  (siehe Code vom Inputfeld). Ist Funktion check_name(nick) mit der Ausführung fertig, wird Funktion check_name_finish() aufgerufen und ausgeführt. Diese hat nun in der Variable content die Antwort der Abfrage und kann nun darauf reagieren.

Und das Inputfeld würde so aussehen:

<input type="text" name="nickname" value="" onblur="check_name(this.value)">

Wie bereits erwähnt ist das hier nur Quick and Dirty! Getestet habe ich es mit den neuesten Versionen von IE und FireFox. Viel Spass damit!

Ofmals kann es sehr Hilfreich sein, wenn man die Variablennamen variabel angeben kann. Dies ist in PHP sehr einfach möglich indem man noch ein zusätzliches $ vorransetzt.

$var = "test";
$test = "Hallo";
echo $$var;

Dieses Beispiel liefert ein schönes “Hallo” zurück.

Das ganze kann man sogar noch besser nutzen!
Besitzt man zum Beispiel mehrere Variablen die sich nur am Schluss durch eine Zahl unterscheiden (z.b.: Feld1, Feld2, Feld3, Feld4) so kann man diese schnell in ein Array umwandeln!

$Feld1 = "Das";
$Feld2 = " ist";
$Feld3 = " ein";
$Feld4 = " Test";

for($i=1;$i<=4;$i++){
	$array[$i] = ${"Feld".$i};
	echo $array[$i];
}

Dieses Beispiel gibt “Das ist ein Test” zurück.

Einfach oder?