Merge "docs: Update device art generator to include Wear generic devices." into lmp-docs

docs/html/distribute/tools/promote/device-art.jd

@@ -1,13 +1,13 @@
 page.title=Device Art Generator
 page.image=/images/device-art-ex-crop.jpg
-page.metaDescription=Drag and drop screenshots of your app into real device artwork, for better looking promotional images and improved visual context.
+page.metaDescription=Drag and drop screenshots of your app into device artwork, for better looking promotional images and improved visual context.
 meta.tags="disttools, promoting, deviceart, marketing"
 page.tags="device, deviceart, nexus, assets"
 Xnonavpage=true
 
 @jd:body
 
-<p>The device art generator enables you to quickly wrap app screenshots in real device artwork. This provides better visual context for your app screenshots on your website or in other promotional materials</p>
+<p>The device art generator enables you to quickly wrap app screenshots in device artwork. This provides better visual context for your app screenshots on your website or in other promotional materials</p>
 
 <p class="note"><strong>Note</strong>: Do <em>not</em> use graphics created here in your 1024x500
 feature image or screenshots for your Google Play app listing.</p>
@@ -41,6 +41,12 @@ feature image or screenshots for your Google Play app listing.</p>
       <label for="output-glare">Screen Glare</label><br><br>
       <a class="button" id="rotate-button">Rotate</a>
     </p>
+    <p id="wear-customizations">
+      <input type="radio" id="output-square" name="output-wear" checked="checked" class="form-field-checkbutton">
+      <label for="output-square">Square</label><br>
+      <input type="radio" id="output-round" name="output-wear" class="form-field-checkbutton">
+      <label for="output-round">Round</label><br><br>
+    </p>
   </div>
   <div class="layout-content-col span-10">
     <!-- position:relative fixes an issue where dragging an image out of a inline-block container
@@ -165,6 +171,10 @@ feature image or screenshots for your Google Play app listing.</p>
   // Global constants
   var MSG_INVALID_INPUT_IMAGE = 'Invalid screenshot provided. Screenshots must be PNG files '
       + 'matching the target device\'s screen aspect ratio in either portrait or landscape.';
+  var MSG_INVALID_WEAR_IMAGE = 'Invalid screenshot provided. Screenshots must be PNG files '
+      + 'matching the target device\'s screen aspect ratio.'
+      + ' Capture screenshots from a Wear emulator or device with '
+      + '<a href="http://developer.android.com/tools/debugging/debugging-studio.html#screenCap">Android Studio</a>.';
   var MSG_NO_INPUT_IMAGE = 'Drag a screenshot (in PNG format) from your desktop onto a '
       + 'target device above.'
   var MSG_GENERATING_IMAGE = 'Generating device art&hellip;';
@@ -270,6 +280,47 @@ feature image or screenshots for your Google Play app listing.</p>
       portSize: [768,1280],
       archived: true
     },
+    {
+      id: 'wear',
+      title: 'Android Wear',
+      url: 'http://www.android.com/wear/',
+      physicalSize: 1.8,
+      physicalHeight: 1.8,
+      density: 'HDPI',
+      landRes: ['back'],
+      landOffset: [225,206],
+      portRes: ['back'],
+      portOffset: [200,214],
+      portSize: [320,320],
+    },
+    {
+      id: 'wear_square',
+      title: 'Android Wear Square',
+      url: 'http://www.android.com/wear/',
+      physicalSize: 1.8,
+      physicalHeight: 1.8,
+      density: 'HDPI',
+      landRes: ['back'],
+      landOffset: [225,206],
+      portRes: ['back'],
+      portOffset: [200,214],
+      portSize: [320,320],
+      hidden: true
+    },
+    {
+      id: 'wear_round',
+      title: 'Android Wear Round',
+      url: 'http://www.android.com/wear/',
+      physicalSize: 1.8,
+      physicalHeight: 1.8,
+      density: 'HDPI',
+      landRes: ['back'],
+      landOffset: [161,167],
+      portRes: ['back'],
+      portOffset: [128,134],
+      portSize: [320,320],
+      hidden: true
+    },
   ];
 
   DEVICES = DEVICES.sort(function(x, y) { return x.physicalSize - y.physicalSize; });
@@ -343,15 +394,21 @@ feature image or screenshots for your Google Play app listing.</p>
     $('#output').html(MSG_NO_INPUT_IMAGE);
 
     $('#frame-customizations').hide();
+    $('#wear-customizations').hide();
 
     $('#output-shadow, #output-glare').click(function() {
       createFrame();
     });
 
+    $('input[name="output-wear"]').change(function() {
+      createFrame();
+    });
+
     // Build device list.
     $.each(DEVICES, function() {
       var resolution = this.actualResolution || this.portSize;
       var scaleFactorText = '';
+      var deviceList = '.device-list.primary';
       if (resolution[0] != this.portSize[0]) {
         scaleFactorText = '<br>' + (100 * (this.portSize[0] / resolution[0])).toFixed(0) +
             '% size output';
@@ -359,6 +416,12 @@ feature image or screenshots for your Google Play app listing.</p>
         scaleFactorText = '<br>&nbsp;';
       }
 
+      if (this.archived) {
+        deviceList = '.device-list.archived';
+      } else if (this.hidden) {
+        deviceList = '.device-list.hidden';
+      }
+
       $('<li>')
           .append($('<div>')
               .addClass('thumb-container')
@@ -374,7 +437,7 @@ feature image or screenshots for your Google Play app listing.</p>
                   '<br>' +  this.physicalSize + '" @ ' + this.density +
                   '<br>' + (resolution[0] + 'x' + resolution[1]) + scaleFactorText))
           .data('deviceId', this.id)
-          .appendTo(this.archived ? '.device-list.archive' : '.device-list.primary');
+          .appendTo(deviceList)
     });
 
     // Set up "older devices" expando.
@@ -406,7 +469,11 @@ feature image or screenshots for your Google Play app listing.</p>
           evt.preventDefault();
           loadImageFromFileList(evt.dataTransfer.files, function(data) {
             if (data == null) {
+              if (g_currentDevice.id == 'wear') {
+                $('#output').html(MSG_INVALID_WEAR_IMAGE);
+              }else {
                 $('#output').html(MSG_INVALID_INPUT_IMAGE);
+              }
               return;
             }
             loadImageFromUri(data.uri, function(img) {
@@ -450,6 +517,14 @@ feature image or screenshots for your Google Play app listing.</p>
   function createFrame() {
     var port;
 
+    if (g_currentDevice.id == 'wear' || g_currentDevice.id == 'wear_square' || g_currentDevice.id == 'wear_round') {
+      if ($('#output-square').is(':checked')) {
+        g_currentDevice = getDeviceById('wear_square');
+      } else {
+        g_currentDevice = getDeviceById('wear_round');
+      }
+    }
+
     var aspect1 = g_currentImage.naturalWidth / g_currentImage.naturalHeight;
     var aspect2 = g_currentDevice.portSize[0] / g_currentDevice.portSize[1];
 
@@ -458,11 +533,18 @@ feature image or screenshots for your Google Play app listing.</p>
     } else if (aspect1 == 1 / aspect2) {
       port = false;
     } else {
+      if (g_currentDevice.id == 'wear_square' || g_currentDevice.id == 'wear_round') {
+        alert('The screenshot must have an aspect ratio of ' +
+          aspect2.toFixed(3) +
+          ' (ideally ' + g_currentDevice.portSize[0] + 'x' + g_currentDevice.portSize[1] + ').');
+        $('#output').html(MSG_INVALID_WEAR_IMAGE);
+      }else {
         alert('The screenshot must have an aspect ratio of ' +
           aspect2.toFixed(3) + ' or ' + (1 / aspect2).toFixed(3) +
           ' (ideally ' + g_currentDevice.portSize[0] + 'x' + g_currentDevice.portSize[1] +
           ' or ' + g_currentDevice.portSize[1] + 'x' + g_currentDevice.portSize[0] + ').');
         $('#output').html(MSG_INVALID_INPUT_IMAGE);
+      }
       return;
     }
 
@@ -497,9 +579,37 @@ feature image or screenshots for your Google Play app listing.</p>
         ctx.drawImage(resourceImages['shadow'], 0, 0);
       }
       ctx.drawImage(resourceImages['back'], 0, 0);
+
+      if (g_currentDevice.id == 'wear_round') {
+        var scratchCanvas = document.createElement('canvas');
+        scratchCanvas.width = width;
+        scratchCanvas.height = height;
+        var scratchCtx = scratchCanvas.getContext('2d');
+
+
+        //drawing code
+        scratchCtx.clearRect(offset[0], offset[1], scratchCanvas.width, scratchCanvas.height);
+
+        scratchCtx.globalCompositeOperation = 'source-over'; //default
+
+        scratchCtx.drawImage(g_currentImage, offset[0], offset[1], size[0], size[1]);
+
+        scratchCtx.fillStyle = '#fff'; //color doesn't matter, but we want full opacity
+        scratchCtx.globalCompositeOperation = 'destination-in';
+        scratchCtx.beginPath();
+        scratchCtx.arc(288, 294, size[0] / 2, 0, 2 * Math.PI, false);
+        scratchCtx.closePath();
+        scratchCtx.fill();
+
+        // After tinkering with the offset, the 1 in the x-position drew the image
+        // perfectly
+        ctx.drawImage(scratchCanvas, 1, 0);
+      } else {
         ctx.fillStyle = '#000';
         ctx.fillRect(offset[0], offset[1], size[0], size[1]);
         ctx.drawImage(g_currentImage, offset[0], offset[1], size[0], size[1]);
+      }
+
       if (resourceImages['fore'] && $('#output-glare').is(':checked')) {
         ctx.drawImage(resourceImages['fore'], 0, 0);
       }
@@ -546,7 +656,13 @@ feature image or screenshots for your Google Play app listing.</p>
               .attr('data-downloadurl', ['image/png', filename, imageUrl].join(':')))
           .appendTo($('#output').empty());
 
+      if (g_currentDevice.id == 'wear' || g_currentDevice.id == 'wear_round' || g_currentDevice.id == 'wear_square') {
+        $('#wear-customizations').show();
+        $('#frame-customizations').hide();
+      } else {
         $('#frame-customizations').show();
+        $('#wear-customizations').hide();
+      }
     }
   }