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

杨利霞

7 l7 ~7 N7 O4 _$ qPython UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中


' e3 V3 k- I# V1 A& g文章目录
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
9 j- O+ W( Y: h, X- ^9 O  s3 a, O组件1：`jupyter qtconsole`
组件2：`matplotlib FigureCanvas for qtwidget`
组件3：`pyqtgraph`
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
以下组件部分测试测试参考：
, k" d7 T  p# c; g
参考的B站视频
qtconsole 官方文档：The Qt Console for Jupyter
组件1：jupyter qtconsole
: G  V; F/ l- w) I8 E: q  ?5 n& A" _1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
. N, z- I- z7 m/ j6 m) W3 J! h    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
! B/ A  d* _- Q: c2 c: F/ U* I1
8 Y- M# i- t* m! i2、尝试启动
9 i/ V% ]& j% V8 p   jupyter qtconsole
1
% C& T; ~3 b( r6 V8 X) w

3、尝试嵌入组件到pyside2 ui中
( m2 }, W3 r' }: I5 X
. C/ P- m2 F# c# B# `3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下

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


3.3、ui显示样式修改1: widget 样式表
! _& V7 t8 C/ g4 V( y+ q, A
/*设置父类窗体，背景边框等属性*/
& A1 i& X7 S- y" ~# v3 NQWidget {
* Q5 a$ j2 y6 }        background-color: rgb(33, 35, 45);
& q+ Q2 b3 E/ ~( q9 ?4 O5 j        padding: 8px;
5 Q# ~; Q+ C9 O" r3 M& [5 ]  O        border: 2px solid #c3ccdf;
        color: rgb(255, 255, 255);
        border-radius: 10px;
}
) w8 H, f' T( a1
2
3
4
, W- |0 a/ ]  C3 C' _, m- J5
- R! N+ {! T: V# V: l- L$ s6
7
# |# k$ W& O3 |/ G1 W3 ^  S8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
: [3 r! V5 s7 t2 a: F    self.set_default_style('linux')
0 ]; G$ ~% i6 s& Z, D1
3.5、该窗口的实例化在uic自动生成的代码中
! V; d  {! Q6 r, r    self.ConsoleWidget = ConsoleWidget(self.frame_2)
7 s- }7 a- u, p) t' C. r3 z5 Q- [    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
1
2
3.6、运行效果

组件2：matplotlib FigureCanvas for qtwidget
1、安装相关库, 指定清华源
    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
1 C6 M3 y8 ~+ U8 G/ [8 [    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
9 i8 S: {. [: L8 m: [* Z! w    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
1
2
3
+ n8 Y& ^& p5 [( t3 N! Kyoutube 参考视频
网站教程
youtube 参考视频: 不同主题风格调整方法，导入csv数据显示
2、 复制 MplWidget.py 文件到 gui/widget 目录下
3、测试 animation, Plotting Live Data in Real-Time
/ E% p9 h7 F" {1 L4 A
测试方法：plot_live_data()
个人理解，animation 应该就是定义了一个与UI同线程的定时器。
4 P$ @7 r% d+ p7 _: C6 x组件3：pyqtgraph
0 n4 e8 Y  n- V参考视频1
参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph

4 B( j2 N$ [( H$ b, F" L1、安装相关库, 指定清华源
    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
9 G" E* D6 Y2 |2 [( n5 p1
7 D8 v' o5 E% Q7 ]* e& T3 N2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
3 q& b0 ^6 c- b3 y2 `2 X0 ~增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
注意，每个点之间的采样时间实时性不是QTimer能保证的。
+ d0 O$ y* ^7 \. F- J! e. G还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
  l' H" C; B3 F# _方式1：在 plot() 方法前，调用 clear() 方法
方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
5 e; d2 U) V8 ~5 I! e源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
$ C# s. w/ I/ A" e' }   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
1
2
1 z9 N2 M( g) O8 ~/ |) P  G/ j5 f参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑

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


文章知识点与官方知识档案匹配，可进一步学习相关知识
0 Y- [* B# ~, Q% _————————————————
& @! g9 R' w. w3 e+ O版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012928587/article/details/124547230