CN108228139A - 基于html5浏览器框架的单片机开发系统及装置 - Google Patents

Abstract

本发明公开了一种基于HTML5浏览器框架的单片机开发系统及装置，系统包括相连接的单片机和HTML5浏览器框架设备，单片机包括第一物理连接设备层、JavaScript接口封装层、系统层以及位于系统层之上的单片机应用主程序，HTML5浏览器框架设备包括第二物理连接设备层、JavaScript解释器层、JavaScript开发框架层和外部设备层；第一物理连接设备层与第二物理连接设备层连接，单片机应用主程序通过GUI系统接口创建GUI相关的控件与用户交互，通过网络系统接口来进行网络通讯，通过文件系统接口来存取数据。本发明具有跨平台特性、降低技术门槛、加快开发速度、扩大适用人群。

Description

基于HTML5浏览器框架的单片机开发系统及装置

技术领域

本发明涉及单片机开发领域，特别涉及一种基于HTML5浏览器框架的单片机开发系统及装置。

背景技术

单片机自诞生以来，由于其固有的优点――低成本、小体积、高可靠性、高附加值、通过软件编程就可改变控制对象等，已越来越成为电子工程师设计产品是的首选器件之一。学习单片机并掌握其设计使用技术，已成为当代大学生、电子工程师、电子爱好者的必备技能。然而随着物联网技术和显示器技术的不断发展，人们对于单片机控制系统的网络化和大屏幕显示的要求也越来越高。单单网络技术从早期的有线网到无线网，从模拟时代到数字时代，从2G时代到3G/4G甚至是即将到来的5G时代的不断变革就已经让传统的单片机开发人员疲于奔命了，更不用说在以存储单位为KB量级的单片机上去实现复杂的大屏幕UI显示所面临的巨大挑战。

目前单片机开发人员普遍采用如下三种方式来克服他们所面临的这些挑战：1)使用HMI屏幕，通过MODBUS协议来处理人机显示交互界面。2)采用GPRS/WIFI等无线模块的方式来解决网络交互的问题。3)更换系统平台，重新学习linux，android等操作系统，学习新的编程语言java等等。对于这三种方案来讲，第一种方案通过预置指定的图片来进行一些简单的UI显示，但是缺乏对复杂UI界面的操纵能力。第二种方案，单片机人员需要进行复杂的网络协议栈和网络设备驱动的开发与测试工作，并且需要适配各种不同的网络设备。第三种方案则是相当于摒弃了传统单片机开发人员所具备的优势，使得传统单片机开发人员耗费大量的时间在与开发工作无关的操作系统、开发环境以及新的编程语言上，而无法迅速集中精力在最核心的业务逻辑上面。

发明内容

本发明要解决的技术问题在于，针对现有技术的上述缺陷，提供一种具有跨平台特性、降低技术门槛、加快开发速度、扩大适用人群的基于HTML5浏览器框架的单片机开发系统及装置。

本发明解决其技术问题所采用的技术方案是：构造一种基于HTML5浏览器框架的单片机开发系统，包括相连接的单片机和HTML5浏览器框架设备，所述单片机包括第一物理连接设备层、JavaScript接口封装层、系统层以及位于所述系统层之上的单片机应用主程序，所述HTML5浏览器框架设备包括第二物理连接设备层、JavaScript解释器层、JavaScript开发框架层和外部设备层；

所述第一物理连接设备层与所述第二物理连接设备层连接、用于负责信息的物理传输；所述JavaScript接口封装层负责将所述系统层的调用转化成为JavaScript函数和JavaScript语句块，设置相应的回调处理函数，并通过所述第一物理连接设备层发送给所述HTML5浏览器框架设备，同时将GUI对象、网络对象和文件对象的变量ID和JavaScript语句中的变量进行绑定，根据所述HTML5浏览器框架设备返回的包含有ID信息的JSON格式的结果，所述JavaScript接口封装层通过所述ID信息，以回调的方式来处理所述单片机应用主程序中的GUI对象、网络对象和文件对象；所述系统层负责所述单片机的网络系统接口、文件系统接口和GUI系统接口的创建与销毁工作、数据输出以及注册输入数据相关的回调处理函数；所述单片机应用主程序通过所述GUI系统接口创建GUI相关的控件与用户交互，通过所述网络系统接口来进行网络通讯，通过所述文件系统接口来存取数据；

