数学建模社区-数学中国
标题:
Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
[打印本页]
作者:
杨利霞
时间:
2022-9-15 12:28
标题:
Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
; B7 h( _& s* m+ `( x6 {/ [8 h9 e
Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
`+ u7 `. H- N$ C
1 K' P! E) A" Y9 p: b
3 v* Z# N3 ~, \( Y( }
文章目录
5 {; s2 y! [9 T; Z
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
% I( h/ K7 k6 N- {# ?, Z
组件1：`jupyter qtconsole`
, s2 |! A$ V) g5 g3 f# r! ~
组件2：`matplotlib FigureCanvas for qtwidget`
7 X7 p+ ^$ g& q
组件3：`pyqtgraph`
, G3 r- z" A4 ~- h; S
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
7 W: q9 U5 B: h
以下组件部分测试测试参考：
7 G% R0 m+ k) y5 Y; x* I. L
8 |0 r) J+ k* U2 |- u
参考的B站视频
# H% T& z( {$ _
qtconsole 官方文档：The Qt Console for Jupyter
3 {4 i7 x( V. Y; G6 e( H
组件1：jupyter qtconsole
- L) l9 ^; Q; X% f
1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
0 ], w |* t: c4 ?. T5 J
pip install qtconsole -i https://pypi.tuna.tsinghua.edu.cn/simple
8 D2 }% {3 l; J2 g9 f" L
1
5 t8 X2 [' _+ L2 \- f# B
2、尝试启动
; g% @. z, D' }+ I: a" w* I5 u
jupyter qtconsole
0 r2 l9 i( j) ^: H/ n; ]! b
1
. T ]5 v2 r T, n6 s) a4 E' X) I
7 ]' R: f' e3 l2 H2 @5 t
) I9 x6 y! C, W
3、尝试嵌入组件到pyside2 ui中
# W& @: O7 q f* [. r/ h8 W! u
% l- ~( c/ W( W& k& X3 h
3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下
0 O8 i4 O/ z1 f; |( R" S5 Y
8 h" C2 m1 z1 f( ~- ]: W- `
3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：
2 o; o# o( j' H
/ S4 o) M E; K* J- o4 V! y, R
3 A( m5 g5 `$ H
3.3、ui显示样式修改1: widget 样式表
' k( ~, C0 ~7 w
7 l. A1 N6 L/ h/ \
/*设置父类窗体，背景边框等属性*/
5 G _0 b, F/ \' ]* a- ?; [8 d
QWidget {
. G6 I1 M8 n9 B7 b) a
background-color: rgb(33, 35, 45);
4 b, p+ T7 q* c8 l
padding: 8px;
: a2 i3 y* B% q& O
border: 2px solid #c3ccdf;
0 M2 j' m. y% Q% N) \- L, |8 d
color: rgb(255, 255, 255);
: x$ R2 \# T7 y [" q) } m
border-radius: 10px;
7 ~) M H3 C6 T1 j' N/ Q. u' C/ M
}
9 F8 q" n8 F+ F! l
1
* V! I/ S2 { [# N
2
u, u- s: B/ a8 n: H ^' G
3
+ e/ n* y5 z) N( R: a7 g3 @
4
- W0 B% V7 n& f! g# x# X/ X
5
5 i' X- H+ }& y
6
* |& y7 {2 l/ `" J: p ^9 c
7
4 h9 ^0 F. F: D, I2 \
8
! W) j3 {' @+ t) z
3.4、ui显示样式修改2：qtconsole启动界面风格指定
! r% _3 q0 o% T
self.set_default_style('linux')
0 q1 |5 N7 e" g7 B
1
. v2 y% I( g: u# H/ [
3.5、该窗口的实例化在uic自动生成的代码中
' S. f9 N6 H% B
self.ConsoleWidget = ConsoleWidget(self.frame_2)
4 f% o. z: y. |% D( u/ p
self.ConsoleWidget.setObjectName(u"ConsoleWidget")
' {' j1 S# e$ l& P* O6 R2 W
1
* K% `9 k$ c: _0 W% d+ x
2
& g8 m, \1 R( Z; J
3.6、运行效果
7 e0 I% k( S% s- O
; r& o- I2 l8 K2 O W- P
组件2：matplotlib FigureCanvas for qtwidget
3 C3 S: E! \. U1 Q' Y5 n
1、安装相关库, 指定清华源
) ?( I) O$ U, T$ @) N
pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
% j0 f: \& \$ Y( [
pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
; N1 M( o5 H# p5 p1 u
pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
/ \3 p3 j- ^5 K8 f8 x' }8 t) t
1
6 ?, z+ E! s. b* R! n6 A6 m
2
. C9 I% e4 G3 X1 M" E Y$ t0 c
3
7 t5 i8 j: C. @1 i2 ~* u; N
youtube 参考视频
2 b, o0 P1 ^' |
网站教程
9 c6 ^4 H- y. q* ~8 M0 y
youtube 参考视频: 不同主题风格调整方法，导入csv数据显示
8 F# x) R1 @. t
2、 复制 MplWidget.py 文件到 gui/widget 目录下
; S, m2 v1 p8 s4 @
3、测试 animation, Plotting Live Data in Real-Time
. i% r9 t" N, y9 Z
; B& ~& C0 R8 L/ ^
测试方法：plot_live_data()
* j) R! X% {& {( Z
个人理解，animation 应该就是定义了一个与UI同线程的定时器。
7 Q3 P! m6 f5 E. d5 v& t' _
组件3：pyqtgraph
9 O# {: n* {( ^0 z; a" m
参考视频1
6 _4 O0 o" U+ r% n
参考视频2
et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph
4 J. f# B1 A% O
4 |) ~5 s) I) g+ w# m" {
1、安装相关库, 指定清华源
7 R* O% g% O! A( d u
pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
) N, n& ?; C0 B0 h
1
/ S" y) F* c: B9 q1 b7 ?# }
2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
# @/ N3 C7 Y( y: i& M9 Y
增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
; N$ h# w" H7 Y* P- M4 `
定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
y2 J f% D1 p* E" v
注意，每个点之间的采样时间实时性不是QTimer能保证的。
( _5 z$ p1 K% O6 ?: y& a* t
还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
6 B: }1 m3 b$ W, p) i7 {
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
* t$ N# |- x9 ]/ g3 d
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
; Z/ X$ l5 y o7 u
方式1：在 plot() 方法前，调用 clear() 方法
/ ^) Y M" u k+ s0 d4 U
方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
# i- s) v9 s, X3 a1 M; n
3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
) y B5 I/ Y. @# V8 a) h4 ~6 i
源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
9 @! B: x7 V* L1 q
pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
) f/ `- r# `: A1 U
conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
" V4 \: a* `: c; G; g( c
1
/ k. @6 s. x' z9 i& A0 H) f
2
5 s& c6 y5 M& I8 u1 E0 ?
参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑
# J3 I4 e& |1 C
3 N. T4 t' |: ^0 A) H0 w
右键RUN pyqtgraph_test.py，效果如下：
! }+ _& S2 `9 |
* _. \- T. ^5 O
& N+ G- T) {* z+ S/ V1 E$ m1 P
文章知识点与官方知识档案匹配，可进一步学习相关知识
/ T; W1 Z# R( q! k2 r
————————————————
: b- Z$ d/ |7 f- x
版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
: k0 l' h! ?/ U) C2 d/ s% U$ _
原文链接：https://blog.csdn.net/u012928587/article/details/124547230
/ C f \. `: B5 d7 X6 \; X; J& B
6 i' J$ S5 |1 j& i
! z( C4 h9 {+ }0 g7 r$ G) C
欢迎光临 数学建模社区-数学中国 (http://www.madio.net/)
Powered by Discuz! X2.5
et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph4 J. f# B1 A% O