AutosOnShow Vehicle API

Step 1: Linking to the SDK

The current release of the SDK can be imported into your script(s) like any other Javascript file:

<script src="https://media-player-sdk.aos.tv/latest/app-sdk.js" integrity="[SDK_INTEGRITY]" crossorigin="anonymous"></script>

Or to use the latest version as and when it is released

<script src="https://media-player-sdk.aos.tv/latest/app-sdk.js"></script>

Step 2: Accessing a Library

You can access your vehicles by authenticating against your specific libraries. You get access to it by passing your acces_token into the Library constructor:

Tokens have an expiration period of 1 hour, at which point the API will reject further requests until a new token is provided

const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');

Step 3: Inspecting a Library

The Library is your collection of vehicles. You can request a Vehicle by passing a registration into the vehicle() method.

Note: Subsequent calls for a vehicle with the same Library Instance will return a cached vehicle for performance reasons

For example, we can begin inspecting vehicle GX66YCR1 as follows:

const vehiclePromise = library.vehicle('GX66YCR1');

        vehiclePromise.then((result) => { ... }) }).catch((error) => {
          console.log(error);
       });

Observe that the request returned a promise rather than a concrete vehicle object

Example 1: Investigate a Vehicle

Using what we've learned from above we can fetch a vehicle. Feel free to modify the code

  <div id="root"></div>

        const rootDiv = document.getElementById('root');
        const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');
        const vehiclePromise = library.vehicle('GX66YCR1');

        vehiclePromise.then((result) => {
          const vehicle = result;
          const pre = document.createElement('pre');
          pre.textContent = JSON.stringify(vehicle.getOverview(), null, 2);
          rootDiv.appendChild(pre);
        }).catch((error) => {
          console.log(error);
        });

        /* Handle preview in large screen resolution */
        @media only screen and (min-width: 1768px) {
          #root {
            width: 80% !important;
          }
        }

Example 2: Get all thumbnails for a vehicle

Generally we would like to actually display the assets. Let's see how to display the vehicle thumbnails

  <div id="root" class="m-1" ></div>

        const rootDiv = document.getElementById('root');
        const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');
        const vehiclePromise = library.vehicle('GX66YCR1');

        vehiclePromise.then((result) => {
          const vehicle = result;
          const images = vehicle.getSmallImages();
          images.forEach((imgURL) => {
            const image = new Image();
            image.src = imgURL;
            image.style.width = '100%'
            rootDiv.appendChild(image);
          });
        }).catch((error) => {
          console.log(error);
        });

Example 3: Get all large images for a vehicle

Generally we would like to actually display the assets. Let's see how to display the vehicle large images

  <div id="root" class="m-1" ></div>

  const rootDiv = document.getElementById('root');
  const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');
  const vehiclePromise = library.vehicle('GX66YCR1');

  vehiclePromise.then((result) => {
    const vehicle = result;
    const images = vehicle.getLargeImages();
    images.forEach((imgURL) => {
      const image = new Image();
      image.src = imgURL;
      image.style.width = '100%'
      rootDiv.appendChild(image);
    });
  }).catch((error) => {
    console.log(error);
  });

Example 4: Get Poster Image

Get Poster Image

  <div id="root" class="m-1" ></div>

  const rootDiv = document.getElementById('root');
  const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');
  const vehiclePromise = library.vehicle('GX66YCR1');

  vehiclePromise.then((result) => {
  const vehicle = result;
    const imgURL = vehicle.getPoster()
    const image = new Image();
    image.src = imgURL;
    image.style.width = '100%';
    rootDiv.appendChild(image);
  }).catch((error) => {
    console.log(error);
  });

Example 5: Play a vehicle video

If the vehicle has one (or more) videos we can play them in the page

  <div id="root" class="m-1" ></div>

  const rootDiv = document.getElementById('root');
  const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');
  const vehiclePromise = library.vehicle('GX66YCR1');

  vehiclePromise.then((result) => {
    const vehicle = result;
    const videoURL = vehicle.getVideo();
    const video = document.createElement('video');
    video.setAttribute('controls', 'controls');
    video.style.width = '100%';
    const source = document.createElement('source');
    source.src = videoURL;
    video.appendChild(source);
    rootDiv.appendChild(video);
  }).catch((error) => {
    console.log(error);
  });

