CN111813397A - 通用仿真培训课件生成方法、系统以及电子设备 - Google Patents

Abstract

本发明提供一种通用仿真培训课件生成方法，包括：将真实业务系统的界面加载至画布上以作为背景图片；将所选择的控件组件显示在所述背景图片上；通过js代码使所述控件组件具有可交互性；其中，每个所述控件组件具有与其对应的交互逻辑，以便于当用户与所述控件组件进行交互时，能够根据所述交互逻辑执行相应的动作指令；调整所述控件组件的尺寸、坐标、样式以使所述控件组件覆盖所述背景图片中原有控件组件；监控所述控件组件的尺寸、坐标、样式、交互逻辑，并实时记录所述控件组件对应的css属性、style属性以及html标签，得到html格式的页面文件；对所述页面文件进行编排得到所述通用仿真培训课件。本发明能够降低开发成本，降低课件制作门槛。

Description

通用仿真培训课件生成方法、系统以及电子设备

技术领域

本发明涉及仿真实训技术领域，尤其涉及一种通用仿真培训课件生成方法、系统以及电子设备。

背景技术

仿真培训指的是在计算机上对某一个真实的业务系统进行学习，通常人们会通过看书、看视频甚至是请人教学来入门一款软件，而仿真培训提供了一种让学习者直接上手界面、由仿真软件引导学习者每一步的操作、学习者在学习过程中不会因为操作失误而对真实业务系统产生负面影响的手段，让学习者在入门软件时得到高效的帮助。

现有的仿真技术有的是通过重新部署一个测试版的业务系统，人们可能会通过文档编辑器和视频编辑器来编写使用说明或制作操作说明视频来引导新手入门，制作纸质或电子的说明书/视频。

而有的仿真技术可能是业务系统的一部分，他们通常都是在真实的业务系统的界面上使用一些提示框来限制用户的操作，从而达到引导用户入手的目的，通过业务系统来引导用户入手软件的整个流程，而这个流程通常都是由开发者编写代码开发出来的，是属于真实业务系统开发的一部分，因此严格意义上讲，其并不属于课件。

文档编辑器和视频编辑器是非常普遍的软件，不是专门为制作“课件”而开发的；而对于真实业务系统开发，需要专门找开发者来进行开发，无疑带来了巨大的经济成本。

发明内容

本发明提供一种通用仿真培训课件生成方法、装置以及电子设备，可以让无编程经验的系统培训讲师能够用简单方式制作出仿真培训课件，降低开发成本，降低课件制作门槛。

本发明提供一种通用仿真培训课件生成方法，所述方法包括以下步骤：

将真实业务系统的界面加载至画布上以作为背景图片；

将所选择的控件组件显示在所述背景图片上；

通过js代码使所述控件组件具有可交互性；其中，每个所述控件组件具有与其对应的交互逻辑，以便于当用户与所述控件组件进行交互时，能够根据所述交互逻辑执行相应的动作指令；

调整所述控件组件的尺寸、坐标、样式以使所述控件组件覆盖所述背景图片中原有控件组件；

监控所述控件组件的尺寸、坐标、样式、交互逻辑，并实时记录所述控件组件对应的css属性、style属性以及html标签，得到 html格式的页面文件；

对所述页面文件进行编排得到所述通用仿真培训课件。

进一步的，至少一个所述控件组件的交互逻辑包括至少两个需被执行的动作指令，所述至少两个需被执行的动作指令互不相同。

进一步的，所述通用仿真培训课件包括多个所述页面文件，多个所述页面文件与所述真实业务系统中的多个界面一一对应。

进一步的，在制取所述页面文件过程中，若执行页面跳转操作，则判断缓存中是否存在即将切换的页面；

若存在，则从缓存中加载所述页面，然后将页面加载到iframe画布中；

若不存在，则从服务器中加载所述页面，然后进行缓存并将页面加载到iframe画布中。

进一步的，所述页面文件包括位于文件内容最顶部的预设标签，所述预设标签包括json格式的数据内容，所述数据内容用于编写页面配置；

所述页面加载到iframe画布时，画布的尺寸根据所述预设标签的定义自行进行调整。

进一步的，所述通用仿真培训课件还包括课程数据段，其中，

在课程学习模式下时，所述课程数据段记录所期待的每一步的操作内容、所述操作内容所属的页面信息、所期待的操作的解说；或者

在课程考核模式下时，所述课程数据段记录校验用户是否按照预期操作内容、每个所期待的操作的相关提示，并在考核结束后告知操作中存在的不足；

所述操作内容包括与所述控件组件中的其至少一个进行交互。

进一步的，所述通用仿真培训课件还包括配置数据段，其中，所述配置数据段记录当前课件的标题、描述以及被用于第一个加载的页面文件的页面名称、当前课件文件的版本以及当前课件文件所使用的技术版本。

进一步的，所述通用仿真培训课件还包括核心框架数据段，其中，所述核心框架数据段将html片段、css片段以及js片段以及相关的依赖库打包成统一的js片段。

本发明提供一种电子设备，所述电子设备包括：

存储装置，用于存储计算机软件，

处理器，其在执行所述计算机软件时能够实现所述的通用仿真培训课件生成方法。

本发明提供一种通用仿真培训课件制作系统，所述系统包括界面布局工具、页面导航器、交互设计工具、课程编排工具、以及保存与导出工具，其中，

所述界面布局工具包括画布界面以及控件工具面板，所述画布界面用于加载真实业务系统的界面以作为背景图片，所述控件工具面板用于提供控件组件并使所述控件组件显示在所述背景图片上以覆盖所述背景图片中原有控件组件；

所述页面导航器用于切换所述界面布局工具中的画布界面显示；

所述交互设计工具用于对显示在所述背景图片上所述控件组件进行处理以使其具有对应的交互逻辑，以便于当用户与所述控件组件进行交互时，能够根据所述交互逻辑执行相应的动作指令；以及，用于调整所述控件组件的尺寸、坐标、样式、交互逻辑，并实时记录所述控件组件对应的css属性、style属性以及html标签，以得到html格式的页面文件；

所述课程编排工具用于添加/删除列表项，其中，每一个所述列表是教程的每一个步骤，每一个步骤都记录着学习者学习到当前步骤时应该对页面上的哪些控件组件进行何种操作；

所述保存与导出工具用于对所述页面文件进行编排并导出而得到所述通用仿真培训课件。

本发明将真实业务系统的界面加载至画布上以作为背景图片；将所选择的控件组件显示在所述背景图片上以覆盖所述背景图片中原有控件组件；其中，通过js代码使所述控件组件具有可交互性并且每个所述控件组件具有与其对应的交互逻辑，当用户与所述控件组件进行交互时，能够根据所述交互逻辑执行相应的动作指令；根据所述控件组件的尺寸、坐标、样式、对应的交互逻辑的调整来调整并记录所述控件组件对应的css属性、style属性以及html标签，得到 html格式的页面文件；对所述页面文件进行编排得到所述通用仿真培训课件，本发明可以让无编程经验的系统培训讲师能够用简单方式制作出仿真培训课件，降低开发成本，降低课件制作门槛。

附图说明

图1为本发明的流程图。

图2为画布界面、控件工具面板以及页面导航器的示意图。

图3为事件面板的示意图。

图4为课程编排工具的示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得所有其他实施例，都属于本发明的保护范围。

本发明提供一种通用仿真培训课件生成方法，所述方法可以应用在电子设备中，所述电子设备可以是台式电脑或者笔记本电脑或者手机等电子设备，并不做限制。所述电子设备可以包括显示屏、输入装置、存储装置以及处理器，其中，所述显示屏可以作为输入装置之一，所述显示屏用于显示待显示信息，所述输入装置用于输入命令，例如可以用于输入复制粘贴命令、用于点击操作、用于输入数字信息等等。