所述第二物理连接设备层负责信息的物理传输，用于接收所述单片机发送的JavaScript函数和JavaScript语句块，并判断所述JavaScript函数和JavaScript语句块是否完整接收；所述JavaScript解释器层用于解释并运行从所述第二物理连接设备层收到的JavaScript代码，并监控用户界面和网络的变化，同时将相关的变化信息和相关的ID信息以JSON格式通知所述单片机去处理；所述JavaScript开发框架层与所述JavaScript解释器层连接、用于负责提供UI渲染引擎接口、数据存储接口以及网络接口的基础接口部分代码和高级封装库；所述外部设备层包括均与所述JavaScript开发框架层连接的外部显示器、外部存储器和网络设备。

在本发明所述的基于HTML5浏览器框架的单片机开发系统中，所述第一物理连接设备层和第二物理连接设备层均包括USB接口、SPI接口或UART接口。

在本发明所述的基于HTML5浏览器框架的单片机开发系统中，所述网络设备包括有线以太网设备、2G/3G/4G广域无线网络设备和WIFI局域无线网设备。

在本发明所述的基于HTML5浏览器框架的单片机开发系统中，所述HTML5浏览器框架设备上运行以WebKit为浏览器内核的桌面应用，所述桌面应用负责接收所述单片机发送的JavaScript代码，并执行所述JavaScript代码来创建HTML5支持的DOM元素、创建基于AJAX的网络请求或者基于WebSocket的网络请求并执行有关的文件操作，将结果返回给所述单片机；所述JavaScript代码包括所述JavaScript函数和所述JavaScript语句块。

在本发明所述的基于HTML5浏览器框架的单片机开发系统中，所述JavaScript开发框架层提供简易模式和复杂模式，在所述简易模式下，所述单片机使用高级封装库格式的Javascript函数库；在所述复杂模式下，所述单片机使用HTML5相关的基础代码格式的Javascript语句。

在本发明所述的基于HTML5浏览器框架的单片机开发系统中，所述HTML5浏览器框架设备将其状态变化发送给所述单片机，并对所述单片机进行软件升级以及通过服务器对所述单片机所要求的UI更换不同风格的皮肤。

在本发明所述的基于HTML5浏览器框架的单片机开发系统中，所述JavaScript开发框架层提供动态实时UI排版，用户使用触摸来动态调整UI的布局并保存所调整的UI布局，在所述HTML5浏览器框架设备下次起动时自动使用上次保存的UI布局。

本发明还涉及一种实现上述基于HTML5浏览器框架的单片机开发系统的装置，包括：

单片机主控单元：用于负责应用逻辑、显示逻辑、网络通讯逻辑、存储逻辑的控制以及和外部Android核心模块之间的通讯；

Android核心模块：用于提供HTML5浏览器框架设备的运行环境以及和单片机之间的通讯；

WebView应用单元：用于作为Android核心模块和HTML5浏览器的标准控件，为单片机应用提供串口通讯接口，负责所述单片机要求的显示逻辑、网络通讯逻辑和存储逻辑的实际执行部件，并实时反馈相关的信息给所述单片机进行处理；

HTML5框架单元：用于负责JavaScript基础核心接口框架部分，并提供简易模式和复杂模式，为所述单片机提供不同粒度的控制级别；

显示单元：用于提供不同尺寸屏幕的显示，支持多种分辨率的像素点，为所述单片机提供终端显示；

存储单元：用于提供所述单片机的配置相关的文件存储；

网络通讯单元：用于负责所述单片机的外部网络通讯接口，无缝支持多种网络接口。

在本发明所述的实现上述基于HTML5浏览器框架的单片机开发系统的装置中，所述网络接口包括Ethernet接口、2G/3G/4G接口和WIFI接口。

实施本发明的基于HTML5浏览器框架的单片机开发系统及装置，具有以下有益效果：由于设有单片机和HTML5浏览器框架设备，单片机包括第一物理连接设备层、JavaScript接口封装层、系统层以及单片机应用主程序，HTML5浏览器框架设备包括第二物理连接设备层、JavaScript解释器层、JavaScript开发框架层和外部设备层；HTML5浏览器框架设备充当单片机的网卡、显卡和存储卡，负责对单片机提供显示渲染接口、网络通讯接口和文件存储接口，单片机通过与HTML5浏览器框架设备连接的接口来发送JavaScript代码，HTML5浏览器框架设备通过执行收到JavaScript代码，不仅可以控制HTML5元素在HTML5浏览器框架设备的显示，也可以进行网络信息的交互以及文件的存储，HTML5浏览器框架设备在执行完JavaScript代码后，将执行结果以ID信息绑定的JSON格式数据返回给单片机，单片机通过ID信息来识别并处理返回的数据，因此具有跨平台特性、降低技术门槛、加快开发速度、扩大适用人群。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明基于HTML5浏览器框架的单片机开发系统及装置一个实施例中系统的结构示意图；

图2为所述实施例中装置的结构示意图。

具体实施方式

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

在本发明基于HTML5浏览器框架的单片机开发系统及装置实施例中，该基于HTML5浏览器框架的单片机开发系统的结构示意图如图1所示。HTML5框架作为新一代的互联网标准，在所有的WEB浏览器和手机应用上都展现了优秀的性能。它不仅简化了HTML5开发中CSS开发的沉重负担，而且还提供硬件访问控制，可调用USB接口、串口、SPI接口、摄像头、网络设备、存储设备等各种设备。HTML框架的跨平台特征帮用户解决了不同平台(IOS/Android/Windows)之间的兼容性，使得传统单片机的开发人员不必关心平台的架构性的细节，从而把自己的精力放在和业务相关的细节上去。基于这些技术基础，本发明使用一种HTML5浏览器框架的单片机开发系统。图1中，该基于HTML5浏览器框架的单片机开发系统包括相连接的单片机1和HTML5浏览器框架设备2，其中，单片机1包括第一物理连接设备层11、JavaScript接口封装层12、系统层13以及单片机应用主程序14，单片机应用主程序14位于系统层13之上，HTML5浏览器框架设备2包括第二物理连接设备层21、JavaScript解释器层22、JavaScript开发框架层23和外部设备层24。

其中，第一物理连接设备层11与第二物理连接设备层21连接、用于负责信息的物理传输；JavaScript接口封装层12负责将系统层13的调用转化成为JavaScript函数和JavaScript语句块，设置相应的回调处理函数，并通过第一物理连接设备层11发送给HTML5浏览器框架设备2，同时将GUI对象、网络对象和文件对象的变量ID和JavaScript语句中的变量进行绑定，根据HTML5浏览器框架设备2返回的包含有ID信息的JSON格式的结果，JavaScript接口封装层12通过ID信息，以回调的方式来处理单片机应用主程序14中的GUI对象、网络对象和文件对象。

系统层13负责单片机1的网络系统接口131、文件系统接口132和GUI系统接口133(系统层13包括网络系统接口131、文件系统接口132和GUI系统接口133)的创建与销毁工作、数据输出以及注册输入数据相关的回调处理函数；单片机应用主程序14(单片机APP)由单片机开发人员负责，业务逻辑在单片机应用主程序14中实现，通过GUI系统接口133创建GUI相关的控件与用户交互，通过网络系统接口131来进行网络通讯，通过文件系统接口132来存取数据。

