TOOLBOX INTERACTION DESIGN http://ifdblog.org/toolbox Interactiondesign Toolbox der Fachhochschule Magdeburg-Stendal Mon, 02 Jul 2012 16:50:35 +0000 de-DE hourly 1 http://wordpress.org/?v=3.4.1 Internet der Dinge http://ifdblog.org/toolbox/?p=2357 http://ifdblog.org/toolbox/?p=2357#comments Mon, 02 Jul 2012 16:45:59 +0000 admin http://ifdblog.org/toolbox/?p=2357 Ethernet-Board

Folgendes Szenario wurde bearbeitet:
Der Arduino befindet sich in einem Zimmer und ist ausgestattet mit einem Temperatursensor und einem Servomotor. Der Servomotor ist gekoppelt mit dem Heizungsregler. Über eine Netzadresse kann die aktuelle Temperatur bzw. der Temperaturverlauf in den letzten Stunden angezeigt werden. Ein Schieberegler ermöglicht die Steuerung der Heizung. So kann schon im vorhinein die Heizung hochgedreht werden, bevor man nach Hause kommt (wahlweise auch heruntergedreht werden, wenn das vergessen wurde).

Der Temperatursensor wurde im Beispiel mit einem Photowiderstand ersetzt, damit der Einfluss der Heizung schnell simuliert werden kann. Nachfolgend ein Schaltplan. Achtung: Bevor das Ethernet-Shield auf das Arduino-Board gesteckt wird, die MAC-Adresse vom Aufkleber ablesen.

Schaltplan mit Arduino, Ethernet-Board, Servo und Photo-Sensor

Für das Szenario gibt es nun unterschiedliche, nachfolgend beschriebene Lösungen. Ausführliche Kommentare finden sich in den einzelnen Scripten:

1. Flash: Der Arduino schreibt eine XML-Datei, aus der die
Temperaturwerte von Flash ausgelesen werden können. Über HTTP-Requests
kann der Servomotor angesteuert werden. Die Flash-Datei befindet sich dabei
nicht auf dem Arduino, sondern auf einem extra Gerät oder einem separaten
Webspace.

Flash: Flash_Arduino_XML
Arduino: Arduino_Flash_XML

2. Processing: Arduino und Processing tauschen Daten per UDP-
Verbindung aus. Processing fragt die Temperaturdaten vom Arduino ab,
kann diese visuell darstellen und sendet die Position eines
Schiebereglers an den Arduino, der entsprechend den Servomotor justiert.

Processing: Processing_Arduino_UDP
Arduino: Arduino_Processing_UDP

3. HTML: Angelehnt an das Poldi-Webserver-Tutorial kann die aktuelle
Temperatur auf einer HTML-Seite abgelesen werden. Die Regelung der
Heizung erfolgt über ein Formularfeld (Eintragen einer Zahl) und das Klicken
eines Buttons (wahlweise eine Reihe von nummerierten Buttons
ohne Formularfeld).

HTML 1: Arduino_Webserver_1
HTML 2: Arduino_Webserver_2

]]> http://ifdblog.org/toolbox/?feed=rss2&p=2357 0 Erster Artikel für Kur01 http://ifdblog.org/toolbox/?p=2197 http://ifdblog.org/toolbox/?p=2197#comments Fri, 23 Mar 2012 15:27:48 +0000 Steffi Husslein http://ifdblog.org/toolbox/?p=2197
ewqe
wefwfwe
wefc

]]> http://ifdblog.org/toolbox/?feed=rss2&p=2197 0 DragMap mit Zoom http://ifdblog.org/toolbox/?p=2079 http://ifdblog.org/toolbox/?p=2079#comments Mon, 28 Nov 2011 19:11:48 +0000 admin http://ifdblog.org/toolbox/?p=2079

Ein Kartenausschnitt lässt sich verschieben und mit dem Scrollrad der Maus zoomen.

