Page History

Download the Solution Example here: FlowPanel.dbsln

• Solution Name: Flow Panel
• Software Version: v10
• Keywords: Panels, Elements

Summary

This example demonstrates how to use the TFlowPanel component, which allows for the dynamic creation of Symbols at runtime by querying the quantity and definitions of the symbols from databases or real-time tags.

Technical Information

The example shows demonstrates the TFlowPanel control, dynamically creating dynamics WrapPanels, and Horizontal and Vertical as well as horizontal and vertical StackPanels.

The panel contents for the panels are dynamically created generated from various types of data sources. The example showcase showcases 5 scenarios:

1. Panel configured with a fixed Texttext;
2. Panel configured with a text from a Tagtag;
3. Panel configured from aa Array of Text Tagsan array of text tags;
4. Panel configured from

1. a DataTable tag;
2. Panel configured from a DataTable (or a SQL query)

1. an array of DataTemplate tags.

2. Data Source = Text Tag / Type = UniformGrid.

→  The code below sets the value of the text-type tag (@Tag.tagText) that is used as a source for the FlowPanel.

// Task.ServerStartup
Tag.tagText.Value = "#Element=HMI/Circular_Gauge/Tacho3 #Value=tag.tag1 #Max:100 ;";
string str = "";
for (int i = 1; i < 10; i++) {
	string add = i.ToString();
	str += "#Element=HMI/Miscellaneous/ColorLabel #Value=tag.tag2 #Color=\"#FF00AA" + (i * 20).ToString("X2") + "\" ; ";
}
@Tag.tagText.Value += str;

3. Data Source = Array / Type = StackPanelHorizontal 

→ The code below sets the values of an array of text-type tags (@Tag.tagTextArray[ ]) that are used as the source for the FlowPanel.

//Task.ServerStartup
string[] strs = @Tag.tagText.Value.Split(new char[] { ';' }, StringSplitOptions.RemoveEmptyEntries);
for (int j = 0; j < Math.Min(@Tag.tagTextArray.Length, strs.Length); j++)
	@Tag.tagTextArray[j] = strs[j].Trim();

4. Data Source = Object / Type = WrapPanel

→ The code below sets the values of a DataTable tag (@Tag.tagTable) that is used as the source for the FlowPanel.

//Task.ServerStartup 
DataTable table1 = new DataTable();
table1.Columns.Add("Element", typeof (string));
table1.Columns.Add("Value", typeof (string));
table1.Columns.Add("Max", typeof (int));
table1.Columns.Add("Color", typeof (string));
DataRow row1 = table1.NewRow();
row1["Element"] = "HMI/Circular_Gauge/Tacho3";
row1["Value"] = "Tag.Tag1";
row1["Max"] = 100;
table1.Rows.Add(row1);

for (int j = 1; j < 10; j++) {
	DataRow row2 = table1.NewRow();
	row2["Element"] = "HMI/Miscellaneous/ColorLabel";
	row2["Value"] = "Tag.Tag2";
	row2["Max"] = 100;
	row2["Color"] = "\"#FF00AA" + (j * 20).ToString("X2") + "\"";
	table1.Rows.Add(row2);
}
@Tag.tagTable.Value = table1;

5. Data Source = Object / Type = WrapPanel

→ The code below sets the values of a DataTemplate tag (@Tag.dt) that is used as the source for the FlowPanel.

//Task.ServerStartup 
@Tag.dt[0].Element = "HMI/Circular_Gauge/Tacho3";
@Tag.dt[0].Value = "tag.tag1";
@Tag.dt[0].Max = 140;
for (int j = 1; j < 10; j++) {
	@Tag.dt[j].Element = "HMI/Miscellaneous/ColorLabel";
	@Tag.dt[j].Value = "tag.tag2";
	@Tag.dt[j].Color = "\"#FF00AA" + (j * 20).ToString("X2") + "\"";
} 

Reference Information

→ See Smart Symbols for more information.

In this section: