Learn About Places (LAP)

Introduction

Many times people while reading and learning history and geography for different places on the globe become a cumbersome job. All the time reading heavy books and no enjoyment in learning the subjects. I myself experienced the need to put some enthusiasm in learning these subjects as you know knowledge of past is important for the improvements in future.

Well this problem is sorted by Learn About Places (LAP). LAP solve these issues by graphically showing different places on the maps, history of those places and geographical location of the places. After studying the history and geography of the relevant places users can solve a quiz to check their learning. Now lets dive into the detailed description of the application showing, how it works, how it is beneficial for the targeted users.

Category and Platform

LAP is an entertainment app with the learning of the subjects. The elements that makes it an entertainment app is the clever use of the Bing Maps, explorative articles, checking your knowledge through fun games including quiz etc. LAP is therefore a complete package for entertainment.

Platform LAP is targeted to is the ALL-In-One PC. The features provided by this new category of devices enhances and explores the app features. Lenovo Horizon All-In-One PC's features such as Aura Interface helps expand the app experience for the users.

Overview

Now we have talked enough about LAP as what it does, let's go into the detailed description of the app from now onwards.

The App is mainly partitioned (in a way) into four categories:

  (a). History of a place.

  (b). Geography of a place.

  (c). Fun Games.

  (d). Quiz. <u3:p>

These three broad categories are not strictly in order in the app, as the uses the app the flow of the app manages the aspects.Now let's look at the main page snapshot. 

GUI (Graphical User Interface) of LAP is very simple, as no crome before content. The main page shown above consist of just two options. One is to "Enter a Place" and other "Plan a learning Trip" and a little description of both the options.

Working of LAP

Enter a Place  

"Enter a Place" navigates the user to a panel where he/she can enter a place whose history and geography needs to be known. The place entered will he highlighted on the Map specifying few details, and simultaneously shows the option of history, geography and games for that particular place to the right side in the panel.

 Plan a Learning Trip 

"Plan a learning Trip" is some what advanced than the other option. It really explores and includes all components of the application. The user navigates to a panel where he/she enters two locations similar to finding the path between two locations on the map. The path between these two locations appears on the map with a list of places long the path highlighted. Now the user starts from source location and travels through the path and explore history and geography of these places along the path. Hence the name "Plan a Learning Trip".

App Features

Above were the basic functionality provided by LAP. Now,let's dive deep into the details of the app. Afterentering the places their corresponding name(s) appear in the form of a list inside the panel to the right side as shown above for both the options.

For both options select a place from the list. This navigates to new page listing the categorization shown above.

Select any one of the above stated options.

1. History

On selection of this option user is navigated to a new page consisting of articles , videos, and books relevant to the history of that place. Articles are present from any of the writers. Videos consist of clip of history series from different sources for ex-History Channel. Books are present by different writers related to the history of the place.

2. Geography

On selection of this option user is navigated to a new page consisting of the geographical listing of the place for eg-Longitude, Latitude, Continent,Country, State, City etc. Along with these details videos, articles and the history of the place options are available. Along with all these feature a map snapshot is available stating the geographic location on the map.

3. Quiz

On selection of the quiz option user is navigated to a new page consisting of historic and geographical questions. User can give the quiz and will be give score for the quiz.This brings competitiveness among the users.

4. Games

On selection of this option the user is navigated to a new page consisting of collection of fun games

Developing LAP

Overview 

LAP is developed using Microsoft Visual Studio 2012. Metro apps runs as desktop apps for Lenovo Horizon AlO therefore LAP also does. Designing of LAP was done in VS2012 editor using XAML (eXtensible Application Markup Language). XAML is very convenient for designing windows applications. Logic of LAP was written in C# programming language.

Designing

Designing and architecture of LAP is done carefully. Any loose coupling between the elements is omitted. Such coupling is removed because a methodology MVVM (Model View View Model) is used for developing LAP.<u3:p>

