数学建模社区-数学中国
标题:
Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
[打印本页]
作者:
杨利霞
时间:
2022-9-15 12:28
标题:
Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
& W. A$ P1 P2 n! o
Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
* u3 x6 q9 \' a, j0 \ ^0 P5 A; |
7 W- y# Q& C3 f. x9 t
7 Q! x" _, A/ }1 u
文章目录
# ~0 ^/ v- {, Z: K
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
* f. b8 C; [- L! ]8 U8 u" ^
组件1：`jupyter qtconsole`
$ \' \' w5 G7 ^
组件2：`matplotlib FigureCanvas for qtwidget`
- |9 O- U* t# H( P3 B. B; R
组件3：`pyqtgraph`
+ X8 u; x; S" c c3 G5 h) m
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
. `8 ^& w7 J) ]& U* m6 L
以下组件部分测试测试参考：
* t3 w) q" _4 Q) r" o
$ X9 D7 w$ B1 c3 e
参考的B站视频
% p0 ` {& u% E2 c4 v
qtconsole 官方文档：The Qt Console for Jupyter
$ E3 d* [* o) o% u- M1 a
组件1：jupyter qtconsole
' i. w5 ^1 A2 m! d
1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
2 D% t2 r2 ~2 m5 T0 @
pip install qtconsole -i https://pypi.tuna.tsinghua.edu.cn/simple
& n! ]8 k6 i4 u( u0 D) M q7 B
1
8 L3 n- u6 U7 E& O/ c+ P
2、尝试启动
* p2 \! j( A; I; o
jupyter qtconsole
2 r1 o6 A% V1 ?2 w9 D3 Y A1 k2 u
1
4 @$ h* ^: \) y6 M v8 p
' f8 |% C% r9 g8 J* |1 Z/ X3 I
7 v- }. h* W: A4 j
3、尝试嵌入组件到pyside2 ui中
/ d4 d/ e+ G0 J: f6 ]
; Y4 w) Z% Q) y; s: m
3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下
+ S3 J+ A! P% T- o
; K2 Z; i8 K R, p
3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：
, ?, |/ C% i. A; ]) y8 ]
4 p5 w _+ a- f2 r* u, h- Q
0 @/ |1 \$ |4 ~- ~: s& L
3.3、ui显示样式修改1: widget 样式表
- Y8 H" a, v0 g+ ]2 \0 @' y9 ~
: w/ ]% k6 G# g- B4 N: o7 G
/*设置父类窗体，背景边框等属性*/
3 N8 ?2 ]# b: l$ i0 X" v& _, l
QWidget {
) F; A- I+ j5 j4 @! Y5 F
background-color: rgb(33, 35, 45);
* d: t% ^2 J/ o6 K& e [6 S7 R
padding: 8px;
+ [" k% h/ k, V3 O. y) B
border: 2px solid #c3ccdf;
- X7 `8 \* F4 N# ?& l' i) a7 E9 Z1 D
color: rgb(255, 255, 255);
6 o3 H" [ O- j
border-radius: 10px;
3 B( w Y6 `6 q
}
1 j/ `1 h9 j& S3 P
1
8 R2 L7 z- @$ f
2
& V) N! a2 l2 F% D% o7 _5 Q6 `
3
2 A" m, {$ h6 y# M+ O5 i5 B
4
5 J: k1 M. @7 E( y4 A
5
5 z0 L( G2 e" e1 V" D& h
6
) [- x7 ?/ v2 ^3 G) o: [
7
6 }4 s% m! z* V' Z
8
) ]3 l, N' I3 M/ P4 f
3.4、ui显示样式修改2：qtconsole启动界面风格指定
' j, ^' q; ?; c; h
self.set_default_style('linux')
8 [9 ~% p" J* I
1
8 O+ n. y4 b( j: z7 N- O
3.5、该窗口的实例化在uic自动生成的代码中
4 [0 t/ S* X! y! B
self.ConsoleWidget = ConsoleWidget(self.frame_2)
7 ], X% E; j1 O* t0 r, F0 Y
self.ConsoleWidget.setObjectName(u"ConsoleWidget")
3 C. j, g+ D& _7 t+ _
1
2 c( M# A0 e0 d0 E5 d5 J& G
2
7 T# ]+ ~8 c# ]9 M. x
3.6、运行效果
6 N4 W+ B& L. e2 w7 l6 |0 _' \
6 u% h/ O4 L6 U: E- D8 i8 G: ?, k
组件2：matplotlib FigureCanvas for qtwidget
1 f7 A4 B, ^% U U7 v% T3 ]' p* M
1、安装相关库, 指定清华源
3 w% v9 e F. O1 J/ {$ g7 O3 e# U
pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
& t6 e6 F- O' ?: j% N0 T6 z! I
pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
: V$ u- A7 m6 V- b1 M
pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
% I! T: C4 h5 W5 q
1
* w% |& O* R+ F4 G6 \
2
" m, Q6 j/ P5 L# N% ~7 b3 e
3
; j( _% ~" V/ l' r; v; |0 Y
youtube 参考视频
# S# j2 S0 N% `
网站教程
; @8 ]8 t8 l9 O5 F# e
youtube 参考视频: 不同主题风格调整方法，导入csv数据显示
: `/ N& b0 Q2 w3 C9 D+ P
2、 复制 MplWidget.py 文件到 gui/widget 目录下
, M6 N/ Q D2 H l( P
3、测试 animation, Plotting Live Data in Real-Time
; f* R- V$ W& ]- `% f& F/ p
6 B1 @! }8 u, b/ i$ x% ^ ~: p6 z
测试方法：plot_live_data()
" Z% f7 A- a0 {
个人理解，animation 应该就是定义了一个与UI同线程的定时器。
' }9 Z( F% F6 g- C- r y+ D7 A/ }
组件3：pyqtgraph
4 a, G5 F* b0 A5 }" Q
参考视频1
8 }( E" g( Q$ ]8 A b# x, N
参考视频2
et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph
* f" }# w3 J# S) r' p) Q1 j
+ W8 |. L2 j+ f# {4 A' _( t% ^! i
1、安装相关库, 指定清华源
! r% N) b/ z/ @; k) C7 Q
pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
5 r7 }) U$ ?( H" n! @5 u+ B& Y/ }# y
1
" X5 S, T# P p9 c
2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
/ ?: \; v9 z+ B! F e
增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
( v7 @. T1 o& r" w
定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
6 d# F) |4 J$ ?' n H, o
注意，每个点之间的采样时间实时性不是QTimer能保证的。
% e# @" j3 j4 r! Y: M/ J9 m# w& Y( |
还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
# N/ w6 J3 a1 l. Z/ ?; B1 v
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
+ f9 _+ _9 H# t \& P! q) d
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
# S2 Z: G G2 u. ^0 x, k, l7 B
方式1：在 plot() 方法前，调用 clear() 方法
' c) K0 b0 A% c3 |( e" t, y8 {$ s
方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
* ~' j4 L' k# ^, e
3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
: d9 y3 C6 o2 b$ n* l
源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
: k7 [) A0 K. j; E- U& t1 Z
pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
0 X" h! A/ ] _* r0 v5 j. d* z% k
conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
. _4 `$ ?3 ~& H9 t
1
8 r' m( D- i8 G+ G& M( {6 {
2
$ ] t7 k& h9 M8 v; L
参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑
6 O% B& P: @" H7 H- c& y* k. E
. X5 d+ r( @4 n3 x( d, w( F) K
右键RUN pyqtgraph_test.py，效果如下：
% L" n8 ^" M1 r+ z
$ ]* a9 ?- f/ C* A1 {
6 N' W' g6 G" ~1 C
文章知识点与官方知识档案匹配，可进一步学习相关知识
4 K, i" e& b) J% E* B6 h
————————————————
$ W( c7 q1 v. N; B
版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
( v; f& \% w3 ~6 ]0 ?& h( ^
原文链接：https://blog.csdn.net/u012928587/article/details/124547230
6 O4 i1 A, T4 Y) E# {* v7 m2 x
/ y1 i, }" c7 }
& |/ o# \4 B* W0 d* v$ C: |
欢迎光临 数学建模社区-数学中国 (http://www.madio.net/)
Powered by Discuz! X2.5
et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph