2017/10/24

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

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

今回も半固定抵抗のツマミを人が回すことで操作しています。0〜1023までの値を11分割して、値に応じてスライドを切り替えています。
画面がぱっと切り替わるのではなく、スライドして切り替わる様子が分かると思います。
例えば、センサーの値に応じて画像を変更したり、プレゼン資料などの応用に使えます。画像を写真にすればスライドショーにもなります。

【 必要なもの 】

scan のときと同じです

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

デバイスがBLE Nanoの場合で説明します。
半固定抵抗のツマミを回すことでスライドを切り替えることが出来ます。

WEB上で試せるデモページはこちら
https://secure1689.sakura.ne.jp/kurage.jellyware.jp/bluejelly/advance_slick.html

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

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

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

メインとなるライブラリとしてslickを活用しています。
http://kenwheeler.github.io/slick/
こちらからファイルをダウンロードして実行する方法と、ファイルは一切ダウンロードせずCDNを使ってインターネットからライブラリ読み込みする方法があります。

今回クラゲは後者のCDNの方法を採用しました。
headタグ内で、slickのcssやjsライブラリ及び、jQueryのjsライブラリを読み込みます。jQueryについての説明は割愛しますが、簡易的にはこちらを参考にしてください。

<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/ff8000/ffffff/640x396.png?text=0"></div>
  <div><img src="https://placehold.jp/ffff00/ffffff/640x396.png?text=100"></div>
  <div><img src="https://placehold.jp/bfff00/ffffff/640x396.png?text=200"></div>
  <div><img src="https://placehold.jp/00ff00/ffffff/640x396.png?text=300"></div>
  <div><img src="https://placehold.jp/00ffbf/ffffff/640x396.png?text=400"></div>
  <div><img src="https://placehold.jp/0080ff/ffffff/640x396.png?text=500"></div>
  <div><img src="https://placehold.jp/4000ff/ffffff/640x396.png?text=600"></div>
  <div><img src="https://placehold.jp/ff00ff/ffffff/640x396.png?text=700"></div>
  <div><img src="https://placehold.jp/ff0080/ffffff/640x396.png?text=800"></div>
  <div><img src="https://placehold.jp/ff0000/ffffff/640x396.png?text=900"></div>
  <div><img src="https://placehold.jp/848484/ffffff/640x396.png?text=1000"></div>
</div>

画像は以下のWebサービスを利用しました。サイズや色、テキストを指定すると画像を生成して利用できます。
http://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
  });
});

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

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

//値に応じてスライド位置を変更
var slide_num = Math.floor(value/100);
$('.div_slide').slick('slickGoTo', slide_num);

ツマミを回したことでBLEから取得される0〜1024の値を100で割り、小数点以下は切り捨てています。そこで得られた0〜10の番号を引数に用いて、slickGoToメソッドにて、スライド番号に直接指定しています。
指定先が現在のスライド番号から近い場合はゆっくりとした演出、遠い場合はすばやい演出を行いますが、これはslick側で自動的に行ってくれます。
ちなみに、メソッドはslickGoToの他にもありますので、こちらも気になる人はslickのページで確かめてみてください。

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

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