New myTrip update available!

Entrance prices:

Now in lot of places price information appears, it shows the price for adults, kids, groups, families, concession….

imageimageimageimage

Opening hours:

You can precisely see when a place is open during the week and the year. It shows you in red if it is closed right now or oppened

image.imageimageimage

Order by price:

You can order the places by highest or lower price

image

Climate data:

Information about average max temperature, average low temperature, precipitations in mm, and daylight hours.

image image

Transportation information:

Now transportation information is shown telling you what metro, bus, street train to catch to the destination. It also shows how much you have to walk to the final destination.

imageimageimageimage

Statistics in the guide (step 3):

Whenever you finish making your trip, you can see the average climate for your trip and the estimated cost of the entrance prices of the places you are visiting during your trip.

image

Performance improvements:
Now the app runs nearly a 30% faster and runs with less memory.
New overhauled UI:

Lots of new controls to show data in a lovely manner.

Bug fixes:

Some bugs relating user feedback has been fixed https://mytrip.uservoice.com/forums/157313-general/suggestions/6286155-problem-adding-locations-%C3%BEo-trip

Closed place:

Whenever you finish making your trip, the app tells you when a place is going to be closed so you can rearrange that place to another day

image

Update Imges:

 

screenshot_09262014_215156screenshot_09262014_215015screenshot_09262014_215027screenshot_09262014_215038screenshot_09262014_215051screenshot_09262014_215115screenshot_09262014_215122screenshot_09262014_215131

How to make a building comparer in XAML for Windows 8.1

Some days ago, a new version of MyTrip was released. In this version, information about buildings is displayed, so Instead of showing just a textblock with the height of the building… why don’t build a cool building comparer?  This is how it looks when you search for the Empire state building on MyTrip:

empirestate

As you can see, this is a pretty cool way to show a height comparison between the tallest buildings in the world, from the Burj Dubai Khalifa in Dubai to the Big Ben in London, and  we can instantly realize how big the building is by comparing to other buildings. Let’s start.

Thoughts before starting to code:

We need to make a CustomControl, because we’ll need to place a formula somewhere to make a rule of three (we will calculate the height of each element from the biggest building). Since we will need to place items with datatemplates, it makes sense to inherit from ItemsContainer to build or CustomControl. In this way we will inherit lot of functionality, including the the templating for each items, painting each item in a sequential order, customization of the control with a template…. 

Because, each item will look different to each other, we need to create a DatatemplateSelector, and it will select the proper datatemplate for each building, using a property on the datacontext of the item.

We have to paint the selected item with a different color to make it contrast from the others. To achieve this, we’ll need a converter to select the color, depending on a property of the datacontext.

We will need also a command in order to bring some functionality when the user clicks on a building.

This is it at a glance, what we are going to do:

GeneralIdeaBuildingComparer

Lets start step by step:

  1. How does the model look like
  2. How do I code all the XAML
  3. How to implement the BuildingComparer

  4. 1.- How does the model look like

    This model is the DataContext for each element on the ItemsControl.

     public class BuildingComparerItem
        {
            private string name;
            public string Name
            {
                get { return name; }
                set { name = value; }
            }
    
            public double Height { get; set; }
    
            public BuildingType BuildingType { get; set; }
    
            public bool IsSelected { get; set; }
        }

This class has some important properties:

  1. We store the Height of the building ( this property is going to be used inside the BuildingComparerControl, in order to calculate the effective height for each item)
  2. The BuildingType it’s an Enum, and depending on it’s value, the DatatemplateSelector will select the right DataTemplate for the item.
  3. As we mentioned, we need a converter to change the color of the building if it’s the current building , that’s why we’ll need the IsSelected property.
    We are going to use the MVVM pattern to implement this example. This is how the MainViewModel will look like.
     public class MainViewModel : ViewModelBase
        {
            public MainViewModel()
            {
                BuildingComparerItems = new ObservableCollection<BuildingComparerItem>()
                    {                   
                        new BuildingComparerItem(){  Name="Burj Khalifa", Height = 829.8, BuildingType = BuildingType.BurjKhalifa, IsSelected = false},                    
                        new BuildingComparerItem(){  Name="Empire State Building", Height = 443.2, BuildingType = BuildingType.EmpireStateBuilding, IsSelected = false},
                        new BuildingComparerItem(){  Name="Great Pyramid of Giza", Height = 138.8, BuildingType = BuildingType.GizaPiramid, IsSelected = false}, 
                        new BuildingComparerItem(){  Name="My building", Height = 123, BuildingType = BuildingType.CustomBuilding, IsSelected = true},
                        new BuildingComparerItem(){  Name="Statue of Liberty", Height = 93, BuildingType = BuildingType.StatueOfLiberty, IsSelected = false}                    
                    };
            }
    
            private ObservableCollection<BuildingComparerItem> buildingComparerItems;
            public ObservableCollection<BuildingComparerItem> BuildingComparerItems
            {
                get { return buildingComparerItems; }
                set { buildingComparerItems = value; RaisePropertyChanged("BuildingComparerItems"); }
            }
    
            private string clickedBuilding;
            public string ClickedBuilding
            {
                get { return clickedBuilding; }
                set { clickedBuilding = value; RaisePropertyChanged("ClickedBuilding"); }
            }
    
            public ICommand BuildingSelectedCommand
            {
                get
                {
                    return new RelayCommand<BuildingComparerItem>((x) =>
                    {
                        ClickedBuilding = string.Format("{0} clicked!", x.Name);
                    });
                }
            }
        }

    As you can see it’s a  very simple ViewModel. We have an ObservableCollection to feed the CustomControl we will make later. We create the sample data at the constructor and we assign it to the collection. A Command to be invoked by the CustomControl when a building is clicked.

