Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中

杨利霞

+ J% e* X* g9 e7 C8 wPython UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中


: a! B: b7 }8 l4 J文章目录
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
组件1：`jupyter qtconsole`
组件2：`matplotlib FigureCanvas for qtwidget`
8 N$ b$ q" G$ x7 W$ @7 X7 Y组件3：`pyqtgraph`
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
以下组件部分测试测试参考：

参考的B站视频
qtconsole 官方文档：The Qt Console for Jupyter
组件1：jupyter qtconsole
$ P0 l( j, t' v8 o8 ~0 M8 x# j1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
5 I6 q) N+ C+ J1 H2 Q4 p    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
/ }" l$ C0 A: z* J* B3 o4 \1
2、尝试启动
   jupyter qtconsole
1
  u, n, ^7 c- y, O. L0 j
* A8 O& f: t) |/ K+ u' X% M2 l
6 m0 G) `3 C- N3、尝试嵌入组件到pyside2 ui中

; o9 n+ j! O) i  I. f3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下

3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：
5 |7 W$ J% A$ c3 J! l

3 ]8 L; L# B  ~2 [3.3、ui显示样式修改1: widget 样式表

  U2 Y+ z3 K) N6 y! m3 J& [1 s/*设置父类窗体，背景边框等属性*/
1 c0 z0 a, y5 e, R2 t, eQWidget {
        background-color: rgb(33, 35, 45);
& A8 v' r) F' e; F+ t        padding: 8px;
        border: 2px solid #c3ccdf;
- Z/ F+ w0 `$ p% B        color: rgb(255, 255, 255);
        border-radius: 10px;
9 i: j1 S3 g& \2 S}
1
2 x4 i5 F7 ]& u& j  y2
4 l7 b8 _; s' Y" a" S9 U& E) [+ P& ?3
, m( k1 u, d( [, B4
: p. i" _& ^; h5
6
7
9 S2 p. r. ^1 D4 ^1 T8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
: z" m0 B5 v$ z, i6 {' b# N    self.set_default_style('linux')
1
& |# F; g5 ~2 z# {3.5、该窗口的实例化在uic自动生成的代码中
    self.ConsoleWidget = ConsoleWidget(self.frame_2)
4 Y2 G" z, H; K    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
1
( Q+ x1 ?- D+ P! M2 T' c2
3.6、运行效果
9 ]0 `) c$ j1 v3 U
组件2：matplotlib FigureCanvas for qtwidget
6 o' V2 o1 w: ^& }0 v; _5 e1、安装相关库, 指定清华源
    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
9 s& M3 \. H, |7 t    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
1
2
2 H% @/ I* l6 X% e4 S& h% @9 }3
youtube 参考视频
网站教程
youtube 参考视频: 不同主题风格调整方法，导入csv数据显示
8 H; y' T) K1 Y2 L2、 复制 MplWidget.py 文件到 gui/widget 目录下
; T: f( Z. L% {" P3、测试 animation, Plotting Live Data in Real-Time

测试方法：plot_live_data()
个人理解，animation 应该就是定义了一个与UI同线程的定时器。
组件3：pyqtgraph
参考视频1
参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph
0 `  `7 V5 ~2 k3 B
  V% f  O; n2 G- a; m5 T7 e2 M" F1、安装相关库, 指定清华源
    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
* }9 e6 B5 V5 b. e' d# O1
0 }0 A; {8 V* E3 X2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
) k, d0 d1 K. ]$ F1 x* G! P* y增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
注意，每个点之间的采样时间实时性不是QTimer能保证的。
还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
9 [4 p) c) w# h  {) F( W调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
( q9 m. m' r+ m# o1 b- j- D方式1：在 plot() 方法前，调用 clear() 方法
方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
' f) b  Y5 G: d3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
# u5 [, B) @: h# |源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
1
7 R' Z- K9 `1 B. i* H# h1 a- ^2
# y8 C; j* m( ?# G8 z参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑

右键RUN pyqtgraph_test.py，效果如下：
& y/ _2 I0 N5 U* M
8 B6 E0 N% S1 h& ~3 Y" o+ x
/ G4 _# s6 B, {! {4 t文章知识点与官方知识档案匹配，可进一步学习相关知识
————————————————
) V! ?& y$ ]/ ?8 C# H. P版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
$ o% X3 _& a; V+ x原文链接：https://blog.csdn.net/u012928587/article/details/124547230
) d2 q5 b3 {' p; k% y

6 `; P) O* y5 M! R# w1 t! o