Euler Angles

Euler angles allow you to specify any 3D rotation with just 3 values, these values are as follows:

Pitch

Up and down (i.e. looking up and down)

Yaw

Side to side (i.e. looking left and right)

Roll

Tilting (i.e. tilting your head from side to side)

References

Math for Game Developers - Mouse Control (Euler Angles) Video on YouTube

App Icons and iTunes Icons for iOS Apps

You can change what App Icon your iOS App is going to have through the assets catalog. You will need to create quite a few different sizes and I've found the best way to do this is to make the biggest one and resize it accordingly, but where do all these different sizes go? First you will need to enable all the sizes you need, by clicking on the AppIcon asset and finding the following pane:



You can enable/disable these as appropriate for your app, and you should end up with an asset catalog that looks like this:



The above image should tell you what image sizes you will need for your App icons, and where they need to be placed in the catalog.

References

Apple Developer

Xcode - Our Experience

When using Xcode for the first time it can be a bit tricky. So here's some useful things that we have found out along the way when developing using Swift in Xcode 6.

Zooming

• In iOS Simulator:
• ⌘+1 for 100%
• ⌘+2 for 75%
• ⌘+3 for 50%
• In storyboard:
• Double click outside of view will toggle between zoomed in and zoomed out
• There is a keyboard shortcut but it's less efficient

Adding tab to tabbed application

https://www.youtube.com/watch?v=NFTcR9H-OYQ

• Add a view controller from the object library to the storyboard
• Find the Tab Bar Item from the object library and add it to your new view controller
• Select the Tab Bar Controller and hold down control and drag onto the new view controller
• Select view controllers under relationship segue

Custom tab bar items

• Click on the Images.xcassets folder
• Right click and select import and navigate to the appropriate item
• Go to the storyboard and click on the tab bar item you want to give a custom item
• Set the image and title

Using table views

https://www.youtube.com/watch?v=war0gHL26ns

Adding layout constraints

• Go to the storyboard
• From the hierarchy of scenes:
• Hold down control and click on the view that will constrain your view, i.e. to have a table view take up the entire view for different resolutions you would select the parent view
• Drag down and select the view you want to constrain
• Select the constraint type

Adding duplicate component

Hold down alt key and drag on existing component

The Recursion Checklist

Recursion isn't the hardest principle to understand, but often is not a way of thinking that comes most naturally for developers. Personally, I have struggled with recursion and try as I might to avoid it, sometimes it is the cleanest way! After using it a few times I have become more comfortable with it, and have developed a checklist of what to look for when writing a recursive function.

The Base Case

• Prevents infinite recursion
• Kind of similar to a while loop condition for when to stop looping

The Recursive Call

• Moves towards the base case
• The defined method is called from within itself

Famous Recursion

Words are great, but rarely help you understand a problem... So now let's take a look at a few common examples:

• Fibonnaci
• Trees

Fibonacci

Fibonacci is simply written using recursion but also is incredibly inefficient this way. Nonetheless, consider the following:

  public int fibonacci(int n)  {
     if(n == 0) {
        return 0;
     } else if(n == 1) {
        return 1;
     } else {
        return fibonacci(n - 1) + fibonacci(n - 2);
     }
  }

Fibonacci is a classic algorithm that makes 2 recursive function calls and is exponentially large. Recursion is terminated when n is either 0 or 1. However, although it is most simply written recursively it can be much more efficiently written iteratively, as follows:

  public int fibbonaci(int n) {
     int current = 0; 
     int next = 1; 

     for (int i = 0; i < n; i++) {
        int temp = current + next;
        current = next;
        next = temp;
     }

     return current;
  }

Finding the root of a tree node

Let's assume we are given the following class to represent a node of a tree, and that the values in the tree are populated appropriately:

  public class Node {
     private Node _parent;
     private IList _children;

     public Node getRoot() {
        if (_parent == null) {
           return this;
        }

        return _parent.getRoot()
     }

     public Node getParent() {
        return _parent;
     }
  }

