Hands-On Lab. Sensors -.NET. Lab version: Last updated: 12/3/2010

Transcription

1 Hands-On Lab Sensors -.NET Lab version: Last updated: 12/3/2010

2 CONTENTS OVERVIEW... 3 EXERCISE 1: INTEGRATING THE SENSOR API INTO A WPF APPLICATION... 5 Task 1 Prepare a WPF Project for Sensor Integration... 5 Task 2 Add Layout to the WPF Application... 7 Task 3 Add Image Specific Logic Task 4 Setting up the Sensor Helper Task 5 Integrating ViewModel and the Sensor Helper Task 6 Add Light Sensor Interaction with the UI Task 7 Add Accelerometer Sensor Interaction with the UI (Optional) SUMMARY

3 Overview The Windows 7 Sensor & Location Platform enables your applications to adapt to the current environment and change the way they look, feel or behave. Here are few examples: When using a mobile PC (for example, a laptop or tablet) outdoors in a sunny day, an application might increase brightness, contrast and de-saturate colors to increase screen readability An application might provide location-specific information, such as nearby restaurants An application might use 3D accelerometer and buttons as a game controller An application might use a human presence sensor to change the state of the Messenger status Figure 1 Modified MSDN Reader that uses an ambient light sensor to change contrast, size and color saturation The Sensor & Location Platform has many advantages compared to proprietary solutions: Hardware-independence: No need to learn and invest in a particular vendor's API; all sensors types are handled very similarly Privacy: Because Microsoft recognizes that sensor and location data are private, personally identifying information, all sensors are disabled by default. You can enable/disable sensors at any time via the Control Panel. Applications might prompt you to enable specific sensors via a secure consent UI. 3

4 Application sharing: Multiple applications can consume data from the same sensor simultaneously Location simplicity: The Location API lets you obtain the location without caring about the particular mechanism used to obtain the information, for example, GPS, cell-tower or Wi-Fi hotspot triangulation. The Location API automatically chooses the most accurate sensor data available. In addition, you don't need to implement GPS protocols such as NMEA. Objectives In this Hands-On Lab, you will learn how to integrate the Sensor API into your WPF application. Like the Location API, the Sensor API is COM-based. You will use the Windows API Code Pack that wraps the Sensor API in a type-safe and convenient way. System Requirements You must have the following items to complete this lab: Microsoft Visual Studio 2008 SP1 Windows 7 RC or later Graphics card fully supporting DirectX and PixelShaders. Hardware with Windows 7-compatible Ambient Light Sensor with driver installed or Virtual Ambient Light Sensor Hardware with Windows 7-compatible 3-axis Accelerometer with driver installed (optional) 4

5 Exercise 1: Integrating the Sensor API into a WPF Application Task 1 Prepare a WPF Project for Sensor Integration 1. Start Visual Studio 2008 and open the Starter solution that contains one WPF application. The solution is located in your Starter folder. Figure 2 Starter solution The WPF project, SensorHOL, is already bundled with the premade Grayscale PixelShader effect that we will use later in this Lab, and a resource dictionary that includes several resources used by future WPF controls. 2. Add a new class named SensorViewModel to the project. MainWindow view will be data-binded to its properties. By using this pattern, the View is relieved from triggering its own updates and instead passively waits for the ViewModel to change. 5

6 Figure 3 Create SensorViewModel class 3. Implement the INotifyPropertyChanged interface in the SensorViewModel class. class SensorViewModel : INotifyPropertyChanged #region INotifyPropertyChanged Members public event PropertyChangedEventHandler PropertyChanged; #endregion 4. Add the following code (we call this method whenever we wish to raise the notification): #region INotifyPropertyChanged Members private void NotifyChange(string propertyname) if (PropertyChanged!= null) 6

7 PropertyChanged(this, newpropertychangedeventargs(propertyname)); 5. In order to connect this ViewModel with the View, add the line just after the InitializeComponent(), MainWindow.xaml.cs. public MainWindow() InitializeComponent(); DataContext = new SensorViewModel(); Test your code to make sure it compiled. Task 2 Add Layout to the WPF Application Figure 4 Sensor HOL basic Layout 7

