Expert Motor Screen¶

Important

Check-list:

Make sure that you have your Environment properly configured.
That your Virtual Machine is up and ready.
That the Python environment is set.
That all three IOCs are running.

For this screen we will present detailed information to the user for the motors. Also, to ensure that we can re-use this screen in other displays, it will be necessary to use Macro Substitution that will later be replaced by the proper information for each motor.

The finished result will look like this:

Expert Motor Screen

Step 1.

Let’s start by opening the Qt Designer and creating a new Widget.
Step 2.

With the new form available, let’s add a QVBoxLayout widget and make it fill the whole form. Let’s select Layout Vertically for the Form.

Step 3.

Now that we have a layout, let’s take a look at the widgets we’ll use on this screen:

Step 3.1.

The first QLabel will be the title of our screen:
1. Drag and drop a QLabel into the previously added QVBoxLayout.
2. Set the text property of this label to: Configuring Motor: ${MOTOR}.
  
  Note
  
  Macro Substitution are not something exclusive to PyDM Widgets, they can be used with any kind of widget (even the basic Qt widgets) and in any property. In this case we are using it to add the motor PV name to the title. However, due to limitations in Qt Designer, you cannot specify a macro for a variable that is numeric-only inside Designer itself. An (unfortunate) work-around is to edit the .ui file in a text editor, and insert your macro variable into the XML that defines the display.
3. In order to make the label look better as a title, add the following to the stylesheet property:
```
QLabel {
 qproperty-alignment: AlignCenter;
 border: 1px solid #FF17365D;
 border-top-left-radius: 15px;
 border-top-right-radius: 15px;
 background-color: #FF17365D;
 padding: 5px 0px;
 color: rgb(255, 255, 255);
 max-height: 25px;
 font-size: 14px;
}
```
Step 3.2.

The second widget that we will add is a QFrame, which will be the container of the fields in our form:
1. Drag and drop a QFrame into the previously added QVBoxLayout under the QLabel that was added at Step 3.1.
2. Set the frameShape property to StyledPanel.
3. Set the frameShadow property to Raised.
4. In order to add some nice rounded corners to this frame, add the following to the stylesheet property:
```
QFrame#frame{
     border: 1px solid #FF17365D;
     border-bottom-left-radius: 15px;
     border-bottom-right-radius: 15px;
}
```
Step 3.3.

Now to ensure the alignment and positioning of the form content, let’s add a QFormLayout:
1. Drag and drop a QFormLayout into the previously added QFrame.
2. Right-click the QFrame and select Layout > Layout Vertically.
  - This will make the QFormLayout fill the whole space of the QFrame and make our form behave better when resizing.
3. Set the frameShadow property to Raised.
4. In order to add some nice rounded corners to this frame, add the following to the stylesheet property:
```
QFrame#frame{
     border: 1px solid #FF17365D;
     border-bottom-left-radius: 15px;
     border-bottom-right-radius: 15px;
}
```
Step 3.4.

Now that we have our QFormLayout ready, it is time to start adding the form widgets. Let’s start with the first pair of QLabel and PyDMLineEdit that will be used to edit the Description of the Motor:
1. Drag and drop a QLabel into the the previously added QFormLayout.
2. Set the text property to Description:.
3. Drag and drop a PyDMLineEdit into the QFormLayout paying attention to add it on the right side of the previously added QLabel.
  
  Note
  
  The area that will match the QLabel will be highlighted with red borders. When that happens you will know that the widget will be placed at the expected place.
4. Set the channel property to ca://${MOTOR}.DESC.
5. Set the displayFormat property to String.
Step 3.5.

Let’s now add the second pair of QLabel and PyDMLineEdit that will be used to edit the Position of the Motor:
1. Drag and drop a QLabel into the the previously added QFormLayout right under the previously added components.
  
  Note
  
  The area will be highlighted with blue line. When that happens you will know that the widget will be placed at the expected place.
