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.
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.From 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.
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. As 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.