Como Configurar e Visualizar Gráficos no HIscada Pro

Links relacionados

Manual do HIscada Pro

Tutorial para instalação de uma aplicação desenvolvida no HIscada Pro

Introdução

Este tutorial tem como objetivo descrever a configuração e visualização de gráficos no ambiente HIscada Pro.

Compatibilidade

As funcionalidades descritas neste tutorial estão disponíveis para o ambiente HIscada Pro, versões superiores a 1.4.03.

Nota

O pacote HIscada Pro, bem como a sua documentação podem ser obtidos gratuitamente em sua página HIscadaPro.

Recursos Necessários

Para criação e execução de projetos é necessário a instalação do ambiente HIscada Pro. Para tal, acesse o Manual de Instalação do HIscada Pro com os passos para a instalação do pacote.

Quando instalado é disponibilizado ao usuário três aplicativos:

• IDE: Ambiente de desenvolvimento integrado para criação e teste da aplicação de supervisão e controle.

• Kernel: Aplicativo servidor do sistema supervisório. Responsável pela conexão com os equipamentos de campo via servidor OPC. O Kernel mantém um banco de dados para a aplicação corrente efetuando toda gerência de alarmes, eventos, histórico de dados, scripts etc. Pode rodar em uma máquina servidora (como um processo do windows) ou no mesmo computador utilizado pelo usuário do ambiente.

• Viewer: Aplicativo responsável por apresentar e gerenciar toda interface (telas) disponível para o usuário final do sistema. Integra recursos para autenticação de usuários, apresentação das telas da aplicação, gerência de alarmes, trends online, históricos, acesso a bancos de dados externos etc.

Para mais informações sobre os aplicativos consulte o Manual do HIscada Pro.

Neste tutorial onde se pretende criar e executar um projeto, serão utilizados o aplicativo IDE para criação e configuração do projeto, o aplicativo Kernel para a execução do mesmo e por fim o aplicativo Viewer para visualização da tela da aplicação.

Configuração de gráficos no ambiente IDE

Para criação e configuração de um gráfico no ambiente IDE, inicialmente é necessário abrir um projeto ou criar um novo. Para isso, acesse o Tutorial para criação de Projetos no HIscada Pro onde contém os passos para se criar um projeto ou acesse o Tutorial para instalação de uma aplicação desenvolvida no HIscada Pro no qual contém uma seção com os passos para se Importar um projeto.

Neste tutorial será partido do principio que foi criado um novo projeto.

Portanto, a partir do projeto criado e aberto no ambiente do IDE, para configurar um banco de dados, temos os seguintes passos:

Configuração de acesso ao banco de dados

Para criar e configurar o banco de dados, siga os seguintes passos:

• Dentro do item Project, clique em Globals

Figura 1: Seleção do Item Globals na árvore de projeto

• Selecione e expanda o item Databases:

Figura 2: Seleção do item Databases na árvore de projeto

• Selecione Database_001 e altere a propriedade Driver para SQLite e Database Name para user.db:

Figura 3: Seleção do item Database_001 na árvore de projeto

Figura 4: Configuração do item Database_001

Criação de Tags OPC para os dados do gráfico

Para criar os tags OPC siga os passos descritos no item Criando um Tag OPC no Ambiente do IDE do Tutorial de visualização e edição do valor de um Tag no HIscada Pro

• Após criar o Tag, deve ser realizado seu endereçamento. Para isso, clique no Tag correspondente e configure como na figura abaixo.

  Nota

  Para cada Tag Opc é necessário realizar esse procedimento para endereçar o item.

  

  Figura 5: Configuração do tag OPC

• Faça a mesma ação para o outro Tag criado, o TagOpc_002 e o atribua para a variável M1

  

  Figura 6: Configuração do tag OPC

Criar uma lista e associar os Tags

Para podermos fazer o histórico dos dados é necessário guardá-los no banco de dados. Para isto devemos criar uma a lista de Tags que serão usadas no histórico conforme os seguintes passos:

