这将是光束定位应用的主要部分，并整合了本教程中的其他组件。

最终界面效果如下图所示：

第一步: 打开Qt Designer并且创建一个新Widget控件.

第二步: 有了这个新窗体, 添加一个Vertical Layout控件,并且使它填满整个状体. 为这个窗体选择Layout Vertically.

第三步: 我们有了这个结构, 看一下屏幕上的控件.

第3-1步: 第一个Label将是窗口的标题:

1. 拖拽一个Label到先前添加的Vertical Layoyt.
2. 设置这个标签的text属性: Beam Alignment.
3. 为了使得这个标签看起来更像标题, 添加以下到stylesheet属性:

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;
}

第3-2步: 我们将添加的第二个控件是PyDMImageView, 它将显示来自摄像机的图像:

1. 拖拽PyDMImageView到先前添加的Vertical Layout中在第3-1步中的Label下面.
2. 设置objectName属性是imageView.
3. 设置imageChannel属性为ca://IOC:Image.
4. 设置widthChannel属性为ca://IOC:ImageWidth
5. 设置readingOrder属性为Clike.
6. 设置maxRedrawRate属性为30,因此我们以30Hz更新图像.

第3-3步: 我们将添加的第三个控件是Vertical Layout, 它将是屏幕控制区域的占位符.

1. 拖拽一个Vertical Layout的控件到先前添加的Vertical Layout中在第3-2步中添加的PyDMImageView的下方.

第3-4步: 我们添加的第四个控件是Label, 它将更新在下一章中束线位置计算的结果.

1. 拖放一个Label到在第3-3步中添加的Vertical Layout中.
2. 设置这个控件的objectName属性为lbl_blobs.
3. 设置text属性为空, 因此这个标签仅在之后我们使用代码向其写入时才显示信息.

注意: 若要通过代码访问控件，在设计器中设置其 objectName 属性至关重要；否则控件名称将被自动分配，并且之后没有太多意义。

第3-5步: 我们要添加的第五个控件是另一个Label, 它将显示我们控制区域的标题:

1. 拖放一个Label到第3-3步添加的Vertical Layout中, 在第3-5中添加的Label下面.
2. 设置这个标签的text属性为: Controls
3. 为了使得这个标签看起来更像标题, 添加以下到stylesheet属性:

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;
}

第3-6步: 我们将添加的第6个控件是Frame, 它将是我们两个电机的Embedded Displays的容器.

1. 拖放一个Frame到第3-6步添加的Label下方.
2. 设置frameShape属性为StyledPanel
3. 设置stylesheet属性为:

QFrame#frame{
    border: 1px solid #FF17365D;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

第3-7步: 我们添加的第7个控件是PyDMEmbededDisplay, 它将用我们第一个电机轴的信息显示inline_motor.ui.

1. 拖放一个PyDMEmbeddedDisplay到第3-7步添加的Frame中.
2. 右击第3-7步中的Frame并且选择Layout >> Layout Vertically.
3. 设置macros属性为{"MOTOR":"MOTORVM:m1"}
4. 设置filename属性为inline_motor.ui.

第3-8步: 要添加的第8个控件是PyDMEmbededDisplay, 它将用我们第二个电机轴的信息显示inline_motor.ui.

1. 拖放一个PyDMEmbeddedDisplay到第3-7步添加的Frame中.
2. 设置macros属性为{"MOTOR":"MOTORVM:m2"}
3. 设置filename属性为inline_motor.ui.

第3-9步: 最后, 要添加的第9个控件是PyDMRelatedButton, 它将打开之后开发的All Motors窗口:

1. 拖放一个PyDMRelatedDisplayButton到第2步中添加的Vertical Layout.
2. 添加字符串all_motors.py到filenames属性.
3. 取消勾选openInNewWindow属性.
4. 设置text属性为: View All Motors.

第3-10步: 将所有控件添加到表单后，接下来需要调整布局，确保每个元素位置合理且响应行为良好。

1) 使用Qt Designer窗体右上角的Object Inspector, 选择frame对象,并且根据以下表格设置属性.

2) 继续使用Object Inspector, 选择就在frame前的vertical layout对象并且根据以下表格设置属性:

3) 继续使用Object Inspector, 现在选择最顶层vertical layout对象并且根据以下表格设置属性:

最终结构将像这样:

第4步: 保存这个文件为main.ui.

第5步: 测试.

(PYDM) blctrl@blctrl-s3:~/pydir$ pydm main.ui

注意: 启用“报警敏感边框”的控件周围将显示紫色边框。只需取消勾选该设置即可移除这些边框。（在本教程中，这些边框的设置不影响功能实现，是否开启此设置均可）