# Component Reference
# Working with Components
OI uses components to represent objects on an application's screen. Some components are static, some dynamically show tag values, some allow operators to change tag values, some open external viewers, and others provide non-visual functionality such as writing to a database.
# Using Tags
Tags are the mechanism that OI uses to provide dynamic interfaces. Tags are used to control the state of a component (readTag), the value that is displayed (readTag), and even whether the component is displayed at all (hideTag). There are several more properties that utilize tags to control appearance and behaviors.
# Resizing Components
To change the size of a component once it has been created, click once on the object to select it. Squares appear on the components corners and edges. Drag these to change the size of the component. The size of a component may also be altered directly by changing the values in the component's geometry property.
# Moving Components
Click and drag to move a single or multiple components. Similar to resizing, you can use the component's geometry property to change it's position as well.
# Component Appearance
Several properties are provided that control the appearance of the component including it's text, borders, and colors. Most properties are self-explanatory (or self evident with some experimentation in OIB) and are not covered in detail in this manual.
# Layering Components
Components can overlay each other and their order can be changed by right clicking and selecting either Bring to Front (Ctrl+Home) or Send to Back (Ctrl+End). These commands are also in the Edit menu.
# Copy/Paste, Selecting
One or multiple components can be copy and pasted using standard keyboard shortcuts, right click menu, or the commands in the edit menu.
Advanced: You can copy/paste components to an external text editor for advanced editing needs (such as search/replace).
# State Change
You can also directly change the visible state on multi-state components using Page-Up or Page-Down, selecting the state in the State Editor, through the right-click menu, or through the Edit Menu.
# Rotation properties
Defined by two signed integers coordinates of rotation origin point (-32768..32768,-32768..32768). Rotation origin point is relative to component, so point (0,0) is top left corner of component. Point (0,0) is the default value.
Number of degrees the image is rotated around rotationOrigin point. The rotation value will be applied to the component when OI screen is loaded and rotationTag is missing, or before rotationTag value is read from PLC. Purpose of this property is also for testing in OIB when user develops OI screen - this is the way how to check how rotated image will look like. Default value is 0
Read tag, its value defines how many degrees the image is rotated around rotationOrigin point.
OI uses properties to set the appearance and behavior of components. These are set in the properties panel which can be opened by double clicking a component or screen, right-clicking and choosing to show properties, or using the Edit->Properties menu.
See also the Property Index.