Differences

This shows you the differences between two versions of the page.

--- mistudio:getting_started:connect_data_source_to_graphic [2026/06/21 17:26] – [Before Connecting a Data Source] tputman
+++ mistudio:getting_started:connect_data_source_to_graphic [2026/09/18 15:50] (current) – tputman
@@ Line 8: / Line 8: @@
 A data source may provide live equipment data, simulated data, database values, calculated values, or other runtime values. When connected to a graphic, the value can update the graphic's display, fill level, label, color, visibility, or other supported behavior.
+==== Example Connection ====
+{{:mistudio:getting_started:pasted:20260622-124203.png?650|Main Logic Editor showing a SineServer connected to a Box graphic}}
+//Main Logic Editor showing the Data Sources tab and a SineServer connected to the valueInput of a Box graphic.//
+In this example, a SineServer data source is connected to the **valueInput** of a Box graphic. The SineServer output sends a changing numeric value to the Box, allowing the graphic to update from the data source.
 ==== Before Connecting a Data Source ====
-Before connecting a data source to a graphic:
+Before connecting a data source, the graphic should already exist in the application.
+To open the graphic in the Logic Editor:
+  * Select the graphic in the Design Editor.
+  * Press **Ctrl + D** to open the Main Logic Editor.
+  * Click the Logic Editor canvas to place the selected graphic in the logic workspace.
+  * Confirm that the graphic appears as a block in the Logic Editor.
+==== Adding a Data Source ====
+Data sources are selected from the palette at the top of the Main Logic Editor.
+To add a data source:
+  * Select the **Data Sources** tab in the Logic Editor palette.
+  * Choose the data source you want to use.
+  * Click the Logic Editor canvas to place the data source.
+  * Confirm that the data source appears as a block in the Logic Editor.
+==== Creating the Connection ====
-  * Select the graphic.
+After the graphic and data source are both visible in the Logic Editor, create a connection between them.
-  * Press ctrl + d, this will open the main logic editor.
-  * Press anywhere on the logic editor (what do you call the big white section?)
-  * Now the graphic is in the logic editor.
-  * Select a data source from the data source section.
-  * To connect the data source to the graphic input value hold alt and drag the connection to the value input.
-  * With the connection made the graphic now updates with the changing value.
-==== Basic Steps ====
+  * Find the output port on the data source.
+  * Find the input port on the graphic, such as **valueInput**.
+  * Hold **Alt**.
+  * Drag from the data source output port to the graphic input port.
+  * Release the mouse when the connection reaches the correct input.
+  * Confirm that a connection line appears between the data source and the graphic.
-  * Open the project and application.
+Once the connection is made, the graphic can update from the changing data source value.
-  * Add or select the graphic that should receive the value.
-  * Add or select the data source that will provide the value.
-  * Create a connection from the data source output to the graphic input or exposed property.
-  * Confirm that the connection is attached to the correct target.
-  * Run or test the application behavior if needed.
-  * Save the project.
 ==== Common Connection Targets ====
@@ Line 38: / Line 59: @@
   * A graphic's main value input
-  * A display value input
+  * A displayed value input
   * A visibility property
   * A color property
@@ Line 63: / Line 84: @@
 Exposed properties are useful when a value should control a specific property, such as visibility, color, text, fill behavior, or another configurable setting.
-See [[mistudio:graphics:exposed_properties|Exposed Properties]] for more information.
+See [[mistudio:design_editor:exposed_properties|Exposed Properties]] for more information.
 ==== After Connecting a Data Source ====
-After connecting a data source, save the project.
+After connecting a data source, confirm that the connection is attached to the correct input and save the project.
-It is also useful to reopen the project and confirm that the connection is still present and the graphic still behaves as expected.
+If the graphic does not update as expected, check that the data source is producing a value and that the connection is attached to the correct graphic input or exposed property.
 ==== Getting Started Flow ====
@@ Line 75: / Line 96: @@
 Previous: [[mistudio:getting_started:edit_graphic_properties|Editing Graphic Properties]]
-Next: [[mistudio:getting_started:save_reopen_project|Saving and Reopening a Project]]
+Next: [[mistudio:getting_started:start|Back to MIStudio Getting Started]]
 ==== Related Pages ====
@@ Line 84: / Line 105: @@
   * [[mistudio:getting_started:data_sources_overview|Data Sources Overview]]
   * [[mistudio:getting_started:test_data_sources|Using Test Data Sources]]
-  * [[mistudio:graphics:start|MIStudio Graphics]]
+  * [[mistudio:design_editor:start|MIStudio Design Editor]]
-  * [[mistudio:graphics:exposed_properties|Exposed Properties]]
+  * [[mistudio:design_editor:exposed_properties|Exposed Properties]]
+  * [[mistudio:design_editor:data_source_binding|Data Source Binding]]