10 May '10

LiveView: an iPhone app for on-screen prototyping

Hack, iPhone

By admin

Update: Nicholas Zambetti has updated LiveView to support the iPad. If you’re a developer looking to create pixel-perfect iPad creations this is a no-brainer must-have. Look for landscape support coming soon!

—-

January 2009: Well, our Nicholas is at it again. This time he’s taken up iPhone application development, and has released a very cool (and, for a limited time, free!) little app intended to help interaction designers and other would-be iPhone software developers easily test pixel-perfect prototypes on their iPhones.

The system has two parts: the LiveView ScreenCaster and the LiveView iPhone application. The ScreenCaster is a simple application that puts a virtual iPhone skin on your screen, its dimensions corresponding to a real iPhone such that the pixels inside of the virtual skin are precisely as many as on a real iPhone display.

Once you’ve got the ScreenCaster running on a mac, all you need to do is make sure your iPhone is on the same wifi network and launch the LiveView iPhone app. Instantly you should see the name of your mac (and any others running ScreenCaster at the time). Clicking on your machine instantly brings up just the portion of the screen that you’ve ‘highlighted’.

But wait – there’s more! The ScreenCaster has an option to interpret touches as mouse clicks. Turn this feature on and your screencast becomes a two-way interactive prototype. Virtually any application on your mac, from the Finder to custom Flash apps, can quickly be ‘launched’ on your iPhone.

If you’re even thinking about building iPhone apps in the future we highly recommend grabbing this little app. Kudos, Nicholas!

LiveView for iPhone

54 Comments:

  1. James Kirkup

    20/01/2009 at 7:04 am // Permalink

    This is really amazing, well done nick!

  2. Bastiaan

    20/01/2009 at 8:21 am // Permalink

    Awesome, great job guys! I’ve been looking for something like this for my prototyping and it work really well, thanks for making this available!

  3. Cone

    20/01/2009 at 10:49 am // Permalink

    Is that WordPress 2.5.1?

  4. Paolo D Passeri

    20/01/2009 at 5:46 pm // Permalink

    Thanks Nicholas … This app is great and really well done! It will be really usefull for my interface design for iPhone Home Automation, check them out at:
    http://www.flickr.com/paolopasseri

  5. Sean

    20/01/2009 at 9:02 pm // Permalink

    This looks really great. Is the screencaster.app available?

  6. Googe

    20/01/2009 at 9:40 pm // Permalink

    Hey Sean,
    I was just wondering the same thing.

    Think I just found it here:
    http://www.zambetti.com/projects/liveview/

  7. Sean

    20/01/2009 at 10:06 pm // Permalink

    Ah! Yeah if you are looking for the link to the screencaster app it is linked to from the app store page.

  8. Alex Robert

    20/01/2009 at 11:03 pm // Permalink

    What a great App, and what a great idea! Keep up the good work and
    thanx for sharing!!

  9. John Eckman

    24/01/2009 at 10:28 am // Permalink

    Very nice – seems that the Mac OS app, live view screencaster, is not playing well with Mac OS “Spaces.”

    If you launch the screencaster in one space, and then switch to another, it screecasts whatever space is currently on screen (which is good) but leaves the visible iphone “frame” on the space where it was started, making it difficult to line up the view.

    But that’s a minor annoyance easily worked around – thanks for the app!

  10. parker

    18/02/2009 at 8:58 pm // Permalink

    Is there a way to be able to rotate the viewer on the OSX screen to match if I make a horizontal prototype instead of always vertical?

    Landscape instead of portrait?

  11. Stijn Willems

    04/03/2009 at 2:20 am // Permalink

    This is a usefull app but would be evan more usefull if the app could send accellerometer data too. A framework under construction is build at http://code.google.com/p/itouchfw/. Take a look maybe it is something to include.

  12. David webber

    06/03/2009 at 11:52 am // Permalink

    @Cone Looks like it :)

  13. Ron Kurti

    06/03/2009 at 7:36 pm // Permalink

    This little app is worth its weight in gold.

    Extremely useful.
    Extremely easy to run.
    Makes all the developers I’ve shown it to get very very giddy.

    thanks Nicholas & IDEO.

    - r

  14. cory

    30/03/2009 at 2:27 am // Permalink

    this should be able to work over the net (streaming even) that way you could setup a trusty old security cam to view directly from your imac’s built in cam to your iphone when out and about

  15. sk

    02/04/2009 at 5:34 pm // Permalink

    Is there a windows screencaster available? Possible?

  16. Jay

    02/04/2009 at 6:16 pm // Permalink

    This is great, no hassle at all, thanks for putting it together. I agree with parker about landscape mode.

  17. Werkplace

    02/04/2009 at 6:53 pm // Permalink

    Ah, finally a hack to get Flash to play on an iPhone. This has some installation art potential. Would never use it for prototyping a business app though.

  18. Stuart Eaton

    18/06/2009 at 12:35 am // Permalink

    This is such a great app, really it is f**king spot on :) I have been using this for a while for developing iPhone apps. It is a great way to get your mock up layouts on the iPhone screen quickly, from there I can do screen shots on the iPhone. Perfect. I am having some problems getting it to work with OS3.0. The iPhone app often does not find the Mac screencatser anymore. You having the same issues? Its seems to work if i restart both the Mac and iPhone but then it stops working again if the Mac goes to sleep :(

  19. Eilidh Dickson

    28/09/2009 at 12:14 pm // Permalink

    This tool is absolutely fantastic, I have just graduated from CIID (Copenhagen Institute if Interaction Design) and we have used it numerous times all year! Its great for creating interfaces to appear in video prototypes

  20. Justin Dean

    24/11/2009 at 9:10 pm // Permalink

    Sick. Just sick. One of those “why didn’t I think of that” tools that I suddenly can’t live without.

  21. Jess Holt

    05/01/2010 at 8:37 am // Permalink

    Very cool – Is there currently a similar app for the Droid Eris HCT? We are trying to have a well-rounded suit of mobile testing apps. Suggestions?

  22. Yennji

    07/01/2010 at 7:32 am // Permalink

    it’s awsome !!

  23. Chris O'Donnell

    10/01/2010 at 10:20 pm // Permalink

    This is wonderful! My thanks goes out to the developer—keep up the great work!

  24. Mark McLaughlin

    24/04/2010 at 4:41 am // Permalink

    Fabulous app we’ve used a few times at work – are there any plans to release an update that makes use of the larger screen on the iPad?

  25. Heiko Behrens

    07/05/2010 at 1:54 pm // Permalink

    Great tool and thanks for adding the iPad support! I’ve just wrote a review on my blog http://www.heikobehrens.net/2010/05/07/preview-your-photoshop-design-directly-on-the-iphoneipad/

    Nicholas, I asked via the contact form before: I’d be glad to support you with a windows port.

  26. Dave

    07/02/2011 at 9:06 am // Permalink

    Any plans to open source this project? I’d love to play with the idea a bit, but would love to hop over some of the “plumbing” required to screen grab and communicate between mobile app and mac app.

  27. iphone spy app

    20/06/2011 at 12:45 pm // Permalink

    Hey, Thanks guys….we appreciate the support and are working to make the app better and better!

  28. Bill

    03/08/2011 at 6:49 am // Permalink

    Whenever I connect my iPod Touch to Live View, for some reason the Live View screen switches to the iPad size and there’s no way to switch it back to the standard iPod Touch size.

    Anyone else had this problem?

  29. kallepa

    27/09/2011 at 7:22 am // Permalink

    Bill, I just had this bug too, on my iPhone 4 with iOS5. Funny thing is, I ran without problem just yesterday. Going to reboot and check again to see if it solves itself.

  30. javier

    13/12/2011 at 2:55 am // Permalink

    I’m experiencing the same issue with the size of LiveView ScreenCaster, for default only it’s appearing the ipad size, in the menu i can’t find a switch for change the size of the device. Anyone know how to fix this?

    Thanks

  31. Matej

    26/12/2011 at 4:35 pm // Permalink

    This is simply brilliant for prototyping and mockups!

    There is one thing that I would love to see happen.

    1) if there would be an option that “draging” on iphone would translate to scrolling on mac. (if I make pdf prototype and page is longer then visible area, draging on iphone would make the page scroll so it would look natural on iphone)

    love it!

  32. Matej

    26/12/2011 at 4:54 pm // Permalink

    …and for some reason it is not screencasting Keynote presentations :-(
    (keynote 5.1.1 lion)
    When that will work, I will go celebrating the discovery of ultimate prototyping tool!

  33. Matej

    26/12/2011 at 5:02 pm // Permalink

    Oh, great! Found the fix for keynote!
    set screencaster to center of page and hide it, then run keynote :-)

  34. Bryan

    18/01/2012 at 5:45 pm // Permalink

    Im experiencing the same prob as Bill and kallepa, the shell defaults to ipad when trying to view on my iphone, anybody figure out how to solve this?!?!

  35. Thomas

    04/04/2012 at 7:09 am // Permalink

    I would love an app like this for Windows. Please please please make it happen.

  36. Gary

    28/05/2012 at 11:44 pm // Permalink

    Looks like an extremely useful utility. But I’ve never used it. Unfortunately I’ve wasted 2000 bucks on a windows PC. Can this app be somehow ported to Windows platform? I’d love if it could.

  37. miaojh

    04/06/2012 at 5:34 am // Permalink

    I developed a app AirPhotoViewer
    That can lets you ipad or iphone view photo form your pc over wifi with out sync  http://itunes.apple.com/us/app/airphotoviewer/id524118762?ls=1&mt=8

