resolve merge conflicts of 3481659b to nyc-dev

page.title=Accessory Development Kit

page.tags=adk

@jd:body

<p>The Accessory Development Kit (ADK) is a reference implementation for hardware manufacturers and

hobbyists to use as a starting point for building accessories for Android. Each ADK release is

provided with source code and hardware specifications to make the process of developing your own

accessories easier. Creating new and alternative hardware based on the ADK is encouraged!</p>

<p>Android accessories can be audio docking stations, exercise machines, personal medical testing

devices, weather stations, or any other external hardware device that adds to the functionality of

Android.</p>

<p>Accessories use the Android Open Accessory (AOA) protocol to communicate with Android

devices, over a USB cable or through a Bluetooth connection. If you are building an accessory that

uses USB, make sure you understand how to implement the AOA protocol to establish  communication

between your accessory hardware and Android. For more information, see the

<a href="http://source.android.com/tech/accessories/index.html">Android Open Acessory protocol</a>.

</p>

<p>The following sections provide more information about the Android Accessory Development Kits, how

to use them, and how to get started building your own accessories for Android.</p>

<dl>

  <dt><a href="adk2.html">ADK 2012 Guide</a></dt>

  <dd>Guide to getting started with the ADK released at Google I/O 2012.</dd>

  <dt><a href="adk.html">ADK 2011 Guide</a></dt>

  <dd>Guide to getting started with the original ADK, released at Google I/O 2011.</dd>

</dl>

excludeFromSuggestions=true

fullpage=true

page.title=Google I/O 13

@jd:body

<style>

#ioplayer-frame {

  z-index:10;

  width:703px;

  height:396px;

  margin:0;

  position:relative;

}

#noplayer-message {

  position:absolute;

  top:50%;left:0;

  width:100%;

  z-index:-1;

  text-align:center;

  display:none;

}

h1 {

  font-weight:100;

  font-size:40px;

  line-height:30px;

  margin:30px 0 10px 0px;

  color:#000;

}

h2 {

  font-weight:100;

  font-size:30px;

  line-height:30px;

  margin:12px 0 10px 0px;

  color:#000;

  float:left;

  display:block;

}

.col-4 h2 {

  margin-top:40px;

}

ul.videos {

  list-style:none;

  margin:0;

  width:auto;

}

ul.videos li {

  display:block;

  float:left;

  position:relative;

  margin:0 2px 2px 0;

  background-repeat:no-repeat !important;

  background-size:320px auto;

  background-position:10% 50%;

  z-index:1; /* IE: the description is 2 */

}

ul.videos li a {

  color:#fff !important;

  display:block;

  margin:0;

  padding:8px 12px;

  width:209px;

  height:134px;

  box-shadow:inset 500px 500px 999px rgba(000, 000, 000, 0.2);

  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.8)), color-stop(1, transparent));

  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.8), transparent);

  background-image: -moz-linear-gradient(top, rgba(0,0,0,0.8), transparent);

  background-image: -o-linear-gradient(top, rgba(0,0,0,0.8), transparent);

  background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

}

ul.videos.featured li {

  margin:0 0 2px;

}

ul.videos.featured li a {

  margin:0;

  height:115px;

}

ul.videos li a:hover {

  box-shadow:inset 500px 500px 999px rgba(255,255,255, 0.6);

}

ul.videos li h4 {

  text-shadow:1px 1px 0 rgba(0,0,0,0.8);

  font-size:18px;

  line-height:22px;

  color:#fff;

  margin:0;

  height:100%; /* IE: to fill clickable area */

}

ul.videos li .description-frame {

  display:none;

  z-index:2; /* IE: the li is 1 */

}

ul.videos li a:hover .description-frame {

  display:block;

  position:absolute;

  top:80px;

  left:8px;

  z-index:99;

}