8 In this task, you will design the MainWindow layout. It will contain 3 parts: Top part: Browse button and the photo name Left part: Several Sensor indicators Right part: An image. A slider divides the photo; sensor data in each portion of the image will display differently depending on the current light intensity. 1. Open the MainWindow.xaml file. Grid is a powerful layout mechanism provided by WPF. It will be our sole means for designing the layouts in this lab. 2. Start by adding rows and columns definitions. <Grid> <Grid.RowDefinitions> <RowDefinition Height="65"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="150"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> </Grid> 3. Next, add the right part of the Grid, just after the columns definitions. This Grid will contain the image and slider. <Grid Grid.Column="1" Grid.Row="1" x:name="overlaycontent" HorizontalAlignment="Center" VerticalAlignment="Center"> </Grid> 4. Add two image controls inside the OverlayContent Grid. Each will render a different effect and they are overlaid <Image Stretch="Uniform" Margin="10"> </Image> <Image Stretch="Uniform" Margin="10"> </Image> 8

9 5. Next, add the Slider control inside the Grid. Note that the slider width and height are data bound to the grid layout. <Slider x:name="overlayadjustmentslider" Width="Binding ElementName=OverlayContent, Path=ActualWidth" Height="Binding ElementName=OverlayContent, Path=ActualHeight" FocusVisualStyle="x:Null" Maximum="1" Minimum="0" Value="0.5" Template="DynamicResource Slider_ControlTemplate"> </Slider> 6. Let s focus on the left part of the layout: add another Grid, just after OverlayContent Grid. <Grid Width="150" Height="240" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top"> </Grid> Inside that Grid, you will add a sensor indicator control and the rest of the Sensor indicators. The inner Grid holds the Sensor Data caption. 7. Create a border with a caption. <Border Background="DynamicResource Brush_PopupBackground"> <Border.Effect> <DropShadowEffect BlurRadius="12" Direction="-90" ShadowDepth="3"/> </Border.Effect> </Border> <Border Background="DynamicResource Brush_PopupBackground" BorderBrush="StaticResource Brush_PopupBorder" BorderThickness="0,1,0,1" CornerRadius="3"> <Grid TextElement.FontFamily="Segoe UI" TextElement.FontSize="10"> <TextBlock HorizontalAlignment="Center" Margin="0,10" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="13" Foreground="White" Text="Sensor Data"/> </Grid> </Border> 8. The last part consists solely of a Grid containing a button and a caption. <Grid Grid.ColumnSpan="2" HorizontalAlignment="Stretch"> 9

10 <Button HorizontalAlignment="Left" Width="70" Margin="5" Height="40" Content="Browse..." Click="Button_Click"/> <TextBlock Foreground="White" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Segoe UI"/> </Grid> 9. Now, add the code to handle the Browse Button click event to MainWindow view. private void Button_Click(object sender, RoutedEventArgs e) Your MainWindow should look like this: <Window x:class="sensorhol.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" WindowState="Maximized" Background="Black"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="65"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="150"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid Grid.Column="1" Grid.Row="1" x:name="overlaycontent" HorizontalAlignment="Center" VerticalAlignment="Center"> <Image Stretch="Uniform" Margin="10"> </Image> <Image Stretch="Uniform" Margin="10"> </Image> <Slider x:name="overlayadjustmentslider" Width="Binding ElementName=OverlayContent, Path=ActualWidth" Height="Binding ElementName=OverlayContent, Path=ActualHeight" FocusVisualStyle="x:Null" Maximum="1" Minimum="0" Value="0.5" Template="DynamicResource Slider_ControlTemplate"> </Slider> </Grid> <Grid Width="150" Height="240" Grid.Row="1" 10

11 HorizontalAlignment="Left" VerticalAlignment="Top"> <Border Background="DynamicResource Brush_PopupBackground"> Direction="-90" <Border.Effect> <DropShadowEffect BlurRadius="12" ShadowDepth="3"/> </Border.Effect> </Border> <Border Background="DynamicResource Brush_PopupBackground" BorderBrush="StaticResource Brush_PopupBorder" BorderThickness="0,1,0,1" CornerRadius="3"> <Grid TextElement.FontFamily="Segoe UI" TextElement.FontSize="10"> <TextBlock HorizontalAlignment="Center" Margin="0,10" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="13" Foreground="White" Text="Sensor Data"/> </Grid> </Border> </Grid> <Grid Grid.ColumnSpan="2" HorizontalAlignment="Stretch"> <Button HorizontalAlignment="Left" Width="70" Margin="5" Height="40" Content="Browse..." Click="Button_Click"/> <TextBlock Foreground="White" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Segoe UI" /> </Grid> </Grid> </Window> 10. Test your code to make sure it compiles. 11

