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

杨利霞

. X, z" k5 W# C' G7 w+ Y6 gPython UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中


& s* N* `0 N( i% e9 g9 h0 O' Y文章目录
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
$ }* X/ E2 y7 T+ Q+ E组件1：`jupyter qtconsole`
; l2 b5 |0 t3 `$ Z组件2：`matplotlib FigureCanvas for qtwidget`
组件3：`pyqtgraph`
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
( W0 Y  v9 j4 y以下组件部分测试测试参考：

参考的B站视频
qtconsole 官方文档：The Qt Console for Jupyter
. C! [4 {# P! K7 f* K组件1：jupyter qtconsole
1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
2 O1 j1 R# ~* r  l1
5 X' J5 p* f, M$ l6 `/ P- s2、尝试启动
   jupyter qtconsole
1


  }5 b' _! I* _! @5 c, @* a3、尝试嵌入组件到pyside2 ui中

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

3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：
2 \& E# g! t! B+ U9 V% t0 @7 h
$ F5 l& U# E* V6 S4 ]7 `( {* T  k8 ?
3 G: k6 h0 L* v0 w  }3 R3 p; Q3.3、ui显示样式修改1: widget 样式表

/*设置父类窗体，背景边框等属性*/
QWidget {
        background-color: rgb(33, 35, 45);
3 t. j# ?' `  _/ [& U+ A( I        padding: 8px;
) n/ d' P4 \! ]: Z( _        border: 2px solid #c3ccdf;
        color: rgb(255, 255, 255);
4 [' k$ r" T* o. P  i3 Z1 O2 i        border-radius: 10px;
}
1
/ X! q5 X1 h& z) r$ `( W2
. F0 j9 m; H' F9 y. D& t3
* v: J9 c: G  ?4
5
6
1 ^. }  q  I6 v* i6 f7
% P' ]' E) I" }4 S$ M* J0 j/ v8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
# [9 J: k- n7 W3 p    self.set_default_style('linux')
1
3.5、该窗口的实例化在uic自动生成的代码中
- ?) Y  n9 `5 V    self.ConsoleWidget = ConsoleWidget(self.frame_2)
8 l% D$ q% _& Q    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
1
2
7 u+ G( L4 I; b9 \) j3.6、运行效果

组件2：matplotlib FigureCanvas for qtwidget
1、安装相关库, 指定清华源
    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
8 ?$ c+ R1 p4 K, g! ], s( }3 y    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
1
* z; g$ \0 Q# Y7 I) @2
3
+ r: o; e: P( F  L% e. cyoutube 参考视频
" U6 \, f. e" i' U! S+ n网站教程
youtube 参考视频: 不同主题风格调整方法，导入csv数据显示
( |1 x- X- L, j  @& x4 L2、 复制 MplWidget.py 文件到 gui/widget 目录下
3、测试 animation, Plotting Live Data in Real-Time

测试方法：plot_live_data()
个人理解，animation 应该就是定义了一个与UI同线程的定时器。
0 R4 z8 V. Z$ \% v- \# m组件3：pyqtgraph
( Y* b' Q9 g5 g. M1 [参考视频1
- C. m  l( C, \7 S参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph

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) 布局
定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
5 }5 m0 O8 g% H! s! b) J注意，每个点之间的采样时间实时性不是QTimer能保证的。
还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
3 ^8 e' r5 M: Y: Y8 U1 r7 F使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
方式1：在 plot() 方法前，调用 clear() 方法
4 E8 ]! U9 h9 C, |方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
( W# [" _" C, b; F0 y3 Y* ]; A: z7 p   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
' f/ R+ x7 T7 r* ^: X9 z& v1
2
5 F. ~$ r% X5 b- b4 }参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑

; }. ]2 W$ ]3 n' d: B右键RUN pyqtgraph_test.py，效果如下：

3 C' _! @/ e3 p- _
& ~/ V% H/ k: k. e3 l: ^- a文章知识点与官方知识档案匹配，可进一步学习相关知识
————————————————
3 \; p& c0 y& k0 A/ F# A: ^0 f版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012928587/article/details/124547230

& h2 n: k  \( E8 z* L( T0 t
' z% ^2 D/ R8 ~2 V+ X! L