数学建模社区-数学中国
标题:
Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
[打印本页]
作者:
杨利霞
时间:
2022-9-15 12:28
标题:
Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
- w' E9 `) Z/ D+ i2 A
Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
& T! M) W7 u2 m9 |+ ?0 F" @: A
4 {; r* G. W1 M2 }; E0 x' R' u
# i2 p, h% {; ]* v" ^- x
文章目录
- Z# u( Y! Q7 I1 @
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
, D7 r$ H: {) s. a+ r+ g3 ^
组件1：`jupyter qtconsole`
2 `+ f( Y ]7 j% _4 F: |
组件2：`matplotlib FigureCanvas for qtwidget`
$ p3 ^; @( N5 r B
组件3：`pyqtgraph`
% S4 ^( P5 u+ V4 n1 F6 r) }
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
4 A" z+ U2 J6 v
以下组件部分测试测试参考：
H+ [) g! X: A* ]) Z
! G$ ~4 B% Y* k, l+ V. l- Z# a/ \
参考的B站视频
5 V( C) e4 S* A% ~1 N2 i
qtconsole 官方文档：The Qt Console for Jupyter
n0 ~$ H" W. v& P- u! v
组件1：jupyter qtconsole
# h! U+ w8 O" I/ H! m; H
1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
1 D# s0 `/ r7 S8 O6 `0 k9 ?/ m
pip install qtconsole -i https://pypi.tuna.tsinghua.edu.cn/simple
$ N% S& d) a+ S6 U: Q
1
i$ ^# I, O' K: |) j5 j" Z# u
2、尝试启动
+ b" `" u2 O) _ o
jupyter qtconsole
7 R/ ?1 U8 V! `6 j" a9 U# t8 z
1
: F9 |6 B! Q+ u- B4 m6 ]
: _* S, C8 ?9 V& Q# b& t7 K
% T9 O5 u5 [; a2 ]0 x
3、尝试嵌入组件到pyside2 ui中
% }% f; C5 G4 C: ^) |. ?* J- V3 S
2 [1 P" y8 D: S8 @6 C
3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下
/ X: h+ M6 G' k' ^( j
5 k J# Z2 h& f5 V( R( C* l/ A$ x' Q4 o
3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：
( } _/ y9 N* b5 h$ q! ]
4 ?) ~+ `# {, l
; ]5 m2 `1 b2 Z. l4 `1 v/ ?
3.3、ui显示样式修改1: widget 样式表
: j3 @ t( G& v5 ]% _7 V
2 j+ ^8 O6 m- c; d# T. e4 I' h
/*设置父类窗体，背景边框等属性*/
2 Q& \2 X' `- Z. h$ [
QWidget {
4 I. f( d9 T; h* ^3 u- P
background-color: rgb(33, 35, 45);
" f2 m) c$ W3 h* S$ }
padding: 8px;
$ D, a! u V8 B4 W
border: 2px solid #c3ccdf;
4 ]2 i0 _/ {3 d8 T8 k9 U9 [
color: rgb(255, 255, 255);
# g/ Q/ @) V G, u; @- r
border-radius: 10px;
9 m% R4 i% K3 i: w( L5 Q3 s t
}
% B* C, i& q$ U2 [ z. s/ Y
1
& \' S7 j" C, G9 E
2
, ?; V. @9 I# Y. A6 {/ F; y, r
3
% Z- A/ L+ N5 d; s8 v
4
$ Z9 n8 d# [ x2 F1 n& D
5
& R" k1 B/ p) \5 n
6
" Q- W! {4 P$ f# U
7
U8 K) S4 X- D1 ]6 t, \
8
X1 [+ o7 x4 y1 [5 ^
3.4、ui显示样式修改2：qtconsole启动界面风格指定
9 A0 Y5 [, @- s+ d- W1 H
self.set_default_style('linux')
' u- a3 k3 B) I+ h+ N$ r1 _+ I
1
. @! D9 \# C& R0 l9 L, S
3.5、该窗口的实例化在uic自动生成的代码中
3 V8 o7 k. E. z3 i
self.ConsoleWidget = ConsoleWidget(self.frame_2)
9 A; J' K* I7 }, Q) Q c. d% I
self.ConsoleWidget.setObjectName(u"ConsoleWidget")
8 z- s! f; Y* r6 e$ X
1
2 l# E b) A* t1 f) r+ [+ k
2
& y6 |( Z2 X8 M* h! W
3.6、运行效果
6 U( u9 @5 @' u% z
8 T+ Q9 J; j, m
组件2：matplotlib FigureCanvas for qtwidget
4 O" H4 W+ R7 d
1、安装相关库, 指定清华源
4 Q% k4 A3 C& l4 q
pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
& b6 t$ W# ^- q6 x5 P: O" G3 G w" x
pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
, M/ J; j) ~ j i8 i
pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
6 B8 a9 U) L/ S2 d9 u
1
& Y: `8 [! U1 Q/ ?- d$ E( N4 ^
2
! V) ?0 ?1 O9 m% u$ k
3
, W% n+ Y$ j! W% r) ^
youtube 参考视频
! Y6 h9 ?) X2 @6 h
网站教程
/ K9 ^; k8 m0 D. I; R% J8 q
youtube 参考视频: 不同主题风格调整方法，导入csv数据显示
7 \" i/ p# x- w
2、 复制 MplWidget.py 文件到 gui/widget 目录下
) R) @( b8 ]' r _9 \5 }& d- C
3、测试 animation, Plotting Live Data in Real-Time
( G2 m2 ^/ X; n3 A1 e. S" K$ [" N' H
- B6 t/ }* D9 H3 J3 r0 x+ _% C
测试方法：plot_live_data()
1 i; _8 \/ j0 S& Y
个人理解，animation 应该就是定义了一个与UI同线程的定时器。
/ R" F* [1 e" |8 o
组件3：pyqtgraph
+ Y' @; k! `* r* `3 x: q+ @* }
参考视频1
2 R$ r, e8 G) _0 f
参考视频2
et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph
! d, z# Z' x: H, @! P: }, {
' }5 O( H. G/ {: h( y
1、安装相关库, 指定清华源
; x1 r! ?/ `+ x5 T8 Z# {
pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
1 u5 H; G! e0 }+ x
1
+ d" j7 m7 `: _; G- D) ^4 _
2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
1 V. _" M9 f$ j7 {, p! I
增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
/ n7 U2 Y6 P+ S) N) Y o
定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
+ X# W( b# k1 f) {# b" L6 {
注意，每个点之间的采样时间实时性不是QTimer能保证的。
2 w$ {* _; ?) |# z8 B; m
还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
7 ~7 k+ h: F2 \: h9 O
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
3 t/ e& c E7 ~/ l: D" N, P' P. m
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
* v" S7 u' }. f2 S' U
方式1：在 plot() 方法前，调用 clear() 方法
9 Y6 Z+ c) _7 V: O! r9 i2 T4 g/ n
方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
- _5 u) l/ r7 q x. z. j
3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
* T3 f; H. I: `0 G v8 t
源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
( x+ n$ o P# P# o( U B" Y( Y
pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
: o% b* o2 j* f. _( S* C
conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
0 q- ~9 I1 R7 }) w8 r9 `
1
9 f: E; P& g" k Y
2
' g; c6 X& x, t4 J g6 J
参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑
) S) x& t% v. @6 W8 H; E% j. n
0 X) j1 q b- }; Z! n) D
右键RUN pyqtgraph_test.py，效果如下：
# O; N p- I H6 [
* k0 M0 c6 Q3 V/ w5 J
+ W* m) q' ~) C: D+ t! h4 m3 x
文章知识点与官方知识档案匹配，可进一步学习相关知识
% |) ]+ b2 j3 x3 Z2 S9 O& ?% J
————————————————
3 C m0 D5 P0 P2 A
版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
# }$ e! S3 C. l3 V' F* q
原文链接：https://blog.csdn.net/u012928587/article/details/124547230
8 F2 R4 ^3 S4 E
* I# r; d# F; s: N+ M
( q' ^% b4 p: J; @
欢迎光临 数学建模社区-数学中国 (http://www.madio.net/)
Powered by Discuz! X2.5
et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph! d, z# Z' x: H, @! P: }, {