AvrNET

zeflo — Mon, 30 Apr 2012 14:29:46 +0000

Arbeite gerade an einem kleinen Projekt um mehr über TCP/IP und Mikrocontroller zu lernen. Dabei handelt es sich um eine art Arduino, nur mit Ethernet-Interface.

Atmega Slim Client – Hardware Rev A

zeflo — Thu, 29 Mar 2012 14:24:15 +0000

Hier mal ein Fotot meines aktuellen Projekts. Dabei handelt es sich eigentlich nur um einen ChipBasic2 mit Ethernet. Leider haben sich ein paar Fehler in das Design der ersten Version eingeschlichen. Trotzdem funktioniert die Software von Jörg Wolfram schon super.

Fallblattanzeigen Sprite Generator

zeflo — Mon, 27 Feb 2012 23:13:46 +0000

Um die Sprites für die Fallblattanzeige zu generieren habe ich ein Python-Script für Gimp geschrieben. Ich bin noch dabei den Code zu Kommentieren und werde es dann hier veröffentlichen. Das obige Sprite gibt es hier.

Einfache Fallblattanzeige mit Javascript

zeflo — Mon, 30 Jan 2012 12:41:44 +0000

Fallblattanzeigen kennt man von Flughäfen und Bahnhöfen. Heute wollen wir eine solche anzeige für eine Webseite nachbauen.

Um eine animierte Fallblattanzeige auf einer Webseite zu realisieren, bereiten wir zuerst die eigentliche Animation vor. Aus der Länge der Animation und der Anzahl der Bilder pro Sekunde ergibt sich die Gesamtzahl der Bilder pro Animation. In diesem Beispiel besteht unsere Animation aus sieben Bildern. Um nicht jedes Bild einzeln vom Server laden zu müssen, packen wir alle Bilder in ein einziges Bild, in ein sogenanntes Image-Sprite. Ob wir die Bilder alle nebeneinander, untereinander packen oder sie in einer Matrix anordnen ist dabei egal. In diesem Beispiel hab ich sie in einer einzigen Spalte angeordnet.

Nun kommen wir zur eigentlichen Anzeige. Der HTML-Code den wir dafür brauchen ist sehr einfach gehalten.

Unser Sprite wird als Hintergrundbild der einzelnen

-Elemente eingebunden. Damit diese nicht untereinander sondern nebeneinander und in der richtigen Größe angezeigt werden, brauchen wir noch ein paar Zeilen CSS:

.display li {
	background-image: url("simple-countup-sprite.png");
	background-position: 0 0;
	width: 90px;
	height: 122px;
	list-style: none;
	float: left;
	margin: 0;
	padding: 0;
}

Der oben stehenden Code reicht schon für eine einfache statische Anzeige. In dem wir den einzelnen

-Elementen mittels dem “style”-Attribut die Position des Hintergrundbildes vorgeben, kann auch bei Browsern die kein Javascript unterstützen ein bestimmter unveränderlicher Wert angezeigt werden. Um jedoch eine animierte Anzeige zu erhalten brauchen wir noch etwas Javascript Unterstützung. Um komfortabel auf die css-Eigenschaften zuzugreifen, binden wir jQuery ein.

window.setInterval("count()", 1000);	// Counter Interval 1 Second
var oldState = new Array(0,0,0,0,0);
var newState = new Array(0,0,0,0,0);
var frame = 0;
var aniInterval = null;
var counter = 12343;			// Start Value
var height = 122;
 
function count() {
	counter++;
	if(counter>99999) {
		counter=0;
	}
	setDisplay(counter);
}
 
function animate() {
	var digit;
	for(var i=0; i<5; i++) {
		if(oldState[i]!=newState[i]) {
			digit = newState[i];
			if(digit==0){
				digit = 10;
			}
			if(frame>5) {
				oldState[i] = newState[i];
			}
			pos = (1+frame+(digit-1)*7)*height;
			$("#d"+i).css("background-position","0 -"+pos+"px");
		}
	}
	frame++;
	if(frame>6) {
		frame = 0;
		clearInterval(aniInterval);
		aniInterval = null;
	}	
}

Diese Anzeige hat noch einige Schwächen. So kann sie nicht schneller zählen als die Dauer der Animation. Es ist also noch viel Potential für Verbesserungen da.