For the project website, I decided to call it 100 meters. This is because the website retrieves images from 100 meters in radius, based on the user’s GPS location from Flickr.
Elephant & Castle
(Image dragged accidentally in screenshot, stretching the photograph)
I have tested this in different locations, days and they retrieve photos updated in the last 12 hours. This is set to 12 hours because of Flickr’s API. The first image is in North Acton and the second set of images is in Elephant and Castle.
I used a plug-in called Slick Carousel, which allowed me to insert my data from Flickr into this to display the live retrieved images in a slide show.
However, I am having problems with styling the overall design of my website. This is because the slick carousel overwrites certain stylings and adjusting the Flickr images in just one of the carousel is difficult. I want to refine the styling and overall design, however, I have the lack of knowledge to correctly complete it.
For the design of my idea, I wanted it to simple and easy to use. It would use a simple layout of the image selected in full-size showing around 90% of the screen size and 10% would be the carousel of the other images. The time-frame would be shown how recent the image is and the title showing what the image is.
To use Flickr’s API, I used node.js to run the authentication, allowing me to use their service. So, I downloaded node.js and ran it on my computer.
The images below show that the Flickr API works and I retrieved information from the Flickr servers.
The design of my idea was not definite, and I was still wondering about how I should make it. Firstly I wanted to use a Map as the main interface screen for the user, which showed the location of the user and the images around them. However, this would be very similar to the Flickr’s already existing service. I want to improve this and change it to my own concept.
Another problem was when I thought of using Google Maps and their API, linking it with Flickr to create the idea. However, when talking to my peers and tutors, the idea of using a map is not necessary to use. Also learning how to use the Google’s API and linking it with Flickr can be time-consuming and complicated, with the restriction I have to be realistic.
Also, I wanted to develop this idea into an app. I started to learn about xCode and it’s basic functionalities, however there was a lot I needed to learn to achieve what I want with this project. With little experience and knowledge, I had to simplify this and choose a different route approaching this. So, I decided to make an adaptable mobile website, which would support this.
Whilst looking at Flickr’s API, I have decided to change the idea slightly. Instead of my project grabbing many medias from several networks, I will just use Flickr. This is because of my minimal experience and knowledge in API’s in general and the timespan I had.
Thinking about the concept of my project, I didn’t like what it was used for and I thought about why I would choose certain buildings to show a timeline. Because of the limited data, I would have used on only certain buildings, I thought why could it not be everything. Instead of the project retrieving certain photos of buildings, it would retrieve photos from around the user, finding every photo related to their position.
This would be used for a user who is curious about their situation around them, what recent events occurred before they arrived at their location. As this concept would be used to retrieve photos that were recently posted near their set location.
I specifically looked into Flickr’s API and found that it is very accessible and can be used to what I want to achieve. Their API has many different methods and developer tools to request certain information from their servers. They over 40+ categories of API commands to use.
Firstly I looked at the ‘flickr.photos.search’, this allows me to retrieve public photos from Flickr’s servers and specify arguments like latitude, longitude, radius etc. Which enables me to retrieve specific data from Flickr.
In order to use this argument in the API, I had to register for an authentication key, which allowed me to use their API.
There are existing services that use data and visualising it like InstaMap, TwiMap and Flickr’s map. I wanted to have a look at what is out there already that uses these social medias and I stumbled upon these.
InstaMap is a service that used to use Instagram’s photo map and display it in their own website style. This service showed exact locations of Instagram’s media, users had their own map of their posts from Instagram, whereas this service merged them publicly. However due to the changes to Instagram’s service and the API restriction is no longer functions.
TwiMap is produced by the same creators of InstaMap. This service is essentially the same, it grabs the GPS location of public tweets on Twitter and shows the most recent tweets.
Flickr’s Map is a feature that grabs geotagged photos from public photos that have GPS location set on them. This map displays all recent or interesting geotagged items on a map displaying them as pink dots. However, the loading time can be slow as it processes a lot of data at once, it can take a few minutes for the media to load and display them on the map.
Images uploaded online have meta-data, in some cases, they have EXIF data. Exchangeable Image Format (meta-data) in an image file that includes the date the photo was taken, resolution, shutter speed, focal length and other camera settings. This data can be used to filter the images, find production information etc.
Instagram does not retain EXIF data for privacy reasons, the data that is available on Instagram is data set by the user who uploads it. Data such as geotagging the images and upload date, captions, username data.
Flickr’s uploading process allows users to retain their EXIF data when uploading, users can share their specifications used to take the photograph, from the camera to the location it was taken.
For google images, some images have EXIF data. Google used to display these details, however a third party extension or software is needed to reveal them. Google images can be searched by categories such as Size, Color, Type, Time which is essentially EXIF data. Also, there is Google image reverse search which can be used to find the origins of images.
To approach the functionality of my idea I had to look into:
- How to make an app
- How to source the images
Firstly I looked at tutorials on how to develop an app. I learned the basics of what software to use, I downloaded xCode 8, which was required to develop on the IOS platform. Then I learned about using Swift 3, Anatomy of an app and looking into creating an UI.
Following this tutorial, I learned about how to create a basic card game app. However, this did not help me much, as to progressing to my project. This helped me with learning how to design the app, however I needed to focus on the functionality.
Next, I looked into how to source my images, looking at the different media platforms I wanted to use Google Images, Flickr, Facebook. The images could be retrieved by using their API services. Looking into the API for each platform, they were not easy to use and understand. Within the time I had for this project, the amount of knowledge I required to do this was not nearly possible.
The next step for me was to simplify the idea.
My new idea for this project is an app that finds old photographs of historic buildings/sites. The purpose of this app is to allow users to find photographs from many sources such as Google, Facebook, Instagram, Flickr etc. This would be useful for users to find them easily in one place in a premade archive. For example, a user would be a using this as their current location, it would be easy for them to find out information and the name of some building they find interesting.
The purpose of this idea is to create a platform where users can easily ‘travel back in time’ to see the changes or any changes to buildings within a time period. I thought of using a map to easily locate and locate the position of the user, giving a visual input of their location to where the buildings are.