DocumentaçãoGuia de referência de visualizadores do Dynamic Media

Tutorial do visualizador do SDK viewer-sdk-tutorial

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • undefined
  • undefined

O SDK do visualizador fornece um conjunto de componentes baseados em JavaScript para o desenvolvimento de visualizadores personalizados. Os visualizadores são aplicativos baseados na Web que permitem que o conteúdo de mídia avançada veiculado pelo Adobe Dynamic Media seja incorporado a páginas da Web.

Por exemplo, o SDK fornece zoom e panorama interativos. Ele também fornece visualização e reprodução de vídeo de 360° dos ativos que foram carregados para o Adobe Dynamic Media por meio do aplicativo de back-end chamado Dynamic Media Classic.

Embora os componentes dependam da funcionalidade do HTML5, eles foram projetados para funcionar em dispositivos e desktops Android™ e Apple iOS, incluindo o Internet Explorer e versões posteriores. Esse tipo de experiência significa que você pode fornecer um único fluxo de trabalho para todas as plataformas compatíveis.

O SDK consiste em componentes de interface do usuário que compõem o conteúdo do visualizador. É possível estilizar esses componentes por meio de CSS e componentes que não sejam de interface do usuário que tenham algum tipo de função de suporte, como busca e análise de definição de conjunto ou rastreamento. Todos os comportamentos de componentes são personalizáveis por meio de modificadores que podem ser especificados de várias maneiras, por exemplo, como pares de name=value na URL.

Este tutorial inclui a seguinte ordem de tarefas para ajudar você a criar um visualizador de zoom básico:

Baixe o SDK do visualizador mais recente da Adobe Developer Connection section-84dc74c9d8e24a2380b6cf8fc28d7127

  1. Baixe o SDK do Visualizador mais recente da Adobe Developer Connection .

    note note
    NOTE
    Você pode concluir este tutorial sem a necessidade de baixar o pacote do Visualizador SDK, pois o SDK é carregado remotamente. No entanto, o pacote do Visualizador inclui exemplos adicionais e um guia de referência de API que pode ajudar você a criar seus próprios visualizadores.

Carregar o SDK do visualizador section-98596c276faf4cf79ccf558a9f4432c6

  1. Comece configurando uma nova página para desenvolver o visualizador básico de zoom que você vai criar.

    Considere essa página atualizada como o código do Bootstrap ou carregador usado para configurar um aplicativo SDK vazio. Abra seu editor de texto favorito e cole a seguinte marcação HTML nele:

    code language-html 
    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="user-scalable=no, height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

        <!-- Hiding the Safari on iPhone OS UI components -->
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
        <meta name="apple-touch-fullscreen" content="no"/>

        <title>Custom Viewer</title>

        <!--
            Include Utils.js before you use any of the SDK components. This file
            contains SDK utilities and global functions that are used to initialize the viewer and load viewer
            components. The path to the Utils.js determines which version of the SDK that the viewer uses. You
            can use a relative path if the viewer is deployed on one of the Adobe Dynamic Media servers and it is served
            from the same domain. Otherwise, specify a full path to one of Adobe Dynamic Media servers that have the SDK
            installed.
        -->
        <script language="javascript" type="text/javascript"
                src="http://s7d1.scene7.com/s7sdk/2.8/js/s7sdk/utils/Utils.js"></script>

    </head>
    <body>
        <script language="javascript" type="text/javascript">
        </script>
    </body>
</html>

    Adicione o seguinte código JavaScript dentro da tag script para que ele inicialize o ParameterManager. Isso ajuda você a se preparar para criar e instanciar componentes do SDK dentro da função initViewer:

    code language-javascript 
    /* We create a self-running anonymous function to encapsulate variable scope. Placing code inside such
   a function is optional, but this prevents variables from polluting the global object.  */
(function () {

    // Initialize the SDK
    s7sdk.Util.init();

    /* Create an instance of the ParameterManager component to collect components' configuration
       that can come from a viewer preset, URL, or the HTML page itself. The ParameterManager
       component also sends a notification s7sdk.Event.SDK_READY when all needed files are loaded
       and the configuration parameters are processed. The other components should never be initialized
       outside this handler. After defining the handler for the s7sdk.Event.SDK_READY event, it
       is safe to initiate configuration initialization by calling ParameterManager.init(). */
    var params = new s7sdk.ParameterManager();

    /* Event handler for s7sdk.Event.SDK_READY dispatched by ParameterManager to initialize various components of
       this viewer. */
    function initViewer() {

    }

    /* Add event handler for the s7sdk.Event.SDK_READY event dispatched by the ParameterManager when all modifiers
       are processed and it is safe to initialize the viewer. */
    params.addEventListener(s7sdk.Event.SDK_READY, initViewer, false);

    /* Initiate configuration initialization of ParameterManager. */
    params.init();

}());

  2. Salve o arquivo como um modelo vazio. Você pode usar qualquer nome de arquivo desejado.

    Você pode usar esse arquivo de modelo vazio como uma referência ao criar visualizadores no futuro. Esse template funciona localmente e quando veiculado a partir de um servidor Web.

