obnizのフォーラムは新しいシステムに移行しております。

新しいフォーラムはこちらになります

Scroll Displayクラス



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

    デモムービーはこちら

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



  • @nak435 いいですね!

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

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

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



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



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



  • インスタンス化を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)

    表示するメッセージのフォントを指定します。初期化後はArial16pxです。
    ディスプレイの高さは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
    


  • @nak435 素晴らしいですね!



SUGGESTED TOPICS