Main 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.

This will be the main piece of our Beam Positioning application and will group the other components of this tutorial.

The finished result will look like this:

Main Screen for Beam Positioning Application

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 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: Beam Alignment.
  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 PyDMImageView, which will display the image coming from our camera:
  1. Drag and drop a PyDMImageView into the previously added QVBoxLayout under the QLabel that was added at Step 3.1.
  2. Set the imageChannel property to ca://13SIM1:image1:ArrayData.
  3. Set the widthChannel property to ca://13SIM1:image1:ArraySize1_RBV.
  4. Set the readingOrder property to Clike.
  5. Set the maxRedrawRate property to 30 so we can update the image at 30 Hz.
- Step 3.3.
  
  The third widget that we will add is a QVBoxLayout, which will be the placeholder for the controls area of the screen:
  1. Drag and drop a QVBoxLayout into the previously added QVBoxLayout under the PyDMImageView that was added at Step 3.2.
- Step 3.4.
  
  The fourth widget that we will add is a QLabel, which will be updated with the result of the calculation of beam position in the next section (Adding Code into the Main Display):
  1. Drag and drop a QVBoxLayout into the QVBoxLayout that was added in Step 3.3.
  2. Set the objectName property of this widget to lbl_blobs.
    
    Important
    
    It is very important to set the objectName property of widgets in the designer if you intend to access them using code, otherwise the names will be automatically assigned, and will not make much sense later on.
  3. Set the text property to empty so this label will only show information when we write to it using the code later on.
- Step 3.5.
  
  The fifth widget that we will add is a QLabel, which will be updated with the result of the calculation of beam position in the next section (Adding Code into the Main Display):
  1. Drag and drop a QVBoxLayout into the QVBoxLayout that was added in Step 3.3.
  2. Set the objectName property of this widget to lbl_blobs.
    
    Important
    
    It is very important to set the objectName property of widgets in the designer if you intend to access them using code, otherwise the names will be automatically assigned, and will not make much sense later on.
  3. Set the text property to empty so this label will only show information when we write to it using the code later on.
- Step 3.6.
  
  The sixth widget that we will add is another QLabel, which will show the title of our controls area:
  1. Drag and drop a QLabel into the QVBoxLayout that was added in Step 3.3 right under the QLabel added in Step 3.5.
  2. Set the text property of this label to: Controls.
  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.7.
  
  The seventh widget that we will add is a QFrame, which will be the container for our two motors’ Embedded Displays:
  1. Drag and drop a QFrame under the QLabel added in Step 3.6.
  2. Set the frameShape property to StyledPanel.
  3. Set the frameShadow property to Raised
  4. Set the stylesheet property to:
    QFrame#frame{ border: 1px solid #FF17365D; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
- Step 3.8.
  
  The eight widget that we will add is a PyDMEmbeddedDisplay, which will display the inline_motor.ui with information for our first motor axis:
  1. Drag and drop a PyDMEmbeddedDisplay into the QFrame added in Step 3.7.
  2. Right-click the QFrame from Step 3.7 and select Layout >> Layout Vertically.
  3. Set the macros property to {"MOTOR":"IOC:m1"}.
  4. Set the filename property to inline_motor.ui.
- Step 3.9.
  
  The ninth widget that we will add is a PyDMEmbeddedDisplay, which will display the inline_motor.ui with information for our second motor axis:
  1. Drag and drop a PyDMEmbeddedDisplay into the QFrame added in Step 3.7.
  2. Set the macros property to {"MOTOR":"IOC:m2"}.
  3. Set the filename property to inline_motor.ui.
- Step 3.10.
  
  Finally, the tenth widget that we will add is a PyDMRelatedDisplayButton, which will open the All Motors screen that will be developed later:
  1. Drag and drop a PyDMRelatedDisplayButton into the QVBoxLayout added in Step 2.
  2. Set the displayFilename property to all_motors.py.
  3. Uncheck the openInNewWindow property.
- Step 3.11.
  
  Once all the widgets are added to the form, it is now time to adjust the layouts and make sure that all is well positioned and behaving nicely.
  1. Using the Object Inspector at the top-right corner of the Qt Designer window, select the frame object and set the properties according to the table below:
    
    Property Value
    
    layoutLeftMargin 0
    
    layoutTopMargin 0
    
    layoutRightMargin 0
    
    layoutBottomMargin 0
    
    layoutSpacing 0
  2. Continuing with the Object Inspector, select the vertical layout object right before the frame and set the properties according to the table below:
    
    Property Value
    
    layoutSpacing 0
  3. Still with the Object Inspector, now select the top most verticalLayout object set the properties according to the table below:
    
    Property Value
    
    layoutSpacing 0
  The end result will be something like this:
Step 4.

Save this file as main.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 at the next steps when referenced.
Step 5.

Test the Expert Motor Screen:
```
pydm main.ui
```

Note

You can download this file using this link.

Property	Value
layoutLeftMargin	0
layoutTopMargin	0
layoutRightMargin	0
layoutBottomMargin	0
layoutSpacing	0