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
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"
}
]
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."
}
]
Código: Selecionar todos
"infoHotspots": [
{
"yaw": 1.5,
"pitch": 0.7,
"title": "<div>Bla bla bla</div>",
"text": "Texto"
}
],
"styleHotspots": []
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;
}
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">

Abraços, Cartola.