• Em Kernel→Tags clique com o botão direito em Lists:

Figura 7: Adicionando item List para histórico

• Ao criar a lista, clique com o botão direito sobre a mesma e selecione Adiciona Item → TagRef, com isso podemos associar tags que serão utilizada no histórico.

  

  Figura 8: Adicionando tags ao item List

• Ao criar o item TagRef à lista, selecione e clique no botão “…” da propriedade Nome Tag.

  

  Figura 9: Associando tags ao item List

• Selecione em Origem o Kernel e em Tag o Opc. Com isso, aparecerá a lista de grupos que foi criado, no nosso caso, selecionaremos o TagOpcGroup_001 na Lista de Grupos e na Lista de Itens o TagOpc_001;

  

  Figura 10: Item Selector - Associando tags ao item List

• Faça o mesmo procedimento para a TagRef_002, contudo em Lista de Itens selecione TagOpc_002. No fim ficará como na figura abaixo:

  

  Figura 11: Associando tags ao item List

Criar o histórico

• Selecione o item “Kernel” na árvore de projeto:

Figura 12: Seleção do Item Kernel na árvore de projeto

• Clique com o botão direito do mouse sobre o Item “HistoryBases” e clique na opção “Adiciona Item”, “HistoryGroup”, conforme a figura abaixo:

Figura 13: Adicionando um grupo de histórico

• Selecione o item “History” logo abaixo do item “HistoryGroup” e configure as seguintes propriedades:

Figura 14: Seleção do Item History na árvore de projeto

Figura 15: Configuração das propriedades do History

• Após configurado as propriedades do item History, acesse a propriedade “Gerar Tabela” para criar a tabela no banco de dados referenciado.

Criar tela para configuração e visualização dos dados graficamente

Para criação da tela para configuração e visualização dos dados no gráfico, seguiremos os seguintes passos:

• Clique com o botão direito em Screens que está dentro de Project → Viewers e com botão direito do mouse selecione Adiciona Item → ScreenGroup conforme figura abaixo:

Figura 16: Criando um grupo de telas no projeto

• Agora clique sobre o grupo criado (ScreenGroup_001) e com botão direito do mouse selecione Adiciona Item → Screen e clique no botão Cria Tela

Figura 17: Criando uma tela no projeto

Figura 18: Criando uma tela no projeto

• Agora criaremos os botões. Clique com o botão direito sobre o item Screen criado anteriormente e depois selecione Adiciona Item → Button;

Figura 19: Adicionando objeto Button na tela

• Selecione o botão criado e em suas Propriedades Comuns configure:

Figura 20: Configuração das propriedades do objeto Button

• Siga os dois últimos passos para mais três botões, os quais terão as seguintes propriedades:

Figura 21: Configuração das propriedades dos botões na tela

• Agora clique com o botão direito sobre o item Screen e selecione Adiciona Item → StaticText. Crie dois objetos do tipo “StaticText” e configure conforme figura abaixo:

Figura 22: Adicionando e configurando objetos de tela do tipo StaticText

• Adicione dois objetos de tela do tipo EditDateTime na tela e configure as Propriedades Comuns tal como na figura abaixo:

Figura 23: Adicionando e configurando objetos de tela do tipo EditDateTime

• Agora vamos, por fim, colocar o gráfico. Para isso, selecione com o botão direito na tela criada e clique em: adiciona Item → Plot e, em suas propriedades comuns, configure:

  

  Figura 24: Adicionando e configurando o objeto plot

• Sua tela recém-criada estará assim:

  

  Figura 25: Tela com objetos configurados

Criar tags locais

Iremos agora criar as Tags para armazenar a Data/hora escolhida para o início e fim da procura no Histórico conforme os seguintes passos:

• Crie um Tag local em Project→Kernel→Tags→Local clicando com o botão direito e selecionando Adicionta Item → TagLocalGroup.

  

  Figura 26: Criação de grupo para tags locais do kernel

