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

杨利霞

Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
- L  \3 n% E! G, h5 [: ?
4 M8 h+ b, a1 E5 d" R4 a- s+ e
文章目录
* z, B3 v3 G2 i, o! W  \在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
% W* `! _: o  `1 R- H组件1：`jupyter qtconsole`
组件2：`matplotlib FigureCanvas for qtwidget`
" S0 l5 x' c3 ^9 D0 y组件3：`pyqtgraph`
1 E+ R0 b* k- H7 i( o: x5 q0 t在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
3 l8 A6 W! O, L' Y( ?: r4 Q以下组件部分测试测试参考：

参考的B站视频
7 K" M8 W/ A/ w& J1 A2 tqtconsole 官方文档：The Qt Console for Jupyter
组件1：jupyter qtconsole
& b% m% j- ?( [# z1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
3 @6 @' b7 d! }8 X' K    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
" V; _& C2 F. ~! J7 \' e1
2、尝试启动
$ q% D! F# c( w4 n$ \: ~* u" n   jupyter qtconsole
8 ^( E. |. M4 I2 n8 U6 a: x1


3、尝试嵌入组件到pyside2 ui中
3 s/ P! R. Z* v
- e0 g6 ]+ X$ j/ H* m# r# Y3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下

3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：


8 C& u/ x4 X9 C# F5 z5 O* n3.3、ui显示样式修改1: widget 样式表
, ~) b; o+ ?' j% }. Q% u' Y6 ^8 ^
/*设置父类窗体，背景边框等属性*/
; s+ [8 k0 Q: M- k; Z, U; _4 KQWidget {
        background-color: rgb(33, 35, 45);
! [7 H" D5 _" A% }) e# s% m" k        padding: 8px;
        border: 2px solid #c3ccdf;
        color: rgb(255, 255, 255);
+ u9 \7 a( u: v. Q' u2 h, `) i        border-radius: 10px;
* g0 q) ^2 k! ^6 k/ Q}
6 m7 x3 p# }" J0 a" ^1 x1
2
# a# X2 l6 Y% y6 m; d1 P% G3 q3
4
5
: q( n1 M: u/ {7 c! p6
) _* ]5 n% s: \7
5 E# v7 P( y' P4 Z6 k2 Z/ \+ v8
0 m; D$ U" [$ f( p2 i3.4、ui显示样式修改2：qtconsole启动界面风格指定
% C9 _7 G. S! j/ a% b3 q9 {& v    self.set_default_style('linux')
1
3.5、该窗口的实例化在uic自动生成的代码中
    self.ConsoleWidget = ConsoleWidget(self.frame_2)
    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
+ E3 |; N' t7 }3 s* T3 a5 a# a$ c1
: E  r+ n! A$ d2
3.6、运行效果
* {. U! p& b- d# U5 [" s' ^
组件2：matplotlib FigureCanvas for qtwidget
* b7 O/ G  S/ ?5 b) y0 L0 j1、安装相关库, 指定清华源
    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
1
2
3
/ e8 o  Q6 W8 E0 I8 uyoutube 参考视频
网站教程
- J! k) w( E1 \* ?3 jyoutube 参考视频: 不同主题风格调整方法，导入csv数据显示
2、 复制 MplWidget.py 文件到 gui/widget 目录下
+ Z# D! D- f& o  @( r3、测试 animation, Plotting Live Data in Real-Time
. j7 M- f- [+ N. [6 R% U
测试方法：plot_live_data()
个人理解，animation 应该就是定义了一个与UI同线程的定时器。
. n: x: Q7 ]- J5 L组件3：pyqtgraph
3 C. H1 s+ a% J' @. P  @$ g8 p" G参考视频1
6 Z" Q$ w1 y9 t4 V* f' T; L6 [4 U参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph

/ h% S/ S, h) L# |1、安装相关库, 指定清华源
! v/ i* l6 K" d3 b    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
1
2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
! H, O3 ]) ]2 o增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
( O9 T: Q" v3 d) D5 L. U0 v定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
- U! z. E( E6 j; I/ B注意，每个点之间的采样时间实时性不是QTimer能保证的。
还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
方式1：在 plot() 方法前，调用 clear() 方法
& `7 C8 G; F% K! n) B方式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 ?0 V8 x3 s: o   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
1
2
参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑

右键RUN pyqtgraph_test.py，效果如下：
- K$ Q0 D' _7 b+ k, ?& ^
: `0 }8 U. o1 M* ]: \
文章知识点与官方知识档案匹配，可进一步学习相关知识
————————————————
版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012928587/article/details/124547230

! r9 I/ h; C* E( w2 _' k