所述存储装置可存储有计算机软件，所述计算机软件能够被所述处理器执行，实现所述通用仿真培训课件生成方法。

如图1所示，本发明提供的通用仿真培训课件生成方法，所述方法包括以下步骤。

S1：将真实业务系统的界面加载至画布上以作为背景图片。

S2：将所选择的控件组件显示在所述背景图片上。

S3：通过js代码使所述控件组件具有可交互性；其中，每个所述控件组件具有与其对应的交互逻辑，以便于当用户与所述控件组件进行交互时，能够根据所述交互逻辑执行相应的动作指令。

S4：调整所述控件组件的尺寸、坐标、样式以使所述控件组件覆盖所述背景图片中原有控件组件。

S5：监控所述控件组件的尺寸、坐标、样式、交互逻辑，并实时记录所述控件组件对应的css属性、style属性以及html标签，得到 html格式的页面文件。

S6：对所述页面文件进行编排得到所述通用仿真培训课件。

可以通过通用仿真培训课件制作系统来实现通用仿真培训课件的生成，所述通用仿真培训课件制作系统包括界面布局工具、页面导航器、交互设计工具、课程编排工具、以及保存与导出工具。

所述界面布局工具包括画布界面以及控件工具面板，所述画布界面用于加载真实业务系统的界面以作为背景图片，所述控件工具面板用于提供控件组件并使所述控件组件显示在所述背景图片上以覆盖所述背景图片中原有控件组件。

所述页面导航器用于切换所述界面布局工具中的画布界面显示。

所述交互设计工具用于对显示在所述背景图片上所述控件组件进行处理以使其具有对应的交互逻辑，以便于当用户与所述控件组件进行交互时，能够根据所述交互逻辑执行相应的动作指令；以及，用于调整所述控件组件的尺寸、坐标、样式、交互逻辑，并实时记录所述控件组件对应的css属性、style属性以及html标签，以得到html格式的页面文件。

所述课程编排工具用于添加/删除列表项，其中，每一个所述列表是教程的每一个步骤，每一个步骤都记录着学习者学习到当前步骤时应该对页面上的哪些控件组件进行何种操作。可以包括步骤点和操作点，步骤点是一个用来概括多个操作点的概念。例如，需要学习如何“登录一个系统” ，在这里“登录”是一个比较笼统的概念，实际上，登录需要1、填写账号；2、填写密码；3、填写验证码；4、点击登录按钮。“登录”可以作为一个“步骤点”来笼统包含上述的4个“操作点”，步骤点可以只有一个标题，操作点需要记录的不仅有标题，还需要知道当前期待用户操作哪个控件组件、需要对这个控件组件做什么事情等等的信息。

所述保存与导出工具用于对所述页面文件进行编排并导出而得到所述通用仿真培训课件。

如图2所示，图2中示出了画布界面、控件工具面板以及页面导航器，其中，所述画布界面位于中间，所述控件工具面板位于所述画布界面的左侧，所述页面导航器位于所述控件工具面板的左侧。所述交互设计工具可以包括属性面板、事件面板以及课程编排工具，如图2所示，所述属性面板位于所述画布界面的右侧，所述事件面板通过图2上方的视图菜单调出，所述事件面板可如图3所示，所述课程编排工具可如图4所示。

制作者在制作通用仿真培训课件时，可以对原有的真实业务系统的界面进行截图、复制、粘贴的方式，将原有的真实业务系统的界面粘贴在画布界面内，以将所述真实业务系统的界面加载至画布上以作为背景图片。然后从所述控件工具面板中选择相关的控件组件摆放在所述画布界面以显示在所述背景图片之上，通过调整所述控件组件的坐标、尺寸以及样式来使得所述控件组件覆盖所述背景图片中原有控件组件，并通过js代码使所述控件组件具有可交互性，完成界面仿真。