Example 6: Tags

Tags: indicate feature and damage at specific location.

  <div id="root" class="m-1"></div>

  @keyframes glow_feature {
    from {
      box-shadow: 0 0 5px 0 limegreen;
    }
    to {
      box-shadow: 0 0 5px 5px limegreen;
    }
  }
  @keyframes glow_damage {
    from {
      box-shadow: 0 0 5px 0 red;
    }
    to {
      box-shadow: 0 0 5px 5px red;
    }
  }

  const rootDiv = document.getElementById('root');
  const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');
  const vehiclePromise = library.vehicle('GX66YCR1');
    vehiclePromise.then((result) => {
      const vehicle = result;
      const tags = vehicle.getTags();
      const tagFactory = new AosSDK.TagFactory(tags);
      const images = vehicle.getLargeImages();
      let is_image_shown = false;

      images.forEach((imgURL) => {
        if (is_image_shown !== true) {
          const matchingTags = tagFactory.tagsBelongingTo(imgURL);
          if (matchingTags.length) {
            const image = new Image();
            image.src = imgURL;
            image.style.width = "100%";
            rootDiv.style.position = "relative";
            rootDiv.appendChild(image);
            matchingTags.forEach((tag) => {
              let bg_color = 'red';
              let animation = 'glow_damage';
              if (tag.context == 'feature') {
                bg_color = 'limegreen';
                animation = 'glow_feature'
              }
              var beacon = document.createElement('div');
              beacon.style.width = '10px';
              beacon.style.height = '10px';
              beacon.style.position = 'absolute';
              beacon.style.backgroundColor = bg_color;
              beacon.style.top = (tag.y * 100).toString()+'%';
              beacon.style.left = (tag.x * 100).toString()+'%';
              beacon.style.borderRadius = '50%';
              beacon.style.cursor = 'pointer';
              beacon.style.animation = animation+' 1s infinite alternate';
              beacon.dataset.bsToggle = "tooltip";
              var title = '';
              if (tag.title !== undefined) {
                title += '<b>'+tag.title+'</b>';
              }
              if (tag.associatedMedia !== undefined) {
                title += '<img src="'+tag.associatedMedia.small+'"/>';
              }
              beacon.title = title;
              rootDiv.appendChild(beacon);
            });
            is_image_shown = true;
          }
        }
      });
    }).catch((error) => {
      console.log(error);
    });
    $(document).ready(function () {
      $('body').tooltip({
        selector: '[data-bs-toggle="tooltip"]',
        html: true
      });
    });

Example 7: Tag Set

Tag Set: indicate feature and damage at specific location.

  <div id="root" class="m-1"></div>

  @keyframes glow_feature {
    from {
      box-shadow: 0 0 5px 0 limegreen;
    }
    to {
      box-shadow: 0 0 5px 5px limegreen;
    }
  }
  @keyframes glow_damage {
    from {
      box-shadow: 0 0 5px 0 red;
    }
    to {
      box-shadow: 0 0 5px 5px red;
    }
  }

  const rootDiv = document.getElementById('root');
  const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');
  const vehiclePromise = library.vehicle('GX66YCR1');
    vehiclePromise.then((result) => {
      const vehicle = result;
      const tags = vehicle.getTagSet();
      const images = vehicle.getLargeImages();

      if (Object.keys(tags).length !== 0) {
        firstTagKey = Object.keys(tags)[0];
        firstTag = Object.values(tags)[0][0];
        const image = new Image();
        image.src = images[firstTagKey];
        image.style.width = "100%";
        rootDiv.style.position = "relative";
        rootDiv.appendChild(image);

        let bg_color = 'red';
        let animation = 'glow_damage';
        if (firstTag.context == 'feature') {
          bg_color = 'limegreen';
          animation = 'glow_feature'
        }
        var beacon = document.createElement('div');
        beacon.style.width = '10px';
        beacon.style.height = '10px';
        beacon.style.position = 'absolute';
        beacon.style.backgroundColor = bg_color;
        beacon.style.top = (firstTag.y * 100).toString()+'%';
        beacon.style.left = (firstTag.x * 100).toString()+'%';
        beacon.style.borderRadius = '50%';
        beacon.style.cursor = 'pointer';
        beacon.style.animation = animation+' 1s infinite alternate';
        beacon.dataset.bsToggle = "tooltip";
        var title = '';
        if (firstTag.title !== undefined) {
          title += '<b>'+firstTag.title+'</b>';
        }
        if (firstTag.associatedMedia !== undefined) {
          title += '<img src="'+firstTag.associatedMedia.small+'"/>';
        }
        beacon.title = title;
        rootDiv.appendChild(beacon);
      }
    }).catch((error) => {
      console.log(error);
    });
    $(document).ready(function () {
      $('body').tooltip({
        selector: '[data-bs-toggle="tooltip"]',
        html: true
      });
    });

