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

杨利霞

Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
/ x: {- m3 l6 d3 C

6 d1 y* z7 i# T$ E& h' L文章目录
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
9 n2 P, w2 i& [; }4 V6 C* M组件1：`jupyter qtconsole`
! h# |1 I- R* M组件2：`matplotlib FigureCanvas for qtwidget`
/ p9 R3 c) P0 K6 d/ N2 U: l组件3：`pyqtgraph`
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
/ V* B6 P: Q& y2 W( s* [6 p7 V以下组件部分测试测试参考：

参考的B站视频
qtconsole 官方文档：The Qt Console for Jupyter
- H  z! c( R( T" h3 Q+ _# K) Y组件1：jupyter qtconsole
1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
1
2、尝试启动
$ P9 \* O  s  [, h8 x- T   jupyter qtconsole
1


3、尝试嵌入组件到pyside2 ui中
# j; \8 O: w- c+ X
+ n5 N+ H: O0 T' ]6 T# D3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下

3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：
& ^  i( G8 g1 ?5 {9 W9 Q6 g+ X7 \
, X8 A- t, W$ J' ]5 d
3.3、ui显示样式修改1: widget 样式表

6 o' e3 T' H# ~2 u5 u, [7 o0 P/*设置父类窗体，背景边框等属性*/
( m- Y, A5 ^1 n+ Q, kQWidget {
7 s7 D3 [7 s+ B3 r: H$ d        background-color: rgb(33, 35, 45);
        padding: 8px;
; s/ s6 P7 O) R: ]; V        border: 2px solid #c3ccdf;
        color: rgb(255, 255, 255);
        border-radius: 10px;
}
) d6 M) ]+ t" }; N6 V1
* W7 E+ S' s: M* a+ P9 a) T; |2 k; h2
3
+ K0 s% h7 R- s6 `: a+ C4
5
: U  I5 x& o: Z9 R2 m6
7
8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
6 q8 G( S9 _, {- u2 ?    self.set_default_style('linux')
7 K+ R7 v2 n* O/ @  C/ y1
) Y& y, j$ a3 P8 M3.5、该窗口的实例化在uic自动生成的代码中
. C- T; `7 I$ ~    self.ConsoleWidget = ConsoleWidget(self.frame_2)
    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
5 |* k3 Q: K' Q) u1
2
3.6、运行效果

组件2：matplotlib FigureCanvas for qtwidget
* M  A4 O% K+ W. l3 F7 I5 C1、安装相关库, 指定清华源
    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
7 A" E# f2 A) z6 W    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
1
/ y! A6 O. K! V) N3 \7 n6 E  g2
+ v# L  Z. v, A3 q3
" S; `! v5 E$ D6 z8 R5 h0 gyoutube 参考视频
网站教程
9 N- V- I( b. [- h& ~, A  Gyoutube 参考视频: 不同主题风格调整方法，导入csv数据显示
- t% P, Y5 ]4 @, P7 z' I' a2、 复制 MplWidget.py 文件到 gui/widget 目录下
3、测试 animation, Plotting Live Data in Real-Time
+ T# v& w/ Q$ v1 d/ }. U" [
测试方法：plot_live_data()
9 I; f- z3 y" k' J; d- R个人理解，animation 应该就是定义了一个与UI同线程的定时器。
组件3：pyqtgraph
& N; H% w( e; f参考视频1
参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph
5 \/ G9 j+ ~8 K9 n! t5 A! G
1 J& K6 T' S9 ~3 @" X, T$ e1、安装相关库, 指定清华源
    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
; q! y8 h2 t( i5 e1
2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
0 u2 s/ d1 L7 R/ G5 f3 E8 B; t2 |+ [增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
7 V1 L& F9 |4 Y4 \定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
注意，每个点之间的采样时间实时性不是QTimer能保证的。
8 H' d, x! g% c9 x% _. N7 [还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
! }# W" u* k: V# H/ @使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
. ^6 O' V7 j+ z0 e# X3 f1 m调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
方式1：在 plot() 方法前，调用 clear() 方法
方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
+ _  t* z* D4 T2 p- ]: _   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
' _4 A# E6 d8 ~  F2 C7 C" V4 I& Q1
% z  c, Q. o- `2
参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑
2 ^0 L& q9 ?: I9 w: U
右键RUN pyqtgraph_test.py，效果如下：
- ?; s5 F! R/ l9 e
+ V0 _3 l4 o1 O' s$ ~
文章知识点与官方知识档案匹配，可进一步学习相关知识
————————————————
版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012928587/article/details/124547230
+ i1 b4 D; \4 M

6 Z( h# H; d8 w7 {. X1 _/ B