ul.videos .description {

  background:#fff;

  width:200px;

  padding:8px;

  -webkit-border-radius:1px;

  -moz-border-radius:1px;

  border-radius:1px;

  -moz-box-shadow: 0 2px 3px 2px rgba(000,000,000, 0.4);

  -webkit-box-shadow: 0 2px 3px 2px rgba(000,000,000, 0.4);

  box-shadow: 0 2px 3px 2px rgba(000,000,000, 0.4);

  font-size:11px;

  line-height:12px;

  color:#000;

  overflow:hidden;

}

ul.videos .arrow-up {

  position:absolute;

  left:15px;

  top:-11px;

  width:0;

  height:0;

  border-bottom:12px solid #fff;

  border-left:12px solid transparent;

  border-right:12px solid transparent;

}

ul.videos .arrow-down {

  position:absolute;

  left:15px;

  bottom:-11px;

  width:0;

  height:0;

  border-top:12px solid #fff;

  border-left:12px solid transparent;

  border-right:12px solid transparent;

}

ul.videos span.tag {

  font-size:.9em;

  font-weight:normal;

  display: block;

  position: absolute;

  bottom: 0;

  color: #fff;

  left: 0;

  padding: 4px;

  border-top-right-radius:4px;

  text-transform:uppercase;

  text-shadow: none;

}

ul.videos span.tag.design {

  background-color:rgba(51, 181, 229, .7);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc33b5e5', endColorstr='#cc33b5e5',GradientType=0 ); /* IE6-9 */

}

ul.videos span.tag.develop {

  background-color:rgba(255, 136, 0, .7);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccff8800', endColorstr='#ccff8800',GradientType=0 ); /* IE6-9 */

}

ul.videos span.tag.distribute {

  background-color:rgba(153, 204, 0, .7);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc99cc00', endColorstr='#cc99cc00',GradientType=0 ); /* IE6-9 */

}

</style>

<div class="wrap">

  <div class="col-12" style="width:704px;margin:0">

    <h1>Android @ Google I/O 13</h1>

    <div id="ioplayer-frame">

      <div id="noplayer-message">

        <!-- busted flash player message -->

        Your video is supposed to appear here.<br/>

        Make sure you have the <a href="//get.adobe.com/flashplayer/" target="_blank">Flash&reg; Player</a>.

      </div>

      <div id="player"><!-- Youtube embeds here... actually replaces this div --></div>

    </div>

  </div>

  <div class="col-4" style="margin:0;width:234px;padding:0 0 0 2px">

    <h2 class="norule">Most Popular</h2>

    <ul class="videos featured" id="playlist2">

    </ul>

  </div>

</div>

<div class="wrap">

    <div style="position:absolute;width:940px;text-align:right">

      <a href="//www.youtube.com/AndroidDevelopers" target="_blank">

      More on YouTube

        <img src="//www.youtube.com/favicon.ico" style="border:0;width:16px;height:16px;vertical-align:middle;margin:0 2px 3px 2px">

      </a>

    </div>

  <div style="width:944px;overflow:hidden;padding:0 0 20px">

    <h2 class="norule">All Videos</h2>

    <ul class="videos" id="playlist1" style="clear:left">

      <span id="videos-design"></span>

      <span id="videos-develop"></span>

      <span id="videos-distribute"></span>

    </ul>

  </div>

</div>

<br class="clearfix"/>

<script src="//swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js" type="text/javascript"></script>

<script type="text/javascript">

/* Load a video into the player box.

 * @param id        The YouTube video ID

 * @param title     The video title to display in the player box (character escaped)

 * @param autoplay  Whether to automatically play the video

 */

function loadVideo(id, title, autoplay) {

  var url = '//www.youtube.com/v/' + id + '&rel=1&border=0&fs=1' + (autoplay?'&autoplay=1':'');

  swfobject.embedSWF(url, 'player', '704', '397', '9.0.0', false, false, {allowfullscreen: 'true'});

  $('body,html').animate({ scrollTop: 0 }, "slow");

  setTimeout(function(){$('#noplayer-message').show()}, 2000);

}

function buildPlaylistDesign(data) {

  buildPlaylist(data, $('ul#playlist1 #videos-design'), "design");

}