2.- How do I code all the XAML

As we commented at the beginning, we will need a DataTemplateSelector for the buildings:

 public class BuildingDataTemplateSelector : DataTemplateSelector
    {     
        public DataTemplate BurjKhalifaDataTemplate { get; set; }       
        public DataTemplate EmpireStateBuildingDataTemplate { get; set; }
        public DataTemplate GizaPiramidDataTemplate { get; set; }
        public DataTemplate StatuteOfLibertyDataTemplate { get; set; }             
        public DataTemplate CustomBuildingDataTemplate { get; set; }
     
        protected override DataTemplate SelectTemplateCore(object item, Windows.UI.Xaml.DependencyObject container)
        {
            var building = item as BuildingComparerItem;
            switch (building.BuildingType)
            {
                case BuildingType.BurjKhalifa:
                    return BurjKhalifaDataTemplate;             

                case BuildingType.EmpireStateBuilding:
                    return EmpireStateBuildingDataTemplate;

                case BuildingType.GizaPiramid:
                    return GizaPiramidDataTemplate;              

                case BuildingType.StatueOfLiberty:
                    return StatuteOfLibertyDataTemplate;              

                case BuildingType.CustomBuilding:
                    return CustomBuildingDataTemplate;

                default:
                    return CustomBuildingDataTemplate;

            }

        }

    Just some properties to store the datatemplates we are about to see, and then we override the SelectTemplateCore to specify which template we are going to retrieve. We do this by looking for the BuildingType property of the model.
      public class BuildingSelectedColorConverter : IValueConverter
        {
            public SolidColorBrush PrimaryColorBrush { get; set; }
            public SolidColorBrush SelectedColorBrush { get; set; }
    
            public object Convert(object value, Type targetType, object parameter, string language)
            {
                var building = value as BuildingComparerItem;
    
                if (building.IsSelected)
                    return SelectedColorBrush;
                return PrimaryColorBrush;
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, string language)
            {
                throw new NotImplementedException();
            }
        }

    This is the converter we are going to use in each DataTemplate to select it depending on the IsSelected property. We have two properties to specify from XAML, which are the colors to be used by the converter.

    In order to a DataTemplate to use the converter, we have to reference it in XAML. All the XAML relating the building comparer, is in a resource dictionary called  BuildingResources.xaml. Here we make a reference to the converter:
     <Converters:BuildingSelectedColorConverter x:Key="BuildingSelectedColorConverterkey" 
                                                   PrimaryColorBrush="#FF294B7C"
                                                   SelectedColorBrush="#FF00ACEE" />

    And then we use it in the DataTemplates. In this example I have only 4 datatemplates, but you can expand it as much as you can. The datatemplate consists on a Path with data taken from a SVG file, a TextBlock with a binding to the name of the building and finally the height:

     <DataTemplate x:Key="DubajKhalifaDataTemplate">
            <Grid Width="56" Background="Transparent"  >
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="25"/>
                </Grid.RowDefinitions>
                <Viewbox HorizontalAlignment="Center" VerticalAlignment="Bottom" Grid.Row="0">
                    <Path Data="M75.761, ..." Fill="{Binding  Converter={StaticResource BuildingSelectedColorConverterkey}}" />
                </Viewbox>
                <StackPanel Orientation="Vertical" Grid.Row="1">
                    <TextBlock Text="{Binding Name}" Foreground="{StaticResource PrimaryOpacityColor}" FontFamily="Segoe UI" />
                    <TextBlock  Foreground="{Binding  Converter={StaticResource BuildingSelectedColorConverterkey}}" >
                               <Run Text="{Binding Height}"/><Run Text=" "/><Run Text="m"/>
                    </TextBlock>
                </StackPanel>
            </Grid>
        </DataTemplate>

    As you can see, the Path, and the Textblock have a reference to the converter, and depending on the IsSelected property, different foregrounds are going to be applied. The other important thing to note here, is that a ViewBox is grouping the Path. This is the trick that will automatically scale down the Path in our CustomControl. If we had not surrounded it with a ViewBox the path wouldn’t  show correctly. So, as we reduce the height of the ItemsContainer, the ViewBox will automatically resize the path! In the ResourceDictionary are the DataTemplates for the remaining buildings.

    <Selectors:BuildingDataTemplateSelector x:Key="BuildingTemplateSelectorKey"  
                                                        CustomBuildingDataTemplate="{StaticResource CustomBuildingDataTemplate}"
                                                        StatuteOfLibertyDataTemplate="{StaticResource StatueOfLibertyDataTemplate}"
                                                        GizaPiramidDataTemplate="{StaticResource GizaPiramidBuildingDataTemplate}"
                                                        EmpireStateBuildingDataTemplate="{StaticResource EmpireStateDataTemplate}"
                                                        BurjKhalifaDataTemplate="{StaticResource DubajKhalifaDataTemplate}"/>

    This is the DataTemplateSelector previously commented, in XAML, ready to be used on any ItemsControl.

At this point we have nearly everything to finish. If we use all the XAML and the selectors on a normal ItemsControl, the items would be shown but no custom resize logic will be done, and this XAML

 <ItemsControl 
                ItemsSource="{Binding BuildingComparerItems}"  
                ItemTemplateSelector="{StaticResource BuildingTemplateSelectorKey}" 
            VerticalAlignment="Center" HorizontalAlignment="Center" Height="136" Margin="0,400,0,0"   >
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

Will look like this:

 

NearllyFInished

Nice! It’s starting to look like the final result, isn’t it? We have custom data templates for each element, we can also change the color of the current building by a converter. The only thing left it’s the resize logic of the CustomControl.

3.- How to implement the BuildingComparer

As I commented at the beginning, we need to inherit from ItemsControl in order to have the same logic to show the elements as in the last photo, but with a custom modification to resize those ItemContainers. In those ItemContainers, the ItemsControl will have been painted each element with each DataTemplate. Because, each DataTemplate has a ViewBox when we resize that ItemContainer, the ViewBox will automatically be resized and thus the Path inside it.

We want to make this CustomControl a black box, so we cannot rely on the Model commented before. We’ll have to specify to the BuildingComparerControl, which property of the Model stores the value to calculate the height. To achieve this, we will use reflection,  using the string of the property that has the value. After we extracted every value using this technique, we can calculate the heights,  and resize all the elements.

Let’s look how does the code to extract the value looks like:

  public static dynamic ValueFromProperty(object item, string propertyName)
    {
        try
        {
            var property = item.GetType().GetTypeInfo().DeclaredProperties.FirstOrDefault(x => x.Name == propertyName);

            try
            {
                return property.GetValue(item, null);
            }
            catch (InvalidCastException)
            {
                throw;
            }
        }
        catch (System.Reflection.AmbiguousMatchException)
        {
        }

        return null;
    }

This helper class the only thing does is, from an string, in our example the “Height” property, it looks for it on the “item” object, it extracts it’s value, and since we don’t know if it’s a int, a double, or a decimal, we use the dynamic keyword to return it.

Lets see how does the BuildingComparer Control  look’s like:

 public class BuildingComparerControl : ItemsControl
    {
        private int _offset = 10;
        public BuildingComparerControl()
        {
            this.Loaded += BuildingComparer_Loaded;
        }

        void BuildingComparer_Loaded(object sender, RoutedEventArgs e)
        {
            this.SizeChanged += BuildingComparer_SizeChanged;
            this.LayoutUpdated += BuildingComparer_LayoutUpdated;
        }

        void BuildingComparer_LayoutUpdated(object sender, object e)
        {
            ReCalculateBuildingHeights();
        }

        void BuildingComparer_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            ReCalculateBuildingHeights();
        }

        private void ReCalculateBuildingHeights()
        {
           //Stuff
        }
        protected override DependencyObject GetContainerForItemOverride()
        {
          //Stuff
        }

        void container_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
        {
           //Stuff
        }

        public string HeightValue
        {
            get { return (string)GetValue(HeightValueProperty); }
            set { SetValue(HeightValueProperty, value); }
        }

        public static readonly DependencyProperty HeightValueProperty =
            DependencyProperty.Register("HeightValue", typeof(string), typeof(BuildingComparerControl), new PropertyMetadata(string.Empty));

        public int HeightReservedForCaption
        {
            get { return (int)GetValue(HeightReservedForCaptionProperty); }
            set { SetValue(HeightReservedForCaptionProperty, value); }
        }

        public static readonly DependencyProperty HeightReservedForCaptionProperty =
            DependencyProperty.Register("HeightReservedForCaption", typeof(int), typeof(BuildingComparerControl), new PropertyMetadata(25));

        public ICommand OnClickCommand
        {
            get { return (ICommand)GetValue(OnClickCommandProperty); }
            set { SetValue(OnClickCommandProperty, value); }
        }

        public static readonly DependencyProperty OnClickCommandProperty =
            DependencyProperty.Register("OnClickCommand", typeof(ICommand), typeof(BuildingComparerControl), new PropertyMetadata(null));

    }

