Skip to content

_SKU_MBT0018__micro_diorama_microbit屏幕扩展板

Angelo edited this page Dec 30, 2019 · 1 revision

micro:bit 屏幕扩展板

简介

本产品是一款基于micro:bit的彩色屏幕扩展板。采用了2.2寸彩色显示屏作为核心显示部件。可储存及显示彩色BMP图片、彩色文字、点、线、几何形状等众多元素。结合IoT应用场景,可绘制图表、显示天气状况等复杂显示场景。 板载五向摇杆和AB按键,集成蜂鸣器、振动电机,在用户输入和输出反馈上更加完善易用。 产品提供多种供电方式:PH2.0外接电源、USB外接电源、和金手指供电三种方式。使用灵活方便。 产品支持makecode图形化编程平台。

产品参数

  • 供电方式:1、micro:bit I/O扩展板供电 2、PH2.0接口供电,3.5V~5V(3节4.5V电池盒或3.7V锂电池)3、USB接口外接供电
  • 方向键(上:P6 下:P7 左:P9 右:P10 中:P8)及A B 按键
  • 蜂鸣器 ×1
  • 振动电机 ×1
  • LED显示屏:2.2寸
  • 产品尺寸:75 × 60 mm
  • 编程平台:makecode图形化编程

功能说明

micro:diorama microbit屏幕扩展板功能图 屏幕X轴Y轴方向: 屏幕X轴Y轴方向

makecode在线图形化编程

MakeCode基础教程:点击进入makecode在线图形化编程基础操作教程 micro:bit屏幕扩展库地址:https://github.com/DFRobot/pxt-Micro-Diorama 关于如何添加软件库 IoT扩展库地址:https://github.com/DFRobot/pxt-HTTP-MQTT[关于如何添加软件库](http://wiki.dfrobot.com.cn/index.php?title=MakeCode%E5%9C%A8%E7%BA%BF%E5%9B%BE%E5%BD%A2%E5%8C%96%E7%BC%96%E7%A8%8B%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C%E6%95%99%E7%A8%8B)

屏幕使用基础教程

扩展板使用方法

开始

开始例程运行结果:初始化参数,清除屏幕内容。在使用本扩展板的时候,必须使用一次这个程序模块。 开始

设置LCD背景颜色

设置背景颜色例程运行结果:将屏幕扩展的屏幕背景颜色设为蓝色。 使用方法: 设置背景颜色 使用步骤

显示字符

显示字符例程运行结果:在micro:bit屏幕扩展板的屏幕上,坐标为(X:50 Y:60)的位置显示"HI DFRobot",显示字符颜色为黑色。 显示字符 显示字符步骤

按键

按键P8按下后程序运行结果:在micro:bit屏幕扩展板的屏幕上,坐标为(X:50 Y:60)的位置显示"HI DFRobot",显示字符颜色为黑色。 按键控制显示字符 显示字符

振动电机

振动电机例程运行结果:振动电机振动1秒后停止振动,等待1秒后继续振动。 振动电机

画线

画线例程运行结果:在micro:bit屏幕扩展板的屏幕上画X起始位置10,X结束位置310,Y起始位置50,Y结束位置50的一条红色直线。 画线 画线效果图: 画线效果图

画圆

画圆例程运行结果:在micro:bit屏幕扩展板的屏幕上画半径为40,圆心X为120,圆心Y为120的红色圆,画完后将圆定义为对象,对象名为Circle2。 画圆 画圆效果图: 画圆效果图

画矩形

画矩形例程运行结果:在micro:bit屏幕扩展板的屏幕上画X起始位置120,X结束位置160,Y起始位置50,Y结束位置150的红色矩形,并将画出的矩形定义为对象,对象名为Rectangle。 画矩形 画矩形效果图: 画矩形效果图

画点

画点例程运行结果:在micro:bit屏幕扩展板的屏幕上,坐标X为50,坐标Y为80的位置画一个红点。 画点 画点效果图: 画点效果图

图片显示

