Automating PhoneGap Builds

I’ve recently had several conversations with PhoneGap users around processes for automating the compilation of PhoneGap apps.  This could be either in automated tasks using GruntAntMaven, or any other task manager, or could be in continuous integration environments like Jenkins CI.

If you’re interested in this, here are a few options… First of all, PhoneGap Build has a REST API. You can use this to programmatically create new projects, update projects, trigger new builds (even just for specific platforms), etc… This can integrate with your build scripts and tie into any workflow.

If you’re using GitHub, it is possible to tie into hooks triggering PhoneGap Build to recompile every time you commit your code.  Here’s an example of it in action, or you can just use this service which is already setup: http://autobuild.monkeh.me/ (from the same author) - Just be careful with your user/pass in plain text. Update: You can also use the Autobuild service using a clientID variable instead of sending through username and password details via HTTP.

If you aren’t using PhoneGap Build, you’re not out of luck.  All PhoneGap CLI commands are based on scripts, which themselves can be scripted.  You could use ANT’s exec command, the Maven exec plugin, Grunt exec or Grunt shell plugins, Jenkins execute shell, or any other task runner to manually invoke the PhoneGap CLI. You just need to make sure all your environment and path variables are correct to access SDKs and required programs. However, there’s one caveat… iOS builds require Xcode/Apple developer tools, which have to be run on a Mac.

If you’re using Jenkins, this might be a good one to check out: Jenkins CI + PhoneGap & Cordova

Create Amazing Photo-Walks with Adobe Photoshop Lightroom and Microsoft Photosynth

Photosynth is an impressive service from Microsoft.  It enables you to upload photos and turn them into interactive 360 panoramas, photo walls, spins, or photo walks. The Photosynth team recently announced a new version of Photosynth, and it’s a really cool web experience. It leverages WebGL to visualize the content, and runs great on both desktop and mobile devices (as long as the devices support WebGL).

Those who know me well or regularly read the blog probably already know I have an obsession with aerial photography using remote controlled multirotor helicopters. Once I discovered Photosynth, my first thought was “Wow, these ‘Photo Walks’ will be incredible to visualize flights”.  I capture most of my flights in time-lapse photography mode with a GoPro camera attached to a DJI Phantom copter. The time-lapse images are perfect for Photosynth – I normally capture on a two second interval, though the Photosynth team suggested trying an even shorter interval for better results.

To generate the best Photosynths, you need to start with the best photos. This is where Lightroom comes into the picture. Lightroom is an incredible tool for editing photos and bringing out their details. You can enhance exposure, colors, clarity, saturation, reduce noise, and more. Even better, it excels at bulk image editing. Thus it’s perfect for processing your photos for preparation to create a Photosynth.

Check out the video below to get an overview of Photosynth, and preparing your photos with Lightroom.

Now, you’re ready to learn more about both Lightroom and Photosynth, right?

Don’t miss this series on Getting Started with Lightroom 5 on Adobe TV, or Terry White’s “How To Get Started With Lightroom“.  Don’t have Lightroom? Just become a member of Creative Cloud, and you can get Lightroom and Photoshop today!

Then check out Photosynth to learn more and sign up for the preview.

Below are Photosynths from a few of my flights.  If your browser supports WebGL, you’ll be able to see the fully interactive experience – you’ll be able to scrub through the photos, zoom in, and pan the images at full resolution. It’s best viewed in full-screen mode.

If your browser doesn’t support WebGL, then you’ll just see a video of the Photosynth playback, which is still cool, but nowhere near as cool as the interactive experience. Check here to see a matrix of browsers that support WebGL. Note: In Chrome on Android you have to manually enable WebGL support.

Virginia State Capital Building – Richmond, VA


Virginia State Capital by andrewtrice on Photosynth

Golden Gate Bridge – San Francisco, CA


Golden Gate Bridge by andrewtrice on Photosynth

ATT Park – San Francisco, CA


ATT Park, San Francisco, CA by andrewtrice on Photosynth

Ocean City Inlet – Ocean City, MD


Ocean City, MD – Aerial by andrewtrice on Photosynth

Linked Smart Objects in Adobe Photoshop CC

Another great feature in the latest release of Adobe Photoshop CC is Linked Smart Objects. Linked Smart Objects enable you to place another file inside of a composition as a smart object. Any time that the linked file is saved, those changes are automatically propagated to the linked documents that you have open. (If they’re not open, you will be prompted the next time you open the file.)

For example, you can place a .ai Illustrator file inside of a PSD as a Linked Smart Object, and when you update the content in Illustrator, the content in Photoshop is automatically updated. Check out the video below for more detail.

Be sure to check out the Creative Cloud learning resources to learn more about Linked Smart Objects.

This is a FREE update for Creative Cloud members.  If you’re not already a Creative Cloud member, join today to get the most out of all of the tools that Adobe has to offer!

Perspective Warp in Adobe Photoshop CC

Today new versions of Illustrator, InDesign, and Photoshop were released, and there are some amazing new features added for Creative Cloud members. I’d like to take this opportunity to show off a really cool new feature in Adobe Photoshop CCPerspective Warp! Perpsective warp was sneaked at Adobe MAX last year – it’s a new way to manipulate your images by changing their three dimensional perspective.  You can manipulate parts of the image to give the appearance that the camera perspective changes, all without having to create a complex 3D model! This filter can be used for changing entire images, and is especially useful when aligning perspectives while compositing content from multiple images.

Here’s a quick video I put together showing how you can use it within your own Photoshop creations.

All that you have to do is select the layer that you want to manipulate, then select the Edit -> Perspective Warp menu option. Using Perspective Warp is a two-step process.

  1. First you start in “Layout” mode.  Create planes within your images to match areas or geometries of content within your image. This might be the sides of a building, or other areas that you don’t want deformed.
  2. Next, Switch “Warp” mode.  In warp mode you can drag the pins/vertices to warp the content within the image. You can also hold shift and click on a line to lock that line to a horizontal or vertical position.

Drag the perspective warping where you want it, and then commit the changes by clicking on the “Commit” check button.

Perspective Warp Toolbar

Perspective Warp Toolbar

Now, let’s look at two scenarios where I’ve used perspective warp (see the video for step by step details).

The first example shows how you can change the perspective/focal area of the image.  In this case I applied perspective warp to the entire image.  I created planes to match the Adobe building in the center of the image, and then used Perspective Warp to shift the building focal area to the left.

Shifting Perspective with Perspective Warp

Shifting Perspective with Perspective Warp

Here’s my source image for this example.  The original image was captured with a DJI Phantom quadcopter and GoPro camera, I reduced the GoPro image’s fisheye distortion using Adaptive Wide Angle and corrected colors using the Camera RAW filter before applying the Perspective Warp.

In the second example I composited a truck onto a street.  In the original images, the truck’s perspective is close, but does not match the perspective of the street.  Using Perspective Warp, you can easily re-shape content to match perspectives within your composition.

Original Images:

Yes, that is Optimus Prime :)

Yes, that is Optimus Prime :)

Composite Image:

Composite using Perspective Warp

Composite using Perspective Warp

I also used layers masks to remove the truck’s background and the Camera RAW filter to remove saturation from the overlaid truck image.

Links to original images used in this composition are below, thanks to Google’s image search.  Did you know that there is a new setting to easily find images based on usage rights?  This is really useful!

  • Road (Creative Commons image by Patrick Feller via Flickr)
  • Truck (Public Domain from Wikimedia Commons)

Be sure to check out the Creative Cloud learning resources to learn more about Perspective Warp and all other tools and features available within Creative Cloud.

This is a FREE update for Creative Cloud members.  If you’re not already a Creative Cloud member, join today to get the most out of all of the tools that Adobe has to offer!

Generating a PDF Inside of a PhoneGap App

A while back, I was asked if it’s possible to generate PDF documents inside of PhoneGap apps… The answer is definitely yes, and it’s not that hard at all!  I used the JSPDF library, which has a comprehensive JavaScript API for generating PDF documents.

Here’s a quick and easy sample…

First, create a new PhoneGap project using the command line tools, and add the console output and file writer plugins:

phonegap create . "jspdf.sample" "JSPDF App"
phonegap local plugin add org.apache.cordova.file
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

Next, download the JSPDF project code, and copy the jspdf library from the “dist” directory into your PhoneGap project.  I put it into the www/js directory.  Then, be sure to include the library inside of your main HTML file.

<script type="text/javascript" src="js/jspdf.source.js"></script>

I used the uncompressed/minified source file in the “dist” directory.

Now, let’s generate a PDF document.  Here’s a code snippet that will generate a very simple PDF document and save it to the local file system on the device using PhoneGap’s File API.  This must be called *AFTER* the deviceready event.  All of the console.log statements are just used for debugging this snippet:

//FIRST GENERATE THE PDF DOCUMENT
console.log("generating pdf...");
var doc = new jsPDF();

doc.text(20, 20, 'HELLO!');

doc.setFont("courier");
doc.setFontType("normal");
doc.text(20, 30, 'This is a PDF document generated using JSPDF.');
doc.text(20, 50, 'YES, Inside of PhoneGap!');

var pdfOutput = doc.output();
console.log( pdfOutput );

//NEXT SAVE IT TO THE DEVICE'S LOCAL FILE SYSTEM
console.log("file system...");
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {

   console.log(fileSystem.name);
   console.log(fileSystem.root.name);
   console.log(fileSystem.root.fullPath);

   fileSystem.root.getFile("test.pdf", {create: true}, function(entry) {
      var fileEntry = entry;
      console.log(entry);

      entry.createWriter(function(writer) {
         writer.onwrite = function(evt) {
         console.log("write success");
      };

      console.log("writing to file");
         writer.write( pdfOutput );
      }, function(error) {
         console.log(error);
      });

   }, function(error){
      console.log(error);
   });
},
function(event){
 console.log( evt.target.error.code );
});

Notice that the PDF generation is actually the easy part.  Once you have created the document, you can get a string representation of the document using the doc.output() function, and with that you can do whatever you want with it.  You can save it to the local file system like I did, send it to a server, or even send it to a native PDF reader on the device.

Be sure to check out the JSPDF open source project on GitHub and review the docs and online examples for more details.

You can download the sample PDF here that was generated from this code snippet.