大学化学, 2021, 36(2): 1912065-0 doi: 10.3866/PKU.DXHX201912065

自学之友

结构化学课程中基于网络的点群演示教学平台PGLite的开发与实践

刘晓亮, 刘阳秋, 雷鸣

A Web-Based Point Group Teaching Platform (PGLite) in Structural Chemistry Course

Liu Xiaoliang, Liu Yangqiu, Lei Ming

收稿日期: 2019-12-13   接受日期: 2020-02-5  

基金资助: 北京化工大学教学改革项目

Received: 2019-12-13   Accepted: 2020-02-5  

Fund supported: 北京化工大学教学改革项目

Abstract

Using web technology, the development and application of the platform of molecular point group system PGLite have been described in this paper. A friendly interface for directly accessing webpages to manipulate molecular models has been implemented, and a molecular point group display platform for structural chemistry courses has been constructed to help students better understand the molecular symmetry, which effectively improve the teaching effect of molecular point groups section.

Keywords: Structural chemistry ; Molecular symmetry ; Network programming ; JSmol ; PGLite

PDF (8359KB) 元数据 多维度评价 相关文章 导出 EndNote| Ris| Bibtex  收藏本文

本文引用格式

刘晓亮, 刘阳秋, 雷鸣. 结构化学课程中基于网络的点群演示教学平台PGLite的开发与实践. 大学化学[J], 2021, 36(2): 1912065-0 doi:10.3866/PKU.DXHX201912065

Liu Xiaoliang. A Web-Based Point Group Teaching Platform (PGLite) in Structural Chemistry Course. University Chemistry[J], 2021, 36(2): 1912065-0 doi:10.3866/PKU.DXHX201912065

分子点群是结构化学课程中分子对称性章节中的核心内容,是学生深入学习、认识和理解分子结构对称性以及结构与分子性质之间的关系的理论基础。在结构化学教学中,分子点群不但是结构化学教学的一个重点,而且是教学的一个难点。由于学习分子对称性对学生空间想象力的要求较高,常需要任课教师借助演示工具来讲授分子点群及分子的对称性。而传统的辅助教学方法是以实物球棍模型演示为主,但由于教师操作实物分子模型无法显示对称元素,与学生的交互性不强,学生理解较困难。此外,现已有利用POV-Ray [1]、VRML [2]来演示分子对称性的报道,提高了教学效果,但使用不太方便。目前,在分子点群显示和交互性平台建设方面的报道仍较少。本文总结报道了我们开发的基于网络技术的分子点群演示教学平台,用于结构化学课程的教学,构建了点群演示网页应用PGLite (Point Group Lite),具有展示分子结构模型、分子对称元素及所属点群的功能,并实现了直接访问网页来操作分子对称性元素的友好界面。此应用的开发为结构化学教师在分子点群部分的教学过程中提供了方便高效的演示平台,使学生通过手机浏览器即可直观认识分子对称性,为学生深入理解分子的结构、分子点群及分子对称性特点提供了学习平台。

1 技术栈简介

PGLite采用了国内主流的Web框架ThinkPHP [3]开发后端,利用开源框架Jmol/JSmol [4]实现了分子渲染、计算相关的功能,整体架构为符合RESTful [5] (Representational State Transfer)规范的MVC (Model-View-Controller)模式。

1.1 Jmol/JSmol

Jmol/JSmol [4]是一种网页端分子模型显示开源框架,具有绘制分子、渲染3D分子及相关计算等功能,支持Java (Jmol)、JavaScript (JSmol)语言开发。我们设计的PGLite系统主要利用了JSmol的3D分子渲染、点群计算功能,大大提高了开发效率。

1.2 Web框架

PGLite后端采用基于PHP的ThinkPHP框架,前端主要采用了Bootstrap [6]、jQuery [7]、Vue.js [8]。Bootstrap提供了一系列样式库,jQuery、Vue.js提高了前端开发效率。以上框架缩短了开发周期,提高了系统可维护性。

2 系统设计

