ErgoTechWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
===== Editing Graphic Properties =====

This page explains the basic process for editing graphic properties in MIStudio.

==== Overview ====

Graphic properties control how a graphic looks, displays values, responds to input, and behaves in an application.

Properties may include text, colors, visibility, fonts, labels, fill behavior, value ranges, images, borders, rotation, or other settings depending on the selected graphic.

==== Before Editing Properties ====

Before editing graphic properties, open the project and application that contain the graphic.

If you have not added a graphic yet, see [[mistudio:getting_started:add_graphics|Adding Graphics to an Application]].

==== Basic Steps ====

  * Open the application that contains the graphic.
  * Select the graphic in the Design Editor.
  * Open or view the graphic properties panel.
  * Change the desired property values.
  * Confirm that the graphic updates as expected.

==== Example: Selected Graphic Properties ====

{{:mistudio:getting_started:pasted:20260621-171429.png?850|Box graphic selected with Basic properties shown}}

//Box graphic selected in the Design Editor with its Basic properties shown in the properties panel.//

When a graphic is selected in the Design Editor, its available properties appear in the properties panel. In this example, a Box graphic is selected and the Basic properties are visible.

==== Common Property Types ====

Different graphics have different property sets, but many graphics include common types of properties.

Examples include:

  * **Name** Used to identify the graphic in the project.
  * **Visible** Controls whether the graphic is shown or hidden.
  * **Text or Label** Controls the text displayed by the graphic.
  * **Font** Controls the font used for displayed text.
  * **Color** Controls the graphic color, fill color, label color, or state color.
  * **Minimum and Maximum Values** Control how numeric input values are scaled.
  * **Fill Direction** Controls how fillable graphics display value changes.
  * **Bezel** Controls border or panel styling, if supported by the graphic.
  * **Enabled** Controls whether a user can interact with an active control.

==== Basic and Expert Properties ====

Some graphics may show different property views, such as Basic properties and Expert properties.

Basic properties usually include the most commonly changed settings.

Expert properties may include additional settings for advanced configuration, appearance, quality indicators, interaction behavior, or runtime behavior.

==== Exposed Properties ====

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

Exposed properties allow a graphic property to change dynamically while the application is running.

See [[mistudio:design_editor:exposed_properties|Exposed Properties]] for more information.

Connections between exposed properties, data sources, and other components can be configured in the Logic Editor. See [[mistudio:logic_editor:start|MIStudio Logic Editor]] for an overview.

==== After Editing Properties ====

After editing graphic properties, save the project.

If the graphic will be updated by live, simulated, or calculated values, the next step is usually to connect a data source to the graphic.

==== Getting Started Flow ====

Previous: [[mistudio:getting_started:add_graphics|Adding Graphics to an Application]]

Next: [[mistudio:getting_started:connect_data_source_to_graphic|Connecting a Data Source to a Graphic]]

==== Related Pages ====

  * [[mistudio:getting_started:start|MIStudio Getting Started]]
  * [[mistudio:getting_started:add_graphics|Adding Graphics to an Application]]
  * [[mistudio:getting_started:connect_data_source_to_graphic|Connecting a Data Source to a Graphic]]
  * [[mistudio:design_editor:start|MIStudio Design Editor]]
  * [[mistudio:design_editor:active_graphic|Active Graphic]]
  * [[mistudio:design_editor:exposed_properties|Exposed Properties]]
  * [[mistudio:design_editor:data_source_binding|Data Source Binding]]
  * [[mistudio:logic_editor:start|MIStudio Logic Editor]]