Scroll Displayクラス

[nak435]

上のようなスクロール表示するクラスを作成しました。

デモムービーはこちら。

こういうクラスもパーツライブラリとして公開できるのでしょうか？

[Yuki Sato]

@nak435 いいですね！

ユーティリティについてはパーツライブラリにはなるべく含めないようにしたいと思っています。

今後、パーツやユーティリティなどについてユーザーの作成したものをもっと簡単にシェアできる仕組みなどを用意したいと持っています。

その機能ができましたらそちらでシェアしてもらえればと思います！それまではこのForumなどをご活用ください

[nak435]

@Yuki-Sato さん
ユーティリティ扱いなんですね。
だとすると、インスタンス生成にwiredメソッドは不適格でしょうから、ここは変えるようにします。
普通にnewでいいのかな？

[Yuki Sato]

@nak435 obnizのIOにつながるか、BLEでつながるようなものだけwiredでインスタンス化するようにしたいと持っています。
newで良いと思います！

[nak435]

インスタンス化をnewに変更しました。

デモHTML(こちら)とScrollDisplay.jsはどなたでも試すことができるように公開ファイルに作成してあります。

<script src="https://obniz.io/users/340/repo/ScrollDisplay.js"></script>

なお、上記htmlとjsの公開ファイルは予告なく変更・削除することがありますのでご了承ください。

---

ScrollDisplayクラスの説明

obnizのディスプレイに好きなメッセージをスクロール表示するクラスです。
node.js環境の場合はnode-canvasを必要とします。

使い方

ScrollDisplayクラスのインスタンスを生成します。引数にobnizのインスタンスを指定します。

//Javascript
const obniz = new Obniz("xxxx-xxxx");
const scroll = new ScrollDisplay(obniz);

font(font, size)

表示するメッセージのフォントを指定します。初期化後はArialの16pxです。
ディスプレイの高さは64pixelため、64px以下をお薦めします。ただし、使用するフォントによっては64pxでも上下が欠けることがあります。

//Javascript
scroll.font('serif', 24); //serif 24px 

textプロパティ

表示するメッセージを指定します。複数行のメッセージを指定する場合は、改行コード'\n'で区切ります。一行づつスクロール表示します。
表示中にtextプロパティを変更した場合は、再start()したときに有効となります。

//Javascript
scroll.text = '1st line messegage' + '\n' + '2nd line message'; 

baselineプロパティ

表示するメッセージの基点を指定します。指定できるのは、'top'と'bottom'です。初期化後は'top'です。
詳しい意味はこちらを参照してください。

//Javascript
scroll.baseline = 'bottom'; 

speedプロパティ、stepプロパティ

スクロールするスピードと描画間隔をミリ秒とpixel数で指定します。初期化後は10ミリ秒と4pxです。

//Javascript
//ゆっくりスクロール
scroll.speed = 20; //20ミリ秒
scroll.step = 1; //1px

start()

スクロールを開始します。繰り返して表示するため、スクロールを止める場合は、次のstop()を呼び出します。

//Javascript
scroll.start();

stop()

スクロールを停止します。なお、obnizにデータが溜まっている場合は、直ちに停止しないことがあります。

//Javascript
scroll.stop();

isScrollingプロパティ

スクロール中かどうかを判定します。

//Javascript
scroll.start();
console.log(scroll.isScrolling); //true

[Yuki Sato]

@nak435 素晴らしいですね！