12 Task 3 Add Image Specific Logic In the previous task, you designed the layout of the application, now it is time to pour content into it. 1. Open SensorViewModel. After you add a new property, the user will be able to browse to a file and this property will contain his image selection.. 2. Add the NotifyChange method. Each time this property is changed, the View will respond to this change. private string _imagepath; public string ImagePath get return _imagepath; set _imagepath = value; NotifyChange("ImagePath"); 3. Add the System.IO namespace to SensorViewModel. using System.IO; 4. Add a read-only property that requests the file name from the ImagePath property. public string ImageName get return Path.GetFileNameWithoutExtension(ImagePath); Now, we need to make sure that when ImagePath has changed, the UI binded to ImageName changes as well. 5. Add a call to NotifyChange, this time for the ImageName property. private string _imagepath; public string ImagePath 12

13 get return _imagepath; set _imagepath = value; NotifyChange("ImagePath"); NotifyChange("ImageName"); 6. Now let s implement: Go back to the view and register the necessary binding. <Image Source="Binding ImagePath" Stretch="Uniform" Margin="10">> </Image> <Image Source="Binding ImagePath" Stretch="Uniform" Margin="10">> </Image> 7. You can now data-bind the file name label. (Note: the binding is one-way because the property is read-only) <TextBlock Foreground="White" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Segoe UI" Text="Binding ImageName, Mode=OneWay"/> The last piece of this puzzle is to set the ViewModel with a path to an image. To do this, you must go to the code-behind and implement the Button_Click method. This code will open the standard Windows Open File dialog. If the user decides to select an image, it is just a matter of setting the ViewModel with his selection. 8. First, add a namespace for the OpenFIleDialog. using Microsoft.Win32; 9. Now, you can implement Button_Click. OpenFileDialog openfiledialog = new OpenFileDialog(); openfiledialog.checkfileexists = true; openfiledialog.checkpathexists = true; openfiledialog.filter = "Image Files *.jpg *.png"; openfiledialog.multiselect = false; openfiledialog.showreadonly = true; 13

14 openfiledialog.validatenames = true; openfiledialog.restoredirectory = true; openfiledialog.title = "Find an Image"; bool? result = openfiledialog.showdialog(); if ((result.hasvalue) && (result.value)) (DataContext as SensorViewModel).ImagePath = openfiledialog.filename; 10. Compile and test your code: a. Browse for an image; you should see it on the right side of the screen. b. Browse for more images and note that the UI changes correspondingly. Task 4 Setting up the Sensor Helper 1. Expand References under the SensorHOL project. 2. Right-click on References and click Add Reference. 3. Click on the Browse tab and navigate to the folder where Microsoft.WindowsAPICodePack.Sensors.dll is located. 4. Select the DLL and click OK. 5. Create a new class named SensorHelper in a new file: SensorHelper.cs. 6. Define the class like this: The class' SensorType type parameter is the Sensor-derived sensor class (for example, AmbientLightSensor or Accelerometer3D). using System; using System.Collections.Generic; using Microsoft.WindowsAPICodePack.Sensors; using System.ComponentModel; public class SensorHelper<SensorType, SensorPropertyType> : INotifyPropertyChanged where SensorType : Sensor where SensorPropertyType : class 14

15 7. Paste the following code into the class: private SensorPropertyType _value; private SensorType _sensor; private Guid _sensorguid; public SensorHelper() public void Initialize() SensorList<SensorType> list = SensorManager.GetSensorsByTypeId<SensorType>(); if (list!= null) var permreqsensorlist = new SensorList<Sensor>(); foreach (var sensor in list) permreqsensorlist.add(sensor); SensorManager.RequestPermission(IntPtr.Zero, true, permreqsensorlist); foreach (var sensor in list) if (HandleNewSensor(sensor) && _sensor!= null) break; // subscribe to sensor added/removed event SensorManager.SensorsChanged += new SensorsChangedHandler(OnSensorsChanged); Initialize() requests a list of sensors from the Sensor Manager which are of type SensorType. When SensorHelper is used, SensorType would be either AmbientLightSensor or Acceleroemter3DSensor. Since the user account might not have permissions to use the sensors, we'll call SensorManager.RequestPermissions(), specifying the parent window handle, whether the 15