The getRoot method is recursive as it calls itself, and will keep calling itself until it gets to the root node. The root node is where recursion terminates due to the check if the parent is null. As the root node is the value returned in the base case, this value propagates all the way up through the recursive calls to the entry point of the method, and thus this is a simple way to get the root of the tree. Alternatively, this same method can be written without recursion and this may be preferable for the reasons described later:

  public Node getRoot() {
     Node currentNode = this;
     
     while(currentNode.getParent() != null) {
        currentNode = currentNode.getParent();
     }

     return currentNode;
  }

Iteration or Recursion?

When deciding whether to use recursion there are a few things you should consider:

1. How much data are you working with?
2. Is there a simple iterative solution?

How much data are you working with?

This is a very important factor, as if you have too much data and thus very deep recursion, a stack overflow will occur and your program will throw an exception. This is when your program tries to use more space that is available on the call stack. The size of the call stack varies depending on a variety of factors such as machine architecture and programming language.

Some languages, such as Scheme, are optimised to allow for infinite tail recursion, and implement tail call optimisation. Unfortunately, in most languages such as C#, Python and Java, this is not the case. Tail recursion is when the return result comes entirely from the recursive call. For example, our getRoot call is tail recursive as the return result relies entirely on the recursively called function or the base condition. Whereas, the following function is not tail recursion as it relies on the multiplication of the parameter n times the value of the recursive call, and thus the recursive call must be evaluated before the return value can be.

  public int fact(int n) {
     if (n == 0) {
        return 1;
     } else {
        return n * fact(n - 1);
     }
  }

Is there a simple iterative solution?

Often recursion is the simplest way to solve a problem, and this is when it is most commonly used. It is important when choosing whether to use a recursive or iterative approach, to decide whether you can simply implement a solution using an iterative approach. In general, an iterative approach is more efficient as there is less overhead involved.

References

http://stackoverflow.com/questions/3021/what-is-recursion-and-when-should-i-use-it

C# vs Java - Access Modifiers

C#

There are 5 access modifiers in C#:

• public
• private
• protected
• internal
• protected internal

These are used in the declaration of classes, structs and members of classes or structs. The public access modifier allows access from anywhere, and should be used sparingly. It is best to use public only where a member will need to be accessed by a class that is not part of the same assembly or extends the applicable class. The public modifier is common in the declaration of classes or properties, as classes are often externally used and properties define getters and setters and thus aid encapsulation.

The private modifier is good for encapsulation, as it hides anything that should be inaccessible by another class. It is the most restrictive of access modifiers as only code in the same struct or class can access it, and is the default for class or struct members. The private modifier is commonly used on fields, but is also used on methods that may be called within public methods but shouldn't be accessible otherwise. By using the private modifier where possible we can help reduce the chance of other programmers calling the wrong method when they are using our class. It is important to note a class cannot be private unless it is nested within another class.

The protected modifier means that the type or member can only be accessed by code in the same class, or classes that inherit from it. Therefore, it is important to give careful thought to members you are considering declaring protected as if you release your code as a library, and other classes extend your class, and then you want to make a change to the member, your change may break code that uses your library. The protected modifier can be useful when declaring an abstract class, to ensure that classes which extend this abstract class have access to members which should be common amongst all classes that extend the abstract class.

The internal modifier is the default for classes and structs in C#, and is similar to package-visibility in Java. This modifier gives access to any code in the same project, and is commonly used to confine the use of a class to a project in a solution. Generally, a class' members have lower or equal accessibility to the class, but sometimes when an internal class extends a public class it may have public members that it has overridden from the base class.

Additionally, there is the protected internal access modifier. This basically means it can be accessed from code where it could be accessed from if the member was declared protected OR internal. Finally, it is important to note that interface members cannot be declared with an access modifier, this makes sense as the purpose of an interface is to allow another class to access another's members. Interfaces can either be internal or public.

Java

Java is quite similar to C#, so first we will outline the similarities in access modifiers:

• public behaves the same way in both C# and Java
• private behaves the same way in both C# and Java.
• protected behaves the same way in both C# and Java.