It’s pretty easy. We recalculate the heights of the buildings each time the SizeChanged or the LayoutUpdated event occurs. We have a GetContainerForItemOverride, that’s where we are going to retrieve a ContentPresenter, and that’s the item we are going to reduce in height. We have also 3 dependency properties:

  1. HeightValue: To specify which property stores the value for calculating the height.
  2. HightReservedForCaption: The amount of size we are going to reserve for the caption of the data template.
  3. OnClickCommand: The command we are going to execute whenever a building is clicked. We are going to hook this property with the ICommand from the ViewModel.

This is how the GetContainerForItemOverride method looks like:

  protected override DependencyObject GetContainerForItemOverride()
        {
            var container = new ContentPresenter();
            container.Transitions = new TransitionCollection();
            container.Tapped += container_Tapped;
            container.SetValue(Tilt.IsTiltEnabledProperty, true);
            container.Transitions.Add(new EntranceThemeTransition() { FromHorizontalOffset = _offset });
            _offset += 5;
            return container;
        }

This is quite easy, we build a ContentPresenter where our DataTemplates are going to be drawn. We apply a transition, so when the Container is presented, it enters on the screen with a cool animation. We hook each container to a Tapped event, that’s how we are going to know which building was clicked. We add a Tilt effect from the Callisto library. We apply a different offset each time a new container is generated.

 void container_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
        {
            if (OnClickCommand != null)
            {
                var container = sender as ContentPresenter;
                var item = this.ItemFromContainer(container);
                OnClickCommand.Execute(item);
            }
        }

