<< Voltar Índice Próxima >>

PRIMEIRA PÁGINA E ADICIONAR O PONTEIRO DO MOUSE

Primeira Página

Antes de mais nada devemos criar a página HTML que iremos utilizar na nossa interface. Abra um editor de sua preferência, por exemplo o Bloco de Notas(Notepad) ou o Dreamweaver e coloque o seguinte texto. 

<html>
<body>
<p>Hello world!</p>
</body>
</html>

 

A página acima é bastante simples, ela apenas irá mostrar o texto "Hello World!". Todo o conteúdo que iremos utilizar na Navi, como páginas HTML e imagens, deve ser colocado em uma pasta. Nos tutoriais a pasta está localizada em OgreSDK\media\MediaNavi, Esse diretório também deve ser adicionado ao arquivo "resources.cfg". Dessa forma salve a página HTML acima nesse diretório, com o nome "helloworld.html".

No arquivo "AplicationListener.h" devemos adicionar os includes que serão utilizados pela Navi que estão listados abaixo: 

#include "Navi.h"
#include "NaviUtilities.h"
#include "NaviManager.h"

using namespace NaviLibrary;

 

Adicione também using namespace NaviLibrary; para evitarmos a repetição da referência "NaviLibrary::" durante o código. 

//navi
NaviManager* naviMgr;
NaviMouse* mouse;
NaviCursor* defaultCursor;
NaviCursor* moveCursor;
Navi* buttonNavi;

 

Ainda no arquivo "AplicationListener.h" declare as váriaveis acima. A "naviMgr" é o gerenciador da Navi, para que possamos utiliza-la. A variável "mouse" cuidará do ponteiro do mouse, sendo que "defaultCursor" tratará dos frames padrões da animação do mouse e "moveCursor" dos frames do ponteiro do mouse em movimento. 

naviMgr = new NaviManager(window,"..\\..\\media\\MediaNavi");

naviMgr->createNavi("naviTeste", "local://helloworld.html", NaviPosition(Center), 150, 150, 0);

 

Indo para o arquivo "AplicationListener.cpp", adicione também a linha using namespace NaviLibrary;. Indo para o construtor da classe AplicationListener adicione o código acima. Inicializamos a variável "naviMgr" onde o primeiro parâmetro é a janela que estamos utilizando na Ogre. O segundo parâmetro é o diretório onde esta o conteúdo usado pela Navi.

A função "createNavi()" cria uma janela dentro da Ogre em que aparecerá uma página HTML. O nome dessa janela é definido no primeiro parâmetro da função, esse nome deve ser único, e posteriormente usado para acessar a janela. O segundo é a página HTML que será exibida, uma página comum da web deve-se passar o endereço completo, por exemplo, "http://www.irados.org". O terceiro é a posição relativa em relação a janela da Ogre, no exemplo, ela ficará no centro(Center), existem outras posições como TopRight e BottomLeft, utilize a complementação do código para ver as demais.

O quarto parâmentro é a largura e o quinto a altura, sendo que estes valores não devem ser menores que o conteúdo da página HTML. Se ela contiver uma figura de dimensões 400x300, as dimensões da janela da Navi não devem maiores que o da imagem, ou a janela será exibida distorcida. O sexto é a ordem de sobreposição das janelas, da mesma forma como nos viewports, a janela da posição -1 ficará coberta pela da posição 0(zero), caso as duas sejam colocadas uma sobre a outra. 

naviMgr->Update();

 

Afim de que a Navi seja atualizada na tela, deve-se acrescentar a função "Update()" no loop principal do programa, ou seja, no método "frameStarted()". Execute o projeto, deverá aparecer algo como na figura abaixo:

Adicionar o Ponteiro do Mouse

O ponteiro do mouse pode ser customizado facilmente com o uso de imagens. As que serão utilizadas no tutorial, são as mesmas no exemplo que vem juntamente com a Navi, dessa forma, copie o conteúdo da pasta \OgreSDK\NaviLibrary\NaviDemo\Bin\Media para o diretório a qual estamos colocando as páginas HTML(OgreSDK\media\MediaNavi). 

// Começa e configura o mouse
mouse = new NaviMouse(64,64);

 

Inicializamos o ponteiro mouse passando como parâmetros as suas dimensões. 

//define as imagens da animação padrão do mouse
defaultCursor = mouse->createCursor("fadingCursor", 3, 2);
defaultCursor->addFrame(1200, "cursor1.png")->addFrame(100, "cursor2.png")->
    addFrame(100, "cursor3.png")->addFrame(100, "cursor4.png");
defaultCursor->addFrame(100, "cursor5.png")->addFrame(100, "cursor6.png")->
    addFrame(100, "cursor5.png")->addFrame(100, "cursor4.png");
defaultCursor->addFrame(100, "cursor3.png")->addFrame(100, "cursor2.png");
mouse->setDefaultCursor("fadingCursor");

 

Logo após inicializamos a variável que cuidará da animação da imagem padrão do ponteiro através da função "createCursor()". Onde o primeiro parâmetro é o nome atribuido a ele, o segundo e terceiro parâmetros são as posições X e Y respectivamente na tela, em que o ponteiro irá aparecer inicialmente.

Para adicionarmos os frames para compor a animação do ponteiro, usa-se o método "addFrame()", em que o primeiro parâmetro é o tempo em milisegundos de duração da imagem do segundo parâmetro. Pode-se adicionar quantas imagens e quadros se queira, o loop é feito automaticamente. E com a função "setDefaultCursor()" defini-se o cursor que será o padrão, onde o nome do cursor é passado como parâmetro. 

//define a imagem do mouse em movimento
moveCursor = mouse->createCursor("move", 19, 19);
moveCursor->addFrame(0, "cursorMove.png");

 

O trecho de código acima cria o ponteiro do mouse que aparecerá quando clicarmos com o botão direito do mouse e arrastarmos algum objeto da Navi na tela. É adicionado apenas um frame que é a imagem em si. 

bool AplicationListener::mouseMoved( const OIS::MouseEvent &e ){
  if(e.state.Z.rel != 0)
    naviMgr->injectMouseWheel(e.state.Z.rel);

  return naviMgr->injectMouseMove(e.state.X.abs, e.state.Y.abs);
}

bool AplicationListener::mousePressed( const OIS::MouseEvent &e, OIS::MouseButtonID id )
{
    return naviMgr->injectMouseDown(id);
}

bool AplicationListener::mouseReleased( const OIS::MouseEvent &e, OIS::MouseButtonID id )
{
    return naviMgr->injectMouseUp(id);
}

 

Afim de que a Navi possa obter as informações de entrada do mouse, é necessario adicionar alguns elementos aos métodos acima. Observe que muda-se na maioria deles apenas o valor de retorno do método, sendo que em "mouseMoved()" no trecho acima também mostra como a Navi consegue as informações de movimento da "rodinha" do meio do mouse. Execute e veja como está o programa agora.

Italo Mendes
italo.ribeiro@gmail.com

<< Voltar Índice Próxima >>