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

杨利霞

6 Z8 V" \, ]6 f& ]0 x2 [Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中

+ |  c4 L: _! Q# N' k9 k/ _
文章目录
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
% |5 {) r5 I2 Z# ~7 b6 g% p组件1：`jupyter qtconsole`
- |" s: M2 ?5 ]" z% s& k组件2：`matplotlib FigureCanvas for qtwidget`
组件3：`pyqtgraph`
/ ]$ D" C2 W3 a  V6 D在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
7 F% l  T3 `6 A  `9 v) |5 a% l) i以下组件部分测试测试参考：

0 w, t  V; @  f* V' k参考的B站视频
% Q* m- B" y  V2 u$ R2 Uqtconsole 官方文档：The Qt Console for Jupyter
3 B; Z5 m: e. e- L! I- ^组件1：jupyter qtconsole
; {* n0 m& Z" |* H1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
/ ?1 x7 P+ D4 W- P. G) p  B1
! R& l# U: }& h  m1 z  m. k" D0 F! ^2、尝试启动
% h! W4 t# u6 i8 v" L* J) K   jupyter qtconsole
/ E+ o( Q* e, _/ {6 X- ?1 R: A; [& H1

: z5 E, l% L9 ]$ h' V
3、尝试嵌入组件到pyside2 ui中
) M) q0 P& x7 d* s2 b! P
2 H8 s: s0 g6 r% ]7 c$ w# E$ m+ O3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下
$ k. k- Z/ b! X: w
3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：

# \3 |* h! X6 l# @% g
3.3、ui显示样式修改1: widget 样式表

2 u/ {8 Y, q; b: e/*设置父类窗体，背景边框等属性*/
QWidget {
8 ^* H0 S$ R7 t        background-color: rgb(33, 35, 45);
2 j% l) s5 ?+ ?7 N4 H        padding: 8px;
- r( L4 A0 G8 p, ^9 v* i, z        border: 2px solid #c3ccdf;
! O" i3 s. ~- K$ x0 K3 b        color: rgb(255, 255, 255);
        border-radius: 10px;
}
4 B/ W  c0 y/ H7 m  g1
2
* U" p0 a: v& \# S, y# _9 [1 Q3
4
1 T9 K4 ?0 Q2 p2 ?& T1 ?# D9 Q5
6
7
' ?4 {. s/ h" l% ^8
' O9 f  U9 C+ n! z, L% K, S9 U3.4、ui显示样式修改2：qtconsole启动界面风格指定
( h6 N3 ^0 Z9 ]: l- [' M- F- A& y    self.set_default_style('linux')
) y! z/ {; \- C2 q! }& K1
) n! y2 y4 a: E$ i# U8 h3.5、该窗口的实例化在uic自动生成的代码中
) \/ r% ]6 ^1 q+ l: R) o. ~9 u# b+ ^    self.ConsoleWidget = ConsoleWidget(self.frame_2)
    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
1
+ F- q! W$ A' x# T" X2
3.6、运行效果
; E" d" T; [$ M6 P4 X, `! `! Q
组件2：matplotlib FigureCanvas for qtwidget
& U! O9 u+ p  I- P) _6 P. p: n3 }1、安装相关库, 指定清华源
; n0 D4 P$ `8 [+ k( _0 n  I( t  w    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
. R" U2 Y% v* F4 V4 {  Q& @    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
+ @( D( q0 P( t+ q8 k& c. t1
5 Q$ B2 e5 u: `, E8 A& [1 y* S9 c2
  L9 \) l: m  L9 ]3
youtube 参考视频
0 f$ b' I5 H, b网站教程
youtube 参考视频: 不同主题风格调整方法，导入csv数据显示
2、 复制 MplWidget.py 文件到 gui/widget 目录下
0 v( o; Q- a5 p; W% ?3、测试 animation, Plotting Live Data in Real-Time
- G5 l4 T2 F! U
! f" f0 l0 D4 J测试方法：plot_live_data()
个人理解，animation 应该就是定义了一个与UI同线程的定时器。
组件3：pyqtgraph
+ K4 S9 n% y. y; b2 c参考视频1
. F! e0 R% i3 m+ V参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph

. }" X+ @' U6 z  b; Z1、安装相关库, 指定清华源
    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
3 \" p+ f, T+ x4 A' a; x  ~6 r  G1
2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
! s) e! T# F- O9 ]定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
注意，每个点之间的采样时间实时性不是QTimer能保证的。
1 J6 D8 Z, C. C! K还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
1 [# z$ n& D$ G# O方式1：在 plot() 方法前，调用 clear() 方法
方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
" W4 S/ Z4 D$ t) y9 t! m. @' ^源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
6 Q3 P+ Q* Z" q' h8 X   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
1
8 p1 z: c! B; Q& h# W2
参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑
5 S- ^' v! P+ e6 ]$ N( D7 s
# |1 D) P6 r. \0 R+ H' N/ }) ?右键RUN pyqtgraph_test.py，效果如下：
/ [/ i6 ^# I; T) q
! v' b( E5 R2 t! |9 i4 X9 J
文章知识点与官方知识档案匹配，可进一步学习相关知识
% [; n7 s& ?" ~- u1 w3 L. [" V————————————————
" D' U3 p# e8 q7 W7 U; ~$ w版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012928587/article/details/124547230
, ~( M2 n. Q" n3 ~7 `% _