支持的图片格式:BMP图片,不支持其它格式的图片,如:jpg,png等图片,图片分辨率不能大于320*240 使用图片前,请将BMP格式的图片通过扩展板的USB口拷贝到内存中。程序中使用的图片名称,必须和磁盘内的文件名相同,图片文件名必须为英文字符,不能是中文 1、插上扩展板的USB接口连接电脑,此时,电脑出现一个空间为2M可移动磁盘; 1 2、将BMP格式的图片拷贝到可移动磁盘; 例程图片下载地址:https://github.com/DFRobot/LCD-picture 图片显示来源为屏幕扩展板的内存中。 图片导入:将POWER按键拨到ON端,接上USB数据线,将照片放入micro:bit屏幕扩展的内存中,分辨率320X240。 显示图片程序运行结果:全屏显示名为:“Car”图片。 注意:在设置显示图片时,当Y位置设为70则图片的高度不能超过170,如果X位置为70则图片宽度不能超过250,如果图片位置设置好,图片大小就必须在设置的范围内如果超出图片将无法显示。 显示图片 显示图片效果图: 显示图片效果

判断图片是否重�

判断图片是否重叠依据:通过判断两张图片的像素点是否重叠。 判断图片是否重叠程序运行结果:如果图片A与图片B像素点重叠,在micro:bit屏幕扩展板的屏幕上,坐标为(X:80,Y:80)的位置显示HI DFROBOT。 判断图片是否重叠

导入图片

导入图片例程运行结果:导入内存中的图片,并将图片定义为对象,分辨率:128X128 导入图片

释放句柄

释放句柄例程运行结果:将导入图片的对象释放掉,因为只能导入4张64X64的小图 4张128X128的大图,如果不释放句柄就会导致不能在导入其他的图片为对象。 释放句柄

物联网获取新加坡天气教程

以下,我们将通过一个例程,来获取新加坡的天气,这个例程的运行结果:在屏幕上显示新加坡城市sentosa的天气、温度、湿度、风速。

一、首先,我们需要准备以下硬件: micro:bit 主板 ×1 micro:bit IO扩展板(MBT0005)×1 micro:bit 屏幕扩展板 ×1 OBLOQ物联网模块 ×1 CR123A锂电池(3.6V) ×1

二、然后,我们需要在makecode中导入物联网的库以及屏幕扩展板的库: 1、导入屏幕扩展板运行库(已导入的请忽略):https://github.com/DFRobot/pxt-Micro-Diorama 2、导入makecode的物联网运行库:https://github.com/DFRobot/pxt-HTTP-MQTT

三、将模块、主板、扩展板正确的连接: OBLOQ的绿色线接到扩展板的P1口,蓝色线接到P2口,红色线接到VCC,黑色线接到GND; 当通电后,OBLOQ模块的指示灯显示蓝色,表示正在连接网络,显示绿色,表示网络连接成功。

新加坡天气-硬件连接 SVG 四、编写makecode程序: 新加坡天气-程序 五、效果展示: 新加坡天气-效果演示

IFTTT物联网相关教程

通过IFTTT发送邮件

以下,我们将通过一个发送邮件的例程,来讲解IFTTT的使用方法。 一、首先,我们需要准备以下硬件: micro:bit 主板 ×1 micro:bit IO扩展板(MBT0005)×1 OBLOQ物联网模块 ×1 CR123A锂电池(3.6V) ×1

二、然后,我们需要在makecode中导入物联网的库: 1、导入makecode的物联网运行库:https://github.com/DFRobot/pxt-HTTP

三、将模块、主板、扩展板正确的连接: OBLOQ的绿色线接到扩展板的P1口,蓝色线接到P2口,红色线接到VCC,黑色线接到GND; 当通电后,OBLOQ模块的指示灯显示蓝色,表示正在连接网络,显示绿色,表示网络连接成功。 IFTTT硬件链接 SVG 四、使用IFTTT发送邮件配置: 1、首先进入IFTTT官网,注册账号,IFTTT官网:https://ifttt.com。 2、账号注册完成后会出现如下界面点击Get more然后下滑找到Create your own点击进入。 1 2 3、点击进入后就可以看到如下界面 3 然后点击This进行This配置,在输入框中输入webhooks。 4 4、找到之后点击进去第一次会出现第一张图点击Connect,在选择“Receive a web request”,点击进去后填写Event Name就完成this的创建。 5 6 7 5、创建完成后会自动返回,然后在点击That进行That设置,找到Email点击进入,如果没有找到可以在方框中进行搜索。 8 进入后选择send me an email 9 接下来就是选择给你邮件里的内容了,我这里直接选择默认的。 10 点击Create action 即可创建完成。 查看密钥点击HOME进入“webhooks”主页面在点击“Documentation”就能查看到密钥了。 发送邮件 发送邮件

五、makecode代码: 当按下A键后将“HI DFROBOT”发送到我的邮箱中去。 发送邮件 六、效果展示: 接收邮件

通过IFTTT给印象笔记记录笔记

前面我们已经介绍过如何通过IFTTT给邮箱发送邮件,以下我们将介绍通过IFTTT给印象笔记发送笔记: IFTTT向印象笔记发送笔记的硬件、库地址及硬件链接电路同使用IFTTT发送邮件相同,这里就不在阐述,请参见使用IFTTT发送邮件。 一、首先配置IFTTT 1、点击账户选择create后就可以看到如下界面 创建新的this 然后点击This在输入框中输入webhooks。 4 2、点击进去之后在点击“Receive a web request”,进去后填写Event Name就完成this的创建。 6 7 3、this创建完成后会自动返回,在点击That搜索Evernote并选择他 8 印象笔记中内容解释: 1、创建注释:在指定的笔记中创建注释。 2、附加说明:将说明附加到标题和笔记的注释中。 3、附加待办事项及注意:将一个待办事项复选框添加到标题和笔记的注释中。 4、创建链接备注:将指定笔记中的源URL创建新的链接备注。 5、从URL创建图像注释:在指定的笔记中创建带有图像附件的注释。 6、从URL中创建音频笔记:在指定的笔记中创建带有音频附件的笔记。 我选择的是“Create a note” 9 4、格式选择的默认格式 10 5、点击Create action 即创建完成。 二、makecode代码: 当按下A键后向我的笔记中发送“HI DFROBOT”。 印象笔记

三、效果展示: 印象笔记

EasyIOT基础教程

Easy IoT登录与设置

  • 接下来,我们需要对 microbit 设备进行编程,配置上网的密码等等,程序设置好就可以上网了。但是,我们这些信息传到互联网上之后,这些信息是怎么被查看的呢?这个信息到底发送给谁呢?
  • 打开网址:http://iot.dfrobot.com.cn/,可以进入终端网页 Easy IoT。

Easy IoT

  • micro:bit主控板、micro:bit物联网扩展板配合Easy IoT终端网页,是一整套物联网系统。
  • 注册登录
    • 1.进入终端网页Easy IoT之前,需要注册一个个人后台监控账号。点击右上角的“注册/登录”。

    • 2.填写个人信息,可以通过个人手机或者邮箱注册。

    • 3.注册成功后,登录账号进入工作间,就是可以检测microbit设备的数据界面了。需要通过添加新设备,才能够和自己microbit设备进行配对。

File:注册登录.png|1.进入工作间 File:填写个人信息.png|2.填写个人信息 File:登录easyIOT.png|3.添加新设备

  • Easy IoT设置
    • 1.新设备建立之后,会自动生成随机的设备的Topic: elJA7JHZg,每个人的都不一样;点击设备名称,可以进行重新命名。
    • 2.点击发送消息,可以看见接收信息与发送信息的终端页面,详细的看到终端收到的数据,并且可生成图表。(点击查看详情,可以查看生成的图表)。
    • 3.认识页面的其他信息——ID账号界面。

File:EASY.png|1.设置设备 File:查看生成图表.png|2.查看生成的图表 File:认识其他页面.png|3.认识ID账号界面

智能表情�

makecode源程序:智能表情包源程序 功能描述:通过Easy IoT平台发送消息,当Obloq收到消息后,micro:bit显示设定好的表情。 参考程序

File:表情包 w.png|智能表情�

程序效果:

  • 进入 Easy IoT 网页发送信息给 micro:bit 设备。找到相应的 Topic,点击“发送消息”。

点击发送消息

  • 将想要发送的指令,填写在对话框中,点击发送,即可将消息发送出去,发送指令“yes”,micro:bit显示“√”图案;发送指令“no”,显示“×”;发送指令“cry”,显示“哭脸”;发送指令“smile”,显示“笑脸”。

发送消息

远程开灯

makecode源程序:远程开灯程序 功能描述:将LED灯接在16引脚上,通过Easy IoT平台发送消息,当Obloq收到“ON”时,将16引脚定义为“1”,开灯;当Obloq收到“OFF”时,将16引脚定义为“0”,关灯。 参考程序 远程开灯 程序效果:

  • 进入 Easy IoT 网页发送信息给 micro:bit 设备。找到相应的 Topic,点击“发送消息”。

点击发送消息

  • 将想要发送的指令,填写在对话框中,点击发送,即可将消息发送出去,发送指令“ON”,LED灯亮;发送指令“OFF”,LED灯灭。

发送消息

向Beebotte发送数据

接下来我们将介绍Beebotte使用方法: 向Beebotte发送数据的硬件、库地址及硬件链接电路同使用IFTTT发送邮件相同,这里就不在阐述,请参见使用IFTTT发送邮件。 一、首先配置Beebotte 1、官网地址https://beebotte.com 2、进入官网,注册自己的账号,注册完成后,回到主页,点击Get Started for Free 1 3、创建自己的Channels 2 4、进入到Create New界面创建你的Channel Name、 Channel Description、Resource name、 Resource Description。可以创建多个Resource。 3 5、例如创建一个简单的接收数据 4 创建完成后就可以看到 5 6、云平台就创建好了,接下来我们开始获取API Key 和 Secret Key,先点击Account Settings在点击Access Management就可以查看。 6 7、如果想要查看上传的历史值,可以通过创建Dashboards来查看值的曲线图及具体的值。

  • 创建时间线图表

创建时间线 创建时间线1 二、效果展示: 当按下A键后向Beebotte中的Digital发送56。 MQTT发送数据 向Beebotte发送数据例程效果: MQTT发送数据效果 曲线图

向ThingSpeak发送数据

前面我们介绍了Beebotte的物联网平台的使用,接下来我们在来介绍一下ThingSpeak物联网的使用方法。 一、首先,我们需要准备以下硬件: micro:bit 主板 ×1 micro:bit IO扩展板(MBT0005)×1 OBLOQ物联网模块 ×1 CR123A锂电池(3.6V) ×1 Gravity模拟环境光线传感器 ×1 二、然后,我们需要在makecode中导入物联网的库: 1、导入makecode的物联网运行库:https://github.com/DFRobot/pxt-HTTP-MQTT

三、将模块、主板、扩展板正确的连接: OBLOQ的绿色线接到扩展板的P1口,蓝色线接到P2口,红色线接到VCC,黑色线接到GND; 当通电后,OBLOQ模块的指示灯显示蓝色,表示正在连接网络,显示绿色,表示网络连接成功。 硬件链接 再将Gravity模拟环境光线传感器接在P0引脚上面。 四、ThingSpeak配置: 1、ThingSpeak的官方网址:https://thingspeak.com。 2、进入官网进行注册,注册完成后就可以以下界面。 1 如果没有看到,也可以点击Channels会出现下拉框,在点击My Channels也可以找到上面的界面。 2 2、前面步骤完成后就可以创建频道了,点击New Channels就可以看到下面的界面 3 在这里面我们只需要将Name填写上和勾选上field数量就可以了,在makecode库中只定义三个参数,所以最多勾选三个,在用时填写几个参数就勾选几个,我在这里勾选三个, field的名称也可以自定义,我这里就使用默认的,将这些处理完就可保存频道了下面是我创建的频道。 4 3、保存后频道就创建完成,创建好的频道就如下图,在里就能看到传输上来的参数,在点击API Keys就可以查看对应频道的密钥。 5 6 五、makecode完整代码: 当按下A键后向ThingSpeak发送变量X,温度,光线强度。 7 六、效果展示: 8

HTTP使用

GET

前面我们介绍了如何使用定义的模块向ThingSpesk发送数据,接下来我们介绍一下如何使用HTTP直接发送数据,不使用定义的模块,这里使用GET模块。 直接使用HTTP定义的模块发送数据的硬件、库地址及硬件链接电路同使用IFTTT发送邮件相同,这里就不在阐述,请参见使用IFTTT发送邮件。 ThingSpesk如何使用请参见向ThingSpeak发送数据。 现在开始画重点,在ThingSpeak官网注册好并创建好频道后,点击频道中的API Keys就会看到如下界面,在标注的红色框中就可以看到我们需要填写在HTTP中的API。 1 将库导入makecode中去,先将WIFI配置和HTTP配置拖入模块中去,将WIFI配置好在填写HTTP配置模块,HTTP模块端口号填写80,前面的IP填写下图红色方框中内容, 2 注意不要将斜线填入,填写好效果如下。 3 前面填写好后就是GET模块的URL的填写,URL填写部分为斜线后面的部分,内容为下图红色方框中内容,“=”后面为传输的数据, 4 如果需要传输多个数据,数据之间用“&”链接,数据前面需要加上子频道的标号,标号为下图红色方框中内容, 5 如果不知道可以点击频道中的“Channel Settings ”进行查看,下图为填写好效果,将发送两个数据上去,一个78,一个39,按下A键将数据推送到ThingSpesk。 6 效果展示: 7

POST

前面讲解了如何使用定义好的模块通过IFTTT来发送邮件,现在我们来讲解一下如何直接通过HTTP模块,如何填写里面的内容,这里使用HTTP的POST模块, IFTTT如何使用在前面已经讲解过,这里就不在阐述,如有疑问请参见IFTTT发送邮件,这里我们同样的使用IFTTT发送邮件,之前我们讲解过如何查看秘钥,如下图 1 这里我们同样使用相同的方法进入到这个页面中去,在这里就可看到我们需要填写在HTTP的POST中的数据,如下图 2 HTTP配置填写的数据同GET类似,如下 3 填写效果如下 4 前面填写完成后,就需要填写POST的URL和Content,填写内容分别对应下图框一和框二 5 第一个框中的“AAA”为注册的“Event Name”,如果不清楚请参考IFTTT发送邮件,第二个框中的“12”“13”“16”为传输的数据,下图为填写好的效果图 6 按下A键后数据将发送到我的邮箱中去 效果展示: 7

综合应用

接下来我们将介绍屏幕扩展板的一些相关应用,首先第一个是将获取的天气显示在屏幕上;第二个是在屏幕上显示光线变化的折线图; 第三个是吃面包游戏;最后一个是飞翔的小鸟游戏。

获取天气并图像显示天气信息

一、首先,我们需要准备以下硬件: micro:bit 主板 ×1 micro:bit IO扩展板(MBT0005) ×1 micro:bit 屏幕扩展板 ×1 OBLOQ物联网模块 ×1 CR123A锂电池(3.6V) ×1

二、然后,我们需要在makecode中导入物联网的库以及屏幕扩展板的库: 1、导入屏幕扩展板运行库(已导入的请忽略):https://github.com/DFRobot/pxt-Micro-Diorama 2、导入makecode的物联网运行库:https://github.com/DFRobot/pxt-HTTP-MQTT 3、获取天气代码及天气图标库:https://github.com/DFRobot/LCD-picture

三、将模块、主板、扩展板正确的连接: OBLOQ的绿色线接到扩展板的P1口,蓝色线接到P2口,红色线接到VCC,黑色线接到GND; 当通电后,OBLOQ模块的指示灯显示蓝色,表示正在连接网络,显示绿色,表示网络连接成功。

新加坡天气-硬件连接 四、makecode 完整代码: 显示获取天气信息例程运行结果:在micro:bit屏幕扩展板的LED屏幕上显示获取的天气情况, 显示位置(X:20,Y:0)显示天气情况; 显示位置(X:20,Y:20)显示获取温度; 显示位置(X:20,Y:40)显示获取的湿度; 显示位置(X:100,Y:60,分辨率为200X140)天气图片。 显示获取天气 四、效果展示: 显示获取天气

光线强度折线

一、首先,我们需要准备以下硬件: micro:bit 主板 ×1 micro:bit IO扩展板(MBT0005) ×1 micro:bit 屏幕扩展板 ×1 Gravity:模拟环境光线传感器 ×1 CR123A锂电池(3.6V) ×1 二、然后,我们需要在makecode中导入屏幕扩展板的库: 1、导入屏幕扩展板运行库(已导入的请忽略):https://github.com/DFRobot/pxt-Micro-Diorama 三、将模块、主板、扩展板正确的连接: 将光线传感器正确连接在IO扩展板P2引脚上,在将屏幕扩展板和micro:bit主板连接,插入到IO扩展板上,库和硬件都处理好后就可以开始编写程序。 SVG

四、makecode 完整代码: 下载代码到micro:bit上,代码下载后如果没有能正确显示,请按下复位键 晃动光线传感器LED屏幕上将会连续显示16秒光线强度变化的折线。 LCD显示光线强度折线 光线强度折线例程代码下载:https://makecode.microbit.org/_LvaWR0YbiRfx 五、效果展示: 效果展示

吃面�

一、首先,我们需要准备以下硬件: micro:bit 主板 ×1 micro:bit IO扩展板(MBT0005) ×1 micro:bit 屏幕扩展板 ×1 CR123A锂电池(3.6V) ×1 二、然后,我们需要在makecode中导入屏幕扩展板的库: 1、导入屏幕扩展板运行库(已导入的请忽略):https://github.com/DFRobot/pxt-Micro-Diorama 三、主板、扩展板正确的连接: 将屏幕扩展板和micro:bit主板连接,插入到IO扩展板上,库和硬件都处理好后就可以开始编写程序。 四、makecode 完整代码: 将代码下载到micro:bit中,通过将micro:bit屏幕扩展板左右倾斜来控制人物左右移动,面包会从屏幕上方的不同位置出现,当人物与面包的像素点重合的时候 表示已经吃到面包,此时会振动一下,如果没有吃到则无任何反馈。 吃面包 吃面包例程代码下载:https://makecode.microbit.org/_TxDiaMPDEhde

飞翔的小鸟

一、首先,我们需要准备以下硬件: micro:bit 主板 ×1 micro:bit IO扩展板(MBT0005) ×1 micro:bit 屏幕扩展板 ×1 CR123A锂电池(3.6V) ×1 二、然后,我们需要在makecode中导入屏幕扩展板的库: 1、导入屏幕扩展板运行库(已导入的请忽略):https://github.com/DFRobot/pxt-Micro-Diorama 三、主板、扩展板正确的连接: 将屏幕扩展板和micro:bit主板连接,插入到IO扩展板上,库和硬件都处理好后就可以开始编写程序。 四、makecode 完整代码: 飞翔的小鸟在游戏开始前会出现倒计时,当倒计时完,小鸟和障碍物就会出现,当小鸟掉到最低和触碰到障碍物时游戏结束 小鸟需要从两个障碍物之间飞过来躲避障碍物,按下A键小鸟向上飞10个像素点,当没有任何操作时小鸟下降40个像素点,所以想要让小鸟在原地需要按4次按键, 当游戏结束后按下B键会出现计分板,在按下B键游戏从新开始游戏。 飞翔的小鸟 飞翔的小鸟例程下载:https://makecode.microbit.org/_X156z0DqTeTD

疑难解答

更多问题及有趣的应用,请访问论坛

更多

DFshopping_car1.png Link DFRobot商城购买链接

Clone this wiki locally