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

杨利霞

6 R- C7 K  T3 d6 wPython UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中


" p( k! q/ @% ?) k( k文章目录
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
组件1：`jupyter qtconsole`
% L5 C% D  c5 ^- B% d+ _6 _/ R组件2：`matplotlib FigureCanvas for qtwidget`
组件3：`pyqtgraph`
% H) L( y7 p! |( I4 Q在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
2 v8 R. X* I% j0 p$ J, b以下组件部分测试测试参考：

) E! y# B) X, R( P; I参考的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、尝试启动
: R+ o. C3 t# W, Y# b  M" J# E8 U   jupyter qtconsole
9 N* g8 o) u# |1

3 G0 S( _. f- N: }6 V' e1 {
8 C. {1 e! y; ^! H0 t( t3、尝试嵌入组件到pyside2 ui中

- ]# o1 L3 u* m7 p) j+ F3 }; ~, n3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下
+ f/ C: P& l' u: H7 E& t' c
1 p9 \- @. O, n/ J3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：
& |1 o- L9 S7 i% @/ E3 q4 c

& y4 t6 ~0 E% a* S: u3.3、ui显示样式修改1: widget 样式表

% u0 R* l& j% X6 {/*设置父类窗体，背景边框等属性*/
: V1 g% c* o; J0 y: VQWidget {
3 x+ ?5 Q7 z  E2 F9 h, u        background-color: rgb(33, 35, 45);
8 J" b$ q: C  D4 I& }! J8 W! `        padding: 8px;
        border: 2px solid #c3ccdf;
        color: rgb(255, 255, 255);
        border-radius: 10px;
}
1 i6 m, t7 q$ X" z& G( R- A! G  @1
% T6 d4 }4 k  |% |0 z- j2
# K3 T% e: ?" u) @% V2 y3
. A' ^/ H  p0 Y4
5
6 F) Y; T+ B4 g2 b5 Y5 v6
7
8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
    self.set_default_style('linux')
1
, b9 s( |, ~! V, N8 d2 W" x3.5、该窗口的实例化在uic自动生成的代码中
    self.ConsoleWidget = ConsoleWidget(self.frame_2)
    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
$ p; J9 Z% O( E8 _. Y# P9 Q0 w: s1
2
/ Z; T- Z& @( H6 a8 E) p3.6、运行效果

) A, b. i" o6 R: y组件2：matplotlib FigureCanvas for qtwidget
  s% P+ y2 X" Y7 O1、安装相关库, 指定清华源
    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
6 O1 E; x8 \- @5 q( @1 y4 W3 f8 a    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
( b7 }$ m: U7 a9 A9 M8 m0 j1
- U; Y: M- u7 e. \1 p) `+ x+ I- x2
3
youtube 参考视频
网站教程
youtube 参考视频: 不同主题风格调整方法，导入csv数据显示
2、 复制 MplWidget.py 文件到 gui/widget 目录下
3、测试 animation, Plotting Live Data in Real-Time

( {+ ?; S  ^, w, c0 {8 ]测试方法：plot_live_data()
个人理解，animation 应该就是定义了一个与UI同线程的定时器。
2 \+ H+ @+ U. O' z组件3：pyqtgraph
参考视频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
1
2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
注意，每个点之间的采样时间实时性不是QTimer能保证的。
2 {0 N- Z# _; `7 J6 n还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
  v. Q  Q; ?+ I  j) P, @* j使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
/ R+ I& @( t8 a) D% m+ ]方式1：在 plot() 方法前，调用 clear() 方法
8 t5 P% y8 i4 c9 G: e方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
+ U' s) H6 a2 d' ~/ n源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
' @9 e  l$ {' b  P   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
7 `6 v% [2 s8 H3 M9 ^& i8 Q+ ?) ]3 c1
2
参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑

( L9 j+ n) F; N1 s0 v右键RUN pyqtgraph_test.py，效果如下：
& n& p# U2 @1 c! q9 _

文章知识点与官方知识档案匹配，可进一步学习相关知识
" p1 {7 V0 d$ U/ u. x" h+ y9 n5 P  E————————————————
版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
( R2 H/ i4 `% I0 [3 o) n) U原文链接：https://blog.csdn.net/u012928587/article/details/124547230

; w* M8 Z# Y% ?% y" q; h
2 D! N& w5 g5 `% r