16 function is synchronous (modal), and the list of sensors for which we request access. This will pop up a dialog like this: Behind-the-scenes, the CodePack API wrapper maps each Sensor-derived type to a sensor type GUID that the COM API expects. The mapping information is provided by an attribute on the class: [SensorDescription("97F115C8-599A D2D A")] public class AmbientLightSensor : Sensor Initialize() then iterates over each found sensor and calls HandleNewSensor(). Finally, it subscribes to the SensorsChanged event that fires when new sensors are attached or existing sensors are removed. 8. Paste the following code into the SensorHelper class: private void OnSensorsChanged(SensorsChangedEventArgs change) // if sensor was added 16

17 if (change.change == SensorAvailabilityChange.Addition) // we use the base Sensor class as the type parameter // because we're not sure what sensor type was attached Sensor sensor = SensorManager.GetSensorBySensorId<Sensor>(change.SensorId); // if this is the right sensro type if (sensor is SensorType) HandleNewSensor(sensor); if (change.change == SensorAvailabilityChange.Removal && _sensorguid.equals(change.sensorid)) _sensor = null; _sensorguid = Guid.Empty; private bool HandleNewSensor(Sensor sensor) // Sensor may become Ready in the future, register for // StateChanged event sensor.statechanged += OnSensorStateChanged; if (sensor.state == SensorState.Ready) // If sensor is already in state Ready, use it PrepareSensor(sensor); return true; return false; The OnSensorsChanged method is the event handler for the SensorsChanged event we subscribed to in Initialize(). If a new sensor is attached, we obtain a base-class Sensor object from its instance GUID property (SensorId) which we get from the event arguments. Sensors have three GUIDs: Instance: Identifies the sensor instance uniquely Category: For example, environment, mechanical, electrical Type: For example, temperature, humidity, voltage, current, 3D accelerometer We then check if the sensor object is of the proper type. If so, we call HandleNewSensor(). 17

18 This approach allows the application to use sensors that are attached later. OnSensorsChanged() also handles sensor removal. It clears a variable that indicates what sensor is in use. This allows another sensor to be used if it becomes available. Sensors have many other properties such as Manufacturer, Model, SerialNumber, etc. These are standard properties. Various sensors might provide additional properties. HandleNewSensor() checks for the sensor's state. Even if a sensor is attached, it may not be ready to use. State tells you if the sensor is ready or the reason it's not. The hardware might be initializing, or a fault condition might exist, or the user might not have permission to use the sensor. If the sensor is ready to be used, we call PrepareSensor(). We call subscribe to the sensor's StateChanged event, which fires when the state changes. We could later use it if it becomes ready and we don't already have a sensor. 9. Paste the following code into the SensorHelper class: private void OnSensorStateChanged(Sensor sender, EventArgs e) if (sender.state == SensorState.Ready) PrepareSensor(sender); else if (!_sensorguid.equals(guid.empty) && _sensor.sensorid.equals(_sensorguid)) _sensor = null; _sensorguid = Guid.Empty; sender.datareportchanged -= OnDataUpdated; private void PrepareSensor(Sensor sensor) if (_sensor == null) _sensorguid = sensor.sensorid.value; _sensor = (SensorType)sensor; sensor.tryupdatedata(); sensor.datareportchanged += OnDataUpdated; OnSensorStateChanged() fires when a sensor state changes. If it's ready, we call PrepareSensor(). If it changes state to something other than Ready, we check if it's the one 18