This is how the code that is executed each time a container is clicked looks like. The only thing we have to do is to check if the OnClickCommand is not null. We obtain the Model we talked before from the container, and finally we send it as a parameter to the Command.

 private void ReCalculateBuildingHeights()
        {
            var itemsource = this.ItemsSource;

            if (Items.Count == 0)
                return;

            var firstValue = this.Items
                .OrderByDescending(x => ReflectionHelper.ValueFromProperty(x, HeightValue))
                .FirstOrDefault();

            var maxValue = ReflectionHelper.ValueFromProperty(firstValue, HeightValue);
            var actualHeight = this.ActualHeight - HeightReservedForCaption;

            foreach (var building in Items)
            {
                var container = this.ContainerFromItem(building) as ContentPresenter;
                if (container == null)
                    break;

                var currentBuildingHeight = ReflectionHelper.ValueFromProperty(building, HeightValue);

                var relativeHeight = (currentBuildingHeight * actualHeight) / maxValue;
                container.SetValue(ContentPresenter.HeightProperty, relativeHeight + HeightReservedForCaption);
                container.SetValue(ContentPresenter.VerticalAlignmentProperty, VerticalAlignment.Bottom);
            }
        }

This is the code that resizes each element. Because we inherited from ItemsControl we have access to the ItemsSource with all the elements! As we need to resize each element depending on the highest element, we look for it on the maxValue variable. Here is where we make use of the reflection code to extract the value.  Then, we spin on each element, we extract the container for that element, we extract the value of that element using reflection again. We use the rule of three to calculate the effective size for the current element, depending on the maxValue. Then we set the hight, and aligment to the bottom.

Since we made a new Control, we need to template it, it’s pretty easy because the only thing we want, is to show them horizontally:

<Style TargetType="CustomControls:BuildingComparerControl">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="CustomControls:BuildingComparerControl">
                            <Grid>
                                <ItemsPresenter/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

You can see that we use an ItemsPresenter, and this element will be automatically hooked with our CustomControl since it inherits from ItemsControl.

Note that if we don’t use the HeightReservedForCaption property the items would be shown like this:

wrong

So, the final XAML will look like this:

 <CustomControls:BuildingComparerControl 
                HeightValue="Height" 
                HeightReservedForCaption="20"
                ItemsSource="{Binding BuildingComparerItems}"  
                OnClickCommand="{Binding BuildingSelectedCommand}"
                ItemTemplateSelector="{StaticResource BuildingTemplateSelectorKey}" 
                VerticalAlignment="Center" HorizontalAlignment="Center" Height="136"   />

And the final result will looks like this:

 

finalResult

Great! Hope to be useful and if you have any problem don’t hesitate on commenting it!

Link to the full code

How to make a Compass for Windows 8.1

As you know, I’m working in a Windwos 8 app called MyTrip. In this app, I show lot of places with geo-location data, so, I can guess where a user is, where the place is, and depending on that data, I show a compass pointing that direction. To achieve this result,

Compass_thumb.gif

