<?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; News</title>
	<atom:link href="http://www.wolter.biz/category/news/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</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>Nachbericht MIX10</title>
		<link>http://www.wolter.biz/2010/03/22/nachbericht-mix10/</link>
		<comments>http://www.wolter.biz/2010/03/22/nachbericht-mix10/#comments</comments>
		<pubDate>Mon, 22 Mar 2010 14:32:03 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Silverlight]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/2010/03/22/nachbericht-mix10/</guid>
		<description><![CDATA[Das die gut 3000 Teilnehmer der diesj&#228;hrigen MIX eine spannende Zeit hatten, lag nicht nur an den Inhalten. Denn Microsoft hat sich mit Las Vegas einen Eindrucksvollen Ort f&#252;r die eigene Web-Konferenz MIX ausgesucht. Das riesige Konferenzzentrum lag direkt am Flughafen wo die Stra&#223;e mit den vielen ber&#252;hmten Casinos endet. Aber es gab gen&#252;gend Gr&#252;nde, [...]]]></description>
			<content:encoded><![CDATA[<p>Das die gut 3000 Teilnehmer der diesj&auml;hrigen MIX eine spannende Zeit hatten, lag nicht nur an den Inhalten. Denn Microsoft hat sich mit Las Vegas einen Eindrucksvollen Ort f&uuml;r die eigene Web-Konferenz MIX ausgesucht. Das riesige Konferenzzentrum lag direkt am Flughafen wo die Stra&szlig;e mit den vielen ber&uuml;hmten Casinos endet. Aber es gab gen&uuml;gend Gr&uuml;nde, die Konferenz auch wirklich zu besuchen. Zumal diese durchweg gut organisiert war und es an nichts fehlte. Auch gelingt es Microsoft zunehmend besser, neben den technischen auch gestalterische und emotionale Themen aufzugreifen, etwa im Vortrag <a href="http://live.visitmix.com/MIX10/Sessions/CL14">„Designing Windows Phone UI and Design Language“</a>.</p>
<p>Gerade das Windows Phone schien die Teilnehmer zu begeistern: Beinahe alle Vortr&auml;ge zum Thema waren &uuml;berf&uuml;llt. Aber auch der Internet Explorer 9 und die Themen rund um Silverlight waren beliebt. Wie bei dieser Art der Hausmessen &uuml;blichen, gab es zahlreiche Vortr&auml;ge durch Mitarbeiter und Microsoft nahestehende Partner. Dennoch wurde auch mit Kritik konstruktiv umgegangen und alte Vergehen wie der Internet Explorer 6 wurden erst gar nicht sch&ouml;n geredet (es gab wohl sogar ein Programm, wo Microsoft den Firmen Blumen schickt, die den Internet Explorer 6 beerdigen). Die Qualit&auml;t der Vortr&auml;ge war durchweg gut, mein pers&ouml;nlicher Favorit bei den Vortr&auml;gen, die ich vor Ort besuchen konnte, ist &uuml;brigens <a href="http://live.visitmix.com/MIX10/Sessions/CL60">„Silverlight Performance on the Windows Phone“</a> von Seema Ramchandani.</p>
<p>Aber jetzt muss ich erst einmal meinen Biorhythmus wieder in Ordnung bringen und die restlichen Vortr&auml;ge anschauen, die sich unter <a href="http://live.visitmix.com/">http://live.visitmix.com/</a> kostenlos als Video und teilweise sogar inkl. Foliens&auml;tzen finden. Und ich hoffe, dass ich auch das n&auml;chste Mal wieder zur MIX kann, denn viele interessante Vortr&auml;ge, tolle Gespr&auml;che und ein gelungenes Rahmenprogramm waren die anstrengende Reise wert.</p>
<p>Die Neuigkeiten und Ank&uuml;ndigungen der MIX zu <a href="http://www.heise.de/mobil/meldung/Mix-Microsoft-zeigt-erste-Windows-Phone-Anwendungen-955528.html">Tag 1</a> und <a href="http://www.heise.de/newsticker/meldung/Mix-Ueber-Houston-und-Dallas-zu-Online-Daten-957469.html">Tag 2</a> finden sich beispielsweise bei Heise.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/03/22/nachbericht-mix10/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Jobangebote</title>
		<link>http://www.wolter.biz/2010/02/17/jobangebote/</link>
		<comments>http://www.wolter.biz/2010/02/17/jobangebote/#comments</comments>
		<pubDate>Wed, 17 Feb 2010 15:02:27 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Silverlight]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=541</guid>
		<description><![CDATA[swfobject.embedSWF("http://www.flashforum.de/external/jobreader/flash/FeedReaderApp.swf", "jobreader", "200", "250", "9.0.0","expressInstall.swf" , null, {allowscriptaccess:"always"}, null); Immer wieder erreichen mich Stellengesuche und Jobangebote. Dabei geht es dank des Jobreaders des Flashforums auch viel einfacher, indem der Flashforum Jobreader als Widget auf der eigenen Site oder im Blog eingebunden wird. Zur Verf&#252;gung stehen eine Flash-Version oder alternativ eine Silverlight-Version. Details dazu und eine [...]]]></description>
			<content:encoded><![CDATA[<p><script type="text/javascript" src="http://www.flashforum.de/external/jobreader/flash/swfobject.js"></script><script type="text/javascript">swfobject.embedSWF("http://www.flashforum.de/external/jobreader/flash/FeedReaderApp.swf", "jobreader", "200", "250", "9.0.0","expressInstall.swf" , null, {allowscriptaccess:"always"}, null);</script>
<div id="jobreader" >
	<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="200" height="250"><param name="source" value="http://www.flashforum.de/external/jobreader/silverlight/bin/FeedReaderApp.xap"/><param name="onError" value="onSilverlightError" /><param name="background" value="white" /><param name="minRuntimeVersion" value="3.0.40624.0" /><param name="autoUpgrade" value="true" /><a href="http://go.microsoft.com/fwlink/?LinkID=149156&#038;v=3.0.40624.0" style="text-decoration:none"><br />
			<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/><br />
		</a><br />
	</object>
</div>
<p>Immer wieder erreichen mich Stellengesuche und Jobangebote. Dabei geht es dank des Jobreaders des Flashforums auch viel einfacher, indem der Flashforum Jobreader als Widget auf der eigenen Site oder im Blog eingebunden wird. Zur Verf&uuml;gung stehen eine Flash-Version oder alternativ eine Silverlight-Version. Details dazu und eine Anleitung zur Verwendung finden sich unter <a href="http://jobreader.flashforum.de/">http://jobreader.flashforum.de/</a>.</p>
<p>Abweichend von der Erkl&auml;rung dort, habe ich hier als Fallback f&uuml;r Flash die Silverlight-Version eingebaut. Wenn also Flash fehlt, dann kommt Silverlight. Au&szlig;erdem habe ich den Script-Zugriff f&uuml;r Flash aktiviert, damit die Weiterleitung zu einem Jobangebot funktioniert</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code"><pre class="html" style="font-family:monospace;">&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.flashforum.de/external/jobreader/flash/swfobject.js&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;swfobject.embedSWF(&quot;http://www.flashforum.de/external/jobreader/flash/FeedReaderApp.swf&quot;, &quot;jobreader&quot;, &quot;200&quot;, &quot;250&quot;, &quot;9.0.0&quot;,&quot;expressInstall.swf&quot; , null, {allowscriptaccess:&quot;always&quot;}, null);&lt;/script&gt;&lt;div id=&quot;jobreader&quot; &gt;
	&lt;object data=&quot;data:application/x-silverlight-2,&quot; type=&quot;application/x-silverlight-2&quot; width=&quot;200&quot; height=&quot;250&quot;&gt;
		&lt;param name=&quot;source&quot; value=&quot;http://www.flashforum.de/external/jobreader/silverlight/bin/FeedReaderApp.xap&quot;/&gt;
		&lt;param name=&quot;onError&quot; value=&quot;onSilverlightError&quot; /&gt;
		&lt;param name=&quot;background&quot; value=&quot;white&quot; /&gt;
		&lt;param name=&quot;minRuntimeVersion&quot; value=&quot;3.0.40624.0&quot; /&gt;
		&lt;param name=&quot;autoUpgrade&quot; value=&quot;true&quot; /&gt;
		&lt;a href=&quot;http://go.microsoft.com/fwlink/?LinkID=149156&amp;v=3.0.40624.0&quot; style=&quot;text-decoration:none&quot;&gt;
			&lt;img src=&quot;http://go.microsoft.com/fwlink/?LinkId=108181&quot; alt=&quot;Get Microsoft Silverlight&quot; style=&quot;border-style:none&quot;/&gt;
		&lt;/a&gt;
	&lt;/object&gt;
&lt;/div&gt;</pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/02/17/jobangebote/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Flash CS4 Grundlagen: Zeichnungsobjekte verstehen</title>
		<link>http://www.wolter.biz/2010/01/29/flash-cs4-grundlagen-zeichnungsobjekte-verstehen/</link>
		<comments>http://www.wolter.biz/2010/01/29/flash-cs4-grundlagen-zeichnungsobjekte-verstehen/#comments</comments>
		<pubDate>Fri, 29 Jan 2010 08:57:37 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/2010/01/29/flash-cs4-grundlagen-zeichnungsobjekte-verstehen/</guid>
		<description><![CDATA[[vimeo 7814470 500 282] In diesem Lernvideo zeige ich, wie in Flash Zeichnungsobjekte erstellt und angepasst werden.]]></description>
			<content:encoded><![CDATA[<p>[vimeo 7814470 500 282]<br />
In diesem Lernvideo zeige ich, wie in Flash Zeichnungsobjekte erstellt und angepasst werden. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/01/29/flash-cs4-grundlagen-zeichnungsobjekte-verstehen/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Silverlight 4 Update</title>
		<link>http://www.wolter.biz/2010/01/12/silverlight-4-update/</link>
		<comments>http://www.wolter.biz/2010/01/12/silverlight-4-update/#comments</comments>
		<pubDate>Tue, 12 Jan 2010 13:57:33 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=509</guid>
		<description><![CDATA[Microsoft nutzte seine Entwicklerkonferenz PDC (Professional Developer Conference), die vom 17. bis 19. November in Los Angeles stattfand, wie gewohnt, um neue Produkte vorzustellen. Mit dabei war die vierte Version der webbasierten Laufzeitumgebung Silverlight. Doch auch wenn Silverlight sich an der Windows Presentation Foundation (WPF) orientiert und seit Version 2 eher eine Art .NET f&#252;r [...]]]></description>
			<content:encoded><![CDATA[<p>Microsoft nutzte seine Entwicklerkonferenz PDC (Professional Developer Conference), die vom 17. bis 19. November in Los Angeles stattfand, wie gewohnt, um neue Produkte vorzustellen. Mit dabei war die vierte Version der webbasierten Laufzeitumgebung Silverlight. Doch auch wenn Silverlight sich an der Windows Presentation Foundation (WPF) orientiert und seit Version 2 eher eine Art .NET f&uuml;r das Web ist, wird gerne der Vergleich zu Adobes Flash Plattform bem&uuml;ht, da beide eine ad&auml;quate L&ouml;sung f&uuml;r ein reichhaltiges Benutzererlebnis im Internet vergleichbar mit Desktop-Anwendungen versprechen: Auch bekannt als Rich Internet Applications. Microsoft zeigte auf der PDC jedoch nicht nur Silverlight 4 sondern auch die erweiterte Integration von Silverlight in die zweite Beta von Visual Studio 2010. Ob die Silverlight Produktfamilie mittlerweile auf Augenh&ouml;re mit Flash ist, k&ouml;nnen Sie in der aktuellen <a href="http://www.weave.de/">Weave</a> nachlesen. Die Beispiele aus dem Artikel gibt es bereits <a href='http://www.wolter.biz/blog/wp-content/uploads/2010/01/silverlight_4_update.zip'>hier als ZIP zum Download f&uuml;r Visual Studio 2010, Beta 2</a>. Screencast folgen in den n&auml;chsten Tagen…</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/01/12/silverlight-4-update/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Next Generation User Interactions &#8220;How To&#8221;</title>
		<link>http://www.wolter.biz/2010/01/04/next-generation-user-interactions-how-to/</link>
		<comments>http://www.wolter.biz/2010/01/04/next-generation-user-interactions-how-to/#comments</comments>
		<pubDate>Mon, 04 Jan 2010 09:59:53 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=487</guid>
		<description><![CDATA[Das neue Jahr ist noch jung, aber der erste Konferenz-Vortrag steht schon fest: Next Generation User Interactions &#8220;How To&#8221;. Darin zeige ich zahlreiche nat&#252;rliche und ungew&#246;hnliche Eingabeformen f&#252;r interaktive Anwendungen und m&#246;chte mit den Teilnehmern auch &#252;ber deren Sinn und Unsinn diskutieren. Der Fokus liegt jedoch auf der Praxis: Anhand praktische Code-Schnippsel in ActionScript, C# [...]]]></description>
			<content:encoded><![CDATA[<p>Das neue Jahr ist noch jung, aber der erste Konferenz-Vortrag steht schon fest: Next Generation User Interactions &#8220;How To&#8221;. Darin zeige ich zahlreiche nat&uuml;rliche und ungew&ouml;hnliche Eingabeformen f&uuml;r interaktive Anwendungen und m&ouml;chte mit den Teilnehmern auch &uuml;ber deren Sinn und Unsinn diskutieren. Der Fokus liegt jedoch auf der Praxis: Anhand praktische Code-Schnippsel in ActionScript, C# und Java wird die Umsetzung f&uuml;r k&uuml;nstlerische Installationen und Rich Internet Applications von Sprachsteuerung bis Multitouch demonstriert. &Uuml;ber Anregungen freue ich mich sehr &#8211; noch ist bis zur <a href=" http://createordie.de/webinale2010">Webinale</a> in Berlin vom 31. Mai bis zum 2. Juni 2010 ja auch noch gen&uuml;gend Zeit.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/01/04/next-generation-user-interactions-how-to/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Interview mit Ulrich Leschak</title>
		<link>http://www.wolter.biz/2009/12/23/interview-mit-ulrich-leschak/</link>
		<comments>http://www.wolter.biz/2009/12/23/interview-mit-ulrich-leschak/#comments</comments>
		<pubDate>Wed, 23 Dec 2009 12:23:16 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=449</guid>
		<description><![CDATA[[vimeo 8256727 500 282] Auf dem RIA Summer Jam in M&#252;nchen trafen wir den Kommunikationsdesigner Ulrich Leschak. Im Interview sprachen er und ich unter anderem &#252;ber den Antrieb, auf Konferenzen vorzutragen und daf&#252;r Inhalte zu finden.]]></description>
			<content:encoded><![CDATA[<p>[vimeo 8256727 500 282]<br />
Auf dem RIA Summer Jam in M&uuml;nchen trafen wir den Kommunikationsdesigner <a href="http://www.leschak.com">Ulrich Leschak</a>. Im Interview sprachen er und ich unter anderem &uuml;ber den Antrieb, auf Konferenzen vorzutragen und daf&uuml;r Inhalte zu finden.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2009/12/23/interview-mit-ulrich-leschak/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