19 sensor we're using. If so, we unsubscribe and clear the variable indicating that a sensor is in use. PrepareSensor() sets a variable indicating that a sensor is in use, so that another sensor of the same type won't take over if it is attached or becomes ready in the future. The function then subscribes to the DataReportChanged event. TryUpdateData() is called to force the sensor to generate a new data report. Some sensors might generate data reports periodically, while others will generate a data report once the measured value changes significantly enough. By calling TryUpdateData(), we initialize the UI with an initial value immediately. 10. Paste the following code into the SensorHelper class: private void OnDataUpdated(Sensor sender, EventArgs e) if (sender is AmbientLightSensor) _value = ((AmbientLightSensor)sender).CurrentLuminousIntensity as SensorPropertyType; else if (sender is Accelerometer3D) _value = ((Accelerometer3D)sender).CurrentAcceleration as SensorPropertyType; if (_value!= null) OnPropertyChanged("Value"); The OnDataUpdated() method handles the DataUpdated event. This event fires when the sensor has a new data report available. The data is accessed by getting one or more properties (which are different for each sensor). To access a property, the sensor needs to be cast to the appropriate derived type. 11. Paste the following code into the SensorHelper class: This code supports the integration of SensorHelper with the UI code. public SensorPropertyType Value get return _value; 19

20 #region INotifyPropertyChanged Members public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged(string name) PropertyChangedEventHandler ph = this.propertychanged; if (ph!= null) ph(this, new PropertyChangedEventArgs(name)); #endregion Task 5 Integrating ViewModel and the Sensor Helper 1. Open SensorViewModel.cs and create a property with a private field that will expose a Light Sensor. private SensorHelper<AmbientLightSensor, AmbientLightSensor.LuminousIntensity> _sensor; public SensorHelper<AmbientLightSensor, AmbientLightSensor.LuminousIntensity> LightSensor get return _sensor; 2. Now we will do the same, but for the Accelerometer Sensor. private SensorHelper<Accelerometer3D, Accelerometer3D.Acceleration3D> _acceleromatersensor; public SensorHelper<Accelerometer3D, Accelerometer3D.Acceleration3D> AcceleromaterSensor get return _acceleromatersensor; 3. Add a constructor for SensorViewModel, in which we will set up the sensors 20

21 public SensorViewModel() _sensor = new SensorHelper<AmbientLightSensor, AmbientLightSensor.LuminousIntensity>(); _sensor.initialize(); _acceleromatersensor = new SensorHelper<Accelerometer3D, Accelerometer3D.Acceleration3D>(); _acceleromatersensor.initialize(); 4. Compile and test your code. You should be able to run and integrate with the sensors. Task 6 Add Light Sensor Interaction with the UI In the next task, we will make use of the light intensity sensor. Three separate elements will interact with it: LUM indicator: A progress bar that measure the light intensity The Image: One-half of the image will become gray scaled as the intensity increases. The Image Name: Font size will increase to support readability on high light intensity. 1. To add our first sensor Indicator, go to MainWindow.xaml and locate the left part layout grid (the one that contains a TextBlock, Sensor Data ). <TextBlock HorizontalAlignment="Center" Margin="0,10" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="13" Foreground="White" Text="Sensor Data"/> <Grid Margin="9,36,9,9"> <Grid.ColumnDefinitions> <ColumnDefinition Width="2*"/> <ColumnDefinition Width="1*"/> <ColumnDefinition Width="1*"/> <ColumnDefinition Width="1*"/> <ColumnDefinition Width="0.4*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Border Grid.ColumnSpan="5" Grid.RowSpan="2" Background="Black" CornerRadius="2"/> 21

22 <TextBlock Grid.Column="0" Grid.Row="2" HorizontalAlignment="Center" Margin="4,0,4,10" VerticalAlignment="Center" Foreground="White" Text="LUM"/> <ProgressBar x:name="lightintensityprogressbar" Width="10" HorizontalAlignment="Center" Margin="0,8,0,5" Maximum="1" Minimum="0" Orientation="Vertical" Style="StaticResource SensorProgressBar" Value="Binding Path=LightSensor.Value.Intensity, Mode=OneWay, Converter=StaticResource LuminosityConverter"/> <Path Height="80" Grid.ColumnSpan="5" Grid.RowSpan="2" Margin="1,0" VerticalAlignment="Top" Data="M0.5,0.5L214.5, , ,168.4C197.7, , , , , ,197.3L0.5,197.8z" Stretch="Fill"> <Path.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0" Color="#04FFFFFF"/> <GradientStop Offset="0.1" Color="#10FFFFFF"/> <GradientStop Offset="1.0" Color="#18FFFFFF"/> </LinearGradientBrush> </Path.Fill> </Path> </Grid> 2. For our binding to work, we need to create a data converter between the values of the Sensor to the progress bar control. We do that by adding a converter class inside MainWIndow.xaml.cs. public class LuminosityConverter : IValueConverter #region IValueConverter Members public object Convert(object value, Type targettype, object parameter, System.Globalization.CultureInfo culture) double d = System.Convert.ToDouble(value); return Math.Max(Math.Min(Math.Log(d, 10000), 1.0), 0.0); public object ConvertBack(object value, Type targettype, object parameter, System.Globalization.CultureInfo culture) throw new NotImplementedException(); #endregion 22

