BluePlant - Como acessar as telas HTML5 do BluePlant a partir de dispositivos móveis

Neste tutorial estão descritas orientações e procedimentos para acessar as telas de HTML5 do BluePlant a partir de dispositivos móveis.

Componentes

Software:  BluePlant 9.1

Seções do Tutorial

1.  ARQUITETURA 

2.  CRIANDO TELAS E OBJETOS NO FORMATO HTML5

3.  SELECIONANDO NOSSO DISPLAY COMO PRINCIPAL

4.  INICIANDO A APLICAÇÃO

5.  ACESSANDO REMOTAMENTE

6.  TESTANDO A APLICAÇÃO

1. ARQUITETURA

Na arquitetura deste tutorial, conectou-se o BluePlant a rede com o endereço na mesma faixa de IP dos equipamentos a serem conectados.

2. CRIANDO TELAS E OBJETOS NO FORMATO HTML5

Para criar novas telas que possam ser acessadas pelo celular o usuário deve clicar no botão superior “Create New Display”.

Na tela seguinte o usuário deve escolher um nome para a tela e marcar a opção “HTML5 Client”.

Com o novo display devidamente criado o usuário pode agora adicionar seus objetos e símbolos normalmente.

Neste tutorial foi adicionado à tela um símbolo do tipo “Blower” diretamente da biblioteca de símbolos do BluePlant.

Por meio de um duplo clique no soprador podemos acessar suas propriedades. No parâmetro “State” foi vinculado uma tag interna de simulação do BluePlant.

3. SELECIONANDO NOSSO DISPLAY COMO PRINCIPAL

A fim de que o nosso display “MinhaTela” seja a tela HTML5 principal do projeto, dessa forma sendo aberta no momento de inicialização devemos realizar a seguinte configuração:

I. Acessar o menu “Editar”

II. Telas

III. Layouts

Devemos substituir o display padrão “HTML5_MainPage” pelo nosso próprio display “MinhaTela”

4. INICIANDO A APLICAÇÃO

Com o projeto desenvolvido deve-se iniciar a aplicação, para isso devemos realizar os seguintes passos:

I. Acessar o menu “Run”

II. Executar

III. Executar

5. ACESSANDO REMOTAMENTE

Ao executar a aplicação, o componente TServer será iniciado nos ícones ocultos da barra de tarefa do Windows, ao passar o mouse sobre ele as portas abertas pelo servidor a fim de garantir o acesso da aplicação pelos clientes será listada. A porta que deve ser usada para que um dispositivo móvel como um celular acesse as páginas HTML 5 é a porta TCP, ou seja, a porta 3103.

O próximo passo é acessar as páginas HMTL5 por meio da URL de conexão padrão do BluePlant, para ter acesso a essa URL devemos realizar os seguintes passos:

I. Menu Info

II. Redundância

III. Configurar o IP do seu computador como IP do servidor primário, lembrando que para esse exemplo o IP do nosso computador foi adotado como “192.168.100.10”

Copiar a URL “Web Client URL” que deve ser utilizada para os dispositivos que pretendem acessar as páginas no formato HTML5

OBS: Para acessar essas páginas por meio de um dispositivo móvel, na URL deve-se apontar a porta TCP 3103 por meio de “:” logo após o IP do Servidor, ficando assim a URL em seu formato final:

http://192.168.100.10:3103/bp-9.1/html5/index.html

6. TESTANDO A APLICAÇÃO

Para testar a aplicação basta copiar a URL e colar em um Navegador Chrome por exemplo por meio de um celular ou tablet conectado à rede.