Tag Archives: How-To

How-To: UI für Anfänger – jQuery Mobile (I)

Keep it simple.

mobile_website_vs_appMobile Webanwendungen oder -webseiten sind keine Apps, sondern Webseiten die für die mobile Betrachtung optimiert wurden. So gibt es kleine Skripte, welche die mobile Browser erkennen und einen direkt auf die mobil optimierte Webseite weiterleiten (siehe z.B. IKEA). Die mobilen Webseiten können natürlich auch auf dem heimischen Computer aufgerufen werden, aber der knapp dimensionierte Platz wird bei inzwischen standardmäßigen Auflösungen von 1920×1080 kaum genutzt. Inzwischen gibt es auch “Compiler” (Phonegap), welche die mobile Webseiten in eine native App umwandeln. Hierbei wird der Browser durch ein Framework simuliert und eine gesonderte API ermöglicht die Kommunikation mit der Kamera des Smartphones. Hier tut es uns aber einfach mal eine einfache mobile Webanwendung, denn wir wollen es einfach halten.

Continue reading

Posted in Code-O-Matic. Tagged with , , , .

How-To: UI für Anfänger – Die Einleitung

Seitdem immer mehr Anwendungen in das Internet wandern und zudem das Internet immer mehr auf Smartphones genutzt wird, liegt es nah diesen Trend zu begleiten und eine UI-Unterstützung als Web-Anwendung für mobile Endgeräte zu erstellen. Gelegenheit dazu gibt es unter anderem, um die parallel laufende KI-Entwicklung von Cookie zu unterstützen. So ist es geplant, die KI bequem mehr mobilen Endgerät auf Herz und Nieren zu überprüfen. Eine Web-Anwendung ist im Prinzip nichts anderes als eine Homepage gestaltet als Anwendung im Web, welche damit logischerweise nur im Browser läuft und nicht installiert werden brauch. Passt man das Format auf mobile Endgeräte an, so laufen diese Homepages Smartphone-optimiert auf den jeweiligen Browsern.

Nun gibt es gerade im Umfeld des Internets einige Schlagwörter und Begriffe, welche nicht allen zugänglich sein dürfte. Zudem stehen einem zumeist eine große Bandbreite an (Open-Source) Programme, Frameworks und Standards zur Verfügung. Um vorab alles zu klären und zu erklären werde ich Schritt für Schritt auf die einzelnen Elemente eingehen und beginne in diesem ersten Blogeintrag der Serie erst einmal mit den Dingen, die ich gerne verwenden würde. Natürlich können diese sich noch im Laufe der Zeit ändern, da diese Blogserie laufend zur Entwicklung entsteht.

Continue reading

Posted in Code-O-Matic. Tagged with , , , , , , , .

How-To: Python Scripting in Blender: (10) Objekte gruppieren

Outliner Objektgruppe

Outliner Objektgruppe

In diesem Tutorial wollen wir Objekte zu Objektgruppen zusammen fassen. Wie das How-To zum Collada Export wird dieses Tutorial so kurz, dass es eigentlich keinen “weiterlesen” Button braucht. Aber das Gruppieren von Objekten in Blender könnte noch einmal wichtig werden, also behandeln wir es eben :) Am Ende dieses Tutorials könnt ihr

  • Objekte gruppieren und
  • Objektgruppen auflösen.

Continue reading

Posted in Code-O-Matic, Graphic-O-Matic. Tagged with , , .

How-To: Python Scripting in Blender: (9) Rotation mit Eulerkoordinaten

In diesem dritten und letzten Tutorial zur Rotation im dreidimensionalen Raum wollen wir uns die Drehung mittel Eulerkoordinaten ansehen. Am Ende dieses Tutorials könnt ihr

  • Eulersche Winkel berechnen und
  • mit Eulerschen Winkeln Objekte in Blender rotieren.

Continue reading

Posted in Code-O-Matic, Graphic-O-Matic. Tagged with , , .

How-To: Python Scripting in Blender: (8) Rotation mit Quaternionen

In diesem zweiten Tutorialteil über die Rotation im dreidimensionalen Raum in Blender mit Python wollen wir uns die Rotation mir Quaternionen ansehen. Am Ende dieses Tutorials könnt ihr

  • Quaternionen berechnen
  • Rotationen in Blender mit Quaternionen durchführen und
  • Quaternionen- und Achse-Winkel-Darstellungen von Drehungen ineinander umformen.

Continue reading

Posted in Code-O-Matic, Graphic-O-Matic. Tagged with , , .

How-To: Python Scripting in Blender: (7) Rotation im Modus “Axis Angle”

