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

杨利霞

9 P1 K# |& N6 G3 R( W8 ^( V, IPython UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
- z3 Z/ Y' c. A- h# @# f
, `$ u7 k$ M8 t) W
文章目录
9 Y- }: }' H6 f1 R( s% C在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
, B3 B5 ?. t4 V, p, z' m4 o组件1：`jupyter qtconsole`
! [+ S+ Z; e' ?2 g组件2：`matplotlib FigureCanvas for qtwidget`
2 @* h) U% X. `/ V* D8 B组件3：`pyqtgraph`
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
以下组件部分测试测试参考：
% @1 x; |) g9 W+ S% ^7 @' u6 [7 t0 g
参考的B站视频
0 H  W6 q! x3 K6 T: B; E, |qtconsole 官方文档：The Qt Console for Jupyter
  k; _6 G) W7 A& T; k. t. l组件1：jupyter qtconsole
. l0 X8 o* J' C! I1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
0 H; F. X' ~7 ?" F$ ?# x/ w    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
, C5 W* P6 v8 q1
! [6 g, I! S' ^" @9 {2、尝试启动
) S; L: e( o& h8 W' G. H' u" ^% P   jupyter qtconsole
1


( o% [' ?# @* o. M! m8 @3、尝试嵌入组件到pyside2 ui中

3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下
; n1 ?  f2 C+ `3 R
3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：


8 C9 n: f; t: p* ~. s) r4 {3.3、ui显示样式修改1: widget 样式表

/*设置父类窗体，背景边框等属性*/
7 B- U: {5 A7 a# tQWidget {
        background-color: rgb(33, 35, 45);
1 |2 k, _9 w$ {9 z        padding: 8px;
        border: 2px solid #c3ccdf;
- r! w- q, H6 Z        color: rgb(255, 255, 255);
7 |; b" @$ j4 i* O. c* G: J4 C        border-radius: 10px;
}
* o3 u' \. A1 P9 S1
+ W  |8 t* c- B+ I$ f$ U2
, ~! `9 O& [% U. W" k6 h6 `3
4 B. ?; M  s& W: ~4 F, g4
5
+ \1 z& K. T6 o# V- |6
1 ~- ?' _+ X% C2 m7
8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
1 E& g3 w. n( r$ Q7 d    self.set_default_style('linux')
1
3.5、该窗口的实例化在uic自动生成的代码中
    self.ConsoleWidget = ConsoleWidget(self.frame_2)
    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
1
9 o7 Q3 I! H! l/ A. {: ]2
3.6、运行效果
9 Z% o5 b0 m& e; z/ @
组件2：matplotlib FigureCanvas for qtwidget
1、安装相关库, 指定清华源
    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
, q! F8 ~5 C5 [" U+ `/ g$ I    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
* ?8 Z: S/ q3 P    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
1
% l* Z; E$ k5 K* `& S- F6 k7 Q2
2 q/ R. f3 c) \" [3
youtube 参考视频
网站教程
+ m1 L/ M' ?" C" Vyoutube 参考视频: 不同主题风格调整方法，导入csv数据显示
2、 复制 MplWidget.py 文件到 gui/widget 目录下
3、测试 animation, Plotting Live Data in Real-Time
, ~  ^2 L  x. A$ T$ x8 R, d: {
) g& l; i6 }2 l! ^3 _! Z* ~) m; M7 Z测试方法：plot_live_data()
/ ?2 @5 ^  Z4 q5 m# H% l  r! b0 V3 K个人理解，animation 应该就是定义了一个与UI同线程的定时器。
组件3：pyqtgraph
参考视频1
% t/ l( s3 A& ]2 O5 a  E9 |参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph

/ \) F8 S; s0 l6 }1、安装相关库, 指定清华源
    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
9 S3 v2 I. E( G; K" k( g1
2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
' k1 M+ [5 A2 T) ]5 q8 R* o3 f定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
8 a& T! }! H4 P/ \' M  X注意，每个点之间的采样时间实时性不是QTimer能保证的。
还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
! r' p7 T& a, R7 k调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
9 M3 G7 s5 _, F/ ]2 \6 A( O$ E方式1：在 plot() 方法前，调用 clear() 方法
( T- J3 a/ Z, v3 O  k方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
0 {9 \' Q! Y) T$ n+ \7 X) C* b   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
1
* A* Q) t, W- i  e' j2
4 W  N. c  z2 r( p参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑
7 x8 \- r! n. d- y! @/ q& c6 u9 O; e
右键RUN pyqtgraph_test.py，效果如下：
1 q; W; ~; p/ [: V; S+ d

9 d$ [" [" O2 b文章知识点与官方知识档案匹配，可进一步学习相关知识
————————————————
. i) L* v4 r' g( p; l版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
" e# y  z- }6 A9 p6 ^/ D* G原文链接：https://blog.csdn.net/u012928587/article/details/124547230
( m: P" W* I6 p