Manipulation, MatrixTransformation en Canvas.Top, Canvas.Left

Een van de meest voor de hand liggende multitouch-toepassingen is het manipuleren van beelden: scale, rotate and translate. Met de Manipulation events van WPF4 (op Windows 7) is dit eenvoudig. Het komt erop neer de matrix van de transformatie aan te passen.

In een eenvoudig voorbeeld, bleek dit te werken. Maar in een echt project-voorbeeld kreeg ik het verkleinen/vergroten en roteren niet goed. Het leek alsof deze gebeurden tegenover een center-punt dat ver buiten het gemanipuleerd object lagen. Na lang zoeken en een paar suggesties van Anson Tsao kwam ik eruit.

Screenshot: Touch Manipulation Issue Het exact positioneren van een image door middel van Canvas.Top en Canvas.Left conflicteert met het gebruik van RenderTransformations.  Je kan beter je positionering in de MatrixTransformation zetten:

<Image Source=”/TouchTransformIssue;component/images/Koala.jpg” Width=”200″ x:Name=”imageKoala” IsManipulationEnabled=”True”>
<Image.RenderTransform>
<MatrixTransform Matrix=”1,0,0,1,200,100″/>
</Image.RenderTransform>
</Image>

In bijgaande code kan je het effect zien door Canvas.Top/Canvas.Left te gebruiken.

(download code)

WPF4 Beta 2 (Preview)TouchDown bug

Werkend met de Touch Events van WPF4 Beta 2, kwam ik op een vervelend bugje. Blijkbaar worden de TouchDown en PreviewTouchDown events pas afgevuurd net vóór TouchUp en PreviewTouchUp. Dit is niet alleen zo bij je eigen EventHandlers, maar ook het default gedrag van bv. Buttons.

En toch, toch had ik het al zien werken.

Via Szymon Kobalczyk’s Blog kwam ik op de IsManipulationEnabled property.  Normaal gezien gebruik ik deze alleen in combinatie met de Manipulation events (Delta, Starting, …).

Het komt er hier op neer: als je IsManipulationEnabled op true zet, dan komen de TouchDown en PreviewTouchDown events wél goed door.

Maar ik vond nog meer. Het volstaat om de property aan en vervolgens weer af te zetten opdat de events zouden doorkomen.

Je kan het zelf uitproberen. Bij (Preview)TouchDown van de Border controls, wordt de rand dikker getekend.

Download Source code

IIyama Multitouch scherm getest

IIyama heeft zijn eerste multi touch scherm uit: de ProLite T2250MTS. Als je prijzen van andere multitouch oplossingen bekijkt, is dit een koopje: voor 300 euro heb je een 22 inch scherm met een resolutie van 1900×1080 (High Definition).

Daar moest een filmpje van gemaakt. Geen uitpakfilmpje, maar wel een “doe eens wat”-filmpje. Eerste ondervinding: het is niet gemakkelijk om te multitouchen met één hand en daarnaast een fotocamera vast te houden in de andere hand. Vergeef mij het schudderige beeld.

[youtube]http://www.youtube.com/watch?v=75MzvaaLC1o[/youtube]

Het is moeilijk om een onderscheid te maken tussen de kwaliteit van het scherm en de ontvankelijkheid van de geteste applicatie of het onderliggende besturingssysteem (Windows 7). Slechts weinig applicaties hebben een meerwaarde met multi-touch.  Google Chrome reageert alsof je met de muis klikt. In Internet Explorer daarentegen kan je met flicks navigeren in je browsergeschiedenis (back button vs. forward button). Het vergt wat oefening om de flicks uit te voeren (zie filmpje).

Mijn development-interesse gaat natuurlijk uit naar de multitouch ondersteuning in WPF 4.0 (Bèta 2) waarmee ik mij de komende weken zal bezighouden.

Een minpuntje, dat misschien zeer persoonlijk is: het scherm aanraken voelt aan alsof je over glas wrijft. Ik kan me voorstellen dat je huid begint te irriteren als je lange tijd multitoucht. Daarbij vergeleken heeft Microsoft Surface een aangenamer touch-gevoel, maar wel een minder aangenaam prijskaartje.

Om te besluiten: heb je Windows 7 en ben je op zoek naar een betaalbaar scherm: aarzel niet om de IIyama ProLite T2250MTS te kopen.  Voor een paar euro’s meer dan een gewoon scherm heb je een multi-touch scherm.

Het begin(t nu pas echt)

Je kon het vannacht op vele plaatsen horen: er werd gefeest, rijkelijk gedineerd, gezongen en gedanst. Om middernacht werd er zelfs her en der vuurwerk afgeschoten en kusten de mensen elkaar liefdevol. Het waren spontane reacties van honderden mensen die de lancering van de Jimability website wilden vieren.

Voor sommigen zal de site jimability.com een spreekwoordelijk koebelletje doen rinkelen. De site is nu direct gelinkt aan het bedrijf Jimability. Voor de persoonlijke blog van Jim, verwijzen we graag naar jiza.net (waar het momenteel rustig mijmeren is in oblivion).