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

杨利霞

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


文章目录
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
2 n. o9 i2 i# q9 \; d( y. a/ V组件1：`jupyter qtconsole`
组件2：`matplotlib FigureCanvas for qtwidget`
组件3：`pyqtgraph`
# v2 O& S7 U+ N3 [* M& h1 F! P在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
以下组件部分测试测试参考：
& t  N; w/ W& z6 k# S/ H/ h+ h
参考的B站视频
qtconsole 官方文档：The Qt Console for Jupyter
; K8 z3 w) b3 R- j3 R0 i3 U, m组件1：jupyter qtconsole
3 m3 l% Q) ~0 N3 C1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
, Q. Z  e# A$ G. s    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
1
# ]8 x$ V2 x, M8 T$ s! E- A2、尝试启动
6 }' i$ g! V! y( E' z" N8 n( q: b   jupyter qtconsole
. ?$ }3 x: r* n- n1

8 Z5 W" j) Q8 K$ z, R8 X
/ h7 E; m4 ~5 _4 s4 D: i3、尝试嵌入组件到pyside2 ui中

3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下

/ h- `5 `7 B, J! m3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：

) ^4 c: p$ k& x& W9 Y. v( q" g
3.3、ui显示样式修改1: widget 样式表
, R, F5 M4 k% l
1 }# M. g! B6 ?' E6 V8 G6 m/*设置父类窗体，背景边框等属性*/
QWidget {
# P0 T( H+ ~0 N; |2 m1 N        background-color: rgb(33, 35, 45);
6 C3 O5 y* p. O( d2 g        padding: 8px;
5 p6 |$ t, o( h3 E" n( b9 a1 o        border: 2px solid #c3ccdf;
        color: rgb(255, 255, 255);
        border-radius: 10px;
, Q5 [( x4 W( Q2 s}
1
. N! \$ Q" e/ @; a2
3
$ Q! K$ ~; Z- I% R% C9 I4
5
# }( P; \- ]1 Q# A! p1 w" z- E2 n6 B. J; f6
9 X; f- I/ ]; R& B7
8
3 k+ [5 Z6 s4 u, C/ W3.4、ui显示样式修改2：qtconsole启动界面风格指定
8 d$ M) ?) Z! ^( K9 A& e4 Q    self.set_default_style('linux')
7 _: e  n* K3 G8 ~1
3.5、该窗口的实例化在uic自动生成的代码中
2 W6 n" f* _/ ~  G/ `0 R    self.ConsoleWidget = ConsoleWidget(self.frame_2)
& g' l6 L  f! p! ~9 m    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
1
5 w  P# a! R. z  p  `9 `2
3.6、运行效果

( v5 ^/ k# ]$ E; R组件2：matplotlib FigureCanvas for qtwidget
$ x: ~7 a9 f0 S( O1、安装相关库, 指定清华源
    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
  q- k8 v4 m% s  H    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
+ m6 i; ]+ Y- k    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
1
7 `- c5 F4 y; M" U# G* d2
3
youtube 参考视频
* W# {! z9 Z: s网站教程
youtube 参考视频: 不同主题风格调整方法，导入csv数据显示
2、 复制 MplWidget.py 文件到 gui/widget 目录下
; g# g) S3 K, X! M' C- }6 M3、测试 animation, Plotting Live Data in Real-Time

测试方法：plot_live_data()
+ A# H- ~+ m! o' R2 [* X. p8 i4 q个人理解，animation 应该就是定义了一个与UI同线程的定时器。
组件3：pyqtgraph
参考视频1
7 q9 P7 ^3 @. q5 q7 A- H8 K参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph
0 ?* i9 p$ T: u
1、安装相关库, 指定清华源
, N' l% L6 n# M. h) K6 o    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
2 M( {* S. D" [$ M: J1 x1
2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
7 [; c  U- e* P9 ], o注意，每个点之间的采样时间实时性不是QTimer能保证的。
还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
  J" K( f$ D) O! `: [  ?方式1：在 plot() 方法前，调用 clear() 方法
方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
+ X. k0 F  E: N9 @9 e+ v1 G3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
  t9 E* Z: M. ^% V源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
7 n( Q" @1 {( C   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
4 \; g& y( B, C1 [( R1
2
参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑

; K0 j$ _1 T% L. y2 p右键RUN pyqtgraph_test.py，效果如下：
, g1 M1 E. C' E4 q7 t  V9 O. E, m
9 l1 Y3 }9 m/ d  W5 ]7 `
文章知识点与官方知识档案匹配，可进一步学习相关知识
————————————————
版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
3 l& l9 B& U; e* j3 r! C原文链接：https://blog.csdn.net/u012928587/article/details/124547230