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

杨利霞

Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
" J. |" }5 T/ \- @2 a
9 j' Y6 l) ]2 N! }* N
6 M! i3 s, ~  a: K文章目录
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
* R- U% B- U8 E2 w8 S0 h" n组件1：`jupyter qtconsole`
9 K% y7 G2 _! E5 H组件2：`matplotlib FigureCanvas for qtwidget`
组件3：`pyqtgraph`
8 e  p2 d+ |6 g) K在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
以下组件部分测试测试参考：

! Q% u( _; K5 c* @; x+ j4 A3 `( `参考的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
1
2、尝试启动
   jupyter qtconsole
8 Z4 k, R+ ^% c2 y$ f- m1


4 x# F' b! [1 E8 g) T3、尝试嵌入组件到pyside2 ui中
. J: E! E: S3 R# M. C5 B- C
  S1 s+ |6 o8 q( ^* n* \7 g3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下
; [" S: x" c) f2 I. z, r
5 o8 x7 Y( B& L' ]3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：


" x  g, S# @  Z: {9 G3 A1 l. j- D# h3.3、ui显示样式修改1: widget 样式表
, T% \( Q9 B* n# y
  p$ u. R0 v  m/*设置父类窗体，背景边框等属性*/
QWidget {
        background-color: rgb(33, 35, 45);
% w& Y7 e% M0 i- ]1 E9 o5 _        padding: 8px;
4 j& K; Z/ |# ?3 g/ d        border: 2px solid #c3ccdf;
4 t6 [* ^5 _6 _' @$ G        color: rgb(255, 255, 255);
        border-radius: 10px;
8 x$ K2 b  I& c}
  |( B- w+ e' X7 U/ w  G1
2 j7 e) a- H' b( @2
0 {, P" X" o2 T6 [, [3
9 l7 B& h- d- |# Y; T& k* a4
5
6
7
+ k" P: ^6 [  L* j" g8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
    self.set_default_style('linux')
1
3.5、该窗口的实例化在uic自动生成的代码中
    self.ConsoleWidget = ConsoleWidget(self.frame_2)
    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
1
2
* B# Z1 b! Y6 y5 E- X; m& p3 q3.6、运行效果
, x% {* e" {* V# @6 B: s
( O- |" e% d5 A% Y! G组件2：matplotlib FigureCanvas for qtwidget
$ x: p' h  y" ~% ]1、安装相关库, 指定清华源
    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
4 e4 v& Y# v, ]& h# p& D7 V. q    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
$ D- S) q2 j  n  L1 v% E6 B1
2
% N  Q  M0 `% K$ K3
youtube 参考视频
网站教程
youtube 参考视频: 不同主题风格调整方法，导入csv数据显示
2 }! I8 _5 g/ _6 z2、 复制 MplWidget.py 文件到 gui/widget 目录下
5 ~, W; m- P2 Q0 e5 o9 r: p8 M3、测试 animation, Plotting Live Data in Real-Time

% J; \0 i" G3 E; j测试方法：plot_live_data()
- o  q+ j5 Q0 n( E& ]个人理解，animation 应该就是定义了一个与UI同线程的定时器。
组件3：pyqtgraph
7 K, p) X+ e9 a" G- X参考视频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
: F2 D+ _# P0 h" v1
$ H6 D, e& `! C2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
注意，每个点之间的采样时间实时性不是QTimer能保证的。
: ]% G* ]4 _- W6 L" e% G& n还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
; K( e) |& H/ W3 P5 }! n6 Z, m* U使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
) V1 j  ^) {8 N* s方式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
$ X$ F# E; Q1 V+ n6 S# G0 |0 B, Q) D   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
1
* ?+ l- ]1 h0 `9 \; q2
参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑

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


文章知识点与官方知识档案匹配，可进一步学习相关知识
————————————————
6 y4 b2 ^2 D- M8 k3 X1 i1 i) ]版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012928587/article/details/124547230

- {1 O5 v8 f; E+ @$ V/ ^0 ]
5 E4 g. f: V1 C( {! U0 }