Mixly第三方库开发的两种方法——U8g2库二次开发
Mixly第三方库开发的两种方法——U8g2库二次开发
- 前言
- 方法一:自定义库
- 1、创建库文件夹
- 2、开始编程
- 2.1、定义图形块的基本信息
- 2.2、定义图形块的外观样式
- 2.3、定义图形块与C语言的转化
- 2.4、资源配置
- 3、使用自定义的Mixly第三方库编程
- 方法二:使用make库进行自定义库
- 1、下载和安装make库
- 2、导入make库
- 3、使用make库
前言
Mixly自从2015年问世以来,就深受国内创客、中小学教师喜爱,如今已经成为国内最好用的Arduino图形化软件。Mixly最大的优点就是其开放性,Mixly建立了一个生态圈,这个生态圈欢迎所有人的加入,不限制厂家,不限制硬件。因此,任何一个掌握规则的人都可以为Mixly开发第三方库,来丰富Mixly的功能。
Mixly基本原理:Mixly的基本原理是将图形化程序转化成C语言,即设计好对应的图形模块样式,再将模块与C代码进行对应。
Mixly作用:让使用者通过拖拉拽的积木方式实现C程序的编写,使一些不懂C语言语法但是想进行Arduino等MCU开发的初学者也能玩转单片机,比如应用于少儿编程。
本博客使用Arduino UNO开发板+OLED显示模块+U8g2库实现一个可显示中文的自定义Mixly第三方库。我使用的Mixly版本为1.2.2。Mixly官网
方法一:自定义库
1、创建库文件夹
1)理论
Mixly第三方库的基本文件结构如下:
│— XXX // 项目名称,以下文件或文件夹的XXX都需修改为项目名称│— block│— XXX.js│— companypin│— XXX│— pin.js│— generator│— XXX.js│— language│— XXX│— zh-hans.js //简体中文│— zh-hant.js //繁体中文│— en.js //英语│— spa.js //西班牙语│— media│— XXX│— XXX //文件夹,放置一些库文件(.h和.cpp)│— XXX.xml
①XXX.xml文件:处于根目录下。此文件定义了图形块的基本信息,比如类别、名称,ID等。
②block/XXX.js文件:此文件定义了每个图形块的外观样式,比如颜色、文字、图标等。
③generator/XXX.js文件:此文件是将图形块程序转化成C语言的关键部分,定义了每一个图形化模块对应的 Arduino C语言代码。
④其他文件:language/xxx/en.js(zh-hans.js)等文件是语言文件(en.js是英文语言文件,zh-hans.js是简体中文语言文件,zh-hant.js是繁体中文语言文件),该类文件定义了图形块程序中每一个字段显示的文字内容;companypin文件夹中的文件一般不需要,除非硬件引脚不同;media文件夹中主要放置程序块包含的音效、图片等;XXX文件夹放置库文件。
注:①②③点的文件是必须的;其他文件是非必须的。
2)实现
构建库文件结构如下图所示:
2、开始编程
共分为3个部分,也是必须要编写的3个必要的脚本,分别为XXX.xml文件、block/XXX.js文件、generator/XXX.js文件。
注意:方法和变量的名称在以下三个脚本中必须严格保持一致,且大小写敏感。
2.1、定义图形块的基本信息
1)理论
此文件定义了图形块的基本信息,比如类别、名称,ID等(此脚本为全局路径配置,注意方法和变量的名称)。打开根文件夹下的XXX.xml 脚本,模板如下:
<!--
type="company"
block="block/XXX.js"
generator="generator/XXX.js"
media="media/XXX/"
language="language/XXX/"
companypin="companypin/XXX/pin.js"
-->
//标出各个文件/文件夹的所在位置。XXX为项目名称,需修改。<script type="text/javascript" src="../../blocks/company/XXX.js"></script>
<script type="text/javascript" src="../../generators/arduino/company/XXX.js"></script>
<category id="ID?" name="名字?" colour="#1296DB"><block type = "xxxxx"> //与block/XXX.js文件沟通的桥梁<value name="名称?"><shadow type="类型?"></shadow>
<!--type = 类型,具体含义如下:Type(类型) 含义 对应端口(UNO为例,具体硬件具体分析)pins_digital 数字管脚 0 ~ 13,A0 ~ A7pins_analog 模拟输入管脚 A0 ~ A7pins_pwm 模拟输出管脚 3,6,9,10,11,13pins_interrupt 中断管脚 0,1,2,3,7
--></value></block>
</category>
- block 节点:用于定义一个新的图形块,type的值为图形块的名称。
- value节点:用于容纳选择框。
- shadow节点:表示下拉框,是专门用于下拉选择的节点。type类型表示该下拉框可以选择的类型。
2)实现
可使用代码编辑工具编写,也可以使用记事本打开再编写。具体代码如下:
<!--
type="company"
block="block/Mixly_u8g2.js"
generator="generator/Mixly_u8g2.js"
--><script type="text/javascript" src="../../blocks/company/Mixly_u8g2.js"></script>
<script type="text/javascript" src="../../generators/arduino/company/Mixly_u8g2.js"></script><category id="kivin OLED demo" name="OLED中文显示" colour= 20><!-- OLED模块 --><!--include模块--><block type="U8g2lib_include"><value name="String"><shadow type="text"> <!--可编辑文本--><field name="_text">U8g2lib.h</field></shadow></value></block><!--配置构造函数模块--><block type="config" name="U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2"></block><!--开启 U8g2驱动模块--><block type="initOled"></block><!--中文输入模块--><block type="displayCN"><value name="disCN"><shadow type="text"><field name="_text">textOled</field></shadow></value></block>
</category>
2.2、定义图形块的外观样式
1)理论
此文件定义了每个图形块的外观样式,比如颜色、文字、图标等。打开block文件夹下的xxx.js脚本,模板如下:
'use strict';
goog.provide('Blockly.Blocks.XXX');
goog.require('Blockly.Blocks');
//前三行是一些初始化信息,是Mixly库开发的规范开头,只需改动XXX(项目名称)即可。//注意:这里的xxxxx要与根目录下的XXX.xml文件中的block节点的type是相同的,这是在两个文件中建立沟通的桥梁.
Blockly.Blocks.xxxxx = {init: function() {this.appendDummyInput("")...this.setColour();this.setPreviousStatement();this.setNextStatement();this.setInputsInline();...}
};
- setColour():表示设置图形块颜色,颜色值是HUE格式,范围为0~360,具体颜色值可通过网络查找。(0: 红色120: 绿色240: 蓝色300: 紫色)
- setPreviousStatement():表示设置是否可以跟上一模块连接。(true: 可以 false:不可以)
- setNextStatement():表示设置是否可以跟下一模块连接。(true: 可以 false:不可以)
- setInputsInline():表示设置模块为单行或多行,当模块输入参数较多时可以设为false(false为多行)。
- setTooltip():表示设置模块说明文字,可以直接输入文本,或者通过语言变量定义。
- setOutput(Boolean, type):表示设置是否为输出模式。当参数Boolean为true时则该模块的左侧有个连接点,该模块可以放到其他模块的输入框中。为了控制该模块输出的数据类型,可以通过参数type来定义。type可选值有Number(数值),String(字符串),Boolean(布尔型),Array(数组), ‘IPAddress’(IP地址)等。多类型可用[Number, Boolean]这样的形式表示。
官方语言变量
官方的语言变量以【Blockly.MIXLY_】为前缀。
Mixly已经定义了一部分常用的语言变量,比如Blockly.MIXLY_PIN的中文含义是“管脚”,英文含义是“PIN”。如需使用,可以直接调用。其他官方语言变量可以参考Mixly0.996_WIN\blockly\msg\js\zh-hans.js文件。自定义语言变量
自定义变量采用【Blockly.自定义库名称_变量名】的形式。如在第三方库中定义一个语言变量,可在language/XXX/zh-hans.js文件中编写自定义的语言变量,如下所示:Blockly.MAKER_LED_SWITCH="LED开关"; Blockly.MAKER_LED_SWITCH_TOOLTIP="用于控制LED开关。" Blockly.MAKER_LED_OPEN="开"; Blockly.MAKER_LED_OFF="关";
2)实现
具体代码如下:
'use strict';
goog.provide('Blockly.Blocks.Mixly_u8g2');
goog.require('Blockly.Blocks');// ---OLED模块图形配置---
//include模块
Blockly.Blocks.U8g2lib_include = {init: function() {this.setColour(120);//模块图形颜色this.appendDummyInput("")//此行代码刚需,为模块创建提供入口.appendField("#include <") //代码块上的文字内容.appendField(new Blockly.FieldTextInput('U8g2lib'), 'INCLUDE')//创建文本输入对象.appendField(".h>");this.setPreviousStatement(true);//是否可以与上一模块连接this.setNextStatement(true);//是否可以与下一模块连接}
};//配置构造函数模块
Blockly.Blocks.config = {init: function() {this.setColour(120);this.appendDummyInput("").appendField("配置构造函数").appendField("U8g2 SSD1306 128X64")this.setPreviousStatement(true, null);this.setNextStatement(true, null);this.setInputsInline(false);//是否开启模块单行显示(true为单行,false为多行)}
};//开启 U8g2驱动模块
Blockly.Blocks.initOled = {init: function() {this.setColour(120);this.appendDummyInput("").appendField("开启U8g2驱动程序")this.setPreviousStatement(true, null);this.setNextStatement(true, null);}
};//中文输入模块
Blockly.Blocks.displayCN = {init: function() {this.setColour(50);this.appendDummyInput("").appendField("输入字符串...")this.appendValueInput("VALUE", String).setCheck([String,Number]).setAlign(Blockly.ALIGN_RIGHT);//开启模块右侧可连接this.setPreviousStatement(true, null);this.setNextStatement(false, null);}
};
2.3、定义图形块与C语言的转化
1)理论
此文件是将图形块程序转化成C语言的关键部分,定义了每一个图形化模块对应的 Arduino C语言代码。打开generator文件夹下的XXX.js脚本,模板如下:
图形块转化C语言的原理为首先要获取图形块中设置的各参数,然后利用字符串拼接等手段“拼凑”出C语言代码。
'use strict';
goog.provide('Blockly.Arduino.XXX');
goog.require('Blockly.Arduino');
//前三行是一些初始化信息,是Mixly库开发的规范开头,只需改动XXX(项目名称)即可。//函数的定义,转化过程就在该函数中
Blockly.Arduino.xxxxx = function() {//利用getFieldValue()方法获取图形块中设置的数值var A = this.getFieldValue('与block/XXX.js中设置的相关名称相同A');var B = this.getFieldValue('与block/XXX.js中设置的相关名称相同B');//用于编写C语言的setup部分,setup部分程序有固定格式,将setup内的程序赋值给Blockly.Arduino.setups_['setup_output_' + A]。setup程序内容可用字符串拼接的方式组成。如:pinMode(13, OUTPUT);Blockly.Arduino.setups_['setup_output_' + A] = 'pinMode(' + A + ', OUTPUT);';//用于编写C语言中的loop函数,采用字符串拼接的方式将管脚、状态等参数放入C语言代码中。如:digitalWrite(13,HIGH);var code = 'digitalWrite(' + A + ',' + B + ');\n'return code;//用return code;将编写的代码传回Mixly。//如要对获取的数值进行字符串操作、逻辑运算、数学运算等操作可以直接使用js语法进行运算,运算完成后再输出成C语言。
};
2)实现
具体代码如下:
'use strict';
goog.provide('Blockly.Arduino.Mixly_u8g2');//注意脚本类别及路径名称
goog.require('Blockly.Arduino');// ---OLED模块图形转代码---//include模块Blockly.Arduino.U8g2lib_include = function() {var INCLUDE = this.getFieldValue('INCLUDE');//使用INCLUDE 变量来存储,block文件夹中的OLED.js脚本,文本输入对象的值Blockly.Arduino.definitions_['define_'+INCLUDE] = '#include <'+INCLUDE+'.h>';//严格函数,固定写法(转include调用内容)return '';
};//配置构造函数模块Blockly.Arduino.config = function() {Blockly.Arduino.definitions_['define_'] = 'U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R0,SCL,SDA);\n';return '';
};//开启 U8g2驱动模块Blockly.Arduino.initOled = function() {Blockly.Arduino.setups_['setup_intOled'] = 'u8g2.begin();\n';//严格函数固定写法(转setup函数中代码)return '';
};//中文输入模块Blockly.Arduino.displayCN=function(){var value = Blockly.Arduino.valueToCode(this, 'VALUE', Blockly.Arduino.ORDER_ATOMIC) || '\"\"';return 'u8g2.firstPage();' + '\n' + 'do {' + '\n' + 'u8g2.setFont(u8g2_font_unifont_t_chinese1);' + '\n' + 'u8g2.drawUTF8(0,15,' +value+ ');' + '\n' + '} while ( u8g2.nextPage() );' + '\n' + 'delay(1000);';};
2.4、资源配置
资源配置就是除了上面三个必要的文件外,如有用到的库则放置在XXX文件夹里;语言文件则放置在language文件夹里(en.js是英文语言文件,zh-hans.js是简体中文语言文件,zh-hant.js是繁体中文语言文件);硬件引脚的文件放置在companypin文件夹里;音效、图片等文件放置在media文件夹里。
这里我用到u8g2库,在Mixly_u8g2根文件夹下新建一个Mixly_u8g2文件夹,将下载的库文件解压至此,如下图所示:
3、使用自定义的Mixly第三方库编程
1)Mixly导入第三方库
打开Mixly软件,单击【导入库】,然后选择【本地导入】,最后在弹出的文件对话框中选择第三方库根目录中XXX.xml文件。这里我的为Mixly_u8g2.xml,如下图所示:
导入后可以在左下角看见已导入的第三方库,如下图所示:
2)硬件部分接线
Arduino UNO(IIC) ----- OLED显示模块3.3v ----- VCCGND ----- GNDA4 ----- SDAA5 ----- SCL
3)实现
拖拉积木编写程序,然后烧录(Mixly上烧录成功后没有反应或烧录不成功的,可以把代码复制到Arduino IDE上烧录)。如下图所示:
效果如下图所示:
方法二:使用make库进行自定义库
1、下载和安装make库
参考
make库是一个制作Mixly图形化模块的第三方库,其源码已托管到gitee和github上。
2、导入make库
Make库下载完成后,进入Mixly,单击【导入库】。导入完成后,把滑动条拖到最下方,就可以看到刚刚导入的make库,这个库的结构和下图相似。
3、使用make库
make库结构介绍:
使用说明:
①显示界面:用于查看制作出的图像化模块的外观。
②输入:用于定义图形化模块的输入接口。
③类型:用于在三个输入接口左侧添加不同的数据输入类型。包含:文本块、文本输入块、长文本输入块、数字输入块、角度输入块、下拉框块、检查框块、颜色块、图片块。
④颜色:用于定义图形化模块的颜色,此分类下有三种颜色图形化模块(色表、度数选择器、字符串输入框)供我们选择。
⑤编辑生成代码:用于编辑图形化模块所要生成的代码。
⑥定义块外观/代码:用于制作块外观和查看块在三个文件(xxx.xml、block/xxx.js、generator/xxx.js)下的代码。
⑦转换工具(block→block+zh_hans):用于让制作出的库可以支持多种语言。
⑧基础块:用于制作库中的各个分类。
⑨示例:是分类⑧(基础块)的一个例子。
⑩测试:是一个测试界面,对于一些不太确定代码是否正确的块可以先放入这个界面来调试。
Mixly第三方库开发的两种方法——U8g2库二次开发相关推荐
- [PowerBI]两种方法计算每月或每季开发的新客户数量
12月追加:欢迎加入知乎[微软BI技术圈],一起讨论.分享包括PowerBI在内的一切BI话题! 两种方法计算每月或每季开发的新客户数量 简述 客户分析中,有时你可能需要分析每隔一段时间有多少新客户流 ...
- android查ip地址,安卓手机查看IP地址的两种方法, 二、进入手机状态
安卓手机查看IP地址的两种方法, 二.进入手机状态 无论是电脑链接宽带上网还是手机链接wifi上网,当我们在链接网络后,会自动分配一个独立的IP地址,对于电脑端的上网IP地址我们可通过ipconfig ...
- 【mybatis基础】mybatis开发dao两种方法
mybatis是一个支持普通SQL查询,存储过程和高级映射的优秀的持久层的框架,是apache下的顶级项目.mybatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.mybat ...
- matplotlib 库画云图两种方法
本来还想整理一下,后面发现matplotlib官网有各种各样的画云图方法,而且各有各的美,官网链接 https://matplotlib.org/stable/gallery/index 2. 这里整 ...
- Android TV 智能电视/盒子 APP 开发焦点控制 两种方法实例
感谢分享 http://www.7po.com/thread-564068-1-1.html 第一种方法: 采用Android自带的直接控制焦点上下左右的方法.这种方法的前提是必须知道每个view的i ...
- C# Windows Phone 8 WP8 开发,取得手机萤幕大小两种方法。
C# Windows Phone 8 WP8 开发,取得手机萤幕大小两种方法. 原文:C# Windows Phone 8 WP8 开发,取得手机萤幕大小两种方法. 一般我们在开发Windows Ph ...
- 单片机开发的两种类型
** 单片机开发的两种类型 ** 最近学了一下ROS操作系统的工作原理和使用方法,想到了对于单片机来说的操作系统RTOS开发的一些概念,觉得有必要在细说一下单片机开发的两种方式. 首先,单片机开发一般 ...
- 产生随机字符java_java生成随机字符串的两种方法
本文实例为大家分享了java生成随机字符串的具体代码,供大家参考,具体内容如下 import java.util.Random; public class CharacterUtils { //方法1 ...
- java构造和解析json_Java构造和解析Json数据的两种方法详解一
在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面首先介绍用json-lib构造和解析Jso ...
最新文章
- SAP MM 影响Vendor主数据维护界面的字段选择的四大因素?
- php电商交押金的逻辑,PHP高并发下抢购、秒杀功能的超卖问题
- 最小操作系统的代码解释、NASM的初步使用
- linux内核驱动之 用户空间和内核空间
- MySQL笔记 4月记
- 应该怎样学习新知识?
- 20. jQuery 遍历 - 祖先
- Centos7 Kubernetes(k8s) 开发服务器(单服务器)部署 kibana
- 做了 7 年开源数据库开发,我学到了什么?
- ASP.NET项目开发经典视频教程与源码、模块合集
- html 字体思源_CSS3嵌入字体@font-face调用字体(思源宋体regula/PingFang SC/ttf/woff)...
- git pull origin拉取报错 Pulling without specifying how to reconcile divergent branches is
- FlashFXP 5安装、远程访问服务器、以及修改密码
- Excel中的透视表和vlookup的用法简单讲解
- 美国签证面签准备材料清单
- 活着的传奇——《DOOM启世录》摘录
- 微信读书登陆界面java_(JAVA后端)微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,实现就好...
- verilog使用1bit全加器实现4bit全加器【行波进位法】
- 游戏出海正当时,突破文化壁垒或成为关键
- Linux版本的mcnp6,Initial MCNP6 release overview. MCNP6 version 0.1
热门文章
- 2021李宏毅机器学习笔记--12 attack ML models
- 核心频率个加速频率_RTX 3080超频研究:功耗墙和频率最关键,高频稳定看用料...
- 魔兽世界怀旧服务器无限刷怪点,魔兽世界怀旧服法师A怪升级路线地点 法师刷怪速升60全攻略...
- Android 扫描二维码(使用华为统一扫码服务 + 附源码)
- 小白也可以看懂的Numpy实操演示教程
- OllyDbg断点详解
- Codeforces Round #382 (Div. 2)C. Tennis Championship(贪心) D.巴赫猜想
- 深圳弘辽科技电商:拼多多“砍单免费拿”:一场关于人性的较量
- 如人饮水,冷暖自知。
- Kotlin第五章: android网络编程