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

杨利霞

& f# D* d6 m2 n" iPython UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中


" _7 ?- Q) b) U( g( _文章目录
3 v" w+ A  W7 M/ q在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
组件1：`jupyter qtconsole`
组件2：`matplotlib FigureCanvas for qtwidget`
0 S" U3 V* a1 J& G0 F3 U组件3：`pyqtgraph`
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
以下组件部分测试测试参考：

; b* X' D$ m2 h9 ~2 [参考的B站视频
4 R( y$ K9 s+ m* D, J8 H% U' z  ~qtconsole 官方文档：The Qt Console for Jupyter
组件1：jupyter qtconsole
7 w, ^  R) X! ]. L' L( n9 Y9 O1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
1
2、尝试启动
   jupyter qtconsole
4 H$ p/ s( c. ?5 ^1


1 A" r% ]3 a4 G% \' Y- k3、尝试嵌入组件到pyside2 ui中
# T% t, r; O) H1 m( S3 P% F# N
$ u$ ^9 F( T: C. Q/ \3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下

# ~' X: g3 b& v6 j" {3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：


3.3、ui显示样式修改1: widget 样式表
; Z8 N; N9 K4 a
7 n; G0 G% ?1 z" s# U: a/ J/*设置父类窗体，背景边框等属性*/
  o& ?- N+ H" R/ s% W! }& lQWidget {
        background-color: rgb(33, 35, 45);
        padding: 8px;
1 D/ {5 A4 L* }' R8 h& o        border: 2px solid #c3ccdf;
' ]8 a: Z0 ?( f! d6 L. b8 _$ Y5 @        color: rgb(255, 255, 255);
        border-radius: 10px;
; Z( k; e! N4 K% U( V}
) w6 x! s# \. Z8 G* l4 S. X1 D1
2
5 j, k: \& H, M; J3
4
$ N- E! |3 P2 Q5 I' U' l" F5
6
7
: ~3 x2 Q$ ]5 b$ M8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
5 H+ H! @  Q& _8 z4 M. B' n) T    self.set_default_style('linux')
1
3.5、该窗口的实例化在uic自动生成的代码中
" L& V, T+ S" Q2 r1 k    self.ConsoleWidget = ConsoleWidget(self.frame_2)
    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
1
2
* A* K8 H0 }( q* t3.6、运行效果
( o; }! O! @3 y# z/ ~, z* N8 ]! v9 q
组件2：matplotlib FigureCanvas for qtwidget
1、安装相关库, 指定清华源
/ n& V9 f% s- }5 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
  q( x: l0 k4 |1
2
. o8 {4 Y* u: {: C1 E  w+ I; a8 \3
youtube 参考视频
, _5 q/ Y, k6 ~0 \% D8 I网站教程
3 n9 u2 B; [. ]$ v/ Y% Iyoutube 参考视频: 不同主题风格调整方法，导入csv数据显示
' n. }, h: L0 l6 F9 }2、 复制 MplWidget.py 文件到 gui/widget 目录下
3、测试 animation, Plotting Live Data in Real-Time

8 m* M) S; L2 I3 ]0 N测试方法：plot_live_data()
个人理解，animation 应该就是定义了一个与UI同线程的定时器。
组件3：pyqtgraph
- r5 _2 u: W& g0 g) W& [7 R参考视频1
参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph
0 `8 n( w' g9 i0 N% t' S, k
1、安装相关库, 指定清华源
& o# |' b+ l  I    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
1
2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
注意，每个点之间的采样时间实时性不是QTimer能保证的。
还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
5 Q4 g4 j8 U  C% y; q( b使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
方式1：在 plot() 方法前，调用 clear() 方法
/ a# E6 f1 [& S方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
* u+ G  I+ @! l% r3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
# R# ]# i# E( W$ |' _7 w源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
' {" @4 d: r; L0 u' H5 d0 G   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
1
- d: T2 {3 }8 q, p: t2
3 K0 M' I8 q& Z- g' E参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑

右键RUN pyqtgraph_test.py，效果如下：


文章知识点与官方知识档案匹配，可进一步学习相关知识
————————————————
版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012928587/article/details/124547230
7 o9 s" J8 f& j: H5 q2 Q
8 d9 R- E: k6 \, s
4 G  O0 ?7 Z- d