使用JavaScript在HaaS EDU K1上实现文字显示

来源 | HaaS技术社区

1、前言

当前HaaS EDU K1已经支持通过JS轻应用方式进行开发调试了,这块开发板带着OLED屏,而底层的AliOS Things已经支持图形库,所以可以通过轻应用的开发方式,尝试进行GUI相应的开发。

2、下载代码及环境准备

2.1、下载代码

从以下地方下载AliOS3.3版本代码:

Gitee: https://gitee.com/alios-things
Github: https://github.com/alibaba/AliOS-Things
Code China: https://codechina.csdn.net/alios-things/AliOS-Things

2.2、代码配置

在solutions/amp_demo/package.yaml中,对AMP_ADVANCED_ADDON_UI进行配置,配置如下:

   AMP_ADVANCED_ADDON_UI: 1

2.3、添加轻应用代码

在solutions/javascript_demo/board/haas-edu-k1目录里面,有轻应用的示例代码:

入口文件app.json

{
    "version": "1.0.0",
    "io": {
        "KEY1": {
            "type": "GPIO",
            "port": 23,
            "dir": "irq",
            "pull": "pullup",
            "intMode":"falling"
        },
 
        "KEY2": {
            "type": "GPIO",
            "port": 20,
            "dir": "irq",
            "pull": "pullup",
            "intMode":"falling"
        },
 
        "KEY3": {
            "type": "GPIO",
            "port": 21,
            "dir": "irq",
            "pull": "pullup",
            "intMode":"falling"
        },
 
        "KEY4": {
            "type": "GPIO",
            "port": 26,
            "dir": "irq",
            "pull": "pullup",
            "intMode":"falling"
 
        },
 
        "L1":{
            "type":"GPIO",
            "port":36,
            "dir":"output",
            "pull":"pulldown"
        },
 
        "L2":{
            "type":"GPIO",
            "port":35,
            "dir":"output",
            "pull":"pulldown"
        },
 
        "L3":{
            "type":"GPIO",
            "port":34,
            "dir":"output",
            "pull":"pulldown"
        },
 
        "P04":{
            "type":"GPIO",
            "port":4,
            "dir":"output",
            "pull":"pulldown"
        },
 
        "P05":{
            "type":"GPIO",
            "port":5,
            "dir":"output",
            "pull":"pulldown"
        },
 
        "P06":{
            "type":"GPIO",
            "port":6,
            "dir":"output",
            "pull":"pulldown"
        },
 
        "P07":{
            "type":"GPIO",
            "port":7,
            "dir":"output",
            "pull":"pulldown"
        },
 
        "oled_dc": {
            "type": "GPIO",
            "port": 28,
            "dir": "output",
            "pull": "pulldown"
        },
 
        "oled_res": {
            "type": "GPIO",
            "port": 30,
            "dir": "output",
            "pull": "pulldown"
        },
 
        "oled_spi": {
            "type": "SPI",
            "port": 1,
            "mode": "mode3",
            "freq": 26000000
        },
 
        "SPI0":{
            "type": "SPI",
            "port": 0,
            "mode": "mode1",
            "freq": 26000000
        },
 
        "serial": {
 
            "type": "UART",
 
            "port": 2,
 
            "dataWidth": 8,
 
            "baudRate": 115200,
 
            "stopBits": 1,
 
            "flowControl": "disable",
 
            "parity": "none"
 
        },
 
        "sensor": {
 
            "type": "I2C",
 
            "port": 1,
 
            "addrWidth": 7,
 
            "freq": 400000,
 
            "mode": "master",
 
            "devAddr": 64
 
        },
 
        "ADC0":{
 
            "type": "ADC",
 
            "port": 0,
 
            "sampling": 12000000
 
        },
 
        "ADC1":{
 
            "type": "ADC",
 
            "port": 1,
 
            "sampling": 12000000
 
        },
 
        "ADC2":{
 
            "type": "ADC",
 
            "port": 2,
 
            "sampling": 12000000
 
        },
 
        "pwm1": {
 
            "type": "PWM",
 
            "port": 1
 
        },
 
        "PWM2":{
 
            "type":"PWM",
 
            "port":2
 
        },
 
        "PWM3":{
 
            "type":"PWM",
 
            "port":3
 
        },
 
        "timer1": {
 
            "type": "TIMER",
 
            "port": 1
 
        }
 
    },
 
 
 
    "pages": [
 
        "data/jsamp/uipages/page/waring"
 
    ],
 
 
 
    "debugLevel": "DEBUG",
 
    "repl":"enable"
 
}
 
 
 
