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

杨利霞

8 x( h6 f- p' L; o& s# XPython UI设计学习笔记，在学习的UI框架中嵌入其他ui组件：增加组件到主画面的pages中


& W0 o, n' H& D1 u0 n文章目录
8 h, E0 V1 \  _2 F/ Y在Pyside2中嵌入其他ui组件：增加组件到`pages`中，在`develop`分支中开发
组件1：`jupyter qtconsole`
组件2：`matplotlib FigureCanvas for qtwidget`
+ O' R3 m4 Q6 f8 A. f组件3：`pyqtgraph`
  R! Q0 z- D% x0 \在Pyside2中嵌入其他ui组件：增加组件到pages中，在develop分支中开发
1 D! X( `+ u+ Q8 o& ^以下组件部分测试测试参考：

+ R8 U0 n, A/ e; H1 S参考的B站视频
qtconsole 官方文档：The Qt Console for Jupyter
组件1：jupyter qtconsole
  c3 D( h: }2 Y! ^1、安装 qtconsole 库， 经测试发现，该库目前不支持 pyside6, 所以更改解释器环境到 pyqt5 or pyside2
    pip install qtconsole -i  https://pypi.tuna.tsinghua.edu.cn/simple
1
2、尝试启动
3 A0 Z4 r4 A8 F* s1 ?   jupyter qtconsole
1


3、尝试嵌入组件到pyside2 ui中

% |3 W0 X! E' ?# B( l3 m$ N3.1、复制参考的py代码 consolewidget.py 到 gui.widgets 文件目录下
: x& @5 P8 Y0 O, j2 P
3.2、在Qt Designer 使用 Widget(基类/父类) promote to ConsoleWidget，并修改对象名称，操作如下图：


3.3、ui显示样式修改1: widget 样式表

4 f- h& u' h  c( N/*设置父类窗体，背景边框等属性*/
4 U$ v/ O* ]; [QWidget {
        background-color: rgb(33, 35, 45);
/ K6 t+ n6 l+ K% H2 W        padding: 8px;
        border: 2px solid #c3ccdf;
7 e5 f1 W2 w+ B) ^' t        color: rgb(255, 255, 255);
/ r$ t1 S; H* b6 t  ]* g) d% P) `        border-radius: 10px;
}
% H* m$ C2 b9 e) G$ E1
2
( h$ V- F! E  k3
+ Q5 @7 L  o- T9 H6 P  e4
5
6
7
$ f8 q: G. {: Z, V3 }8
3.4、ui显示样式修改2：qtconsole启动界面风格指定
    self.set_default_style('linux')
1
8 c& x* o8 F- K& `3.5、该窗口的实例化在uic自动生成的代码中
    self.ConsoleWidget = ConsoleWidget(self.frame_2)
* K7 |) P: j! m2 l) y( d    self.ConsoleWidget.setObjectName(u"ConsoleWidget")
1
2
3.6、运行效果
( k' j. H7 F$ m* Y+ A4 O9 n( j
% U4 Q5 q$ v' n7 a& b组件2：matplotlib FigureCanvas for qtwidget
/ i( b5 q5 i/ H1、安装相关库, 指定清华源
# p0 E( B. @3 `1 \* |- t    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
    pip install pandas -i https://pypi.tuna.tsinghua.edu.cn/simple
0 Y7 a  d4 x! y5 X. L    pip install matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple
( A+ u! v8 z4 e' m: P% e1
2
; \' W, a# a* U8 j! o, f3
& f+ ~+ j% ^% w% @youtube 参考视频
网站教程
! J& }' `, @, A" gyoutube 参考视频: 不同主题风格调整方法，导入csv数据显示
  T! w! \$ K! e9 C& U$ w1 C; u1 X2、 复制 MplWidget.py 文件到 gui/widget 目录下
4 `! y7 y4 L# X5 ?* u3、测试 animation, Plotting Live Data in Real-Time
& A/ Z0 q5 b5 r, D9 A1 [
2 T' `0 Q4 M0 f测试方法：plot_live_data()
个人理解，animation 应该就是定义了一个与UI同线程的定时器。
# _# f( J" S; D2 T9 Q% P组件3：pyqtgraph
参考视频1
参考视频2et’s Build an Audio Spectrum Analyzer in Python! (pt. 3) Switching to PyQtGraph
( _1 H% Y$ U+ t# w
) e) u) I4 p$ _" ?8 S1、安装相关库, 指定清华源
4 E: ^$ V7 w) k/ k9 B    pip install pyqtgraph -i https://pypi.tuna.tsinghua.edu.cn/simple
1
2、在 gui\widgets 目录中增加 pyqtgraph_test.py文件
8 [5 Q2 H- [2 u: A增加 2个按钮(draw, clear) 和 1个pygtgraph窗口控件(PlotWidget) 布局
# }. ]. M8 L# H2 k定义刷新时间，帧率，每隔通道的数据记录最大长度等概念
注意，每个点之间的采样时间实时性不是QTimer能保证的。
. k! C  W' |" `3 v% d1 y还需要想清楚如何保证准确的采样时间，以及与数据刷新时间间隔之间的关系。（参考已有的scope的习惯）
9 j, j! q. n' e" T0 t2 @2 ?: O. u使用 QTimer 定时器, 实现动态刷新的功能, 60FPS -> 定时器时间间隔设定为 1000/60ms
调用 self.graphicsView.plot(self.y_vals) 绘图，但注意，重复调用相当于创建多个通道的曲线。如果只想显示一个通道的曲线，有2种方式
方式1：在 plot() 方法前，调用 clear() 方法
' W" k/ w5 j. {: s$ C! S方式2：使用 self.graphicsView.plot.setData() 方法刷新数据，对应的数据清除方法也改一下，改成setData([])
3、参考 Audio Spectrum Analyzer 代码，优化多通道显示刷新方式
源工程运行前，需要安装的库，pyaudio使用pip安装会失败，使用管理员模式启用conda终端安装
   pip install opensimplex -i https://pypi.tuna.tsinghua.edu.cn/simple
6 W& l. m" W; \, C2 ]   conda install pyaudio -i https://pypi.tuna.tsinghua.edu.cn/simple
1
+ C, e* [: Q: ~. K  q8 O& o! V2
参考 self.traces = {}、set_plotdata() 数据结构和方法，优化多通道显示逻辑

右键RUN pyqtgraph_test.py，效果如下：


* z# j5 S5 {& y4 a* @2 ~文章知识点与官方知识档案匹配，可进一步学习相关知识
0 N" e& [9 N( O6 ]3 \3 Y8 {————————————————
版权声明：本文为CSDN博主「HUIJIANG123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012928587/article/details/124547230

. Z  t5 }& O  y9 r* n