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

杨利霞

Python UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中
8 i1 Y# U" j0 h8 V, X
8 M4 U4 B  a9 J" U7 C% T0 T. Q
文章目录
/ w3 K  d, P' {/ \0 e0 s2 q* B在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
组件1：`jupyter qtconsole`
组件2：`matplotlib FigureCanvas for qtwidget`
组件3：`pyqtgraph`
在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
  H  ^! \$ o) q+ [3 M以下组件部分测试测试参考：

$ h" p. r' ?9 I% e' j! e# p参考的B站视频
2 G. \7 p; u8 jqtconsole 官方文档：The Qt Console for Jupyter
组件1：jupyter qtconsole
1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
+ ~+ L% V$ T8 g( X" {* ?5 F1
% v' e5 `4 M8 q# R7 t$ |2、尝试启动
  Q7 c' o2 V% `. Q1 {2 a3 V# X   jupyter qtconsole
4 i/ |; |4 {) n& ~+ t' G: w1

( }1 ]) u! E0 H9 a. K& C, ]
3、尝试嵌入组件到pyside2 ui中
  E" Q: d1 f, B3 t4 d' R: k
+ m8 i5 T6 ]& x  }3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下
: I  t* E8 f* O4 L" X) B" {5 }
3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：


0 w+ x8 |$ E* Z+ J) b( F3.3、ui显示样式修改1: widget 样式表
: _$ v2 H: ?0 u: d" y0 R
/*设置父类窗体，背景边框等属性*/
& h; A8 @3 F: O& K( W# Y' wQWidget {
        background-color: rgb(33, 35, 45);
        padding: 8px;
        border: 2px solid #c3ccdf;
$ W, c2 {8 A7 B. S6 k/ C; Q        color: rgb(255, 255, 255);
6 h6 F  A( o* q) K- @        border-radius: 10px;
}
1
: U* y8 g$ u; c& Z9 a" o2
$ D8 r% ]1 H: V) d* g7 J: K3
4
  ^' n9 ~' I2 R8 n. |0 I7 L& ~* |5
6
7
' G: K' c6 T, h& J8 o* A* Q8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
    self.set_default_style('linux')
1
3.5、该窗口的实例化在uic自动生成的代码中
6 ]3 f8 x3 j' o" E5 D    self.ConsoleWidget = ConsoleWidget(self.frame_2)
+ a& s) q/ M6 }3 N0 V$ A    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
' j0 `8 H& r$ Y. p% n* s1
4 v* q! t6 p* z3 E6 u9 f% f7 p2
5 n0 p3 X  B% c/ C: p3.6、运行效果

6 I: E" ^+ d, v% Y* c, o4 z- ?6 l组件2：matplotlib FigureCanvas for qtwidget
% M1 [" i5 o1 H4 B- X; w' k+ t- g1、安装相关库, 指定清华源
- {; R: }1 k0 ]! I    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
' F' L& }- w: C. P6 x3 n* w    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
5 v( e$ H6 k5 D; y" v( Y+ i- {    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
1
% c$ |$ S+ Y  D2
3
youtube 参考视频
网站教程
youtube 参考视频: 不同主题风格调整方法，导入csv数据显示
2、 复制 MplWidget.py 文件到 gui/widget 目录下
5 t+ N$ \* C2 S0 S4 R1 k3、测试 animation, Plotting Live Data in Real-Time

测试方法：plot_live_data()
个人理解，animation 应该就是定义了一个与UI同线程的定时器。
: Z! u1 E  p3 e( a) `8 V1 W组件3：pyqtgraph
参考视频1
2 e" Q; h5 @. G3 M+ B+ [参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph
7 y6 W# E- h+ X  ^' E: i
1、安装相关库, 指定清华源
# w, q1 U' D+ }0 ^/ D+ R3 N9 @% `    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
1
# b1 l$ w& Q7 ], [8 y$ ]0 v) I2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
3 }) J0 A4 R& X6 Q) Y1 h: m增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
% E" Z' g9 N% I0 z/ }1 ?2 f注意，每个点之间的采样时间实时性不是QTimer能保证的。
7 P. M1 \; w' G2 L" N还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
方式1：在 plot() 方法前，调用 clear() 方法
方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
; Q& X: @# Z3 v3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
, a% ?' s9 N' G% S( ]源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
* j* j( h+ M, p1
2
5 J1 ~0 g1 ~. i参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑

右键RUN pyqtgraph_test.py，效果如下：
- v9 A- @/ y. V% Y9 |( h7 z

文章知识点与官方知识档案匹配，可进一步学习相关知识
7 C& e1 k! q- K; w1 m+ T3 Z1 V/ u————————————————
* M# J# Z8 g$ v版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
: [, j0 ?* |3 P; R* H原文链接：https://blog.csdn.net/u012928587/article/details/124547230
# L6 X; e; \- W0 ^6 X  C1 x7 V
; H( c3 x- s. Y" d$ N