{
 
    "version": "1.0.0",
 
    "io": {
 
        "KEY1": {
 
            "type": "GPIO",
 
            "port": 23,
 
            "dir": "irq",
 
            "pull": "pullup",
 
            "intMode":"falling"
 
        },
 
        "KEY2": {
 
            "type": "GPIO",
 
            "port": 20,
 
            "dir": "irq",
 
            "pull": "pullup",
 
            "intMode":"falling"
 
        },
 
        "KEY3": {
 
            "type": "GPIO",
 
            "port": 21,
 
            "dir": "irq",
 
            "pull": "pullup",
 
            "intMode":"falling"
 
        },
 
        "KEY4": {
 
            "type": "GPIO",
 
            "port": 26,
 
            "dir": "irq",
 
            "pull": "pullup",
 
            "intMode":"falling"
 
        },
 
        "L1":{
 
            "type":"GPIO",
 
            "port":36,
 
            "dir":"output",
 
            "pull":"pulldown"
 
        },
 
        "L2":{
 
            "type":"GPIO",
 
            "port":35,
 
            "dir":"output",
 
            "pull":"pulldown"
 
        },
 
        "L3":{
 
            "type":"GPIO",
 
            "port":34,
 
            "dir":"output",
 
            "pull":"pulldown"
 
        },
 
        "P04":{
 
            "type":"GPIO",
 
            "port":4,
 
            "dir":"output",
 
            "pull":"pulldown"
 
        },
 
        "P05":{
 
            "type":"GPIO",
 
            "port":5,
 
            "dir":"output",
 
            "pull":"pulldown"
 
        },
 
        "P06":{
 
            "type":"GPIO",
 
            "port":6,
 
            "dir":"output",
 
            "pull":"pulldown"
 
        },
 
        "P07":{
 
            "type":"GPIO",
 
            "port":7,
 
            "dir":"output",
 
            "pull":"pulldown"
 
        },
 
        "oled_dc": {
 
            "type": "GPIO",
 
            "port": 28,
 
            "dir": "output",
 
            "pull": "pulldown"
 
        },
 
        "oled_res": {
 
            "type": "GPIO",
 
            "port": 30,
 
            "dir": "output",
 
            "pull": "pulldown"
 
        },
 
        "oled_spi": {
 
            "type": "SPI",
 
            "port": 1,
 
            "mode": "mode3",
 
            "freq": 26000000
 
        },
 
        "SPI0":{
 
            "type": "SPI",
 
            "port": 0,
 
            "mode": "mode1",
 
            "freq": 26000000
 
        },
 
        "serial": {
 
            "type": "UART",
 
            "port": 2,
 
            "dataWidth": 8,
 
            "baudRate": 115200,
 
            "stopBits": 1,
 
            "flowControl": "disable",
 
            "parity": "none"
 
        },
 
        "sensor": {
 
            "type": "I2C",
 
            "port": 1,
 
            "addrWidth": 7,
 
            "freq": 400000,
 
            "mode": "master",
 
            "devAddr": 64
 
        },
 
        "ADC0":{
 
            "type": "ADC",
 
            "port": 0,
 
            "sampling": 12000000
 
        },
 
        "ADC1":{
 
            "type": "ADC",
 
            "port": 1,
 
            "sampling": 12000000
 
        },
 
        "ADC2":{
 
            "type": "ADC",
 
            "port": 2,
 
            "sampling": 12000000
 
        },
 
        "pwm1": {
 
            "type": "PWM",
 
            "port": 1
 
        },
 
        "PWM2":{
 
            "type":"PWM",
 
            "port":2
 
        },
 
        "PWM3":{
 
            "type":"PWM",
 
            "port":3
 
        },
 
        "timer1": {
 
            "type": "TIMER",
 
            "port": 1
 
        }
 
    },
 
 
 
    "pages": [
 
        "data/jsamp/uipages/page/waring"
 
    ],
 
 
 
    "debugLevel": "DEBUG",
 
    "repl":"enable"
 
}

在solutions/javascript_demo/board/haas-edu-k1/uipages/page目录里面,有轻应用的界面显示示例代码:

waring.css是配置文字的颜色,字号大小的样式示例

#waring {
  font-color: #ffffff;
  font-size: 16px;
}

waring.js是逻辑交互的示例代码,目前暂时没有特殊逻辑实现,只是一些打印

var ui = require('ui');
if (!(ui && ui.redirectTo)) {
    throw new Error("ui: [failed] require(\'ui\')");
}
 
 
Page({
  onShow: function() {
    console.log('enter page onShow');
 
 
  },
 
 
  onExit: function() {
    console.log('enter page onExit');
 
 
  },
 
 
  onUpdate: function() {
    console.log('enter page onUpdate');
  }
 
 
});

waring.xml是界面开发的示例代码,目前是想要显示文本“boss coming”

<?xml version="1.0" encoding="utf-8"?>
 
 
<page>
    <text id="waring" class="textClass" >boss coming</text>
</page>

2.4、 编译下载

> 选择解决方案: “javascript_demo”

> 选择开发板: HaaS EDU K1

– 参考 HaaS100_Quick_Start (3.1 编译工程章节),点击 ✅ 即可完成编译固件。

– 参考 HaaS100_Quick_Start (3.2 烧录镜像章节),点击 "⚡️" 即可完成烧录固件。

3、结果展示

使用JavaScript在HaaS EDU K1上实现文字显示

开发者支持

如需更多技术支持,可加入钉钉开发者群,或者关注微信公众号。

使用JavaScript在HaaS EDU K1上实现文字显示

更多技术与解决方案介绍,请访问HaaS官方网站https://haas.iot.aliyun.com

上一篇:周二直播预告:企业级数据库安全解决方案


下一篇:EDB和Oracle在分区剪裁实践上的一点差别