LAP uses Bing Maps therefore Bing Maps api is used to include the Map element. Startup Page of the app opens with a map showing two options as stated in the "Working of LAP" section. Startup page code of LAP is as follows:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Maps:Map x:Name="BingMap" 
              HomeRegion="US" Culture="en-US"
              Credentials="{StaticResource BingCredentials}"/>
    <Grid Background="#FFF5810D" Margin="134,40,475,52">
        <Grid.RowDefinitions>
            <RowDefinition Height="127*"/>
            <RowDefinition Height="641*"/>
        </Grid.RowDefinitions>
        <TextBlock HorizontalAlignment="Left" 
               Margin="45,42,0,0" TextWrapping="Wrap"
               VerticalAlignment="Top" FontSize="50">
        <Underline>Categories</Underline>
        </TextBlock>
        <Grid Grid.Row="1" Background="#FFF7E209">
            
            <Button Content="History" HorizontalAlignment="Left" 
              Margin="97,83,0,0" VerticalAlignment="Top" 
              Height="152" Width="200" FontSize="30" 
              Background="#FFB4B429"/>
            <Button Content="Games" HorizontalAlignment="Left" 
              Margin="97,284,0,0" VerticalAlignment="Top" 
              Width="200" Height="152" FontSize="30" 
              Background="#FFB4B429"/>
            <Button Content="Geography" HorizontalAlignment="Left" 
              Margin="404,83,0,0" VerticalAlignment="Top" 
              Height="152" Width="200" FontSize="30" 
              Background="#FFB4B429"/>
            <Button Content="Quiz" HorizontalAlignment="Left" 
              Margin="404,284,0,0" VerticalAlignment="Top" 
              Height="152" Width="200" FontSize="30" 
              Background="#FFB4B429"/>
        </Grid>
    </Grid>
    <StackPanel x:Name="_MainStackPanel"
                HorizontalAlignment="Left"  Height="768"
                VerticalAlignment="Top" Width="337" 
                Margin="1029,0,0,0" Background="#FFD8A840">
       
        <Button Content="Enter a Place" HorizontalAlignment="Stretch" 
                 VerticalAlignment="Stretch" Margin="5,20,5,5"
                 Background="#FFDE6B35" Height="52" 
                 FontSize="20" Click="Enter_Place_Event_Click"/>

        <Button Content="Plan a learning Trip" 
                 HorizontalAlignment="Stretch" 
                 VerticalAlignment="Stretch" Margin="5,5,5,5"
                 Background="#FFDE6B35" Height="52" FontSize="20"/>
        <TextBlock TextWrapping="Wrap" FontSize="22" Margin="12,20,0,0">
            <Underline>Places:</Underline>
        </TextBlock>
       
        <TextBlock Margin="12,15,5,5" FontSize="17" TextWrapping="Wrap">
                
            <Underline FontSize="20">Enter a Place:</Underline>
             Click on the button, a panel opens where you enter a place to explore and learn about it
            <LineBreak/>
            <LineBreak/>
            <Underline FontSize="20">Plan a Learning Trip</Underline>
            Click on the button, a panel opens where you enter two places.
            The places between these places including them are their
            present for exploration

        </TextBlock>
    </StackPanel>
</Grid>

History page design code, listing articles, videos, and books.

<Grid Style="{StaticResource LayoutRootStyle}">
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

      <GridView
        x:Name="itemGridView"
        AutomationProperties.AutomationId="ItemGridView"
        AutomationProperties.Name="Grouped Items"
        Grid.RowSpan="2"
        Padding="116,137,40,46"
        ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
        ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
        SelectionMode="None"
        IsSwipeEnabled="false"
        IsItemClickEnabled="True"
        ItemClick="ItemView_ItemClick">

        <GridView.ItemsPanel>
            <ItemsPanelTemplate>                        
                <VirtualizingStackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid Margin="1,0,0,6">
                            <Button
                                AutomationProperties.Name="Group Title"
                                Click="Header_Click"
                                Style="{StaticResource TextPrimaryButtonStyle}" >
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" 
                                      Style="{StaticResource GroupHeaderTextStyle}" />
                                    <TextBlock Text="{StaticResource ChevronGlyph}" 
                                      FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" 
                                      Style="{StaticResource GroupHeaderTextStyle}"/>
                                </StackPanel>
                            </Button>
                        </Grid>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid Orientation="Vertical" 
                              Margin="0,0,80,0"/>
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </GridView.GroupStyle>
    </GridView>

    <ListView
        x:Name="itemListView"
        AutomationProperties.AutomationId="ItemListView"
        AutomationProperties.Name="Grouped Items"
        Grid.Row="1"
        Visibility="Collapsed"
        Margin="0,-10,0,0"
        Padding="10,0,0,60"
        ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
        ItemTemplate="{StaticResource Standard80ItemTemplate}"
        SelectionMode="None"
        IsSwipeEnabled="false"
        IsItemClickEnabled="True"
        ItemClick="ItemView_ItemClick">

        <ListView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid Margin="7,7,0,0">
                            <Button
                                AutomationProperties.Name="Group Title"
                                Click="Header_Click"
                                Style="{StaticResource TextPrimaryButtonStyle}">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" 
                                      Style="{StaticResource GroupHeaderTextStyle}" />
                                    <TextBlock Text="{StaticResource ChevronGlyph}" 
                                      FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" 
                                      Style="{StaticResource GroupHeaderTextStyle}"/>
                                </StackPanel>
                            </Button>
                        </Grid>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ListView.GroupStyle>
    </ListView>

       
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" 
              IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" 
              Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" 
              Grid.Column="1" IsHitTestVisible="false" 
              Style="{StaticResource PageHeaderTextStyle}"/>
        </Grid>

        <VisualStateManager.VisualStateGroups>

           
        <VisualStateGroup x:Name="ApplicationViewStates">
            <VisualState x:Name="FullScreenLandscape"/>
            <VisualState x:Name="Filled"/>

         
            <VisualState x:Name="FullScreenPortrait">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames 
                            Storyboard.TargetName="backButton" 
                            Storyboard.TargetProperty="Style">
                        <DiscreteObjectKeyFrame KeyTime="0" 
                          Value="{StaticResource PortraitBackButtonStyle}"/>
                    </ObjectAnimationUsingKeyFrames>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" 
                            Storyboard.TargetProperty="Padding">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="96,137,10,56"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>

           
            <VisualState x:Name="Snapped">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames 
                            Storyboard.TargetName="backButton" 
                            Storyboard.TargetProperty="Style">
                        <DiscreteObjectKeyFrame KeyTime="0" 
                          Value="{StaticResource SnappedBackButtonStyle}"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" 
                      Storyboard.TargetProperty="Style">
                        <DiscreteObjectKeyFrame KeyTime="0" 
                          Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                    </ObjectAnimationUsingKeyFrames>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" 
                             Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" 
                              Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