Agora adicione o estilo ao visualizador.

Adicionar estilo ao visualizador section-3783125360a1425eae5a5a334867cc32

  1. Para esse visualizador de página completo que você está criando, é possível adicionar alguns estilos básicos.

    Adicionar o seguinte bloco style à parte inferior do head:

    code language-html 
    <style>
    html, body {
        width: 100%;
        height: 100%;
    }
    body {
        /* Remove any padding and margin around the edges of the browser window */
        padding: 0;
        margin: 0;

        /* We set overflow to hidden so that scroll bars do not flicker when resizing the window */
        overflow: hidden;
    }
</style>

Agora inclua os componentes Container e ZoomView.

Incluindo Container e ZoomView section-1a01730663154a508b88cc40c6f35539

  1. Crie um visualizador real incluindo os componentes Container e ZoomView.

    Insira as seguintes instruções include na parte inferior do elemento <head>, depois que o script Utils.js for carregado:

    code language-javascript 
    <!--
    Add an "include" statement with a related module for each component that is needed for that particular
    viewer. Check API documentation to see a complete list of components and their modules.
-->
<script language="javascript" type="text/javascript">
    s7sdk.Util.lib.include('s7sdk.common.Container');
    s7sdk.Util.lib.include('s7sdk.image.ZoomView');
</script>

  2. Agora crie variáveis para fazer referência aos vários componentes do SDK.

    Adicione as seguintes variáveis na parte superior da função anônima principal, logo acima de s7sdk.Util.init():

    code language-javascript 
    var container, zoomView;

  3. Insira o seguinte dentro da função initViewer para que você possa definir alguns modificadores e instanciar os respectivos componentes:

    code language-javascript 
    /* Modifiers can be added directly to ParameterManager instance */
params.push("serverurl", "http://s7d1.scene7.com/is/image");
params.push("asset", "Scene7SharedAssets/ImageSet-Views-Sample");

/* Create a viewer container as a parent component for other user interface components that
   are part of the viewer application and associate event handlers for resize and
   full-screen notification. The advantage of using Container as the parent is the
   component's ability to resize and bring itself and its children to full-screen. */
container = new s7sdk.common.Container(null, params, "s7container");
container.addEventListener(s7sdk.event.ResizeEvent.COMPONENT_RESIZE, containerResize, false);

/* Create ZoomView component */
zoomView = new s7sdk.image.ZoomView("s7container", params, "myZoomView");

/* We call this to ensure all SDK components are scaled to initial conditions when viewer loads */
resizeViewer(container.getWidth(), container.getHeight());

  4. Para que o código acima seja executado corretamente, adicione um manipulador de eventos containerResize e uma função auxiliar:

    code language-javascript 
    /* Event handler for s7sdk.event.ResizeEvent.COMPONENT_RESIZE events dispatched by Container to resize
   various view components included in this viewer. */
function containerResize(event) {
    resizeViewer(event.s7event.w, event.s7event.h);
}

/* Resize viewer components */
function resizeViewer(width, height) {
    zoomView.resize(width, height);
}

  5. Visualize a página para que você possa ver o que criou. Sua página deve ser semelhante ao seguinte:

    Exemplo de uma imagem do visualizador

Agora adicione os componentes MediaSet e Swatches ao seu visualizador.

Adição dos componentes MediaSet e Amostras ao visualizador section-02b8c21dd842400e83eae2a48ec265b7

  1. Para conceder aos usuários a capacidade de selecionar imagens de um conjunto, você pode adicionar os componentes MediaSet e Swatches.

    Adicione os seguintes inclusões de SDK:

    code language-javascript 
    s7sdk.Util.lib.include('s7sdk.set.MediaSet');
s7sdk.Util.lib.include('s7sdk.set.Swatches');

  2. Atualize a lista de variáveis com o seguinte:

    code language-javascript 
    var mediaSet, container, zoomView, swatches;

  3. Instanciar componentes MediaSet e Swatches dentro da função initViewer.

    Certifique-se de instanciar a instância Swatches depois dos componentes ZoomView e Container. Caso contrário, a ordem de empilhamento oculta o Swatches:

    code language-javascript 
    // Create MediaSet to manage assets and add event listener to the NOTF_SET_PARSED event
mediaSet = new s7sdk.set.MediaSet(null, params, "mediaSet");

// Add MediaSet event listener
mediaSet.addEventListener(s7sdk.event.AssetEvent.NOTF_SET_PARSED, onSetParsed, false);

/* create Swatches component and associate event handler for swatch selection notification */
swatches = new s7sdk.set.Swatches("s7container", params, "mySwatches");
swatches.addEventListener(s7sdk.event.AssetEvent.SWATCH_SELECTED_EVENT, swatchSelected, false);

  4. Agora adicione as seguintes funções de manipulador de eventos:

    code language-javascript 
    /* Event handler for the s7sdk.event.AssetEvent.NOTF_SET_PARSED event dispatched by MediaSet to
   assign the asset to the Swatches when parsing is complete. */
