Nesse tutorial você irá aprender a criar um gráfico no BluePlant que oferece a possibilidade de alterar a cor e formato do traço.
Primeiramente, crie na janela do BluePlant um objeto Trend Window, que será o gráfico, e um objeto DataGrid, que será a tabela com a informação das linhas. (Esses objetos podem ser encontrados na barra lateral)
Agora, vá em Edit->Tags->Templates e clique em "New", no campo do nome do Template escreva "TrendPen" e clique em OK. O nome é necessário para funcionar corretamente.
Nesse template você deve adicionar uma série de Tags, as mesmas estão na tabela abaixo. Copie a tabela e cole-a no BluePlant.
| Name | Type | Array | Parameters | Description |
| TagName | Text | |||
| Square | Digital | |||
| PenValue | Text | |||
| ValuePath | Text | |||
| Attribute | Text | |||
| PenLabel | Text | |||
| MinValue | Double | |||
| MaxValue | Double | |||
| Auto | Digital | |||
| PenSettings | Text | |||
| Visible | Digital | |||
| CursorValue | Double | |||
| FilterLevel | Integer | |||
| IsMouseOver | Digital | |||
| ShowValueArea | Integer | |||
| ShowHighlighted | Digital | |||
| TagAttribute | Double |
Agora você deve criar uma Tag e atribuir esse template a ela. Para isso, vá em "Objects" e crie uma tag com o nome "Penas", atribua o tipo TrendPen a ela e configure ela como um array de 1 dimensão e o número de posições sendo o número de linhas que você deseja adicionar.
Agora você deve repetir o processo para criar um template com o nome "TrendChart" e uma Tag com esse template com o nome "Trend". A tabela com as variáveis do template TrendChart estão abaixo, apenas copie a tabela e cole no template.
| Name | Type | Array | Parameters | Description |
| TrendWasInRealTime | Digital | |||
| EnableMouseCursorConnection | Digital | |||
| CanNextZoom | Digital | |||
| CanBackZoom | Digital | |||
| NextZoom | Digital | |||
| GridLinesBrush | Text | |||
| PrevioudGridBrush | Text | |||
| HideGrid | Digital | |||
| YLabelFormat | Text | |||
| Duration | TimeSpan | |||
| ChartArea | Integer | |||
| TimeBeforeNow | TimeSpan | |||
| XLabels | Text | |||
| YLabels | Text | |||
| XLabelFormat | Text | |||
| EnableYScaleForEachPen | Digital | |||
| MergeSameYScales | Digital | |||
| VerticalCursor | Digital | |||
| CursorBrush | Text | |||
| CursorOutputTooltip | Digital | |||
| CursorPosition | Double | |||
| SecondaryCursorPosition | Double | |||
| SecondaryCursorOutputTooltip | Digital | |||
| SecondaryVerticalCursor | Digital | |||
| IntervalBetweenCursors | TimeSpan | |||
| CursorOutput | DateTime | |||
| SecondaryCursorOutput | Text | |||
| StartDateTime | DateTime | |||
| XEndValue | DateTime | |||
| Paused | Digital | |||
| XStartValue | DateTime | |||
| YMinValue | Double | |||
| YMaxValue | Double | |||
| EnableMouseActions | Digital | |||
| MarkerTooltip | Digital | |||
| AllowEditPens | Digital | |||
| ShowDuration | Integer | |||
| ChartLeft | Double | |||
| ChartTop | Double | |||
| ChartWidth | Double | |||
| ChartHeight | Double | |||
| Orientation | Integer | |||
| XLabelsEditable | Digital | |||
| YLabelsEditable | Digital | |||
| OnlineTimer | TimeSpan | |||
| DisablePITimer | Digital | |||
| BackZoom | Digital | |||
| YLabelsStacked | Digital | |||
| PenHighlighted | Integer | |||
| XMinValue | Double | |||
| XMaxValue | Double | |||
| ExpandedMargin | Text | |||
| IsExpanded | Digital | |||
| LegendColorOption | Digital | |||
| ShowNoteDetails | Digital | |||
| StackEventMessages | Digital | |||
| UseAutoScaleOutsideNotes | Digital | |||
| ShowAlarms | Digital | |||
| ShowTagNotes | Digital | |||
| ShowTimeNotes | Digital | |||
| ShowXValueNotes | Digital | |||
| ShowEvents | Digital | |||
| DisableAutoHistoryRecover | Digital | |||
| HistoryUpdateTimer | TimeSpan | |||
| YPadding | Double | |||
| XPadding | Double | |||
| ShowPrimaryCursorCloseButton | Integer | |||
| EnableOnlineShift | Integer | |||
| VerticalLegend | Digital |
Agora volte para o Draw e clique duas vezes no Trend Window que criamos na primeira etapa do tutorial. Configure ele da seguinte forma:
Agora clique duas vezes no DataGrid e configure a parte superior do menu da seguinte maneira:
Na parte inferior você deve inserir manualmente as colunas do grid para o mesmo funcionar corretamente. Para inserir uma coluna clique no símbolo "+". As colunas a serem inseridas são as seguintes:
| Field | Title | Width | Visible | Editable | Editor |
| ID | ID | 20 | Text | ||
| PenSettings | Pen | 30 | X | X | Text |
| Visible | On | 24 | X | X | Checkbox |
| PenLabel | PenLabel | 200 | X | X | Text |
| PenValue | Value | 70 | X | Text | |
| MinValue | Min | 65 | X | X | Text |
| MaxValue | Max | 65 | X | X | Text |
| Auto | Auto | 36 | X | X | Checkbox |
| ShowValueArea | Filter | 40 | Text | ||
| FilterLevel | Level | 40 | Text | ||
| Attributable | Attributable | 60 | X | Text | |
| TagName | TagName | * | X | X | Text |
Com as colunas inseridas clique em Ok para fechar o popup.
A configuração está concluída, agora você precisa configurar quais Tags do programa serão lidas pelo gráfico. Nesse tutorial, para motivos de demonstração, iremos configurar duas Tags genéricas do tipo Integer para serem lidas.
O primeiro passo é criar essas Tags, que chamaremos de Tag1 e Tag2.
Para testar o gráfico, crie dois sliders na tela em Draw e configure-os para modificar as tags que criamos acima. Assinale o da esquerda para a tag1 e o da direita para a tag2.
Feito isso, rode a aplicação. Na tabela, adicione em TagName o nome declarado da tag, e em PenLabel o "apelido" para a tag. Com isso adicionado você pode mover os sliders e monitorar a alteração do valor dos mesmos.
Comentários
0 comentário
Por favor, entre para comentar.