一种基于html5画状态流程图生成MCU应用程序的方法技术

本发明专利技术提供了一种基于html5画状态流程图生成MCU应用程序的方法，包括：步骤a：基于html15画布技术提供可视化的状态流程图控件；步骤b：通过拖曳所述状态流程图控件设计状态流程图；步骤c：将步骤b中设计好的状态流程图的属性数据打包成规定格式的数据并发给后台；以及步骤d：后台读取所述数据并根据MCU程序代码规范对所述数据进行代码拼接组合。本发明专利技术方法实现了根据流程图生成MCU规范代码，所生成的代码格式具备一致性，因而能够有效提高团队开发效率，节省开发成本，大幅降低对新人的培训成本。训成本。训成本。

A method of generating MCU application program by drawing state flow chart based on HTML5

【技术实现步骤摘要】
一种基于html5画状态流程图生成MCU应用程序的方法


[0001]本专利技术涉及MCU软件开发领域，尤其涉及一种基于html5画状态流程图生成MCU应用程序的方法。

技术介绍

[0002]在MCU程序开发过程中，由于团队的开发人员对技术掌握程度和工作经验不同导致团队开发编写代码不能做到代码规范和格式统一。代码不规范及格式不统一会导致团队协作时阅读或修改他人的代码理解耗时长，团队新成员熟悉之前项目业务时在阅读理解之前MCU程序代码时很难独立完成，需要团队熟练人员给新成员培训业务逻辑，而这是一件很耗时间成本的工作。然而市面上MCU程序画流程图生成代码的工具都需要版权，实现画流程图自动生成代码功能的工具收费昂贵。

技术实现思路

[0003]本专利技术为了解决上述现有技术的缺陷，提供了一种基于html5画状态流程图生成MCU应用程序的方法，能够根据流程图生成MCU规范代码，生成的代码格式具备一致性。
[0004]本专利技术的一个方面提供了一种基于html5画状态流程图生成MCU应用程序的方法，包括如下步骤：
[0005]步骤a：基于html15画布技术提供可视化的状态流程图控件；
[0006]步骤b：通过拖曳所述状态流程图控件设计状态流程图；
[0007]步骤c：将步骤b中设计好的状态流程图的属性数据打包成规定格式的数据并发给后台；以及
[0008]步骤d：后台读取所述数据并根据MCU程序代码规范对所述数据进行代码拼接组合。
[0009]优选地，步骤a中，所述状态流程图控件包括：开始图形，判断图形，选择器图形，链接图形，方法图形，判断图形，子模块图形和结束图形。
[0010]优选地，步骤b中，设计状态流程图至少包括如下步骤：
[0011]步骤b1：拖曳开始图形；
[0012]步骤b2：拖曳判断图形；
[0013]步骤b3：拖曳链接图形把每个判断图形链接起来；以及
[0014]步骤b4：拖曳结束图形。
[0015]优选地，步骤c中，所述设计好的状态流程图的所述属性数据包括：状态流程图的类型、控件设置的属性以及存放的代码。
[0016]优选地，步骤d中利用C语言编写算法进行拼接组合。
[0017]优选地，步骤d中拼接组合的代码包括.C代码和.H代码。
[0018]优选地，步骤d之后还包括步骤e：将通过后台拼组的代码返回前台显示预览。
[0019]本专利技术具有如下有益效果：本专利技术方法实现了根据流程图生成MCU规范代码，所生
成的代码格式具备一致性，因而能够有效提高团队开发效率，节省开发成本，大幅降低对新人的培训成本。
附图说明
[0020]图1为本专利技术的一种基于html5画状态流程图生成MCU应用程序的方法的流程图。
[0021]图2为本专利技术方法中各状态流程图控件的示意图。
[0022]图3为本专利技术方法的设计状态流程图的画板界面的示意图。
[0023]图4为本专利技术方法的设计状态流程图的画板界面的另一示意图。
[0024]图5为本专利技术方法的生成MCU程序代码预览界面(.H文件)的示意图。
[0025]图6为本专利技术方法的生成MCU程序代码预览界面(.C文件)的示意图。
具体实施方式
[0026]以下将结合说明书附图对本专利技术的实施方式予以说明。需要说明的是，本说明书中所涉及的实施方式不是穷尽的，不代表本专利技术的唯一实施方式。以下相应的实施例只是为了清楚的说明本专利技术专利的
技术实现思路
，并非对对其实施方式的限定。对于该领域的普通技术人员来说，在该等实施例说明的基础上还可以做出不同形式的变化和改动，凡是属于本专利技术的技术构思和
技术实现思路
并且显而易见的变化或变动也在本专利技术的保护范围之内。
[0027]如图1所示，一种基于html5画状态流程图生成MCU应用程序的方法，包括如下步骤a～e。下面对各步骤进行详细说明。
[0028]步骤a：基于html15画布技术提供可视化的状态流程图控件。本步骤a中，基于html15画布技术具体可以为基于html15画布jquery、sqlserver、.net等技术。所述状态流程图控件包括：开始图形，选择器图形，链接图形，方法图形，判断图形(或称为节点图形)，子模块图形和结束图形等。具体地，如图3所示，开始图形呈绿色椭圆的形式，选择器图形呈箭头的形式，链接图形呈线条的形式，方法图形呈长方形的形式，判断图形呈菱形的形式，子模块图形呈特别长方形的形式，结束图形呈红色正方形的形式(图3中仅仅示出形状)。其中，选择器图形(箭头图形)可以让鼠标切换为选择状态，可选择画板上的图形操作详情和大小。对于开始图形和结束图形，在画板上只允许出现一个开始图形和一个结束图形。链接图形用于两个图形的链接，可以切换线条链接的形态，例如可以设置为内折线和外折线、直线和斜线图形。方法图形主要用于存放方法执行的代码，可以存放方法代码。节点图形用于节点判断，可以存放判断代码。子模块图形可链接别的状态流程图做关联。上述各图形可以被拖曳到画板上，图形大小可以缩放，点击图形按下鼠标可以任意地拖曳到想摆放的位置。
[0029]步骤b：通过拖曳所述状态流程图控件设计状态流程图。本步骤b中，在一个实施例中，设计状态流程图包括如下步骤：
[0030]步骤b1：拖曳开始图形，放置在状态流程图的开始处，如图3中的S图标。
[0031]步骤b2：拖曳节点图形，放置在状态流程图判断节点处，如图3中的C图标。
[0032]步骤b3：拖曳线条链接图形，根据需求把每个判断图形链接起来。链接线条双击可以打开设置信息窗口，可以编辑链接图形的基础信息，例如：线条的链接起点名称和终点名称及位置信息(起点位置，起点偏移，终点偏移，终点位置，终点偏移)，可以设置执行顺序，和存放转移条件代码及退出代码。如图4所示为正在进行条件设置的示意图。
[0033]具体地，如图3中所示设置转移条件会显示在线头上方，以绿色字体(深色字体)显示；设置退出代码会显示在线头上方，以灰色字体(浅色字体)显示。
[0034]步骤b4：拖曳结束图形，放置最后结尾处并串连，状态流程图已完成。
[0035]接下来为步骤c：将步骤b中设计好的状态流程图的属性数据打包成规定格式的数据并发给后台。本步骤c中，所述设计好的状态流程图的所述属性数据包括：状态流程图的类型、控件设置的属性以及存放的代码。
[0036]即，完成状态流程图后点击下一步，系统应用jQuery把前端操作者所画流程图类型、每个控件设置的属性和存放的代码打包成json数据通过ajax接口请求传给后台。
[0037]步骤d：后台读取所述数据并根据MCU程序代码规范对所述数据进行代码拼接组合。本步骤d中，利用C语言编写算法进行拼接组合。拼接组合的代码包括.C代码和.H代码。拼接组合的代码为完整且格式统一、代码规范的MCU.C代码和.H代码。本步骤中，本领域的技术人员知晓利用C语言编写算法的逻辑进行代码拼接。例如本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于html5画状态流程图生成MCU应用程序的方法，其特征在于，包括如下步骤：步骤a：基于html15画布技术提供可视化的状态流程图控件；步骤b：通过拖曳所述状态流程图控件设计状态流程图；步骤c：将步骤b中设计好的状态流程图的属性数据打包成规定格式的数据并发给后台；以及步骤d：后台读取所述数据并根据MCU程序代码规范对所述数据进行代码拼接组合。2.根据权利要求1所述的基于html5画状态流程图生成MCU应用程序的方法，其特征在于，步骤a中，所述状态流程图控件包括：开始图形，判断图形，选择器图形，链接图形，方法图形，判断图形，子模块图形和结束图形。3.根据权利要求2所述的基于html5画状态流程图生成MCU应用程序的方法，其特征在于，步骤b中，设计状态流程图至少包括如下步骤：步骤b1：拖曳开始图形...

【专利技术属性】
技术研发人员：王永和，段扬，孙海龙，
申请(专利权)人：上海信耀电子有限公司，
类型：发明
国别省市：