However, there are some differences. Firstly, by default classes or members of a class have package-visibility in Java which means that they can be accessed by code in the same package. Whereas, in C# default accessibility for a member is private and the default accessibility for a class in internal. Package-visibility is similar to internal visibility, except that in Java the package is represented physically by a directory and only code in the same directory can access something with package visibility. Whereas, with internal members any code in a project (not necessarily the same directory) can access it.

Finally, in Java there is no way to explicitly set package-visibility, and no way to allow for either protected or package-visibility access for the same member (as you do with protected internal in C#). Therefore, you have a lower level of control over the accessibility of classes and their members than you do in C#. C# is easier to modularize your code in, by using internal and having different projects in the same solution, and therefore I find it better suited for commercial work as it is easier to maintain the structure of a solution.

Overview of Layouts for WPF

Layout Containers

Layout containers are what you put your content in. There are 5 main types and each have situations where they are advantageous.

Stack Panel

This is one of the most simple layouts to use, but does not give you much control over how elements are laid out. It allows you to layout items horizontally or vertically by setting the 'Orientation' attribute of the StackPanel. By default, orientation is Vertical. Its children are laid out in the order in which they are specified in the xaml and sizing is handled automatically. Here's an example:

   <StackPanel Orientation="Horizontal">            
      <TextBlock>Name</TextBlock>
      <TextBox Width="200" />
   </StackPanel>

Wrap Panel

The WrapPanel is very similar to the StackPanel, it will lay its children out either vertically or horizontally but when it runs out of space to do so it will continue to lay out its children on the next column or row respectively. It is also a simple layout to use and is advantageous when you want your layout to adjust to resizing and you aren't concerned about the positioning of your elements relative to the frame of the WPF application. Here's an example:

   <WrapPanel Orientation="Horizontal">            
      <Button>Buttons will wrap!</TextBlock>
      <Button>Buttons will wrap!</TextBlock>
      <Button>Buttons will wrap!</TextBlock>
      <Button>Buttons will wrap!</TextBlock>
      <Button>Buttons will wrap!</TextBlock>
      <Button>Buttons will wrap!</TextBlock>
      <Button>Buttons will wrap!</TextBlock>
      <Button>Buttons will wrap!</TextBlock>
      <Button>Buttons will wrap!</TextBlock>
   </WrapPanel>

Grid

This is the layout that is most frequently used throughout our Spelling Bee app, and is quite powerful while still being simple to use. When using a Grid layout you are able to specify the rows and columns, and you are also able to specify the height or width of these. We have found that we most commonly set these to either '*' or 'Auto'. Auto means that the row or column will size itself such that it fits its child, whereas * means that the remaining space will be consumed. If there are multiple rows or columns set to *, then the remaining space will be divided evenly amongst them. The * may also be prefixed by a number which will result in the corresponding column having a width: ([remaining space]/[n + other column * total]) * n, where n is the number prefixing the *. The same applies for rows, here is an example:

   <Grid>
      <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
         <RowDefinition Height="*" />
         <RowDefinition Height="3*" />
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width="Auto" />
         <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>

      <TextBlock Grid.ColumnSpan="2">My Form!</TextBlock>
      <TextBlock Grid.Row="1" Grid.Column="0">Name</TextBlock>
      <TextBox Grid.Row="1" Grid.Column="1" 
         HorizontalAlignment="Stretch" />

      <TextBlock Grid.Row="2" Grid.Column="0">Comment</TextBlock>
      <TextBox Grid.Row="2" Grid.Column="1"
         HorizontalAlignment="Stretch" 
         VerticalAlignment="Stretch" 
         TextWrapping="Wrap" />
   </Grid>

In the above example, the 3rd row will take up 3/4 of the remaining space. Additionally, we specified which row and column elements would be in using Grid.Row and Grid.Column! Finally, another feature of a grid is that we can set a column or row span using Grid.ColumnSpan or Grid.RowSpan respectively. Grids are useful in many situations, but are particularly useful for laying out forms. It is important to note that you can programmatically define new rows and columns which may be useful for laying out data, but there are other elements which may make this easier.

Dock Panel

The DockPanel is one of the layouts we use less frequently, due to our unfamiliarity with it. However, it can be useful, specifically when you want some elements relative to the edges and then an element to take up the remaining central space. For example, many websites such as Facebook have a top bar, this would be set in a DockPanel by listing the top bar element first and setting the attribute DockPanel.Dock on it to "Top". Websites such as Facebook often also have a left sidebar for navigation, in a DockPanel this would be done by setting the attribute DockPanel.Dock to "Left". We could continue this for the ad view, chat bar and news feed, but it is simpler to show you the xaml for it:

   <DockPanel LastChildFill="True">
      <StackPanel Name="topBar" DockPanel.Dock="Top">
         ...
      <StackPanel>

      <StackPanel Name="navSideBar" DockPanel.Dock="Left">
         ...
      <StackPanel> 

      <StackPanel Name="chatBar" DockPanel.Dock="Right">
         ...
      <StackPanel> 

      <StackPanel Name="adBar" DockPanel.Dock="Right">
         ...
      <StackPanel> 

      <StackPanel Name="newsFeed" DockPanel.Dock="Top">
         ...
      <StackPanel> 
   </DockPanel>

The LastChildFill attribute of the DockPanel means that the last child will take up the remaining central space. The above xaml shows a simplified example of how Facebook is laid out, it is important to note that the ordering of child elements is important in a DockPanel whereas it isn't in a Grid.

Canvas

Last but not least, we have the Canvas! When using a Canvas you position children elements using explicit coordinates. The coordinates are specified relative to the sides of the canvas, for example, x coordinates are specified relative to the left and right sides and y coordinates are specified relative to the bottom and top sides. A canvas is typically used for grouping 2D graphic elements together, and it is not considered good practice to use it to layout UI elements. The following is an example:

   <Canvas>
      <Rectangle Canvas.Left="30" Canvas.Top="70" 
         Width="100" Height="100" Canvas.ZIndex="1" />
      <Rectangle Canvas.Right="270" Canvas.Bottom="130"
         Width="200" Height="100" />
   </Canvas>

Another cool feature of the Canvas is that by setting the Canvas.ZIndex you can set the Z-Ordering. By default they are ordered from back to front in the order they are specified in the XAML and this is the way we would do it rather than setting the Canvas.ZIndex but it could be useful for updating the Z-Ordering programmatically.

Using Text To Speech For Windows Phone 8.1

Text to speech in Windows Phone Silverlight apps is remarkably simple. However, as with everything the more you want to do the more complex it gets. Having said that this tutorial should be able to guide you through most things you may commonly want to do. First, we created a button in our xaml that when clicked called the following method with a word of our choosing:

  private async void Play_Word(string word)
  {
      var synth = new SpeechSynthesizer();
      await synth.SpeakTextAsync(word);
  }

The async keyword basically says that the method will run asynchronously, so as to not block the caller's thread. It is used because speaking text may be a long running task. It ensures that the user doesn't experience a lack of responsiveness. Whereas the await keyword means that the rest of the method will not be executed until the call following the await has completed. We actually instantiated our SpeechSynthesizer in the constructor, but we have moved the instantiation into Play_Word for completeness, and will now just refer to the SpeechSynthesizer as _synth.

In our app we used text to speech to say a word for the user to spell. However, upon using it several times we realised the rate of speech was too high as words such as 'ant' and 'bee' were spoken too quickly to be distinguishable. Therefore, we switched to using SSML to speak the text at our desired rate. Our amended method was as follows:

  private async void Play_Word(string word)
  {
      string ssml = String.Format("<speak version=\"1.0\" 
        xmlns=\"http://www.w3.org/2001/10/synthesis\"
        xml:lang=\"en-US\">
        <prosody rate=\"-2\">{0}</prosody>
        </speak>", word);
      await _synth.SpeakSsmlAsync(ssml);
  }

Basically, the speak tag must surround the SSML tags that specify how your words will be spoken, and its attribute xmlns defines the XML namespace. Prosody controls the rate, pitch and output volume. As we only wanted to control the rate we set the rate attribute of prosody. There are also other aspects of speech you can control, and W3's SSML page documents them.