Programming: Using the official Magna Carta image

After weeks of waiting we finally got sent the real image of Magna Carta which were going to use in the app. This image was a much higher resolution than the one that we were using currently, which we got from the Salisbury Cathedral website.

The Cathedral had this picture taken specifically for the 800th anniversary of the signing of Magna Carta so it was essential that we used inside the application as a springboard for the navigation of the causes.

There were some technical limitations with the image that they gave us. The original image was over 34,000 pixels wide which would allow the user to zoom in and see details in the document that could never be seen with the naked eye. Due to the large image size, the size of the file is also incredibly high which would make the size of the application much larger. For us, however, this isn’t that much of a problem at this point as the application will only be used by Salisbury Cathedral and would not be available for general members of the public download.

We tried putting this image straight into the application but due to its large size, the iPad simulator wasn’t able to ever load the image. This meant had to re-evaluate our approach to having a large zoomable image inside the app.

We put the image into photoshop and resized it down to 8000 pixels wide. Then we were able to compress it while saving it as a PNG file as to not lose too much of the image quality. While being significantly smaller than the old image size, it still allowed the user to zoom in considerably, and see more detail than could be seen before. While the client may not be too pleased with this limitation, it is something outside of our control due to our lack of programming expertise and the limitations of our methods.

It was suggested to us that, if we were much more competent with the software, we would be able to load the image as a series of tiles. This would mean that only the tiles that are on the screen would be loaded at any given times, thus reducing the work load on the device and allowing for a much larger image size. This would work similar to how the SWIF mapkit loads each piece of the map when requested. However due to our inexperience, and the time constraints of the project, this is not something we are able to explore.

As we now have the size and resolution of the image we are going to use in the application, we can now get started on finding the locations of each clause within the document. Our client has provided us with an image demarcating the start of each of the 62 causes allowing us to translate this information to our new image. This process will require us to find the X and Y corners of the top left corner of each clause as well as the width and height. These are the details needed in the swift code to allow us to draw the overlays on the app. In some cases a calls will go to meaning that it will require more than one rectangle to be drawn. As it stands we currently don’t know how to solve this problem in the code but it will be something that will be looked at in future prototypes.