So, nach einer längeren Pause finde ich es ist an der Zeit die How-To Reihe zum Python Scripting in Blender wieder aufzunehmen. In den nächsten Tutorialteilen wollen wir uns mit der Rotation von Objekten im dreidimensionalen Raum beschäftigen. In diesem Teil werden wir uns die Drehung um eine Achse mit dem “Axis-Angle”-Modus anschauen, im nächsten Teil betrachten wir dann die Drehung um eine Achse mit dem mit Quaternionen und anschließend die Drehung mit Eulerschen Winkeln. Am Ende dieses Tutorials könnt ihr

  • Drehachsen berechnen,
  • Objekte auswählen und aktiv setzen und
  • Objekte um eine Drehachse um einen Winkel drehen.
Screenshot Rotationsergebnis

Screenshot Rotationsergebnis

Continue reading

Posted in Code-O-Matic, Graphic-O-Matic. Tagged with , , .

How-To: Python Scripting in Blender: (6) Add-On Programming

In diesem (vorerst?) letzten Teil der Python in Blender Tutorialreihe wollen wir unser Pyramidenprogramm als Add On installieren, so dass wir das Skript nicht mehr über das Textfenster laden und ausführen müssen. Am Ende dieses Tutorials könnt ihr

  • ein Skript so anpassen, dass es in Blender als Add-On installierbar ist und
  • Add-Ons installieren.

Add-On Page

Continue reading

Posted in Code-O-Matic, Graphic-O-Matic. Tagged with , , .

How-To: Python Scripting in Blender: (5) User Interface

UI Panel: Pyramide

UI Panel: Pyramide

In diesem fünften, vorerst vorletzten Python in Blender Tutorial wollen wir uns mit der Erstellung von einfachen User Interfaces befassen. Wir wollen für unser Tutorial Programm ein kleines UI mit zwei eingebbaren Floatzahlen für die Höhe und die Breite der Pyramide und einem “Build!” Button (siehe Graphik rechts) schreiben. Am Ende dieses Tutorials könnt ihr

  • Button Panels erstellen,
  • Eingabefelder erstellen und
  • Buttons anzeigen lassen und mit Funktionen belegen.

Continue reading

Posted in Code-O-Matic, Graphic-O-Matic. Tagged with , , .

How-To: Python Scripting in Blender: (4) Collada Export

Soo.. ein gaaanz kleiner Absatz zu Blender, so kurz, dass ich eigentlich keinen “Weiterlesen” Button brauchen werde und so kurz, dass es eigentlich keine Nummer in der Python Scripting in Blender How-To Reihe verdient. Aber.. Der Vollständigkeit zuliebe erwähne ich es (der automatische Collada Export ist Teil der Kette C++ Programm Umweltsimulation -> mySQL Datenbank -> Blender -> Torque) und der Konstistenz zuliebe bekommt es eine Nummer. Am Ende dieses How-Tos könnt ihr

  • erstellte Szenen als Collada Datei exportieren.

Continue reading

Posted in Code-O-Matic, Graphic-O-Matic. Tagged with , , .

How-To: Python Scripting in Blender: (3) Interaktion mit mySQL Datenbanken

Dieses Tutorial wird sich nicht so sehr mit Blender als vielmehr mit der Anbindung an eine Datenbank beschäftigen. Am Ende dieses Tutorials könnt ihr

  • Verbindung zu einer MySQL Datenbank aufbauen
  • SQL Request absetzen
  • Datenbanksätze handeln

Continue reading

Posted in Code-O-Matic, Graphic-O-Matic. Tagged with , , .

How-To: Python Scripting in Blender: (2) Material und Textur

Pyramide mit Textur

Pyramide mit Textur

In diesem zweiten Teil der Tutorialreihe wollen wir unsere Pyramide aus dem ersten Teil der Tutorialreihe mit Material und Textur versehen. Wir beschränken uns hier auf grundlegende Funktionen und belassen die endlosen Möglichkeiten und Spielereien dieses Themas für später. Am Ende dieses Tutorials könnt ihr

  • Lampe und Kamera setzen
  • Material erstellen und zuweisen
  • Textur erstellen und zuweisen
  • Bild laden und “zuweisen”

Continue reading

Posted in Code-O-Matic, Graphic-O-Matic. Tagged with , , .

How-To: Python Scripting in Blender: (1) 3D Objekte erstellen

das Ergebnis des Tutorials: eine Pyramide

das Ergebnis des Tutorials: eine Pyramide

Willkommen zum ersten kurzen How-To zum Python Scripting in Blender. Nachdem wir in der Einführung unsere Benutzeroberfläche vorbereitet haben, wollen wir in diesem Teil ein erstes kurzes, lauffähiges Python Script schreiben. Nach diesem Tutorial könnt ihr

  • Vertices (Punkte) nach Koordinaten setzen,
  • Vertices durch Edges (Kanten) und Faces (Seiten) verbinden,
  •  Meshes (Gitter) erzeugen und
  • Objekte erzeugen und darstellen.

Continue reading

Posted in Code-O-Matic, Graphic-O-Matic. Tagged with , , .

How-To: Python Scripting in Blender: (0) Einrichtung der Blenderoberfläche

