obnizのLCDに文字列を表示する

obniz
DSC_0247
2023.10.18
にほんブログ村 その他趣味ブログへ
にほんブログ村 その他趣味ブログ 電子工作へ
にほんブログ村 科学ブログへ
にほんブログ村 科学ブログ 科学実験・工作へ

obnizデバイス基板上のLCDに文字列を表示する

obniz のプログラム開発にはいくつかの方法がありますが、このブログの記事では主に開発者コンソールのオンラインエディタを利用して HTML＋JavaScript で開発していきます。

セットアップで開発コンソールにアクセスした際にデフォルトで表示された『サンプルプログラム』でさえかなり長く複雑で、初めてobnizを触る人には判りにくいと思いますので、まずは要素をばっさり切り落として必要最小限なプログラムを作成しました。

最初に挑戦するのは、obniz 本体基板上の LCD（=Liquid Crystal Display 液晶ディスプレイ）に文字列を表示するだけのプログラムです。

使用部品

今回は外部回路はありません。obniz 本体だけで動作します。

プログラム

ソースコード

obniz 開発者コンソールにアクセスし、『開発』→『HTMLプログラム』を選択、obniz IDを入力してオンラインエディタを開き、以下のプログラムを入力して下さい。

7行目の ”1234-5678″ の部分は自分が使用している obnizデバイスの obniz ID に変更して下さい。

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script src="https://unpkg.com/obniz@3.26.0/obniz.js"></script>
    <script>
      const obniz = new Obniz("1234-5678");      // 自分のobniz ID を記述すること
      obniz.onconnect = async function() {
        obniz.display.clear();
        obniz.display.print("Hello,World!");
      };
    </script>
  </head>
  <body>
    <h1>hello world test</h1>
  </body>
</html>

プログラムの解説

obnizデバイスを制御するための、これ以上は簡単にならないくらい短いプログラムです。

さすがにHTMLやJavaScriptの基本文法まで説明を書いていると長くなりすぎるので、obniz開発ならではの部分に絞って解説します。

obniz.jsを読み込む

JavaScriptでobnizのプログラムを作成する場合、まず obniz.js を読み込みます。

HTML
<script src="https://unpkg.com/obniz@3.26.0/obniz.js"></script>

script 要素の src属性を使って、外部ファイル https://unpkg.com/obniz@3.26.0/obniz.js を読み込んでいます。この中には obniz を制御するためのクラス・メソッド等が定義されています。

script要素
JavaScript
    <script>
      const obniz = new Obniz("1234-5678");
      obniz.onconnect = async function() {
        obniz.display.clear();
        obniz.display.print("Hello,World!");
      };
    </script>

html ドキュメント中に JavaScript のプログラムを記述する場合、JavaScript のコードは html の script 要素の中に記述します。 script 要素は、上の例では head 要素の中に記述していますが、body 要素の中に記述してもかまいません。…というか公式サンプルはだいたいbody内に記述しているようです。

html ドキュメント内の要素にアクセスするようなプログラムを作成する場合は、スクリプト実行時点で html ドキュメントがアクセス対象である要素まで読み込まれていなければなりません。

Obniz クラスのインスタンスを生成
JavaScript
const obniz = new Obniz("1234-5678");

Obniz クラス（Oは大文字です）は先に読み込んだ obniz.js 内で定義されています。このクラスには、obniz デバイスを制御するためのすべての機能が実装されています。

obniz デバイスをプログラムから制御するためには、Obniz クラスのコンストラクタに obniz IDやシリアル番号を与えて生成したインスタンスが必要です。上のコードの “1234-5678” の部分が obniz ID です。自分が使用する obniz デバイスの obniz ID に書き換えてご利用下さい。

プログラムからの obnizデバイスに対する制御・データの送受信は、すべてこのobnizインスタンスのメソッド呼び出しやプロパティへのアクセスとして行います。

インスタンスが生成されると、自動的に obniz デバイスに対する接続が試みられます。接続が完了するまではプログラムはデバイスの情報を持っていないため、obniz インスタンスに対する操作はできません。