Example 8: Get Panorama Image

Get Panorama Image

  <div id="root" class="m-1" ></div>

  const rootDiv = document.getElementById('root');
  const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');
  const vehiclePromise = library.vehicle('GX66YCR1');

  vehiclePromise.then((result) => {
    const vehicle = result;
    const image = new Image();
    image.src = vehicle.getInternalPanorama();
    image.style.width = '100%';
    rootDiv.append(image);
  }).catch((error) => {
    console.log(error);
  });

Example 9: Get Spinner Images

Get Spinner Images

  <div id="root" class="m-1" ></div>

  const rootDiv = document.getElementById('root');
  const library = new AosSDK.Library('17b3353bb1892c02e3646296d6a3486e4f792ea5');
  const vehiclePromise = library.vehicle('GX66YCR1');

  vehiclePromise.then((result) => {
    const vehicle = result;
    const images = vehicle.getAllThreeSixtyImages();
    images.forEach((imgURL) => {
      const image = new Image();
      image.src = imgURL;
      image.style.width = '100%'
      rootDiv.appendChild(image);
    });
  }).catch((error) => {
    console.log(error);
  });

Example 10: Get Image Gallery

Get Image Gallery

  <div style="text-align: center" class="m-1" >
    <button id="fullscreenBtn" class="btn btn-outline-secondary">Full Screen</button>
  </div>
  <div id="root" class="m-1" ></div>

  var TOKEN = "17b3353bb1892c02e3646296d6a3486e4f792ea5";
  var VEHICLE = "GX66YCR1";
  var startIndex = 0; // Start index of slider show, default is 0

  const library = new AosSDK.Library(TOKEN);

  library.vehicle(VEHICLE).then((vehicle) => {
    AosSDK.injectGallery('root', vehicle.getLargeImages(), vehicle.getMediumImages(),  vehicle.getSmallImages(), vehicle.getTags(), vehicle.getGalleryOptions(), startIndex);
  }).catch((error) => {
    console.log(error);
  });

  // Fullscreen Gallery
  document.getElementById('fullscreenBtn').onclick = function(){
    AosSDK.fullscreenGallery('root');
  }
  // To Exit Fullscreen Gallery
  // AosSDK.exitFullscreenGallery('root');

Example 11: Get Image Gallery Set

Get Image Gallery Set

  <div style="text-align: center" class="m-1" >
    <button id="fullscreenBtn" class="btn btn-outline-secondary">Full Screen</button>
  </div>
  <div id="root" class="m-1" ></div>

  var TOKEN = "17b3353bb1892c02e3646296d6a3486e4f792ea5";
  var VEHICLE = "GX66YCR1";
  var startIndex = 0; // Start index of slider show, default is 0

  const library = new AosSDK.Library(TOKEN);

  library.vehicle(VEHICLE).then((vehicle) => {
    AosSDK.injectGallerySet('root', vehicle.getImageSet(), vehicle.getTagSet(), vehicle.getGalleryOptions(), startIndex);
  }).catch((error) => {
    console.log(error);
  });

  // Fullscreen Gallery
  document.getElementById('fullscreenBtn').onclick = function(){
    AosSDK.fullscreenGallery('root');
  }
  // To Exit Fullscreen Gallery
  // AosSDK.exitFullscreenGallery('root');