PGLite核心功能包括分子点群索引、分子模型演示、分子对称元素演示,同时后台可添加分子并计算点群。整体架构如图 1所示,其中PointGroup为处理、查询数据的核心类,AsynHandler.mol为调用JSmol渲染模型的核心类。

图1

图1   PGLite系统架构图


2.1 构建分子点群数据库

后台管理员插入数据的业务流程为:①上传mol文件;② JSmol计算点群;③ PGLite解析数据;④更新数据库。

首先我们利用GaussView [9]绘制并导出mol分子文件,上传至PGLite。而后在计算点群页面(需鉴权的后台页面)完成分子点群计算并记录到MySQL数据库中。其核心程序包括两部分:①调用JSmol计算点群;②解析JSmol计算结果,下文将简单介绍实现方法。

2.1.1 JSmol判断点群

JSmol提供了计算点群的命令“write pointgroup draw”[10],其计算结果为包含点群信息、对称元素及其渲染命令的字符串。以乙烷为例,点群计算部分结果所示如下。

draw pg0_0_* delete; draw pgva_0_* delete; draw pgvp_0_* delete; draw pg0_0_inv {-1.2500000001747224e-7 3.750000000038445e-7 0}"i";          //对称元素i渲染命令

……

i = 1, nCs = 3, nCn = 4, nSn = 1: nC3 = 1 nC2 = 3 nS6 = 1;          //对称元素

print 'D3d';          //点群

对于Web应用,通过以下JavaScript接口即可调用点群计算命令。

Jmol.scriptEcho(molecule, "write pointgroup draw");

2.1.2 计算结果解析

JSmol计算结果为字符串格式,不能直接被系统识别。为此,我们编写了解析计算结果的cvtTxt2Json()方法,利用正则匹配提取关键信息,以下PHP脚本即提取对称轴的关键代码:

$pgva = "pgva_[0-9]*_[A-Z][0-9]*_[0-9]*";        //正则匹配对称轴

preg_match_all('(.*'.$pgva.'.*)', $str, $pgvaCmd);

……

$cmd = \preg_replace('/"\S*"/', "", $pgvaCmd[0][$i]);

此外,对称元素名称、JSmol对象名称及对称元素渲染命令也是重要的信息,我们分别进行了正则提取。提取信息后,为使系统能够识别数据,我们定义了一种描述分子信息的JSON数据格式,如下所示:

{

"axes": [{ "name": "S < sub > 6 < \/sub > 1", "obj": "pgva_0_S6_1", "cmd": "" }, ……],

"planes": [{ "name": "p < sub > 0 < \/sub > 1", "obj": "pgvp_0_1*", "cmd": "" }, ……],

}

将以上JSON数据插入数据库后,前端便可直接查询并使用数据。

2.2 前端数据呈现

PGLite前端功能包括①分子点群索引;②分子模型渲染;③对称元素演示。以下将分别介绍。

2.2.1 分子点群索引

PGLite根据分子所属点群进行二级分类,而后呈现给用户以便索引。分类标准与周公度教授编著的结构化学基础[11]相一致,符合PGLite为点群教学提供便利的设计初衷。

2.2.2 分子模型渲染

通过点群筛选特定分子后,系统发送异步请求获取JSON数据(见上文),调用JSmol进行渲染。异步请求均为符合RESTful [5]规范的API,获取分子数据的接口如下:

http://pg.minglab.cn/model/mol?name_en=mol_name64//mol_name64:base64编码的分子英文名

2.2.3 对称元素演示

获取包含了点群详细数据的JSON格式分子数据后,系统将解析并呈现给用户,使用户通过点击按钮便可控制对称元素的显示或隐藏。从而直观地呈现分子模型及点群特征,帮助学生更好地理解分子对称性。

3 分子点群显示及操作

目前我们已推出的PGLite V1.1,不仅实现了点群索引、对称元素演示的核心功能,而且实现了桌面、平板、手机三端兼容,具有简洁友好的交互界面。

3.1 桌面端显示乙烷分子对称性

