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

杨利霞

: Y5 b+ O9 }: W" xPython UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
& n% _7 C" S$ Y8 S
( S$ f1 E  J6 U' W: i. V- E
文章目录
" [$ X& Q% R4 k8 `在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
组件1：`jupyter qtconsole`
组件2：`matplotlib FigureCanvas for qtwidget`
) C: R0 F0 ?! h, a5 ^9 C组件3：`pyqtgraph`
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
; o! |( X" {. ?8 n4 h# o1 L以下组件部分测试测试参考：

- _! U$ B. c9 b2 P' J1 S参考的B站视频
qtconsole 官方文档：The Qt Console for Jupyter
组件1：jupyter qtconsole
$ N5 t" [, C1 A- n3 |) c" a/ M1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
/ S; z0 m* N1 S  `3 j9 P. b    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
1
" I2 w' E6 g3 a& C( m2、尝试启动
( k# d- q$ j3 Q4 t   jupyter qtconsole
9 `9 C% |1 p3 J+ `1


3、尝试嵌入组件到pyside2 ui中
1 E% }+ \7 A7 N& r8 q
3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下

, T1 P2 p# z# q! g7 c3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：


3.3、ui显示样式修改1: widget 样式表
! |( P: p) {! u$ k9 [
" S/ r9 m' S& j5 ^; C9 Q$ q- f/*设置父类窗体，背景边框等属性*/
QWidget {
        background-color: rgb(33, 35, 45);
" n0 v$ v; c) F7 @6 f. M0 Q- c; P        padding: 8px;
        border: 2px solid #c3ccdf;
        color: rgb(255, 255, 255);
        border-radius: 10px;
' l7 K$ J/ r' f! u/ z}
2 f/ S- z# g# l9 W. E1
2
' d  h& m0 ?2 O+ h  r+ G! |3
" w( Y5 |/ [- `' W/ B1 d4
7 P* k4 s) B8 O$ a5
6
7
8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
' \  w$ @2 P) n+ `) B) v    self.set_default_style('linux')
" r9 Y4 T! J+ o+ e4 S, C1
3.5、该窗口的实例化在uic自动生成的代码中
# E4 r: L+ l/ i8 x    self.ConsoleWidget = ConsoleWidget(self.frame_2)
    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
1
( w8 Z+ q! q' y5 ^$ f5 J2
3.6、运行效果

组件2：matplotlib FigureCanvas for qtwidget
" n9 W/ h/ P5 T! l8 Z6 N4 |7 ~1、安装相关库, 指定清华源
. s& u5 A3 Z( b3 J    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
$ _5 g5 a9 c3 _4 N9 m; |1 b6 t8 C    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
4 I5 p1 g- A) ^, ~. K1
2
3
youtube 参考视频
网站教程
youtube 参考视频: 不同主题风格调整方法，导入csv数据显示
2、 复制 MplWidget.py 文件到 gui/widget 目录下
. s. K( B$ o; _/ ~% k0 g3、测试 animation, Plotting Live Data in Real-Time

测试方法：plot_live_data()
个人理解，animation 应该就是定义了一个与UI同线程的定时器。
$ J8 c, {9 K% T组件3：pyqtgraph
1 v% k7 q! S3 z! {参考视频1
  F1 Y$ X9 k# N# O! }/ J$ W/ b参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph

1、安装相关库, 指定清华源
% y8 T* T) k! U4 W) l2 s9 U  M    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
1
2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
) w* L: a6 h/ C0 ]增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
: R9 E0 z4 Z* D4 G# e+ A! E定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
注意，每个点之间的采样时间实时性不是QTimer能保证的。
还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
; z0 @; i' w$ ^  p* c- I4 Q使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
7 K3 k- j8 M. ]7 O调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
方式1：在 plot() 方法前，调用 clear() 方法
方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
$ E. `2 Z  u: S3 R+ j! s9 H: H源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
9 h0 N9 x9 j% K4 k; z   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
# l! [4 w: G, j+ @1 o   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
' D1 c, V1 y. V2 H0 i# J+ b4 [1
2 h' R& c$ A7 t! o, S* a7 Q! u2 A2
/ s3 [  s1 q4 r9 u, f# f% }8 ~+ m参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑
5 s" x0 V% T" T0 n* s& u2 Z
右键RUN pyqtgraph_test.py，效果如下：


2 S! \3 ~4 W5 o, G$ ^文章知识点与官方知识档案匹配，可进一步学习相关知识
————————————————
1 `# Q0 b3 K  D8 p- X& p版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012928587/article/details/124547230


. M7 d2 X5 X5 K6 t3 ~/ G3 ?! {