ErgoTechWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
===== Connecting a Data Source to a Graphic =====

This page explains the basic process for connecting a data source to a graphic in MIStudio.

==== Overview ====

MIStudio graphics can be connected to data sources so the graphic updates when a value changes.

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, 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 ====

After the graphic and data source are both visible in the Logic Editor, create a connection between them.

  * 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.

Once the connection is made, the graphic can update from the changing data source value.

==== Common Connection Targets ====

The correct connection target depends on the graphic and the behavior you want.

Common targets may include:

  * A graphic's main value input
  * A displayed value input
  * A visibility property
  * A color property
  * A label or text property
  * An exposed property

==== Value Behavior ====

Different graphics respond to values in different ways.

For example:

  * A numeric value may update a meter, fill level, chart, or numeric display.
  * A boolean value may toggle a state, visibility, color, or on/off display.
  * A string value may update a label, text field, or display area if the graphic supports text.
  * A color value may update a graphic color if the target property supports color input.

Check the individual graphic page for details about how that graphic responds to input values.

==== Exposed Properties ====

Some graphic properties can be exposed so they can be connected to data sources.

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:design_editor:exposed_properties|Exposed Properties]] for more information.

==== After Connecting a Data Source ====

After connecting a data source, confirm that the connection is attached to the correct input and save the project.

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 ====

Previous: [[mistudio:getting_started:edit_graphic_properties|Editing Graphic Properties]]

Next: [[mistudio:getting_started:start|Back to MIStudio Getting Started]]

==== Related Pages ====

  * [[mistudio:getting_started:start|MIStudio Getting Started]]
  * [[mistudio:getting_started:add_graphics|Adding Graphics to an Application]]
  * [[mistudio:getting_started:edit_graphic_properties|Editing Graphic Properties]]
  * [[mistudio:getting_started:data_sources_overview|Data Sources Overview]]
  * [[mistudio:getting_started:test_data_sources|Using Test Data Sources]]
  * [[mistudio:design_editor:start|MIStudio Design Editor]]
  * [[mistudio:design_editor:exposed_properties|Exposed Properties]]
  * [[mistudio:design_editor:data_source_binding|Data Source Binding]]