Download: DragMapZoom

]]> http://ifdblog.org/toolbox/?feed=rss2&p=2079 0 Beispiel Bounce http://ifdblog.org/toolbox/?p=2070 http://ifdblog.org/toolbox/?p=2070#comments Mon, 28 Nov 2011 18:52:29 +0000 admin http://ifdblog.org/toolbox/?p=2070

Ein MovieClip wird als Klasse angesteuert. Dadurch lassen sich beliebig viele dieser MovieClips mit ActionScript erstellen.

Download: bounce_CS4

]]> http://ifdblog.org/toolbox/?feed=rss2&p=2070 0 jquery website animation http://ifdblog.org/toolbox/?p=2065 http://ifdblog.org/toolbox/?p=2065#comments Tue, 22 Nov 2011 11:43:55 +0000 admin http://ifdblog.org/toolbox/?p=2065 Die javascript Bibliothek jQuery bietet einige nützliche Werkzeuge zur animation und navigation einer Website an. So kann eine grosse website, ähnlich einer Karte, horizontal und vertikal zu spezifischen Punkten animiert werden. Das passende Tutorial gibt es im hier zum HERUNTERLADEN.

]]> http://ifdblog.org/toolbox/?feed=rss2&p=2065 0 interaktive 3d Websites / Papervision / Actionscript http://ifdblog.org/toolbox/?p=2056 http://ifdblog.org/toolbox/?p=2056#comments Wed, 16 Nov 2011 14:27:16 +0000 admin http://ifdblog.org/toolbox/?p=2056 3D Objekte können in einem geeigneten Web Format auch interaktiv auf einer Website platziert werden. Die Schnittstelle Papervision3D /Actionscript bietet dafür eine geeignete Möglichkeit. Die beiden Beispiele des Tutorials beinhalten eine Animationssteuerung, also auch eine Steuerung direkt per Mausbewegung.

Zum Herunterladen gibt es das Tutorial hier: papervision_3d_website Tutorial

]]> http://ifdblog.org/toolbox/?feed=rss2&p=2056 0 map throw website http://ifdblog.org/toolbox/?p=2052 http://ifdblog.org/toolbox/?p=2052#comments Wed, 02 Nov 2011 15:34:08 +0000 admin http://ifdblog.org/toolbox/?p=2052 throwing a map within a website. downlad the snippet:

throwMap

]]> http://ifdblog.org/toolbox/?feed=rss2&p=2052 0 Video Flash Browser System http://ifdblog.org/toolbox/?p=2049 http://ifdblog.org/toolbox/?p=2049#comments Wed, 02 Nov 2011 15:29:52 +0000 admin http://ifdblog.org/toolbox/?p=2049 Video Flash Browser System! Download the full source here:
video_flash_browser

]]> http://ifdblog.org/toolbox/?feed=rss2&p=2049 0 Hyperlinks, Menüs und Anker http://ifdblog.org/toolbox/?p=2038 http://ifdblog.org/toolbox/?p=2038#comments Wed, 26 Oct 2011 10:26:15 +0000 admin http://ifdblog.org/toolbox/?p=2038
Das fertige Tutorial kann man hier elektronisch erhalten:menu_simple.zip


Mit nur ein wenig Modifikationen zum ersten Tutorial lässt sich eine recht effektive Navigation erstellen, die es hier zum Herunterladen gibt: menu_fixed.zip

]]> http://ifdblog.org/toolbox/?feed=rss2&p=2038 0 Headline einbetten – cufon http://ifdblog.org/toolbox/?p=2028 http://ifdblog.org/toolbox/?p=2028#comments Wed, 19 Oct 2011 17:28:50 +0000 admin http://ifdblog.org/toolbox/?p=2028 Die Verwendung von eingebetteten Schriftarten sind ein gestalterisches Nonpulsultra. Cufon ist einer der Anbieter für dieses System: http://cufon.shoqolate.com/generate/

Ein kleines Tutorial zum Thema kann man hier herunterladen!

]]> http://ifdblog.org/toolbox/?feed=rss2&p=2028 0