Main Screen

Important

• Make sure the PCASpy tutorial server is 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 Vertical Layout 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 Label will be the title of our screen:

    1. Drag and drop a Label into the previously added Vertical Layout.

    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 Vertical Layout under the Label that was added at Step 3.1.

    2. Set the objectName property to imageView.

    3. Set the imageChannel property to ca://IOC:Image.

    4. Set the widthChannel property to ca://IOC:ImageWidth.

    5. Set the readingOrder property to Clike.

    6. 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 Vertical Layout, which will be the placeholder for the controls area of the screen:

    1. Drag and drop a Vertical Layout into the previously added Vertical Layout under the PyDMImageView that was added at Step 3.2.

  • Step 3.4.

    The fourth widget that we will add is a Label, 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 Label into the Vertical Layout 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 another Label, which will show the title of our controls area:

    1. Drag and drop a Label into the Vertical Layout that was added in Step 3.3 right under the Label 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.6.

    The sixth widget that we will add is a Frame, which will be the container for our two motors’ Embedded Displays:

    1. Drag and drop a Frame under the Label 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.7.

    The seventh 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 Frame added in Step 3.7.

    2. Right-click the Frame 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.8.

    The eigth 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 Frame 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.9.

    Finally, the ninth 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 Vertical Layout added in Step 2.

    2. Add the string all_motors.py to the filenames property.

    3. Uncheck the openInNewWindow property.

    4. Set the text property to: View All Motors

  • Step 3.10.

    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

Purple borders will appear around any widgets that have “Alarm Sensitive Border” enabled. These can be removed by simply unchecking the setting. (for the purposes of this tutorial, these borders are not significant and can be in either the on or off state)

Note

You can download this file using this link.