Idat 204 - My killer application.

http://busy-signal.co.uk/mediaindex.html
!note: It does take a while to load and may require a refresh!!


My killer App

The current web is designed and guided for human readability, and requires human interaction to perform any desired task. The semantic web would take the web to a new form of interaction, by presenting data in such a way that is readable and understood by computers as well as humans. This would allow to machines to do such tasks as searching without a human operator. The semantic web does not change the web as we know it, it extends it. By adding new forms of data and tags in the form of XML to documents that become readable by humans and computers.

The problem

Our society is now a media frenzy, and has been for the past 10 years. With new technologies becoming available it has led to an overwhelming volume of content, 24 hours of video are uploaded to YouTube every minute alone. With this in mind it can be a hard and lengthy process to find the exact media file, be it audio, video or text that you are looking for, especially if you don’t know the title or producer. For example, if you are trying to explain to a friend a film you have seen but no idea of the title, it's obviously going to be very hard to share the media you wish too. The same problem is true with information in general, although Wikipedia is considered by many to be the main index of information on the web, my application is of a similar service but for media related files.

The solution.

“A killer application that automatically tags current and, future media content. “

My application would use software to scan any media uploaded to the net via a unique API. This API could be included in any upload service on any site such as Youtube. After the media file has been scanned it would convert any dialogue into searchable text. The person who uploads the file can then tag the file via unique tags. In addition to this any viewer can add tags to the selected content creating quicker and more efficient searches. So instead of tagging title, genre etc which is possible on most video sites now, the person will tag things such as location, actor name, song pitch. Therefore my application is not a database it is a search engine.

Basically the user inputs a selection of text, be it an exert from a song, film or book and selects the media type to narrow down the search. So if the user has typed in a line from a song such as then we kiss”, upon clicking search the software will scan the user generated tags and XML document's of the media for the related text. Based upon this search it will select what it believes is the most relevant video, song or book depending on what media category was selected on the first screen. In addition to that it will start the media file at the exact point in which it appears. For example in the second screen, screen-shot after having typed in “then we kiss” the video has started at 0.18. It knows to start here via the XML document which has enabled the file to become searchable text.

So here is an example of the XML of any given media file.

<?xml version="1.0" ?>

                                <title>Produced By: Oliver Koletzki  Title: hypnotized</title>                     

                                <author>Media Type: Music</author>

                                <time>Time: 0.18</time>                           

                                <message>

I catch your eyes ,try not to smile

I track your style I feel your vibes

We have a drink then go outside

Talk for a while and then we kiss

                </message>

                </post>

Starting to make Media Index

So as you can see I have mocked up some basic images of how I want the interface to look. I have kept the design minimal yet aesthetically pleasing.
 The reason for this is due to inspiration from Google’s incredible success by creating an easy to use service. To make this prototype functional I will be using Flash(Actionscript 3.0) and XML. So like many others I set off to gain a deeper understanding of both languages via tutorials.
While the tutorials I found helped, I quickly learnt that to show the full potential of my prototype was going to be hard. Pulling in video via XML was a very tricky process so I kept it simple by having the video embedded in the flash file. The only drawback of me doing it this way, was that I now only knew how to import a singular media type. The original plan was to have an example of a Book, Song and Film all being pulled in from XML. However the chosen file fully demonstrates how my product works.

So as you can see from this screenshot the design has changed slightly. Instead of a drop down box I now have radio buttons which called Title, Media type and message. The user will select each one depending on how much information they have about the media file they are trying to find. For example, if they know the producer of a film and a small passage of dialogue from it they will select those two buttons and search for one of them. However all three can be selected to search all of the tags contained in the xml. The result will depend on which buttons were selected and, if nothing is typed or the search request is less than 6 characters, the user will see an error message. I have done this so that my application gets the best search results.

The result box gives the user vital information on the file, Title, Media type and timeframe. The timeframe result is key to my application. The result will depend on what the user searched for. So for example if the words from a song are at 2 minutes and 20 seconds into the file the video will start at that point. My application knows to do this because of the unique Time tags given to each file automatically.
I also realised that any given search will more than likely give multiple results, especially if the dialogue is the same for two different media types. E.g. A movie adaptation of a book. With this in mind I have added a ‘Nearest Media type’s’ section. A lot like YouTube’s suggested videos, but mine contains all three media types from many different sources.

Why is Media Index Semantic?

