430 Digital Media Studio

This online workbook documents my processes for 222.430 Digital Media Studio.

[rubery430-blog]

My final video for presentation. In this I reveal all of the key features of my app, and give an example of both creating a new Mark, and locating an existing Mark posted to a location by another user.

[rubery430-blog]

After 12 long weeks, my presentation is ready. These are my presentation slides which will provide the structure for my presentation. I have divided my project work into 9 key stages:

Brief

Exploration

Strategy

Testing

Reassessment

Testing

Brand Exploration

Brand Reconsideration

Wireframing

Presentation Considerations

I have written a few bullet points for each slide, but intend to improvise most of my discussion as I feel confident I know what I'm talking about!

After my last slide I will present the demonstration video I have prepared.

[rubery430-blog]

Here I’m posting some screenshots of the video I am producing to demonstrate the full functionality of the Mark app. After seeking critique from some other students, I have included touch gesture indicators as well, to show which elements are being interacted with. This makes it much more clear what is happening on screen, rather than having a finger image blocking parts of the screen as it taps buttons.

I have used After Effects to create the video, and will play it during my presentation, pausing it at regular intervals to explain the operations. I think that this approach is better use of my remaining time than trying to get all of the functions working via code on the app itself, as I have already achieved the functioning AR that I set as my goal.

[rubery430-blog]

This footage was successfully captured using the SRC Pro app, and I will now incorporate this into a demonstration video showing how the full Mark app would function in practice.

The Mark app actually runs very smoothly, managing to recognise the marker, overlay the AR and display the resulting image in more or less real time, with fluid video. The issue here is when SRC Pro is recording at the same time, the processing required is very demanding on a processor designed for a phone. No smart phone is really designed for this kind of task, which is why the resulting video is quite laggy. However, the quality here is much better than other screen recording apps I have tested, and I’m satisfied it will be enough for demonstrative purposes.

[rubery430-blog]

I have now found a workaround for my screen recording predicament. This screen shot shows the functioning Mark prototype open on my Samsung Galaxy SIII.

The box in the centre with 3 icons is an app called SCR Pro, which I discovered an older legacy version of. This legacy copy is not intended for Jellybean, but works since I have rooted my device. The app is able to record the screen at an acceptable frame rate and resolution, and I will use this method to capture the footage I need to make a prototype demonstration video.

[rubery430-blog]

This second video is a screen recording of using the app in the field, as I want my presentation to show. Because there is no wi-fi available to stream from my device to my laptop, I had to use my mobile data, which was nowhere near as efficient, and the resulting video is jerky and unusable.

Looks like it’s back to the drawing board. Rather than using an app that reliably screen casts, then screen recording the mirrored screen on my laptop, I’ll try to cut the middle man and find an app that can reliably screen record on my phone. This is mostly difficult because any apps I have come across that can do this are aimed at Android Kit Kat and higher, and not suited to my Android 4.3 Jellybean.

[rubery430-blog]

I am posting two videos here. This is the first, a screen recording of the app (via Mobizen screen cast to my computer) being used in my flat, using my wi-fi broadband. The video is exactly what I want to capture in outdoor environments, showing the app in use, with a smooth frame rate. The reason you can see a cursor hovered over the screen is because this is recorded from my desktop. That’s also why you can see the mirrored screen on the left of the screen cast. Just a bit of screen-ception.

The reason I’m using an image on my laptop as the tracker image is to save having to print off a photo for the test. My second video shows the app being used outside, with the original location used as the tracker.

[rubery430-blog]

I’ve finally found an app that will allow me to screen cast at a decent resolution and frame rate. There are a few apps that can do this, but Mobizen is the only one I have found that works on Android 4.3 Jellybean, which is what my device runs.

Mobizen displays a dialogue on your computer that looks like an emulator- in fact it is a direct representation of what is on your phone screen, and can even be interacted with. So you can compose and send text messages via your phone directly from your desktop for example.

For my purposes I wanted to use the phone, with its mirrored display on the computer presenting what I am doing in real time. The problem is that although it can stream in higher frame rates, because it doesn’t have any options for a wired connection the speed is entirely dependent on the internet connection. I was looking to screen cast to my computer, then screen record from there to capture video of my app in action. This is fine as long as the environment being recorded is within range of a decent broadband modem, but I wanted to capture video footage as the app is used in outdoor environments.