第二物理连接设备层21负责信息的物理传输，用于接收单片机1发送的JavaScript函数和JavaScript语句块，并判断JavaScript函数和JavaScript语句块是否完整接收；JavaScript解释器层22用于解释并运行从第二物理连接设备层21收到的JavaScript代码，并监控用户界面和网络的变化，同时将相关的变化信息和相关的ID信息以JSON格式通知单片机1去处理；JavaScript开发框架层23与JavaScript解释器层22连接、用于负责提供UI渲染引擎接口231、数据存储接口232以及网络接口233(JavaScript开发框架层23包括UI渲染引擎接口231、数据存储接口232以及网络接口233)的基础接口部分代码和高级封装库；外部设备层24包括均与JavaScript开发框架层23连接的外部显示器241、外部存储器242和其所支持的不同的网络设备243，这些网络设备243包括有线以太网设备、2G/3G/4G广域无线网络设备和WIFI局域无线网设备。上述外部显示器241与UI渲染引擎接口231连接，外部存储器242与数据存储接口232连接，网络设备243与网络接口233连接。

在单片机1和HTML5浏览器框架设备2的两者关系中，单片机1作为主控去控制HTML5浏览器框架设备2，HTML5浏览器框架设备2充当单片机1的显卡、网卡和存储磁盘设备。HTML5浏览器框架设备2可以将自己的状态变化发送给单片机1，并对单片机1进行软件升级以及通过服务器对单片机1所要求的UI更换不同风格的皮肤。

本发明针对目前各种单片机在开发大屏幕显示和网络通讯方面的不足，提供的基于HTML5浏览器框架的单片机开发系统可以极大的降低传统单片机开发人员在大屏幕显示和网络通讯应用上的技术门槛，并使得让开发人员专注于核心业务，同时扩大了该技术的适用人群，总之，本发明具有跨平台特性、降低技术门槛、加快开发速度、扩大适用人群。

第一物理连接设备层11和第二物理连接设备层21均包括USB接口、SPI接口或UART接口，也就是说，第一物理连接设备层11可以选择UART接口、USB接口或SPI接口方式与第二物理连接设备层21连接。换句话说，本实施例中，HTML5浏览器框架设备2(如android终端)通过UART接口、USB接口或者SPI接口与单片机1进行通讯。

本实施例中，该JavaScript开发框架层23提供简易模式和复杂模式，用户可以选择任一模式，在简易模式下，单片机1使用高级封装库格式的Javascript函数库；在复杂模式下，单片机1使用HTML5相关的基础代码格式的Javascript语句。

本实施例中，HTML5浏览器框架设备2上运行以WebKit为浏览器内核的桌面应用，该桌面应用负责接收单片机发送的JavaScript代码，并执行JavaScript代码来创建HTML5支持的DOM元素、创建基于AJAX的网络请求或者基于WebSocket的网络请求并执行有关的文件操作，将结果返回给单片机1；上述JavaScript代码包括JavaScript函数和JavaScript语句块。

值得一提的是，本实施例中，JavaScript开发框架层23提供动态实时UI排版，用户使用触摸来动态调整UI的布局并保存所调整的UI布局，在HTML5浏览器框架设备2下次起动时自动使用上次保存的UI布局。

本实施例还涉及一种实现上述基于HTML5浏览器框架的单片机开发系统的装置，该装置的结构示意图如图2所示。图2中，该装置包括单片机主控单元31、Android核心模块32、WebView应用单元33、HTML5框架单元34、显示单元35、存储单元36和网络通讯单元37；其中，单片机主控单元31用于负责应用逻辑、显示逻辑、网络通讯逻辑、存储逻辑的控制以及和外部Android核心模块之间的通讯；Android核心模块32用于提供HTML5浏览器框架设备的运行环境以及和单片机1之间的通讯；WebView应用单元33用于作为Android核心模块32和HTML5浏览器的标准控件，为单片机应用提供串口通讯接口，负责单片机1要求的显示逻辑、网络通讯逻辑和存储逻辑的实际执行部件，并实时反馈相关的信息给单片机1进行处理。