function onSetParsed(e) {

    // set media set for Swatches to display
    var mediasetDesc = e.s7event.asset;
    swatches.setMediaSet(mediasetDesc);

    // select the first swatch by default
    swatches.selectSwatch(0, true);
}

/* Event handler for s7sdk.event.AssetEvent.SWATCH_SELECTED_EVENT events dispatched by Swatches to switch
   the image in the ZoomView when a different swatch is selected. */
function swatchSelected(event) {
    zoomView.setItem(event.s7event.asset);
}

  5. Posicione as amostras na parte inferior do visualizador adicionando o seguinte CSS ao elemento style:

    code language-css 
    /* Align swatches to bottom of viewer */
.s7swatches {
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
}

  6. Visualize seu visualizador.

    Observe que as amostras estão no canto inferior esquerdo do visualizador. Para que as amostras tenham toda a largura do visualizador, adicione uma chamada para redimensionar manualmente as amostras sempre que o usuário redimensionar o navegador. Adicione o seguinte à função resizeViewer:

    code language-javascript 
    swatches.resize(width, swatches.getHeight());

    Agora o visualizador se parece com a imagem a seguir. Tente redimensionar a janela do navegador do visualizador e observe o comportamento resultante.

    Exemplo de duas imagens do visualizador

Agora, adicione os botões de ampliar, reduzir e redefinir o zoom ao visualizador.

Adição de botões ao visualizador section-1fc334fa0d2b47eb9cdad461725c07be

  1. Atualmente, o usuário só pode aplicar zoom usando gestos de clique ou toque. Portanto, adicione alguns botões básicos de controle de zoom ao visualizador.

    Adicione os seguintes componentes de botão:

    code language-css 
    s7sdk.Util.lib.include('s7sdk.common.Button');

  2. Atualize a lista de variáveis com o seguinte:

    code language-javascript 
    var mediaSet, container, zoomView, swatches, zoomInButton, zoomOutButton, zoomResetButton;

  3. Instanciar Botões na parte inferior da função initViewer.

    Lembre-se de que a ordem é importante, a menos que você especifique o z-index em CSS:

    code language-css 
    /* Create Zoom In, Zoom Out and Zoom Reset buttons */
zoomInButton  = new s7sdk.common.ZoomInButton("s7container", params, "zoomInBtn");
zoomOutButton = new s7sdk.common.ZoomOutButton("s7container", params, "zoomOutBtn");
zoomResetButton = new s7sdk.common.ZoomResetButton("s7container", params, "zoomResetBtn");

/* Add handlers for zoom in, zoom out and zoom reset buttons inline. */
zoomInButton.addEventListener("click", function() { zoomView.zoomIn(); });
zoomOutButton.addEventListener("click", function() { zoomView.zoomOut(); });
zoomResetButton.addEventListener("click", function() { zoomView.zoomReset(); });

  4. Agora defina alguns estilos básicos para os botões adicionando o seguinte ao bloco style na parte superior do arquivo:

    code language-css 
    /* define styles common to all button components and their sub-classes */
.s7button {
    position:absolute;
    width: 28px;
    height: 28px;
    z-index:100;
}

/* position individual buttons*/
.s7zoominbutton  {
    top: 50px;
    left: 50px;
 }
.s7zoomoutbutton  {
    top: 50px;
    left: 80px;
 }
.s7zoomresetbutton  {
    top: 50px;
    left: 110px;
 }

  5. Visualize seu visualizador. Ela deve ser semelhante ao seguinte:

    Exemplo de visualizador três imagens

    Agora, configure as Amostras para que elas sejam alinhadas verticalmente à direita.

Configuração das amostras verticalmente section-91a8829d5b5a4d45a35b7faeb097fcc9

  1. Você pode configurar modificadores diretamente na instância ParameterManager.

    Adicione o seguinte à parte superior da função initViewer para que você possa configurar o layout de miniatura Swatches como uma única linha:

    code language-javascript 
    params.push("Swatches.tmblayout", "1,0");

  2. Atualizar a seguinte chamada de redimensionamento dentro de resizeViewer:

    code language-javascript 
    swatches.resize(swatches.getWidth(), height);

  3. Editar a seguinte regra s7swatches em ZoomViewer.css:

    code language-css 
    .s7swatches {
    top:0 ;
    bottom: 0;
    right: 0;
    width: 150px;
}

  4. Visualize seu visualizador. Ele tem a seguinte aparência:

    Exemplo de quatro imagens do visualizador

    O visualizador básico de zoom está concluído.

    Este tutorial do visualizador aborda os fundamentos do que o SDK do visualizador do Dynamic Media oferece. Ao trabalhar com o SDK, você pode usar os vários componentes padrão para criar e estilizar facilmente experiências de visualização avançadas para os públicos-alvo.

recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8