<?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; ActionScript</title>
	<atom:link href="http://www.wolter.biz/tag/actionscript/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>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>Urheber eines Flex-Fehlers verheimlichen</title>
		<link>http://www.wolter.biz/2009/02/20/urheber-eines-flex-fehlers-verheimlichen/</link>
		<comments>http://www.wolter.biz/2009/02/20/urheber-eines-flex-fehlers-verheimlichen/#comments</comments>
		<pubDate>Fri, 20 Feb 2009 20:47:09 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=88</guid>
		<description><![CDATA[Wer m&#246;chte schon gerne, dass sein Name im Web mit einem Programmierfehler in Verbindung gebracht wird? Doch genau das passiert ganz schnell, wenn man ein Projekt in seinem Benutzerverzeichnis anlegt und dieses mit Debug-Informationen ver&#246;ffentlicht – da dies die Standardeinstellung ist, passiert das im Eifer des Gefechtes schnell auch mal versehentlich. Denn dann ist der [...]]]></description>
			<content:encoded><![CDATA[<p>Wer m&ouml;chte schon gerne, dass sein Name im Web mit einem Programmierfehler in Verbindung gebracht wird? Doch genau das passiert ganz schnell, wenn man ein Projekt in seinem Benutzerverzeichnis anlegt und dieses mit Debug-Informationen ver&ouml;ffentlicht – da dies die Standardeinstellung ist, passiert das im Eifer des Gefechtes schnell auch mal versehentlich. Denn dann ist der komplette Pfad zu den zugeh&ouml;rigen Klassen im Flash Debug Player sichtbar (der normale Flash Player zeigt dies nicht an). Das ist nicht nur bei Programmierfehlern peinlich sondern kann auch richtig Probleme machen, wenn der Auftraggeber nicht m&ouml;chte, dass der Name des Programmierers mit einem Projekt in Verbindung gebracht wird.</p>
<p>Mit dem folgenden einfachen Flex-Inhalt erzwinge ich einen Fehler, um das Verhalten eines ver&ouml;ffentlichten Projektes im Fehlerfall zu testen:</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="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;mx:Application</span> <span style="color: #000066;">xmlns:mx</span>=<span style="color: #ff0000;">&quot;http://www.adobe.com/2006/mxml&quot;</span> <span style="color: #000066;">layout</span>=<span style="color: #ff0000;">&quot;absolute&quot;</span> <span style="color: #000066;">creationComplete</span>=<span style="color: #ff0000;">&quot;creationCopmplete_handler(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;mx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #339933;">&lt;![CDATA[</span>
<span style="color: #339933;">			import mx.events.FlexEvent;</span>
<span style="color: #339933;">			private function creationCopmplete_handler(event:FlexEvent):void {</span>
<span style="color: #339933;">				throw new Error(&quot;Forced Error&quot;);</span>
<span style="color: #339933;">			}</span>
<span style="color: #339933;">		]]&gt;</span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx: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:Application<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>Bei der normalen Kompilierung erscheint dann eine Meldung inkl. aller Pfade:</p>
<p><img src="http://www.wolter.biz/blog/wp-content/uploads/2009/02/visible-300x133.png" alt="exception with full path" title="exception with full path" width="300" height="133" class="alignnone size-medium wp-image-94" /></p>
<p>Durch die Compiler-Einstellung <code>-debug=false</code> kann dies aber verhindert werden und die Fehlermeldung ist dann in der Folge anonymisiert. Das selbe Ergebnis erzielen Sie &uuml;brigens auch &uuml;ber das Men&uuml; PROJECT | EXPORT RELEASE BUILD&#8230;!</p>
<p><img src="http://www.wolter.biz/blog/wp-content/uploads/2009/02/hidden-300x133.png" alt="exception with full path" title="exception with full path" width="300" height="133" class="alignnone size-medium wp-image-94" /></p>
<p>Leider fehlen nun  jedoch auch wichtige Informationen f&uuml;r das Debugging. Sprich: Es sollte so oder so ein Projektverzeichnis zum Kompilieren gew&auml;hlt werden, das keine R&uuml;ckschl&uuml;sse auf den Urheber zul&auml;sst – dann muss man sich auch nicht bei einer Debug-Version f&uuml;r Fehler sch&auml;men.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2009/02/20/urheber-eines-flex-fehlers-verheimlichen/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Tipp Flash CS4: ActionScript Vector und Compiler-Konstanten</title>
		<link>http://www.wolter.biz/2008/09/23/tipp-flash-cs4-actionscript-vector-und-compiler-konstanten/</link>
		<comments>http://www.wolter.biz/2008/09/23/tipp-flash-cs4-actionscript-vector-und-compiler-konstanten/#comments</comments>
		<pubDate>Tue, 23 Sep 2008 17:48:37 +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[Flash]]></category>
		<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/2008/09/23/tipp-flash-cs4-actionscript-vector-und-compiler-konstanten/</guid>
		<description><![CDATA[ActionScript ist mit Flash CS4 Professional trotz der in den Medien kursierenden Diskussionen rund um die ActionScript-Basis ECMAScript 4 weiter gewachsen (http://www.flashforum.de/forum/showthread.php?t=257795 und http://blogs.adobe.com/open/2008/08/blog_entry_dated_81408_715_pm.html). Die spektakul&#228;rste Neuerung aus Sicht von Programmierern k&#246;nnte dabei der neue Datentype Vector sein. Dieser erlaubt erstmals typisierte und damit typsichere Listen. Die Verwendung geschieht analog zur Klasse Array. Einzig die [...]]]></description>
			<content:encoded><![CDATA[<p>ActionScript ist mit Flash CS4 Professional trotz der in den Medien kursierenden Diskussionen rund um die ActionScript-Basis ECMAScript 4 weiter gewachsen (<a href="http://www.flashforum.de/forum/showthread.php?t=257795">http://www.flashforum.de/forum/showthread.php?t=257795</a> und <a href="http://blogs.adobe.com/open/2008/08/blog_entry_dated_81408_715_pm.html">http://blogs.adobe.com/open/2008/08/blog_entry_dated_81408_715_pm.html</a>). Die spektakul&auml;rste Neuerung aus Sicht von Programmierern k&ouml;nnte dabei der neue Datentype Vector sein. Dieser erlaubt erstmals typisierte und damit typsichere Listen. Die Verwendung geschieht analog zur Klasse Array. Einzig die Typisierung und das Erstellen bed&uuml;rfen einer neuen Schreibweise mit Angabe des Typs in spitzen Klammern getrennt durch einen Punkt:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
</pre></td><td class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> v:Vector.<span style="color: #66cc66;">&lt;</span>String<span style="color: #66cc66;">&gt;</span>;
v = <span style="color: #000000; font-weight: bold;">new</span> Vector.<span style="color: #66cc66;">&lt;</span>String<span style="color: #66cc66;">&gt;</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</pre></td></tr></table></div>

<p>Zu den Neuerungen geh&ouml;ren au&szlig;erdem die Klassen rund um Text, Pixel Bender (Codename Hydra), 3D und inverse Kinematik. Au&szlig;erdem kann man nun Sounds zur Laufzeit erzeugen, primitive Formen leichter mit der Graphics-Klasse zeichnen und Dateien auch aus dem Browser heraus per FileReferenc lokal laden und speichern. Und in der Bibliothek ist endlich sichtbar, ob es sich um einen MovieClip, ein Sprite oder ein mit dem Flex Integration Kit f&uuml;r Flash aufbereitetes Symbol handelt. Bei der Zusammenarbeit mit Flex hilft es au&szlig;erdem sehr, dass Flash nun endlich auch Metadaten wie AccessibilityClass, ResourceBundle, Style, Embed und SWF versteht – nicht nur in Klassen sogar in Bildskripts. Gerade Embed ist auch in reinen Flash Projekten durchaus n&uuml;tzlich, um Inhalte allein durch die Programmierung und ohne den Umweg &uuml;ber die Bibliothek zu nutzen.<br />
Die Einstellungsm&ouml;glichkeiten von ActionScript umfassen nicht mehr nur eine Sammlung von Klassenpfaden sondern sind &auml;hnlich wie bei Flex in Quellcode-Pfade, externe Bibliotheken zur Laufzeit (Runtime Shared Libraries) und Bibliohtekspfade zur Kompilierzeit unterteilt. Hinter den ActionScript-Einstellungen im Register Flash der Einstellungen f&uuml;r das Ver&ouml;ffentlichen im Men&uuml; Datei verbergen sich nicht nur die Klassenpfade. Dort k&ouml;nnen auch Konstanten angelegt werden, die wie normale Variablen in ActionScript zu nutzen sind. Au&szlig;erdem erlauben diese auch eine bedingte Kompilierung, wenn der relevante Code hinter der Konstante in geschweiften Klammern steht:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="actionscript" style="font-family:monospace;">CONFIG::FLASH_AUTHORING <span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;Foo&quot;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span>CONFIG::FLASH_AUTHORING<span style="color: #66cc66;">&#41;</span>;</pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2008/09/23/tipp-flash-cs4-actionscript-vector-und-compiler-konstanten/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