2. Set the text property to Position:.
3. Drag and drop a PyDMLineEdit into the QFormLayout paying attention to add it on the side of the previously added QLabel.
4. Set the channel property to ca://${MOTOR}.VAL.
5. Set the displayFormat property to Decimal.
6. Select the showUnits property.
7. Expand the maximumSize property and set the Width property to 150.
Step 3.6.

Let’s now add a QLabel, and this time, a PyDMLabel that will be used to read the Readback Position of the Motor:
1. Drag and drop a QLabel into the the previously added QFormLayout right under the previously added components.
2. Set the text property to Readback:.
3. Drag and drop a PyDMLabel to the QFormLayout paying attention to add it on the right side of the previously added QLabel.
4. Set the channel property to ca://${MOTOR}.RBV.
5. Set the displayFormat property to Decimal.
6. Select the showUnits property.
Step 3.7.

Let’s add another QLabel and PyDMLineEdit pair that will be used to edit the Velocity of the Motor:
1. Drag and drop a QLabel into the the previously added QFormLayout right under the previously added components.
2. Set the text property to Velocity:.
3. Drag and drop a PyDMLineEdit to the QFormLayout paying attention to add it on the side of the previously added QLabel.
4. Set the channel property to ca://${MOTOR}.VELO.
5. Set the displayFormat property to Decimal.
6. Select the showUnits property.
7. Expand the maximumSize property and set the Width property to 150.
Step 3.8.

And now to the last QLabel and PyDMLineEdit pair that will be used to edit the Acceleration of the Motor:
1. Drag and drop a QLabel into the the previously added QFormLayout right under the previously added components.
2. Set the text property to Acceleration:.
3. Drag and drop a PyDMLineEdit to the QFormLayout paying attention to add it on the side of the previously added QLabel.
4. Set the channel property to ca://${MOTOR}.ACCL.
5. Set the displayFormat property to Decimal.
6. Select the showUnits property.
7. Expand the maximumSize property and set the Width property to 150.

Step 3.9.

Once all the widgets are added to the form, it is now time to adjust the layouts and make sure that everything is well-positioned and behaving nicely.

Using the Object Inspector at the top-right corner of the Qt Designer window, select the formLayout object and set the properties according to the table below:

Property	Value
layoutTopMargin	6
layoutRightMargin	6
layoutBottomMargin	6
layoutHorizontalSpacing	10
layoutVerticalSpacing	10
layoutLabelAlignment > Horizontal	AlignRight
layoutLabelAlignment > Vertical	AlignVCenter
layoutFormAlignment > Horizontal	AlignLeft
layoutFormAlignment > Vertical	AlignVCenter

Continuing with the Object Inspector, select the frame object, scroll down the Property Editor until the end and set the properties according to the table below:

Property Value

layoutLeftMargin 0

layoutTopMargin 0

layoutRightMargin 0

layoutBottomMargin 0

layoutSpacing 0
Still with the Object Inspector, now select the verticalLayout object that is right under the Form object and set the properties according to the table below:

Property Value

layoutSpacing 0
Finally, with the Object Inspector select the Form object set the properties according to the table below:

Property Value

geometry > Width 450

geometry > Height 217

layoutLeftMargin 0

layoutTopMargin 0

layoutRightMargin 0

layoutBottomMargin 0

layoutSpacing 0

The end result will be something like this:

Step 4.

Save this file as expert_motor.ui.

Warning

For this tutorial it is important to use this file name, as it will be referenced at the other sections. If you change it please remember to also change it in the next steps when referenced.

Step 5.

Test the Expert Motor Screen:

pydm -m '{"MOTOR":"IOC:m1"}' expert_motor.ui

Note

You can download this file using this link.

Property	Value
geometry > Width	450
geometry > Height	217
layoutLeftMargin	0
layoutTopMargin	0
layoutRightMargin	0
layoutBottomMargin	0
layoutSpacing	0