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

叁歲伎倆 2022-09-02 00:51 12阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70][]

# **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是逻辑交互的示例代码，目前暂时没有特殊逻辑实现，只是一些打印

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、结果展示 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 1][]

# **开发者支持** #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 2][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70]: /images/20220829/de5894afb2384007bd4c7acfc2514f61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 1]: /images/20220829/843fb716461548fba5656571a9d731c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhYVNUZWNo_size_16_color_FFFFFF_t_70 2]: /images/20220829/353ca9c1295840878ad50e235160355b.png
[https_haas.iot.aliyun.com]: https://haas.iot.aliyun.com/