所述控制组件的尺寸、坐标、样式、交互逻辑等属性的调整，将实时调整以及记录所述控件组件对应的css属性、style属性以及html标签，这部分数据是属于页面文件数据段。不同的所述控制组件的属性可以通过属性面板来调整，一但制作者修改了属性面板中的数值，监听器将立马将新的数值设置到属性上。

所述交互逻辑可以是点击控制组件执行页面跳转、点击控制组件执行页面打开、隐藏、弹出提示等。其中，至少一个所述控件组件的交互逻辑包括至少两个需被执行的动作指令，所述至少两个需被执行的动作指令互不相同。当一个所述控件组件的交互逻辑包括多个需被执行的动作指令时，可以将多个指令用逗号进行隔开。

所述通用仿真培训课件还可以包括多个所述页面文件，多个所述页面文件与所述真实业务系统中的多个界面一一对应，通过所述页面导航器来使所述画布界面显示不同的页面文件。

当一个通用仿真培训课件中需要包括多个所述页面文件时，在制取所述页面文件过程中，若执行页面跳转操作，则判断缓存中是否存在即将切换的页面，若存在，则从缓存中加载所述页面，然后将页面加载到iframe画布中，若不存在，则从服务器中加载所述页面，然后进行缓存并将页面加载到iframe画布中，这样就可以避免页面加载时频繁访问后端服务器，其中，所述画布为一个iframe，这样可以直接接受任意的html内容并直接渲染成相应的界面。

进一步的，所述页面文件包括位于文件内容最顶部的预设标签，所述预设标签包括json格式的数据内容，所述数据内容用于编写页面配置；所述页面加载到iframe画布时，画布的尺寸根据所述预设标签的定义自行进行调整。当然操作者可以自行对所述画布或页面的尺寸进行调整，调整的数据可以被记录在课件中。

所述通用仿真培训课件还包括课程数据段，其中，在课程学习模式下时，所述课程数据段记录所期待的每一步的操作内容、所述操作内容所属的页面信息、所期待的操作的解说；或者，在课程考核模式下时，所述课程数据段记录校验用户是否按照预期操作内容、每个所期待的操作的相关提示，并在考核结束后告知操作中存在的不足；所述操作内容包括与所述控件组件中的其至少一个进行交互。

所述通用仿真培训课件还包括配置数据段，其中，所述配置数据段记录当前课件的标题、描述以及被用于第一个加载的页面文件的页面名称、当前课件文件的版本以及当前课件文件所使用的技术版本。上述中，页面加载到iframe画布后，若操作者可以自行对所述画布或页面的尺寸进行调整，则调整的数据可以被记录在所述配置数据段中。

所述通用仿真培训课件还包括核心框架数据段，其中，所述核心框架数据段将html片段、css片段以及js片段以及相关的依赖库打包成统一的js片段，以便于课件播放器加载。

上述实施例为本发明较佳的实施方式，但本发明的实施方式并不受上述实施例的限制，以上实施方式仅是用于解释权利要求书。然本发明的保护范围并不局限于说明书。任何熟悉本技术领域的技术人员在本发明披露的技术范围内，可轻易想到的变化或者替换，都包含在本发明的保护范围之内。

Claims (10)

1.一种通用仿真培训课件生成方法，其特征在于，所述方法包括以下步骤：

将真实业务系统的界面加载至画布上以作为背景图片；

将所选择的控件组件显示在所述背景图片上；

通过js代码使所述控件组件具有可交互性；其中，每个所述控件组件具有与其对应的交互逻辑，以便于当用户与所述控件组件进行交互时，能够根据所述交互逻辑执行相应的动作指令；

调整所述控件组件的尺寸、坐标、样式以使所述控件组件覆盖所述背景图片中原有控件组件；

