Moddable

2020年10月 7日 (水)

Moddableをインストールする(v2)

2020/10/7:
esp32/xxxのtarget名称が以下のように変更になったので それに対応した:

~/Projects/moddable/build/devices/esp32/targets$ ls esp32_thing m5atom_echo m5stack m5stick_c nodemcu lilygo_t5s m5atom_lite m5stack_core2 moddable_two oddwires lilygo_taudio m5atom_matrix m5stack_fire moddable_zero wrover_kit

2020/10/6:
初版

Moddable install v2

Moddable install v2

概要

以下のModdableをインストールする(v2)。
(前の記事からubuntu20.04に対応した)
ボードコンピュータでJavascriptを動かす環境としてModdableがあるが、それのインストールについて記する。
 組み込み系ソフトとしてJavascriptが動作する例として、Fitbit_Versaなどがあるが、これは、簡単な言い方をすると、 画面関係はSVG、ロジックはJavascriptで作成できる。JavascriptのインタープリタはVersa本体に組み込まれていて、 プログラムしたJavascriptのソースをVersa本体に書き込んで実行することになる。(ソース自身はコンパクトな形に変換される)
 obnizでもJavascriptが利用できるが、サーバークライアント・ベースでWebブラウザーでJavascriptが動作して、obnizのハードウェア自身はIOプロセッサ的に動作する。
 TesselボードでもJavascriptが動作する。ただし、特定のハードウェアに限定される。
 これに対して、moddableでは、Javascriptの機能自身が書き込む実行形式に含まれるので、これのみで完結する。

moddable

install(シミュレータ)

以下の手順でツールをインストールする:

sudo apt-get install libgtk-3-dev mkdir ~/Projects #(Projectsは任意) cd ~/Projects git clone https://github.com/Moddable-OpenSource/moddable export MODDABLE=~/Projects/moddable # Moddableのコマンドラインツール(mcconfig),シミュレータ(simulator),デバッガ(xsbug)をビルドする cd $MODDABLE/build/makefiles/lin make make install export PATH=$PATH:$MODDABLE/build/bin/lin/release # デバッグ起動テスト xsbug # ここでxsbugのウィンドウが立ち上がる。 # アプリケーションと接続していないので、空の画面になる。 # サンプルをコンパイル&実行する cd $MODDABLE/examples/piu/balls mcconfig -d -m -p lin # ここで、M5Stick-Cのシミュレータが動作して画面にバウンドしているボールが表示される。 # mcconfigがビルド用のツールになる; # オプションの意味は以下のとおり: # -d デバッグモードでビルド # -m ビルドとデバイスへの書き込みを同時に行う # -p ビルド対象のプラットフォームを指定するオプション。linは「LinuxのModdableシミュレータ」を指す。

install(ESP32)

以下の手順でESP32用ツールをインストールする:

cd ~ mkdir esp32 cd ~/esp32 wget https://dl.espressif.com/dl/xtensa-esp32-elf-linux64-1.22.0-80-g6c4433a-5.2.0.tar.gz tar -xvf xtensa-esp32-elf-linux64-1.22.0-80-g6c4433a-5.2.0.tar.gz git clone -b v3.3.2 --recursive https://github.com/espressif/esp-idf.git # ubuntu20.04の場合(python3.xがサポートされている場合) sudo apt-get install gcc git wget make libncurses-dev flex bison gperf cmake ninja-build python-is-python3 python3-pip python3-serial # ubuntu20.04よりも古いubuntuの場合(python2.xがサポートされている場合) sudo apt-get install gcc git wget make libncurses-dev flex bison gperf python python-pip python-setuptools python-serial export IDF_PATH=~/esp32/esp-idf export PATH=$PATH:~/esp32/xtensa-esp32-elf/bin:$IDF_PATH/tools python -m pip install --user -r $IDF_PATH/requirements.txt # サンプルをコンパイル&実行する cd $MODDABLE/examples/piu/balls export UPLOAD_PORT=/dev/ttyUSB0 M5Stackの場合: mcconfig -d -m -p esp32/m5stack # または mcconfig -d -m -p esp32/m5stack_core2 M5Stack Fireの場合: mcconfig -d -m -p esp32/m5stack_fire # コンパイル実行するとデバッガ画面が表示されるので、実行アイコン(▶)を押す。 M5Stick-Cの場合: mcconfig -d -m -p esp32/m5stick_c M5Atomの場合: mcconfig -d -m -p esp32/m5atom_matrix # または mcconfig -d -m -p esp32/m5atom_lite # または mcconfig -d -m -p esp32/m5atom_echo

export登録

.bashrcに以下を登録する:

# moddable export MODDABLE=~/Projects/moddable export PATH=$PATH:$MODDABLE/build/bin/lin/release export IDF_PATH=~/esp32/esp-idf export PATH=$PATH:~/esp32/xtensa-esp32-elf/bin:$IDF_PATH/tools

