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

杨利霞

Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
+ H2 u1 {& P' M4 ?0 S7 {
* L1 D4 D1 Y6 X8 d; H3 L( F
! C) [" w" b: }- z: X- ]+ s文章目录
在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
组件1：`jupyter qtconsole`
' H4 o& U5 B% U% U: U组件2：`matplotlib FigureCanvas for qtwidget`
组件3：`pyqtgraph`
/ X- C* `1 q7 p' C1 y3 x在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
1 C4 @7 K- z9 J以下组件部分测试测试参考：
6 O) I8 f1 a% U1 ~
: W( j/ M* E- M$ {* V' v1 l参考的B站视频
qtconsole 官方文档：The Qt Console for Jupyter
组件1：jupyter qtconsole
1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
8 ^( f$ @) g. ]$ z" x5 h8 L    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
1
4 g3 ~) I9 T* b$ [0 e2、尝试启动
   jupyter qtconsole
1
1 ^5 u. E7 Q4 m# ]! O. a6 n
" A6 i$ U" ^4 n* A7 S+ l
3、尝试嵌入组件到pyside2 ui中
3 {9 ]1 ^4 d5 C  P
3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下
( }# L' }) y2 a! u- j
3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：

8 m% |( z! o* Z: A6 D
3.3、ui显示样式修改1: widget 样式表

/*设置父类窗体，背景边框等属性*/
QWidget {
        background-color: rgb(33, 35, 45);
1 c' m! b) {0 O2 G* N4 \! }& g        padding: 8px;
, H. ~- H2 i5 d$ r! s        border: 2px solid #c3ccdf;
( M7 N! V/ j; @- Q3 X# C0 D) Q% ?1 }        color: rgb(255, 255, 255);
, J7 ~  T5 a, d/ y        border-radius: 10px;
}
6 \8 k' J5 Z2 ^% I1
3 I" t8 k: N) ~$ L2
( Q( n; T2 ]  L9 Q& q3
' v8 L9 z: c& V' s! m4
5
6
7
8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
" \' G7 R1 A5 U/ w7 I& C) S4 k    self.set_default_style('linux')
. Z( ?' A: H# ^" P+ u6 H1
3.5、该窗口的实例化在uic自动生成的代码中
; ~& J( V, ~# t  c5 |* H' }    self.ConsoleWidget = ConsoleWidget(self.frame_2)
  E% s+ b: z6 F$ r    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
1
2
/ G1 D7 b5 v' w$ S6 y, v7 n' l3.6、运行效果

组件2：matplotlib FigureCanvas for qtwidget
1、安装相关库, 指定清华源
    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
+ O8 r3 {9 f1 R3 W9 V8 e' k    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
3 X; L; S4 z& O1
1 J# _1 A$ [, {+ Q8 o( [' o* j6 o/ q  G2
3
# a3 v$ Q, N/ B1 lyoutube 参考视频
网站教程
; t; i% \- s, _5 ~$ ]youtube 参考视频: 不同主题风格调整方法，导入csv数据显示
! x; u6 V% U6 y: A2、 复制 MplWidget.py 文件到 gui/widget 目录下
3、测试 animation, Plotting Live Data in Real-Time
  l$ U* C1 ?) j6 D& x. g
5 x: G* O' j/ p. X2 r: ]测试方法：plot_live_data()
个人理解，animation 应该就是定义了一个与UI同线程的定时器。
+ x: g! f7 ~/ e: m' ~0 o组件3：pyqtgraph
3 {7 C) F1 Q- s$ k参考视频1
$ z& w  \3 H/ h9 r3 D" w# l" m9 I参考视频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
, U4 i: p5 x6 u4 k" P! Y8 f1
" I, A9 m1 R- `  f) P- n. ~2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
/ K) y& a# A* q0 C* p" O增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
/ R  {6 R" j8 O* r注意，每个点之间的采样时间实时性不是QTimer能保证的。
8 I# w2 \' f$ I3 Q! O9 H还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
. ~, J# M/ n6 ]4 |方式1：在 plot() 方法前，调用 clear() 方法
方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
) Q5 l* b  L4 P- c   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
3 K: N5 A: Y% K2 K8 B. D- i0 i1
9 L  k9 l9 `: m; e+ e3 N7 ?2
参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑

; y) x: e5 @. _3 |* D右键RUN pyqtgraph_test.py，效果如下：

1 c( n  A; r: j
文章知识点与官方知识档案匹配，可进一步学习相关知识
4 F% }4 m! K3 q; Y5 e. B————————————————
# \* h# _4 p( K3 c: K版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012928587/article/details/124547230
! {+ b6 t+ o! ]$ p' f- [6 ~* }1 E
& v6 K0 ^1 ?7 |$ X5 I# k; o3 o" c