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

杨利霞

5 T# z) o) W. ~; qPython UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
0 x' \8 m- J; e& \4 B( e) h' I5 R
5 k6 c. \0 J6 r. U  N# z
3 I9 P( B3 B- V& r9 J文章目录
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
组件1：`jupyter qtconsole`
2 N: T# ^, V+ m: n. L组件2：`matplotlib FigureCanvas for qtwidget`
+ Z  y$ t0 k. `组件3：`pyqtgraph`
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
0 L9 K: T* O, f以下组件部分测试测试参考：

# i4 q9 Z! t4 V. p& R8 i2 t5 t参考的B站视频
qtconsole 官方文档：The Qt Console for Jupyter
组件1：jupyter qtconsole
1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
# S2 b1 e5 u, y$ r7 }- z& }1
2、尝试启动
+ t2 K4 O4 g* w. E* ]3 @   jupyter qtconsole
1

7 B! q( e, I, m& x8 r/ X5 G
3、尝试嵌入组件到pyside2 ui中

3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下
8 M  h0 ?+ B3 ?' w! m
: P) y8 w3 b. w! |3 l. c3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：
. k! D: b! y+ x- v; t3 Z( F

3.3、ui显示样式修改1: widget 样式表
$ D. K- n: z6 s2 L$ O- H
/*设置父类窗体，背景边框等属性*/
" v0 q& H5 F" v- {* C0 Y: X. XQWidget {
        background-color: rgb(33, 35, 45);
3 J- U- W, L; T  e        padding: 8px;
        border: 2px solid #c3ccdf;
6 J( z1 I5 s: }) {        color: rgb(255, 255, 255);
+ w  I" A$ F. G0 W+ o3 G        border-radius: 10px;
}
1
* t" C  c  q# }  q6 N5 T% E: j2
3
. v$ K* r! L, E9 O& h% e4
5
6
# q4 @! r9 w; r$ H% H3 H5 c7
8 k3 W: a2 l  V4 C7 P8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
    self.set_default_style('linux')
1
% U: k1 U! n" }- ]: d3 F3.5、该窗口的实例化在uic自动生成的代码中
    self.ConsoleWidget = ConsoleWidget(self.frame_2)
, f2 i7 t# x6 E    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
7 u( ]: G$ D, Y1
2
9 O8 g! C% [( D" ]3 i$ M! Z' `0 s3.6、运行效果

组件2：matplotlib FigureCanvas for qtwidget
1、安装相关库, 指定清华源
/ O/ G$ `- G# L, ]0 q: J    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
; F* m7 ?! Y" s' `) D    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
* K. a6 Z9 R8 l, @9 q  i2 J1
0 q* o, f; N' X( H2
% }; f) F9 ?) v  |4 v$ v) A3 q( U0 }3
youtube 参考视频
网站教程
/ x6 D1 v9 A" C& U$ K0 X/ dyoutube 参考视频: 不同主题风格调整方法，导入csv数据显示
# L: v  b% @8 n/ f5 ]2、 复制 MplWidget.py 文件到 gui/widget 目录下
3、测试 animation, Plotting Live Data in Real-Time
$ [7 U, e) Z- B& d# z
6 ?. h6 h# U" e* S- [1 M2 R测试方法：plot_live_data()
个人理解，animation 应该就是定义了一个与UI同线程的定时器。
组件3：pyqtgraph
参考视频1
1 P  j- g4 ]9 E/ \1 Q! K+ ?参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph

1、安装相关库, 指定清华源
& Q2 y; M8 r* J, C/ k    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
. V% Q- c0 P/ j1
* z2 U1 |5 C  k1 x% G7 {4 q2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
9 S6 g5 O. S3 I- y2 Z. d2 @增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
7 Y6 C& \0 i* |& t! b* V注意，每个点之间的采样时间实时性不是QTimer能保证的。
还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
) l  z+ O9 H0 G) R" H调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
方式1：在 plot() 方法前，调用 clear() 方法
* o9 a+ Q  _% Q2 C- S( q4 z; ^$ c方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
3 M0 N1 n( J4 _$ E) x* j3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
& B* z6 y8 J7 q7 r1
2
% t3 F" G( z: D- b, e8 s参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑

右键RUN pyqtgraph_test.py，效果如下：

' u  s( r. l# `; M' e
1 j$ N  x2 f8 N, ~* a7 E7 ~" Y文章知识点与官方知识档案匹配，可进一步学习相关知识
————————————————
版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012928587/article/details/124547230


! `) ]$ \' F6 D& n: ^