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

<channel>
	<title>Sascha Wolter &#187; Silverlight</title>
	<atom:link href="http://www.wolter.biz/tag/silverlight/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.wolter.biz</link>
	<description>Craftsman for Pervasive Computing, Rich Applications and Mobile Apps in all flavors.</description>
	<lastBuildDate>Wed, 18 Jan 2012 20:07:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.4</generator>
		<item>
		<title>I do not care – Technologieneutrale Anwendungsentwicklung f&#252;r mobile Ger&#228;te</title>
		<link>http://www.wolter.biz/2011/09/13/i-do-not-care-technologieneutrale-anwendungsentwicklung-fur-mobile-gerate/</link>
		<comments>http://www.wolter.biz/2011/09/13/i-do-not-care-technologieneutrale-anwendungsentwicklung-fur-mobile-gerate/#comments</comments>
		<pubDate>Tue, 13 Sep 2011 13:58:34 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[AIR]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[Conference]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Lego Mindstorms]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[Windows Phone 7]]></category>
		<category><![CDATA[WPF]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=837</guid>
		<description><![CDATA[Kaum ein Thema ist m&#252;hsamer, als sich bei einem Projekt f&#252;r die vermeintlich richtige Technologie zu entscheiden. Ganz besonders dann, wenn diese Entscheidung auch noch von strategischer Bedeutung und im besten Fall ger&#228;teunabh&#228;ngig sein soll. Und wie man es macht, macht man es verkehrt, denn auch die Glaskugel verr&#228;t uns nicht, was schon in wenigen [...]]]></description>
			<content:encoded><![CDATA[<p>Kaum ein Thema ist m&uuml;hsamer, als sich bei einem Projekt f&uuml;r die vermeintlich richtige Technologie zu entscheiden. Ganz besonders dann, wenn diese Entscheidung auch noch von strategischer Bedeutung und im besten Fall ger&auml;teunabh&auml;ngig sein soll. Und wie man es macht, macht man es verkehrt, denn auch die Glaskugel verr&auml;t uns nicht, was schon in wenigen Monaten angesagt ist. Doch wenn man die richtigen Konzepte versteht und mit etablierten Mustern arbeitet, dann ist es fast egal, f&uuml;r welche Plattform eine Anwendung erstellt wird und ob diese nativ oder weborientiert arbeitet. Sprachen wie JavaScript, Java, Objective-C, C# oder was auch immer verkommen zu einer austauschbaren Nebens&auml;chlichkeit.</p>
<p>In meinem aktuellen Vortrag zeige ich, wie ich dieser Herausforderung begegne und was ich in fast 15 Jahren als Rich-Application-Experte f&uuml;r Desktop, Browser und Mobile von Flash &uuml;ber Silverlight bis hin zu HTML5 gelernt habe, um den st&auml;ndig wechselnden Anforderungen Herr zu werden. Aus der Praxis bew&auml;hrte Prozesse und Entwurfsmuster werden ebenso behandelt wie eine grundlegende Softwarearchitektur und beispielhaft in eine konkrete Anwendung &uuml;berf&uuml;hrt!</p>
<p>Die Folien zu diesem Vortrag gibt es <a href='http://www.wolter.biz/blog/wp-content/uploads/2011/09/i_do_not_care.pdf'>hier als PDF</a> (ca. 4 MB). Konstruktive Kritik und Anregungen sind willkommen&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2011/09/13/i-do-not-care-technologieneutrale-anwendungsentwicklung-fur-mobile-gerate/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Kostenlose Lernvideos zum Windows Phone 7</title>
		<link>http://www.wolter.biz/2011/07/27/kostenlose-lernvideos-zum-windows-phone-7/</link>
		<comments>http://www.wolter.biz/2011/07/27/kostenlose-lernvideos-zum-windows-phone-7/#comments</comments>
		<pubDate>Wed, 27 Jul 2011 14:39:37 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[Tips]]></category>
		<category><![CDATA[Video]]></category>
		<category><![CDATA[DVDs]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Lernvideo]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[Windows Phone 7]]></category>
		<category><![CDATA[XAML]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=828</guid>
		<description><![CDATA[Eigentlich ist es halb so wild, f&#252;r das Windows Phone 7 Anwendungen zu entwickeln. Ein paar Grundlagen C# (oder Visual Basic), der sichere Umgang mit Expression Blend und Kenntnis der wenigen aber vorhandenen Stolperfallen reichen aus. Doch die eine oder andere Anwendung zeigt, dass diese Dinge nicht jedem von Anfang an gel&#228;ufig sind. Und mir [...]]]></description>
			<content:encoded><![CDATA[<p>Eigentlich ist es halb so wild, f&uuml;r das Windows Phone 7 Anwendungen zu entwickeln. Ein paar Grundlagen C# (oder Visual Basic), der sichere Umgang mit Expression Blend und Kenntnis der wenigen aber vorhandenen Stolperfallen reichen aus. Doch die eine oder andere Anwendung zeigt, dass diese Dinge nicht jedem von Anfang an gel&auml;ufig sind. Und mir erging es am Anfang nicht besser und so musste ich beim Erlernen der Besonderheiten einiges Lehrgeld zahlen.</p>
<p>Um anderen diesen Einstieg zu erleichtern und die typischen Fehler vermeiden zu helfen gibt es die Erkenntnisse daraus als <a href="http://www.amazon.de/exec/obidos/ASIN/3902550910/wolter-21">Lernvideo auf einer DVD</a> (oder online).</p>
<p>Einen gro&szlig;en Teil der Lerninhalte gibt es aber auch kostenlos. Teils beim Verlag video2brain und teils als App im Marketplace. Au&szlig;erdem finden sich bei Vimeo noch Teile der DVD und einiges mehr. Hier mal ein kleiner Auszug und eine m&ouml;gliche Reihenfolge f&uuml;r den Einstieg:</p>
<li>Einen Einstieg in die schnelle Anwendungsentwicklung und das Prototyping bietet <a href="http://vimeo.com/18098522">„Windows Phone 7 Fundamentals (Teil 1 von 5) – Prototyping“</a>.</li>
<li>Wer sich eher mit Animationen besch&auml;ftigen m&ouml;chte, findet in <a href="http://vimeo.com/23052105">„Windows Phone 7: Bewegung kommt ins Spiel”</a> alles wichtige dazu.</li>
<li>Den Umgang mit grafischen Elementen und deren Wiederverwendung zeigt <a href="http://vimeo.com/23051455">„Windows Phone 7: Ressourcen als Styleguide f&uuml;r Visual Studio und Expression Blend“</a>.</li>
<li>Die Nutzung Telefon spezifischer Funktionen erkl&auml;rt <a href="http://vimeo.com/23052830">„Windows Phone 7: Spezielle Aufgaben f&uuml;r das Telefon (Launcher und Chooser)“</a>.</li>
<li>Wer das Mikrofon nutzen oder auch das Zusammenspiel vom Silverlight mit XNA sehen will, der findet eine Anleitung in <a href="http://vimeo.com/18100998">„Windows Phone 7 Fundamentals (Teil 5 von 5) &#8211; XNA und Mikrofon“</a>.</li>
<li>Mehrprachigkeit darf nat&uuml;rlich auch nicht vergessen werden und so f&uuml;hrt <a href="http://vimeo.com/18100353">„Windows Phone 7 Fundamentals (Teil 4 von 5) – Mehrsprachigkeit“</a> in dieses Thema ein.</li>
<p>Das ist aber noch nicht genug und so gibt es erg&auml;nzend dazu noch drei weitere Videos als App im Marketplace:</p>
<li>Den Umgang mit den sehr m&auml;chtigen Verhalten zeigt <a href=" http://windowsphone.com/s?appid=e11d1d7c-aca0-e011-986b-78e7d1fa76f8">„Lernvideo Verhalten (Behaviors)“</a>.</li>
<li><a href="http://windowsphone.com/s?appid=a0f39c53-4b9c-e011-986b-78e7d1fa76f8">„Lernvideo Softwarearchitektur (MVVM)”</a> erkl&auml;rt, wie eine Windows Phone 7 App grunds&auml;tzlich nach dem MVVM Muster aufgebaut sein k&ouml;nnte.</li>
<li>Eine der gr&ouml;&szlig;ten Stolperfallen ist das Tombstoning (also das Unter- oder Abbrechen von Anwendungen). Wie damit umgegangen werden kann zeigt <a href="http://windowsphone.com/s?appid=b0f544f3-a8a0-e011-986b-78e7d1fa76f8">„Lernvideo Tombstoning“</a>.</li>
<p>Weitere Videos zu Expression Blend inkl. SketchFlow finden sich unter <a href="http://vimeo.com/album/149180">http://vimeo.com/album/149180</a>. Eine Schritt-f&uuml;r-Schritt-Anleitung der Datendienste auf Basis von WCF findet sich unter <a href="http://vimeo.com/album/271975">http://vimeo.com/album/271975</a>. Und obwohl diese Videos sich auf Silverlight f&uuml;r den Webbrowser beziehen, kann das Meiste daraus auch f&uuml;r das Windows Phone 7 genutzt werden.</p>
<p>&Uuml;ber eine – hoffentlich motivierende – R&uuml;ckmeldung zu den Videos und Vorschl&auml;ge f&uuml;r weitere Inhalte w&uuml;rde ich mich sehr freuen…</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2011/07/27/kostenlose-lernvideos-zum-windows-phone-7/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Buchtipp: Silverlight, was wirklich wichtig ist!</title>
		<link>http://www.wolter.biz/2011/01/30/buchtipp-silverlight-was-wirklich-wichtig-ist/</link>
		<comments>http://www.wolter.biz/2011/01/30/buchtipp-silverlight-was-wirklich-wichtig-ist/#comments</comments>
		<pubDate>Sun, 30 Jan 2011 11:07:44 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[Books]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[Windows Phone 7]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=809</guid>
		<description><![CDATA[Jetzt besch&#228;ftige ich mich mit Silverlight schon mehr oder weniger seit dem es auf der Welt ist. Dabei geh&#246;rt auch die eine oder andere durchaus anspruchsvolle Anwendung zum Portfolio. Und so bin ich eher nicht davon ausgegangen, noch auf ein Buch zu treffen, das zu einem wirklichen Erkenntnisgewinn f&#252;hren kann. Weit gefehlt! Denn Silverlight 4 [...]]]></description>
			<content:encoded><![CDATA[<p>Jetzt besch&auml;ftige ich mich mit Silverlight schon mehr oder weniger seit dem es auf der Welt ist. Dabei geh&ouml;rt auch die eine oder andere durchaus anspruchsvolle Anwendung zum Portfolio. Und so bin ich eher nicht davon ausgegangen, noch auf ein Buch zu treffen, das zu einem wirklichen Erkenntnisgewinn f&uuml;hren kann. Weit gefehlt! Denn Silverlight 4 Unleashed strotzt nur so vor Tipps auch f&uuml;r fortgeschrittene Entwickler. Dabei schafft es der Autor durchaus, auch weniger erfahrene Entwickler in die Welt ernsthafter Anwendungsentwicklung zu f&uuml;hren. Nach vielleicht 100 Seiten eher grunds&auml;tzlicher Themen f&uuml;r den ambitionierten Einsteiger geht es dann auch gleich mit Dependency Properties und Co. in die Vollen – wem das evtl. zu schnell geht, der kann auf das Vorg&auml;nger Buch des Autors zu Silverlight 2 zur&uuml;ckgreifen (der Autor k&uuml;ndigte an, dass dieses kostenlos als PDF verf&uuml;gbar sein soll).</p>
<p>Das z&uuml;gige Tempo wird bis zum Ende durchgehalten. So gut wie alle wichtigen Themen werden behandelt, darunter MVVM (Model-View-ViewModel), Erstellung von LoB-Anwendungen (Line of Business), Multitouch  sowie MEF (Managed Extensibility Framework). Am meisten hat mich bei dem Buch aber begeistert, dass trotz der eher technischen Ausrichtung auch endlich mal die Vorteile von Expression Blend eindrucksvoll erkl&auml;rt werden. Allein deshalb ist das Buch ein Muss f&uuml;r jeden Entwickler, der Silverlight nicht nur erlernen, sondern das n&ouml;tige Wissen f&uuml;r realistische Anwendungen vermittelt bekommen m&ouml;chte.</p>
<p>„Silverlight 4 Unleashed“<br />
Autor: Laurent Bugnion<br />
Preis: ca. Euro 40,-<br />
ISBN: 0672333368<br />
Erscheinungsdatum: Sams Publishing, 21. Oktober 2010<br />
Link: <a href="http://www.amazon.de/exec/obidos/ASIN/0672333368/wolter-21">http://www.amazon.de/exec/obidos/ASIN/0672333368/wolter-21</a></p>
<p>Das erg&auml;nzende Vorg&auml;ngerbuch ist bei <a href="http://www.amazon.de/exec/obidos/ASIN/0672330148/wolter-21">Amazon</a> f&uuml;r ca. 45,- Euro erh&auml;ltlich.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2011/01/30/buchtipp-silverlight-was-wirklich-wichtig-ist/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Nachbericht .Net User Group Treffen / Windows Phone 7 Fundamentals</title>
		<link>http://www.wolter.biz/2011/01/27/nachbericht-net-user-group-treffen-windows-phone-7-fundamentals/</link>
		<comments>http://www.wolter.biz/2011/01/27/nachbericht-net-user-group-treffen-windows-phone-7-fundamentals/#comments</comments>
		<pubDate>Thu, 27 Jan 2011 10:23:03 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Video]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[Trainings]]></category>
		<category><![CDATA[Windows Phone 7]]></category>

		<guid isPermaLink="false">http://www.wolter.biz/?p=805</guid>
		<description><![CDATA[Gestern Abend war ich bei der .Net User Group Rhein/Ruhr und es hat sehr viel Spa&#223; gemacht, mit den Teilnehmern fast drei Stunden &#252;ber das Windows Phone 7 zu diskutieren. Ich hoffe, es ist gelungen, nicht nur die wesentlichen Ideen und Konzepte zu vermitteln, sondern auch typische Stolperfallen aufzuzeigen. In den Folien zu &#8220;Windows Phone [...]]]></description>
			<content:encoded><![CDATA[<p>Gestern Abend war ich bei der .Net User Group Rhein/Ruhr und es hat sehr viel Spa&szlig; gemacht, mit den Teilnehmern fast drei Stunden &uuml;ber das Windows Phone 7 zu diskutieren. Ich hoffe, es ist gelungen, nicht nur die wesentlichen Ideen und Konzepte zu vermitteln, sondern auch typische Stolperfallen aufzuzeigen. In den <a href='http://www.wolter.biz/blog/wp-content/uploads/2011/01/Windows-Phone-7-Fundamentals.pdf' target='_blank'>Folien zu &#8220;Windows Phone 7 Fundamentals&#8221; (als PDF mit rund 8MB)</a> finden sich neben einem umfassenden &Uuml;berblick auch einige Anregungen zu Navigation, der Navigations-Historie, dem sogenannten Tombstoning und Performancetipps. Und unter <a href="http://www.vimeo.com/album/213387">http://www.vimeo.com/album/213387</a> findet Ihr noch eine Screencast-Serie mit praktischen Beispielen zum Thema.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2011/01/27/nachbericht-net-user-group-treffen-windows-phone-7-fundamentals/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Buchtipp: 2500 Gramm WPF (und ein bisschen Silverlight)</title>
		<link>http://www.wolter.biz/2010/08/15/buchtipp-2500-gramm-wpf-und-ein-bisschen-silverlight/</link>
		<comments>http://www.wolter.biz/2010/08/15/buchtipp-2500-gramm-wpf-und-ein-bisschen-silverlight/#comments</comments>
		<pubDate>Sun, 15 Aug 2010 11:26:25 +0000</pubDate>
		<dc:creator>Sascha Wolter</dc:creator>
				<category><![CDATA[Books]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[WPF]]></category>
		<category><![CDATA[XAML]]></category>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

]]></content:encoded>
			<wfw:commentRss>http://www.wolter.biz/2010/06/09/next-generation-user-interfaces-how-to-kommandozeile/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

