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

杨利霞

Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
8 I7 u* f2 W" U; K& P7 Q; p

* b$ N! q5 G( r7 ~, T" s/ r文章目录
  r. P$ T" L7 A, c在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
组件1：`jupyter qtconsole`
组件2：`matplotlib FigureCanvas for qtwidget`
组件3：`pyqtgraph`
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
: D7 M" F" i" m5 H% S  `以下组件部分测试测试参考：

参考的B站视频
8 ^' |+ F! z! U" A3 @* X% Q8 r: Gqtconsole 官方文档：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
1
0 b& _8 i) c& F5 w
# V1 t/ V+ T/ p% ~, d2 l
3、尝试嵌入组件到pyside2 ui中

9 [3 M- D5 _, h/ l( k3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下

" Z, z* T  j" U# q3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：

5 F% c1 N8 A# Z) ]" C
3.3、ui显示样式修改1: widget 样式表
/ x5 Y# B- H' D
/*设置父类窗体，背景边框等属性*/
QWidget {
        background-color: rgb(33, 35, 45);
        padding: 8px;
0 v$ H; x8 `  ?$ N! B        border: 2px solid #c3ccdf;
. y, }5 M% `3 O$ F6 ^        color: rgb(255, 255, 255);
* P. ?+ }' {- w% C0 e0 x8 ^" }$ h        border-radius: 10px;
}
8 a- {, o8 n; W) R  p' }. ^2 z1
2
3
4
5
6
( A$ X  }% L) [6 v1 i7
8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
    self.set_default_style('linux')
/ A* h5 M+ g. D1 Q2 p1
" C8 B7 o3 `8 Q  E: G! X2 }- ^5 d3.5、该窗口的实例化在uic自动生成的代码中
    self.ConsoleWidget = ConsoleWidget(self.frame_2)
    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
7 l3 r+ }) @7 ~1
2
# D6 f$ U* L" Z$ s  G, G9 L9 Z3 Z3.6、运行效果

+ i" I) p: R% `# s2 M组件2：matplotlib FigureCanvas for qtwidget
  Y" Q* |. A, m3 `0 ]. _1、安装相关库, 指定清华源
1 `2 `3 K; Y4 c5 O    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
: [2 U! h$ ~) U5 j; ?" R    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
. N  l9 b! c- V/ v" j9 W. o    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
) Y  W9 H: l7 H; q3 e* |/ t- T1
: l2 V% B% I' |5 O* R2
3
youtube 参考视频
网站教程
, {* a+ w: X" y. X8 u: V* u+ e8 Lyoutube 参考视频: 不同主题风格调整方法，导入csv数据显示
2、 复制 MplWidget.py 文件到 gui/widget 目录下
- t4 B8 G3 I  Q, c4 F) y1 |3、测试 animation, Plotting Live Data in Real-Time
. b& L/ V2 v% K8 B
) i! `: \7 h4 i测试方法：plot_live_data()
个人理解，animation 应该就是定义了一个与UI同线程的定时器。
3 b0 n8 N* R) S7 q6 L4 p组件3：pyqtgraph
参考视频1
9 z$ e/ ]4 d% [2 W参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph
. @2 v7 W% |8 t, g8 z* H' _
1、安装相关库, 指定清华源
! g7 z( F; w7 r4 [    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
, w% Q2 k1 S/ e) K# H. F" {3 Y1
2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
/ m3 O" i3 H* ?0 ]" S7 n  G定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
注意，每个点之间的采样时间实时性不是QTimer能保证的。
9 J6 `# o, A, t6 t. M) p  q+ W还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
6 @0 _* T. H" o. z$ h方式1：在 plot() 方法前，调用 clear() 方法
方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
) M! K# \4 q6 m8 _; c6 _! s3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
* z- l  U# H3 P$ j/ ^$ v, d源工程运行前，需要安装的库，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
1
/ W( u" r' H/ Q5 F$ Q$ I2
参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑

右键RUN pyqtgraph_test.py，效果如下：
; D/ B# V  D+ g4 X& I5 j: A

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

+ ~: o4 `  F4 w0 \1 b. {
. A* U8 ]+ Y1 H9 w& W