Changing PixelSense Touch Visualization Colors

Like in all the large format multitouch device even on Samsung Sur40 for Microsoft PixelSense we can notice the 100ms latency between the user interaction and the hardware response. If developer doesn0t care about this could become in a really worst user experience even because the latency, on small devices like the new Microsoft Surface, basically doesn't exists.
Just because of these that, about me, the five design principles for the Windows Store application are fully applicable to the multiuser multitouch development for large format displays:

  • Pride in craftsmanship
  • Be fast and fluid
  • Authentically digital
  • Do more with less:
  • Win as one

To fulfill the second principle, be fast and fluid, on the Surface SDK we have a secret weapon:  the Touch Visualization Colors that can be used and changed thanks to the TouchVisualizer Class (another good post can be found here).

Thanks to the TouchVisualilzer is possible to change the color of the glow under touch. The Interesting part is that is possible to modify this behavior globally for all the SurfaceWindow or for each Surface Control. 

Changing it globally could be interesting to match application or branding requirements, by changing individual controls you can help users understand witch they are interacting giving a great user experience.

Touch visualizations use three color to create tethers that appear to have depth.

An example of using it globally could be:

<s:SurfaceWindow x:Class="CV_CustomizeColors.SurfaceWindow1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="http://schemas.microsoft.com/surface/2008"
    Title="CV_CustomizeColors"  Height="840" Width="1040"
    s:TouchVisualizer.VisualizationColor1="{DynamicResource {x:Static s:SurfaceColors.Accent1ColorKey}}" 
    s:TouchVisualizer.VisualizationColor2="{DynamicResource {x:Static s:SurfaceColors.Accent2ColorKey}}" 
    s:TouchVisualizer.VisualizationColor3="{DynamicResource {x:Static s:SurfaceColors.Accent3ColorKey}}" 
    >

... your content here

</s:SurfaceWindow>

 

And using it for single control customization:

<s:SurfaceTextBox>
            <s:TouchVisualizer.VisualizationColor1>
                <Color A="255" R="27" G="160" B="225" />
            </s:TouchVisualizer.VisualizationColor1>
            <s:TouchVisualizer.VisualizationColor2>
                <Color A="255" R="255" G="255" B="255" />
            </s:TouchVisualizer.VisualizationColor2>
            <s:TouchVisualizer.VisualizationColor3>
                <Color A="255" R="234" G="10" B="225" />
            </s:TouchVisualizer.VisualizationColor3>
        </s:SurfaceTextBox>

 

Ultimi Post

Discalmer

Articles and content of this blog aren't and shouldn't be interpreted as professional advice or opinions. Author writes on a personal basis and as part of their own research, experimentation and knowledge. Opinions expressed aren't in any way attributable to professional affiliations / institutional thereof or to opinions that the author express as part of their roles / positions that may be quite different from that reported here.