Wenn man hobbymäßig 3D Objekte erstellen und vielleicht sogar animieren möchte, ist Blender wohl die kanonische Wahl. Es ist umfangreich, es gibt viele schöne Tutorials im Netz und dank GPL ist der ganze Spaß auch noch umsonst. Mehr kann ich dazu gar nicht sagen – ich bin dann doch eher der Programmierer als der Graphiker. Und daher kommen wir gleich zu Python – eine Programmier- / Skriptsprache, mit der man solche 3D Objekte auch durch Coding erstellen kann. Und genau darum wird es in dieser Tutorialreihe gehen :)

Standardansicht von Blender

Standardansicht von Blender

In diesem nullten (warum nicht ersten? a) Programmierer dürfen mit Null anfangen zu zählen und b) in diesem Tutorial geht es nur um das Einstellen der Blenderoberfläche, noch nicht um Python – wer Blender schon einmal gesehen hat, wird hier nichts neues lernen..) Tutorial werden wir ausgehend von den Standardeinstellungen von Blender alle Schritte erklären, um ein erstes eigenes Python Script in Blender ausführen zu lassen.

Continue reading

Posted in Code-O-Matic, Graphic-O-Matic. Tagged with , , .

How-To: Endloses Scrollen mit jQuery

Da es nur sehr wenige How-Tos im Internet gibt, welche mal eine funktionierende Variante des endloses Scrollen zeigen, bietet sich hierzu ein Tutorial geradezu an. Basierend auf http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/ habe ich eine modifizierte Variante geschrieben, welche beim Scrollen einen DIV-Container an die Seite anfügt.

Zunächst benötigt man in jedem Fall die jQuery Library, welche man direkt unter der jQuery Homepage stets in einer aktuellen Version herunterladen kann.

Vorbereitungen für die Webseite. Einerseits zunächst das Einbinden der Library in den Header. Anschließend fügen wir folgenden Codeblock ein (ebenfalls JavaScript)

var n = 9;

function pageLoad() {
	$.ajax({
		url: "getReposts.php?n="+n,
		success: function(data){
					if(data){
						var html = $.parseJSON(data);
						$("#contentwrap").append(html);
					}
				}
	});
}

Und noch folgenden Aufruf in den BODY-Tag der Webseite.

onLoad="pageLoad();"

Beim Laden der Seite wird zunächste der Content initialisiert, welcher anfangs zu sehen ist. Dies geschieht mittels Ajax-Aufruf der PHP-Datei “getReposts.php” dessen zurückgegebener Inhalt an das DIV “contentwrap” hinzugefügt wird. Nun ein Blick in die PHP-Datei

$n = $_GET["n"];
	$response = ""; 

	$page_idx = ( $n / 9 ) - 1 ;
	$from = $page_idx * 10;
	$to = 9;

	$query = "SELECT * FROM repost as A ORDER BY date DESC LIMIT ".$from.", ".$to;						
	$result = $mysql->query($query);

	while($row = mysqli_fetch_assoc($result)){										
		$response = $response . '

‘; } $mysql->close(); die(json_encode(utf8_encode($response))); exit;

Im Prinzip ist das PHP ganz simpel aufgebaut. Wir bekommen den zuvor definierten Wert “n = 9″ an die PHP-Datei übergeben. Diese verwenden wir, aufbereitet, für eine “FROM…TO”-Bedingung an die Datenbank. Die Antwort fügen wir in einem LOOP-Befehl an den $response-String. Am Ende übergeben wir den String im JSON-Format. Dies ist genau der Teil, welcher per Append-Befehl an das DIV “contentwrap” gehängt wird. So hätte wir die ersten neun Tabelleneinträge als initialien Inhalt beim Seitenaufruf. Nun zum “nachfüllen” auf der eigentlichen Webseite

$(window).scroll(function(){		
	if($(window).scrollTop() == $(document).height() - $(window).height()){
		n += 9;
		$('div#loadmore').show();
		$.ajax({
			url: "getReposts.php?n="+n,
			success: function(data){
						if(data){
							var html = $.parseJSON(data);
							$("#contentwrap").append(html);
							$('div#loadmore').hide();
						} else {
							$('div#loadmore').html('

No more posts to show.

');
						}
					}
		});
	}
});

Sobald wir das untere Ende erreicht haben (nach dem neunten Container) wird dieses JavaScript ausgelöst. Es erhöht die Variable “n=9″ um weitere 9 und sendet die gleiche Anfrage erneut an die PHP-Datei. Die PHP-Datei führt genau den gleichen SELECT aus, aber dieses mal mit der entsprechenden “FROM…TO”-Bedingung für die nachfolgenden 9 Einträge. Und das war es auch schon. Das DIV “loadmore” etc. wurde aus der zu Anfang genannten Quelle übernommen.

Posted in Code-O-Matic. Tagged with , .