HTML5框架单元34用于负责JavaScript基础核心接口框架部分，并提供简易模式和复杂模式，两种模式为单片机1提供不同粒度的控制级别，简易模式会使用固定风格的UI，但是减少了单片机1和Android核心模块32的通讯时间；复杂模式可以使用更加精细的UI控制，但是会增加了单片机1和Android核心模块32的通讯数据。显示单元35用于提供不同尺寸屏幕的显示，支持多种分辨率的像素点，为单片机1提供终端显示；存储单元36用于提供单片机1的配置相关的文件存储；网络通讯单元37用于负责单片机1的外部网络通讯接口，无缝支持多种网络接口，该网络接口包括Ethernet接口、2G/3G/4G接口和WIFI接口。

单片机1启动Android核心设备，并等待Android核心设备上面的WebView应用单元33启动通知。单片机1收到启动通知后，开始发送创建UI、文件和网络的JavaScript语句组成的字符串给运行在Android核心设备上面的WebView应用单元33，并以回车换行作为一条完整JavaScript语句的结束。WebView应用单元33收到来自单片机1的JavaScript语句，启动JavaScript解释器层22来执行该JavaScript语句，并将执行语句的结果返回给单片机1处理。通过采用JavaScript，可以方便的操作HTML5的DOM标签，也可以方便的使用AJAX或者WebSocket来进行网络通讯，另外还可以通过HTML5的文件标签来进行文件的操作。WebView应用单元33由基于HTML5浏览器框架的单片机开发系统的设备提供商来提供。单片机开发人员在使用本发明的装置的时候只需要集中精力在自己的业务逻辑部分，而不需要考虑复杂的网络编程、GUI编程以及文件存储。单片机开发人员只需要通过调用基于HTML5浏览器框架的单片机开发系统的接口库函数，就可以轻松的处理网络、GUI和文件存储方面的问题。传统的单片机开发人员采用本发明的装置后，可以延长职业技能。

总之，本实施例中，单片机1通过USB接口、UART接口或SPI接口控制HTML5浏览器框架设备2，单片机1的GUI系统接口133、网络系统接口131、文件系统接口132(存储接口)封装的是JavaScript代码。单片机1封装的JavaScript代码运行在HTML5浏览器框架设备2；单片机1通过USB接口、UART接口或SPI接口接收HTML5浏览器框架设备2的返回的JSON格式的消息；HTML5浏览器框架设备2负责显示UI界面、网络连接和文件存储，并将状态或者结果以JSON格式返回给单片机1。HTML5浏览器框架设备2的DOM元素显示风格可以从服务器端下载，还可以从服务器端下载升级单片机固件程序。本发明使得单片机开发方式具备统一的用户界面、数据存储以及网络组件，可以极大地减少单片机1的代码大小，使得传统单片机开发人员极大发挥自己的优势，创造更多的社会和商业价值。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (9)

1.一种基于HTML5浏览器框架的单片机开发系统，其特征在于，包括相连接的单片机和HTML5浏览器框架设备，所述单片机包括第一物理连接设备层、JavaScript接口封装层、系统层以及位于所述系统层之上的单片机应用主程序，所述HTML5浏览器框架设备包括第二物理连接设备层、JavaScript解释器层、JavaScript开发框架层和外部设备层；

所述第一物理连接设备层与所述第二物理连接设备层连接、用于负责信息的物理传输；所述JavaScript接口封装层负责将所述系统层的调用转化成为JavaScript函数和JavaScript语句块，设置相应的回调处理函数，并通过所述第一物理连接设备层发送给所述HTML5浏览器框架设备，同时将GUI对象、网络对象和文件对象的变量ID和JavaScript语句中的变量进行绑定，根据所述HTML5浏览器框架设备返回的包含有ID信息的JSON格式的结果，所述JavaScript接口封装层通过所述ID信息，以回调的方式来处理所述单片机应用主程序中的GUI对象、网络对象和文件对象；所述系统层负责所述单片机的网络系统接口、文件系统接口和GUI系统接口的创建与销毁工作、数据输出以及注册输入数据相关的回调处理函数；所述单片机应用主程序通过所述GUI系统接口创建GUI相关的控件与用户交互，通过所述网络系统接口来进行网络通讯，通过所述文件系统接口来存取数据；

