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

杨利霞

3 S! F+ e( H' I% ]Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中


# k  `" N# J6 z. R- R文章目录
# h, D" o- T1 d( T0 s: @/ M0 Q$ ]在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
组件1：`jupyter qtconsole`
组件2：`matplotlib FigureCanvas for qtwidget`
% `0 F$ w- y/ n9 ~2 Z组件3：`pyqtgraph`
+ a2 u1 v. X" w在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
* ~1 }3 ~# L/ {, e) P! g6 U以下组件部分测试测试参考：
. j( ^5 y& w3 N3 k! _) A
参考的B站视频
qtconsole 官方文档：The Qt Console for Jupyter
5 ?% c. r& p& N+ g5 _$ D! x组件1：jupyter qtconsole
1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
0 \4 e- g6 S* ~' G    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
& M% M" |- V) C  ]2 G1
2、尝试启动
   jupyter qtconsole
: D3 s: y7 o, L/ t% Y! q. z1


3、尝试嵌入组件到pyside2 ui中

( g1 I: J5 N" {6 d( d, Z3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下

7 f4 |; h5 B+ s1 b4 F3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：
% `% A# s# `: m
6 g$ ~( M) B1 v+ w5 D/ p
! I2 m- O- a1 M4 ]; H; r$ K' `3.3、ui显示样式修改1: widget 样式表

/*设置父类窗体，背景边框等属性*/
3 G$ L2 u( q& n) E, G9 b# BQWidget {
        background-color: rgb(33, 35, 45);
3 C) t# k8 l/ A2 v- ]4 {        padding: 8px;
        border: 2px solid #c3ccdf;
3 n3 G- h# L: A) B; @% b        color: rgb(255, 255, 255);
0 U' R  Q6 T9 {+ m4 S  [        border-radius: 10px;
. w$ \& V$ h( F) `" g}
) a( ]- r8 C% N, A' V1
% s9 N; }, @# r1 E" ]( a2
, ]8 |. X0 \; J5 q3
1 c( h( l/ ~7 f9 U  a% ]4
5
6
7 ~. v% R0 N6 G5 c% u0 [; y7
# F1 N5 X; u6 ?' n8
" @0 W9 J  Y* b# H+ Y# o; d  }3.4、ui显示样式修改2：qtconsole启动界面风格指定
) T+ `1 Y. _; Y1 T5 h7 b8 q( u; A    self.set_default_style('linux')
* P' S8 J$ W) q1
3 ^/ B" W! K2 P0 P9 t3.5、该窗口的实例化在uic自动生成的代码中
    self.ConsoleWidget = ConsoleWidget(self.frame_2)
9 l, ~3 `4 T7 ~2 d    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
1
4 ]6 i5 k: q6 C7 [, Q2
3.6、运行效果

3 M; Z" W& Y: U) \, I* K- \. b, x组件2：matplotlib FigureCanvas for qtwidget
, J3 s0 e: ^7 R1 G0 {- P1、安装相关库, 指定清华源
    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
; p2 \+ Z+ e+ ~    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
! A3 y; q! p8 b' H2 W4 i- A    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
1
2
- z1 \! \0 ^9 @; p) w0 n5 p; c3
" }" l1 U* d6 N! }0 d* Fyoutube 参考视频
! E: A8 ^* \0 {. \7 i& |网站教程
" f0 @4 s, M# o4 Kyoutube 参考视频: 不同主题风格调整方法，导入csv数据显示
9 J# I( W& d) s; y: P2、 复制 MplWidget.py 文件到 gui/widget 目录下
3、测试 animation, Plotting Live Data in Real-Time
* [0 |) |; x$ O$ a! s! k
测试方法：plot_live_data()
- O. s$ s( |  g6 {5 c) x" {个人理解，animation 应该就是定义了一个与UI同线程的定时器。
7 |; x* Q5 _% z! A' P组件3：pyqtgraph
* J4 r" d, R* h  ?参考视频1
参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph

1、安装相关库, 指定清华源
    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
1
" `/ @/ a* @+ k' [; W9 b2 m2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
3 s& w. d/ R, A6 k% A) j( `7 e增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
注意，每个点之间的采样时间实时性不是QTimer能保证的。
还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
& m3 W7 L' ]& @. |& e! l. M' ^  K. J使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
& V! h% i& E5 U% Y  K# ^9 `. }方式1：在 plot() 方法前，调用 clear() 方法
方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
7 s, T& _0 [3 r' y$ W2 C1 g. @3 Q   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
# r* s: ]$ b: F/ n" p1
2
参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑

9 H) t' }: w. ^$ U; [右键RUN pyqtgraph_test.py，效果如下：

8 j0 z! {) O4 g& v" C1 L  ^
/ I. T5 x7 I& T8 N文章知识点与官方知识档案匹配，可进一步学习相关知识
————————————————
版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012928587/article/details/124547230
6 |* W: v: l; \+ |
6 l6 U) Y- v& j% X+ f. P3 m5 B$ ]1 i' x