function buildPlaylistDevelop(data) {

  buildPlaylist(data, $('ul#playlist1 #videos-develop'), "develop");

}

function buildPlaylistDistribute(data) {

  buildPlaylist(data, $('ul#playlist1 #videos-distribute'), "distribute");

}

function buildPlaylist2(data) {

  buildPlaylist(data, $('ul#playlist2'));

}

function buildPlaylist(data, ul, tag) {

  var MAX_DESC_LENGTH = 200; // the length at which we will trim the description

  var feed = data.feed;

  var entries = feed.entry || [];

  var playlistId = feed.yt$playlistId.$t;

  // Loop through each entry (each video) and add it to the '#DevelopersLive' list

  for (var i = 0; i < entries.length; i++) {

    var entry = entries[i];

    var title = entry.title.$t;

    var id = entry.media$group.yt$videoid.$t;

    // get 180x320 thumbnail

    var thumbs = entry.media$group.media$thumbnail;

    var thumbUrl;

    for (var j = 0; j < thumbs.length; j++) {

      if (thumbs[j].yt$name == "hqdefault") {

        thumbUrl = thumbs[j].url;

      }

    }

    // chop out the google io title

    title = title.substr(title.indexOf("-") + 1, title.length);

    var fullDescription = entry.media$group.media$description.$t;

    var playerUrl = entry.media$group.media$content[0].url;

    var shortDescription = fullDescription.substr(0, MAX_DESC_LENGTH);

    // further shorten description if there's a url (remove it)

    var httpindex = shortDescription.indexOf("http://");

    if (httpindex != -1) {

      shortDescription = shortDescription.substring(0,httpindex);

    }

    shortDescription += shortDescription.length == MAX_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description

    var a = $('<a href="#" id="' + id + '" '

          + 'onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />');

    var pShortDescription = $('<div class="description-frame"><div class="arrow-up"></div>'

          + '<div class="description">' + shortDescription + '</div></div>');

    var h4Title = "<h4>" + title + "</h4>";

    var li = $('<li style="background-image:url(\'' + thumbUrl +'\')" />');

    li.append(a);

    a.append(h4Title).append(pShortDescription);

    if (tag !== undefined) {

      var $tag = $('<span class="tag ' + tag + '">' + tag + '</span>');

      a.append($tag);

    }

    ul.append(li);

    // put the first video in the player 

    if ((tag == "design") && (i == 0)) {

      loadVideo(id, escape(title), false);

    }

  }

}

/* Request the playlist feeds from YouTube */

function showDevelopersLivePlaylist() {

  var playlistId = "PLWz5rJ2EKKc-qVhMuAprIFYFbCotdgJKq"; /* IO 13 - Design */

  $.getScript("//gdata.youtube.com/feeds/api/playlists/"

          + playlistId +

          "?v=2&alt=json-in-script&max-results=50&callback=buildPlaylistDesign&orderby=position");

  playlistId = "PLWz5rJ2EKKc9rkwO9yBosRvkQBJd5utmR"; /* IO 13 - Develop */

  $.getScript("//gdata.youtube.com/feeds/api/playlists/"

          + playlistId +

          "?v=2&alt=json-in-script&max-results=50&callback=buildPlaylistDevelop&orderby=position");

  playlistId = "PLWz5rJ2EKKc-1WjgQqL0B4OQtbLfhMlB2"; /* IO 13 - Distribute */

  $.getScript("//gdata.youtube.com/feeds/api/playlists/"

          + playlistId +

          "?v=2&alt=json-in-script&max-results=50&callback=buildPlaylistDistribute&orderby=position");

  playlistId = "PLWz5rJ2EKKc9WGUwq2gQ-coU3fSyexgOx"; /* IO 13 - The Android Sessions */

  $.getScript("//gdata.youtube.com/feeds/api/playlists/"

          + playlistId +

          "?v=2&alt=json-in-script&max-results=3&callback=buildPlaylist2&orderby=viewCount");

}

showDevelopersLivePlaylist();

</script>

 No newline at end of file