所述第二物理连接设备层负责信息的物理传输，用于接收所述单片机发送的JavaScript函数和JavaScript语句块，并判断所述JavaScript函数和JavaScript语句块是否完整接收；所述JavaScript解释器层用于解释并运行从所述第二物理连接设备层收到的JavaScript代码，并监控用户界面和网络的变化，同时将相关的变化信息和相关的ID信息以JSON格式通知所述单片机去处理；所述JavaScript开发框架层与所述JavaScript解释器层连接、用于负责提供UI渲染引擎接口、数据存储接口以及网络接口的基础接口部分代码和高级封装库；所述外部设备层包括均与所述JavaScript开发框架层连接的外部显示器、外部存储器和网络设备。

2.根据权利要求1所述的基于HTML5浏览器框架的单片机开发系统，其特征在于，所述第一物理连接设备层和第二物理连接设备层均包括USB接口、SPI接口或UART接口。

3.根据权利要求2所述的基于HTML5浏览器框架的单片机开发系统，其特征在于，所述网络设备包括有线以太网设备、2G/3G/4G广域无线网络设备和WIFI局域无线网设备。

4.根据权利要求3所述的基于HTML5浏览器框架的单片机开发系统，其特征在于，所述HTML5浏览器框架设备上运行以WebKit为浏览器内核的桌面应用，所述桌面应用负责接收所述单片机发送的JavaScript代码，并执行所述JavaScript代码来创建HTML5支持的DOM元素、创建基于AJAX的网络请求或者基于WebSocket的网络请求并执行有关的文件操作，将结果返回给所述单片机；所述JavaScript代码包括所述JavaScript函数和所述JavaScript语句块。

5.根据权利要求1至4任意一项所述的基于HTML5浏览器框架的单片机开发系统，其特征在于，所述JavaScript开发框架层提供简易模式和复杂模式，在所述简易模式下，所述单片机使用高级封装库格式的Javascript函数库；在所述复杂模式下，所述单片机使用HTML5相关的基础代码格式的Javascript语句。

6.根据权利要求5所述的基于HTML5浏览器框架的单片机开发系统，其特征在于，所述HTML5浏览器框架设备将其状态变化发送给所述单片机，并对所述单片机进行软件升级以及通过服务器对所述单片机所要求的UI更换不同风格的皮肤。

7.根据权利要求6所述的基于HTML5浏览器框架的单片机开发系统，其特征在于，所述JavaScript开发框架层提供动态实时UI排版，用户使用触摸来动态调整UI的布局并保存所调整的UI布局，在所述HTML5浏览器框架设备下次起动时自动使用上次保存的UI布局。

8.一种实现如权利要求1所述的基于HTML5浏览器框架的单片机开发系统的装置，其特征在于，包括：

单片机主控单元：用于负责应用逻辑、显示逻辑、网络通讯逻辑、存储逻辑的控制以及和外部Android核心模块之间的通讯；

Android核心模块：用于提供HTML5浏览器框架设备的运行环境以及和单片机之间的通讯；

WebView应用单元：用于作为Android核心模块和HTML5浏览器的标准控件，为单片机应用提供串口通讯接口，负责所述单片机要求的显示逻辑、网络通讯逻辑和存储逻辑的实际执行部件，并实时反馈相关的信息给所述单片机进行处理；

HTML5框架单元：用于负责JavaScript基础核心接口框架部分，并提供简易模式和复杂模式，为所述单片机提供不同粒度的控制级别；

显示单元：用于提供不同尺寸屏幕的显示，支持多种分辨率的像素点，为所述单片机提供终端显示；

存储单元：用于提供所述单片机的配置相关的文件存储；

网络通讯单元：用于负责所述单片机的外部网络通讯接口，无缝支持多种网络接口。

9.根据权利要求8所述的实现如权利要求1所述的基于HTML5浏览器框架的单片机开发系统的装置，其特征在于，所述网络接口包括Ethernet接口、2G/3G/4G接口和WIFI接口。