===== Adding Graphics to an Application =====

This page explains the basic process for adding graphics to an MIStudio application.

==== Overview ====

Graphics are the visual components used to build an MIStudio application screen. They can display information, show live values, create controls, organize a dashboard, or build an operator interface.

Examples of graphics include labels, boxes, buttons, meters, indicators, charts, and other display components.

==== Before Adding Graphics ====

Before adding graphics, open the project and application where the graphics should be placed.

If you have not created an application yet, see [[mistudio:getting_started:create_application|Creating an Application]].

==== Basic Steps ====

  * Open the application where the graphic should be added.
  * Locate the MIStudio Design Editor palette.
  * Choose the graphics group that contains the graphic you want to add.
  * Select the graphic.
  * Drag the graphic onto the Design Editor.
  * Move or resize the graphic as needed.

==== Graphics Palette ====

{{:mistudio:getting_started:pasted:20260621-170351.png?700|MIStudio Design Editor showing the graphics palette}}
//MIStudio Design Editor showing the graphics palette groups used to select graphics for an application.//

MIStudio graphics are organized into groups in the Design Editor palette.

For example, Basic Layout contains common graphics such as basic shapes, buttons, text fields, meters, indicators, sliders, and knobs.

See [[mistudio:design_editor:basic_layout:start|Basic Layout]] for documentation about graphics in the Basic Layout group.

For an overview of all documented graphics groups, see [[mistudio:design_editor:start|MIStudio Design Editor]].

==== Choosing a Graphic ====

Choose a graphic based on what the application needs to show or do.

For example:

  * Use labels or text fields to show text.
  * Use boxes, circles, and other shapes to organize the screen visually.
  * Use meters or indicators to show changing values or status.
  * Use buttons or controls when the user needs to interact with the application.
  * Use charts when values need to be displayed over time or compared visually.

==== After Adding a Graphic ====

After a graphic is added, the next step is usually to edit its properties.

Properties may control the graphic's text, color, size, visibility, value behavior, or other display settings.

Some graphics can also be connected to data sources so they update automatically when values change.

==== Getting Started Flow ====

Previous: [[mistudio:getting_started:create_application|Creating an Application]]

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

==== Related Pages ====

  * [[mistudio:getting_started:start|MIStudio Getting Started]]
  * [[mistudio:getting_started:create_application|Creating an Application]]
  * [[mistudio:getting_started:edit_graphic_properties|Editing Graphic Properties]]
  * [[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:basic_layout:start|Basic Layout]]