<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Sascha Wolter &#187; Silverlight</title>
	<atom:link href="http://www.wolter.biz/tag/silverlight/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.wolter.biz</link>
	<description>Consultant for Rich Applications and User Experience. Expert for AIR, Flash, Flex and Silverlight.</description>
	<lastBuildDate>Sun, 15 Aug 2010 11:27:31 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Buchtipp: 2500 Gramm WPF (und ein bisschen Silverlight)</title>
		<link>http://www.wolter.biz/2010/08/15/buchtipp-2500-gramm-wpf-und-ein-bisschen-silverlight/</link>
		<comments>http://www.wolter.biz/2010/08/15/buchtipp-2500-gramm-wpf-und-ein-bisschen-silverlight/#comments</comments>
		<pubDate>Sun, 15 Aug 2010 11:26:25 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[Books]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[WPF]]></category>
		<category><![CDATA[XAML]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=773</guid>
		<description><![CDATA[Microsoft propagiert die Windows Presentation Foundation (kurz WPF) als Standard f&#252;r Anwendungsoberfl&#228;chen. Au&#223;erdem ist WPF nicht nur ein zentraler Bestandteil des .NET-Kontinuums sondern gilt auch noch als Mutter allen Silverlights: Der Codename von Silverlight war nicht umsonst WPF/E (E f&#252;r Embedded). Und ich kann mich noch gut daran erinnern, dass ich zum Lernen von Silverlight [...]]]></description>
			<content:encoded><![CDATA[<p>Microsoft propagiert die <strong>Windows Presentation Foundation</strong> (kurz WPF) als Standard f&uuml;r Anwendungsoberfl&auml;chen. Au&szlig;erdem ist WPF nicht nur ein zentraler Bestandteil des .NET-Kontinuums sondern gilt auch noch als Mutter allen Silverlights: <strong>Der Codename von Silverlight war nicht umsonst WPF/E (E f&uuml;r Embedded)</strong>. Und ich kann mich noch gut daran erinnern, dass ich zum Lernen von Silverlight mangels entsprechender Quellen noch auf WPF-Literatur  zur&uuml;ckgreifen musste (was mittlerweile aber gl&uuml;cklicherweise nicht mehr notwendig ist).</p>
<p>Doch erst k&uuml;rzlich musste ich mal wieder WPF machen und daf&uuml;r mein Wissen wieder auf den aktuellen Stand bringen. Da kam mir <a href="http://www.amazon.de/exec/obidos/ASIN/3836215381/wolter-21">„Das umfassende Handbuch“ zu WPF von Thomas Claudius Huber</a> sehr gelegen: Auch weil ich den Autor ohnehin sch&auml;tze und bereits einen hervorragenden Vortrag von ihm gesehen habe. Als das Buch dann eintraf, war der Schock gro&szlig;: Rund 2500 Gramm Papier wurden geliefert. Doch ich hatte nur wenige Tage Zeit, diese fast 1500 Seiten zur Vorbereitung auf meinen WPF-Einsatz aufzuarbeiten. Bereits nach den ersten Seiten entspannte ich mich aber wieder.  Das Buch liest sich einfach hervorragend (mal abgesehen von den physischen Problemen mit einem 2,5kg Buch –  ganz besonders im Zug oder Flugzeug eine eher leidvolle Erfahrung). Es hat eindeutig Vorteile, ein gutes Original in der Sprache des Autors und keine Sinn entstellende &Uuml;bersetzung zu lesen.</p>
<p>Der Inhalt ist rund und in der Tat sehr umfassend: Von allgemeinen Erkl&auml;rungen der WPF &uuml;ber XAML, Layout, Dependency Properties, Commands und Datenbindung geht es bis hin zu 3D-Grafik, Medienintegration, Text und Drucken. Auch XAML Browser Applications (XBAP) und Interoperabilit&auml;t mit Windows Forms werden behandelt. Dabei ist der Inhalt nie zu grundlegend und somit sowohl f&uuml;r ambitionierte Ein- und Umsteiger als auch f&uuml;r Fortgeschrittene geeignet, die ihr Wissen sortieren und L&uuml;cken schlie&szlig;en wollen.</p>
<p>Dem Autor gelingt es gut, einfach Themen auch einfach und auf den Punkt zu erkl&auml;ren. Einzig bei komplizierten Sachverhalten w&uuml;rde ich mir ein wenig einfachere Erl&auml;uterungen untermalt von grafischen Darstellungen (Diagramme und Abbildungen) w&uuml;nschen: Ein Bild sagt einfache mehr als tausend Worte. Au&szlig;erdem h&auml;tte sich dadurch die be&auml;ngstigende Textmenge vielleicht ein wenig reduzieren lassen. Der <a href="http://www.amazon.de/exec/obidos/ASIN/0672331195/wolter-21">WPF-Klassiker von Adam Nathan</a> (ich kenne jedoch nur die Ausgabe zu WPF 3.0) macht das unterst&uuml;tzt durch mehrfarbigen Druck besser, beschr&auml;nkt sich mit rund 800 Seiten aber auch nur auf das Wesentliche.</p>
<p>Ich kann Thomas Buch jedem WPF-Interessierten und -Entwickler empfehlen. Ganz nebenbei habe ich N&uuml;tzliches &uuml;ber die Konzepte von Silverlight erfahren und die Unterschiede zwischen WPF und Silverlight kennen gelernt. Jetzt bin ich sehr auf <a href="http://www.amazon.de/exec/obidos/ASIN/383621413X/wolter-21">Thomas neues Buchprojekt zu Silverlight</a> gespannt.</p>
<p>„Windows Presentation Foundation: Das umfassende Handbuch“<br />
Autor: Thomas Claudius Huber<br />
Preis: ca. Euro 50,-<br />
ISBN: 3836215381<br />
Erscheinungsdatum: Galileo Computing, 28. Juni 2010<br />
Link: <a href="http://www.amazon.de/exec/obidos/ASIN/3836215381/wolter-21">http://www.amazon.de/exec/obidos/ASIN/3836215381/wolter-21</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/08/15/buchtipp-2500-gramm-wpf-und-ein-bisschen-silverlight/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Next Generation User Interfaces How-To: Interoperabilit&#228;t</title>
		<link>http://www.wolter.biz/2010/07/10/next-generation-user-interfaces-how-to-interoperabilitaet/</link>
		<comments>http://www.wolter.biz/2010/07/10/next-generation-user-interfaces-how-to-interoperabilitaet/#comments</comments>
		<pubDate>Sat, 10 Jul 2010 08:00:25 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Lego Mindstorms]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[Wii]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=766</guid>
		<description><![CDATA[Die Ein- und Ausgabem&#246;glichkeiten Web-basierter Technologien sind beinahe unersch&#246;pflich, dennoch gibt es Grenzen – sp&#228;testens wenn man den Rechner verlassen und die Au&#223;enwelt kontaktieren m&#246;chte. Gl&#252;cklicherweise ist hier Abhilfe in Form von Arduino (http://www.arduino.cc/) und Co. verf&#252;gbar. Das Arduino-Board erlaubt die analoge und digatale Ein- und Ausgabe per serieller Schnittstelle, um beispielsweise Sensoren auszulesen oder [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image9.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb9.png" width="244" height="185" /></a> Die Ein- und Ausgabem&ouml;glichkeiten Web-basierter Technologien sind beinahe unersch&ouml;pflich, dennoch gibt es Grenzen – sp&auml;testens wenn man den Rechner verlassen und die Au&szlig;enwelt kontaktieren m&ouml;chte. Gl&uuml;cklicherweise ist hier Abhilfe in Form von Arduino (<a href="http://www.arduino.cc/">http://www.arduino.cc/</a>) und Co. verf&uuml;gbar. Das Arduino-Board erlaubt die analoge und digatale Ein- und Ausgabe per serieller Schnittstelle, um beispielsweise Sensoren auszulesen oder Motoren zu steuern. Browser-basierten Anwendungen ist es aber normalerweise nicht erlaubt, aus ihrer Sandbox heraus auf diese Schnittstelle zugreifen. Hier kommt dann ein spezieller Server zum Einsatz, der die Daten mit der seriellen Schnittstelle austauscht und dann wie ein Webserver per http oder noch etwas direkter per Socket-Verbindung zur Verf&uuml;gung stellt. F&uuml;r Arduion und Flash gibt es beispielsweise as3glue (<a href="http://code.google.com/p/as3glue/">http://code.google.com/p/as3glue/</a>).</p>
<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image10.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb10.png" width="244" height="184" /></a> Es gibt viele Elektronik- oder Robotorbauk&auml;sten mit denen &auml;hnliches erreicht werden kann, etwa Lego Mindstorms (<a href="http://mindstorms.lego.com/">http://mindstorms.lego.com/</a>). Die einfache Steuerung eines Lego Roboters gelingt dank der Nxt#-Bibliothek des Niederl&auml;nders Bram Fokke, die er unter <a href="http://nxtsharp.fokke.net">http://nxtsharp.fokke.net</a> inklusive Quellcode zum Download anbietet. Diese Bibliothek kommuniziert direkt per Bluetooth mit dem Roboter. Per WCF (Windows Communication Foundation) kann dann mit Hilfe dieser Bibliothek ein Dienst zum Senden von Nachrichten an den Roboter angeboten werden.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
</pre></td><td class="code"><pre class="c" style="font-family:monospace;">using System<span style="color: #339933;">;</span>
using System.<span style="color: #202020;">ServiceModel</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">ServiceModel</span>.<span style="color: #202020;">Activation</span><span style="color: #339933;">;</span>
using Bram.<span style="color: #202020;">NxtSharp</span><span style="color: #339933;">;</span>
&nbsp;
namespace SilverNXT.<span style="color: #202020;">Web</span>
<span style="color: #009900;">&#123;</span>
    <span style="color: #009900;">&#91;</span>ServiceContract<span style="color: #009900;">&#40;</span>Namespace <span style="color: #339933;">=</span> <span style="color: #339933;">&amp;</span>quot<span style="color: #339933;">;&amp;</span>quot<span style="color: #339933;">;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#93;</span>
    <span style="color: #009900;">&#91;</span>AspNetCompatibilityRequirements<span style="color: #009900;">&#40;</span>RequirementsMode <span style="color: #339933;">=</span> AspNetCompatibilityRequirementsMode.<span style="color: #202020;">Allowed</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#93;</span>
    public class MindstormsService
    <span style="color: #009900;">&#123;</span>
&nbsp;
        <span style="color: #666666; font-style: italic;">// Statisch, da es nur einen Robotor für alle gibt</span>
        <span style="color: #993333;">static</span> private NxtBrick brick<span style="color: #339933;">;</span>
        <span style="color: #993333;">static</span> private NxtTankDrive tankDrive<span style="color: #339933;">;</span>
&nbsp;
        public MindstormsService<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
&nbsp;
            <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>brick <span style="color: #339933;">==</span> <span style="color: #000000; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
                <span style="color: #666666; font-style: italic;">// Erzeuge Stellvertreter des NXT-Steins, der im Roboter verbaut ist</span>
                brick <span style="color: #339933;">=</span> new NxtBrick<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
                <span style="color: #666666; font-style: italic;">// Wichtig: Setze den Namen der Kommunikationsschnittstelle</span>
                brick.<span style="color: #202020;">COMPortName</span> <span style="color: #339933;">=</span> <span style="color: #339933;">&amp;</span>quot<span style="color: #339933;">;</span>Com11<span style="color: #339933;">&amp;</span>quot<span style="color: #339933;">;;</span>
&nbsp;
                <span style="color: #666666; font-style: italic;">// Konfiguriere NXT-Stein mit Motoren und ggf. Sensoren</span>
                NxtMotor motorB <span style="color: #339933;">=</span> new NxtMotor<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                NxtMotor motorC <span style="color: #339933;">=</span> new NxtMotor<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                motorB.<span style="color: #202020;">Brick</span> <span style="color: #339933;">=</span> brick<span style="color: #339933;">;</span>
                brick.<span style="color: #202020;">AttachMotor</span><span style="color: #009900;">&#40;</span>NxtMotorPort.<span style="color: #202020;">PortB</span><span style="color: #339933;">,</span> motorB<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                motorC.<span style="color: #202020;">Brick</span> <span style="color: #339933;">=</span> brick<span style="color: #339933;">;</span>
                brick.<span style="color: #202020;">AttachMotor</span><span style="color: #009900;">&#40;</span>NxtMotorPort.<span style="color: #202020;">PortC</span><span style="color: #339933;">,</span> motorC<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
                <span style="color: #666666; font-style: italic;">// Erzeuge Hilfsobjekt zur Steuerung des Robotors ähnlich einem Panzer</span>
                tankDrive <span style="color: #339933;">=</span> new NxtTankDrive<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                tankDrive.<span style="color: #202020;">Brick</span> <span style="color: #339933;">=</span> brick<span style="color: #339933;">;</span>
                tankDrive.<span style="color: #202020;">Motor1</span> <span style="color: #339933;">=</span> motorB<span style="color: #339933;">;</span>
                tankDrive.<span style="color: #202020;">Motor2</span> <span style="color: #339933;">=</span> motorC<span style="color: #339933;">;</span>
&nbsp;
                <span style="color: #666666; font-style: italic;">// Stelle Verbindung mit dem NXT-Stein des Robotors her</span>
                brick.<span style="color: #202020;">Connect</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #009900;">&#91;</span>OperationContract<span style="color: #009900;">&#93;</span>
        public <span style="color: #993333;">void</span> Run<span style="color: #009900;">&#40;</span>SByte power<span style="color: #339933;">,</span> ushort distance<span style="color: #339933;">,</span> SByte turnRation<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            tankDrive.<span style="color: #202020;">Move</span><span style="color: #009900;">&#40;</span>power<span style="color: #339933;">,</span> distance<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #009900;">&#91;</span>OperationContract<span style="color: #009900;">&#93;</span>
        public <span style="color: #993333;">void</span> Coast<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            tankDrive.<span style="color: #202020;">Coast</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>F&uuml;r die Nutzung in Silverlight sollte dieser Dienst im Silverlight Projekt als Service Reference hinzugef&uuml;gt werden. Visual Studio erzeugt den notwendigen Code automatisch, so dass der Dienst mit den folgenden Zeilen konsumiert werden kann.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
</pre></td><td class="code"><pre class="c" style="font-family:monospace;">using System<span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Controls</span><span style="color: #339933;">;</span>
using SilverNXT.<span style="color: #202020;">MindstormsServiceReference</span><span style="color: #339933;">;</span>
&nbsp;
namespace SilverNXT
<span style="color: #009900;">&#123;</span>
    public partial class MainPage <span style="color: #339933;">:</span> UserControl
    <span style="color: #009900;">&#123;</span>
        MindstormsServiceClient client <span style="color: #339933;">=</span> new MindstormsServiceClient<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        public MainPage<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            InitializeComponent<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        private <span style="color: #993333;">void</span> runButton_Click<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> RoutedEventArgs e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            client.<span style="color: #202020;">RunCompleted</span> <span style="color: #339933;">+=</span> new EventHandler<span style="color: #339933;">&lt;</span>system.<span style="color: #202020;">componentmodel</span>.<span style="color: #202020;">asynccompletedeventargs</span><span style="color: #339933;">&gt;</span><span style="color: #009900;">&#40;</span>client_AsyncCompleted<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            client.<span style="color: #202020;">RunAsync</span><span style="color: #009900;">&#40;</span><span style="color: #0000dd;">50</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">0</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">100</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        private <span style="color: #993333;">void</span> coastButton_Click<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> RoutedEventArgs e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            client.<span style="color: #202020;">CoastCompleted</span> <span style="color: #339933;">+=</span> new EventHandler<span style="color: #339933;">&lt;</span>system.<span style="color: #202020;">componentmodel</span>.<span style="color: #202020;">asynccompletedeventargs</span><span style="color: #339933;">&gt;</span><span style="color: #009900;">&#40;</span>client_AsyncCompleted<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            client.<span style="color: #202020;">CoastAsync</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #993333;">void</span> client_AsyncCompleted<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> System.<span style="color: #202020;">ComponentModel</span>.<span style="color: #202020;">AsyncCompletedEventArgs</span> e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// nothing</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

</p>
<blockquote>
<p><a href="http://vimeo.com/channels/weave#5277603"><img style="border-bottom: 0px; border-left: 0px; display: inline; margin-left: 0px; border-top: 0px; margin-right: 0px; border-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image11.png" width="244" height="184" /></a> <a href="http://vimeo.com/channels/weave#5277603">Bierzapfen am Computer“Wii Draught Masters” f&uuml;r Stella Artois.</a></p>
</blockquote>
<p>&#160;</p>
<p>&#160;</p>
<p>&#160;</p>
<p>&#160;</p>
<p>Verschiedene Quellen datieren den Joystick auf ca. 1940. Dort wird dieser erstmalig im Zusammenhang mit der Raketensteuerung erw&auml;hnt. Der Joystick sowie dessen Nachfolger wie Gamepad und die Wii Remote lassen sich ebenfalls f&uuml;r Benutzerinteraktionen verwenden. Dabei erfreuen sich gerade die Eingabeger&auml;te der seit 2006 vertriebenen Wii gro&szlig;er Beliebtheit: Darunter seit ca. 2008 das Balance Board und seit ca. 2009 das Guitar Hero Schlagzeug. Und da diese per Bluetooth arbeiten, ist die Kombination mit anderen Technologien durchaus m&ouml;glich. Die gr&ouml;&szlig;te Herausforderung ist, dass nicht jede Bluetooth-Umgebung harmoniert; Gute Erfahrungen haben wir &uuml;brigens mit den Bluetooth-Treiber von BlueSoleil (<a href="http://www.bluesoleil.com/">http://www.bluesoleil.com/</a>) gemacht.</p>
<p>&Auml;hnlich wie schon bei dem Lego Mindstorms Robotor gibt es auch hier eine Bibliothek zur Nutzung in eigenen Projekten namens WiiMoteLib (<a href="http://wiimotelib.codeplex.com/">http://wiimotelib.codeplex.com/</a>) in .NET basierten Projekten, etwa mit WPF.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
</pre></td><td class="code"><pre class="c" style="font-family:monospace;">using System<span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span><span style="color: #339933;">;</span>
using WiimoteLib<span style="color: #339933;">;</span>
&nbsp;
namespace WiiWPF
<span style="color: #009900;">&#123;</span>
    <span style="color: #666666; font-style: italic;">/// &lt;summary&gt;</span>
    <span style="color: #666666; font-style: italic;">/// Interaction logic for MainWindow.xaml</span>
    <span style="color: #666666; font-style: italic;">/// &lt;/summary&gt;</span>
    public partial class MainWindow <span style="color: #339933;">:</span> Window
    <span style="color: #009900;">&#123;</span>
        public MainWindow<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            InitializeComponent<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            Loaded <span style="color: #339933;">+=</span> new RoutedEventHandler<span style="color: #009900;">&#40;</span>MainWindow_Loaded<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #993333;">void</span> MainWindow_Loaded<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> RoutedEventArgs e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            WiimoteCollection mWC <span style="color: #339933;">=</span> new WiimoteCollection<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            try
            <span style="color: #009900;">&#123;</span>
                <span style="color: #666666; font-style: italic;">// Finde alle angeschlossenen Wii Remotes</span>
                mWC.<span style="color: #202020;">FindAllWiimotes</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #666666; font-style: italic;">// Verbinde mit der ersten gefundenen Wii Remote</span>
                Wiimote wm <span style="color: #339933;">=</span> mWC<span style="color: #009900;">&#91;</span><span style="color: #0000dd;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
                wm.<span style="color: #202020;">Connect</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #666666; font-style: italic;">// Schalte die Vibration an der Wii Remote ein</span>
                wm.<span style="color: #202020;">SetRumble</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
            catch <span style="color: #009900;">&#40;</span>Exception ex<span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
                MessageBox.<span style="color: #202020;">Show</span><span style="color: #009900;">&#40;</span>ex.<span style="color: #202020;">Message</span><span style="color: #339933;">,</span> <span style="color: #339933;">&amp;</span>quot<span style="color: #339933;">;</span>Wiimote error<span style="color: #339933;">&amp;</span>quot<span style="color: #339933;">;,</span> MessageBoxButton.<span style="color: #202020;">OK</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Kombiniert mit einem Socket-Server k&ouml;nnen so die Eingabeger&auml;te der Wii Technologien wie Flash und Silverlight angeboten werden – genau das &uuml;bernimmt im Falle von Flash das Projekt WiiFlash von Joa Ebert und Thibault Imbert (<a href="http://code.google.com/p/wiiflash/">http://code.google.com/p/wiiflash/</a>).</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/07/10/next-generation-user-interfaces-how-to-interoperabilitaet/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Next Generation User Interfaces How-To: Gesten</title>
		<link>http://www.wolter.biz/2010/07/05/next-generation-user-interfaces-how-to-gesten/</link>
		<comments>http://www.wolter.biz/2010/07/05/next-generation-user-interfaces-how-to-gesten/#comments</comments>
		<pubDate>Mon, 05 Jul 2010 10:01:20 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Multi-Touch]]></category>
		<category><![CDATA[Silverlight]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=754</guid>
		<description><![CDATA[Der „X-Y-Positions-Anzeiger f&#252;r ein Bildschirmsystem“, kurz Maus, ist das Standardeingabeger&#228;t f&#252;r grafische Benutzungsschnittstellen (GUI) geworden. Doch dabei kann mit der Maus weit mehr erreicht werden, als einfach nur das Ziehen und Klicken in Anwendungen. Die Kombination der verschiedenen Maustastenzust&#228;nde und der Mausposition erlaubt ein Benutzererlebnis &#228;hnlich zur Wii ganz ohne weitere Hardware (weiter unten mehr [...]]]></description>
			<content:encoded><![CDATA[<p>Der „X-Y-Positions-Anzeiger f&uuml;r ein Bildschirmsystem“, kurz Maus, ist das Standardeingabeger&auml;t f&uuml;r grafische Benutzungsschnittstellen (GUI) geworden. Doch dabei kann mit der Maus weit mehr erreicht werden, als einfach nur das Ziehen und Klicken in Anwendungen. Die Kombination der verschiedenen Maustastenzust&auml;nde und der Mausposition erlaubt ein Benutzererlebnis &auml;hnlich zur Wii ganz ohne weitere Hardware (weiter unten mehr zur Wii).</p>
<blockquote><p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image3.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb3.png" width="244" height="164" /></a> Einfache Maus-Interaktionen wie Dr&uuml;cken, Bewegen und Loslassen der Maus ergeben in Kombination nicht nur Benutzereingaben wie „Drag and Drop“ sondern k&ouml;nnen auch als Geste f&uuml;r das Durchschneiden eines Objektes am Bildschirm dienen. F&uuml;r die Flash-Welt liefert der D&uuml;sseldorfer David Ochmann unter <a href="http://davidochmann.de/#/info?p=462">http://davidochmann.de/#/info?p=462</a> eine Bibliothek namens DoGestures f&uuml;r ActionScript 2 und 3, die das Verwenden von <b>Mausgesten</b> erleichtert.</p>
</blockquote>
<p>Zur Nutzung von DoGesture in Flash muss dessen Klassenpfad erst einmal verf&uuml;gbar gemacht werden. Dies geschieht &uuml;ber das Men&uuml; „Datei -&gt; Einstellungen f&uuml;r das Ver&ouml;ffentlichen“, dann im Register Flash &uuml;ber die Einstellungen f&uuml;r ActionScript. Dort wird der Quellpfad hinzugef&uuml;gt.</p>
<p>Als n&auml;chstes wird nur noch der folgende Code ben&ouml;tigt, um die Klassen per Import bekannt zu machen, die Geste zu erzeugen und auf deren Ereignis zu warten sowie eine passende Ereignisbehandlung durchzuf&uuml;hren:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
</pre></td><td class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">// Mache Klassen verfügbar</span>
<span style="color: #0066CC;">import</span> de.<span style="color: #006600;">davidochmann</span>.<span style="color: #006600;">utilities</span>.<span style="color: #006600;">dogesture</span>.<span style="color: #006600;">DoGesture</span>;
<span style="color: #0066CC;">import</span> de.<span style="color: #006600;">davidochmann</span>.<span style="color: #006600;">utilities</span>.<span style="color: #006600;">dogesture</span>.<span style="color: #006600;">events</span>.<span style="color: #006600;">GestureEvent</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// Erzeuge Geste (der ausführliche Weg)</span>
<span style="color: #000000; font-weight: bold;">var</span> movedown:DoGesture = <span style="color: #000000; font-weight: bold;">new</span> DoGesture<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">stage</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// Lausche dem Ereignis, dass die Geste stattfand</span>
movedown.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>GestureEvent.<span style="color: #006600;">GESTURE_COMPLETE</span>, movedownCompleteHandler<span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">// Wie lange darf das Ausführen der Geste dauern</span>
movedown.<span style="color: #006600;">setTimeout</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1000</span><span style="color: #66cc66;">&#41;</span>; 
<span style="color: #808080; font-style: italic;">// Definiere die notwendigen Bewegungen für die Geste</span>
movedown.<span style="color: #0066CC;">add</span><span style="color: #66cc66;">&#40;</span> <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">50</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">// Starte das Warten auf die Geste</span>
movedown.<span style="color: #0066CC;">start</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; 
&nbsp;
<span style="color: #808080; font-style: italic;">// Ereignismethode</span>
<span style="color: #000000; font-weight: bold;">function</span> movedownCompleteHandler<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">e</span>:GestureEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #808080; font-style: italic;">// Was soll nun passieren...</span>
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&amp;</span>quot;Geste wurde durchgeführt<span style="color: #66cc66;">!&amp;</span>quot;<span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<blockquote>
<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image4.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb4.png" width="244" height="173" /></a> <a href="http://www.microsoft.com/surface/" target="_blank">Microsoft Surface</a> ist ein Tisch aus dem Jahre 2007. Er zeichnet sich durch eine ber&uuml;hrungsempfindliche Oberfl&auml;che aus, der u. a. per Mulit-Touch und durch mehrere Nutzer gleichzeitig bedient werden kann.</p>
</blockquote>
<p>Der Maus droht seit ihrer Erfindung 1 963 durch Douglas C. Engelbart und William English Konkurrenz durch die Eingabe mit dem Finger oder anderen K&ouml;rperteilen. Im Falle von Single-Touch, dient der eine Finger in der Tat auch meist eher als Mausersatz und das sogar mit ganz massiven Nachteilen: Der Finger verdeckt die Informationen am Bildschirm und f&uuml;hrt bei der Arbeit an senkrechten Fl&auml;chen zu schnell erm&uuml;denden Armen – &auml;hnlich wie bei der Arbeit an einer Schultafel f&uuml;hrt.</p>
<p>Sobald mehrere Ber&uuml;hrungspunkte m&ouml;glich sind, lassen sich neue intuitive Gesten jenseits der Mausbedienung formulieren. Bekannt sind das Drehen und Skalieren von Inhalten mit zwei Fingern.</p>
<p>Silverlight bietet bereits seit Version 3 <b>Multi-Touch</b>. Dabei beschr&auml;nkt sich Silverlight abh&auml;ngig von der Abspielplattform auf die einzelnen Ber&uuml;hrungspunkte. Gesten m&uuml;ssen selber erkannt und verarbeitet werden. Ein Beispiel inkl. Quellcode findet sich unter <a href="http://www.microsoft.com/downloads/details.aspx?displaylang=en&amp;FamilyID=4b281bde-9b01-4890-b3d4-b3b45ca2c2e4">http://www.microsoft.com/downloads/details.aspx?displaylang=en&amp;FamilyID=4b281bde-9b01-4890-b3d4-b3b45ca2c2e4</a>.</p>
<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image5.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb5.png" width="244" height="184" /></a> F&uuml;r eine einfache Touch-Anwednung in Silverlight ben&ouml;tigen wir ein beliebiges sichtbares Objekt, dass in diesem Beispiel mit monster benannt ist. Alles Weitere geschieht dann in der Code-Behind-Datei. Als erstes wird dort ein Transofrmations-Objekt f&uuml;r die Verschiebung des Monsters angelegt und das Ereignis f&uuml;r Ber&uuml;hrungen angemeldet (Touch.FrameReported). In der Ereignismethode wird ab nun bei jedem Touch-Ereignis das Monster genau zu der Position der Ber&uuml;hrung bewegt.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
</pre></td><td class="code"><pre class="c" style="font-family:monospace;">using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Controls</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Input</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Media</span><span style="color: #339933;">;</span>
&nbsp;
namespace SilverTouch
<span style="color: #009900;">&#123;</span>
    public partial class MainPage <span style="color: #339933;">:</span> UserControl
    <span style="color: #009900;">&#123;</span>
&nbsp;
        public MainPage<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Required to initialize variables</span>
            InitializeComponent<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            Loaded <span style="color: #339933;">+=</span> new System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">RoutedEventHandler</span><span style="color: #009900;">&#40;</span>MainPage_Loaded<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        private <span style="color: #993333;">void</span> MainPage_Loaded<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">RoutedEventArgs</span> e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Erzeuge Transformationsobjekt für Verschiebung</span>
            CompositeTransform transform <span style="color: #339933;">=</span> new CompositeTransform<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            monster.<span style="color: #202020;">RenderTransform</span> <span style="color: #339933;">=</span> transform<span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #666666; font-style: italic;">// Lausche auf Touch-Ereignis</span>
            Touch.<span style="color: #202020;">FrameReported</span> <span style="color: #339933;">+=</span> new System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Input</span>.<span style="color: #202020;">TouchFrameEventHandler</span><span style="color: #009900;">&#40;</span>Touch_FrameReported<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        private <span style="color: #993333;">void</span> Touch_FrameReported<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Input</span>.<span style="color: #202020;">TouchFrameEventArgs</span> e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Ermittle Tranformationsobjekt </span>
            CompositeTransform transform <span style="color: #339933;">=</span> monster.<span style="color: #202020;">RenderTransform</span> as CompositeTransform<span style="color: #339933;">;</span>
            <span style="color: #666666; font-style: italic;">// Ermittle primären Berührungspunkt</span>
            TouchPoint tp <span style="color: #339933;">=</span> e.<span style="color: #202020;">GetPrimaryTouchPoint</span><span style="color: #009900;">&#40;</span>monster<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #666666; font-style: italic;">// Verschiebe Objekt zum Berührungspunkt</span>
            transform.<span style="color: #202020;">TranslateX</span> <span style="color: #339933;">+=</span> tp.<span style="color: #202020;">Position</span>.<span style="color: #202020;">X</span> <span style="color: #339933;">-</span> <span style="color: #009900;">&#40;</span>monster.<span style="color: #202020;">ActualWidth</span> <span style="color: #339933;">/</span> <span style="color: #0000dd;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            transform.<span style="color: #202020;">TranslateY</span> <span style="color: #339933;">+=</span> tp.<span style="color: #202020;">Position</span>.<span style="color: #202020;">Y</span> <span style="color: #339933;">-</span> <span style="color: #009900;">&#40;</span>monster.<span style="color: #202020;">ActualHeight</span> <span style="color: #339933;">/</span> <span style="color: #0000dd;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image6.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb6.png" width="244" height="149" /></a>Auf dem Windows Phone Series 7 nutzt Silverlight f&uuml;r die Oberfl&auml;chenelemente Manipulationsereignisse (u. a. ManipulationDelta). Diese teilen mit, inwiefern Skaliert oder Verschoben wurde. Um das Ereignis zu erhalten, kann in Expression Blend 4 oder Visual Studio 2010 bei einem Windows Phone Projekt ein Oberfl&auml;chenelement mit einem Manipulationsereignis versehen werden.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
</pre></td><td class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;phoneNavigation:PhoneApplicationPage</span> </span>
<span style="color: #009900;">    <span style="color: #000066;">x:Class</span>=<span style="color: #ff0000;">&quot;SilverPhone.MainPage&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns</span>=<span style="color: #ff0000;">&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:x</span>=<span style="color: #ff0000;">&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:phoneNavigation</span>=<span style="color: #ff0000;">&quot;clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:d</span>=<span style="color: #ff0000;">&quot;http://schemas.microsoft.com/expression/blend/2008&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:mc</span>=<span style="color: #ff0000;">&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">mc:Ignorable</span>=<span style="color: #ff0000;">&quot;d&quot;</span> <span style="color: #000066;">d:DesignWidth</span>=<span style="color: #ff0000;">&quot;480&quot;</span> <span style="color: #000066;">d:DesignHeight</span>=<span style="color: #ff0000;">&quot;800&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">FontFamily</span>=<span style="color: #ff0000;">&quot;{StaticResource PhoneFontFamilyNormal}&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">FontSize</span>=<span style="color: #ff0000;">&quot;{StaticResource PhoneFontSizeNormal}&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">Foreground</span>=<span style="color: #ff0000;">&quot;{StaticResource PhoneForegroundBrush}&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Grid</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;LayoutRoot&quot;</span> <span style="color: #000066;">Background</span>=<span style="color: #ff0000;">&quot;{StaticResource PhoneBackgroundBrush}&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Grid.RowDefinitions<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;RowDefinition</span> <span style="color: #000066;">Height</span>=<span style="color: #ff0000;">&quot;Auto&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;RowDefinition</span> <span style="color: #000066;">Height</span>=<span style="color: #ff0000;">&quot;*&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Grid.RowDefinitions<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
        <span style="color: #808080; font-style: italic;">&lt;!--TitleGrid is the name of the application and page title--&gt;</span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Grid</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;TitleGrid&quot;</span> <span style="color: #000066;">Grid.Row</span>=<span style="color: #ff0000;">&quot;0&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;TextBlock</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;textBlockPageTitle&quot;</span> <span style="color: #000066;">Style</span>=<span style="color: #ff0000;">&quot;{StaticResource PhoneTextPageTitle1Style}&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;Run</span> <span style="color: #000066;">Text</span>=<span style="color: #ff0000;">&quot;MY &quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span><span style="color: #000000; font-weight: bold;">&lt;Run</span> <span style="color: #000066;">Text</span>=<span style="color: #ff0000;">&quot;TOUCH &quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span><span style="color: #000000; font-weight: bold;">&lt;Run</span> <span style="color: #000066;">Text</span>=<span style="color: #ff0000;">&quot;APPLICATION&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/TextBlock<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;TextBlock</span> <span style="color: #000066;">Text</span>=<span style="color: #ff0000;">&quot;touch me&quot;</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;textBlockListTitle&quot;</span> <span style="color: #000066;">Style</span>=<span style="color: #ff0000;">&quot;{StaticResource PhoneTextPageTitle2Style}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Grid<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Grid</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;ContentGrid&quot;</span> <span style="color: #000066;">Grid.Row</span>=<span style="color: #ff0000;">&quot;1&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Image</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;monster&quot;</span> <span style="color: #000066;">ManipulationDelta</span>=<span style="color: #ff0000;">&quot;Main_ManipulationDelta&quot;</span> <span style="color: #000066;">Source</span>=<span style="color: #ff0000;">&quot;Assets/monster.png&quot;</span> <span style="color: #000066;">HorizontalAlignment</span>=<span style="color: #ff0000;">&quot;Center&quot;</span> <span style="color: #000066;">VerticalAlignment</span>=<span style="color: #ff0000;">&quot;Center&quot;</span> <span style="color: #000066;">Width</span>=<span style="color: #ff0000;">&quot;240&quot;</span> <span style="color: #000066;">Height</span>=<span style="color: #ff0000;">&quot;342&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Grid<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Grid<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/phoneNavigation:PhoneApplicationPage<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>In der zugeh&ouml;rigen Code-Behind-Datei muss dann zum einen ein Tranformationsobjekt f&uuml;r eine Skalierung oder Verschiebung angelegt und in der Ereignismethode f&uuml;r das Manipulationsereignis eine Transformation durchgef&uuml;hrt werden.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
</pre></td><td class="code"><pre class="c" style="font-family:monospace;">using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Input</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Media</span><span style="color: #339933;">;</span>
using Microsoft.<span style="color: #202020;">Phone</span>.<span style="color: #202020;">Controls</span><span style="color: #339933;">;</span>
&nbsp;
namespace SilverPhone
<span style="color: #009900;">&#123;</span>
    public partial class MainPage <span style="color: #339933;">:</span> PhoneApplicationPage
    <span style="color: #009900;">&#123;</span>
&nbsp;
        public MainPage<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Required to initialize variables</span>
            InitializeComponent<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            Loaded <span style="color: #339933;">+=</span> new System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">RoutedEventHandler</span><span style="color: #009900;">&#40;</span>MainPage_Loaded<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        private <span style="color: #993333;">void</span> MainPage_Loaded<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">RoutedEventArgs</span> e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Erzeuge Transformationsobjekt für Verschiebung</span>
            CompositeTransform transform <span style="color: #339933;">=</span> new CompositeTransform<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            monster.<span style="color: #202020;">RenderTransform</span> <span style="color: #339933;">=</span> transform<span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #666666; font-style: italic;">// Ereignismethode</span>
        private <span style="color: #993333;">void</span> Main_ManipulationDelta<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> ManipulationDeltaEventArgs e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Ermittle Tranformationsobjekt </span>
            CompositeTransform transform <span style="color: #339933;">=</span> monster.<span style="color: #202020;">RenderTransform</span> as CompositeTransform<span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #666666; font-style: italic;">// Verschiebe Objekt bzgl. der durchgeführten Manipulation</span>
            transform.<span style="color: #202020;">TranslateX</span> <span style="color: #339933;">+=</span> e.<span style="color: #202020;">DeltaManipulation</span>.<span style="color: #202020;">Translation</span>.<span style="color: #202020;">X</span><span style="color: #339933;">;</span>
            transform.<span style="color: #202020;">TranslateY</span> <span style="color: #339933;">+=</span> e.<span style="color: #202020;">DeltaManipulation</span>.<span style="color: #202020;">Translation</span>.<span style="color: #202020;">Y</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>F&uuml;r Flash griff man bisher auf Zusatzprogramme zur&uuml;ck, die die notwendigen Daten – meist per TUIO (<a href="http://www.tuio.org/">http://www.tuio.org/</a>) – direkt an Flash &uuml;bermittelten. Mit Flash Player 10.1 und AIR 2 h&auml;lt Multi-Touch nun aber auch Einzug in die Flash-Welt. Abh&auml;ngig von der Abspielplattform verstehen Flash und AIR einzelne Ber&uuml;hrungspunkte und Gesten (gerade unter Mac OS ist das noch recht eingeschr&auml;nkt, siehe auch <a href="http://www.adobe.com/devnet/flash/articles/multitouch_gestures.html">http://www.adobe.com/devnet/flash/articles/multitouch_gestures.html</a>).</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">!</span>Multitouch.<span style="color: #006600;">supportsGestureEvents</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
	Alert.<span style="color: #0066CC;">show</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&amp;</span>quot;Gesten werden nicht unterstützt<span style="color: #66cc66;">&amp;</span>quot;, <span style="color: #66cc66;">&amp;</span>quot;Hinweis<span style="color: #66cc66;">&amp;</span>quot;<span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #808080; font-style: italic;">// Stelle sicher, Gesten zu nutzen</span>
	Multitouch.<span style="color: #006600;">inputMode</span> = MultitouchInputMode.<span style="color: #006600;">GESTURE</span>;
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<p>Je nach Plattform werden unterschiedliche Gesten unterst&uuml;tzt (<code>Multitouch.supportedGestures</code>). Diese m&uuml;ssten sonst selbst aus den Ber&uuml;hrungspunkten ermittelt werden.</p>
<p>Mit dem Flex 4 SDK und AIR 2 kann jedes interaktive Oberfl&auml;chenelement Gesten nutzen. In den zugeh&ouml;rigen Ereignismethoden werden dann abschlie&szlig;end die Werte der Gesten verwendet.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
</pre></td><td class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;s:WindowedApplication</span> <span style="color: #000066;">xmlns:fx</span>=<span style="color: #ff0000;">&quot;http://ns.adobe.com/mxml/2009&quot;</span> </span>
<span style="color: #009900;">			 <span style="color: #000066;">xmlns:s</span>=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/spark&quot;</span> </span>
<span style="color: #009900;">			 <span style="color: #000066;">xmlns:mx</span>=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/mx&quot;</span></span>
<span style="color: #009900;">			 <span style="color: #000066;">creationComplete</span>=<span style="color: #ff0000;">&quot;windowedapplication_creationCompleteHandler(event)&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #339933;">&lt;![CDATA[</span>
&nbsp;
<span style="color: #339933;">			import mx.controls.Alert;</span>
<span style="color: #339933;">			import mx.events.FlexEvent;</span>
&nbsp;
<span style="color: #339933;">			protected function windowedapplication_creationCompleteHandler(event:FlexEvent):void</span>
<span style="color: #339933;">			{</span>
<span style="color: #339933;">				if (!Multitouch.supportsGestureEvents) {</span>
<span style="color: #339933;">					Alert.show(&quot;Gesten werden nicht unterstützt!&quot;, &quot;Hinweis&quot;);</span>
<span style="color: #339933;">				} else {</span>
<span style="color: #339933;">					// Stelle sicher, Gesten zu nutzen</span>
<span style="color: #339933;">					Multitouch.inputMode = MultitouchInputMode.GESTURE;</span>
<span style="color: #339933;">				}</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			protected function image_gestureZoomHandler(event:TransformGestureEvent):void</span>
<span style="color: #339933;">			{</span>
<span style="color: #339933;">				// Skaliere Objekt</span>
<span style="color: #339933;">				(event.currentTarget as InteractiveObject).scaleX *= event.scaleX;</span>
<span style="color: #339933;">				(event.currentTarget as InteractiveObject).scaleY *= event.scaleY;</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			protected function image_gesturePanHandler(event:TransformGestureEvent):void</span>
<span style="color: #339933;">			{</span>
<span style="color: #339933;">				// Verschiebe Objekt</span>
<span style="color: #339933;">				(event.currentTarget as InteractiveObject).x += event.offsetX;</span>
<span style="color: #339933;">				(event.currentTarget as InteractiveObject).y += event.offsetY;</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">			protected function image_gestureRotateHandler(event:TransformGestureEvent):void</span>
<span style="color: #339933;">			{</span>
<span style="color: #339933;">				// Drehe Objekt</span>
<span style="color: #339933;">				(event.currentTarget as InteractiveObject).rotation += event.rotation;</span>
<span style="color: #339933;">			}</span>
&nbsp;
<span style="color: #339933;">		]]&gt;</span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Image</span> <span style="color: #000066;">x</span>=<span style="color: #ff0000;">&quot;20&quot;</span> <span style="color: #000066;">y</span>=<span style="color: #ff0000;">&quot;20&quot;</span> <span style="color: #000066;">source</span>=<span style="color: #ff0000;">&quot;assets/monster.png&quot;</span> </span>
<span style="color: #009900;">			  <span style="color: #000066;">gesturePan</span>=<span style="color: #ff0000;">&quot;image_gesturePanHandler(event)&quot;</span></span>
<span style="color: #009900;">			  <span style="color: #000066;">gestureZoom</span>=<span style="color: #ff0000;">&quot;image_gestureZoomHandler(event)&quot;</span></span>
<span style="color: #009900;">			  <span style="color: #000066;">gestureRotate</span>=<span style="color: #ff0000;">&quot;image_gestureRotateHandler(event)&quot;</span></span>
<span style="color: #009900;">			  <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/s:WindowedApplication<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image7.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb7.png" width="244" height="164" /></a> Silverlight bietet seit Version 2 mit dem InkPresenter eine weitere Eingabem&ouml;glichkeit: Diesmal mit dem Stift. Der InkPresenter zeichnet die einzelnen Punkte der Stift- oder Mausbewegung auf. Sofern verf&uuml;gbar sogar drucksensitiv.</p>
</p>
<p>&#160;</p>
<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image8.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb8.png" width="244" height="184" /></a> In Expression Blend (oder auch mit Visual Studio) f&uuml;gen Sie das Steuerlement InkPresenter ein und geben diesem einen Hintergrund (Background) hinzu, da andernfalls keine Eingaben erkannt werden. Klar, dass nat&uuml;rlich auch die Gr&ouml;&szlig;en- und Positionsangaben passen m&uuml;ssen – in diesem Beispiel sind keine expliziten Angaben vorgenommen worden, da auf diese Weise die komplette Fl&auml;che ausgef&uuml;llt wird. F&uuml;r die eigentliche Aufzeichnung der Stifteingabe nutzen wir das Dr&uuml;cken der linken Maustaste (MouseLeftButtonDown), das Bewegen der Maus (MouseMove) und die Nachricht, wenn der Bezug zur Maus wieder verloren wird (LostMouseCapture). Die zugeh&ouml;rigen Ereignismethoden landen in der zugeh&ouml;rigen Code-Behind-Datei:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
</pre></td><td class="code"><pre class="c" style="font-family:monospace;">using System<span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Controls</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Documents</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Ink</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Input</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Media</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Media</span>.<span style="color: #202020;">Animation</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Shapes</span><span style="color: #339933;">;</span>
&nbsp;
namespace SilverPen
<span style="color: #009900;">&#123;</span>
	public partial class MainPage <span style="color: #339933;">:</span> UserControl
	<span style="color: #009900;">&#123;</span>
&nbsp;
		private Stroke currentStroke<span style="color: #339933;">;</span>
&nbsp;
		public MainPage<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
			<span style="color: #666666; font-style: italic;">// Required to initialize variables</span>
			InitializeComponent<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>			
		<span style="color: #009900;">&#125;</span>
&nbsp;
		private <span style="color: #993333;">void</span> inkPresenter_MouseLeftButtonDown<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Input</span>.<span style="color: #202020;">MouseButtonEventArgs</span> e<span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Starte mit der Aufzeichnung</span>
			inkPresenter.<span style="color: #202020;">CaptureMouse</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #666666; font-style: italic;">// Merke die Punkte</span>
			StylusPointCollection stylusPointCollection <span style="color: #339933;">=</span> new StylusPointCollection<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #666666; font-style: italic;">// Füge die ersten Punkte hinzu</span>
            stylusPointCollection.<span style="color: #202020;">Add</span><span style="color: #009900;">&#40;</span>e.<span style="color: #202020;">StylusDevice</span>.<span style="color: #202020;">GetStylusPoints</span><span style="color: #009900;">&#40;</span>inkPresenter<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #666666; font-style: italic;">// Erstelle aus den Punkten einen Strich</span>
			currentStroke <span style="color: #339933;">=</span> new Stroke<span style="color: #009900;">&#40;</span>stylusPointCollection<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #666666; font-style: italic;">// Zeichne den Strich (dieser wird später weiter aktualisiert)</span>
			inkPresenter.<span style="color: #202020;">Strokes</span>.<span style="color: #202020;">Add</span><span style="color: #009900;">&#40;</span>currentStroke<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		private <span style="color: #993333;">void</span> inkPresenter_LostMouseCapture<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Input</span>.<span style="color: #202020;">MouseEventArgs</span> e<span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Beende die Aufzeichnung</span>
			currentStroke <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">null</span><span style="color: #339933;">;</span>
			inkPresenter.<span style="color: #202020;">ReleaseMouseCapture</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		private <span style="color: #993333;">void</span> inkPresenter_MouseMove<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Input</span>.<span style="color: #202020;">MouseEventArgs</span> e<span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
			<span style="color: #666666; font-style: italic;">// Füge dem aktuellen Strich neue Punkte hinzu</span>
    		<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>currentStroke <span style="color: #339933;">!=</span> <span style="color: #000000; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        		currentStroke.<span style="color: #202020;">StylusPoints</span>.<span style="color: #202020;">Add</span><span style="color: #009900;">&#40;</span>e.<span style="color: #202020;">StylusDevice</span>.<span style="color: #202020;">GetStylusPoints</span><span style="color: #009900;">&#40;</span>inkPresenter<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Nat&uuml;rlich k&ouml;nnte das Aussehen des gezeichneten Striches (Stroke) &uuml;ber dessen Attribute variiert und zum Beispiel mit dem Druck des Stiftes kombiniert werden:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="c" style="font-family:monospace;">currentStroke.<span style="color: #202020;">DrawingAttributes</span>.<span style="color: #202020;">Height</span> <span style="color: #339933;">=</span> e.<span style="color: #202020;">StylusDevice</span>.<span style="color: #202020;">GetStylusPoints</span><span style="color: #009900;">&#40;</span>inkPresenter<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #0000dd;">0</span><span style="color: #009900;">&#93;</span>.<span style="color: #202020;">PressureFactor</span> <span style="color: #339933;">*</span> <span style="color: #0000dd;">100</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Wenn man das wie im Beispiel unter <a href="http://msdn.microsoft.com/en-us/magazine/cc721604.aspx#id0090072">http://msdn.microsoft.com/en-us/magazine/cc721604.aspx#id0090072</a> weitertreibt, dann ist sogar eine Handschriftenerkennung im Browser m&ouml;glich.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/07/05/next-generation-user-interfaces-how-to-gesten/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Next Generation User Interfaces How-To: Bildverarbeitung</title>
		<link>http://www.wolter.biz/2010/07/05/next-generation-user-interfaces-how-to-bildverarbeitung/</link>
		<comments>http://www.wolter.biz/2010/07/05/next-generation-user-interfaces-how-to-bildverarbeitung/#comments</comments>
		<pubDate>Mon, 05 Jul 2010 09:34:53 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Multi-Touch]]></category>
		<category><![CDATA[Silverlight]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=728</guid>
		<description><![CDATA[Ein eindrucksvolles Beispiel f&#252;r die Verarbeitung von Videodaten ist Eywriter (http://www.eyewriter.org). Hier war es das Ziel, zu m&#246;glichst geringen Kosten ein Eyetracking-System zu schaffen, dass es gel&#228;hmten Personen erlaubt, einen Computer mit den Augen zu Bedienen und so beispielsweise Texte zu verfassen oder Bilder zu malen. Sowohl Flash als auch Silverlight erlauben die Nutzung einer [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb.png" width="244" height="95" /></a> Ein eindrucksvolles Beispiel f&uuml;r die Verarbeitung von Videodaten ist Eywriter (<a href="http://www.eyewriter.org">http://www.eyewriter.org</a>). Hier war es das Ziel, zu m&ouml;glichst geringen Kosten ein Eyetracking-System zu schaffen, dass es gel&auml;hmten Personen erlaubt, einen Computer mit den Augen zu Bedienen und so beispielsweise Texte zu verfassen oder Bilder zu malen.</p>
</blockquote>
<p>Sowohl Flash als auch Silverlight erlauben die Nutzung einer Videokamera. Das gestaltet sich dabei sehr &auml;hnlich zu dem Einsatz eines Mikrofons. Im Falle von Flash erh&auml;lt man sogar wie beim Sound einen Wert zur Aktivit&auml;t. Dieser beschreibt hier aber nicht die Lautst&auml;rke sondern die Ver&auml;nderungen im Bild. Sprich: Je mehr man sich vor der Kamera bewegt, desto h&ouml;her ist der Wert.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
</pre></td><td class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> cam:<span style="color: #0066CC;">Camera</span>;
<span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">video</span>:<span style="color: #0066CC;">Video</span>;
<span style="color: #808080; font-style: italic;">// Ermittle die Standardkamera</span>
cam=<span style="color: #0066CC;">Camera</span>.<span style="color: #006600;">getCamera</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">// Erzwinge die Verarbeitung durch den Flash Player</span>
<span style="color: #0066CC;">video</span> = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">Video</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #0066CC;">video</span>.<span style="color: #006600;">attachCamera</span><span style="color: #66cc66;">&#40;</span>cam<span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">// Überprüfe bei jedem &amp;quot;Redraw&amp;quot; des Bildschirms...</span>
addEventListener<span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">ENTER_FRAME</span>, enterFrameHandler<span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// ...die Aktivität vor der Kamera...</span>
<span style="color: #000000; font-weight: bold;">function</span> enterFrameHandler<span style="color: #66cc66;">&#40;</span>event:Event<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span>cam.<span style="color: #0066CC;">activityLevel</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #808080; font-style: italic;">// ...und zeichne eine Linie abhängig vom Wert!</span>
	graphics.<span style="color: #0066CC;">lineStyle</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>;
	graphics.<span style="color: #0066CC;">lineTo</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">500</span>-x,<span style="color: #cc66cc;">500</span>-cam.<span style="color: #0066CC;">activityLevel</span><span style="color: #66cc66;">*</span><span style="color: #cc66cc;">4</span><span style="color: #66cc66;">&#41;</span>;
	x--;
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<blockquote>
<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image1.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb1.png" width="244" height="158" /></a> Nat&uuml;rlich kann man noch einen Schritt weitergehen und die Bildinformationen auswerten. &Auml;hnlich wie bei Sonys EyeToy (<a href="http://www.eyetoy.com/">http://www.eyetoy.com/</a>) aus dem Jahr 2003 l&auml;sst sich so ermitteln, welche Gesten jemand vor der Kamera durchf&uuml;hrt. Am einfachsten geht dies, indem die Anwendung auf spezielle Farbwerte – beispielsweise dem Farbton der Hand – reagiert.</p>
</blockquote>
<blockquote>
<p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image2.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="image" border="0" alt="image" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/07/image_thumb2.png" width="244" height="165" /></a> Einen Schritt weiter geht Microsoft bei dem Project Natal, indem dort auch Tiefenmessung per Infrarot zum Einsatz kommen soll (<a href="http://www.xbox.com/en-US/live/projectnatal/">http://www.xbox.com/en-US/live/projectnatal/</a>). Project Natal befindet sich aktuell noch in der Entwicklung und soll zu Weihnachten 2010 verf&uuml;gbar sein. Speziell f&uuml;r dieses Projekt hat Microsoft &uuml;brigens Johnny Chung Lee eingestellt, der durch seine Experimente mit der Wii bekannt geworden ist (<a href="http://johnnylee.net/projects/wii/">http://johnnylee.net/projects/wii/</a>), darunter ein preiswert umsetzbares Finger- und Headtracking sowie ein Multi-Touch Whiteboard.</p>
</blockquote>
<p>Eine einfachere Art der Bilderkennung kommt h&auml;ufig bei Augmented Reality zum Einsatz (<a href="http://saqoosha.net/en/flartoolkit/start-up-guide/">http://saqoosha.net/en/flartoolkit/start-up-guide/</a> ). Hier wird ein in der Regel aus rechteckigen Bl&ouml;cken aufgebautes Symbol in die Kamera gehalten und dessen Lage im Raum dient dann zur Steuerung eines Gegenstandes im Computer. Diese Form der erweiterten Realit&auml;t basiert urspr&uuml;nglich auf dem ARToolKit von <a href="http://en.wikipedia.org/w/index.php?title=Hirokazu_Kato&amp;action=edit&amp;redlink=1">Hirokazu Kato</a> aus dem Jahre 1999 (<a href="http://sourceforge.net/projects/artoolkit/">http://sourceforge.net/projects/artoolkit/</a>). Die Portierung f&uuml;r ActionScript 3 nennt sich FLARToolKit (<a href="http://www.libspark.org/wiki/saqoosha/FLARToolKit/en">http://www.libspark.org/wiki/saqoosha/FLARToolKit/en</a>), die f&uuml;r Silverlight SLARToolkit (<a href="http://slartoolkit.codeplex.com/">http://slartoolkit.codeplex.com/</a>).</p>
<p>F&uuml;r das Lesen eines Barcodes gibt es ebenfalls bereits fertige Bibliotheken wie die von Bernd Engelbrecht unter <a href="http://www.codeproject.com/KB/graphics/BarcodeImaging3.aspx%20f&uuml;r%20.NET">http://www.codeproject.com/KB/graphics/BarcodeImaging3.aspx</a>. F&uuml;r einen eigenen Barcode-Scanner ist eine Schaltfl&auml;che zum Start der Videoaufzeichnung notwendig.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;UserControl</span> <span style="color: #000066;">x:Class</span>=<span style="color: #ff0000;">&quot;SilverScanner.MainPage&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns</span>=<span style="color: #ff0000;">&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:x</span>=<span style="color: #ff0000;">&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;</span> <span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Grid</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;LayoutRoot&quot;</span> <span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Button</span> <span style="color: #000066;">Content</span>=<span style="color: #ff0000;">&quot;Scan&quot;</span> <span style="color: #000066;">Name</span>=<span style="color: #ff0000;">&quot;scanCapturingBtn&quot;</span> <span style="color: #000066;">HorizontalAlignment</span>=<span style="color: #ff0000;">&quot;Left&quot;</span> <span style="color: #000066;">VerticalAlignment</span>=<span style="color: #ff0000;">&quot;Top&quot;</span> <span style="color: #000066;">Click</span>=<span style="color: #ff0000;">&quot;scanCapturingBtn_Click&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Grid<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/UserControl<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>Die Vorschau des Videobildes wird in der Code-Behind-Datei per CaptureSource erledigt und im Hintegrund dargestellt. Diese CaptureSource dient ebenfalls f&uuml;r das Ermitteln des Barcodes mit Hilfe der Klassen BarcodeImaging und BarcodeCapture aus dem Beispielprojekt f&uuml;r Silverlight unter <a href="http://www.silverlight.net/community/samples/silverlight-4/barcode-scanner/">http://www.silverlight.net/community/samples/silverlight-4/barcode-scanner/</a>.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
</pre></td><td class="code"><pre class="c" style="font-family:monospace;">using System<span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Controls</span><span style="color: #339933;">;</span>
using System.<span style="color: #202020;">Windows</span>.<span style="color: #202020;">Media</span><span style="color: #339933;">;</span>
&nbsp;
namespace SilverScanner
<span style="color: #009900;">&#123;</span>
    public partial class MainPage <span style="color: #339933;">:</span> UserControl
    <span style="color: #009900;">&#123;</span>
&nbsp;
        CaptureSource captureSource<span style="color: #339933;">;</span>
        BarcodeCapture barcodeCapture<span style="color: #339933;">;</span>
&nbsp;
        public MainPage<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            InitializeComponent<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        protected <span style="color: #993333;">void</span> activateCamera<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>captureSource <span style="color: #339933;">==</span> <span style="color: #000000; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
                <span style="color: #666666; font-style: italic;">// Zeige Vorschau des Videobildes</span>
                captureSource <span style="color: #339933;">=</span> new CaptureSource<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                captureSource.<span style="color: #202020;">VideoCaptureDevice</span> <span style="color: #339933;">=</span> CaptureDeviceConfiguration.<span style="color: #202020;">GetDefaultVideoCaptureDevice</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                VideoBrush previewBrush <span style="color: #339933;">=</span> new VideoBrush<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                previewBrush.<span style="color: #202020;">Stretch</span> <span style="color: #339933;">=</span> Stretch.<span style="color: #202020;">Uniform</span><span style="color: #339933;">;</span>
                previewBrush.<span style="color: #202020;">SetSource</span><span style="color: #009900;">&#40;</span>captureSource<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                LayoutRoot.<span style="color: #202020;">Background</span> <span style="color: #339933;">=</span> previewBrush<span style="color: #339933;">;</span>
                <span style="color: #666666; font-style: italic;">// Wähle möglichst gutes Videoformat für bessere Scan-Ergebnisse</span>
                VideoFormat desiredFormat <span style="color: #339933;">=</span> new VideoFormat<span style="color: #009900;">&#40;</span>PixelFormatType.<span style="color: #202020;">Format32bppArgb</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">640</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">480</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">12</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                captureSource.<span style="color: #202020;">VideoCaptureDevice</span>.<span style="color: #202020;">DesiredFormat</span> <span style="color: #339933;">=</span> desiredFormat<span style="color: #339933;">;</span>
                <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>CaptureDeviceConfiguration.<span style="color: #202020;">AllowedDeviceAccess</span> <span style="color: #339933;">||</span> CaptureDeviceConfiguration.<span style="color: #202020;">RequestDeviceAccess</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
                <span style="color: #009900;">&#123;</span>
                    captureSource.<span style="color: #202020;">Start</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
&nbsp;
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        private <span style="color: #993333;">void</span> scanCapturingBtn_Click<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> RoutedEventArgs e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            activateCamera<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>barcodeCapture <span style="color: #339933;">==</span> <span style="color: #000000; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span>
            <span style="color: #009900;">&#123;</span>
                <span style="color: #666666; font-style: italic;">// Starte das Erkennen des Barcodes</span>
                barcodeCapture <span style="color: #339933;">=</span> new BarcodeCapture<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                barcodeCapture.<span style="color: #202020;">BarcodeDetected</span> <span style="color: #339933;">+=</span> new EventHandler<span style="color: #339933;">&lt;</span>barcodeeventargs<span style="color: #339933;">&gt;</span><span style="color: #009900;">&#40;</span>onBarcodeDetected<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                barcodeCapture.<span style="color: #202020;">CaptureSource</span> <span style="color: #339933;">=</span> captureSource<span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        private <span style="color: #993333;">void</span> onBarcodeDetected<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> BarcodeEventArgs e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// Zeige gefundenen Barcode</span>
            System.<span style="color: #202020;">Diagnostics</span>.<span style="color: #202020;">Debug</span>.<span style="color: #202020;">WriteLine</span><span style="color: #009900;">&#40;</span>e.<span style="color: #202020;">Barcode</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/07/05/next-generation-user-interfaces-how-to-bildverarbeitung/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Next Generation User Interfaces How-To: Spracheingabe</title>
		<link>http://www.wolter.biz/2010/06/09/next-generation-user-interfaces-how-to-spracheingabe/</link>
		<comments>http://www.wolter.biz/2010/06/09/next-generation-user-interfaces-how-to-spracheingabe/#comments</comments>
		<pubDate>Wed, 09 Jun 2010 11:50:48 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Silverlight]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=713</guid>
		<description><![CDATA[Die Eingabe von Befehlen funktioniert nicht nur per Kommandozeile sondern auch per Sprachsteuerung. In Windows finden sich die Einstellungen daf&#252;r in der Systemsteuerung unter „Erleichterte Bedienung -&#62; Spracherkennung“. Einige Interaktionsformen bekommt man geschenkt, wenn man sie – wie zum Beispiel die Sprachsteuerung – in seinem Betriebssystem einfach nur aktiviert und ein wenig trainiert. Wenn sich [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/06/spracherkennung.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; margin-left: 0px; border-top: 0px; margin-right: 0px; border-right: 0px" title="spracherkennung" border="0" alt="spracherkennung" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/06/spracherkennung_thumb.png" width="244" height="162" /></a> Die Eingabe von Befehlen funktioniert nicht nur per Kommandozeile sondern auch per Sprachsteuerung. In Windows finden sich die Einstellungen daf&uuml;r in der Systemsteuerung unter „Erleichterte Bedienung -&gt; Spracherkennung“.</p>
</blockquote>
<p>Einige Interaktionsformen bekommt man geschenkt, wenn man sie – wie zum Beispiel die Sprachsteuerung – in seinem Betriebssystem einfach nur aktiviert und ein wenig trainiert. Wenn sich die zu bedienende Anwendung dann noch passend ins System integriert, dann funktioniert die Sprachsteuerung bereits. Schaltfl&auml;chen in HTML-Dokumenten und auch in Silverlight- sowie Flex-Anwendungen werden dann einfach durch das Aufsagen der entsprechenden Beschriftung aktiviert. Wer sich nicht auf die eingebaute Spracherkennung verlassen m&ouml;chte oder wo diese gar nicht erst verf&uuml;gbar ist, der kann auf Bibliotheken zu Spracherkennung zur&uuml;ckgreifen. Didier Brun hat unter <a href="http://www.bytearray.org/?p=1151">http://www.bytearray.org/?p=1151</a> eine solche Bibliothek bereits f&uuml;r den Flash Player 10.1 angek&uuml;ndigt. Oder man sendet die Sprachaufnahme an einen Server, der das dann verarbeitet…</p>
<blockquote><p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/06/soundactivity.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; margin-left: 0px; border-top: 0px; margin-right: 0px; border-right: 0px" title="soundactivity" border="0" alt="soundactivity" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/06/soundactivity_thumb.png" width="244" height="177" /></a> Einfacher geht es, wenn man sich nur mit der Lautst&auml;rke zufrieden gibt. Denn mit dem Flash Player k&ouml;nnen die angeschlossenen Audioquellen – auch mehrere gleichzeitig – genutzt werden. Ohne weiteren Aufwand erh&auml;lt man dort auch die Lautst&auml;rke der jeweiligen Klangquelle.</p>
</blockquote>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
</pre></td><td class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> mic:<span style="color: #0066CC;">Microphone</span>;
<span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">sound</span>:SoundTransform;
&nbsp;
<span style="color: #808080; font-style: italic;">// Verhindere Rückkopplung und stelle die Lautstärke auf 0</span>
<span style="color: #0066CC;">sound</span> = <span style="color: #000000; font-weight: bold;">new</span> SoundTransform<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// Ermittle das Standardmikrofon</span>
mic = <span style="color: #0066CC;">Microphone</span>.<span style="color: #006600;">getMicrophone</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">// Erzwinge die Verarbeitung durch den Flash Player</span>
mic.<span style="color: #006600;">setLoopBack</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">// Verhindere Rückkopplung </span>
mic.<span style="color: #006600;">soundTransform</span> = <span style="color: #0066CC;">sound</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// Überprüfe bei jedem &quot;Redraw&quot; des Bildschirms...</span>
addEventListener<span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">ENTER_FRAME</span>, enterFrameHandler<span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// ...die Aktivität des Sounds (also die Lautstärke)...</span>
<span style="color: #000000; font-weight: bold;">function</span> enterFrameHandler<span style="color: #66cc66;">&#40;</span>event:Event<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span>mic.<span style="color: #0066CC;">activityLevel</span><span style="color: #66cc66;">&#41;</span>	
	<span style="color: #808080; font-style: italic;">// ...und zeichne eine Linie abhängig vom Wert!</span>
	graphics.<span style="color: #0066CC;">lineStyle</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>;
	graphics.<span style="color: #0066CC;">lineTo</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">500</span>-x,<span style="color: #cc66cc;">500</span>-mic.<span style="color: #0066CC;">activityLevel</span><span style="color: #66cc66;">*</span><span style="color: #cc66cc;">4</span><span style="color: #66cc66;">&#41;</span>;
	x--;
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<p>Die Lautst&auml;rke kann nun f&uuml;r zahlreiche Formen der Eingabe genutzt werden. Vom Applausometer &uuml;ber das Aufblasen von Ballons bis hin zum Vorw&auml;rtspusten eines Segelbootes (ja, nat&uuml;rlich z&auml;hlt hier nur die Lautst&auml;rke, aber die Assoziationen in den meisten Gehirnen lassen einen doch eher pusten als das Boot anschreien).</p>
<p>Wem die reine Lautst&auml;rke nicht reicht, der kann sowohl mit AIR 2, mit Flash ab Flash Player 10.1 (Microphone SampleDataEvent.SAMPLE_DATA ) als auch mit Silverlight ab Version 4 (AudioSink.OnSamples) den kompletten Sound analysieren. F&uuml;r den Flash Player 10.1 sieht das dann so aus:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
</pre></td><td class="code"><pre class="mxml" style="font-family:monospace;"><span style="color: #000000;">&lt;?xml version=<span style="color: #ff0000;">&quot;1.0&quot;</span> encoding=<span style="color: #ff0000;">&quot;utf-8&quot;</span>?<span style="color: #7400FF;">&gt;</span></span>
<span style="color: #000000;"><span style="color: #7400FF;">&lt;s:Application</span> xmlns:fx=<span style="color: #ff0000;">&quot;http://ns.adobe.com/mxml/2009&quot;</span> </span>
<span style="color: #000000;">            xmlns:s=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/spark&quot;</span> </span>
<span style="color: #000000;">            xmlns:mx=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/mx&quot;</span> minWidth=<span style="color: #ff0000;">&quot;955&quot;</span> minHeight=<span style="color: #ff0000;">&quot;600&quot;</span></span>
<span style="color: #000000;">            creationComplete=<span style="color: #ff0000;">&quot;application_creationCompleteHandler(event)&quot;</span></span>
<span style="color: #000000;">            <span style="color: #7400FF;">&gt;</span></span>
&nbsp;
   <span style="color: #000000;"><span style="color: #7400FF;">&lt;fx:Script</span><span style="color: #7400FF;">&gt;</span></span>
      <span style="color: #000000;">&lt;!<span style="color: #66cc66;">&#91;</span>CDATA<span style="color: #66cc66;">&#91;</span></span>
<span style="color: #000000;">         import mx.events.FlexEvent;</span>
&nbsp;
<span style="color: #000000;">         protected function application_creationCompleteHandler<span style="color: #66cc66;">&#40;</span>event:FlexEvent<span style="color: #66cc66;">&#41;</span>:void</span>
<span style="color: #000000;">         <span style="color: #66cc66;">&#123;</span></span>
<span style="color: #000000;">            var m:Microphone = Microphone.getMicrophone<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</span>
<span style="color: #000000;">            m.addEventListener<span style="color: #66cc66;">&#40;</span>SampleDataEvent.SAMPLE_DATA, microphone_sampleDate<span style="color: #66cc66;">&#41;</span>;</span>
<span style="color: #000000;">            m.setLoopBack<span style="color: #66cc66;">&#40;</span>true<span style="color: #66cc66;">&#41;</span>;            </span>
<span style="color: #000000;">         <span style="color: #66cc66;">&#125;</span></span>
&nbsp;
<span style="color: #000000;">         protected function microphone_sampleDate<span style="color: #66cc66;">&#40;</span>event:SampleDataEvent<span style="color: #66cc66;">&#41;</span>:void <span style="color: #66cc66;">&#123;</span></span>
<span style="color: #000000;">            // Verarbeite die Bytes des Samples</span>
<span style="color: #000000;">            trace<span style="color: #66cc66;">&#40;</span>event.data.bytesAvailable<span style="color: #66cc66;">&#41;</span>;</span>
<span style="color: #000000;">         <span style="color: #66cc66;">&#125;</span>         </span>
<span style="color: #000000;">      <span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#93;</span><span style="color: #7400FF;">&gt;</span></span>
   <span style="color: #000000;"><span style="color: #7400FF;">&lt;/fx:Script</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
<span style="color: #000000;"><span style="color: #7400FF;">&lt;/s:Application</span><span style="color: #7400FF;">&gt;</span></span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/06/09/next-generation-user-interfaces-how-to-spracheingabe/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Next Generation User Interfaces How-To: Kommandozeile</title>
		<link>http://www.wolter.biz/2010/06/09/next-generation-user-interfaces-how-to-kommandozeile/</link>
		<comments>http://www.wolter.biz/2010/06/09/next-generation-user-interfaces-how-to-kommandozeile/#comments</comments>
		<pubDate>Wed, 09 Jun 2010 11:39:52 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Silverlight]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=697</guid>
		<description><![CDATA[Das Beispiel eines unterw&#252;rfigen H&#252;hnchens (Subservient Chicken) zeigt, wie die Kommandozeile zur Kommunikation mit dem System genutzt werden kann. Eingaben mit Schl&#252;sselw&#246;rtern wie etwas „Dance“ lassen das H&#252;hnchen tanzen. Die Tastatur kann zur Eingabe ganzer Kommandos in einer Art Kommandozeile (CLIs, Command Line Interfaces) dienen. Diese Anwendungen erscheinen dabei meist intelligenter als Sie sind. Es [...]]]></description>
			<content:encoded><![CDATA[<p>
<blockquote><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="cli" border="0" alt="cli" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/06/cli_thumb.png" width="244" height="157" />Das Beispiel eines <a href="http://www.subservientchicken.com/">unterw&uuml;rfigen H&uuml;hnchens (Subservient Chicken)</a> zeigt, wie die Kommandozeile zur Kommunikation mit dem System genutzt werden kann. Eingaben mit Schl&uuml;sselw&ouml;rtern wie etwas „Dance“ lassen das H&uuml;hnchen tanzen.</p></blockquote>
<p>Die Tastatur kann zur Eingabe ganzer Kommandos in einer Art Kommandozeile (CLIs, Command Line Interfaces) dienen. Diese Anwendungen erscheinen dabei meist intelligenter als Sie sind. Es gibt zwar auch anspruchsvolle Anwendungen, die in einem beschr&auml;nkten Rahmen Sprache wirklich verstehen, doch meist wird nur nach Schl&uuml;sselw&ouml;rtern und Phrasen Ausschau gehalten. F&uuml;r einfache Anwendungen reicht dann eine Schleife wie im folgenden Code f&uuml;r Flex 4: </p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
</pre></td><td class="code"><pre class="mxml" style="font-family:monospace;"><span style="color: #000000;">&lt;?xml version=<span style="color: #ff0000;">&quot;1.0&quot;</span> encoding=<span style="color: #ff0000;">&quot;utf-8&quot;</span>?<span style="color: #7400FF;">&gt;</span></span>
<span style="color: #000000;"><span style="color: #7400FF;">&lt;s:Application</span> xmlns:fx=<span style="color: #ff0000;">&quot;http://ns.adobe.com/mxml/2009&quot;</span> </span>
<span style="color: #000000;">			   xmlns:s=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/spark&quot;</span> </span>
<span style="color: #000000;">			   xmlns:mx=<span style="color: #ff0000;">&quot;library://ns.adobe.com/flex/mx&quot;</span> <span style="color: #7400FF;">&gt;</span></span>
&nbsp;
	<span style="color: #000000;"><span style="color: #7400FF;">&lt;fx:Script</span><span style="color: #7400FF;">&gt;</span></span>
		<span style="color: #000000;">&lt;!<span style="color: #66cc66;">&#91;</span>CDATA<span style="color: #66cc66;">&#91;</span></span>
<span style="color: #000000;">			import mx.events.FlexEvent;</span>
&nbsp;
<span style="color: #000000;">			// Führe Befehl aus</span>
<span style="color: #000000;">			private function executeCommand<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:void <span style="color: #66cc66;">&#123;</span></span>
<span style="color: #000000;">				// Wandle Befehlseingabe in Kleinbuchstaben um</span>
<span style="color: #000000;">				var lowercasetext:String = ti.text.toLowerCase<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</span>
<span style="color: #000000;">				// Ermittle, ob Befehl zum Einschalten eingegeben wurde...</span>
<span style="color: #000000;">				if <span style="color: #66cc66;">&#40;</span>lowercasetext.indexOf<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;on&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #7400FF;">&gt;</span></span>-1) {
					// ...und aktiviere Kontrollkästchen...
					cb.selected = true;
					// ... überprüfe, ob Befehl zum Ausschalten eingegeben wurde...
				} else if (lowercasetext.indexOf(&quot;off&quot;)&gt;-1) {
					// ...und deaktiviere Kontrollkästchen...
					cb.selected = false;
				}				
			}			
&nbsp;
			protected function ti_valueCommitHandler(event:FlexEvent):void {
				executeCommand();
			}
&nbsp;
			protected function ti_enterHandler(event:FlexEvent):void {
				executeCommand();
			}
		]]&gt;
	<span style="color: #000000;"><span style="color: #7400FF;">&lt;/fx:Script</span><span style="color: #7400FF;">&gt;</span></span>
&nbsp;
	<span style="color: #000000;"><span style="color: #7400FF;">&lt;s:CheckBox</span> x=<span style="color: #ff0000;">&quot;10&quot;</span> y=<span style="color: #ff0000;">&quot;10&quot;</span> label=<span style="color: #ff0000;">&quot;Aktiviere mich per Kommandozeile&quot;</span> id=<span style="color: #ff0000;">&quot;cb&quot;</span><span style="color: #7400FF;">/&gt;</span></span>
	<span style="color: #000000;"><span style="color: #7400FF;">&lt;s:TextInput</span> x=<span style="color: #ff0000;">&quot;10&quot;</span> y=<span style="color: #ff0000;">&quot;36&quot;</span> width=<span style="color: #ff0000;">&quot;209&quot;</span> id=<span style="color: #ff0000;">&quot;ti&quot;</span> </span>
<span style="color: #000000;">				 enter=<span style="color: #ff0000;">&quot;ti_enterHandler(event)&quot;</span></span>
<span style="color: #000000;">				 valueCommit=<span style="color: #ff0000;">&quot;ti_valueCommitHandler(event)&quot;</span> <span style="color: #7400FF;">/&gt;</span></span>
&nbsp;
<span style="color: #000000;"><span style="color: #7400FF;">&lt;/s:Application</span><span style="color: #7400FF;">&gt;</span></span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/06/09/next-generation-user-interfaces-how-to-kommandozeile/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Stereoskopisches 3D im Web mit Silverlight (oder Flash)</title>
		<link>http://www.wolter.biz/2010/05/17/stereoskopisches-3d-im-web-mit-silverlight-oder-flash/</link>
		<comments>http://www.wolter.biz/2010/05/17/stereoskopisches-3d-im-web-mit-silverlight-oder-flash/#comments</comments>
		<pubDate>Mon, 17 May 2010 20:30:13 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Silverlight]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=672</guid>
		<description><![CDATA[Normalerweise nehmen wir die Welt r&#228;umlich war, indem jedes Auge &#252;ber die Netzhaut ein zweidimensionales Bild ermittelt und dann an das Gehirn sendet. Sofern zwei funktionst&#252;chtige Augen und ein dazu passendes und entsprechend trainiertes Gehirn vorhanden sind, wird daraus ein r&#228;umlicher Sinneseindruck. 3D-Filme machen von diesem Verhalten gebrauch, indem auf irgendeine Art und Weise diese [...]]]></description>
			<content:encoded><![CDATA[<p>Normalerweise nehmen wir die Welt r&auml;umlich war, indem jedes Auge &uuml;ber die Netzhaut ein zweidimensionales Bild ermittelt und dann an das Gehirn sendet. Sofern zwei funktionst&uuml;chtige Augen und ein dazu passendes und entsprechend trainiertes Gehirn vorhanden sind, wird daraus ein r&auml;umlicher Sinneseindruck. 3D-Filme machen von diesem Verhalten gebrauch, indem auf irgendeine Art und Weise diese zwei Bilder an jeweils ein Auge gesandt werden (Stereoskopie): F&uuml;r die Aufnahme werden meist spezielle Linsen, zwei Kameras oder die Verschiebung einer Kamera genutzt. Beim Test hilft fertiges Bildmaterial wie <a href="http://www.stereomaker.net/galleries/indexe.htm" target="_blank">Muttyan&#8217;s Stereo Galleries</a>.</p>
<p>
<blockquote><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/05/3D_cameras.jpg" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: inline; margin-left: 0px; border-top: 0px; margin-right: 0px; border-right: 0px" title="3D_cameras" border="0" alt="3D_cameras" align="right" src="http://www.wolter.biz/blog/wp-content/uploads/2010/05/3D_cameras_thumb.jpg" width="244" height="165" /></a> In McGyver-Manier haben wir aus zwei alten Webcams (mit gruseliger Bildqualit&auml;t) und einem Restst&uuml;ck Parkettboden eine Art 3D-USB-Kamera gebaut: Wichtig hierbei ist, dass die Linsen m&ouml;glichst genau 6,5 cm auseinanderstehen, da dies dem menschlichen Seheindruck am n&auml;chsten kommt (gr&ouml;&szlig;er hei&szlig;t, dass alles kleiner wirkt und bei kleinerem Abstand wirkt alles gr&ouml;&szlig;er). N&uuml;tzlich ist &uuml;brigens bei dieser Handwerkskunst, dass die Kameras zueinander gedreht werden k&ouml;nnen, um einen gemeinsamen Punkt im Raum besser zu fokussieren (so wie das unsere Augen ja auch machen): Dies hilft ein wenig bei der Optimierung des Bildes. Die Qualit&auml;t einer solchen L&ouml;sung ist trotzdem nicht vergleichbar mit den Verfahren bei modernen Filmen wie Avatar und darunter leidet auch die r&auml;umliche Wahrnehmung. Bei Avatar wurde &uuml;brigens mit <a href="http://www.youtube.com/watch?v=2squ9HDuBeI&amp;feature=player_embedded" target="_blank">zwei beweglichen Objektiven/Kameras</a> im 6,5 cm Abstand gearbeitet, die sich zueinander wie das menschliche Auge drehen und so Punkte fokussieren k&ouml;nnen.</p>
</blockquote>
<p>Es gibt eine Reihe von Verfahren, um dem rechten und linken Auge jeweils unterschiedliche Bilder zu pr&auml;sentieren. G&uuml;nstig und qualitativ halbwegs ertr&auml;glich ist die <a href="http://de.wikipedia.org/wiki/Anaglyphenbild" target="_blank">Farbanaglyphentechnik</a>. Dabei werden das rechte und linke Bild &uuml;bereinander projiziert und jeweils eingef&auml;rbt (oft in Komplement&auml;rfarben wie Rot und Gr&uuml;n). &Uuml;ber eine spezielle Brille mit Farbfiltern wird auf jedem Auge dann ein Bild ausgel&ouml;scht. Heutzutage g&auml;ngig ist die Kombination Rot und Cyan, die sich auch f&uuml;r Werbema&szlig;nahmen und Comics eignet (entsprechende Brillen gibt es g&uuml;nstig bei Ebay). Da dabei ohnehin viele Farbinformationen verloren gehen, tendieren viele Produzenten zu Schwarzwei&szlig; – au&szlig;erdem neigt diese Technik zu Geisterbildern, wenn Einf&auml;rbung und Farbfilter nicht ganz genau &uuml;bereinstimmen. Aufwendigere Verfahren wie die Polarisationstechnik helfen die Geisterbilder zu vermeiden und arbeiten auch gut mit farbigen Inhalten. Das Einf&auml;rben der Inhalte gelingt mit Bildbearbeitungsprogrammen (es gibt auch darauf spezialisierte Programme) oder im Falle von Flash und Silverlight auch zur Laufzeit &uuml;ber Pixelshader. Bei Flash kommt daf&uuml;r die Sprache Hydra und das Werkzeug Pixelbender zum Einsatz, Silverlight nutzt HSHL (High Level Shading Language) und das <a href="http://msdn.microsoft.com/en-us/directx/aa937788.aspx" target="_blank">DirectX SDK</a>. Eine Erleichterung ist die kostenlose <a href="http://shazzam-tool.com/" target="_blank">Click-Once Anwendung Shazzam</a>.</p>
<p>Der Folgende Effekt namens ColorChannelsEffect k&uuml;mmert sich um die Umwandlung eines Bildes in Graustufen und das Variieren der Kan&auml;le f&uuml;r Rot, Gr&uuml;n, Blau und die Transparenz (Alpha). Shazzam erzeugt automatisch den ben&ouml;tigten Code, so dass der Effekt dann direkt in Silverlight (oder auch WPF) genutzt werden kann: </p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
</pre></td><td class="code"><pre class="c" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// a shader is an algorithm that is compiled</span>
<span style="color: #666666; font-style: italic;">// and loaded into the Graphics Processor Unit (GPU)</span>
<span style="color: #666666; font-style: italic;">// this algorithm is run once, for every pixel in the input image</span>
<span style="color: #666666; font-style: italic;">// GPUs are efficient parallel  processors and will run</span>
<span style="color: #666666; font-style: italic;">// your algorithm on thousands of pixels at a time</span>
&nbsp;
<span style="color: #666666; font-style: italic;">/// &lt;class&gt;ColorChannelsEffect&lt;/class&gt;</span>
<span style="color: #666666; font-style: italic;">/// &lt;description&gt;An effect that turns the input into a grayscale image first and than multiplies all four channels with custom values (e.g. for anaglyph images).&lt;/description&gt;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//-----------------------------------------------------------------------------------------</span>
<span style="color: #666666; font-style: italic;">// Shader constant register mappings (scalars - float, double, Point, Color, Point3D, etc.)</span>
<span style="color: #666666; font-style: italic;">//-----------------------------------------------------------------------------------------</span>
&nbsp;
<span style="color: #666666; font-style: italic;">/// &lt;summary&gt;Change the ratio between the Red channel&lt;/summary&gt;</span>
<span style="color: #666666; font-style: italic;">/// &lt;minvalue&gt;0/minValue&amp;gt;</span>
<span style="color: #666666; font-style: italic;">/// &lt;maxvalue&gt;1&lt;/maxvalue&gt;</span>
<span style="color: #666666; font-style: italic;">/// &lt;defaultvalue&gt;1&lt;/defaultvalue&gt;</span>
<span style="color: #993333;">float</span> RedRatio <span style="color: #339933;">:</span> <span style="color: #993333;">register</span><span style="color: #009900;">&#40;</span>c0<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">/// &lt;summary&gt;Change the ratio between the Blue channel &lt;/summary&gt;</span>
<span style="color: #666666; font-style: italic;">/// &lt;minvalue&gt;0/minValue&amp;gt;</span>
<span style="color: #666666; font-style: italic;">/// &lt;maxvalue&gt;1&lt;/maxvalue&gt;</span>
<span style="color: #666666; font-style: italic;">/// &lt;defaultvalue&gt;1&lt;/defaultvalue&gt;</span>
<span style="color: #993333;">float</span> BlueRatio <span style="color: #339933;">:</span> <span style="color: #993333;">register</span><span style="color: #009900;">&#40;</span>c1<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">/// &lt;summary&gt;Change the ratio between the Green channel&lt;/summary&gt;</span>
<span style="color: #666666; font-style: italic;">/// &lt;minvalue&gt;0/minValue&amp;gt;</span>
<span style="color: #666666; font-style: italic;">/// &lt;maxvalue&gt;1&lt;/maxvalue&gt;</span>
<span style="color: #666666; font-style: italic;">/// &lt;defaultvalue&gt;1&lt;/defaultvalue&gt;</span>
<span style="color: #993333;">float</span> GreenRatio <span style="color: #339933;">:</span> <span style="color: #993333;">register</span><span style="color: #009900;">&#40;</span>c2<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">/// &lt;summary&gt;Change the ratio between the Alpha channel&lt;/summary&gt;</span>
<span style="color: #666666; font-style: italic;">/// &lt;minvalue&gt;0/minValue&amp;gt;</span>
<span style="color: #666666; font-style: italic;">/// &lt;maxvalue&gt;1&lt;/maxvalue&gt;</span>
<span style="color: #666666; font-style: italic;">/// &lt;defaultvalue&gt;1&lt;/defaultvalue&gt;</span>
<span style="color: #993333;">float</span> AlphaRatio <span style="color: #339933;">:</span> <span style="color: #993333;">register</span><span style="color: #009900;">&#40;</span>c3<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// input image</span>
sampler2D input <span style="color: #339933;">:</span> <span style="color: #993333;">register</span><span style="color: #009900;">&#40;</span>s0<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// this is the entry point for the shader</span>
<span style="color: #666666; font-style: italic;">// the return type is float4</span>
<span style="color: #666666; font-style: italic;">// float4 contains four float values which we </span>
<span style="color: #666666; font-style: italic;">// can think of as color of a pixel</span>
<span style="color: #666666; font-style: italic;">// (alpha, red, green, blue)</span>
float4 main<span style="color: #009900;">&#40;</span>float2 locationInSource <span style="color: #339933;">:</span> TEXCOORD<span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> COLOR
<span style="color: #009900;">&#123;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// create a variable to hold our color</span>
  float4 color<span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// get the color of the current pixel</span>
  <span style="color: #666666; font-style: italic;">// tex2D is a HLSL function</span>
  <span style="color: #666666; font-style: italic;">// 1st arg is a bitmap (called a texture in HLSL)</span>
  <span style="color: #666666; font-style: italic;">// input: the incoming image, passed in from the GPU register (s0) </span>
  <span style="color: #666666; font-style: italic;">// </span>
  <span style="color: #666666; font-style: italic;">// 2nd arg is a locator for the pixel, this is normalized to range 0..1 </span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// tex2D takes our sample input, gets a pixel at the current x,y location</span>
  <span style="color: #666666; font-style: italic;">// and returns the color of the existing pixel, which means that the color is not altered</span>
  color <span style="color: #339933;">=</span> tex2D<span style="color: #009900;">&#40;</span> input<span style="color: #339933;">,</span> locationInSource.<span style="color: #202020;">xy</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// color has four value that we can change</span>
  <span style="color: #666666; font-style: italic;">// color.r, color.g, color.b, color.a</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// get rgb values only</span>
  float3 rgb <span style="color: #339933;">=</span> color.<span style="color: #202020;">rgb</span><span style="color: #339933;">;</span>
  <span style="color: #666666; font-style: italic;">// create greyscale pixel via dot multiplication</span>
  <span style="color: #666666; font-style: italic;">// (the effective luminance of a pixel is calculated </span>
  <span style="color: #666666; font-style: italic;">// with the following formula: </span>
  <span style="color: #666666; font-style: italic;">// 0.3 * red + 0.59 * green + 0.11 * blue);</span>
  float3 luminance <span style="color: #339933;">=</span> dot<span style="color: #009900;">&#40;</span>rgb<span style="color: #339933;">,</span> float3<span style="color: #009900;">&#40;</span><span style="color:#800080;">0.30</span><span style="color: #339933;">,</span> <span style="color:#800080;">0.59</span><span style="color: #339933;">,</span> <span style="color:#800080;">0.11</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #666666; font-style: italic;">// convert rgb to four channel pixel including alpha </span>
  color <span style="color: #339933;">=</span> float4<span style="color: #009900;">&#40;</span>luminance<span style="color: #339933;">,</span> color.<span style="color: #202020;">a</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// values are normalized, so 0 is no color, 1 is full color</span>
  color.<span style="color: #202020;">r</span><span style="color: #339933;">=</span> color.<span style="color: #202020;">r</span> <span style="color: #339933;">*</span> RedRatio<span style="color: #339933;">;</span>
  color.<span style="color: #202020;">g</span><span style="color: #339933;">=</span> color.<span style="color: #202020;">g</span> <span style="color: #339933;">*</span> GreenRatio<span style="color: #339933;">;</span>
  color.<span style="color: #202020;">b</span><span style="color: #339933;">=</span> color.<span style="color: #202020;">b</span> <span style="color: #339933;">*</span> BlueRatio<span style="color: #339933;">;</span>
  color.<span style="color: #202020;">a</span><span style="color: #339933;">=</span> color.<span style="color: #202020;">a</span> <span style="color: #339933;">*</span> AlphaRatio<span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #b1b100;">return</span> color<span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>F&uuml;r die Nutzung dieses Effekts m&uuml;ssen die Klassendatei f&uuml;r ColorFiltersEffect.cs (bzw. das VisualBasic-Pendant) in das Projekt kopiert und der ColorFiltersEffect.ps als Ressource eingebunden werden (ColorFiltersEffect.fx ist nur der Quellcode des Filters und im Silverlight-Projekt nicht erforderlich). Ein kleiner Tipp am Rande: In der ColorFiltersEffect.cs-Datei muss vermutlich die pixelShader.UriSource angepasst werden: Das Beispielprojekt nutzt den Namensraum und den Assembly-Namen StereoscopeImage und der Effekt liegt dort im Verzeichnis Effects, so dass die Anweisung mit der UriSource dann so aussieht:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="csharp" style="font-family:monospace;">pixelShader.<span style="color: #0000FF;">UriSource</span> <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> Uri<span style="color: #000000;">&#40;</span><span style="color: #666666;">&quot;/StereoscopeImage;component/Effects/ColorChannelsEffect.ps&quot;</span>, UriKind.<span style="color: #0000FF;">Relative</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span></pre></td></tr></table></div>

<p>Die eigentliche Anwendung besteht aus zwei Bildern, die &uuml;ber die Effekte jeweils unterschiedlich eingef&auml;rbt werden. Da eine Rot-Cyan-Brille zum Einsatz kommt, m&uuml;ssen f&uuml;r das linke Auge die Kan&auml;le Gr&uuml;n und Blau und f&uuml;r das rechte Auge die Kan&auml;le Rot und Alpha ausgeblendet werden. Bitte beachten Sie, dass die Bilder im Beispiel nur per URL referenziert werden und das Projekt darum als OOB-Anwendung mit erweiterten Rechten l&auml;uft – nat&uuml;rlich k&ouml;nnen Sie auch andere Bilder verwenden und direkt in das Projekt einbinden.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
</pre></td><td class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;UserControl</span> <span style="color: #000066;">x:Class</span>=<span style="color: #ff0000;">&quot;StereoscopeImage.MainPage&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns</span>=<span style="color: #ff0000;">&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:x</span>=<span style="color: #ff0000;">&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:d</span>=<span style="color: #ff0000;">&quot;http://schemas.microsoft.com/expression/blend/2008&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:mc</span>=<span style="color: #ff0000;">&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:effects</span>=<span style="color: #ff0000;">&quot;clr-namespace:Biz.Wolter.Effects&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">mc:Ignorable</span>=<span style="color: #ff0000;">&quot;d&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">d:DesignHeight</span>=<span style="color: #ff0000;">&quot;300&quot;</span> <span style="color: #000066;">d:DesignWidth</span>=<span style="color: #ff0000;">&quot;400&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Grid</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;LayoutRoot&quot;</span> <span style="color: #000066;">Background</span>=<span style="color: #ff0000;">&quot;White&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
        <span style="color: #808080; font-style: italic;">&lt;!-- </span>
<span style="color: #808080; font-style: italic;">            Due to legal issues I did not include the original image. </span>
<span style="color: #808080; font-style: italic;">            You can either use the URL in a trusted OOB application </span>
<span style="color: #808080; font-style: italic;">            or just download free images yourself.</span>
<span style="color: #808080; font-style: italic;">        --&gt;</span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Image</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;leftImage&quot;</span> <span style="color: #000066;">Source</span>=<span style="color: #ff0000;">&quot;http://www.stereomaker.net/galleries/wien/lr/20090921011759_l.jpg&quot;</span> <span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Image.Effect<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
                <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;effects:ColorChannelsEffect</span> <span style="color: #000066;">RedRatio</span>=<span style="color: #ff0000;">&quot;1&quot;</span> <span style="color: #000066;">GreenRatio</span>=<span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #000066;">BlueRatio</span>=<span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #000066;">AlphaRatio</span>=<span style="color: #ff0000;">&quot;1&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Image.Effect<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Image<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Image</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;rightImage&quot;</span> <span style="color: #000066;">Source</span>=<span style="color: #ff0000;">&quot;http://www.stereomaker.net/galleries/wien/lr/20090921011759_r.jpg&quot;</span> <span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Image.Effect<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
                <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;effects:ColorChannelsEffect</span> <span style="color: #000066;">RedRatio</span>=<span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #000066;">GreenRatio</span>=<span style="color: #ff0000;">&quot;1&quot;</span> <span style="color: #000066;">BlueRatio</span>=<span style="color: #ff0000;">&quot;1&quot;</span> <span style="color: #000066;">AlphaRatio</span>=<span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Image.Effect<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Image<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Grid<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/UserControl<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>Das war es dann schon mit Schritt eins. Sollte das funktionieren, dann kann nun der Versuch unternommen werden, Bewegung ins Spiel zu bringen: In diesem Fall &uuml;ber zwei Kameras, die das linke und rechte Bild aufzeichnen.<br />
Daf&uuml;r ben&ouml;tigen wir anstelle der Bilder zwei Rechtecke als Container f&uuml;r einen VideoBrush (dieser stellt dann das Video dar) sowie ein paar Bedienelemente zum Ausw&auml;hlen der Kameras und zum start der Aufzeichnung.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
</pre></td><td class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;UserControl</span> <span style="color: #000066;">x:Class</span>=<span style="color: #ff0000;">&quot;StereoscopeVideo.MainPage&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns</span>=<span style="color: #ff0000;">&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:x</span>=<span style="color: #ff0000;">&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:d</span>=<span style="color: #ff0000;">&quot;http://schemas.microsoft.com/expression/blend/2008&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:mc</span>=<span style="color: #ff0000;">&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:effects</span>=<span style="color: #ff0000;">&quot;clr-namespace:Biz.Wolter.Effects&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">mc:Ignorable</span>=<span style="color: #ff0000;">&quot;d&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">d:DesignHeight</span>=<span style="color: #ff0000;">&quot;300&quot;</span> <span style="color: #000066;">d:DesignWidth</span>=<span style="color: #ff0000;">&quot;400&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Grid</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;LayoutRoot&quot;</span> <span style="color: #000066;">Background</span>=<span style="color: #ff0000;">&quot;White&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Rectangle</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;leftImage&quot;</span> <span style="color: #000066;">Stroke</span>=<span style="color: #ff0000;">&quot;Black&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Rectangle.Effect<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
                <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;effects:ColorChannelsEffect</span> <span style="color: #000066;">RedRatio</span>=<span style="color: #ff0000;">&quot;1&quot;</span> <span style="color: #000066;">GreenRatio</span>=<span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #000066;">BlueRatio</span>=<span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #000066;">AlphaRatio</span>=<span style="color: #ff0000;">&quot;1&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Rectangle.Effect<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Rectangle<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Rectangle</span> <span style="color: #000066;">x:Name</span>=<span style="color: #ff0000;">&quot;rightImage&quot;</span> <span style="color: #000066;">Stroke</span>=<span style="color: #ff0000;">&quot;Black&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Rectangle.Effect<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
                <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;effects:ColorChannelsEffect</span> <span style="color: #000066;">RedRatio</span>=<span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #000066;">GreenRatio</span>=<span style="color: #ff0000;">&quot;1&quot;</span> <span style="color: #000066;">BlueRatio</span>=<span style="color: #ff0000;">&quot;1&quot;</span> <span style="color: #000066;">AlphaRatio</span>=<span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
            <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Rectangle.Effect<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Rectangle<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;ComboBox</span> <span style="color: #000066;">DisplayMemberPath</span>=<span style="color: #ff0000;">&quot;FriendlyName&quot;</span> <span style="color: #000066;">Height</span>=<span style="color: #ff0000;">&quot;23&quot;</span> <span style="color: #000066;">HorizontalAlignment</span>=<span style="color: #ff0000;">&quot;Left&quot;</span> <span style="color: #000066;">Margin</span>=<span style="color: #ff0000;">&quot;12,12,0,0&quot;</span> <span style="color: #000066;">Name</span>=<span style="color: #ff0000;">&quot;leftDeviceComboBox&quot;</span> <span style="color: #000066;">VerticalAlignment</span>=<span style="color: #ff0000;">&quot;Top&quot;</span> <span style="color: #000066;">Width</span>=<span style="color: #ff0000;">&quot;120&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;ComboBox</span> <span style="color: #000066;">DisplayMemberPath</span>=<span style="color: #ff0000;">&quot;FriendlyName&quot;</span> <span style="color: #000066;">Height</span>=<span style="color: #ff0000;">&quot;23&quot;</span> <span style="color: #000066;">HorizontalAlignment</span>=<span style="color: #ff0000;">&quot;Left&quot;</span> <span style="color: #000066;">Margin</span>=<span style="color: #ff0000;">&quot;12,41,0,0&quot;</span> <span style="color: #000066;">Name</span>=<span style="color: #ff0000;">&quot;rightDeviceComboBox&quot;</span> <span style="color: #000066;">VerticalAlignment</span>=<span style="color: #ff0000;">&quot;Top&quot;</span> <span style="color: #000066;">Width</span>=<span style="color: #ff0000;">&quot;120&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;Button</span> <span style="color: #000066;">Content</span>=<span style="color: #ff0000;">&quot;Start&quot;</span> <span style="color: #000066;">Height</span>=<span style="color: #ff0000;">&quot;23&quot;</span> <span style="color: #000066;">HorizontalAlignment</span>=<span style="color: #ff0000;">&quot;Left&quot;</span> <span style="color: #000066;">Margin</span>=<span style="color: #ff0000;">&quot;12,70,0,0&quot;</span> <span style="color: #000066;">Name</span>=<span style="color: #ff0000;">&quot;startButton&quot;</span> <span style="color: #000066;">VerticalAlignment</span>=<span style="color: #ff0000;">&quot;Top&quot;</span> <span style="color: #000066;">Width</span>=<span style="color: #ff0000;">&quot;75&quot;</span> <span style="color: #000066;">Click</span>=<span style="color: #ff0000;">&quot;startButton_Click&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/Grid<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/UserControl<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>Innerhalb der Code-Behind-Datei werden die VideoBrushes mit dem Video-Signal bef&uuml;llt, sobald der Anwender die Start-Schaltfl&auml;che klickt:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
</pre></td><td class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF;">using</span> <span style="color: #008080;">System.Windows</span><span style="color: #008000;">;</span>
<span style="color: #0600FF;">using</span> <span style="color: #008080;">System.Windows.Controls</span><span style="color: #008000;">;</span>
<span style="color: #0600FF;">using</span> <span style="color: #008080;">System.Windows.Media</span><span style="color: #008000;">;</span>
<span style="color: #0600FF;">using</span> <span style="color: #008080;">System.Collections.ObjectModel</span><span style="color: #008000;">;</span>
&nbsp;
<span style="color: #0600FF;">namespace</span> StereoscopeVideo
<span style="color: #000000;">&#123;</span>
    <span style="color: #0600FF;">public</span> <span style="color: #0600FF;">partial</span> <span style="color: #FF0000;">class</span> MainPage <span style="color: #008000;">:</span> UserControl
    <span style="color: #000000;">&#123;</span>
&nbsp;
        <span style="color: #0600FF;">private</span> CaptureSource leftSource<span style="color: #008000;">;</span>
        <span style="color: #0600FF;">private</span> CaptureSource rightSource<span style="color: #008000;">;</span>
        <span style="color: #0600FF;">private</span> VideoBrush leftVideoBrush<span style="color: #008000;">;</span>
        <span style="color: #0600FF;">private</span> VideoBrush rightVideoBrush<span style="color: #008000;">;</span>
&nbsp;
        <span style="color: #0600FF;">public</span> MainPage<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>
        <span style="color: #000000;">&#123;</span>
            InitializeComponent<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
&nbsp;
            Loaded <span style="color: #008000;">+=</span> <span style="color: #008000;">new</span> RoutedEventHandler<span style="color: #000000;">&#40;</span>mainPage_Loaded<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
        <span style="color: #000000;">&#125;</span>
&nbsp;
        <span style="color: #0600FF;">private</span> <span style="color: #0600FF;">void</span> mainPage_Loaded<span style="color: #000000;">&#40;</span><span style="color: #FF0000;">object</span> sender, RoutedEventArgs e<span style="color: #000000;">&#41;</span>
        <span style="color: #000000;">&#123;</span>
            ReadOnlyCollection<span style="color: #008000;">&lt;</span>VideoCaptureDevice<span style="color: #008000;">&gt;</span> devices <span style="color: #008000;">=</span> CaptureDeviceConfiguration.<span style="color: #0000FF;">GetAvailableVideoCaptureDevices</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
&nbsp;
            <span style="color: #008080; font-style: italic;">// set left device collection</span>
            leftDeviceComboBox.<span style="color: #0000FF;">ItemsSource</span> <span style="color: #008000;">=</span> devices<span style="color: #008000;">;</span>
            <span style="color: #008080; font-style: italic;">// create left capture source (capturing the video)</span>
            leftSource <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> CaptureSource<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
            <span style="color: #008080; font-style: italic;">// create left video brush (displaying the video)...</span>
            leftVideoBrush <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> VideoBrush<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
            leftVideoBrush.<span style="color: #0000FF;">Stretch</span> <span style="color: #008000;">=</span> Stretch.<span style="color: #0000FF;">Uniform</span><span style="color: #008000;">;</span>
            <span style="color: #008080; font-style: italic;">// ...and use this brush to fill the corresponding ui-control</span>
            leftImage.<span style="color: #0000FF;">Fill</span> <span style="color: #008000;">=</span> leftVideoBrush<span style="color: #008000;">;</span>
&nbsp;
            rightDeviceComboBox.<span style="color: #0000FF;">ItemsSource</span> <span style="color: #008000;">=</span> devices<span style="color: #008000;">;</span>
            rightSource <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> CaptureSource<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
            rightVideoBrush <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> VideoBrush<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
            rightVideoBrush.<span style="color: #0000FF;">Stretch</span> <span style="color: #008000;">=</span> Stretch.<span style="color: #0000FF;">Uniform</span><span style="color: #008000;">;</span>
            rightImage.<span style="color: #0000FF;">Fill</span> <span style="color: #008000;">=</span> rightVideoBrush<span style="color: #008000;">;</span>
        <span style="color: #000000;">&#125;</span>
&nbsp;
        <span style="color: #0600FF;">private</span> <span style="color: #0600FF;">void</span> startButton_Click<span style="color: #000000;">&#40;</span><span style="color: #FF0000;">object</span> sender, RoutedEventArgs e<span style="color: #000000;">&#41;</span>
        <span style="color: #000000;">&#123;</span>
            <span style="color: #0600FF;">if</span> <span style="color: #000000;">&#40;</span>leftDeviceComboBox.<span style="color: #0000FF;">SelectedIndex</span> <span style="color: #008000;">&gt;</span> <span style="color: #008000;">-</span><span style="color: #FF0000;">1</span> <span style="color: #008000;">&amp;&amp;</span> rightDeviceComboBox.<span style="color: #0000FF;">SelectedIndex</span> <span style="color: #008000;">&gt;</span> <span style="color: #008000;">-</span><span style="color: #FF0000;">1</span><span style="color: #000000;">&#41;</span>
            <span style="color: #000000;">&#123;</span>
                startButton.<span style="color: #0000FF;">IsEnabled</span> <span style="color: #008000;">=</span> false<span style="color: #008000;">;</span> <span style="color: #008080; font-style: italic;">// for testing purpose only one start possble so far</span>
                startCapturing<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
            <span style="color: #000000;">&#125;</span>
            <span style="color: #0600FF;">else</span>
            <span style="color: #000000;">&#123;</span>
                MessageBox.<span style="color: #0000FF;">Show</span><span style="color: #000000;">&#40;</span><span style="color: #666666;">&quot;Please choose two input devices first!&quot;</span>, <span style="color: #666666;">&quot;Alert&quot;</span>, MessageBoxButton.<span style="color: #0000FF;">OK</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
            <span style="color: #000000;">&#125;</span>
        <span style="color: #000000;">&#125;</span>
&nbsp;
        <span style="color: #0600FF;">private</span> <span style="color: #0600FF;">void</span> startCapturing<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>
        <span style="color: #000000;">&#123;</span>
&nbsp;
            leftSource.<span style="color: #0000FF;">VideoCaptureDevice</span> <span style="color: #008000;">=</span> leftDeviceComboBox.<span style="color: #0000FF;">SelectedItem</span> <span style="color: #0600FF;">as</span> VideoCaptureDevice<span style="color: #008000;">;</span>
            rightSource.<span style="color: #0000FF;">VideoCaptureDevice</span> <span style="color: #008000;">=</span> rightDeviceComboBox.<span style="color: #0000FF;">SelectedItem</span> <span style="color: #0600FF;">as</span> VideoCaptureDevice<span style="color: #008000;">;</span>
&nbsp;
            <span style="color: #0600FF;">if</span> <span style="color: #000000;">&#40;</span>CaptureDeviceConfiguration.<span style="color: #0000FF;">AllowedDeviceAccess</span> <span style="color: #008000;">||</span> CaptureDeviceConfiguration.<span style="color: #0000FF;">RequestDeviceAccess</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>
            <span style="color: #000000;">&#123;</span>
                leftSource.<span style="color: #0000FF;">Start</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
                leftVideoBrush.<span style="color: #0000FF;">SetSource</span><span style="color: #000000;">&#40;</span>leftSource<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
&nbsp;
                <span style="color: #0600FF;">if</span> <span style="color: #000000;">&#40;</span>leftSource.<span style="color: #0000FF;">VideoCaptureDevice</span> <span style="color: #008000;">!=</span> rightSource.<span style="color: #0000FF;">VideoCaptureDevice</span><span style="color: #000000;">&#41;</span>
                <span style="color: #000000;">&#123;</span>
                    rightSource.<span style="color: #0000FF;">Start</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
                    rightVideoBrush.<span style="color: #0000FF;">SetSource</span><span style="color: #000000;">&#40;</span>rightSource<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
                <span style="color: #000000;">&#125;</span>
                <span style="color: #0600FF;">else</span>
                <span style="color: #000000;">&#123;</span>
                    MessageBox.<span style="color: #0000FF;">Show</span><span style="color: #000000;">&#40;</span><span style="color: #666666;">&quot;Only one innput device does not really make sense for this 3D application!&quot;</span>, <span style="color: #666666;">&quot;Alert&quot;</span>, MessageBoxButton.<span style="color: #0000FF;">OK</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
                    rightVideoBrush.<span style="color: #0000FF;">SetSource</span><span style="color: #000000;">&#40;</span>leftSource<span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span>
                <span style="color: #000000;">&#125;</span>
            <span style="color: #000000;">&#125;</span>
&nbsp;
        <span style="color: #000000;">&#125;</span>
    <span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></td></tr></table></div>

<p><del datetime="2010-05-18T19:52:36+00:00">Das war es schon. Beide Silverlight-4-Projekte gibt es hier f&uuml;r Visual Studio 2010 oder Expression Blend 4 <a href='http://www.wolter.biz/blog/wp-content/uploads/2010/05/Stereoscope.zip'>als ZIP zum Download</a>. Viel Spa&szlig; damit…</del><br />
<ins datetime="2010-05-18T19:52:36+00:00">Das Projekt ist nun bei Codeplex gehostet.</ins> Die aktuellen Quellen f&uuml;r Visual Studio 2010 oder Expression Blend 4 finden sich unter <a href="http://stereoscopy.codeplex.com/">http://stereoscopy.codeplex.com/</a>. Viel Spa&szlig; damit…</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/05/17/stereoskopisches-3d-im-web-mit-silverlight-oder-flash/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Next Generation User Interfaces How-To: Tastatureingabe</title>
		<link>http://www.wolter.biz/2010/05/16/next-generation-user-interfaces-how-to-tastatureingabe/</link>
		<comments>http://www.wolter.biz/2010/05/16/next-generation-user-interfaces-how-to-tastatureingabe/#comments</comments>
		<pubDate>Sun, 16 May 2010 09:07:38 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Silverlight]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=635</guid>
		<description><![CDATA[Eine der g&#228;ngigsten Interaktionsm&#246;glichkeiten ist die Tastatureingabe. In einem kleinen &#220;berblick m&#246;glicher Formen der Mensch-Maschine-Interaktion darf diese darum nicht fehlen. Zumal die Tastatureingabe f&#252;r mehr als nur das Ausf&#252;llen von Textfeldern dienen kann. Tastatureingaben sind beispielsweise zum Aufruf eines Kommandos n&#252;tzlich, etwas f&#252;r Spiele oder als Abk&#252;rzung f&#252;r g&#228;ngige Operationen in Programmen wie Apfel/Strg+Z zum [...]]]></description>
			<content:encoded><![CDATA[<p>Eine der g&auml;ngigsten Interaktionsm&ouml;glichkeiten ist die Tastatureingabe. In einem kleinen <a href="http://www.wolter.biz/2010/05/13/next-generation-user-interfaces-how-to/">&Uuml;berblick m&ouml;glicher Formen der Mensch-Maschine-Interaktion</a> darf diese darum nicht fehlen. Zumal die Tastatureingabe f&uuml;r mehr als nur das Ausf&uuml;llen von Textfeldern dienen kann. Tastatureingaben sind beispielsweise zum Aufruf eines Kommandos n&uuml;tzlich, etwas f&uuml;r Spiele oder als Abk&uuml;rzung f&uuml;r g&auml;ngige Operationen in Programmen wie <em>Apfel/Strg+Z </em>zum R&uuml;ckg&auml;ngigmachen. Mehr dazu und weitere ungew&ouml;hnlichen Interaktiosm&ouml;glichketen mit der Tastatureingabe gibt es in einem sp&auml;teren Text zum Thema “Komandozeile”.</p>
<blockquote><p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/05/focus.png" target="_blank"><img style="display: inline; margin-left: 0px; margin-right: 0px; border-width: 0px;" title="focus" src="http://www.wolter.biz/blog/wp-content/uploads/2010/05/focus_thumb.png" border="0" alt="focus" width="244" height="184" align="right" /></a><em>Ver&auml;nderungen an dem HTML-Rahmen m&uuml;ssen im Flex- oder Flash-Builder in der index.template.html-Datei vorgenommen werden. Die fertige HTML-Seite wird dann daraus generiert.</em></p></blockquote>
<p>Doch auch bei der Tastatureingabe gibt es kleinere Gemeinheiten wie etwa den Fokus. Denn normalerweise erh&auml;lt nur diejenige Anwendung mit dem aktuellen Fokus Kenntnis &uuml;ber einen Tastendruck (und auch nur dann, wenn der Browser diese Tastenkombination nicht vorbelegt hat und abf&auml;ngt). Bei Webanwendungen kann man dies durch die folgende JavaScript-Anweisung erzwingen: document.getElementById(&#8220;<em>FlashContentID</em>&#8220;).focus(); F&uuml;r Flex-Anwendungen kann diese Angabe beispielsweise in der index.template.html-Datei erfolgen, die als Vorlage f&uuml;r den erzeugten HTML-Rahmen und die darin dann eingebettete SWF-Datei dient. Dank dem Platzhalter ${application} l&auml;sst sich die Bezeichnung der Flash-Player-Instanz leicht ermitteln und dann zum Beispiel nach erfolgreichem Laden des HTML-Dokumentes der Fokus darauf setzen. Innerhalb von Flex gelingt das Setzen des Fokus wie in der Abbildung auf einem TextInput-Steuerelement durch die Methode setFocus – nur dass dieser Fokus abgesehen vom Erscheinungsbild leider nichts n&uuml;tzt, wenn eben der Flash Player selbst keinen Fokus hat.</p>
<blockquote><p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/05/flashkey1.png" target="_blank"><img style="display: inline; margin-left: 0px; margin-right: 0px; border-width: 0px;" title="flashkey" src="http://www.wolter.biz/blog/wp-content/uploads/2010/05/flashkey_thumb.png" border="0" alt="flashkey" width="244" height="177" align="right" /></a><em>Um Tastatureingaben in Flash &uuml;ber das Men&uuml; „Steuerung -&gt; Film testen“ ausprobieren zu k&ouml;nnen, sollten im Testplayer &uuml;ber das Men&uuml; „Steuerung“ Tastenk&uuml;rzel deaktiviert werden.</em></p></blockquote>
<p>In Flash und Flex mit ActionScript 3 benachrichtigt das Ereignis KeyboardEvent.KEY_DOWN beim Dr&uuml;cken bzw. KeyboardEvent.KEY_UP beim Loslassen einer Taste. Das funktioniert aber auch hier nur, wenn der Fokus gesetzt ist; In der Abbildung ist deshalb die B&uuml;hne (stage) als Objekt gew&auml;hlt. Das Dr&uuml;cken wiederholt sich jedoch auch ohne zwischenzeitliches Loslassen wenn die Taste nur lange genug gedr&uuml;ckt bleibt (die Wiederholrate findet sich unter Windows 7 in der Systemsteuerung unter „Tastatur -&gt; Geschwindigkeit“). Au&szlig;erdem muss man unterscheiden, ob das eigegebene Zeichen (charCode) oder die gedr&uuml;ckte Taste (keyCode) auf der Tastatur wichtig ist, also ob auch die Gro&szlig;undkleinschreibung interessiert:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">// Die notwendigen Klassen sind in Flash CS4 und CS5 automatisch bekannt.</span>
<span style="color: #808080; font-style: italic;">// Im Flex/Flash Builder müssen die Klassen importiert werden.</span>
&nbsp;
<span style="color: #808080; font-style: italic;">// Abonniere Ereignis, um das Drücken der Tasten zu erfahren</span>
<span style="color: #0066CC;">stage</span>.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>KeyboardEvent.<span style="color: #006600;">KEY_DOWN</span>, application_keyDownHandler<span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// Ereignismethode, um das Drücken der Tasten zu verarbeiten</span>
<span style="color: #000000; font-weight: bold;">function</span> application_keyDownHandler<span style="color: #66cc66;">&#40;</span>event:KeyboardEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;Taste gedrückt/wiederholt&quot;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;Tastencode: &quot;</span> + event.<span style="color: #006600;">keyCode</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;Zeichencode: &quot;</span> + event.<span style="color: #006600;">charCode</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;Zeichen: &quot;</span> + <span style="color: #0066CC;">String</span>.<span style="color: #0066CC;">fromCharCode</span><span style="color: #66cc66;">&#40;</span>event.<span style="color: #006600;">charCode</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></td></tr></table></div>

<blockquote><p><a href="http://www.wolter.biz/blog/wp-content/uploads/2010/05/image.png" target="_blank"><em><img style="display: inline; margin-left: 0px; margin-right: 0px; border-width: 0px;" title="image" src="http://www.wolter.biz/blog/wp-content/uploads/2010/05/image_thumb.png" border="0" alt="image" width="244" height="201" align="right" /></em></a><em> Barcode-Scanner wie hier der </em><a href="http://www.motorola.com/Business/US-EN/Business+Product+and+Services/Bar+Code+Scanning/Bar+Code+Scanners/General+Purpose+Scanners/LS1203_US-EN"><em>Symbol LS1203</em></a><em> machen sich &uuml;brigens meist auch die Tastatur zu nutze. Ein gescannter Barcode erscheint dann – angereichert um ein paar Steuerzeichen – als Tastatureingabe in der Anwendung. Barcode-Scanner sind somit oft nur eine benutzerfreundliche Variante der manuellen Eingabe: Der Zugbegleiter kann Tickets so schneller verarbeiten und der Schlosser muss seine Handschuhe nicht erst ausziehen.</em></p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/05/16/next-generation-user-interfaces-how-to-tastatureingabe/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Next Generation User Interfaces How-To</title>
		<link>http://www.wolter.biz/2010/05/13/next-generation-user-interfaces-how-to/</link>
		<comments>http://www.wolter.biz/2010/05/13/next-generation-user-interfaces-how-to/#comments</comments>
		<pubDate>Thu, 13 May 2010 12:58:00 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Multi-Touch]]></category>
		<category><![CDATA[Silverlight]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/2010/05/13/next-generation-user-interfaces-how-to/</guid>
		<description><![CDATA[Kommandozeile und grafische Benutzeroberfl&#228;chen waren gestern: Jetzt geht es um m&#246;glichst nat&#252;rliche Schnittstellen. Egal ob f&#252;r den Desktop oder das Web, beinahe jede Art der Kommunikation zwischen Nutzer und System ist denkbar. Interaktionsformen auf der Basis von AIR, Flash und Silverlight reichen von der normalen Tastatureingabe bis hin zur Lego Mindstorms Sensorik. Der m&#246;glichst nat&#252;rlichen [...]]]></description>
			<content:encoded><![CDATA[<p>Kommandozeile und grafische Benutzeroberfl&auml;chen waren gestern: Jetzt geht es um m&ouml;glichst nat&uuml;rliche Schnittstellen. Egal ob f&uuml;r den Desktop oder das Web, beinahe jede Art der Kommunikation zwischen Nutzer und System ist denkbar. Interaktionsformen auf der Basis von AIR, Flash und Silverlight reichen von der normalen Tastatureingabe bis hin zur Lego Mindstorms Sensorik.</p>
<p>Der m&ouml;glichst nat&uuml;rlichen Nutzung von Benutzungsschnittstellen (Natural User Interfaces) wird dank Apple und Microsoft wieder verst&auml;rkte Aufmerksamkeit geschenkt. Dabei sind viele der Ideen alles andere als neu: Ein Multi-Touch-Display ist beispielsweise bereits 1982 durch Nimish Mehta an der Universit&auml;t Toronto entwickelt worden, auch wenn es erst im Februar 2006 durch <a href="http://www.perceptivepixel.com/applications.html">Jefferson Han</a> auf der TED-Konferenz popul&auml;r gemacht wurde.</p>
<p>Auch wird oft vergessen, dass das Benutzererlebnis und die Ergonomie nicht nur von der Nat&uuml;rlichkeit sondern auch vom Kontext abh&auml;ngen. Das iPhone beispielsweise versagt im Winter, da es sich nicht mit Handschuhen bedienen l&auml;sst. Desshalb nutzen Koreaner <a href="http://www.engadget.com/2010/02/11/south-korean-iphone-users-turn-to-sausages-as-a-cold-weather-me/">ein W&uuml;rstchen zur Eingabe</a>, wie der s&uuml;dkoreanische Nachrichtendienst <a href="http://itnews.inews24.com/php/news_view.php?g_serial=474508&amp;g_menu=022600">inews24.com</a> meldet.</p>
<p>Eine weitere Herausforderung: Anwendungen m&uuml;ssen heutzutage oft auf unterschiedlichen und uneinheitlichen Ger&auml;ten laufen. Teilweise stehen Interaktionsformen bereits zur Verf&uuml;gung, etwa Multi-Touch. Aber wenn die Abspielumgebung das einmal nicht hergibt, dann muss eben nachgeholfen werden. Dank zahlreicher Schnittstellen zur Au&szlig;enwelt ist das mit modernen Technologien kein gr&ouml;&szlig;eres Problem.</p>
<p>Fast jede Form der Mensch-Maschine-Interaktion ist, gen&uuml;gend Kreativit&auml;t vorausgesetzt, umsetzbar. Plattformen wie AIR, Flash und Silverlight erlauben viele Interaktionsformen bereits nativ. Und sollten dann doch einmal Beschr&auml;nkungen existieren, kommt entweder eine Technologie mit Hardwarezugriff wie z. B. WPF zum Einsatz oder es wird eben mit einem Hilfsprogramm beispielsweise &uuml;ber eine Socket-Verbindung kommuniziert. Aber gehen tut es schlussendlich so gut wie immer. Ob es dann auch sinnvoll ist, das ist eine andere Frage…</p>
<p>Demn&auml;chst m&ouml;chte ich hier Beispiele f&uuml;r ungew&ouml;hnliche Interaktionsformen oder f&uuml;r gew&ouml;hnliche Interaktionsformen in ungew&ouml;hnlichen Szenarien anhand kleiner Code-Snippets vorstellen. Dazu z&auml;hlen Themen wie:</p>
<ul>
<li><a href="http://www.wolter.biz/2010/05/16/next-generation-user-interfaces-how-to-tastatureingabe/">Tastatureingabe</a> </li>
<li><a href="http://www.wolter.biz/2010/06/09/next-generation-user-interfaces-how-to-kommandozeile/">Kommandozeile</a> </li>
<li><a href="http://www.wolter.biz/2010/06/09/next-generation-user-interfaces-how-to-spracheingabe/">Spracheingabe</a></li>
<li><a href="http://www.wolter.biz/2010/07/05/next-generation-user-interfaces-how-to-bildverarbeitung/">Bildverarbeitung</a></li>
<li><a href="http://www.wolter.biz/2010/07/05/next-generation-user-interfaces-how-to-gesten/">Gesten</a></li>
<li><a href="http://www.wolter.biz/2010/07/10/next-generation-user-interfaces-how-to-interoperabilitaet/">Interoperabilit&auml;t (Lego Mindstorms und Wii Remote)</a></li>
</ul>
<p>Im Rahmen meines Vortrags “Next Generation User Interfaces How-To” sind bereits Beispiele entstanden, die es <a href='http://www.wolter.biz/blog/wp-content/uploads/2010/05/samples_flash.zip'>hier f&uuml;r Flash</a> und <a href='http://www.wolter.biz/blog/wp-content/uploads/2010/05/samples_silverlight.zip'>hier f&uuml;r Silverlight</a> als ZIP zum Download gibt. &Uuml;ber weitere Anregungen f&uuml;r neue Beispiele freue ich mich sehr, nur her damit!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/05/13/next-generation-user-interfaces-how-to/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Metro styled Silverlight Applications</title>
		<link>http://www.wolter.biz/2010/04/29/metro-styled-silverlight-applications/</link>
		<comments>http://www.wolter.biz/2010/04/29/metro-styled-silverlight-applications/#comments</comments>
		<pubDate>Thu, 29 Apr 2010 21:31:56 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Silverlight]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=608</guid>
		<description><![CDATA[People seem to like the new Windows Phone 7 Metro Design (as I do). Unfortunately you cannot use this design in regular Silverlight Applications by default. Therefore I extracted the styles and templates, changed a few settings (e. g. some &#8220;HitTests&#8221; are disabled which we need for mouse users) and packed everything together in a [...]]]></description>
			<content:encoded><![CDATA[<p>People seem to like the new Windows Phone 7 Metro Design (as I do). Unfortunately you cannot use this design in regular Silverlight Applications by default. Therefore I extracted the styles and templates, changed a few settings (e. g. some &#8220;HitTests&#8221; are disabled which we need for mouse users) and packed everything together in a single ResourceDictionary. To make usage easier I added implicit styles for Button, ToggleButton, CheckBox, RadioButton, PasswordBox, ProgressBar, TextBox, TextBlock, Slider, ScrollViewer and ListBox. There are still some things to do, but I hope it will make it easier for you, to use the Metro Design in regular Silverlight Applications. You can Download a Visual Studio 2010/Expression Blend 4 Solution as ZIP <a href='http://www.wolter.biz/blog/wp-content/uploads/2010/04/SilverlightMetroDesignApplication.zip'>here</a>. Use this project as starting point or just copy the ResourceDictionary <a href='http://www.wolter.biz/blog/wp-content/uploads/2010/04/MetroDesignResourceDictionary.zip'>MetroDesignResourceDictionary.xaml</a> to your project. For the latter you need to make sure to correctly include the fonts referred by the ResourceDictionary (Segeo WP, Segeo WP Light, Segeo WP Semibold and Segeo WP Semilight).</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/04/29/metro-styled-silverlight-applications/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