Example 12: Get Image Gallery Set With Tag Icon Customization

Get Image Gallery Set With Tag Icon Customization

  <div style="text-align: center" class="m-1" >
    <button id="fullscreenBtn" class="btn btn-outline-secondary">Full Screen</button>
  </div>
  <div id="root" class="m-1" ></div>

  var TOKEN = "17b3353bb1892c02e3646296d6a3486e4f792ea5";
  var VEHICLE = "GX66YCR1";
  var startIndex = 0; // Start index of slider show, default is 0

  const library = new AosSDK.Library(TOKEN);

  library.vehicle(VEHICLE).then((vehicle) => {
    const customOptions = {"tag": {"damageIcon": "http://eu.cdn.autosonshow.tv/images/hazard.png", "featureColor": "green"}};
    AosSDK.injectGallerySet('root', vehicle.getImageSet(), vehicle.getTagSet(), vehicle.getGalleryOptions(), startIndex, customOptions);
  }).catch((error) => {
    console.log(error);
  });

  // Fullscreen Gallery
  document.getElementById('fullscreenBtn').onclick = function(){
    AosSDK.fullscreenGallery('root');
  }
  // To Exit Fullscreen Gallery
  // AosSDK.exitFullscreenGallery('root');


  // To add Custom color or icon image for tag:

  // 1) To change color:
  // const customOptions = {"tag": {"featureColor": "#00ff00", "damageColor": "red"}}

  // 2) To change icon image:
  // const customOptions = {"tag": {"featureIcon": "http://eu.cdn.autosonshow.tv/images/target.png", "damageIcon": "http://eu.cdn.autosonshow.tv/images/hazard.png"}}

Example 13: Get Image Gallery Primary Slider

Get Image Gallery Primary Slider

  <div style="text-align: center" class="m-1" >
    <button id="fullscreenBtn" class="btn btn-outline-secondary">Full Screen</button>
  </div>
  <div id="root" class="m-1" ></div>

  var TOKEN = "17b3353bb1892c02e3646296d6a3486e4f792ea5";
  var VEHICLE = "GX66YCR1";

  const library = new AosSDK.Library(TOKEN);

  library.vehicle(VEHICLE).then((vehicle) => {
    AosSDK.injectPrimarySlider('root', vehicle.getLargeImages(), vehicle.getMediumImages(), vehicle.getTags(), vehicle.getGalleryOptions());
  }).catch((error) => {
    console.log(error);
  });

  // Fullscreen Gallery
  document.getElementById('fullscreenBtn').onclick = function(){
    AosSDK.fullscreenGallery('root');
  }
  // To Exit Fullscreen Gallery
  // AosSDK.exitFullscreenGallery('root');

Example 14: Get Image Gallery Secondary Slider

Get Image Gallery Secondary Slider

  <div id="root" class="m-1" ></div>

  var TOKEN = "17b3353bb1892c02e3646296d6a3486e4f792ea5";
  var VEHICLE = "GX66YCR1";

  const library = new AosSDK.Library(TOKEN);
  library.vehicle(VEHICLE).then((vehicle) => {
    AosSDK.injectSecondarySlider('root', vehicle.getLargeImages(), vehicle.getSmallImages(), vehicle.getTags(), vehicle.getGalleryOptions());
  }).catch((error) => {
    console.log(error);
  });

Example 15: Get Video Player

Get Video Player

  <div style="text-align: center" class="m-1" >
    <button id="fullscreenBtn" class="btn btn-outline-secondary">Full Screen</button>
  </div>
  <div id="root" class="m-1"></div>

  var TOKEN = "17b3353bb1892c02e3646296d6a3486e4f792ea5";
  var VEHICLE = "GX66YCR1";

  const library = new AosSDK.Library(TOKEN);
  library.vehicle(VEHICLE).then((vehicle) => {
    AosSDK.injectVideo('root', vehicle.getVideoPlaylist(), vehicle.getPoster(), vehicle.getVideoOptions());
  }).catch((error) => {
    console.log(error);
  });

  // Fullscreen Video Player
  document.getElementById('fullscreenBtn').onclick = function(){
    AosSDK.fullscreenVideo('root');
  }
  // To Exit Fullscreen Video Player
  // AosSDK.exitFullscreenVideo('root');

Example 16: Get Spinner

Get Spinner

  <div style="text-align: center" class="m-1" >
    <button id="fullscreenBtn" class="btn btn-outline-secondary">Full Screen</button>
  </div>
  <div id="root" class="m-1"></div>

  var TOKEN = "17b3353bb1892c02e3646296d6a3486e4f792ea5";
  var VEHICLE = "GX66YCR1";

  const library = new AosSDK.Library(TOKEN);
  library.vehicle(VEHICLE).then((vehicle) => {
    AosSDK.injectSpinner('root', vehicle.getAllThreeSixtyImages(), vehicle.getSpinnerOptions());
  }).catch((error) => {
    console.log(error);
  });

  // Fullscreen Spinner
  document.getElementById('fullscreenBtn').onclick = function(){
    AosSDK.fullscreenSpinner('root');
  }
  // To Exit Fullscreen Spinner
  // AosSDK.exitFullscreenSpinner('root');

Example 17: Get Panorama

Get Panorama

  <div style="text-align: center" class="m-1" >
    <button id="fullscreenBtn" class="btn btn-outline-secondary">Full Screen</button>
  </div>
  <div id="root" class="m-1" style="min-height:400px;width:99%;"></div>

  var TOKEN = "17b3353bb1892c02e3646296d6a3486e4f792ea5";
  var VEHICLE = "GX66YCR1";

  const library = new AosSDK.Library(TOKEN);
  library.vehicle(VEHICLE).then((vehicle) => {
    AosSDK.injectPanorama('root', vehicle.getInternalPanorama(), vehicle.getPanoramaOptions());
  }).catch((error) => {
    console.log(error);
  });

  // Fullscreen Panorama
  document.getElementById('fullscreenBtn').onclick = function(){
    AosSDK.fullscreenPanorama('root');
  }
  // To Exit Fullscreen Panorama
  // AosSDK.exitFullscreenPanorama('root');

Example 18: Get Personal Video

Get Personal Video

  <div id="root" class="m-1" ></div>

  var TOKEN = "17b3353bb1892c02e3646296d6a3486e4f792ea5";
  var VEHICLE = "GX66YCR1";

  const library = new AosSDK.Library(TOKEN);
  library.vehicle(VEHICLE).then((vehicle) => {
    AosSDK.injectPersonalVideoForm('root', vehicle.getPersonalVideoForm(), vehicle.getLibraryId(), VEHICLE);
  }).catch((error) => {
    console.log(error);
  });

SDK Quickstart

Step 1: Linking to the SDK

Step 1: Linking to the SDK

Step 2: Accessing a Library

Step 3: Inspecting a Library

Example 1: Investigate a Vehicle

Example 2: Get all thumbnails for a vehicle

Example 3: Get all large images for a vehicle

Example 4: Get Poster Image

Example 5: Play a vehicle video

Example 6: Tags

Example 7: Tag Set

Example 8: Get Panorama Image

Example 9: Get Spinner Images

Example 10: Get Image Gallery

Example 11: Get Image Gallery Set

Example 12: Get Image Gallery Set With Tag Icon Customization

Example 13: Get Image Gallery Primary Slider

Example 14: Get Image Gallery Secondary Slider

Example 15: Get Video Player

Example 16: Get Spinner

Example 17: Get Panorama

Example 18: Get Personal Video