• Ao criar o grupo, clique com o botão direito no grupo criado e selecione Adiciona Item → TagLocal, com isso você criará uma tag para alguma variável local. Crie dois tags para as data/hora início e fim conforme figura abaixo:

  

  Figura 27: Criação e configuração de tags locais

Configuração dos objetos de tela EditDateTime

Uma vez criados os tags referidos no item anterior podemos associá-los aos obejtos EditDateTime conforme descrito a seguir:

• Selecione na tela o objeto EditDateTime_001 que usaremos para data/hora de início

• Na propriedade Nome Tag do objeto selecione o tag inicio conforme figuras a seguir:

Figura 28: Seleção de tag para o objeto EditDateTime

Figura 29: Seleção de tag para o objeto EditDateTime

• Após isso, clique na propriedade Formato do EditDateTime e selecione o modelo que possui data e horário, como abaixo.

Figura 30: Selecionando formato para o objeto EditDateTime

• Faça os mesmos procedimentos para o EditDateTime_002 que neste exemplo é usado para data/hora final. Desta forma o tag fim deve ser selecionado conforme figura abaixo:

Figura 31: Configuração do objeto EditDateTime_002

Configuração do gráfico

Agora para configurar o gráfico, selecione o objeto Plot_001 na tela. Isso fará aparecer três novos objetos: PlotCurves, PlotAxes e PlotStyles. Siga os seguintes passos para configurar o gráfico:

• Clique com o botão direito em PlotAxes e selecione Adiciona Item → PlotAxis.

Figura 32: Adiciona Item PlotAxis

• Faça o passo anterior três vezes e mude o nome deles para x, y1 e y2,como mostrado na figura abaixo:

Figura 33: Configuração PlotAxis

• Para criar as curvas, clique com o botão direito em PlotCurves e selecione Adiciona Item → PlotCurve.

Figura 34: Adiciona Item PlotCurve

• Faça o passo anterior duas vezes e os configure como na figura abaixo:

Figura 35: Configuração PlotCurve

Criação dos Scripts para atualização do gráfico

Precisamos criar agora os Scripts para atualização do Gráfico. Siga os seguintes passos para criação dos scripts:

• Clique com o botão direito em Project → Viewers → Scripts e selecione Adiciona Item → ScriptGroup.

Figura 36: Adiciona ScriptGroup

• Agora clique com o botão direito em ScriptGroup_001 e selecione Adiciona Item → Script vazio.

Figura 37: Adiciona Script vazio

• Faça o passo anterior três vezes e configure conforme mostrado na figura abaixo:

Figura 38: Configuração dos scripts

Os scripts terão a seguinte função:

• atualiza_dados: renovar os dados que aparecerão no Gráfico

• muda_data: modificar a data que aparecerá no Gráfico através dos dois botões criados (próximo dia, dia anterior)

• simulando: simula dados para o gráfico

• Vamos criar primeiro o script atualiza_dados. Clique duas vezes sobre o Script com o mesmo nome. Aparecerá uma tela do lado direito para a programação. Insira o seguinte código:

  -- Obtém tela atual
  local scr = Sender.Screen
  
  --Recebe o caminho até as Tags
  local dt_ini = Tags.Get('Kernel.Tags.Local.TagLocalGroup_001.inicio')
  local dt_fim = Tags.Get('Kernel.Tags.Local.TagLocalGroup_001.fim')
  
  -- recebe o banco de dados que será usado
  database = Database.Get('Globals.DataBases.DataBase_001')
  
  sql = string.format("SELECT * FROM Historico WHERE insert_timestamp BETWEEN \'%s\' AND '%s\'",dt_ini.Value:GetFormatString('yyyy-mm-dd hh:mm:ss'),dt_fim.Value:GetFormatString('yyyy-mm-dd hh:mm:ss'))
  
  --Tabela lua para armazenar os dados para os gráficos
  tabela_dh = {}
  tabela_valor1 = {}
  tabela_valor2 = {}
  
    -- Executa SQL
    cursor, error  = database:Execute(sql)
    print('Numero de registros recuperados ' .. cursor.NumRows)
    print("Error" ..  tostring(error))
  
    row = cursor:Fetch() -- recupera dicionario {nome_coluna=valor}
    while row do
            datahora = DateTime(row['insert_timestamp'])
            tabela_dh[#tabela_dh + 1]    = datahora:GetValue()
            tabela_valor1[#tabela_valor1 + 1] = row['value_TagRef_001']
            tabela_valor2[#tabela_valor2 + 1] = row['value_TagRef_002']
  
            -- recupera o próximo registro
            row = cursor:Fetch()
    end
  
    -- encerra uso do cursor
    cursor:Close()
  
  local eixo_x = scr.Plot_001:GetAxis('x')
  local eixo_y1 = scr.Plot_001:GetAxis('y1')
  local eixo_y2 = scr.Plot_001:GetAxis('y2')
  
  eixo_x:Clear()
  eixo_y1:Clear()
  eixo_y2:Clear()
  
  eixo_x:SetData(tabela_dh)
  eixo_y1:SetData(tabela_valor1)
  eixo_y2:SetData(tabela_valor2)
  
  -- Navega na estrutura de componentes e força refresh no objeto Plot de nome Plot_001
  -- A atribuição de qualquer valor força o refresh.
  scr.Plot_001.DoRefresh = 1
  

• Agora insira o seguinte código no script muda_data:

  --Recebe o Argumento do botão
  print(Sender.Argument)
  
  -- Coloque o caminho até a Tag de início e fim da procura no histórico
  local tag_inicio = "Kernel.Tags.Local.TagLocalGroup_001.inicio"
  local tag_fim = "Kernel.Tags.Local.TagLocalGroup_001.fim"
  
  
  --Recebe os valores das Tags e incrementa ou decrementa ele
  local dt_ini = Tags.Get(tag_inicio)
  dt_ini.Value = DateTime(dt_ini.Value:GetValue() + tonumber(Sender.Argument))
  dt_ini:WriteValue()
  local dt_fim = Tags.Get(tag_fim)
  dt_fim.Value = DateTime(dt_fim.Value:GetValue() + tonumber(Sender.Argument))
  dt_fim:WriteValue()
  
  --Faz o script para atualizar o gráfico rodar
  Scripts.Run('Viewers.Scripts.ScriptGroup_001.atualiza_grafico')
  

• Por fim insira o seguinte código no script simulando:

  local scr = Sender.Screen
  con = Database.Get('Globals.DataBases.DataBase_001')
  
  -- Exclui tabela 'simular'
  affected_rows, error = con:Execute('DROP  TABLE simular;')
  
  -- Cria tabela 'simular'
  affected_rows, error = con:Execute("CREATE TABLE simular (id INTEGER PRIMARY KEY, data STRING, y1 FLOAT,y2 FLOAT);")
  
  print(error)
  
  
  -- Cria valores para fazer o Inserir no banco criado
  math.randomseed(math.random(10000))
  
  local t = DateTime()
  local t2 = DateTime(0,0,10,12)
  
  
  for i=0,100,1 do
  --print(i)
  data=tostring(DateTime(t:GetValue()+i*t2:GetValue()))
  valory1=math.sin(math.rad(math.random(1080)))*i
  valory2=math.tan(math.rad(math.random(1080)))*i
  --print(valor)
  affected_rows, error = con:Execute("INSERT INTO simular VALUES ("..i..",'"..data.."',"..valory1..","..valory2..");")
  print(error)
  end
  
  sql = string.format("SELECT * FROM simular;")
  
  --Tabela lua para armazenar os dados para os gráficos
  tabela_dh = {}
  tabela_valor1 = {}
  tabela_valor2 = {}
  
    -- Executa SQL
    cursor, error  = con:Execute(sql)
    print('Numero de registros recuperados ' .. cursor.NumRows)
    print("Error" ..  tostring(error))
  
    row = cursor:Fetch() -- recupera dicionario {nome_coluna=valor}
    while row do
            datahora = DateTime(row['data'])
            tabela_dh[#tabela_dh + 1]    = datahora:GetValue()
            tabela_valor1[#tabela_valor1 + 1] = row['y1']
            tabela_valor2[#tabela_valor2 + 1] = row['y2']
  
            -- recupera o próximo registro
            row = cursor:Fetch()
    end
  
    -- encerra uso do cursor
    cursor:Close()
  
  local eixo_x = scr.Plot_001:GetAxis('x')
  local eixo_y1 = scr.Plot_001:GetAxis('y1')
  local eixo_y2 = scr.Plot_001:GetAxis('y2')
  
  eixo_x:Clear()
  eixo_y1:Clear()
  eixo_y2:Clear()
  
  eixo_x:SetData(tabela_dh)
  eixo_y1:SetData(tabela_valor1)
  eixo_y2:SetData(tabela_valor2)
  
  
  -- Navega na estrutura de componentes e força refresh no objeto Plot de nome Plot_001
  -- A atribuição de qualquer valor força o refresh.
  scr.Plot_001.DoRefresh = 1
  

Configuração do botões para executação dos scripts

Para configurar os botões a fim de executarem os scripts siga os seguintes passos:

• Selecione o botão Button_001 na tela. Esse é o botão para atualizar o gráfico. Vá para a grupo de propriedades Eventos e selecione o botão “…” na frente de On Click.

  

  Figura 39: Associando scripts aos eventos do botão

• Na janela que aparecerá, selecione em Origem o Viewers, na Lista de Grupos o ScriptGroup_001 e em Lista de Itens o script atualiza_grafico e depois aperte confirma.

  

  Figura 40: Selecionando script para o evento On Click do botão

• Faça o mesmo procedimento para o Button_04 (Simula), contudo, escolhendo em Lista de Itens a opção simulando.

  

  Figura 41: Selecionando script para o evento On Click do botão

• Agora selecione o Button_002 (próximo dia) e em Argumentos, dentro da propriedade identificação, coloque 1. Esse valor é a quantidade de dias a frente que será mostrado no gráfico. Caso queria mais de um dia, coloque a quantidade em dias correspondentes. No nosso caso, será o dia seguinte, então, por exemplo, se em Data/hora início foi escolhido para ser 02/02/2016 e Data/hora fim o dia 04/02/2016, se apertarmos o botão “próximo dia”, esses dois valores serão incrementados em um dia e o gráfico será mudado em um dia a mais também.

  

  Figura 42: Configuração do Button_002 (próximo dia)

• Agora vá para o grupo de propriedade Eventos e clique no botão “…” a direita de On Click.

• Na janela que aparecerá, selecione em Origem o Viewers, na Lista de Grupos o ScriptGroup_001 e em Lista de Itens o script muda_data e depois aperte confirma.

  

  Figura 43: Selecionando script para o evento On Click do botão

• Faça as mesmas operações do Button_002 para o Button_003 (dia anterior), contudo na propriedade Argumentos coloque -1.

  

  Figura 44: Configurações do Button_003

Executando o projeto no kernel e viewer

• Salve o seu projeto e clique em Ativa aplicação “Kernel e Viewer” em modo de depuração conforme figura a seguir:

  

  Figura 45: Ativa aplicação “Kernel e Viewer” em modo de depuração

• O projeto abrirá no Viewer. Selecione a data de início e de fim e clique em atualizar. O seguinte resultado gráfico será presentado:

  

  Figura 46: Resultado do clique no botão “atualizar”

• Caso queria simular valores aleatórios, clique em simula e um gráfico semelhante a figura abaixo será apresentada:

  

  Figura 47: Resultado do clique no botão “simula”

Anexos

O Link abaixo disponibiliza o projeto do HIscada Pro com o resultado final da execução deste tutorial. Para utilizá-lo, basta importar este projeto no ambiente do IDE. Para isso acesse o Tutorial para instalação de uma aplicação desenvolvida no HIscada Pro para obter as instruções de como importar um projeto no ambiente do IDE.

Projeto HIscada Pro: TutorialCriaGráfico