sample code(参考)

balls/main.js

/* * Copyright (c) 2016-2020 Moddable Tech, Inc. * * This file is part of the Moddable SDK. * * This work is licensed under the * Creative Commons Attribution 4.0 International License. * To view a copy of this license, visit * <https://creativecommons.org/licenses/by/4.0> * or send a letter to Creative Commons, PO Box 1866, * Mountain View, CA 94042, USA. * */ import {} from "piu/MC"; const backgroundSkin = new Skin({ fill:"silver" }); const ballTexture = new Texture("balls.png"); const ballSkin = new Skin({ texture:ballTexture, x:0, y:0, width:30, height:30, variants:30 }); class BallBehavior extends Behavior { onCreate(ball, delta) { this.dx = delta; this.dy = delta; } onDisplaying(ball) { this.x = ball.x; this.y = ball.y; this.width = ball.container.width - ball.width; this.height = ball.container.height - ball.height; ball.start(); } onTimeChanged(ball) { var dx = this.dx; var dy = this.dy; ball.moveBy(dx, dy); var x = this.x + dx; var y = this.y + dy; if ((x < 0) || (x > this.width)) dx = -dx; if ((y < 0) || (y > this.height)) dy = -dy; this.dx = dx; this.dy = dy; this.x = x; this.y = y; } }; let BallApplication = Application.template($ => ({ skin:backgroundSkin, contents: [ Content(6, { left:0, top:0, skin:ballSkin, variant:0, Behavior: BallBehavior } ), Content(5, { right:0, top:0, skin:ballSkin, variant:1, Behavior: BallBehavior } ), Content(4, { right:0, bottom:0, skin:ballSkin, variant:2, Behavior: BallBehavior } ), Content(3, { left:0, bottom:0, skin:ballSkin, variant:3, Behavior: BallBehavior } ), ] })); export default new BallApplication(null, { displayListLength:4096, touchCount:0 });

ネットワーク対応のサンプル

ネットワーク対応のサンプルをビルド実行する場合、以下のように設定するssid,passwordを コマンドラインのオプションとして追加する:

mcconfig -d -m -p esp32/m5atom_xxxx ssid=your_ssid password=your_passswd

MQTT

ビルド実行:

cd $MODDABLE/examples/network/mqtt/mqttbasic mcconfig -d -m -p esp32/m5atom_lite ssid=your_ssid password=your_passswd

xsbugのコンソール画面:

Wi-Fi connected to "your_ssid" IP address 192.168.0.17 received "moddable/mqtt/example/date": Sun Sep 20 2020 18:24:23 GMT+0900 received "moddable/mqtt/example/random": 0.8646926234626893 received "moddable/mqtt/example/date": Sun Sep 20 2020 18:24:24 GMT+0900 received "moddable/mqtt/example/random": 0.3546896857104007 <省略> received "moddable/mqtt/example/random": 0.9578066274891157 received "moddable/mqtt/example/date": Sun Sep 20 2020 18:25:34 GMT+0900 received "moddable/mqtt/example/random": 0.7666543393318203 received "moddable/mqtt/example/date": Sun Sep 20 2020 18:25:35 GMT+0900 received "moddable/mqtt/example/random": 0.3196750421355653

httpserver

ビルド実行:

cd $MODDABLE/examples/network/http/httpserver mcconfig -d -m -p esp32/m5atom_lite ssid=your_ssid password=your_passswd

xsbugのコンソール画面:

Wi-Fi connected to "your_ssid" IP address 192.168.0.17

コンソール画面のIPアドレスで webブラウザーでアクセスすると 以下のように表示される;

hello, client at path /.

httpget

ビルド実行:

cd $MODDABLE/examples/network/http/httpget mcconfig -d -m -p esp32/m5atom_lite ssid=your_ssid password=your_passswd

xsbugのコンソール画面:

Wi-Fi connected to "your_ssid" IP address 192.168.0.4 <body> <div> <h1>Example Domain</h1> <p>This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.</p> <p><a href="https://www.iana.org/domains/example">More information...</a></p> </div> </body> </html>

httpgetjson

ビルド実行:

cd $MODDABLE/examples/network/http/httpgetjson mcconfig -d -m -p esp32/m5atom_lite ssid=your_ssid password=your_passswd

xsbugのコンソール画面:

Wi-Fi connected to "your_ssid" IP address 192.168.0.4 The temperature in Menlo Park is 60.21 F. The weather condition is Clouds.

httpserverbmp

ビルド実行:

cd $MODDABLE/examples/network/http/httpserverbmp mcconfig -d -m -p esp32/m5atom_lite ssid=your_ssid password=your_passswd

xsbugのコンソール画面:

Wi-Fi connected to "your_ssid" IP address 192.168.0.19

コンソール画面のIPアドレスで webブラウザーでアクセスする。 BMP画像が表示される。

httppost

ビルド実行:

cd $MODDABLE/examples/network/http/httppost mcconfig -d -m -p esp32/m5atom_lite ssid=your_ssid password=your_passswd

xsbugのコンソール画面:

Wi-Fi connected to "your_ssid" IP address 192.168.0.26 name: Moddable value: 123

このサンプルで利用しているテスト用サーバーについては以下を参照のこと:
httpbin - HTTP通信のテストに便利なWebサービス&ソフト

socketreadwrite

ビルド実行:

cd $MODDABLE/examples/network/socket/socketreadwrite mcconfig -d -m -p esp32/m5atom_lite ssid=your_ssid password=your_passswd

xsbugのコンソール画面:

Wi-Fi connected to "your_ssid" IP address 192.168.0.15 socket created. Socket message connect Socket message dataSent VALUE = 5744 Socket message dataReceived VALUE = 1436 HTTP/1.1 200 OK Accept-Ranges: bytes Age: 501726 Cache-Control: max-age=604800 Content-Type: text/html; charset=UTF-8 Date: Sun, 20 Sep 2020 12:26:21 GMT Etag: "3147526947" Expires: Sun, 27 Sep 2020 12:26:21 GMT Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT Server: ECS (sjc/4E74) Vary: Accept-Encoding X-Cache: HIT Content-Length: 1256 Connection: close <!doctype html> <html> <head> <title>Example Domain</title> <meta charset="utf-8" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style type="text/css"> body { background-color: #f0f0f2; margin: 0; padding: 0; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } div { width: 600px; margin: 5em auto; padding: 2em; background-color: #fdfdff; border-radius: 0.5em; box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02); } a:link, a:visited { color: #38488f; text-decoration: none; } @media (max-width: 700px) { div { margin: 0 auto; width: auto; } } </style> </head> <body> <div> <h1>Example Domain</h1> <p>This domain is for use in illustrative examples in documents. You may use th Socket message dataReceived VALUE = 190 is domain in literature without prior coordination or asking for permission.</p> <p><a href="https://www.iana.org/domains/example">More information...</a></p> </div> </body> </html>

他のサンプル

他のgitのサンプルを動かしてみる。 以下の手順でダウンロードする:

mkdir ~/moddable_test cd ~/moddable git clone https://github.com/meganetaaan/moddable-examples.git

サンプルの簡単な説明は以下を参照のこと:
https://github.com/meganetaaan/moddable-examples/blob/master/README.md

bongo

ボンゴ(打楽器)のデモ:

cd ~/moddable_test/moddable-examples/bongo mcconfig -d -m -p esp32/m5stack_fire

pomodoro

タイマーデモ:

cd ~/moddable_test/moddable-examples/pomodoro mcconfig -d -m -p esp32/m5stack_fire

neopixel

内蔵のneopixelを光らせる:

cd ~/moddable_test/moddable-examples/unit/neopixel mcconfig -d -m -p esp32/m5stack_fire

実行すると、内蔵neopixelが色を変えて光る

light-server

LEDが制御できるhttpサーバー:

cd ~/moddable_test/moddable-examples/network/light-server mcconfig -d -m -p esp32/m5stack_fire ssid=your_ssid password=your_passwd または mcconfig -d -m -p esp32/m5atom_matrix ssid=your_ssid password=your_passwd

xsdebugのコンソール画面:

Wi-Fi connected to "your_ssid" IP address 192.168.0.19 [object Object]probe for m5stack probe 1 probe 2 probe 3 probe claimed m5stack

webブラウザーで以下のurlでアクセスする:

http://192.168.0.19/off The light is off http://192.168.0.19/on The light is on http://m5stack.local/on The light is on http://m5stack.local/off The light is off

lightのオン/オフに応じて本体のLEDがオン/オフする。

接続:
M5Atomに抵抗付きLEDをG25に接続する。(5V,G(ND)も接続する)

~/moddable_test/blink/main.js

import Timer from 'timer'; import Digital from 'pins/digital'; let led = 25; // IO25 for M5Atom let toggle = 0; // Blink LED Timer.repeat(() => { Digital.write(led, toggle); toggle = ~toggle; }, 100);

~/moddable_test/blink/manifest.json

{ "include": [ "$(MODDABLE)/examples/manifest_base.json", "$(MODULES)/pins/digital/manifest.json", ], "modules": { "*": "./main", }, }

ビルド実行:

cd ~/moddable_test/blink mcconfig -m -p esp32/m5atom_lite

実行するとG25に接続したLEDが点滅する。

参照情報

https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/Moddable%20SDK%20-%20Getting%20Started.md

旧版:Moddableをインストールする

ATOM Echo - スマートスピーカー開発キット

versaアプリ「HR/LCD clock」の紹介

obniz
https://obniz.com/ja/doc/reference/

Tessel1
https://github.com/tessel/t1-docs
https://github.com/tessel/hardware/blob/master/tessel-hardware-overview.md
Tessel2
https://tessel.gitbooks.io/t2-docs/content/
https://tessel.gitbooks.io/t2-docs/content/Hardware/Tessel_2_Overview.html

以上

続きを読む "Moddableをインストールする(v2)"

| | コメント (0)

2020年9月27日 (日)

ModdableのREPLを動かす

2020/9/27:
初版

Moddable REPL

Moddable REPL

概要

以下のModdableのREPLを動かす。
本記事は「Moddableをインストールする」の続きになる。 Moddableのインストールは「Moddableをインストールする」を参照のこと。

moddable

修正

関係ソースを修正する:

cd $MODDABLE/examples/js/repl leafpad replcore.js

replcare.jsの22行目を以下のように修正する:

const newline = "\n"; → const newline = "\r\n\r\n";

manifest.json修正

(base64のモジュールを組み込むために)以下のように修正する: $MODDABLE/examples/js/repl/manifest.json

{ "include": [ "$(MODDABLE)/examples/manifest_base.json", ], "modules": { "*": [ "./main", "./replcore", "$(MODULES)/data/base64/*", ] }, "preload": [ "repl", "replcore", "base64", ], "strip": [], <以下、変更がないので省略>

ビルド実行

以下の手順でビルド実行する:

cd $MODDABLE/examples/js/repl mcconfig -m -p esp32/m5atom

出力例(REPL例)

mcconfig -m -p esp32/m5atom <省略> --- idf_monitor on /dev/ttyUSB0 115200 --- --- Quit: Ctrl+] | Menu: Ctrl+T | Help: Ctrl+T followed by Ctrl+H --- ets Jun 8 2016 00:22:57 rst:0x1 (POWERON_RESET),boot:0x13 (SPI_FAST_FLASH_BOOT) configsip: 188777542, SPIWP:0xee clk_drv:0x00,q_drv:0x00,d_drv:0x00,cs0_drv:0x00,hd_drv:0x00,wp_drv:0x00 mode:DIO, clock div:1 load:0x3fff0018,len:4 load:0x3fff001c,len:768 ho 0 tail 12 room 4 load:0x40078000,len:9756 load:0x40080400,len:5620 entry 0x40080644 Moddable REPL (version 0.0.1) > var x = 12 undefined > x 12 > x + 5 17 > x ** 2 144 > eval("x + 3") 15 > const Timer = require("timer") ReferenceError: get require: undefined variable > Object.keys(require.cache) ReferenceError: get require: undefined variable > const Base64 = require("base64") ReferenceError: get require: undefined variable >

上の出力はビルド画面からlog出力されている例だが、 実行後、「picocom /dev/ttyUSB0 -b115200」で出力することもできる。 「Compiling JavaScript on Embedded Devices」の説明では requireが動作するようだが、実際には、現状のバージョンでは、requireが実装されていない?ようでエラーになっている。

$MODDABLE/examples/js/repl/main.jsを以下のように修正して
「mcconfig -d -m -p esp32/m5atom」(デバッガ付き)でビルド実行すると base64のモジュールが動作することが確認できるので、manifest.jsonの修正としては正しいようだ。
$MODDABLE/examples/js/repl/main.js

import REPL from "repl"; import Base64 from "base64"; let console = new REPL; trace(Base64.decode("aGVsbG8sIHdvcmxk")+"\n"); trace(Base64.encode("hello, world")+"\n");

デバッグ・コンソール画面:

[object ArrayBuffer] aGVsbG8sIHdvcmxk

参照情報

https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/Moddable%20SDK%20-%20Getting%20Started.md

Compiling JavaScript on Embedded Devices

以上

続きを読む "ModdableのREPLを動かす"

| | コメント (0)

2020年9月24日 (木)

Moddableにconsole.logを追加する

2020/9/24+:
別のconsole.logを追加した。

2020/9/24:
初版

Moddable console.log

Moddable console.log

概要

以下のModdableにconsole.logを追加する。
本記事は「Moddableをインストールする」の続きになる。 ModdableのインストールはModdableをインストールするを参照のこと。

moddable

console.logを追加する

Moddable SDKを使ってJavaScriptでIoT開発してみたのconsole.logの追加方法を利用したが、そのままでは、動作しなかったので、manifest.json,main.jsを変更した。

manifest.json

proj/manifest.json

{ "include": "$(MODDABLE)/examples/manifest_base.json", "modules": { "*": [ "./main", "./esp/*", ] } }

main.js

proj/main.js

import Timer from "timer"; //import console from "console"; import "console"; const a = 'a'; const z = 'z'; let c = a; let i = 0; Timer.repeat(() => { console.log(`${String(Date.now()).padStart(15)}:${i}`+'\r'); i = (i >= 10) ? 0 : i + 1; }, 1000); Timer.repeat(() => { console.log(`${String(Date.now()).padStart(15)}:${c}`+'\r'); c = (c >= z) ? a : String.fromCharCode(c.charCodeAt(0) + 1); }, 1500);

console.c

proj/esp/console.c

#include "xsAll.h" #include "xs.h" void xs_console_destructor(void) { } void xs_console_log(xsMachine *the) { int argc = xsToInteger(xsArgc), i; for (i = 0; i < argc; i++) { char *str = xsToString(xsArg(i)); do { uint8_t c = c_read8(str); if (!c) { ESP_putc('\n'); break; } ESP_putc(c); str++; } while (1); } }

console.js

proj/esp/console.js

class Console @ "xs_console_destructor" { static log() @ "xs_console_log" static debug() { trace(args); } constructor() { } } Object.freeze(Console.prototype); global.console = Console;

ビルド実行

以下の手順で実行する:

M5Atomの場合: mcconfig -m -p esp32/m5atom M5Stackの場合: mcconfig -m -p esp32/m5stack

デバッガを起動したい場合、「-d」を追加する。 ただし、console.log出力しているので デバッグのコンソール画面には、何も表示されない。

出力例

mcconfig -m -p esp32/m5atom <省略> rst:0x1 (POWERON_RESET),boot:0x13 (SPI_FAST_FLASH_BOOT) configsip: 188777542, SPIWP:0xee clk_drv:0x00,q_drv:0x00,d_drv:0x00,cs0_drv:0x00,hd_drv:0x00,wp_drv:0x00 mode:DIO, clock div:1 load:0x3fff0018,len:4 load:0x3fff001c,len:768 ho 0 tail 12 room 4 load:0x40078000,len:9756 load:0x40080400,len:5620 entry 0x40080644 1023:0 1523:a 2023:1 3023:2 3023:b 4023:3 4523:c 5023:4 6023:5 6024:d 7023:6 7523:e 8023:7 9023:8 9024:f 10023:9 10523:g 11023:10 12023:0 12024:h 13023:1 13523:i 14023:2 15023:3 15023:j ...

上の出力はビルド画面からlog出力されている例だが、 実行後、「picocom /dev/ttyUSB0 -b115200」で出力することができる。

別のconsole.log

moddable-polyfillにもconsole.logがあるので、そのダウンロードについて説明する。 以下の手順でダウンロードする:

mkdir polyfill cd polyfill git clone https://github.com/horihiro/moddable-polyfill.git cd moddable-polyfill/example/timer

ビルド実行

以下の手順で実行する:

M5Atomの場合: mcconfig -d -m -p esp32/m5atom ssid=your_ssid password=your_passwd M5Stackの場合: mcconfig -d -m -p esp32/m5stack ssid=your_ssid password=your_passwd

breakpointが設定されて、デバッグ画面で停止するので[▶]を押して再スタートする。 ただし、console.log出力しているのでデバッグのコンソール画面には、何も表示されない。

出力例

<省略> Detecting chip type... ESP32 Chip is ESP32-PICO-D4 (revision 1) Features: WiFi, BT, Dual Core, 240MHz, Embedded Flash, VRef calibration in efuse, Coding Scheme None Crystal is 40MHz MAC: 50:02:91:91:19:20 Uploading stub... Running stub... Stub running... Changing baud rate to 1500000 Changed. Configuring flash size... Compressed 18352 bytes to 11964... Wrote 18352 bytes (11964 compressed) at 0x00001000 in 0.1 seconds (effective 1114.9 kbit/s)... Hash of data verified. Compressed 3072 bytes to 144... Wrote 3072 bytes (144 compressed) at 0x00008000 in 0.0 seconds (effective 6153.2 kbit/s)... Hash of data verified. Compressed 783520 bytes to 478987... Wrote 783520 bytes (478987 compressed) at 0x00010000 in 7.6 seconds (effective 825.6 kbit/s)... Hash of data verified. Leaving... Hard resetting via RTS pin... <省略> Done #以下、console.log出力 fired 1600919068256 1600919069256 1600919070256 1600919071256

main.jsからbreakpointを外し(debuggerを外し) [-d]を外してビルドし直すと、「picocom /dev/ttyUSB0 -b115200」でconsole.log出力を表示できる。

manifest.json

manifest.json

{ "config": { "sntp": "pool.ntp.org", }, "include": [ "../../esp/console/manifest_console.json", "../../all/timer/manifest_timer.json", ], "modules": { "*": [ "./main", ], }, }

main.js

main.js

debugger; import {} from 'w3c_timer'; import {} from 'console'; const id_timeout = setTimeout(() => { console.log('fired'); }, 2000); const id_interval = setInterval(() => { console.log(Date.now()); }, 1000);

polyfillでsetTimeout/setIntervalも実装されている。

参照情報

https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/Moddable%20SDK%20-%20Getting%20Started.md

moddable 用 Polyfill ライブラリーを作ってます

以上

続きを読む "Moddableにconsole.logを追加する"

| | コメント (0)

2020年9月19日 (土)

Moddableをインストールする

2020/9/27:
シンプルなblinkを追加した。

2020/9/21:
他のサンプルを追加した。

2020/9/20:
ネットワーク対応サンプルを追加した。

2020/9/19+:
初版

Moddable install

Moddable install

概要

以下のModdableをインストールする。
ボードコンピュータでJavascriptを動かす環境としてModdableがあるが、それのインストールについて記する。
 組み込み系ソフトとしてJavascriptが動作する例として、Fitbit_Versaなどがあるが、これは、簡単な言い方をすると、 画面関係はSVG、ロジックはJavascriptで作成できる。JavascriptのインタープリタはVersa本体に組み込まれていて、 プログラムしたJavascriptのソースをVersa本体に書き込んで実行することになる。(ソース自身はコンパクトな形に変換される)
 obnizでもJavascriptが利用できるが、サーバークライアント・ベースでWebブラウザーでJavascriptが動作して、obnizのハードウェア自身はIOプロセッサ的に動作する。
 TesselボードでもJavascriptが動作する。ただし、特定のハードウェアに限定される。
 これに対して、moddableでは、Javascriptの機能自身が書き込む実行形式に含まれるので、これのみで完結する。

moddable

install(シミュレータ)

以下の手順でツールをインストールする:

sudo apt-get install libgtk-3-dev mkdir ~/Projects #(Projectsは任意) cd ~/Projects git clone https://github.com/Moddable-OpenSource/moddable export MODDABLE=~/Projects/moddable # Moddableのコマンドラインツール(mcconfig),シミュレータ(simulator),デバッガ(xsbug)をビルドする cd $MODDABLE/build/makefiles/lin make make install export PATH=$PATH:$MODDABLE/build/bin/lin/release # デバッグ起動テスト xsbug # ここでxsbugのウィンドウが立ち上がる。 # アプリケーションと接続していないので、空の画面になる。 # サンプルをコンパイル&実行する cd $MODDABLE/examples/piu/balls mcconfig -d -m -p lin # ここで、M5Stick-Cのシミュレータが動作して画面にバウンドしているボールが表示される。 # mcconfigがビルド用のツールになる; # オプションの意味は以下のとおり: # -d デバッグモードでビルド # -m ビルドとデバイスへの書き込みを同時に行う # -p ビルド対象のプラットフォームを指定するオプション。linは「LinuxのModdableシミュレータ」を指す。

install(ESP32)

以下の手順でESP32用ツールをインストールする:

cd ~ mkdir esp32 cd ~/esp32 wget https://dl.espressif.com/dl/xtensa-esp32-elf-linux64-1.22.0-80-g6c4433a-5.2.0.tar.gz tar -xvf xtensa-esp32-elf-linux64-1.22.0-80-g6c4433a-5.2.0.tar.gz git clone -b v3.3.2 --recursive https://github.com/espressif/esp-idf.git sudo apt-get install gcc git wget make libncurses-dev flex bison gperf python python-pip python-setuptools python-serial export IDF_PATH=~/esp32/esp-idf python -m pip install --user -r $IDF_PATH/requirements.txt export PATH=$PATH:~/esp32/xtensa-esp32-elf/bin:$IDF_PATH/tools # サンプルをコンパイル&実行する cd $MODDABLE/examples/piu/balls export UPLOAD_PORT=/dev/ttyUSB0 M5Stackの場合: mcconfig -d -m -p esp32/m5stack # コンパイルはできるが実行はできなかった M5Stack Fireの場合: mcconfig -d -m -p esp32/m5stack_fire # コンパイル実行するとデバッガ画面が表示されるので、実行アイコン(▶)を押す。 M5Stick-Cの場合: mcconfig -d -m -p esp32/m5stick_c M5Atomの場合: mcconfig -d -m -p esp32/m5atom

export登録

.bashrcに以下を登録する:

# moddable export MODDABLE=~/Projects/moddable export PATH=$PATH:$MODDABLE/build/bin/lin/release export IDF_PATH=~/esp32/esp-idf export PATH=$PATH:~/esp32/xtensa-esp32-elf/bin:$IDF_PATH/tools

sample code(参考)

balls/main.js

/* * Copyright (c) 2016-2020 Moddable Tech, Inc. * * This file is part of the Moddable SDK. * * This work is licensed under the * Creative Commons Attribution 4.0 International License. * To view a copy of this license, visit * <https://creativecommons.org/licenses/by/4.0> * or send a letter to Creative Commons, PO Box 1866, * Mountain View, CA 94042, USA. * */ import {} from "piu/MC"; const backgroundSkin = new Skin({ fill:"silver" }); const ballTexture = new Texture("balls.png"); const ballSkin = new Skin({ texture:ballTexture, x:0, y:0, width:30, height:30, variants:30 }); class BallBehavior extends Behavior { onCreate(ball, delta) { this.dx = delta; this.dy = delta; } onDisplaying(ball) { this.x = ball.x; this.y = ball.y; this.width = ball.container.width - ball.width; this.height = ball.container.height - ball.height; ball.start(); } onTimeChanged(ball) { var dx = this.dx; var dy = this.dy; ball.moveBy(dx, dy); var x = this.x + dx; var y = this.y + dy; if ((x < 0) || (x > this.width)) dx = -dx; if ((y < 0) || (y > this.height)) dy = -dy; this.dx = dx; this.dy = dy; this.x = x; this.y = y; } }; let BallApplication = Application.template($ => ({ skin:backgroundSkin, contents: [ Content(6, { left:0, top:0, skin:ballSkin, variant:0, Behavior: BallBehavior } ), Content(5, { right:0, top:0, skin:ballSkin, variant:1, Behavior: BallBehavior } ), Content(4, { right:0, bottom:0, skin:ballSkin, variant:2, Behavior: BallBehavior } ), Content(3, { left:0, bottom:0, skin:ballSkin, variant:3, Behavior: BallBehavior } ), ] })); export default new BallApplication(null, { displayListLength:4096, touchCount:0 });

ネットワーク対応のサンプル

ネットワーク対応のサンプルをビルド実行する場合、以下のように設定するssid,passwordを コマンドラインのオプションとして追加する:

mcconfig -d -m -p esp32/m5atom ssid=your_ssid password=your_passswd

MQTT

ビルド実行:

cd $MODDABLE/examples/network/mqtt/mqttbasic mcconfig -d -m -p esp32/m5atom ssid=your_ssid password=your_passswd

xsbugのコンソール画面:

Wi-Fi connected to "your_ssid" IP address 192.168.0.17 received "moddable/mqtt/example/date": Sun Sep 20 2020 18:24:23 GMT+0900 received "moddable/mqtt/example/random": 0.8646926234626893 received "moddable/mqtt/example/date": Sun Sep 20 2020 18:24:24 GMT+0900 received "moddable/mqtt/example/random": 0.3546896857104007 <省略> received "moddable/mqtt/example/random": 0.9578066274891157 received "moddable/mqtt/example/date": Sun Sep 20 2020 18:25:34 GMT+0900 received "moddable/mqtt/example/random": 0.7666543393318203 received "moddable/mqtt/example/date": Sun Sep 20 2020 18:25:35 GMT+0900 received "moddable/mqtt/example/random": 0.3196750421355653

httpserver

ビルド実行:

cd $MODDABLE/examples/network/http/httpserver mcconfig -d -m -p esp32/m5atom ssid=your_ssid password=your_passswd

xsbugのコンソール画面:

Wi-Fi connected to "your_ssid" IP address 192.168.0.17

コンソール画面のIPアドレスで webブラウザーでアクセスすると 以下のように表示される;

hello, client at path /.

httpget

ビルド実行:

cd $MODDABLE/examples/network/http/httpget mcconfig -d -m -p esp32/m5atom ssid=your_ssid password=your_passswd

xsbugのコンソール画面:

Wi-Fi connected to "your_ssid" IP address 192.168.0.4 <body> <div> <h1>Example Domain</h1> <p>This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.</p> <p><a href="https://www.iana.org/domains/example">More information...</a></p> </div> </body> </html>

httpgetjson

ビルド実行:

cd $MODDABLE/examples/network/http/httpgetjson mcconfig -d -m -p esp32/m5atom ssid=your_ssid password=your_passswd

xsbugのコンソール画面:

Wi-Fi connected to "your_ssid" IP address 192.168.0.4 The temperature in Menlo Park is 60.21 F. The weather condition is Clouds.

httpserverbmp

ビルド実行:

cd $MODDABLE/examples/network/http/httpserverbmp mcconfig -d -m -p esp32/m5atom ssid=your_ssid password=your_passswd

xsbugのコンソール画面:

Wi-Fi connected to "your_ssid" IP address 192.168.0.19

コンソール画面のIPアドレスで webブラウザーでアクセスする。 BMP画像が表示される。

httppost

ビルド実行:

cd $MODDABLE/examples/network/http/httppost mcconfig -d -m -p esp32/m5atom ssid=your_ssid password=your_passswd

xsbugのコンソール画面:

Wi-Fi connected to "your_ssid" IP address 192.168.0.26 name: Moddable value: 123

このサンプルで利用しているテスト用サーバーについては以下を参照のこと:
httpbin - HTTP通信のテストに便利なWebサービス&ソフト

socketreadwrite

ビルド実行:

cd $MODDABLE/examples/network/socket/socketreadwrite mcconfig -d -m -p esp32/m5atom ssid=your_ssid password=your_passswd

xsbugのコンソール画面:

Wi-Fi connected to "your_ssid" IP address 192.168.0.15 socket created. Socket message connect Socket message dataSent VALUE = 5744 Socket message dataReceived VALUE = 1436 HTTP/1.1 200 OK Accept-Ranges: bytes Age: 501726 Cache-Control: max-age=604800 Content-Type: text/html; charset=UTF-8 Date: Sun, 20 Sep 2020 12:26:21 GMT Etag: "3147526947" Expires: Sun, 27 Sep 2020 12:26:21 GMT Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT Server: ECS (sjc/4E74) Vary: Accept-Encoding X-Cache: HIT Content-Length: 1256 Connection: close <!doctype html> <html> <head> <title>Example Domain</title> <meta charset="utf-8" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style type="text/css"> body { background-color: #f0f0f2; margin: 0; padding: 0; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } div { width: 600px; margin: 5em auto; padding: 2em; background-color: #fdfdff; border-radius: 0.5em; box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02); } a:link, a:visited { color: #38488f; text-decoration: none; } @media (max-width: 700px) { div { margin: 0 auto; width: auto; } } </style> </head> <body> <div> <h1>Example Domain</h1> <p>This domain is for use in illustrative examples in documents. You may use th Socket message dataReceived VALUE = 190 is domain in literature without prior coordination or asking for permission.</p> <p><a href="https://www.iana.org/domains/example">More information...</a></p> </div> </body> </html>

他のサンプル

他のgitのサンプルを動かしてみる。 以下の手順でダウンロードする:

mkdir ~/moddable_test cd ~/moddable git clone https://github.com/meganetaaan/moddable-examples.git

サンプルの簡単な説明は以下を参照のこと:
https://github.com/meganetaaan/moddable-examples/blob/master/README.md

bongo

ボンゴ(打楽器)のデモ:

cd ~/moddable_test/moddable-examples/bongo mcconfig -d -m -p esp32/m5stack_fire

pomodoro

タイマーデモ:

cd ~/moddable_test/moddable-examples/pomodoro mcconfig -d -m -p esp32/m5stack_fire

neopixel

内蔵のneopixelを光らせる:

cd ~/moddable_test/moddable-examples/unit/neopixel mcconfig -d -m -p esp32/m5stack_fire

実行すると、内蔵neopixelが色を変えて光る

light-server

LEDが制御できるhttpサーバー:

cd ~/moddable_test/moddable-examples/network/light-server mcconfig -d -m -p esp32/m5stack_fire ssid=your_ssid password=your_passwd または mcconfig -d -m -p esp32/m5atom ssid=your_ssid password=your_passwd

xsdebugのコンソール画面:

Wi-Fi connected to "your_ssid" IP address 192.168.0.19 [object Object]probe for m5stack probe 1 probe 2 probe 3 probe claimed m5stack

webブラウザーで以下のurlでアクセスする:

http://192.168.0.19/off The light is off http://192.168.0.19/on The light is on http://m5stack.local/on The light is on http://m5stack.local/off The light is off

lightのオン/オフに応じて本体のLEDがオン/オフする。

接続:
M5Atomに抵抗付きLEDをG25に接続する。(5V,G(ND)も接続する)

~/moddable_test/blink/main.js

import Timer from 'timer'; import Digital from 'pins/digital'; let led = 25; // IO25 for M5Atom let toggle = 0; // Blink LED Timer.repeat(() => { Digital.write(led, toggle); toggle = ~toggle; }, 100);

~/moddable_test/blink/manifest.json

{ "include": [ "$(MODDABLE)/examples/manifest_base.json", "$(MODULES)/pins/digital/manifest.json", ], "modules": { "*": "./main", }, }

ビルド実行:

cd ~/moddable_test/blink mcconfig -m -p esp32/m5atom

実行するとG25に接続したLEDが点滅する。

参照情報

https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/Moddable%20SDK%20-%20Getting%20Started.md

versaアプリ「HR/LCD clock」の紹介

obniz
https://obniz.com/ja/doc/reference/

Tessel1
https://github.com/tessel/t1-docs
https://github.com/tessel/hardware/blob/master/tessel-hardware-overview.md
Tessel2
https://tessel.gitbooks.io/t2-docs/content/
https://tessel.gitbooks.io/t2-docs/content/Hardware/Tessel_2_Overview.html

以上

続きを読む "Moddableをインストールする"

| | コメント (0)