Personalizando estilo de hotspot no Marzipano

Softwares disponíveis para publicar na internet, visualização no computador, formatos e conversão para impressão, papéis, tamanhos e tudo afim.
Avatar do usuário
cartola
Site Admin
Mensagens: 1223
Registrado em: 11 Mai 2012, 12:40
Localização: Rio de Janeiro
Contato:

Personalizando estilo de hotspot no Marzipano

Mensagem por cartola » 06 Mar 2020, 12:21

Oi pessoal,

ontem consegui personalizar um hotspot no Marzipano usando um dos modelos mostrados num dos demos do site. Quando a gente olha um daqueles demos temos a impressão de que deve ser simples usá-los na ferramenta, mas não foi tão simples assim. Por conta disso e de não ter achado referência sobre isso venho aqui compartilhar no fórum, documentando o tema pra posteridade.

O Marzipano tem um fórum de discussão por email no google groups. Lá eu só achei pessoas perguntando como fazer o que eu queria, não encontrei respostas.

O que eu queria

Eu queria pegar um dos hotspots bacanas desse demo, mais especificamente o que o texto vem meio que girando quando colocamos o mouse sobre a bola branca. É um texto grande que inicia com "The Ash Room is the area". Está sobre a saída da fornalha logo na visão inicial da foto.

Naturalmente esses hotspots não estão disponíveis para inclusão na interface web, que facilita a criação da visita virtual. Então meu objetivo foi criar a visita virtual de modo facilitado, via web, baixar essa visita e inserir na mão (editando os arquivos) o hotspot que eu queria. O código dos hotspots está disponível no link ao lado do demo: "View Source".

O que não funciona

Primeiro eu tentei pegar o código HTML do index.html do demo. No demo, o hotspot está configurado nesse arquivo, mas não basta copiar de lá e colocar no index.html da visita virtual baixada. Depois, lendo umas mensagens do fórum que citei, vi que os hotspots são incluídos de forma diferente em cada um desses casos. O colega mencionou que seria necessário algum trabalho de programação pra conseguir fazer a coisa, então parti pra isso.

O contexto da mudança

Tanto a visita virtual gerada pelo "Marzipano tool" quanto o código do demo se baseiam em três linguagens para gerar tudo o que vemos ali: HTML, CSS e Javascript. Pela olhada inicial que dei no código decidi pegar o demo e converter para a forma como foi feita a inclusão de hotspots na visita virtual.

No código do demo, o hotspot que escolhi se chama textInfo e está nos arquivos index.html, css/textInfo.css e js/textInfo.js sendo que esses arquivos guardam respectivamente o HTML, o CSS e o Javascript pra inclusão do hotspot.

Mudança no CSS

A primeira mudança foi transformar o ID usado no DIV textInfo em uma classe. ID só pode ser usado para um elemento numa página web e se quisermos usar mais de um hotspot de um mesmo tipo isso será um impedimento. Classes já podem ser usadas por quantos elementos você quiser. Pra fazer essa mudança tem que alterar o arquivo css/textInfo.css trocando todas as ocorrências de "#textInfo" por ".textInfo".

Depois resolvi também trocar os nomes das outras classes, assim não corre o risco de uma classe desse hotspot já existir nas classes definidas na visita virtual baixada. Então, no mesmo arquivo, alterei assim:
  • Classe hotspot - troquei por style1
  • Classe out - troquei por style1-out
  • Classe in - troquei por style1-in
  • Classe tooltip-content - troquei por style1-content
Só é bom ter cuidado ao substituir esses textos no arquivo, pois, por exemplo, "out" aparece em lugares em que não é uma referência à classe. Mais seguro é procurar com o ponto na frente, que é a maneira de especificar uma classe. Por exemplo: ".out" trocar por ".style1-out"

Provavelmente é possível colocar todo o conteúdo desse arquivo css/textInfo.css dentro do arquivo global de CSS que veio na visita baixada, mas não fiz isso.

Mudança nos dados do Javascript

O Javascript da visita baixada trabalha com dados em um arquivo e as funções (a programação propriamente dita) em outro. São os arquivos data.js e index.js respectivamente. Olhando o data.js dá pra ver que criaram umas variáveis pra definir os hotspots e que tem uma pros hotspots de link e outra pros hotspots de informação, então criei mais uma pro meu novo hotspot. Abaixo mostro o trecho original:

Código: Selecionar todos

      "infoHotspots": [
        {
          "yaw": 1.4620111882992912,
          "pitch": 0.11953441234971507,
          "title": "<div>Recepcionista</div>",
          "text": "Angela"
        }
      ]
E agora segue o trecho alterado. Inseri minha nova variável no final do trecho. Note a vírgula colocada após o último colchete do trecho original, ela é importante pra separar as variáveis.

Código: Selecionar todos

      "infoHotspots": [
        {
          "yaw": 1.4620111882992912,
          "pitch": 0.11953441234971507,
          "title": "<div>Informação</div>",
          "text": "Conteúdo"
        }
      ],
      "styleHotspots": [
        {
          "yaw": 2.4620111882992912,
          "pitch": 0,
          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis tortor non fermentum bibendum. Pellentesque nec dui eu metus tempus elementum eget quis leo."
        }
      ]
Os valores de "yaw" e "pitch" naturalmente vão posicionar o hotspot no panorama da cena. Alias, é importante notar que no arquivo data.js eles definem essas variáveis para cada cena, então tem que localizar em qual cena você quer o hotspot. Por essa mesma questão é importante colocar a variável vazia nas demais cenas, pois a programação não está preparada pra lidar com a inexistência da variável. Abaixo um trecho de outra cena com a variável vazia.

Código: Selecionar todos

      "infoHotspots": [
        {
          "yaw": 1.5,
          "pitch": 0.7,
          "title": "<div>Bla bla bla</div>",
          "text": "Texto"
        }
      ],
      "styleHotspots": []
Mudança na programação do Javascript

No arquivo index.js criei uma nova função usando como modelo a função que criava os hotspots de informação na visita baixada. Pra criar essa função basta colocar o código abaixo no arquivo.

Código: Selecionar todos

  function createStyleHotspotElement(hotspot) {

    // Create textInfo global element
    var textInfo = document.createElement('div');
    textInfo.classList.add('textInfo');

    // Create style1 div
    var style1Div = document.createElement('div');
    style1Div.classList.add('style1');

    // Create style1-out div
    var style1out = document.createElement('div');
    style1out.classList.add('style1-out');

    // Create style1-in div
    var style1in = document.createElement('div');
    style1in.classList.add('style1-in');

    // Create style1-content div
    var style1content = document.createElement('div');
    style1content.classList.add('style1-content');

    // Create text element
    var style1paragraph = document.createElement('p');
    var style1text = document.createTextNode(hotspot.text);

    // Create the element hierarchy
    style1paragraph.appendChild(style1text);
    style1content.appendChild(style1paragraph);
   
    style1Div.appendChild(style1in);
    style1Div.appendChild(style1out);
   
    textInfo.appendChild(style1Div);
    textInfo.appendChild(style1content);
   
    return textInfo;
  }
Mudança no HTML
Pra finalizar foi necessário apenas fazer o HTML carregar o CSS modificado. Pra isso bastou copiar a linha que fazia isso do index.html do demo. É a linha abaixo, que coloquei no final do arquivo, antes do TAG </body>, que fecha o corpo da página HTML.

Código: Selecionar todos

<link rel="stylesheet" href="css/textInfo.css">
Acho que isso é tudo. Espero que seja proveitoso pra alguém algum dia :).

Abraços, Cartola.

Responder