23 3. After we have created the LuminosityConverter class, we need to declare it as a resource. Go back to MainWindow.xaml and the local namespace declaration of the same namespace as the converter. <Window x:class="sensorhol.mainwindow" xmlns= xmlns:x= xmlns:local="clr-namespace:sensorhol" Title="MainWindow" WindowState="Maximized" Background="Black"> 4. Add a Resources section to the Window control. <Window.Resources> </Window.Resources> 5. Inside the resources section, declare the Converter resource. <local:luminosityconverter x:key="luminosityconverter" /> 6. Compile and run the application. You should see the LUM indicator responding to the Light Sensor. 7. Now connect this interaction to the rest of the elements with which we wished them to interact: a. First, change the font size of the image name. Once again a converter is needed to translate between the light values and font sizes. b. Then, locate the ImageName text block. (Note that we are binding the progress bar we implemented earlier). <TextBlock Foreground="White" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="Binding ElementName=LightIntensityProgressBar, Path=Value, Mode=OneWay, 23

24 Converter=StaticResource LuminosityToFontSizeConverter" Text="Binding ImageName, Mode=OneWay"/> 8. Go to code-behind the implement this converter public class LuminosityToFontSizeConverter : IValueConverter #region IValueConverter Members public object Convert(object value, Type targettype, object parameter, System.Globalization.CultureInfo culture) double d = System.Convert.ToDouble(value); return 70.0 * d ; public object ConvertBack(object value, Type targettype, object parameter, System.Globalization.CultureInfo culture) throw new NotImplementedException(); #endregion 9. Now declare this converter as a resource. <Window.Resources> <local:luminosityconverter x:key="luminosityconverter" /> <local:luminositytofontsizeconverter x:key="luminositytofontsizeconverter" /> </Window.Resources> 10. Compile and run the code. The Image Name text should increase whenever the light intensifies. Now connect the image to the light indicator and apply a grayscale pixelshader effect to the image. 11. Start by adding a namespace to the PixelShaders that are located on your Starter solution. 24

25 <Window x:class="sensorhol.mainwindow" xmlns= xmlns:x= xmlns:local="clr-namespace:sensorhol" xmlns:pixelshaders="clr-namespace:sensorhol.pixelshaders" Title="MainWindow" WindowState="Maximized" Background="Black"> 12. Now can add the PixelShader element, and an OpacityMask to the second Image. <Image Source="Binding ImagePath" Stretch="Uniform" Margin="10"> </Image> <Image Source="Binding ImagePath" Stretch="Uniform" Margin="10"> <Image.Effect> <PixelShaders:GrayscaleEffect DesaturationFactor="Binding ElementName=LightIntensityProgressBar, Path=Value, Mode=OneWay, Converter=StaticResource InvertLuminosityConverter"/> </Image.Effect> <Image.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Offset="Binding ElementName=OverlayAdjustmentSlider, Path=Value" Color="#0000"/> <GradientStop Offset="Binding ElementName=OverlayAdjustmentSlider, Path=Value" Color="#F000"/> </LinearGradientBrush> </Image.OpacityMask> </Image> 13. Again, implement a data converter between the light values and PixelShader values. public class InvertLuminosityConverter : IValueConverter #region IValueConverter Members public object Convert(object value, Type targettype, object parameter, System.Globalization.CultureInfo culture) double d = System.Convert.ToDouble(value); return 1 - d; public object ConvertBack(object value, Type targettype, object parameter, System.Globalization.CultureInfo culture) throw new NotImplementedException(); 25