we have two options in .Net, making a CustomControl or an UserControl. But since we want to make the control, fully customizable by  a developer, we are going to chose the CustomControl option. The user control has fixed XAML and we couldn’t change that XAML if we wanted. CustomControls are built by templates and inherit from an already existing control. Using this templates, we are going to be able to customize the control, in this case we are showing a blue arrow, but we could change the template to whatever we want. First of all lets start dissecting how our custom control is going to be made.

  1. We need a class named CustomControl that will inherit from Control. We inherit from this base class because we want to inherit it’s templating capabilities.
  2. Because we are going to make a template, and we don’t know what that template will look like, we need to specify a TemplatePart header.
  3. The type of this TemplatePart is a FrameworkElement . All controls (textblocks, grids, buttons…) are FrameworkElements so it will allow any element to be in the template.
  4. We need an DependencyProperty in order to pass the CustomControl the Location info, the CustomControl will know where the user it and apply some formulas to know the number of degreees between these two points.
  5. We are going to retrieve this TemplateHeader from our CustomControl on the OnApplyTemplate method (inherited form Control). and we are going to apply a rotation animation to that UIElement.

Let’s start working!

[TemplatePart(Name = "COMPASS_CONTAINER", Type = typeof(FrameworkElement))]
    public class CompassControl : Control
    {
        const string CONTAINER_PART = "COMPASS_CONTAINER";
        private FrameworkElement _containerGrid;
        private Geolocator _geoLocator;
        private Geocoordinate _latestPosition = null;
        private double _latestDegrees = 0;

        public CompassControl()
        {
            _geoLocator = new Geolocator();
            this.Unloaded += Compass_Unloaded;
        }

        protected override void OnApplyTemplate()
        {
            _containerGrid = GetTemplateChild(CONTAINER_PART) as FrameworkElement;
            _geoLocator.PositionChanged += _geoLocator_PositionChanged;
            base.OnApplyTemplate();
        }

        public Location PlaceLocation
        {
            get { return (Location)GetValue(PlaceLocationProperty); }
            set { SetValue(PlaceLocationProperty, value); }
        }

        public static readonly DependencyProperty PlaceLocationProperty =
            DependencyProperty.Register("PlaceLocation", typeof(Location), typeof(CompassControl), new PropertyMetadata(null, async (sender, args) =>
            {
                var compass = sender as CompassControl;
                var location = args.NewValue as Location;
                if (location != null)
                    await compass.ApplyRotationTransform(location.Latitude, location.Longitude);
            }));

    }

As you can see, this is the skeleton of the class. The important things to note here are the TemplatePart as the header of the class., how we obtain a reference of the FrameworkElement specified in the Template on the OnApplyTemplate Method, and the DependencyProperty . As you know, the TemplatePart its obtaned by finding the name we previously specified on the CustomControl . In this case the XAML template has to specify a element called Compass_Container in order to find an element to apply the RotationTransform to. The template looks like this, but you can change as you will.

<Style TargetType="CustomControls:CompassControl">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="CustomControls:CompassControl">
            <Grid x:Name="COMPASS_CONTAINER">
              <Viewbox VerticalAlignment="Center" HorizontalAlignment="Center">
                <TextBlock Text="➤" FontFamily="Segoe UI Symbol" FontSize="120" RenderTransformOrigin="0.428,0.544" UseLayoutRounding="False" Foreground="#FF294B7C">
                  <TextBlock.RenderTransform>
                    <CompositeTransform Rotation="-450" TranslateX="15.68" TranslateY="1.6" />
                  </TextBlock.RenderTransform>
                </TextBlock>
              </Viewbox>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

Look the name of that grid, looks familiar doesn’t it?

<Grid x:Name=”COMPASS_CONTAINER”>

This name is what we are going to find, and extract into the user control to apply the rotation, thanks to the TemplatePart header, that’s how we hook the XAML and the c# code.

On the OnApplyTemplate method, we have also an event, to notify when the geolocator will be available. When that happens, we are going to store the user location and apply the rotation transformation.

public async void _geoLocator_PositionChanged(Geolocator sender, PositionChangedEventArgs args)
        {
            var currentPosition = args.Position.Coordinate;

            if (_latestPosition == null)
            {
                _latestPosition = currentPosition;
                await ApplyRotationTransform(args.Position.Coordinate.Point.Position.Latitude, args.Position.Coordinate.Point.Position.Longitude);
            }

            if (currentPosition.Point.Position.Latitude == _latestPosition.Point.Position.Latitude 
                && currentPosition.Point.Position.Longitude == _latestPosition.Point.Position.Longitude)
                return;

            _latestPosition = currentPosition;

            await ApplyRotationTransform(args.Position.Coordinate.Point.Position.Latitude, args.Position.Coordinate.Point.Position.Longitude);
        }

As you see, we are storing also the latest position, because we are going to apply the rotation transformation each time the user moves, and therefore, the location changed.

We are going to apply the transformation, whenever the DependencyProperty is changed so the code will look like this:

public static readonly DependencyProperty PlaceLocationProperty =
            DependencyProperty.Register("PlaceLocation", typeof(Location), typeof(CompassControl), new PropertyMetadata(null, async (sender, args) =>
            {
                var compass = sender as CompassControl;
                var location = args.NewValue as Location;
                if (location != null)
                    await compass.ApplyRotationTransform(location.Latitude, location.Longitude);
            }));

