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

杨利霞

Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
* r. @/ X( O9 E! _1 r3 k7 `

文章目录
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
组件1：`jupyter qtconsole`
1 R6 l! `( V( X9 Z6 o  ~组件2：`matplotlib FigureCanvas for qtwidget`
组件3：`pyqtgraph`
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
以下组件部分测试测试参考：
6 S9 c: d5 W; s' t% `, s
参考的B站视频
qtconsole 官方文档：The Qt Console for Jupyter
2 e6 V: f0 p( W8 A) n8 j3 f组件1：jupyter qtconsole
. b% ?) R' D4 Q5 ]/ b& m; _1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
) g6 B  j. G6 l; e9 t& W& ^3 S    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
1 S" y+ [" z) ]+ q/ t2 H; t1
. E4 o/ h9 n- T0 s5 K2、尝试启动
, Y2 [, D) k5 O7 n+ C3 K$ i9 g. Z   jupyter qtconsole
1

  I5 {! x4 H7 C* I  G( X
3、尝试嵌入组件到pyside2 ui中

0 Z+ n( D$ Z: ^, c  j& n3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下

3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：


3.3、ui显示样式修改1: widget 样式表
: Z/ Z' r) |. Q; i
/*设置父类窗体，背景边框等属性*/
& `& ]1 _+ y, L8 N3 ]: O5 z( ZQWidget {
7 x! e  g9 I; |( W* I% I+ g4 L        background-color: rgb(33, 35, 45);
        padding: 8px;
- i; y/ Y& H& r. L7 H' A- u        border: 2px solid #c3ccdf;
        color: rgb(255, 255, 255);
2 B0 G1 p8 a' |' E3 U$ u4 s        border-radius: 10px;
, u. d4 D1 _3 m- G& n}
3 Q/ J. O" ^7 [0 k. d; B9 ^  f1
2
3
- Q/ N" D& ~; S# c4
5
" L# {# Z. h. Z9 u6
7
8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
    self.set_default_style('linux')
) b0 n& l2 g5 |' A1
3.5、该窗口的实例化在uic自动生成的代码中
    self.ConsoleWidget = ConsoleWidget(self.frame_2)
    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
3 O! W2 O) u+ ~5 G/ V& s1
8 v1 h( V2 i* s2
. l  Q* U! U6 l, g6 n' N3.6、运行效果

. K1 t7 r" N8 f1 x组件2：matplotlib FigureCanvas for qtwidget
1、安装相关库, 指定清华源
    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
" x% V6 ~8 T7 |+ j# M( b. M1 A; d! D    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
) j" g  C8 z: \; m' ]1
2
4 w4 H: E" @3 N9 `2 p3
youtube 参考视频
网站教程
5 x0 @  Z! S( wyoutube 参考视频: 不同主题风格调整方法，导入csv数据显示
) ]6 P! R( R, N2、 复制 MplWidget.py 文件到 gui/widget 目录下
3、测试 animation, Plotting Live Data in Real-Time

$ Q! [$ P3 e4 T, M4 l* X2 B* P. c测试方法：plot_live_data()
1 e: L7 G9 N% G2 Q- Y个人理解，animation 应该就是定义了一个与UI同线程的定时器。
组件3：pyqtgraph
  D/ y4 |6 y9 x3 @2 Z3 g参考视频1
$ c0 F- |! Y( w2 i" h3 {参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph

; Y( Y0 n0 G# r& B+ V1、安装相关库, 指定清华源
3 u9 e, o! k, N  `& _9 R: l/ Y    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
- {1 {% p& w+ d# w( M+ ]; e1
2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
6 }! @% H9 {* \# X$ e增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
5 g/ }4 v5 }& Y" ^* T3 z! @注意，每个点之间的采样时间实时性不是QTimer能保证的。
+ q6 Z! m- o8 q# ?+ _. q+ `$ t; S; O还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
' t- M3 q; f2 L+ M, Y% G方式1：在 plot() 方法前，调用 clear() 方法
- A2 a: A8 f, Z. s3 P8 O/ G7 j方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
6 E+ e  L7 B( p3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
% R  ]: O! Y* O: c   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
1
% C; N- ?# n+ C- Z8 s% u% a2
: H" w. i" E7 w, u. B4 z9 D6 b7 Z' @参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑
, n/ p1 R) B/ h/ g  z6 Y5 e, ~
右键RUN pyqtgraph_test.py，效果如下：
- ~+ J4 D! {3 @3 _

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


! q, C! c5 p+ q9 I4 V