阿里云首页 IoT物联网操作系统

图形库显示

前言

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

下载代码及环境准备

1)下载代码

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

2) 代码配置

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

    AMP_ADVANCED_ADDON_UI: 1

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"
}

在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>

结果展示

7be35tk39zspxfudb2w3msrec_0