At this point we have the most important things done, the only thing left its to dive deep in the ApplyRotationTransform method. This is how it looks like:

public async Task ApplyRotationTransform(double lat1, double long1)
        {
            if (_containerGrid == null)
                return;

            if (_latestPosition != null)
            {
                await this.Dispatcher.RunAsync((Windows.UI.Core.CoreDispatcherPriority.High), () =>
                {
                    var degrees = CompassControl.DegreeBearing(_latestPosition.Point.Position.Latitude, _latestPosition.Point.Position.Longitude, lat1, long1);

                    if (_containerGrid == null)
                        return;

                    RotateTransform rotateTransform1 = new RotateTransform();
                    rotateTransform1.Angle = degrees;
                    _containerGrid.RenderTransform = rotateTransform1;

                    rotateTransform1.CenterX = _containerGrid.ActualWidth / 2;
                    rotateTransform1.CenterY = _containerGrid.ActualHeight / 2;

                    DoubleAnimation ani = new DoubleAnimation();
                    ani.From = _latestDegrees;
                    ani.To = degrees;
                    ani.FillBehavior = Windows.UI.Xaml.Media.Animation.FillBehavior.HoldEnd;
                    ani.EasingFunction = new Windows.UI.Xaml.Media.Animation.SineEase() { EasingMode = Windows.UI.Xaml.Media.Animation.EasingMode.EaseOut };
                    ani.Duration = new Duration(TimeSpan.FromSeconds(0.5));

                    Storyboard story = new Storyboard();
                    story.Children.Add(ani);
                    Storyboard.SetTargetName(ani, "COMPASS_CONTAINER");
                    Storyboard.SetTarget(ani, rotateTransform1);
                    Storyboard.SetTargetProperty(ani, "Angle");
                    story.Begin();
                    _latestDegrees = degrees;
                });
            }
        }

First we make sure that we found a TemplatePart  and if not, we dont’ execute any code because an exception could happen. We make sure we run on the MainThread, we extract the degrees from a formula we are going to see later, and apply a rotation transform as you see there. Note that we store the latest degrees, because in the future, when the location changes, we want to start the animation from the latest degrees we stored and not from 0.0 degrees every time .

The formulas to computate the degrees are these ones:

static double DegreeBearing(double lat1, double lon1, double lat2, double lon2)
        {
            //const double R = 6371; //earth’s radius (mean radius = 6,371km)
            var dLon = ToRad(lon2 - lon1);
            var dPhi = Math.Log(
                Math.Tan(ToRad(lat2) / 2 + Math.PI / 4) / Math.Tan(ToRad(lat1) / 2 + Math.PI / 4));
            if (Math.Abs(dLon) > Math.PI)
                dLon = dLon > 0 ? -(2 * Math.PI - dLon) : (2 * Math.PI + dLon);
            return ToBearing(Math.Atan2(dLon, dPhi));
        }

        public static double ToRad(double degrees)
        {
            return degrees * (Math.PI / 180);
        }

        public static double ToDegrees(double radians)
        {
            return radians * 180 / Math.PI;
        }

        public static double ToBearing(double radians)
        {
            // convert radians to degrees (as bearing: 0...360)
            return (ToDegrees(radians) + 360) % 360;
        }

That’s it! once you have this CustomControl and compile the solution, you would be able to drag and drop from your toolbox to the Visual Studio designer!

Download here the complete source code

Thoughts about Concurrency in .Net II

In Thoughts about Concurrency in .Net I we watched the performance problems we could have if we try to extract 27.000 places in sequential order, how we can improve it using the Task.WaitAll, though this is not the best way, we explored another approximation to what it should be the perfect peace of code to extract data using the Producer-Consumer pattern and the concurrency collections like ConcurrentQueue and  ConcurrentBag. This brought us one big problem:

  • Each producer and consumer run inside a while continuously until there where no more task to run.