Category UI XAML code,which shows different categorizations:

<Grid Background="#FFF5810D" Margin="134,40,475,52">
    <Grid.RowDefinitions>
        <RowDefinition Height="127*"/>
        <RowDefinition Height="641*"/>
    </Grid.RowDefinitions>
    <TextBlock HorizontalAlignment="Left" Margin="45,42,0,0" TextWrapping="Wrap"
           VerticalAlignment="Top" FontSize="50">
    <Underline>Categories</Underline>
    </TextBlock>
    <Grid Grid.Row="1" Background="#FFF7E209">
        
        <Button Content="History" HorizontalAlignment="Left" Margin="97,83,0,0" 
           VerticalAlignment="Top" Height="152" Width="200" 
           FontSize="30" Background="#FFB4B429"/>
        <Button Content="Games" HorizontalAlignment="Left" 
          Margin="97,284,0,0" VerticalAlignment="Top" Width="200" 
          Height="152" FontSize="30" Background="#FFB4B429"/>
        <Button Content="Geography" HorizontalAlignment="Left" 
          Margin="404,83,0,0" VerticalAlignment="Top" 
          Height="152" Width="200" FontSize="30" 
          Background="#FFB4B429"/>
        <Button Content="Quiz" HorizontalAlignment="Left" 
          Margin="404,284,0,0" VerticalAlignment="Top" 
          Height="152" Width="200" FontSize="30" 
          Background="#FFB4B429"/>
    </Grid>
</Grid>

Code

The code behind file handles the business logic of the application. C# programming language is used for programming the app business logic. In developing LAP Bing Maps sdk is used and therefore it's reference is added to the project. Bing Map REST Services are used and it's route and location api to find the path and respective locations.

Following is the Startup page code behind:

private async Task<BingMapsRESTService.Response> GetResponse(Uri uri)
{
    System.Net.Http.HttpClient client = new System.Net.Http.HttpClient();
    var response = await client.GetAsync(uri);
    using (var stream = await response.Content.ReadAsStreamAsync())
    {
        DataContractJsonSerializer ser = 
          new DataContractJsonSerializer(typeof(BingMapsRESTService.Response));
        return ser.ReadObject(stream) as BingMapsRESTService.Response;
    }
}

 async private void Button_To_Search_Route_Click(object sender, RoutedEventArgs e)
 {
     Button_To_Search_Route.IsEnabled = false;
     if (Text_For_From_Location.Text == "" || TextBox_To_Enter_To_Location.Text == "")
     {
         
         Popup_Notification(2);
     }
     else
     {
         try
         {
             ProgressBar.IsIndeterminate = true;
             ProgressBar.Visibility = Visibility.Visible;
             Canvas_To_Find_Route.Visibility = Visibility.Collapsed;
             URL = "http://dev.virtualearth.net/REST/V1/Routes/Driving?o=json&wp.0=" + 
               TextBox_To_Enter_To_Location.Text + "&wp.1=" + 
               Text_For_From_Location.Text + "&optmz=distance&rpo=Points&key=" + map.Credentials;
             Uri geocodeRequest = new Uri(URL);
             BingMapsRESTService.Response r = await GetResponse(geocodeRequest);
             geolocator = new Geolocator();
             pushpin = new Pushpin();
             FromLatitude = ((BingMapsRESTService.Route)(r.ResourceSets[0].Resources[0])).RoutePath.Line.Coordinates[0][0];
             FromLongitude = ((BingMapsRESTService.Route)(r.ResourceSets[0].Resources[0])).RoutePath.Line.Coordinates[0][1];
            
             location = new Bing.Maps.Location(FromLatitude, FromLongitude);
             MapLayer.SetPosition(pushpin, location);
             map.Children.Add(pushpin);
             map.SetView(location, 8.0f);

             MapPolyline routeLine = new MapPolyline();
             routeLine.Locations = new LocationCollection();
             routeLine.Color = Windows.UI.Colors.Red;
             routeLine.Width = 5.0;
             int bound = ((BingMapsRESTService.Route)(
               r.ResourceSets[0].Resources[0])).RoutePath.Line.Coordinates.GetUpperBound(0);
             for (int i = 0; i < bound; i++)
             {
                 routeLine.Locations.Add(new Bing.Maps.Location
                 {
                     Latitude = ((BingMapsRESTService.Route)(
                       r.ResourceSets[0].Resources[0])).RoutePath.Line.Coordinates[i][0],
                     Longitude = ((BingMapsRESTService.Route)(
                       r.ResourceSets[0].Resources[0])).RoutePath.Line.Coordinates[i][1]
                 });
                 
             }
             pushpin1 = new Pushpin();
             location1 = new Bing.Maps.Location(routeLine.Locations[0]);
             MapLayer.SetPosition(pushpin1, location1);
            
             MapShapeLayer shapeLayer = new MapShapeLayer();
             shapeLayer.Shapes.Add(routeLine);
             map.ShapeLayers.Add(shapeLayer);
             ProgressBar.IsIndeterminate = false;
             ProgressBar.Visibility = Visibility.Collapsed;
             Canvas_For_Searching_Location.Visibility = Visibility.Collapsed;
         }
         catch (Exception ex)
         {
             var dialog = new MessageDialog(ex.Message);
         }
     }
     Button_To_Search_Route.IsEnabled = true;
}

async private void Button_To_Search_Location_Click(object sender, RoutedEventArgs e)
{
    Button_To_Search_Location.IsEnabled = false;
    if (TextBox_To_Enter_Location.Text == "")
    {
        Canvas_For_Searching_Location.Visibility = Visibility.Collapsed;
        Popup_Notification(1);

    }
    else
    {
        try
        {
            
            Canvas_For_Searching_Location.Visibility = Visibility.Collapsed;
            ProgressBar.IsIndeterminate = true;
            ProgressBar.Visibility = Visibility.Visible;
            URL = "http://dev.virtualearth.net/REST/V1/Routes/Driving?o=json&wp.0=" + 
                  TextBox_To_Enter_Location.Text + "&wp.1=" + 
                  TextBox_To_Enter_Location.Text + 
                  "&optmz=distance&rpo=Points&key=" + map.Credentials;

            string value = "Ar1AUldQavUnDzLKSQtJ-9evD7v8uA-v6ZdJNpCx7Swkuxif5X1l7FPbx6v";
            GeocodeRequest geocoderequest = new GeocodeRequest();


            geocoderequest.Credentials = new WowZapp_Application.Geocode_Service.Credentials();
            geocoderequest.Credentials.ApplicationId = value;


            geocoderequest.Query = TextBox_To_Enter_Location.Text;


            ConfidenceFilter[] filters = new ConfidenceFilter[1];
            filters[0] = new ConfidenceFilter();
            filters[0].MinimumConfidence = WowZapp_Application.Geocode_Service.Confidence.High;


            GeocodeServiceClient geocodeservice = new GeocodeServiceClient(
              GeocodeServiceClient.EndpointConfiguration.BasicHttpBinding_IGeocodeService);
            GeocodeResponse geocoderesponse = await geocodeservice.GeocodeAsync(geocoderequest);
           
            if (geocoderesponse.Results.Count > 0)
            {
                Bing.Maps.Location location = new Bing.Maps.Location(
                  geocoderesponse.Results[0].Locations[0].Latitude, 
                  geocoderesponse.Results[0].Locations[0].Longitude);
                MapLayer.SetPosition(pushpin1, location);
                map.SetView(location, 10.0f);
                ProgressBar.IsIndeterminate = false;
                ProgressBar.Visibility = Visibility.Collapsed;
            }
        }

        catch (Exception ex)
        {
            var dialog = new MessageDialog(ex.Message);
        }
       
    }
    Button_To_Search_Location.IsEnabled = true;
}

Intented Users

LAP is a global application, and it can be used by any users. But the more targeted user of LAP application are the students, professors, historians, geologist and ofcourse for any common man who wants to enjoy the learning.

History

This is my first post on CodeProject.