26 #endregion 14. As usual after we create the converter, we need to assign it as a resource. <Window.Resources> <local:luminosityconverter x:key="luminosityconverter" /> <local:luminositytofontsizeconverter x:key="luminositytofontsizeconverter" /> <local:invertluminosityconverter x:key="invertluminosityconverter" /> </Window.Resources> 15. Compile and run your code. Now you should be able to play with slider and have a portion of the image turned to grayscale due to interaction with the sensor. Task 7 Add Accelerometer Sensor Interaction with the UI (Optional) In this task, you will connect a 3D Accelerometer sensor to the UI. In addition to the accelerometer indicators on the left, the right part of the application rotates with each sensor movement. 1. First you will implement the X,Y,Z axis movements indicators: a. Inside MainWindow.xaml, locate the LightIntensityProgressBar. b. to this, add 3 more indicators. Since it is clear from the code that all 3 indicators bind to the same property, we need a way to distinguish between each indicator. that is the purpose of the Converter parameter that is used throughout the conversion process takes care of this. <TextBlock Grid.Column="0" Grid.Row="2" HorizontalAlignment="Center" Margin="4,0,4,10" VerticalAlignment="Center" Foreground="White" Text="LUM"/> <ProgressBar x:name="lightintensityprogressbar" Width="10" HorizontalAlignment="Center" Margin="0,8,0,5" Maximum="1" Minimum="0" 26

27 Orientation="Vertical" Style="StaticResource SensorProgressBar" Value="Binding Path=LightSensor.Value.Intensity, Mode=OneWay, Converter=StaticResource LuminosityConverter"/> <TextBlock Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" Margin="4,0,4,10" VerticalAlignment="Center" Foreground="White" Text="X"/> <ProgressBar x:name="accelerometerx" Width="10" Grid.Column="1" HorizontalAlignment="Center" Margin="0,8,0,5" Maximum="1.3" Minimum="- 1.3" Orientation="Vertical" Style="StaticResource SensorProgressBar" Value="Binding Path=AcceleromaterSensor.Value, Mode=OneWay, Converter=StaticResource AccelerationConverter, ConverterParameter=X"/> <TextBlock Grid.Column="2" Grid.Row="2" HorizontalAlignment="Center" Margin="4,0,4,10" VerticalAlignment="Center" Foreground="White" Text="Y"/> <ProgressBar x:name="accelerometery" Width="10" Grid.Column="2" HorizontalAlignment="Center" Margin="0,8,0,5" Maximum="1.3" Minimum="- 1.3" Orientation="Vertical" Style="StaticResource SensorProgressBar" Value="Binding Path=AcceleromaterSensor.Value, Mode=OneWay, Converter=StaticResource AccelerationConverter, ConverterParameter=Y"/> <TextBlock Grid.Column="3" Grid.Row="2" HorizontalAlignment="Center" Margin="4,0,4,10" VerticalAlignment="Center" Foreground="White" Text="Z"/> <ProgressBar x:name="accelerometerz" Width="10" Grid.Column="3" HorizontalAlignment="Center" Margin="0,8,0,5" Maximum="1.3" Minimum="- 1.3" Orientation="Vertical" Style="StaticResource SensorProgressBar" Value="Binding Path=AcceleromaterSensor.Value, Mode=OneWay, Converter=StaticResource AccelerationConverter, ConverterParameter=Z"/> 2. Now we can add a data converter that makes use of the converter parameter, but first add the following using statement. using Microsoft.WindowsAPICodePack.Sensors; 3. Add the following code snippet. public class AccelerationConverter : IValueConverter 27