This leads to a heavy performance problem, since much of the iterations didn’t do anything but iterate and iterate again until a task had to be inserted. This can be avoided in two ways:

  • Using a variable and SpinWait.WaitUntil(()=>_hasMoreTasksToExecute). This will stop the while-loop until the consumer flags that variable, and more tasks are added to the “tasksToExecute”. This will give us some performance improvements but, we will have to handle the synchronization logic between the producer and the consumer.
  • Using a BlockingCollection. This kind of collection has two interesting features: We can specify a maximum number of elements on its constructor, in this case, we will specify :
      var numberOfConcurentTasksToExecute = Environment.ProcessorCount * 2;
      BlockingCollection<Task<T>> tasksToExecute = new BlockingCollection<Task<T>>(numberOfConcurentTasksToExecute); 

    This number it’s important because when any thread tries to add more elements to the collection than the specified in the constructor, this thread will be blocked, until more space is released. It has lots of  more interesting features but we only need these for this example.

  • public static Task<List<T>> ExecuteQueue<T>(IEnumerable<Task<T>> tasks)
            {
                var numberOfConcurentTasksToExecute = Environment.ProcessorCount * 2;
                BlockingCollection<Task<T>> tasksToExecute = new BlockingCollection<Task<T>>(numberOfConcurentTasksToExecute);
                var tcs = new TaskCompletionSource<List<T>>();
                var result = new List<T>();
                ConcurrentQueue<Task<T>> startingTasks = new ConcurrentQueue<Task<T>>(tasks);
    
                var producerConsumer = Task.Factory.StartNew(() =>
                {
                    while (!startingTasks.IsEmpty || !tasksToExecute.IsEmpty())
                    {
                        var tasksCreated = tasksToExecute.Where(x => x.Status == TaskStatus.Created);
    
                        foreach (var createdTask in tasksCreated)
                        {
                            createdTask.Start();
                            createdTask.ContinueWith((x) =>
                            {
                                tasksToExecute.TryTake(out x);
                                result.Add(x.Result);
                            });
                        }
    
                        if (startingTasks.Count > 0)
                        {
                            Task<T> task;
                            startingTasks.TryDequeue(out task);
                            tasksToExecute.Add(task);
                        }
    
                    }
    
                    tcs.SetResult(result);
                });
    
                return tcs.Task;
            }

Explanation of this peace of code:

  • We have a queue with all the tasks going to be executed.
  • We have a BlockingCollection with a limit in its size. This limit it’s the number of task to be executed in parallel.
  • Now we have a task that inserts more items in to the tasksToExecute collection.
  • This same task starts the tasks stored on the tasksToExecuteCollection.
  • We will start a While iteration block, but this time the iteration it’s going to stop when we try to add a Task to tasksToExecute and it exceeds the size limit of the collection, so, the while it’s going to stop.
  • As we start inserting tasks, and the iteration is not blocked yet, the tasks are being started, and this time, when they finish (in the ContinueWith(….)), they will remove themselves from the tasksToExecute collection, releasing space on the tasksToExecute BlockingCollection and un-blocking the :
     tasksToExecute.Add(task);
  • In this way, as the tasks are completed, the thread un-blocks and adds more tasks.

With this approach we have a very shorter peace of code to maintain, we avoid synchronization variables, complexity of code, and reducing the number of while-iterations dramatically.

Hope you found this article useful! Happy coding!

Thoughts about Concurrency in .Net I

For almost 6 months, I have been working heavily in a Windows 8 app, as you know, called MyTrip. This brings you access to a huge amount of geo-located place information, 27.000 places more or less. In order to bring high quality information to this places, I extract lots of information from a lot of places. This is done by a separate WPF app that extracts and coerces data into the files that will be used by the Windows 8 app. Because the process it’s quite complicate, because of the time it takes and the steps it has to make to extract this info, I use the PTL (Parallel Task Library) to help me parallelizing the extraction process. Extracting 27.000 sequentially it’s discarded because it would take more than 48 hours to extract all the data. This was my first attempt:

 public async Task DownloadAndInsertAllPlaces(IEnumerable<ID> idContainer)
        {
            var tasks = idContainer.Select(id =>
            {
                return new Task(() =>
                {
                    try
                    {
                        ExtractPlace(id).Result
                    }
                    catch (Exception e)
                    {
                        _loger.LogException(id);
                        
                    }
                });
            });

            await TaskEnumerableExecuter(100, tasks); 
        }
   public async Task TaskEnumerableExecuter(int numberOfTaskToExecute, IEnumerable<Task> tasks)
        {
            var i = 0;
            do
            {
                if (i % numberOfTaskToExecute == 0)
                {
                    await Task.WhenAll(tasks.Skip(i).Take(numberOfTaskToExecute).Do((x) => { x.Start(); }).ToArray());
                }

                i++;
            } while (i <= tasks.Count());
        }

The first thing that comes to our mind it’s: If you have 27.000 tasks… Why don’t you run them all await for their completion with Task.WaitAll(tasks) ?

It’s unaffordable. Having 27.000 threads fighting for the CPU and Internet connection makes everything go slower. That’s why I execute buckets of 100 Tasks and wait for the completion.

·Why are you using ExtractPlace(id).Result instead of await ExtractPlace(id) and return the corresponding task?

Because I’m returning an INumerable<Task>. If I run the tasks.Count()) code, all the tasks would start running simultaneously.

This is obviously much better than the sequential code, and running this takes for 8 hours more or less. Nice improvement, but we can do it better. This code it’s not running more quickly because the Task.WhenAll(tasks.Skip(i).Take(numberOfTaskToExecute).Do((x) => { x.Start(); }).ToArray()); it’s waiting for the 100 task bucket to finish. If we have 99 tasks that end in 2 second, and 1 in 57 seconds, that peace of code will stop there for 57, though the rest of 99 tasks have been already completed.

clip_image002

