Tooltips auf Webseiten
Immer wieder wollte ich Tooltips auf Webseiten verwenden. Eigentlich kann man diese ja sehr einfach über Divboxen realisieren, doch so richtig schön waren die nie. Außerdem möchte man ja nicht für jeden Tooltip ein eigenes Div definieren und das dann ein-/ausblenden.
Auf meiner Suche nach einer besseren Lösung bin ich dann auf qTip gestoßen. Mit diesem jQuery Plugin sind die nicht nur schön, sondern auch total einfach zu verwenden!
Aktuell verwende ich dieses Plugin in 3 unterschiedlichen Projekten, und freue mich noch immer über die einfache Anpassbarkeit an Designs sowie auch auf unterschiedliche Elemente. Ob als Info bei einem Button oder auf einer Imagemap: mit qTip kann man das sehr einfach umsetzen.
Besucht einfach mal http://craigsworks.com/projects/qtip2 und schaut euch die Demos an! Es wird sich lohnen 
PS: Auf dem iPad funktionieren die Tooltips auch wunderbar!
Historische Programme aus dem Hause Neysor
Bei meiner üblichen Datensicherung bin ich wieder einmal auf meinen alten Projektordner mit Dephiprogrammen gestoßen. Gelernt habe ich Delphi im Gymnasium als erste Programmiersprache (nach Q-Basic) und habe es auch danach nicht mehr verwendet. Dennoch sind in dieser Zeit (Ende 2003 – Anfang 2004) sehr lustige Programme entstanden! Und weil ich es schade finde, dass diese so einfach in dem Ordner verkümmern werde ich euch eine Auswahl vorstellen:
Zu aller erst mein Notentrainer! Damals habe ich mit Gitarre spielen begonnen und hatte meine Probleme beim Notenlesen. Aufgrund meiner Feststellung, dass Tabs doch um einiges praktischer sind, kann ich auch heute nur Noten “buchstabieren” und nicht flüssig lesen, aber darum geht es hier ja nicht
In der Standardstimmung besitzt die Gitarre das Notenintervall vom E bis zum a” weswegen ich diesen auch im Violinschlüssel darstellen wollte! Die Aufgabe war simpel: Eine Note sollte zufällig erscheinen und mit einen gewissen Zeitdruck sollte man dann das richtige Ergebnis ausführen. Bei einer richtigen Antwort soll sich die Note grün, bei einer falschen Antwort rot färben. Folgender Screenshot stellt das Interface dar:
Funktioniert tadellos, vorausgesetzt man füllt auch wirklich etwas ins Textfeld aus. Ansonsten ist es leicht möglich eine ganze Spalte schwarz zu färben
Ein weiteres Programm ist meine tolle Uhr die ich programmiert habe Ich wollte erstmals Vektoren auch außerhalb vom Mathematikunterricht benutzen müssen und bin auf die Idee gekommen eine analoge Uhr zu zeichnen. Weil mir das nicht gereicht hat, habe ich auch eine Stoppuhr versucht! Funktioniert wunderbar, bis auf meine naive Annahme, dass durch den zeit-gesteuerten Auslöser eine korrekte Stoppzeit möglich ist. Leider braucht der Rechenvorgang so lange, dass eine Sekunde auf der Stoppuhr weit länger braucht als dies definiert wäre 
Vom Hauptprogramm gebe ich euch auch hier wieder ein kleines Bildchen:
Den Quelltext der Programme könnt ihr gerne folgend downloaden und frei verwenden!iTunes DJ – Erster Versuch
Vor kurzem habe ich mich entschlossen, alle meine Lieder in iTunes zu verwalten. Eigentlich konnte ich diese Software nie leiden. Ich war der Typ der alles in selbstverwalteten Ordner gehortet hat
Doch mittlerweile mit iPhone, iPad und co. habe ich mich irgendwie auch verleiten lassen alles in dieser Software zu verwalten. Dabei bin ich dann auch auf iTunes DJ gestoßen. Die Idee ist super. Ein shuffle Modus über die ganze Musik. Aber das beste ist das VOTING System für alle Benutzer. Leider auf iOS beschränkt.
Damit man aber wenigstens das aktuelle Lied auf einem anderen Gerät im Browser sehen kann, habe ich mich entschlossen mit der COM-Library zu spielen. Die Doku ist recht gut und mein erster Versuch hat auch sehr gut geklappt.
Nächstes und Vorheriges Lied sind 2-Zeiler:
iTunesLib.iTunesApp app = new iTunesAppClass(); app.PreviousTrack(); //app.NextTrack();
Aber auch das anzeigen der Playliste und des Covers des aktuellen Liedes ging sehr einfach. Hier der code:
iTunesLib.iTunesApp app = new iTunesAppClass();
String id = app.CurrentPlaylist.playlistID.ToString();
String name = app.CurrentPlaylist.Name;
IITTrackCollection c = app.CurrentPlaylist.Tracks;
IITArtwork Art = c.get_ItemByPlayOrder(6).Artwork[1];
pictureBox1.Image = null;
pictureBox1.Invalidate();
Art.SaveArtworkToFile("c:\\tmp\\Album.jpg");
pictureBox1.Image = null;
Stream stream = File.Open("c:\\tmp\\Album.jpg",FileMode.Open);
Image temp = Image.FromStream(stream);
stream.Close();
pictureBox1.Image = temp;
String s = "";
for (int i = 1; i >= c.Count; i++)
{
IITTrack t = c.get_ItemByPlayOrder(i);
if (t.trackID == app.CurrentTrack.trackID) { s += ">> "; }
s += t.Name + "\n";
}
richTextBox1.Text = "Playlistname:"+name+"\nLieder" + s;
Das war nur mein erster kruzer Versuch und ich hoffe ihr könnt damit was anfangen. Wenn ich dann mich zu einem schöneren Beispiel überwunden habe, werde ich natürlich bessere Erklärungen zu diesen Code liefern. Aber eigentlich sollte es eh recht klar sein was hier passiert
FindMe
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!
Gestreifte Tabelle mit JavaScript Teil 1
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
