AI 助理
备案控制台
开发者社区 物联网 行业解决方案 文章 正文

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

2021-08-23 391
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 当前HaaS EDU K1已经支持通过JS轻应用方式进行开发调试了，这块开发板带着OLED屏，而底层的AliOS Things已经支持图形库，所以可以通过轻应用的开发方式，尝试进行GUI相应的开发。
来源 | 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、结果展示

image.png

开发者支持

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

image.png

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

文章标签：
JavaScript
前端开发
传感器
AliOS-Things
物联网
数据格式
开发者
XML
关键词：
JavaScript文字
JavaScript实现
JavaScript HaaS
JavaScript k1
开发者小助理
目录
相关文章
JYeontu
|
6月前
|
JavaScript 前端开发 安全
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
JYeontu
155 0
亚丁号
|
6月前
|
移动开发 JavaScript 前端开发
分享111个JS文字特效，总有一款适合您
分享111个JS文字特效，总有一款适合您
亚丁号
255 0
神明木佑
|
23天前
|
JavaScript 前端开发
js怎么获取div里面的文字长度
js怎么获取div里面的文字长度
神明木佑
47 5
Li370234940
|
29天前
|
JavaScript
js文字如何轮播？
js文字如何轮播？
Li370234940
13 1
lvbb66
|
3月前
|
JavaScript
js文字如何轮播？
js文字如何轮播？
lvbb66
27 2
刘志辉~
|
3月前
|
JavaScript 前端开发
js怎么获取div里面的文字长度
js怎么获取div里面的文字长度
刘志辉~
43 3
日_升
|
5月前
|
JavaScript 前端开发 安全
80 行 JS 代码实现页面添加水印：文字水印、多行文字水印、图片水印、文字&图片水印
80 行 JS 代码实现页面添加水印：文字水印、多行文字水印、图片水印、文字&图片水印 1. 信息标识： 水印可以用于标识文档的所有者、保密级别、状态或其他相关信息，帮助用户更好地理解文档内容的属性。 2. 版权保护： 在文档中添加水印可以帮助保护内容的版权，防止他人未经授权地复制、转载或篡改内容。 3. 安全保护： 对于敏感信息或机密文档，添加水印可以帮助防止信息泄露，提高文档的安全性。 4. 提升专业性： 在一些场景下，如商业报告、合同文件等，添加水印可以增加文档的专业性和正式性。 5. 防止截屏或拷贝： 在网页中添加水印可以防止用户通过截屏或复制粘贴等方式非法获取文档内容。
日_升
69 1
80 行 JS 代码实现页面添加水印：文字水印、多行文字水印、图片水印、文字&图片水印
石宗昊
|
5月前
|
前端开发 JavaScript
保存网页中的css和js文件，网站保存，复制网站不可复制的文字，网站抠图
保存网页中的css和js文件，网站保存，复制网站不可复制的文字，网站抠图
石宗昊
38 0
狗哥不是甜妹
|
JavaScript 前端开发 Windows
VScode的注释和标题，标签，img的src属性（如何网页上插入图片）（Mac如何开启js控制台）（如何免费复制网页中的文字）
VScode的注释和标题，标签，img的src属性（如何网页上插入图片）（Mac如何开启js控制台）（如何免费复制网页中的文字）
狗哥不是甜妹
162 0
极客李华
|
6月前
|
前端开发
html+css+js实现自动敲文字效果
html+css+js实现自动敲文字效果
极客李华
54 0
物联网

行业解决方案

热门文章

最新文章

  • 1
    网页VUE纯前端在线预览编辑Office，支持doc/docx、xls/xlsx、ppt/pptx、pdf等格式
  • 2
    一文看懂音视频流媒体协议及信令技术
  • 3
    ceph存储 一文看懂目录配额（从入门到进阶，内涵完整流程和源码分析）
  • 4
    初探Flutter在IoT场景下生态和趋势
  • 5
    低功耗蓝牙LE Audio Profile 详细介绍
  • 6
    数据可视化大屏的设计规范和案例参考（使用AxureRP软件设计）
  • 7
    物联网卡：物联网卡为什么不能使用在手机上
  • 8
    HaaS年度经典案例：二次元穿越小电视
  • 9
    发现一个非常好用的RTC（实时音视频通信）方案，做直播和视频通话都很牛
  • 10
    数字化施工：解决传统施工难题，提高施工效率和质量的行业革命
  • 1
    浅谈蓝牙演进之路：从诞生到普及
    55
  • 2
    厂区地图导航制作：GIS技术与路径导航算法融合
    28
  • 3
    物联网卡：物联网卡不支持语音通话，是如何实现设备间的数据传输和通信的？
    50
  • 4
    物联网卡：当物联网设备用卡使用在非物联网设备上会被管控吗
    50
  • 5
    物联网卡：物联网卡为什么不能使用在手机上
    46
  • 6
    物联网：物联网卡不能使用在什么设备上
    33
  • 7
    物联网卡：物联网卡网络不稳定的解决办法
    49
  • 8
    物联网卡：物联网卡为什么好用
    30
  • 9
    物联网卡：物联网卡停机多久会被注销
    37
  • 10
    物联网卡：如何判断并选择合适的流量套餐
    68

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月