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

杨利霞

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

" I! d7 }1 `) d. h$ @
文章目录
6 ]3 h/ Z9 ?  R; r" Y在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
8 u, q6 J3 n% a9 N. `) c% |组件1：`jupyter qtconsole`
/ V8 ~  Z6 K: j$ [6 m! b8 e5 ?组件2：`matplotlib FigureCanvas for qtwidget`
9 V0 f8 N; |+ [) N3 _6 L$ r组件3：`pyqtgraph`
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
& H! ~: D5 K+ X. T5 q) h以下组件部分测试测试参考：
! b9 [( Y4 @& \, p# [' W$ z1 R
5 ^- X& q4 p* w$ R* ?参考的B站视频
' F/ D, ^2 I! D& H0 B' Nqtconsole 官方文档：The Qt Console for Jupyter
组件1：jupyter qtconsole
2 T9 a# c- C# t& L1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
' z- ]. I' {$ x) ^    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
, z8 D6 x/ z' K  O1
2、尝试启动
  Z, f; a* R( R: |: z6 t; P9 ~: j   jupyter qtconsole
1


3、尝试嵌入组件到pyside2 ui中
* K, u: D0 R- C" A/ Q6 i; n; R' [  h
3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下

, t/ _7 {$ P' h- r  }$ @3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：


" ~9 }+ D# y- p  e  ?3.3、ui显示样式修改1: widget 样式表
2 O, {- \+ l7 I/ u1 W9 @6 f
" C/ u2 Y1 B) N# B/*设置父类窗体，背景边框等属性*/
QWidget {
        background-color: rgb(33, 35, 45);
        padding: 8px;
        border: 2px solid #c3ccdf;
; B+ S3 Y- t" e$ C, W5 P        color: rgb(255, 255, 255);
$ \" S$ ?# S) m7 u$ ^6 M& \        border-radius: 10px;
  a# P1 d% X/ d6 d& D. ?$ C, s}
1
2
3
! {+ R5 L( B# {3 b) g( j4
) x" z# u- e+ R1 P0 W5
6
7
2 |. y$ H, h+ s" g8 z8
) Y; ]% m5 b) n0 C. x! b3.4、ui显示样式修改2：qtconsole启动界面风格指定
    self.set_default_style('linux')
1
( @7 x! S2 q3 x/ H! A( V7 }" D: u3.5、该窗口的实例化在uic自动生成的代码中
    self.ConsoleWidget = ConsoleWidget(self.frame_2)
8 g- N/ O0 e) @2 Y    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
: _8 Z; ~1 C; \, y2 u1
2
$ i5 ?( h% d7 @0 K3.6、运行效果
- y/ l1 U4 m1 Q9 L+ V1 {3 g; v) S
/ Y- @6 D6 `: j3 V% r) e# k6 M  \' s1 Q组件2：matplotlib FigureCanvas for qtwidget
  C. }/ O2 w& Y4 r. _- W( c1、安装相关库, 指定清华源
    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
4 h7 h4 }9 K9 V$ a' W8 s5 m7 @* h    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
1
7 _3 x6 S6 Z! l4 w2
3
youtube 参考视频
) w" n3 u2 H3 R网站教程
youtube 参考视频: 不同主题风格调整方法，导入csv数据显示
2、 复制 MplWidget.py 文件到 gui/widget 目录下
3、测试 animation, Plotting Live Data in Real-Time

测试方法：plot_live_data()
1 {( p. _2 B& ?; \个人理解，animation 应该就是定义了一个与UI同线程的定时器。
; E) E6 \* f. F% e; t1 h8 Y" P组件3：pyqtgraph
; [0 v# v' @" [% a参考视频1
# f' s# l5 Q. c参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph

; q' ?0 y$ b5 p& C) T# m3 Z1、安装相关库, 指定清华源
    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能保证的。
! I$ L) ~: Z( `6 ?( ?还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
1 a" M) r' k" o5 S7 w方式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
   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
3 ?+ g& _* |/ u  l, q2 e9 X1
' g4 f8 e) a+ ^" Y2
参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑
/ Y- c+ w+ c$ @, e' j% d( q2 f
右键RUN pyqtgraph_test.py，效果如下：


文章知识点与官方知识档案匹配，可进一步学习相关知识
2 B8 G0 }) v8 `2 @9 v" {# b1 Z————————————————
1 o' X) |1 D  i* o% h# q/ ~版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012928587/article/details/124547230