Trackbacks
  1. » EverydayUX morsels (January 24th - January 30th) | EverydayUX: Everyday User Experience by alex rainert 30/01/2009
  2. Intense Minimalism • Mi è morta la scheda grafica del MacBook Pro 18/02/2009
  3. Delicious Bookmarks (2009-04-01 - 2009-04-02) | Josh Babetski : Quixotic Bravado 02/04/2009
  4. Brent Sordyl’s blog » LiveView: an iPhone app for on-screen prototyping 03/04/2009
  5. Philip van Allen » new ecology of things class, anti-homogenous 21/04/2009
  6. me.taqumi » Blog Archive » links for 2009-04-26 26/04/2009
  7. Aral Balkan - Links for 2009-05-30 30/05/2009
  8. Dez aplicações para Mac de dar inveja aos usuários de Windows » AppleMania.info 10/07/2009
  9. Top 10 apps that make you want to switch to Mac | Apple Scene - Apps, iPhone, Mac and iPod 17/07/2009
  10. Saw48 » Top 10 apps that make you want to switch to Mac 23/08/2009
  11. popZenith » Blog Archive » Liveview: An iPhone app for on-screen prototyping 05/10/2009
  12. ryojiihara.com » Blog Archive » mouse2.0 25/10/2009
  13. 21 Prototyping, Mockup, and Wireframing Tools for iPhone App Development | iPhoneized 16/11/2009
  14. iPhone Mockup, Wireframe and Prototyping tools for iPhone Developers | MobiGeni - Software for iPhone, iPod, Google Android and Windows Mobile 10/02/2010
  15. Heiko Behrens (Blog) » Blog Archive » Preview your photoshop design directly on the iPhone/iPad 07/05/2010
  16. Prototypowanie aplikacji na iPhone’a i iPada - user experience design: projektowanie interakcji i użyteczność 26/05/2010
  17. Rundown of Rapid Prototyping Tools | oDesk.com 10/06/2010

Leave your comments