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

杨利霞

Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
3 m: I3 u, l) R& W& W

文章目录
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
组件1：`jupyter qtconsole`
& I" s, Y  L% t" a, [组件2：`matplotlib FigureCanvas for qtwidget`
组件3：`pyqtgraph`
# b' j5 S1 s5 F. B. N( u在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
7 x& H4 t1 p2 I7 O$ U# x7 t以下组件部分测试测试参考：

参考的B站视频
qtconsole 官方文档：The Qt Console for Jupyter
# k/ E0 W2 h8 s( E组件1：jupyter qtconsole
1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
6 }8 i4 F0 e2 Y8 e5 O; I3 X5 ^1
* b; n6 q8 z% _' W2、尝试启动
   jupyter qtconsole
( p+ v5 e( a# J0 j1 L1
: e0 h: e; P2 _" L$ i$ K4 X

3、尝试嵌入组件到pyside2 ui中
; ?2 r1 \$ m3 M( o' k# A
, p5 m4 y3 ]: h( Q) `* |3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下
1 O6 c( r5 b9 u$ v2 V9 }
3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：
8 W& T" j6 Z; P  ]9 i
; c& a$ I; Z) f, L7 \$ i5 t
3.3、ui显示样式修改1: widget 样式表
$ h- Y; ^0 ~* z: a" L0 d. u
( M1 l  p* t/ T( x/*设置父类窗体，背景边框等属性*/
QWidget {
, Q& Z- t- h% Q4 r4 [        background-color: rgb(33, 35, 45);
- T) k, u+ L# a) n9 u# S        padding: 8px;
; m* u. D8 e2 R. g        border: 2px solid #c3ccdf;
( H) e% h9 c0 ~, G& z& u        color: rgb(255, 255, 255);
2 u6 n, N8 r/ g& O        border-radius: 10px;
}
6 r4 r" E) d, _! q( r% J1
+ w: T1 l/ F0 a0 i* [2
+ I$ S, \) V9 f% E3
4
5
" o( V6 [. d. N, b0 p6
7 a5 C  G- m# v) H& S, l( y& N  F9 ^7
8 I7 \+ e4 `3 D3 M0 y8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
    self.set_default_style('linux')
1
% Z1 w% c* Y1 X8 j5 d6 k( |3.5、该窗口的实例化在uic自动生成的代码中
    self.ConsoleWidget = ConsoleWidget(self.frame_2)
5 P( ?& f% `( W0 v; S+ Z    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
' Z" d7 I! |: l2 b! P1
* D( c- ?+ ~; g8 o" T% F# d  }2
1 i& Y8 f" l# R. N3.6、运行效果
" o. R  V5 ?% g; z
6 C' d9 I/ C: R组件2：matplotlib FigureCanvas for qtwidget
1、安装相关库, 指定清华源
" R" {5 }  |, c* F/ f5 r( N    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
3 l2 g) r4 E1 \1 h$ C    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
1
2
/ A" p1 y: Z4 p! b3
youtube 参考视频
: f( j, U7 |6 Y8 w3 H2 v网站教程
6 f; }! n  A3 b1 B* a  X& C7 Jyoutube 参考视频: 不同主题风格调整方法，导入csv数据显示
2、 复制 MplWidget.py 文件到 gui/widget 目录下
* B' W1 y. O; I2 o3、测试 animation, Plotting Live Data in Real-Time
, m3 j. I& T- y
% {& z& `: B( X, t0 I/ p测试方法：plot_live_data()
! p+ _8 c( U5 X& ^9 ~- P8 ?- \个人理解，animation 应该就是定义了一个与UI同线程的定时器。
8 t% M" Z5 \! N+ @组件3：pyqtgraph
参考视频1
0 _- t( r1 g3 l' y参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph

, v7 u! |: V* i# ]7 C1、安装相关库, 指定清华源
    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
1
) S: k' E( D) N9 q; H" J' ?2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
+ n% b+ I7 _; Q( l7 W! E0 h3 v5 |定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
" B$ e; s( x1 x- Q0 f3 p7 N注意，每个点之间的采样时间实时性不是QTimer能保证的。
还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
. e  g' f6 }) F8 ]" X) j. M# R使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
" D5 }4 F4 x5 ^3 Q$ ]  R; z调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
方式1：在 plot() 方法前，调用 clear() 方法
方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
! j  j( X! t, e& T" U: L3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
% y# J% `# i8 R  t+ F& u源工程运行前，需要安装的库，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
3 a/ z5 R8 ~$ {7 {$ d6 E1 h& V5 ~7 v4 _1
2
4 l3 i# Y2 D7 ~3 p; y; F参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑
7 A* y$ t! G3 z. g) X
; p/ [; A# P/ h右键RUN pyqtgraph_test.py，效果如下：
- O" c  i; P8 N' r. Z5 ]; O
2 e2 o# u+ u# h- L/ O1 n" y: ^$ r
3 C5 y. N4 }  g5 D: }4 O5 H: w文章知识点与官方知识档案匹配，可进一步学习相关知识
. }8 C. [9 t0 U) N- @# Q& R————————————————
版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
0 D6 @* ~8 G# N原文链接：https://blog.csdn.net/u012928587/article/details/124547230
: {" b) R- |( w- O( Y# Y3 u% a: C, f; v$ d

( p0 t5 [) t+ a( ^& H