图 2所示为桌面端效果。我们以D3d点群的乙烷为例,介绍其功能及交互方式。左侧为“对称元素”面板,可看到乙烷的所有对称元素,点击对应显示按钮,画布中即渲染该对称元素。右侧为“点群索引”二级分类面板,可根据点群索引分子。

图2

图2   PGLite效果图


3.2 移动端显示环己烷分子对称性

图 3(a)3(b)所示,点击按钮2可调出“点群索引”二级分类面板,再次点击可隐藏,其操作与桌面端相同,可通过所属点群筛选出cyclohexane。

图3

图3   PGLite移动端效果图

(a)移动端界面;(b)移动端点群索引界面显示;(c)移动端对称元素界面显示;(d)移动端分子点群显示


图 3(c)所示,点击按钮1展开“对称元素”面板,其面板操作方式与桌面端一致。同时移动端画布具有较强交互性,单指可旋转,双指可缩放。

3.3 特点

我们开发的PGLite相较于类似的桌面应用具有以下优点:

(1) 兼容移动设备,更加便捷

我们开发的系统实现了兼容桌面、平板、手机,具有良好的跨平台性,而且无需安装,给用户带来了极大便利。

(2) 可拓展性强

PGLite的可拓展性表现在数据可拓展、系统可拓展两方面,点群计算模块使得管理员能够方便的添加数据,模块解耦的设计使得开发人员得以快速添加功能。

(3) 交互性强

我们交互界面设计力求简洁高效,相对于专业的桌面应用程序,PGLite能够更直观地进行交互,方便快捷。当然,目前PGLite的功能还较为简单,有待进一步开发。

4 结语

随着计算机科学及网络技术的高速发展,结构化学课程教学技术也在不断更新和前进,目前也有诸多结合计算机技术的教改尝试。此文介绍了我们开发的基于网络的结构化学课程分子点群教学平台——PGLite。通过将Web技术与JSmol模块相结合,PGLite平台帮助教师在结构化学教学过程中进行分子点群及对称性元素的演示,使学生能够直观地进行交互,由此深刻理解认识分子点群和分子的对称性的知识。PGLite系统具有兼容多个设备平台、可拓展性强、交互性强的特点,分子点群数据库也较易扩展。目前PGLite教学平台的核心功能已基本实现并上线(http://pg.minglab.cn),供师生访问使用该分子点群演示教学平台。同时,我们将不断开发拓展PGLite教学平台的功能,提高该应用平台的实用性、显示界面的友好性和良好的交互性。我们期待PGLite能广泛应用在我国的结构化学课程分子对称性部分的教学,为更多的师生提供有力的教学工具,以此加深学生们对分子对称性知识的理解。

参考文献

张海艳; 沙兆林; 崔世海; 朱银燕; 李晓东. 大学化学, 2015, (30) (2), 78.

URL     [本文引用: 1]

孙宏伟; 陈兰. 大学化学, 2018, (33) (2), 70.

URL     [本文引用: 1]

ThinkPHP框架.[2019-12-14]. http://www.thinkphp.cn

[本文引用: 1]

Jmol Web site.[2019-12-14]. https://www.jmol.org

[本文引用: 2]

Fielding, R. T.; Taylor, R. N. Architectural Styles and the Design of Network-Based Software Architectures[D]. University of California, Irvine, 2000.

[本文引用: 2]

Bootstrap The Most Popular HTML, CSS, and JS Library in the World.[2019-12-14]. https://getbootstrap.com/

[本文引用: 1]

jQuery.[2019-12-14]. https://jquery.com/

[本文引用: 1]

Vue.js.[2019-12-14]. https://vuejs.org/

[本文引用: 1]

Dennington, R. D.; Keith, T. A.; Millam, J. M. GaussView, 5.0; Semichem Inc.:Shawnee, KS, 2009.

[本文引用: 1]

Jmol/JSmol Interactive Script Documentation.[2019-12-14]. https://chemapps.stolaf.edu/jmol/docs/

[本文引用: 1]

周公度; 段连运. 结构化学基础, 第5版 北京: 北京大学出版社, 2017, 131- 136.

[本文引用: 1]

/