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

杨利霞

Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
+ O; P, @' M% I$ r" n/ u

文章目录
5 a2 _5 v7 ~! F$ s5 _在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
# l5 x5 P; p1 X) E6 B( P组件1：`jupyter qtconsole`
4 ^0 t+ S- H. G5 u组件2：`matplotlib FigureCanvas for qtwidget`
5 j9 `# D4 j1 `! b- ~8 f) t组件3：`pyqtgraph`
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
以下组件部分测试测试参考：

6 f  e! o6 _3 c参考的B站视频
$ k2 f% p: D7 ?# C/ [qtconsole 官方文档：The Qt Console for Jupyter
组件1：jupyter qtconsole
1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
, y. R. P* E( t: K) A    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
: ]" w+ P5 W' F- ?1
2、尝试启动
   jupyter qtconsole
1


2 c0 k' k3 ~, O3、尝试嵌入组件到pyside2 ui中

3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下
, b, n- V6 \- |) h2 u) k$ P; X
$ M& r5 P/ p! p" U3 f$ [9 s3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：

9 l6 r( D  d7 `& V: n) @/ r; b. Q
3.3、ui显示样式修改1: widget 样式表

/*设置父类窗体，背景边框等属性*/
5 z* }4 @0 i/ L2 n- iQWidget {
        background-color: rgb(33, 35, 45);
        padding: 8px;
        border: 2px solid #c3ccdf;
( r1 i9 H: k6 N. \/ q( E% Y        color: rgb(255, 255, 255);
        border-radius: 10px;
9 j; A7 _+ l& h% l3 [}
) n+ O! d. r2 h8 ^8 b, j' O1
7 R2 y% u1 v1 K8 ]4 ]' a2
7 _( H6 V5 ?8 W3
( g7 D; @2 w+ D( J- _4
5
6
* T6 o2 `; M5 R  n7
8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
( y+ a; T7 d% _9 m! a    self.set_default_style('linux')
" K$ }) ~) Y* q: ?9 C4 ~8 q1
3.5、该窗口的实例化在uic自动生成的代码中
; K# K  ?+ ~8 z7 y/ d" y; m3 W    self.ConsoleWidget = ConsoleWidget(self.frame_2)
    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
1 }7 Z; Z5 d2 x) p+ H1
! y2 A$ T$ ]4 e1 f; \+ ~1 F$ U3 I$ Y2
" \8 V) l- B4 c0 y7 V3.6、运行效果
( L3 ]3 R. {, R& }4 [6 ]
组件2：matplotlib FigureCanvas for qtwidget
! _1 C8 x, Y$ H7 b' j1、安装相关库, 指定清华源
. U4 y' u1 i' h6 v1 A0 x4 }2 W    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
1
. H0 X3 k6 v) o& f. f2
8 q" }9 K# p( O" X/ N3 U8 n9 q3
youtube 参考视频
网站教程
. k5 C7 @4 d7 |2 byoutube 参考视频: 不同主题风格调整方法，导入csv数据显示
2、 复制 MplWidget.py 文件到 gui/widget 目录下
  L- M/ ^/ v% U0 k: `$ B" f8 U3、测试 animation, Plotting Live Data in Real-Time

测试方法：plot_live_data()
  ?8 a9 N1 I5 `% S个人理解，animation 应该就是定义了一个与UI同线程的定时器。
组件3：pyqtgraph
参考视频1
参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph
6 q# \$ \$ T3 h7 f
, S# D2 f7 n6 ]1、安装相关库, 指定清华源
" [6 N- g" s, }& r; q7 m9 p& ]    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
+ T- [4 n! a: N1
# X! [7 N2 z, Q' s7 T1 @4 H( X2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
注意，每个点之间的采样时间实时性不是QTimer能保证的。
. j0 x! R  d/ S6 \6 u; t还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
* I$ |3 W5 B) G4 t4 X) ]5 X调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
方式1：在 plot() 方法前，调用 clear() 方法
  P5 f- V9 G: b$ D6 L) t9 P) ?方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
+ i- W! T* M$ E8 O0 T7 w) Z( p源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
/ F+ @1 c+ \, s! n* U& R   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
1
5 O, s) G& Q0 ^* I( ?2
) F7 ^9 v- W. }参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑
; B- c8 C9 R! z
右键RUN pyqtgraph_test.py，效果如下：

1 o& X1 ]* ]) V7 i5 H7 @- x% D7 z
5 G- n) H' f0 j: z7 `# @( ~# V文章知识点与官方知识档案匹配，可进一步学习相关知识
————————————————
( ~1 q$ o7 E$ s! ?1 O版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012928587/article/details/124547230