Programming: Hidden Details Cateogory

The Magna Carta has special facts and details that are hidden within the app. Either historical context of the Magna Carta or additions and accidents that have happens to the document that we thought were important to the app and will give the audience a new insight to the document itself.

Below is an image of where the little details are featured within the app. While it is cool that each of the details have been highlighted, this is just an initial reference to where all the details are, as it isn’t easy to see what is being pointed out.

Screen Shot 2015-05-14 at 12.02.00

Using photoshop (other design program are out there) we drew boxes around each of the details making sure there was enough room around each of the detail wasn’t covered up by the boxes by using the same border thickness size we would use within the app. See below.Screen Shot 2015-05-18 at 13.36.15From this document we were able to get the co-ordinates of each of the boxes that we needed to use and place them within Xcode. This was achieved by pressing Command ⌘-T which allowed you to transform the object however it also tells you the X and Y axis positioning and the height and width the box is, then this information was placed in the correct hidden detail, the same way as the over co-ordinates for the clauses.

It was great that we had all the boxes mapped out, however these particular overlays would need to be transparent inside the boxes and translucent for the edges so that each detail is highlighted in a big enough area but you can still see what is actually inside the boxes. Like the photoshop document, however the overlays we had created only used a background colour.

To achieve this within the overlay.swift we needed to create an function that gave all the overlays a border however we only want the hidden details to have the border therefore we created a if statement that will set the default of the function to false and only when the function gets called within the clauses.swift the border will appear.  See below, the function.Screen Shot 2015-05-18 at 13.47.17

Therefore within the information about each of the clauses and the overlays, it was possible to specify whether the isHidden function is needed within the clause. See Below.Screen Shot 2015-05-18 at 13.53.55

In addition to this we set the hidden details to have a different background colour ( colour3) which would allow us to make the background colour transparent. By using “let colour3 = UIColor.clearColor() “. From this it has allowed us to show the hidden details within the document however it doesn’t stop the user from being able to see the detail itself which if we used the same overlays for the clauses it would. See below the result. Screen Shot 2015-05-18 at 13.59.39As part of the mystery of the hidden details and part of the charm of the document, we have kept the hidden details are a category on its own as we think they are important to the document but also didn’t want to distract the users from the content itself. Therefore they aren’t within the ‘All category’. They would overlap many of the clauses which would look messy.

Programming: Styling the detail view

As we already have a basic skeleton of the app (prototype) and the designs of how the app will look like once completed, we got to work with putting some of the styling into the app that the designers had produced and intended.

As we hadn’t incorporated the menu bar into the application yet, we started with styling the detail view which can be found in the detailView.swift. The detail view is where all the information about the different clauses are going to be displayed; the english translation and contextualisation.  In the detail view there are two elements to the view. The title which is detailTitle and the text as detailText. Originally we had both of these elements as UILabel but with a label it required constraints for the text. However as we had decided to make the app programatically, it was easier to make the detailText a UITextView. The reason this made it easier as UITextView has already got constraints within the view to stop the text going further than the boundaries.

The UITextView is primarily designed for areas of text that can be edited or added too therefore to allow the text to fill the area and not go over the restricted boundaries but to not be edited by users there were some statements that we had to add in. As you can see from the screenshot below, I have disabled the user interaction, this stops the text being editable and by setting the background colour to nil this makes the text field use the defined background colour for the whole detail view.

Screen Shot 2015-05-03 at 20.33.29

The main styling for the detail view, seen below, was designed on having the background as the dark brown of the colour guideline, with the main body of the text in a yellow/gold colour and the title in a different font family in a off-white colour

Detail View Design

To achieve we had to change the UIColor from a default colour guide that is set within Xcode for certain colour eg. white is UIColor.whiteColor() and red is UIColor.RedColor(). However as these colours aren’t default colours, you have to define the RGB’ colour values. This had to be done through an extension. This is due to each RGB value needs to be represented as a decimal value, which is 255 divided by the original number for Xcode to produce the exact colour code. Therefore if the first value in the RGB scale is 57 (for the RED) then the decimal will be 0.224 however instead of having to work that out every time you can implement the extension so that it will allow you to enter all the values as a whole number. See below of the extension and below that is the colour for the text of the body represented as an RGB using the extension.

Screen Shot 2015-05-03 at 21.36.08

Colour Extension

Screen Shot 2015-05-03 at 21.47.38
RGB Colour Values

The different font families and font size were all done in a similar way however these didn’t need an extension as it is already an element the Xcode recognises. This is changed by giving the detailText and detailTitle a UIFont. The main body also needed to be justified which is done the same by giving the detailText a NSTextAlignment. Which can also be seen below.

Screen Shot 2015-05-03 at 21.59.43
UIFont and NSTextAlignment

As you can see below, from the iOS Simulator,  by adding the styling to the detail view it looks very similar to the designs that were made.

Screen Shot 2015-05-03 at 22.18.25
Detail View in the Simulator

Next step is to get the logo of the Magna Carta embedded within the detail view for each of the clauses and to style the navigation bar so it looks the same as the designs that have been made for the application. Our initial thoughts are to possibly load an image slightly over the text or implement each clause title as an image. Then once the menu has been programmed within the app, styling will be applied to the side menu. This will take us further into icon and element styling looking at how users interact with them.