So we have a blocking task, hurting or performance. If there is any way to get rid of it… Let’s implement the Producer->Consumer pattern! It’s very easy, I start inserting 100 tasks into a queue. If any of the tasks ends, I dequeue it and insert another task. The producer inserts in to a shared Collection, the consumer starts tasks there. In this way, I don’t’ have to wait for the most long running task. As the task end their execution, and their status change to Completed, I can dequeue them and insert more tasks. Using this pattern we will have always tasks running without blocking each other! Let’s see how it looks like:

public async Task<List<Place>> DownloadAndInsertAllPlaces(IEnumerable<Id> idContainer)
        {
            var tasks = idContainer.Select(id =>
            {
                return new Task<Place>(() =>
                {
                    try
                    {
                        var place = ExtractPlace(id).Result;
                        return place;

                    }
                    catch (Exception e)
                    {
                        _logger.LogException(id);
                        return null;
                    }
                });
            });

            var result = await ConcurrentExecuter.ExecuteQueue<Place>(tasks);

            return result;
        }

To this point, the code looks pretty similar, I have an IEnumerable<Task> and then I pass it to the new ConcurrentExecuter static helper method.

public static class ConcurrentExecuter
    {
        public static Task<List<T>> ExecuteQueue<T>(IEnumerable<Task<T>> tasks)
        {
            var numberOfConcurentTasksToExecute = Environment.ProcessorCount * 2;

            var tcs = new TaskCompletionSource<List<T>>();
            var result = new List<T>();

            ConcurrentBag<Task<T>> tasksToExecute = new ConcurrentBag<Task<T>>();

            ConcurrentQueue<Task<T>> startingTasks = new ConcurrentQueue<Task<T>>(tasks);

            var producer = Task.Factory.StartNew(() =>
            {
                while (!startingTasks.IsEmpty)
                {
                    if (tasksToExecute.Count < numberOfConcurentTasksToExecute)
                    {
                        Task<T> task;
                        startingTasks.TryDequeue(out task);
                        tasksToExecute.Add(task);
                    }
                }
            });

            var consumer = Task.Factory.StartNew(() =>
            {
                while (!tasksToExecute.IsEmpty || !startingTasks.IsEmpty)
                {
                    var tasksCreated = tasksToExecute.Where(x => x.Status == TaskStatus.Created);

                    foreach (var createdTask in tasksCreated)
                    {
                        createdTask.Start();

                    }

                    if (tasksToExecute.Any(x => x.IsCompleted))
                    {
                        var taskToTake = tasksToExecute.FirstOrDefault(x => x.IsCompleted);
                        tasksToExecute.TryTake(out taskToTake);
                        result.Add(taskToTake.Result);
                    }
                }

                tcs.SetResult(result);
            });

            return tcs.Task;
        }
    }

Don’t panic, it’s easy. We have two concurrent collections, they have to be concurrent because two tasks are going to access them from different trheads, the producer and the consumer.

1. I have a ConcurrentQueue from wich I will Dequeue tasks and insert them into the tasksToExecute concurrentBag.

2. I will do this until there are no more tasks in the startingTasks, and there are fewer tasks that I can Run (I don’t 100 tasks, I use the Enviroment.Processor variable to guess how many threads would be nice to run in parallel).

3. I have another task, the consumer, that runs in a loop until there are no more tasks to run. It detects witch of the task are Created and Start them. When any Task has it’s status in Completed, it takes it out from the ConcurrentBag.

4. The producer will detect that there is place for another task in the ConcurrentBag, it will add it.

5. The consumer will start it.

6. Repeat step 4 and 5 until there are no more tasks.

Although this approach executes the process in just 4 hours, it’s not perfect. Those loops inside of the tasks are not very efficient. We will work on that on future posts!

Hope you enjoyed the article and helps you, Happy coding!

MyTrip 1.0 esta en la windows store!

Después de mas de 4 meses ya esta acabada la aplicación MyTrip, aplicación con la que podrás seleccionar los sitios a los que quieres ir, componer tu propia guía personalizada con fotos, información, datos de población…

Puedes bajartela en:
http://apps.microsoft.com/webpdp/es-ES/app/mytrip/ae689d16-f349-4596-8bc7-e0eeab87ec24

Fotos sobre la aplicación:
https://skydrive.live.com/?cid=8a66d7f08e55427c&id=8A66D7F08E55427C%214706

Esto no ha hecho mas que empezar, dentro de poco muchas mas características!

MyTrip Privay Policy

¿What information does MyTrip collect?

None, we don’t collect any data relating you or your windows user login. We do use google analytics to learn how the app is used, which screens are visited, or which places are shown, in order to improve the app.

¿What do you use data connection for?

When you download MyTrip, you are downloading info of about 13.000 places. The only thing left are the photos. That’s why we use your internet data, to download by demand the photos for your trips, or places you are watching. We do use also internet connection to send to google analytics the places that has been visited and which screens are the shown.

%d bloggers like this: