As an ongoing effort to make my website as accessible as possible, I’ve decided to make an iPhone friendly version of my website.
While searching through google I discovered iWebkit. iWebkit is a site template that makes creating iPhone websites a breeze. By dropping the files on your server you can create a website by following the included guide.
This will be the first in a series of posts showing you how to create a killer iPhone site using iWebkit.
Part 1: Installation iWebkit can be downloaded from the www.iwebkit.net. I suggest that before you do anything you set up a subdomain for your iPhone site (i.e. iphone.gimpneek.com) this can be done in your control panel for your website and makes it easier for users to remember the url.
Once you have the subdomain set up, open the iWebkit folder and copy the contents of the framework folder into the subdomains root folder. When you view the site you will see an empty iPhone style page. If you don’t see this make sure you have copied all the files into the folder on the server.
You can edit this page by adding the various HTML code to the file. First off we’ll be building an ‘Under Construction’ page. This will let anyone viewing the site that we are still working on it and give them a way to view your normal website.
Editing the template
The body of the page is made up of 3 divs: topbar, content and footer.
Topbar contains everything that will be in the header bar, so things like the page title, any navigation elements etc.
Content is where you’ll be adding your content (duh…). This can contain lists, pictures and paragraphs of text.
Footer contains the made with iWebkit text, though you could add copyright information.
Inside the topbar div add the following code:
div id="title">iPhone /div
div id="leftbutton"> a href="http://www.example.com"> Normal Site /a /div
This will add the page’s title and a button on the left that leads to the non-iPhone version of your site. This can be replaced later with a home button.
In the content div add the following code:
ul class="pageitem"
li class="textbox"> This site is currently under construction, please come back later /li
/ul
This will add a text box to the page. You can split up page content by using different ul and li tags.
You don’t need to change the footer just yet. So at the moment your page is just a static website that says the page is under constuction. In the next post I’ll show you how to add a popup that alerts the user that the website is still under construction and navigates them to your normal website.
I’m loving the new 3.00 firmware for my PS3 but one thing I can’t get my head around is the iPlayer, for some reason the BBC have managed to take 2 great technologies and make something with no usability.
When you first start it up you can see it’s redirecting to a PS3 only section of the BBC’s website but when the iPlayer actually loads the screen is really small (though this is on a 1080p 23 inch tv). The navigation is the same as the PS3’s built in browser which is great though the d-pad only circles through HTML links so the flash based iPlayer doesn’t get included, making the fullscreen button a huge pain in the arse to find.
I found navigating the iPlayer’s program guide interface a bit of a pain, most of the time when searching through the tv programs the thumbnails and information hadn’t loaded so I was left with the good old red cross in a white box wondering what the hell everything was.
I think the problem lies in the fact that the BBC are just porting the existing pc based website over to the PS3, The iPlayer needs to be redesigned for the PS3 so that it supports the 4 video modes (so that the navigation will always look fullscreen on any PS3), this could be done using a function to get screen size, that way it wouldn’t seem so small on higher resolutions. They should also look into a way of adding the Flash based navigation into the navigation circle that the d-pad uses. The user shouldn’t be expected to use the analogue sticks (which can be a bit clumsy, I ended up skipping to the end of a program when trying to change the volume) to navigate that is the whole point of the d-pad.
I bought Snow Leopard today (I was the first in the store after the Bentall centre opened late due to a fire accident) and I can safely say I haven’t really noticed that much of a difference in speed, my mac still takes about half a minute to boot up and the only thing I can see has changed is the quicktime logo and the appearence of the menus.
A while back I was googling to see if any bright spark had come up with a way to get the trophy information out of the PS3. I had recently found an old tutorial on how to use xbox 360 achievement data to create a custom gamertag in Flash so I wanted to see if there was a Playstation based project. It turns out there is.
I found this post on the Playstation forums which led me to the GetInfos project. Using the data the project outputs you can get the PSN user’s trophy data, profile avatar, country and recent games they have played. I have a little example with some basic code over at http://gimpneek.com/downloads/psnapi/ Just type in your PS3 username and it will change the background color to RGB(255/number of gold trophies, 255/ number of silver trophies, 255/ number of bronze trophies), it will tell you the different types of trophy and then print the trophies out in a massive block of trophy glory.
I’m still deciding where to take this, A facebook app is an easy idea but I want to try and use it with processing to create some art.
As a digital artist, most of the work I produce ends up on a Computer Monitor or the output through another medium that the user can interact with. The one thing I want to break away from is the flat 2D environment that the Computer Monitor forces on the viewer.
In my Double Project I worked with Augmented Reality, I used the ARToolKit library to create a interactive soundscape that responded to the positions of the markers (ARToolKit tracks these by comparing the pixels in a frame to a .patt file) so when the marker was at the bottom left of the screen the audio would be clear and when the marker was at the top right the audio had effects applied heavily. The setup for this was a reversal from traditional ARToolKit uses which required expensive head mounted devices that allowed the audience to see the objects in 3D by having a stationary marker. I instead used a stationary camera but the markers can be rotated.
Thanks to the leaps in mobile devices (the iPhone for instance) ARToolKit will soon make the leap to these portable devices, though this makes me think of how the user of such a device will be able to use custom markers and get the custom 3D objects that the marker is going to be using (one of the basic ARToolKit functions is allowing a marker to show a custom 3D model, though these files are normally held in a directory relative to the application). A web database could be used that stores the .patt file used for reading the marker and the appropriate 3D image to use, though this would require a way of telling the user what .patt file to download. This could be handled by the device by taking a picture of the marker, and working out the marker’s basic properties (such as how big the shapes are, does it have straight lines, curved lines or letters) and then asking the user to choose from a list of similar markers, then downloading the appropriate files. Another approach would be to use the GPRS on the iPhone to pinpoint the user’s location then send the lat and long coords to a database and as before download the file. The markers creator would upload the files and details to a website (use google maps to set where the marker is). The strength of this system is that it allows anyone to upload markers and also allows the user to download files in advance. So if they are planning a trip to the Tate Modern and want to see if there’s a marker nearby they could look up the Tate Modern on the website and see if someones put one up and download the files to their phone.
I was thinking about how these devices would enable the user total 3D immersion with they surroundings if those surroundings were altered using augmented reality. The user could be walking through a underpass and spot a marker on the wall, and if they had the right .patt file (or downloaded it) they would then be able to see the 3D object (and audio?) that the marker’s owner wanted them to see (let’s say the marker makes shark break through the wall). As the user then walks around the marker the device would rotate the 3D object in the right direction making the model seem almost real. If for instance the user is using an Touch Screen phone then they would also be able to interact with the object, for instance touch the shark’s nose and it jolts back.
This type of interaction is ideal for digital art, many digital artists want their work to be interactive and immersive. Due to technical limitations they can’t have full immersion because the medium they are presenting their work in is (in real space) 2D. There are ways that the artist tries to get around this limitation, for instance a while back I went to the Walker Gallery in Liverpool when visiting a friend, at that time Airside had their Insyde installation up. The installation had you walking into a giant shipping crate and then jumping onto images projected onto the floor by projectors, doing so would then make things onscreen happen. Though this blew my mind at the time and was a fun experience I was still aware that I was looking at 2 separate things. The projected images, though acting as a form of interacting with what was happening on screen were still part of real life and for me to utilize them I had to break away from the screen to see where I had to step.
This temporary need to go back to the real world spoils the immersive environment that the artist is trying to put across. I would like to break away from this need to go back to real life so I can proceed with the artist’s immersive environment. If the interaction with the art is done within the screen (like the shark interaction example I gave 2 paragraphs ago) then the audience can become more immersed. In the Augmented Reality Gallery the works of art would be held within the device (let’s say an iPhone application (which could be updated when a new exhibition is put on, this would help to draw people back)) and the markers on the floors, walls and ceilings would just be placeholders for the art work. The audience would walk around the gallery with their headphones in (the gallery would use 3D sound which would determine how close the audience is to a piece of art and then adjust the mix accordingly), looking through their device’s screen (or through head mounted displays connected to the devices). As they move around the gallery they can see all the works (like in a normal gallery) within sight and as they move around a certain work the device would translate the position and this helps cement their position in the environment. This would mean that the Artist wouldn’t need to create an environment (though they could create an environment within the Gallery’s environment) and the gallery environment(both real and digital) could be used as a platform. In the next 2 paragraphs I’m going to talk about 2 different works I feel sum up the possibilities an Augmented Reality Gallery could open up for digital artists.
A pile of bricks
If you’ve seen Equivalent VIII by Carl Andre and you’ve paid attention I think you know where I’m going. Imagine going to an Augmented Reality Gallery, being given an iPhone and told to use the iPhone as your ‘eyes’ in the gallery. You wander around the Gallery looking through the iPhone(like when your taking a picture) and suddenly notice there’s a piece of wood on the floor as you get nearer to it a pile of bricks appear where the wood had been. Boring? Or the best minimalist work ever? For those of you that said boring here’s the twist. You notice that the sign that said ‘look through your iPhone’ now says ‘Press me to rearrange the work’, You press the sign and suddenly the bricks start to hover and then fall into a massive unordered heap. You can now pick up the bricks and make them into whatever you want. For those who said they loved the work in it’s unaltered state there’s an information icon floating above the work which when pressed will start an audio clip on the work.
This type of work allows the audience become immersed in work without the need for any special equipment (other than the iPhone) and each user will have a different experience, though the artist could enable the audience to upload their creation. This work will appeal to art lovers and art haters because they are given 2 paths to follow.
Capcom did it!
This example comes from Resident Evil 2 but I feel would be a great work. For those of you have played this game I’ll be doing a real life version of the Licker intro. Imagine the scene. Similar to the Pile of Bricks in the last paragraph, your walking around looking through your iPhone appreciating the works when you suddenly spot a pile of blood on the floor. You can’t interact with it like the other works so you decide to see if it’s actually part of the Gallery or just another art work. You look at the floor and sure enough it’s a pile of blood, real blood. You look up and notice that on the ceiling there’s a pattern. You put your iPhone in front of your eyes again and now there’s a skinless creature with giant claws and it’s brain exposed. You weren’t expecting this and so you jump back with shock. The iPhone accelerometer notices the movement and suddenly the thing on the ceiling starts to lash out at you. You decide to move around the work thinking that because everything else in the gallery has been fixed in place you will be able move and see the back of the creature. As you do though the creature rotates itself so it’s always facing you. Your really disturbed now.
This experience is one that I’d love to have, to be so immersed in the Gallery’s environment that I’m disturbed by something that I know is just some code and a 3D model. I know that there’s nothing on the ceiling because I saw the pattern but it still caught me off guard.
Works like this would make way for more immersive experiences with work, and maybe even spawn a new type of spacial game. Outdoors exhibitions could take place or graffiti artists could use the markers to create their own 3D graffiti.
The 2 works I just talked about present the audience with 2 different experiences. The pile of bricks give them the ability to re-imagine an artist’s work, making new art in the process. The Licker example gives them a truly immersive experience that so far digital art cannot offer. These are just 2 examples I can think of that an Augmented Reality Gallery would produce. There could be combinations of the 2 examples, it’s up the artist’s to determine what happens. The big question though is. How would an Augmented Reality Gallery work? Would the works reset once the user turns away from the work or would it keep the state in the devices memory (keeping the state the user left the work in would help the immersion of the work). Would the audience use their own devices or ones the gallery supplies? How much would you charge to get in? Would there be cheaper rates for people who are returning? Though these are business questions they do raise the question of the price of such a project. If the iPhone and Android were to be the devices that the gallery used the price would be relatively low, though a lot of time would have to spent in the development of the viewing application. If the gallery used it’s own special headmounted display the price would be high but it would result in less time being spent developing the application because there wouldn’t need to be any work arounds to get the device to function the way it’s needed to. I’d choose the first option due to there being a ARToolKit app for the iPhone already in development.
A bigger question though is how would one curate an Augmented Reality Gallery, how do you decide which works to show and which not to show? How would you plan out the gallery space and how would the works all sit well together? Would 2D works be allowed to be displayed or would it be 3D only? These are all up to the curator but I can’t see there being too much of an issue if 2D work was displayed. If the Licker can rotate to always be head on for the viewer then so can 2D work.
This has been a short introduction to my idea of an Augmented Reality Gallery and I hope to develop it over the next few months and submit either the whole gallery idea or just a proposal for an artwork to the Arts Council at some point.
I’ve just finished coding my first plugin for Wordpress. I’m calling it Vimeo for Wordpress (original huh?).
The plugin is simple to set up, it uses your Vimeo user name to grab your videos and your friends videos but there’s still an option to enter the URL of the video (the plugin takes the http://www.vimeo.com/ part out of it).
Anyways you should go try it out!
Today I set up my double project properly for the first time. It all worked perfectly though I think I may have accidently connected the wrong X to the wrong OSC fader because some of the patterns were controlling the wrong things, though this is due to me rushing it.
I spoke to Mark and he says I can use one of the new iMacs and mount it into a wall, then use my firewave for surround sound. So next week I’ll be setting the machine up with my softwares and getting it all up and running.
I still need to decide how I’m going to get people interacting with the piece though, I want to have objects in the scene which will be able to be pushed around, such as trash cans and statues etc but I don’t know if this will the best solution. Another option is maybe to have a magnetic board, on which magnets with the markers stuck to them can then be placed. These can then of course be moved around, but doing so restricts the freedom of the audience to do what they want.
I’ll have to come up with 5 ideas and get Mark to help me weight up the pros and cons of each
It’s been a while since I’ve updated my blog on the progress of my double project. I’ve been beavering away on getting all the functions working together and so far I’ve got them all working separately but I’m having a slight issue with getting ARToolKit to work when I’m using OSC though this probably me just being silly and forgetting to set something to a certain value and will be quickly over come, I’ll have a video up once I’ve got that in the bag.
Here’s a screenshot of my composition
Using the ARToolKit Marker's coords as OSC values
Hopefully I’ll get it working later today, so I can put up a video of it working with both Quartz Composer and touchOSC on my iPhone (which if they both work at the same time means I can control it and reset it remotely).
As part of my exhibition piece, I want to use a difference matte to make the people in the scene show over the papervision models, this will be hard to do as I can’t find a existing difference matte library for flash, so I’m going to have to work it out all by myself. I’ve mocked up a little illustration of how the technique works for you to have a look at, I’m sure using the getPixel method and doing some for functions will sort it out, and I can always look at the motion detection fla I have, to see how that works and get some ideas. As I currently stands I have the WOW engine(not working,yet…), Papervision(working) and FlARToolKit (working) on my mac, but I still need to find a surround sound library and a proper AS3 motion detection library. I’m sure by the end of the day I’ll have worked out what I need to make and what I can just use.
It was just me and Jamie in lesson today as Joe was off ill. Jamie was showing me PFTrack and what it could do and I gotta say I was impressed. By creating a photoshop document and then tracking the footage he managed to get a pretty awesome looking face. We then stole the HD camera and legged it to the green screen room to record some of the best acting I’ve ever done (it’s so good you wouldn’t believe I wasn’t in front of a sink) but more importantly we realised that we’re going to have to get the raw footage, get the tracking done, make the face in photoshop then in after effects add then face, feather it with a mask, then also add the hair back in (well if i’m being the actor anyways.) I’m sure we’ll work it out.
The main problem we did solve though was the issue of collaboration and more importantly proving it. As part of the module we have to prove we all worked together. Jamie found a solution while waiting for the tracking to complete (I was on icanhazhotdog at the time). The software he found is called CeltX and it’s an awesome little piece of software.
Celtx is an awesome tool to keep your film projects upto date online
Once you’ve signed up for an account you can then join in on a project, download all the files associated with that project and then edit, comment or add to any part of it. Best of all it’s not only availible in the app, its on the web too (see the link to the SFX project at the end). Once we make our project private the examinors will be able to see all the work we have done and who did it all. I especially like the fact you can have a calender, as this means we can post up important dates etc.
This will come important as Andy gave us the OK to shoot way ahead of schedule (though he did warn us that we may wish we had extra shots, this is why I’m hoping to get the storyboard sorted by next week.) which means when Nick gets back to me about the camera we can set a date, know exactly what to shoot and hopefully not need any other shots. Then we can post up edits and such on the CeltX page and compare them.