监控所述控件组件的尺寸、坐标、样式、交互逻辑，并实时记录所述控件组件对应的css属性、style属性以及html标签，得到 html格式的页面文件；

对所述页面文件进行编排得到所述通用仿真培训课件。

2.根据权利要求1所述的通用仿真培训课件生成方法，其特征在于，至少一个所述控件组件的交互逻辑包括至少两个需被执行的动作指令，所述至少两个需被执行的动作指令互不相同。

3.根据权利要求1所述的通用仿真培训课件生成方法，其特征在于，所述通用仿真培训课件包括多个所述页面文件，多个所述页面文件与所述真实业务系统中的多个界面一一对应。

4.根据权利要求3所述的通用仿真培训课件生成方法，其特征在于：

在制取所述页面文件过程中，若执行页面跳转操作，则判断缓存中是否存在即将切换的页面；

若存在，则从缓存中加载所述页面，然后将页面加载到iframe画布中；

若不存在，则从服务器中加载所述页面，然后进行缓存并将页面加载到iframe画布中。

5.根据权利要求4所述的通用仿真培训课件生成方法，其特征在于，所述页面文件包括位于文件内容最顶部的预设标签，所述预设标签包括json格式的数据内容，所述数据内容用于编写页面配置；

所述页面加载到iframe画布时，画布的尺寸根据所述预设标签的定义自行进行调整。

6.根据权利要求1所述的通用仿真培训课件生成方法，其特征在于，所述通用仿真培训课件还包括课程数据段，其中，

在课程学习模式下时，所述课程数据段记录所期待的每一步的操作内容、所述操作内容所属的页面信息、所期待的操作的解说；或者

在课程考核模式下时，所述课程数据段记录校验用户是否按照预期操作内容、每个所期待的操作的相关提示，并在考核结束后告知操作中存在的不足；

所述操作内容包括与所述控件组件中的其至少一个进行交互。

7.根据权利要求1所述的通用仿真培训课件生成方法，其特征在于，所述通用仿真培训课件还包括配置数据段，其中，所述配置数据段记录当前课件的标题、描述以及被用于第一个加载的页面文件的页面名称、当前课件文件的版本以及当前课件文件所使用的技术版本。

8.根据权利要求1所述的通用仿真培训课件生成方法，其特征在于，所述通用仿真培训课件还包括核心框架数据段，其中，所述核心框架数据段将html片段、css片段以及js片段以及相关的依赖库打包成统一的js片段。

9.一种电子设备，其特征阿在于，所述电子设备包括：

存储装置，用于存储计算机软件，

处理器，其在执行所述计算机软件时能够实现如权利要求1-8任一项所述的通用仿真培训课件生成方法。

10.一种通用仿真培训课件制作系统，其特征在于，所述系统包括界面布局工具、页面导航器、交互设计工具、课程编排工具、以及保存与导出工具，其中，

所述界面布局工具包括画布界面以及控件工具面板，所述画布界面用于加载真实业务系统的界面以作为背景图片，所述控件工具面板用于提供控件组件并使所述控件组件显示在所述背景图片上以覆盖所述背景图片中原有控件组件；

所述页面导航器用于切换所述界面布局工具中的画布界面显示；

所述交互设计工具用于对显示在所述背景图片上所述控件组件进行处理以使其具有对应的交互逻辑，以便于当用户与所述控件组件进行交互时，能够根据所述交互逻辑执行相应的动作指令；以及，用于调整所述控件组件的尺寸、坐标、样式、交互逻辑，并实时记录所述控件组件对应的css属性、style属性以及html标签，以得到html格式的页面文件；

所述课程编排工具用于添加/删除列表项，其中，每一个所述列表是教程的每一个步骤，每一个步骤都记录着学习者学习到当前步骤时应该对页面上的哪些控件组件进行何种操作；

所述保存与导出工具用于对所述页面文件进行编排并导出而得到所述通用仿真培训课件。

Images