[rubery430-blog]

I’m trying to find a reliable way to present from my Android device via a projector. It looks like I’ve really made things difficult for myself by having the combination of an Apple Mac laptop (same as in the presentation room) and an Android (Google) device.

Frankly, these two don’t want to talk to each other very well.

I came across a program called ‘Droid-@-Screen’, which manages to use the USB interface to mirror the device screen onto any computer (Mac/Windows/Linux). However, this interface doesn’t manage the data very well, and operates more as continuous screen shots than as a real time stream. The frame rate looks about 2fps. So this can be Plan B.

Other options start to get expensive- there are a few dongles available, but they mostly look Windows only. After much investigation it looks as though there is an Android programme called ‘Airdroid’ that allows you to mirror your device- the catch being the device must be rooted first. This operation is pretty fiddly as well, and depends on a lot of factors- mobile network (trickier since we’re tucked away in little NZ), phone model, Android version... hopefully I’ll find a tutorial that applies.

[rubery430-blog]

These screenshots show the development of two further layouts; the Marks list and the Following list.

The user accesses these activities by swiping left or right from the first (full-screen camera) layout. In the Marks list users have access to and can modify a list of images available for them to post as AR overlays on top of a target specified by them when creating a new ‘Mark’. They can also use preset images provided with the app. In the Following list users can scroll browse other users they are following- tapping one of these profiles takes them to the map view, showing all Marks posted by that user. Whenever a followed user posts a new Mark, the follower will receive a notification on the first (full-screen camera) layout.

[rubery430-blog]

These screenshots document my progress as I develop the digital wireframe of the Mark app. I want users to first arrive on this layout, a full-screen camera that allows them to either locate nearby Marks posted by others (this function is covered by the features at the top of the screen), or create a new Mark of their own (the large ‘+’ button at the bottom centre).

[rubery430-blog]

Now that I have a better grasp of how to use the Metaio software for my own app, I can produce an app that is entirely independent of the Metaio (Junaio) app that houses the AR functionality.

These are my initial sketches for what the app will look like. I’ve brainstormed key features and operations with user experience in mind, and considered these along with visual design principles when drafting my wireframe. The next step is to begin mocking up these layouts digitally.

[rubery430-blog]

This is my latest bane. I don’t fully understand what’s preventing my project from building, but it can’t be launched until I correct this error. I’ve got this far following the instructions on a tutorial that was made to be followed on Eclipse. I’ve had to adjust my approach since I’m using Android Studio not Eclipse. I’ve also had to think on my feet because the tutorial uses an obsolete version of Metaio SDK, and some elements have now changed.

I’m now reaching out to the metaio forum for advice.

[rubery430-blog]

Despite using the free Metaio license I still need to register. The documentation on Metaio’s website says that the information required will be included in the email after purchase- however using the free license I haven’t purchased anything. After trawling more discussion forums I came across this solution. Now to see if it works!

[rubery430-blog]

IDE Issues

It seems all available tutorials for deploying the Metaio SDK are outdated and give instructions for using Eclipse as the IDE. I’ve searched everywhere for guides to deploy Metaio SDK in Android Studio and the software is simply too new to have guides ready. I did however find this setup guide on the Metaio website, which may solve some of the issues I’m having due to using a different IDE.

Update: I also have to license my use of the Metaio SDK. I’ve located information on this process here.

[rubery430-blog]

A (hopefully) helpful tutorial on developing the Metaio sdk after it has been exported from Creator. This tutorial uses Eclipse as an IDE rather than Android Studio, but the code should be the same.

[rubery430-blog]

After requesting critique it came to my attention that an app called ‘onion’ would lead to assumptions that it is for cooking. Also the link to layering was too weak for most, and just wound up confusing everyone.

I’ve reconsidered, and instead of brainstorming words about removing layers (eg ‘peel’, ‘unveil’, etc), I brainstormed words about adding layers- somehow I’d missed this earlier. AR doesn’t peel away, it augments. I arrived at the name ‘MARK’. This is what the app allows users to do; add their own mark. Plus there’s the bonus that mARk has the letters for Augmented Reality in it.

I designed the logo form to overlap and give the implication of layering.