数学建模社区-数学中国
标题:
Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
[打印本页]
作者:
杨利霞
时间:
2022-9-15 12:28
标题:
Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
# {- T* |6 `) \( n4 F
Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
/ R! z& k: P- f$ p5 Y
2 t; P+ y1 j( j# x: U% {0 m
# {5 h% I9 Z" g
文章目录
& O& {* Z2 f0 r9 P! s# s
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
4 d7 f f" ~) U/ T: K
组件1：`jupyter qtconsole`
" i% x1 S1 \( r! h! }7 J* N/ O
组件2：`matplotlib FigureCanvas for qtwidget`
- i- `+ i$ l! N; f$ P
组件3：`pyqtgraph`
: z% y# J$ L$ k7 A
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
7 k" l( L. A" z3 Q: ~: \
以下组件部分测试测试参考：
1 l- r8 ^$ h% {2 ?2 [" J
- Q* D% b& g& o: x, x1 n7 n6 }
参考的B站视频
3 S7 C+ M0 U% {4 |4 M1 f" \4 E5 V
qtconsole 官方文档：The Qt Console for Jupyter
( J7 x( G* G" _3 k- R7 x
组件1：jupyter qtconsole
0 b/ t, ]9 ]4 H0 i; W; m3 t7 }
1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
( `7 k5 e) ~$ U% }, _* V
pip install qtconsole -i https://pypi.tuna.tsinghua.edu.cn/simple
0 R) B0 ~' z/ Q/ a# k8 g
1
8 N( B# O! a6 M$ y7 T ~2 U6 f
2、尝试启动
* B9 X! Q6 f! O4 r% {
jupyter qtconsole
O9 m0 e( a+ S4 l6 q) K! J1 U5 O
1
4 \( G6 F- o [0 {
4 i4 m: |0 j. X- M1 ^2 O0 e2 V
% F+ h1 L( M1 R5 Y( P: H) b+ S
3、尝试嵌入组件到pyside2 ui中
. t3 t7 f; v( R4 T0 ?
) R8 U' j6 V, Z" `6 s
3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下
9 e- Z/ G3 E- O
" m0 Z0 m S+ z+ q2 v
3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：
0 t" [& v% R+ M3 G) I* \9 E( `
5 i7 k+ g2 F; k* G( \
) R8 _1 g4 z, |3 r3 _$ X
3.3、ui显示样式修改1: widget 样式表
& r ^1 p, p# j: l- S
( Y* v T# s, _6 @+ ~9 S
/*设置父类窗体，背景边框等属性*/
# U; g" z/ \, z1 P5 y
QWidget {
1 N" _# _8 B! U$ J4 M. ?2 v
background-color: rgb(33, 35, 45);
: ~/ j0 K* |2 K8 @
padding: 8px;
+ R( {* [; P( c. N
border: 2px solid #c3ccdf;
- ]* R; J; X6 S8 B: a
color: rgb(255, 255, 255);
% a' R# F, }: S5 P+ i' Q
border-radius: 10px;
[% h d6 H9 a. }4 F$ V
}
3 S- Q U( Y( C; U# J7 }1 T3 C$ h8 t
1
; Z1 e! L# T0 Y$ ?7 o, I
2
2 o. G# ^% D2 p# s
3
+ q& O. A& i* v5 F+ B) Q; E G
4
: Q9 }& } C/ N# q- _
5
8 j- w) A; K0 d; L" _9 O
6
0 H) A( y7 x7 T# E" ?) n
7
7 U1 S' @ g. E. p" W: g/ ^
8
7 g2 S1 G& j0 c% g3 L
3.4、ui显示样式修改2：qtconsole启动界面风格指定
* w, b' K* i8 |0 f- V
self.set_default_style('linux')
4 n3 o3 i' \* e& Z. E2 X, \
1
8 j. Z' v2 A1 f! w$ p. r0 E) v
3.5、该窗口的实例化在uic自动生成的代码中
0 m* E6 ~0 K. ~8 {# n! p6 }, j
self.ConsoleWidget = ConsoleWidget(self.frame_2)
$ `/ a$ a: W; Y" O# C7 }1 N5 P
self.ConsoleWidget.setObjectName(u"ConsoleWidget")
' I5 Y' s8 z7 c5 I
1
j* J. Z. Q' f
2
5 v+ F* |2 J- v# g" |- U8 d
3.6、运行效果
2 ~9 w, E( B+ q+ @- l, c
, L o8 L" @2 e$ G9 \% `
组件2：matplotlib FigureCanvas for qtwidget
. ~' [0 z0 @ m) w- c j
1、安装相关库, 指定清华源
/ b% Q3 U1 H! G k
pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
" v3 W. R- f' N% T# m2 e7 y
pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
0 y7 u8 v E: d" f: `/ e6 f. B
pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
) c5 F6 M: o+ z" n; u
1
1 @1 _2 u* @; B/ p. U
2
% z" A5 S0 ~7 n7 L) a
3
/ Z- v9 e* s# O# h; \, }- P
youtube 参考视频
+ v! H: H# K1 ~/ K6 N, A$ F
网站教程
5 b4 J2 A0 U6 b$ ?
youtube 参考视频: 不同主题风格调整方法，导入csv数据显示
1 Y7 r; j) O4 _# M: I
2、 复制 MplWidget.py 文件到 gui/widget 目录下
+ P. q% _- `. y$ @
3、测试 animation, Plotting Live Data in Real-Time
3 k; l, @% Y, x/ G5 j/ G! F
0 S% ]* X8 t' {" Z9 A; A% O9 r
测试方法：plot_live_data()
Y# ?2 w Z, B( ]# P. r
个人理解，animation 应该就是定义了一个与UI同线程的定时器。
" ?+ O, X ^' W
组件3：pyqtgraph
) E% D6 \, p3 r0 \, A
参考视频1
# C" p7 ]* K# u4 O* }; Q: x
参考视频2
et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph
6 w# b; [2 V3 R5 p8 W- `
& F" k+ t: A( }* ~) o( Q) ]
1、安装相关库, 指定清华源
$ K6 O# R) L2 V0 r* S5 V
pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
* M( a% c* ~; M. s% l
1
3 ~# j6 Z* p/ d; n# J$ d
2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
+ e7 s2 e) e' @. n: u- q
增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
8 r8 J; r4 b% e5 F6 o
定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
; s( G( {: K) u5 V6 c
注意，每个点之间的采样时间实时性不是QTimer能保证的。
; J3 i6 z2 C, L j2 L
还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
9 O% M s# S7 `, w
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
0 c# h }0 y) z/ q
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
- P$ W. b5 A- j# C
方式1：在 plot() 方法前，调用 clear() 方法
& I* B$ b# R6 Q
方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
9 I6 q3 l6 Q* f, H! }2 Z
3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
4 Z- J6 v+ L/ K0 R
源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
' j3 _% {( I2 h* n5 o( ^
pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
, e% p0 O5 t2 _7 ^3 ^
conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
2 R. O3 c8 \; K: q" r1 _
1
: r5 S$ e6 S, K8 Q" Q
2
! ~/ @# Z: @5 E. `9 Q' h
参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑
0 f7 j& S6 c9 N4 z4 O4 m `) d6 h
3 e* O6 }* [, F; t* \
右键RUN pyqtgraph_test.py，效果如下：
, {8 A1 [! n, @; W
0 T# b4 \" g9 y
% I, V0 L. Y( F ?+ L
文章知识点与官方知识档案匹配，可进一步学习相关知识
# Z8 s$ F( A1 b' _2 r% A1 s1 y3 y
————————————————
" M+ ~: }( H* {% A4 v! @: t
版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
! S: Z/ Y, \1 s, m: T0 d
原文链接：https://blog.csdn.net/u012928587/article/details/124547230
; P$ U, V6 t+ ^/ e
# F: M$ _+ S9 l2 Y0 T1 `! d$ w( z1 O
* P* z& N5 H$ A) ^( v( ~
欢迎光临 数学建模社区-数学中国 (http://www.madio.net/)
Powered by Discuz! X2.5
et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph6 w# b; [2 V3 R5 p8 W- `