Differences

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

--- mistudio:getting_started:add_graphics [2026/06/20 12:56] – created tputman
+++ mistudio:getting_started:add_graphics [2026/09/18 15:49] (current) – tputman
@@ Line 1: / Line 1: @@
 ===== Adding Graphics to an Application =====
-This page explains the basic process for adding graphics to a MIStudio application.
+This page explains the basic process for adding graphics to an MIStudio application.
 ==== Overview ====
-Graphics are the visual components used to build a MIStudio application screen. They can display information, show live values, create controls, organize a dashboard, or build an operator interface.
+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.
@@ Line 17: / Line 17: @@
 ==== Basic Steps ====
-* Open the MIStudio project.
+  * Open the application where the graphic should be added.
-* Open the application where the graphic should be added.
+  * Locate the MIStudio Design Editor palette.
-* Locate the graphics palette or graphics selection area.
+  * Choose the graphics group that contains the graphic you want to add.
-* Choose the graphics group that contains the graphic you want to add.
+  * Select the graphic.
-* Select the graphic.
+  * Drag the graphic onto the Design Editor.
-* Place the graphic on the application screen.
+  * Move or resize the graphic as needed.
-* Move or resize the graphic as needed.
-* Edit the graphic properties.
-* Save the project.
-==== Choosing a Graphic ====
+==== Graphics Palette ====
-Choose a graphic based on what the application needs to show or do.
+{{: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.//
-For example:
+MIStudio graphics are organized into groups in the Design Editor palette.
-* Use labels or text fields to show text.
+For example, Basic Layout contains common graphics such as basic shapes, buttons, text fields, meters, indicators, sliders, and knobs.
-* Use boxes, circles, and 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.
-==== Graphics Palette ====
+See [[mistudio:design_editor:basic_layout:start|Basic Layout]] for documentation about graphics in the Basic Layout group.
-MIStudio graphics are organized into groups in the graphics palette.
+For an overview of all documented graphics groups, see [[mistudio:design_editor:start|MIStudio Design Editor]].
-For example, Basic Layout contains common graphics such as basic shapes, buttons, text fields, meters, indicators, sliders, and knobs.
+==== Choosing a Graphic ====
-See [[mistudio:graphics:basic_layout:start|Basic Layout Graphics]] for documentation about graphics in the Basic Layout group.
+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 ====
@@ Line 67: / Line 69: @@
   * [[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:graphics:start|MIStudio Graphics]]
+  * [[mistudio:design_editor:start|MIStudio Design Editor]]
-  * [[mistudio:graphics:basic_layout:start|Basic Layout Graphics]]
+  * [[mistudio:design_editor:basic_layout:start|Basic Layout]]