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

杨利霞

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


文章目录
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
组件1：`jupyter qtconsole`
组件2：`matplotlib FigureCanvas for qtwidget`
组件3：`pyqtgraph`
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
$ H* ?0 T* P6 V以下组件部分测试测试参考：

& n% t8 z3 ]' U' s+ A# C' F7 Y参考的B站视频
qtconsole 官方文档：The Qt Console for Jupyter
组件1：jupyter qtconsole
+ {! ]4 v7 c$ U& X% k/ k$ l1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
1
2、尝试启动
   jupyter qtconsole
6 K3 I0 z! a* L2 S/ R1
2 k# e: a) x+ }

3、尝试嵌入组件到pyside2 ui中

* H; a' ^0 C. m, f5 [9 i" B0 x3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下

, O& R/ o  |' m3 u8 p7 Q% [9 T3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：
# [3 h8 S! ~* [8 y% o0 X
" _# f' d! @3 S& ?4 J3 r& ]
3.3、ui显示样式修改1: widget 样式表

/*设置父类窗体，背景边框等属性*/
QWidget {
( ~/ }; h& `/ Q3 B4 d        background-color: rgb(33, 35, 45);
4 e3 x+ H4 U3 P, w/ N9 I. m5 a        padding: 8px;
" O/ R6 ?: m" ?        border: 2px solid #c3ccdf;
3 H4 j( o% z5 x        color: rgb(255, 255, 255);
        border-radius: 10px;
2 |- x1 O( n; G3 q}
9 A, q7 r0 `* v% E! I: ~; ^/ p8 P1
2
3
4
8 M0 L3 ^3 h# v: ?, W5
! f+ ?- c, s' q  K6
: c  k9 L3 m/ d7
8
' b& k& n9 g4 w, k6 p& `3.4、ui显示样式修改2：qtconsole启动界面风格指定
* e2 n! Z+ H2 E/ D7 y    self.set_default_style('linux')
6 H( h  N. J" ~4 [9 ~6 Z1
5 u! O! k' _: D. C( H% S( a3.5、该窗口的实例化在uic自动生成的代码中
0 Y* X% B+ C1 C# |. |7 k* Y    self.ConsoleWidget = ConsoleWidget(self.frame_2)
    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
5 ?& v9 o7 e" }# ~1
" P) S7 x) i7 f' Q% P: w2
/ x. T$ n7 w5 t$ O0 K1 V3.6、运行效果

0 ]: ^# T! N0 O  R: P$ }, Z6 M组件2：matplotlib FigureCanvas for qtwidget
1、安装相关库, 指定清华源
    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
: u; x1 x  s9 q( L  k3 M' r! C    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
. Q' O- K8 @" q' N2 x    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
; |1 i4 e$ a8 v( z" @2 G# s  A& T1
2
* Q3 m' w, ^; o7 K7 ]' V3
; k$ W- N) l! w! U! r% p% |. Syoutube 参考视频
/ m5 I9 C3 I2 y6 ?7 c7 j7 z; ^9 o网站教程
youtube 参考视频: 不同主题风格调整方法，导入csv数据显示
2、 复制 MplWidget.py 文件到 gui/widget 目录下
+ [) W, J+ l9 V# H" W3、测试 animation, Plotting Live Data in Real-Time

测试方法：plot_live_data()
( A: I' y7 X* B个人理解，animation 应该就是定义了一个与UI同线程的定时器。
. W3 u% q: ^, L0 ]: w% L组件3：pyqtgraph
) a7 e% K* x# q, F参考视频1
参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph

1、安装相关库, 指定清华源
/ i  H/ }7 s- p- O+ X    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
1
2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
3 x: r8 Z7 P+ G& z增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
5 c' I, [6 y3 u7 ~定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
: y9 R+ k1 }( V; A# X4 O注意，每个点之间的采样时间实时性不是QTimer能保证的。
& u# d& c' i1 }  p4 l/ a8 u0 A还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
' x, O0 d- z4 O- c0 o2 N调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
方式1：在 plot() 方法前，调用 clear() 方法
% {) W! D2 d+ @+ \% r' J' s方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
) b# `: i6 |% Z" G7 T2 D+ H. U3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
5 ~; A! h( G1 H6 P- `& P   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
1
2
+ L. S7 x2 Q: `( H: ]  f  r参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑

. I. O1 |( E7 b) a3 z右键RUN pyqtgraph_test.py，效果如下：


, ]' p8 s, h8 n2 s$ D- N1 O文章知识点与官方知识档案匹配，可进一步学习相关知识
————————————————
版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012928587/article/details/124547230


7 g& F9 F* d0 e: I