2021年07月29日 更新

BLEデータに応じてスライド操作！

どうも、クラゲです。
今回は、BLEデバイスからNotifyで読み込んだデータに応じてスライドを操作する方法を紹介します。slickというライブラリを活用しました。カルーセルスライダーと呼ばれるスライドでWEBページにもよく使われています。

今回もmicro:bitの傾きを利用して操作しています。ある傾き範囲にある場合ににスライド表示が切り替わります。傾き範囲は２つあり、先に進むか前に戻るかが異なります。
画面がぱっと切り替わるのではなく、スライドして切り替わる様子が分かると思います。
例えば、センサーの値に応じて画像を変更したり、プレゼン資料などの応用に使えます。画像を写真にすればスライドショーにもなります。

【 必要なもの 】

Scan と同様

【 micro:bitの準備 】

Scan と同様

micro:bitが手元にない人は、HTML側のUUIDと受信データフォーマットを変更すれば、他のBLEデバイスでも対応可能です

【 デモページとソースコード 】

WEB上で試せるデモページはこちら
BlueJelly Sample : slick

ローカル環境で試したい方はこちらのGitHubからダウンロードし、advance_slick.htmlを開いて実行してください。

【 プログラム解説(HTML) 】

プログラムのベースは Notify です。
では、早速読スライド追加部分について見てゆきましょう

メインとなるライブラリとしてslickを活用しています。
https://kenwheeler.github.io/slick/

こちらからファイルをダウンロードして実行する方法と、ファイルは一切ダウンロードせずCDNを使ってインターネットからライブラリ読み込みする方法があります。

今回クラゲは後者のCDNの方法を採用しました。
headタグ内で、slickのcssやjsライブラリ及び、jQueryのjsライブラリを読み込みます。

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

bodyタグ内に実際に表示する画像などをdivタグを使って配置します。 下記のように、全ての各スライドを縦に順番に並べて書く事がポイントです。

    <div class="div_slide">
      <div><img src="https://placehold.jp/FF9900/FFFFFF/640x396.png?text=1"></div>
      <div><img src="https://placehold.jp/CCFF00/FFFFFF/640x396.png?text=2"></div>
      <div><img src="https://placehold.jp/00FF66/FFFFFF/640x396.png?text=3"></div>
      <div><img src="https://placehold.jp/00FFFF/FFFFFF/640x396.png?text=4"></div>
      <div><img src="https://placehold.jp/0066FF/FFFFFF/640x396.png?text=5"></div>
      <div><img src="https://placehold.jp/3300FF/FFFFFF/640x396.png?text=6"></div>
      <div><img src="https://placehold.jp/CC00FF/FFFFFF/640x396.png?text=7"></div>
      <div><img src="https://placehold.jp/FF0000/FFFFFF/640x396.png?text=8"></div>
    </div>

画像は以下のWebサービスを利用しました。サイズや色、テキストを指定すると画像を生成して利用できます。
https://placehold.jp/

もちろん、普通の画像を使っても問題ありません。

【 プログラム解説(JavaScript) 】

slickを機能追加する方法は非常に簡単です。 readyメソッドを使って、どのようなスライド設定にするかを書くのみです。 jQueryの記述方法を使って書いています。

//--------------------------------------------------
//slide処理
//--------------------------------------------------
$(document).ready(function(){
  $('.div_slide').slick({
     slidesToShow: 1,
     slidesToScroll: 1,
     arrows: false,
     dots: true,
     focusOnSelect: true,
   autoplay: false,
   speed: 300
  });
});

各設定について簡単に説明します。

  • slidesToShow
    一度に何枚のスライドを表示するかの設定です。今回は１枚にしました。

  • slidesToScroll
    マウスなどでフリックしたときに移動させるスライド数の設定です。今回は１枚にしていますが、BLEのときは直接スライド番号を指定しているので特に影響ありません。

  • arrows
    ここをtrueにすると、左右に矢印表示が追加され、マウスなどでマニュアル操作でスライドできます。今回はBLE操作メインなのでfalseにして消しています。

  • dots
    スライドの下に表示されている丸です。全体の中でどの位置にいるのかが見て分かるため、trueにして表示しています。

  • focusOnSelect
    slidesToShowで複数枚表示しているときに、他のスライドにタッチするだけでスクロール可能となります。今回１枚なので機能しないため、どちらの設定でも良かったのですが、とりあえずtrueにしておきました。

  • autoplay
    ここをtrueにすると、自動的にスライドが次々と変わります。今回はBLEマニュアル操作で行うためfalseにしました。

  • speed
    スライドが切り替わる時間です。あまり長いとイライラするため、今回は300に設定しています。

この他にも様々な設定がありますので、気になる人はslickのページで確かめてみてください。
次に、BLEと連動させる記述を書きます。
こちも非常に簡単で、以下のようにonReadの中で4行追加しているだけです。
jQueryの記述方法を使って書いています。 

  //-45°～45°を超える傾きでスライド動作
  if(value > 45){
    $('.div_slide').slick('slickNext');
  }else if(value < -45){
    $('.div_slide').slick('slickPrev');
  }

傾きが 45°を超えている場合は次のスライドへ移動、傾きが -45°未満の場合は前のスライドへ移動という指示を与えています。
ちなみに、メソッドは他にもありますので、こちらも気になる人はslickのページで確かめてみてください。

いかがでしたでしょうか？
温度センサーと組み合わせて、温度に応じて「暑い」「ちょうど良い」「寒い」などの画像や連想する写真などと連携させるのも面白いかもしれませんね。

以上、BLEデータに応じてスライド操作！でした。