28 #region IValueConverter Members public object Convert(object value, Type targettype, object parameter, System.Globalization.CultureInfo culture) Accelerometer3D.AccelerationAxis? axis = (Accelerometer3D.AccelerationAxis?)Enum.Parse(typeof(Acceleromete r3d.accelerationaxis), parameter as string); if (axis.hasvalue) var a3d = value as Accelerometer3D.Acceleration3D; if (a3d!= null) return a3d[axis.value]; return 0.0; public object ConvertBack(object value, Type targettype, object parameter, System.Globalization.CultureInfo culture) throw new NotImplementedException(); #endregion 4. Add the data converter resource declaration. <Window.Resources> <local:luminosityconverter x:key="luminosityconverter" /> <local:luminositytofontsizeconverter x:key="luminositytofontsizeconverter" /> <local:invertluminosityconverter x:key="invertluminosityconverter" /> <local:accelerationconverter x:key="accelerationconverter" /> </Window.Resources> Now we can make use of the 3D accelerometer sensor and rotate elements on the screen. We use WPF s rotate transform that uses degrees. A converter converts the X- and Y-axis of the Accelerometer to degrees. In order for the rotation to work properly, it must be centered on the middle of the element. That why we have the second converter that calculates the center of the element. 5. Add the following snippet to each of the images. 28

29 <Image.RenderTransform> <RotateTransform Angle="Binding Path=AcceleromaterSensor.Value, Mode=OneWay, Converter=StaticResource DegreesFromAcceleratorConverter" CenterX="Binding RelativeSource=RelativeSource AncestorType=x:Type Image, AncestorLevel=1, Path=ActualWidth, Converter=StaticResource DoubleSplitConverter" CenterY="Binding RelativeSource=RelativeSource AncestorType=x:Type Image, AncestorLevel=1, Path=ActualHeight, Converter=StaticResource DoubleSplitConverter" /> </Image.RenderTransform> 6. Add the following snippet to the Slider element (very similar to the one above). <Slider.RenderTransform> <RotateTransform Angle="Binding Path=AcceleromaterSensor.Value, Mode=OneWay, Converter=StaticResource DegreesFromAcceleratorConverter" CenterX="Binding RelativeSource=RelativeSource AncestorType=x:Type Slider, AncestorLevel=1, Path=ActualWidth, Converter=StaticResource DoubleSplitConverter" CenterY="Binding RelativeSource=RelativeSource AncestorType=x:Type Slider, AncestorLevel=1, Path=ActualHeight, Converter=StaticResource DoubleSplitConverter"/> </Slider.RenderTransform> 7. Implement the first converter, DegreesFromAcceleratorConverter. public class DegreesFromAcceleratorConverter : IValueConverter private double _prevx; private double _prevy; private const double _histcoeff = 0.6; private const double _threshold = 0.1; private bool _prevvaluesinit; #region IValueConverter Members 29

30 public object Convert(object value, Type targettype, object parameter, System.Globalization.CultureInfo culture) var a3d = value as Accelerometer3D.Acceleration3D; if (a3d!= null) double x = a3d[accelerometer3d.accelerationaxis.x]; double y = a3d[accelerometer3d.accelerationaxis.y]; if (!_prevvaluesinit) _prevvaluesinit = true; _prevx = x; _prevy = y; if (Math.Abs(_prevX - x) < _threshold) x = _prevx; if (Math.Abs(_prevY - y) < _threshold) y = _prevy; _prevx = (_histcoeff * _prevx) + (1.0 - _histcoeff) * x; _prevy = (_histcoeff * _prevy) + (1.0 - _histcoeff) * y; double radians = Math.Atan2(_prevX, -_prevy); return radians * 180 / Math.PI; return 0.0; public object ConvertBack(object value, Type targettype, object parameter, System.Globalization.CultureInfo culture) throw new NotImplementedException(); #endregion 8. Now add the second converter. public class DoubleSplitConverter : IValueConverter #region IValueConverter Members public object Convert(object value, Type targettype, object parameter, System.Globalization.CultureInfo culture) double doublevalue = System.Convert.ToDouble(value); 30

31 return doublevalue/2.0; public object ConvertBack(object value, Type targettype, object parameter, System.Globalization.CultureInfo culture) throw new NotImplementedException(); #endregion 9. All you have left to do is declare those converters as resources. <local:doublesplitconverter x:key="doublesplitconverter" /> <local:degreesfromacceleratorconverter x:key="degreesfromacceleratorconverter" /> 10. Compile and run your code. You should now be able to rotate the image along with it s slider. 31

32 You can find the final version of this project in the Final solution folder. Well Done! Summary Integrating Windows 7 Sensor support into your application provides the opportunity to increase the value of your applications, by making them more intelligent and aware of the environment. In this lab, you have created a WPF application from scratch and integrated different sensors for an amazing UI experience. 32