Currently computers can only search media for title and certain tags that a human gives it. Tagging does make for an effective search so that will remain in place with Media Index but a bit more fine tuned, So as mentioned new tags will be added automatically such as location, actor name, or song pitch.
On top of this my application relies on software not available yet. It will convert any media file into a searchable text document the very moment it is uploaded to the web. So if a user uploads a video to YouTube, the software will scan the data and create an xml file searchable via my application.
However nothing will be hosted on my site because that would make it a database and that is possible now. Instead my Application is a search engine for media files, like Wikipedia is for information.

What makes Media Index a Killer app?

A killer Application to me is something of which dominates its market and makes money. My application will do both. When the user gains the desired result e.g. a music file, links will appear that will take the three cheapest prices of the product from three different sources. This is something YouTube has incorporated and is making revenue by providing a link for the user to be able to purchase such media files. So by sending vast amounts of traffic to many different sites, it will provide sales for each, therefore my application will take a certain amount of the money from each sale.

Conclusion

Here is the final and finished prototype:       www.busy-signal.co.uk/mediaindex.html

Conclusion.

So our project works, and we are very proud of it. We set out to explore stonehosue in a different and advanced way, and i think we've been successful. Everything we wished to include in our project we have succeeded in doing so. Whilst there are some things we could have built better upon such as a more complex animation, overall our group has done well to achieve the final product. I feel the technology we have used has been interesting and intriguing to use, and very cost effective. 

Personally i have to admit that considering that when i started this module i was confused and baffled as to how we would achieve what we have or even what we were really trying to do in the Stonehosue area, but now i see clarity in the use of different forms of technology and my way of thinning has changed significantly when approaching creative assignments such as this, something i think this module try s to gain from us students.

As a final thought i do hope to take our project down to the Dance Academy to promote the building itself as i do hope something is done with a building with a rich history. 

Frustration, sucess and animation.

First things first. I wanted my tornado (ellipses) to start off at a certain point so to do this  i declared 3 floats as mentioned in a previous post, i then gave these floats the value of 255,which is the location on the xy scale where they would start.

float z = 255;

float x = 255;

float y = 255;

and the stroke was simply done

