Titulo 1

Dashboards Responsivos

Um painel é um tipo de interface gráfica com o usuário que fornece uma visão rápida dos principais indicadores de desempenho (KPIs) relevantes para um objetivo específico.

Um painel de dados é a maneira mais eficiente de rastrear várias fontes de dados porque fornece um local central para as empresas monitorarem e analisarem o desempenho. Os dados são exibidos na forma de tabelas, gráficos de linhas, gráficos de barras e medidores.

Monitores de painel responsivos têm a capacidade de responder dinamicamente a qualquer tamanho de tela, o que significa que a tela será reorganizada para formatar o conteúdo com base no tamanho e forma da tela do usuário.

Criação de um display

Para criar uma tela de painel, você precisa navegar até o Editor do Draw e clicar no botão Criar Tela.

Na janela pop-up, ative a caixa de seleção Dashboard, preencha os parâmetros conforme desejado e clique em OK.

Image Added

As telas do tipo Dashboard (painéis) estão disponíveis para os tipos de exibição .Net e HTML5.

Elementos Disponíveis

Os seguintes elementos estão disponíveis nas exibições do painel:

Image Added

Símbolos: Símbolos feitos pelo usuário e símbolos embutidos, que estão localizados na biblioteca de símbolos, podem ser usados ​​em exibições de painel.

Elementos gráficos, como botões, caixas de texto, caixas de seleção, etc. não estão disponíveis por padrão nas exibições do painel. Para usar esses elementos gráficos na tela do painel, você precisa criar um símbolo com esses componentes e usar o símbolo na tela do painel.

Componentes: os componentes externos estão listados abaixo.

Alarmes: janela de alarme e área de alarme

Tendência: Janela de tendência e perfuração

DataGrid: DataGrid

Grupos: Você pode combinar diferentes elementos, entre os citados acima, em um único grupo, criando assim um bloco de visualização.

Editor de Telas

Quando a opção de painel é habilitada, o layout do Editor de Draw é configurado em blocos. Para inserir um elemento, selecione-o e arraste-o para a página. Você deve ver um retângulo destacado no local onde será colocado.

Os elementos podem ser facilmente excluídos selecionando o elemento e pressionando delete no teclado, ou movidos selecionando o elemento e arrastando-o para o local desejado.

Os elementos do painel têm uma propriedade chamada Title que pode ser acessada por meio do painel no lado esquerdo do Editor de desenho.

Image Added

Funcionalidades dos Dashboards

Temas de Cores

A aparência de um painel pode ser modificada pela aplicação de diferentes temas. Em Run-Extension-Themes, você pode criar e / ou personalizar muitos temas diferentes para alterar a aparência dos elementos do painel.

Image Added

Para habilitar esse recurso, marque a caixa de seleção Habilitar tema no painel esquerdo.

Image Added

Personalização avançada

Callback CodeBehind

As propriedades dos itens de um painel podem ser modificadas por meio do callback adicionado ao CodeBehind usando a sintaxe abaixo:

*   .NET:
public void OnDashboardCustomItem(TDashboardBorder item)
{
item.TitleElement.TextAlignment = TextAlignment.Center; item.TitleElement.FontStyle = FontStyles.Italic; item.TitleElement.FontSize = 20; item.TitleElement.Foreground = Brushes.Black;
}
 
*   HTML5:
this.OnDashboardCustomItem = function(item)
{
//item.TitleElement.FontStyle = 1;
//item.TitleElement.HorizontalAlignment = 1;
//item.TitleElement.FontSize = 18;
};

Usando o retorno de chamada .Net descrito acima, nossos títulos se parecem com isto em tempo de execução.

Image Added

O Título também oferece suporte a tags e objetos de projeto, colocando-os entre colchetes. Os colchetes são usados ​​para que em tempo de execução o sistema possa tratar o elemento como uma variável de projeto, em vez de um texto. Veja alguns exemplos abaixo.

Title: {Client.DateTime}
Title: {Tag.MyTextTag}
Title: {Server.ComputerName}

Image Added

Em tempo real de execução, os elementos podem ser maximizados clicando no botão indicado por(1) abaixo ou redimensionados arrastando o botão indicado pelo (2) abaixo.

Image Added