===== MIStudio Design Editor =====

The MIStudio Design Editor is used to build dashboards, operator interfaces, and data-driven visual displays using graphics and controls.

Graphics are the visual components placed in an MIStudio application. They can be used to show values, display status, create controls, build dashboards, and organize information on the screen.

==== Common Graphics Concepts ====

  * [[mistudio:design_editor:active_graphic|Active Graphic]]
  * [[mistudio:design_editor:active_control_common_properties|Active Control Common Properties]]
  * [[mistudio:design_editor:exposed_properties|Exposed Properties]]
  * [[mistudio:design_editor:data_source_binding|Data Source Binding]]
  * [[mistudio:getting_started:connect_data_source_to_graphic|Connecting a Data Source to a Graphic]]

==== Graphic Groups ====

The pages below organize MIStudio graphics by the groups used in the MIStudio Design Editor palette.

^ Group ^ Description ^
| [[mistudio:design_editor:basic_layout:start|Basic Layout]] | Common layout, shape, control, text field, meter, indicator, slider, and knob graphics. |
| [[mistudio:design_editor:more_layout:start|More Layout]] | Additional text, display, list, table, button, input, image, status, motion, and process-style graphics. |
| [[mistudio:design_editor:charts:start|Charts]] | Chart graphics used to display numeric, historical, array, or two-dimensional data. |
| [[mistudio:design_editor:arrows:start|Arrows]] | Arrow and callout-style graphics used to show direction, flow, or visual emphasis. |
| [[mistudio:design_editor:steel:start|Steel]] | Steel-style display and control graphics. |
| [[mistudio:design_editor:controls:start|Controls]] | Control graphics used for operator input, switching, buttons, and interactive behavior. |
| [[mistudio:design_editor:valves_3d:start|3D Valves]] | Three-dimensional valve graphics used to show valve type, position, and state. |
| [[mistudio:design_editor:color_changing:start|Color Changing]] | Graphics that change visual color or state based on values or configured ranges. |
| [[mistudio:design_editor:hphmi:start|HP HMI]] | HP HMI-style indicators and industrial display graphics. |
| [[mistudio:design_editor:pipes:start|Pipes]] | Pipe and connector graphics used to build flow, process, or equipment displays. |
| [[mistudio:design_editor:popups_panels:start|Popups/Panels]] | Popup, panel, and layout-support graphics. |
| [[mistudio:design_editor:pumps:start|Pumps]] | Pump, fan, blower, spinner, and process-motion graphics. |
| [[mistudio:design_editor:sym_pipes:start|Sym Pipes]] | Symbolic pipe graphics used for simplified process-flow displays. |
| [[mistudio:design_editor:tanks:start|Tanks]] | Tank and vessel graphics used to show storage, level, or process state. |
| [[mistudio:design_editor:valves:start|Valves]] | Two-dimensional valve graphics used to show valve type, position, and state. |

==== Basic Layout ====

Basic Layout is a graphics group in the MIStudio Design Editor palette. This group includes many commonly used graphics and controls.

  * [[mistudio:design_editor:basic_layout:start|Basic Layout]]
  * [[mistudio:design_editor:basic_layout:basic_shapes:start|Basic Shapes]]
  * [[mistudio:design_editor:basic_layout:active_controls:start|Active Controls]]
  * [[mistudio:design_editor:basic_layout:text_fields:start|Text Fields]]
  * [[mistudio:design_editor:basic_layout:meters:start|Meters]]
  * [[mistudio:design_editor:basic_layout:indicators:start|Indicators]]
  * [[mistudio:design_editor:basic_layout:sliders:start|Sliders and Knobs]]

==== More Layout ====

More Layout is a graphics group in the MIStudio Design Editor palette. These graphics include additional text, display, list, table, button, input, image, status, motion, and process-style graphics.

  * [[mistudio:design_editor:more_layout:start|More Layout]]
  * [[mistudio:design_editor:more_layout:text_display_lists:start|Text, Display, Lists, and Tables]]
  * [[mistudio:design_editor:more_layout:buttons_inputs:start|Buttons and Input Controls]]
  * [[mistudio:design_editor:more_layout:image_layout:start|Image and Layout Graphics]]
  * [[mistudio:design_editor:more_layout:status_motion:start|Status, Motion, and Process Graphics]]

==== Notes ====

The **Recently Used** palette tab is not listed as a graphics group because it changes based on the graphics used recently in MIStudio.

==== 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:connect_data_source_to_graphic|Connecting a Data Source to a Graphic]]