stroke(#d504ff);

I then realised that i should construct my animation itself. Meaning what did i want to happen depending ont he wind speed. I looked at the data and saw it was in this mathematical format 3.12. So i was going to use the whole number for my animation, which meant using an IF statement.

int q = int(title[i].getContent().charAt(0));

int w = int(pubDate[i].getContent().charAt(1));

int e = int(value[i].getContent().charAt(2));

I used 3 random letters so that i could use the value of q, which was being pulled in through the xml feed.

so i started with...

if (q <= 210) {

text ("Windspeed is slow, have a nice day! ", 80, 200);

else {

text("Windpseed is high! Take it easy out there!", 50, 150);

Now came hours of research and tutorials..

fill(x,z,y); - This fills my ellipses with colour.

stroke(#d504ff); - this gives it the pink storke outline.

Two very simple lines for code.

ellipse (abs(x+=9*cos(z+=.5-noise(i++)))%L,abs(y+=9*sin(z))%L,40,40);

However this mean looking line required lengthy tutorials via www.learnprocessing.com and www.processing.org.

So using this code it moves the ellipses around the sketch. Ive revised the functions used in this line of code and I do understand why they are sued and what they are for however I dont think id be able to write it off the top of my head. Still in gives me the effect I wanted in my processing. However to get it to move in certain ways I have to change the values of x,y, and z in my IF statement.

text ("Windspeed is slow, have a nice day! ", 80, 200);

z = z - 1;

x = x - 1;

y = y +1;

}

else {

text("Windpseed is high! Take it easy out there!", 50, 150);

x= x - 5;

z = z - 8;

y = y + 5;

}

The numeric values are random numbers I chose, this proved to be very temperamental as the slightest change in the number can result in a completely different animation, as it changes how and where the ellipses fall. It also changes the speed of which they move around the screen, I simply did trial and error with this values till I found an effect I liked for both parts of my IF statement.

Lastly I thought I would explain this..

filter(18);

filter(11);

The filter function is a very artistic function and gave me the wave/ripple/cloud effect when the ellipses move. It distorts the image or in my case my ellipses to create a tail of colour. The numeric value of filter can also be very temperamental however this is a good thing as it makes for very varied animations, and I think it matches my specification perfectly.

So conclusion? Im proud of my work. At the start i hated processing and could not get to grips with it. However tutorials like with most things are a god send! The process was frustrating as I had to learn further before I could really start my sketch, when I just wanted to get it done. There is obviously a lot I still dont understand but I feel through this assignment ive covered the basics and more. As a note its much easier to sign the applet on a mac terminal window as opposed to windows CMD. This process was made simple thanks to Chris saunders. As well as Chris a big thanks goes to www.learnprocessing.org as it has been a huge help!

My processing sketch is available on http://busy-signal.co.uk/processing.html

The setup!

In my setup i knew i wanted to declare a background colour and use a custom font.

Declaring background colours is a simple task and requires one line of code. Using a font however is different.

void setup() {

PFont font;

font = loadFont("StormExtraBold-48.vlw");

textFont(font, 32);

text("word", 15, 50);

textSize(14);

text("word", 15, 70);

smooth();

size(400,400);

background(#77b2f5);

 Here is my setup. In this code i have imported a font that i have installed via dafont.com, and after declared its size/scale and declared where on my 400 x 400 sketch i want the text to appear! So at this point my sketch was importing data from the XML feed, and the setup of my sketch was complete. Now came the hard part the animation!

The sketch takes shape!

Before i started to design my sketch i penned down a few visual targets...

1. 
   
   
    Use colour scheme of my website (www.busy-signal.co.uk) to great effect.
2. 
   
   
   Have a personal message for each condition of the wind speed. i.e if the wind speed is high display " High wind speed ".
3. 
   
   
   Use a series of ellipses to circle each other creating a wind over the sketch

Numbers one and two were very simple, i learnt i could include colour references inside processing e.g. background(#77b2f5), very simple!

However number 3 was the hard part. It required the use of tutorials, new functions and a cheeky bit of curve making.

Here is my starting setup ..

import processing.xml.*;

XMLElement xml;
XMLElement[] title;
XMLElement[] pubDate;
XMLElement[] value;




void setup() {
frameRate(10);
smooth();
size(300,300);
background(#77b2f5);


String url = "http://x2.i-dat.org/archos/archive.rss?source=bms_.WindSpeed";

XMLElement xml = new XMLElement(this, url);
title = xml.getChildren("channel/item/title");
pubDate = xml.getChildren("channel/item/pubDate");
value = xml.getChildren("channel/item/description");

}

Now obviously one ellipse rotating is not going to look good or look anything like a tornado so i decided to use 3, which means declaring 3 float variables an assigning each ellipse a different id.

float z = 255;
float x = 255;
float y = 255;

I knew i had to have an if statement to give two or more different experiences of the sketch depending on the wind speed, but the hard part was trying to figure out how to make the circles rotate and move across the screen.

Change of idea and XML!

After messing around with a few simple sketches i decided not to bother with "bms_.OutAirHum" from the RSS feed. I looked over the course of 5 days and saw that it doesn't change much. So instead im going to use "bms_.WindSpeed" which does change considerably.

I found importing this to processing was no difficult task by using this code...

import processing.xml.*;

XMLElement xml;

XMLElement[] title;

XMLElement[] pubDate;

XMLElement[] value;

followed by this in the setup...

String url = "http://x2.i-dat.org/archos/archive.rss?source=bms_.WindSpeed";
XMLElement xml = new XMLElement(this, url);
title = xml.getChildren("channel/item/title");
pubDate = xml.getChildren("channel/item/pubDate");
value = xml.getChildren("channel/item/description");

To see if the data was entering processing  i used the "println" function so that i could view the data in the output window. Great that was all working, now the hard part what to do with this data?

So i wanted to make my visualisation a bit more advanced. Something cool to look at. However my processing knowledge DID lack. However this site http://www.learningprocessing.com/     has helped me and im sure many others with this assignment.

My idea in my head was simple, create a tornado in processing! The hard way of doing this would obviously be a mass particle swarm turning and changing in speed depending on the windspeed.

The easy way? a series of ellipses turning close together, making it also look like a fan on a A/C unit.

Spit and polish!

well its finally done!

www.busy-signal.co.uk

 As you can see the twitter API widget now works . Its frustrating that i spent a good 2 hours scouring my code as to why it wasn't working but all it needed was the crossdomain.xml file placing in the root directory and the html file in the same folder as the .swf and .php files.( Thanks to luke mears for this)

The final design changes have also taken place merely by cleaning up my code in all html files and changing the design slightly but its now at a state to which im completely satisfied!

thirdly  my contact form now launches a mail client that the user has installed using this bit of code " action="mailto:benquinney1@googlemail.com" . Ideally i want a CGI script so that it sends straight to my email from the form im still in the process of learning how to do this, but it should be up and running.

Lastly Jquery has proven a struggle so im teaching myself it so that i can make a nice slideshow for my portfolio. Until then im working on a simple css/html based scrollable slideshow which will be online very soon.