デバイスへの接続時の処理を定義する onconnect
JavaScript
obniz.onconnect = async function() {
  obniz.display.clear();
  obniz.display.print("Hello,World!");
};

Obniz.onconnect （以下、斜体のObniz.はObnizクラスのインスタンスを表します）は、 obniz デバイスとの接続が成功したときに呼び出される処理を指定します。ここでは定番の記述方法として、無名関数 function(){ … } を代入する型式を用いています。接続が成功すると、代入された関数の内容が実行されます。obniz デバイスとプログラムが接続しないうちは obniz インスタンスに対して操作を行うことができないため、Obniz.onconnect を利用して接続完了を待ってから処理を行うようにするのです。

async は非同期処理のためのワードです。今回のサンプルでは記述しなくても動きますが、決まり文句だと思ってつけておいて下さい。

LCDをクリアする display.clear()メソッド

ここからの部分では、LCDに対する制御を行っています。今回は obniz デバイスとの接続後すぐに処理を行うため、onconnect に代入したfunction() の中に直接記述しています。

JavaScript
obniz.onconnect = async function() {
  obniz.display.clear();
  obniz.display.print("Hello,World!");
};

Obniz.display.clear() メソッドは、LCDの表示内容を消去します。このメソッドには引数も返却値もありません。

LCDに文字列を表示する display.print()メソッド
JavaScript
obniz.onconnect = async function() {
  obniz.display.clear();
  obniz.display.print("Hello,World!");
};

Obniz.display.print() メソッドは引数（文字列）をLCD画面に表示するメソッドです。返却値はありません。

引数の文字コードはutf-8です。最近はhtmlファイルをutf-8で記述することが多いので問題になることはほとんどないと思いますが、html（js）ファイルを別の文字コードで記述しているときは注意して下さい。

body要素
HTML
  <body>
    <h1>hello world test</h1>
  </body>

今回はhtmlのbody要素内はタイトル表示のみです。

実行

これを実行すると、obniz 基板上の LCD には『Hello,World!』と表示されます。

Webブラウザにはタイトルのみ表示されます。

プログラムの改造

プログラム1を改造して、Obniz.display.print() メソッドについてもう少し詳しく見て行きましょう。

漢字も表示できます

Obniz.display.print()メソッドでは、引数に日本語を含む文字列を使用できます。以下のようにプログラムを書き換えてみましょう。

JavaScript
obniz.onconnect = async function() {
  obniz.display.clear();
  obniz.display.print("こんにちは世界");
};

表示後は自動改行します

Obniz.display.print() を2つ続けて記述すると、2つ目描画開始位置は次の行の先頭になります。以下のようにプログラムを書き換えてみましょう。

JavaScript
obniz.onconnect = function() {
  obniz.display.clear();
  obniz.display.print("Hello,World!");
  obniz.display.print("This is TEST.");
};

注意：長い文字列でも改行しません

Obniz.display.print()メソッドは、画面の幅を超える長い文字列を表示しようとしたとき、画面端で改行しません。下の画面写真のように、画面の幅に収まった分だけしか表示されません。

JavaScript
obniz.onconnect = function() {
  obniz.display.clear();
  obniz.display.print("3.1415926535897932384626");
  obniz.display.print("寿限無寿限無五劫の擦り切れ");
};

注意：スクロールしません

obnizのLCDはデフォルトのフォントで4行分の高さがありますが、Obniz.display.print()メソッドを5つ以上連続して実行しても画面はスクロールせず、新たな行は表示されません。

JavaScript
obniz.onconnect = function() {
  obniz.display.clear();
  obniz.display.print("3.1415926535897932384626");
  obniz.display.print("寿限無寿限無五劫の擦り切れ");
  obniz.display.print("スリジャヤワルダナプラコッテ");
  obniz.display.print("クルンテープ・マハーナコーン");
  obniz.display.print("こんにちは世界");
};

まとめ

  • obnizのLCD画面をクリアするには Obniz.display.clear() メソッドを使用する
  • obnizのLCD画面に文字列を表示するには Obniz.display.print() メソッドを使用する

コメント

タイトルとURLをコピーしました