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

杨利霞

Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
) p7 w9 W2 x& D$ f( M

文章目录
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
组件1：`jupyter qtconsole`
* Y( v: M: y: u组件2：`matplotlib FigureCanvas for qtwidget`
组件3：`pyqtgraph`
; B. Z3 h8 m1 _. F2 O5 N3 ^在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
3 h' n' F: T. @* A% v% T以下组件部分测试测试参考：
# c/ R! ^4 L/ c$ T+ w7 l6 u
参考的B站视频
. n6 C7 t: u0 B& L7 u7 rqtconsole 官方文档：The Qt Console for Jupyter
/ s  r6 S3 h2 Y组件1：jupyter qtconsole
1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
; G2 ~! f5 g$ j! t' c# \% H    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
1
. a6 ~0 o4 W+ e$ k2、尝试启动
, ]6 A4 P! f' c+ g   jupyter qtconsole
6 F6 s, S9 D. }1

. d, H& M4 L2 f* E. O; {
3、尝试嵌入组件到pyside2 ui中

) O/ v5 j0 D0 L8 C+ n3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下

& \' P( F* z1 }3 o1 A( x6 w3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：


7 i3 Y$ j* D8 R3.3、ui显示样式修改1: widget 样式表
4 l, U- a8 {; n% B
/*设置父类窗体，背景边框等属性*/
QWidget {
) e$ B/ f. ]5 X, }% |! a" y8 W        background-color: rgb(33, 35, 45);
* Q7 x3 w2 X6 C8 m& ]: m        padding: 8px;
. ~& X" ~( i' h7 z0 i" L        border: 2px solid #c3ccdf;
- d0 P8 G1 k6 t7 V! d        color: rgb(255, 255, 255);
! E! l+ c- p/ c% ^' S4 l        border-radius: 10px;
}
1
! Z4 s+ d' H( V2
3
4
5
6
7
8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
    self.set_default_style('linux')
; X3 g8 V' ]. u5 h1
3.5、该窗口的实例化在uic自动生成的代码中
2 _' k, n" w% J. n5 P$ A    self.ConsoleWidget = ConsoleWidget(self.frame_2)
/ {4 x) h, k9 x/ Z- C' u% e' D    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
: t7 \# ^! ?2 Z" H: x% `6 s1
4 H; ^! j" u6 {2
4 U' U6 D' w: \  u, ^. w* j3.6、运行效果

组件2：matplotlib FigureCanvas for qtwidget
% n! \) l1 J/ U; E: R  [, N1、安装相关库, 指定清华源
/ `, n- _( w* O    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
* a" u- J2 H8 S9 ^0 Z+ j    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
) e8 v* g8 s- Z, s2 ?( x0 i* _0 Y    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
1
: C6 Q* h4 S3 W; k2
3
youtube 参考视频
网站教程
3 H3 z1 Q  Q1 F) B# j6 T/ F0 p4 `youtube 参考视频: 不同主题风格调整方法，导入csv数据显示
2、 复制 MplWidget.py 文件到 gui/widget 目录下
3、测试 animation, Plotting Live Data in Real-Time
( I. ^/ c& b; W; ~% n* H0 p! ?
8 X# F) g3 O; q测试方法：plot_live_data()
  K$ z; s0 S" Q1 T# G2 e个人理解，animation 应该就是定义了一个与UI同线程的定时器。
3 T- ^! b# q* X" k7 @组件3：pyqtgraph
& r( J% L  _# \. f/ x/ d参考视频1
参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph
. m! ^& O+ [: D/ Q# v1 {
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) 布局
* L6 i2 k9 Z/ i定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
( f3 U0 [, k9 Q8 x2 e1 n注意，每个点之间的采样时间实时性不是QTimer能保证的。
- G4 c, w: h3 A/ I) p& o, W4 c还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
- d" }0 ~% Z* o4 y$ d. [8 d方式1：在 plot() 方法前，调用 clear() 方法
; V. ]4 [$ [  |1 f方式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
1
7 B2 \/ ]* ]' }5 B2
+ Y+ ~8 V, N: k  [参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑

7 D: J6 V2 |! L  d5 l9 ]- L' J右键RUN pyqtgraph_test.py，效果如下：


/ F1 V8 }2 c7 {" _( U) C# }6 H文章知识点与官方知识档案匹配，可进一步学习相关知识
" M  J7 J0 u  ^4 \* g& p" p————————————————
3 _  ~/ I+ U2 ~% }! r! a7 W7 C版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012928587/article/details/124547230

: I* S5 c. T  z! F6 j