Androidのメモとか

ポキオの日記です。今日も遅延してない。

Waveshare 2.13inch e-Paper HAT (B)を買って3色電子ペーパーを楽しむ(画像表示編)

赤が表示できるなら、京急を表示するしかない。

Image Converter For Waveshare e-Paper

前回は環境構築をしました

relativelayout.hatenablog.com

とりあえず、何かを表示したいのですが、今回の電子ペーパーは赤・黒・白が表示できるので、京急(というか任意の画像)を表示させてみます。

サンプルコードを眺める

本家サンプルコードはこちら。

File:2.13inch-e-paper-hat-b-code.7z - Waveshare Wiki

  • ディスプレイのサイズは212x104だけど、ソフト的には横104・縦212の縦長のディスプレイとして扱う
  • 黒く表示するところと、赤く表示するところを別々の画像として準備する必要がある
  • 画像さえ準備できてしまえば、後はライブラリがよしなに表示してくれる

ほうほう、なかなか特殊な感じ。とりあえず、以前作ったPaPiRus向けに作ったスクリプト同様、PIL(Pillow)で画像を作ってしまえば良さそう。というわけで、スクリプトをつくってみました。

スクリプトがこちら

勢いで作った。

github.com

PILを使って、画像の赤い部分だけ抽出、その部分とそれ以外の部分をそれぞれ別の画像に保存して、Waveshareのライブラリに食わせています。赤い部分の判定条件は、京急がいい感じに表示されるようにチューニングしています。

サンプルはこちら。

元画像 スクリプト適用後
Image Converter For Waveshare e-Paper Image Converter For Waveshare e-Paper

赤以外はモノクロになるため、なんとも不思議な感じです。

Waveshare 2.13inch e-Paper HAT (B)を買って3色電子ペーパーを楽しむ(環境構築編)

時代は三色。

Waveshare 2.13inch e-Paper HAT (B) 212x104, 2.13inch E-Ink display HAT for Raspberry Pi, three-color

Waveshare 2.13inch e-Paper HAT (B)

https://www.waveshare.com/product/modules/oleds-lcds/e-paper/2.13inch-e-paper-hat-b.htm

Raspberry Pi Zero/Zero Wにピッタリサイズの電子ペーパーハット。しかも、白・黒・赤の三色が表示できるというすごいやつ。PIMORONI印のやつも売ってましたが、今回はWaveshareのやつを買いました。バジェット都合です。

何はともあれ環境構築

電子ペーパー側はピンソケットが実装済みなので、Pi Zero/Zero W側でピンヘッダがついていれば、特に何も気にせず刺すだけ。ジャンパワイヤは使いませんでした。

必要なライブラリ等は、一部を除いてWaveshareのWikiの通りにインストールしていくだけ。

2.13inch e-Paper HAT (B) - Waveshare Wiki

Wiring Piのインストール

もともとRPiに入ってそうなので、不要かもしれないけど一応。 Wikiの通りやると上手くいかなかったので、Wiring Piのページからコードを引っ張ってきます。

git clone git://git.drogon.net/wiringPi
cd wiringPi/
./build

これでOK。

 gpio -v
 gpio readall

gpioコマンドが通れば多分大丈夫。

bcm2835

これはWikiの通り。

wget https://www.waveshare.com/w/upload/1/10/Bcm2835-1.39.tar.gz
tar xfz Bcm2835-1.39.tar.gz
cd bcm2835-1.39/
./configure 
make
sudo make check
sudo make install

Pythonのライブラリ諸々

お決まりのsudo apt-get updateをしてから、

sudo apt install python-rpi.gpio
sudo apt install python-smbus
sudo apt install python-serial
sudo apt install python-spidev
sudo apt install python-imaging

すでにup-to-dateのものも多かったけど、念のため。

I2Cとシリアルを有効に

sudo raspi-configで有効にします。そのあとに、sudo nano /etc/modulesで、ファイルに以下を追記。

i2c-bcm2708

i2c-dev

i2c-devはすでに書かれていたので、追記しませんでした。

これで完了

サンプルコードはwget https://www.waveshare.com/w/upload/3/3f/2.13inch-e-paper-hat-b-code.7zで落とせます。 python raspberrypi/python/main.pyを実行すると、電子ペーパーの表示がデモモードになります。

Waveshare 2.13inch e-Paper HAT (B)のサンプルコード

A post shared by pokio (@pokiiiiio) on

表示の切り替えにかなり時間がかかるのは仕様でしょうか・・・?

電車遅延ガジェット作成ハンズオンの第2弾を開催しました

ダァ。

IoT初心者向けNefry BTハンズオン / 電車遅延を通知してみよう vol2 #nefry

IoT初心者向けNefry BTハンズオン / 電車遅延を通知してみよう vol2 #nefry

開発ボード「Nefry BT」を使ったハンズオン会を開催しました。

dotstudio.connpass.com

4ヶ月ぶり2回目の開催です。前回と全く同じだったのは悔しかったので、ちょっと変えてる部分があります。一方で、今回のハンズオン会で見つけた課題もあったのでメモしておこうと思います。

ちなみに前回はこちら。

relativelayout.hatenablog.com

改善点

Groveコネクター

せっかくGroveコネクターを搭載しているNefry BTなので、ブザーをつけて鳴らしてみました。 山手線の発車メロディーを鳴らしてみたんですが、ややウケでした。

IoT初心者向けNefry BTハンズオン / 電車遅延を通知してみよう vol2 #nefry

コードはこちらにあります。

github.com

スケッチのアップロード機能・ウェブコンソール機能

Nefry BTの良さ味である機能を、ハンズオン会の資料に盛り込みました。

スケッチアップロード機能は、Arduino IDEなどで、コンパイル済みのバイナリファイルを出力して、それをNefry BT上で動いているWebページでアップロードするだけで、そのプログラムが書き込める機能。

IoT初心者向けNefry BTハンズオン / 電車遅延を通知してみよう vol2 #nefry

ウェブコンソール機能は、同じくNefry BT上で動くWebページ上でArduino IDEのシリアルモニタのようにログの確認と簡単な知りたる通信が可能。

IoT初心者向けNefry BTハンズオン / 電車遅延を通知してみよう vol2 #nefry

どちらにも共通するのは、Nefry BTを直接PCにUSB接続しなくてもいいという点。物理的にNefry BTとUSB接続できないケースや、Nefry BTがPCで認識できないときなどでも、それなりに開発ができてしまう、素晴らしい機能です。

課題

IoT初心者向けNefry BTハンズオン / 電車遅延を通知してみよう vol2 #nefry

USBメモリがさせないPC

参加者にはラップトップを持参していただき、ハンズオンを開催しています。そして、当日使うサンプルコードをUSBメモリに入れて参加者をコードをシェアしているのですが、今回は業務用PCを持参している方がいらっしゃいまして、セキュリティの問題でUSBメモリを刺せないという問題が。

事前にgithubでコードを公開していたので、そのリポジトリを教えてcloneしてもらってなんとかコードをシェアできましたが、色々と気づきが多かったです。

FTDIドライバーを入れたくない話

Nefry BTですが、USBシリアル変換にFTDIのチップを使っているので、FTDIのドライバーをインストールしていないと、PCでボードを正常に認識できないケースがあります。ただ、FTDIのドライバーのページが、パット見怪しいんですよね。よくわからないドライバーを入れるのに抵抗があって、ちょっと入れたくないっていうこともありますよね。

Nefry BTは先に述べた通り、直接Nefry BTをUSB接続しなくても、プログラムを焼いたり、シリアルモニタのようなものを使うことができるので、それで対応できなくはないですが。やっぱりUSB接続で通信できたほうが便利ですよね・・・。

PCのスペックが低いとコンパイルに時間がかかる問題

そうなんですよね。手持ちの非力PC(ASUS TRANSBOOK)もなかなかコンパイルできないことがあります。予め参加条件としてPCのスペック等を明記していませんでしたが、今後は何らかの記載をしなければいけないかもしれません。

というわけで

IoT初心者向けNefry BTハンズオン / 電車遅延を通知してみよう vol2 #nefry

気づきが多かったハンズオン会でした。

事前の情報出しと、トラブルシューティング対応に改善の余地がありそうです。

Bootstrapでそれっぽいサイトをチョッパヤで作ってみた

それっぽさ。

Bootstrapとは

いい感じのCSSとJSが用意されたコンポーネントライブラリ。味気ない素のエレメントを、ちょっとしたコーディングで今風な感じに仕上げてくれます。

getbootstrap.com

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

使い方は簡単で、HTMLに以下を追加。

(HEAD内に)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
(BODY内に)
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

あとは要素のクラス名をいじるだけでいい感じの雰囲気になります。今回は以下のサイトを参考にしながら、サイトのアップデートを行ってみました。

https://hackerthemes.com/bootstrap-cheatsheet/

実際に使ってみた

以前作ったGitHub Pagesをすべて更新してみました。

pokiiio.github.io

pokiiio.github.io

pokiiio.github.io

pokiiio.github.io

pokiiio.github.io

pokiiio.github.io

実際のイメージがこんな感じ。

bootstrap pokiiio

フォントだけでなく、NavBarもそれっぽく。

bootstrap pokiiio

ダイアログもそれっぽく。

bootstrap pokiiio

モバイルもそれっぽく。

チョッパヤでいい感じに!

micro:bitをWeb Bluetooth APIで通信するときにハマったポイント

たくさんハマりました。

micro:bit Web Bluetooth API

メモメモ

micro:bitを買ってから色々といじってましたが、色んな所でハマったのでメモしておきます。

JavaScript Block EditorでBluetoothのブロックが見つからない

デフォルトで非表示という罠。

relativelayout.hatenablog.com

Web Bluetooth APIが使えるOS/ブラウザの組み合わせが意外と少ない

Chrome on Macは優秀。Safariが対応してなくてビビる。

github.com

BLEデバイスのスキャン

Web Bluetooth

ページ上でユーザーアクションをトリガーに、ブラウザのBLEデバイスリスト画面をnavigator.bluetooth.requestDevice()で表示させることで、特定のBLEデバイスと接続し通信するわけですが。

  navigator.bluetooth.requestDevice({
    filters: [
      { services: [LED_SERVICE] },
      { namePrefix: "BBC micro:bit" }
    ]
  })

結論から言うと、こんな感じで書くとうまく動作しました。ここで、LED_SERVICEというのは、サービスのUUIDで、

// micro:bit LEDサービス
const LED_SERVICE = "e95dd91d-251d-470a-a062-fa1922dfa9a8";

こんな感じです。

例えば、servicesを指定しないと、

SecurityError: Origin is not allowed to access any service. Tip: Add the service UUID to 'optionalServices' in requestDevice() options. https://goo.gl/HxfxSQ

セキュリティ観点でブラウザに怒られてしまい、機器リストには表示されるものの、いざ接続してRead/Writeしようとすると失敗してしまいます。

  navigator.bluetooth.requestDevice({
    filters: [
      { services: [LED_SERVICE] }
    ]
  })

じゃあservicesだけならいいのかと思うと、そういうわけでなく、これだとデバイスをうまく見つけられません。

  navigator.bluetooth.requestDevice({
    services: [LED_SERVICE]
  })

むしゃくしゃしてこういう書き方をしてしまうと、

TypeError: Failed to execute 'requestDevice' on 'Bluetooth': Either 'filters' should be present or 'acceptAllDevices' should be true, but not both.

と言われてしまいます。acceptAllDevicestrueにしてもいいですが、そうすると関係ないBLEデバイスも機器リストに表示されてしまい、見づらくなってしまいます。servicesでサービスを指定しつつ、名前のprefixでフィルターするには、

  navigator.bluetooth.requestDevice({
    filters: [
      { services: [LED_SERVICE] },
      { namePrefix: "BBC micro:bit" }
    ]
  })

やっぱりこういう書き方がジャスティスっぽいです。filtersで条件をつなげていくといい感じにANDでフィルターしてくれます。

サービス、キャラクタリスティックのUUIDや仕様がわからない

ここの情報を信じて実装しました。

Bluetooth Developer Studio - Profile Report

ちなみに、先程のLEDサービスのUUIDは、プロファイルの仕様書上はE95DD91D251D470AA062FA1922DFA9A8と書かれていますが、このままJavaScriptのコードに書いてしまうとエラーになってしまいました。ちゃんとハイフンを入れてあげて、e95dd91d-251d-470a-a062-fa1922dfa9a8みたいな感じで書いてあげなければ行けません。キャラクタリスティックのUUIDも同様です。

一部未実装?だったり、セキュリティ的にアクセスできないキャラクタリスティックがある

先程のプロファイルの仕様書では、Device Informationというサービスがあり、

  • Model Number String
  • Serial Number String
  • Hardware Revision String
  • Firmware Revision String
  • Manufacturer Name String

という5つのキャラクタリスティックがあるようですが、実際にアクセスしてみると、Serial Number Stringは

SecurityError: getCharacteristic(s) called with blocklisted UUID. https://goo.gl/4NeimX

セキュリティ的にアクセスが封じられているようです。また、Hardware Revision StringとManufacturer Name Stringは、そもそもキャラクタリスティックが見つかりませんでした。

micro:bitのLEDをWeb Bluetooth APIで制御してみる

micro:bit x Web Bluetooth APIの最終章。

micro:bit web bluetooth api

最後はLED

micro:bitのBLEを色々いじってきました。

relativelayout.hatenablog.com

relativelayout.hatenablog.com

relativelayout.hatenablog.com

relativelayout.hatenablog.com

ちょっとキリがないので、今回のLED制御で一旦シメたいと思います。

micro:bit側は、BLE系のサービスを開始するだけ

相変わらず、Bluetooth系のサービスをすべて初期化するコードです。

micro:bit web bluetooth api

今回も変える必要がないので、このままの実装で進めます。

bluetooth.startAccelerometerService()
bluetooth.startButtonService()
bluetooth.startIOPinService()
bluetooth.startLEDService()
bluetooth.startTemperatureService()
bluetooth.startMagnetometerService()

IOピンサービスっていうのもあります。たまには思い出してあげてください。

HTML側のプログラミング

例によって、このプロファイル仕様書を参考にしています。

Bluetooth Developer Studio - Profile Report

LED系のサービスは少し特殊で、今表示しているLEDの状態を取得したり、任意の状態を書き込んで、好きな用に光らせることもできます(ReadもWriteもできる)。また、文字列を流し込んでスクロール表示させたり、スクロール速度も変えられます。

今回は、5x5のチェックボックスをページ上に表示して、チェックした位置に対応するLEDを光らせるというプログラミングにしました。

Octet 0 represents the first row of LEDs i.e. the top row when the micro:bit is viewed with the edge connector at the bottom and USB connector at the top.

Octet 1 represents the second row and so on.

In each octet, bit 4 corresponds to the first LED in the row, bit 3 the second and so on.

Bit values represent the state of the related LED: off (0) or on (1).

So we have:

Octet 0, LED Row 1: bit4 bit3 bit2 bit1 bit0

Octet 1, LED Row 2: bit4 bit3 bit2 bit1 bit0

Octet 2, LED Row 3: bit4 bit3 bit2 bit1 bit0

Octet 3, LED Row 4: bit4 bit3 bit2 bit1 bit0

Octet 4, LED Row 5: bit4 bit3 bit2 bit1 bit0

こんな感じで、LEDの一列をUint8で表す、Uint8Arrayデータをmicro:bitに流し込めばOKです。

github.com

pokiiio.github.io

#microbit のLEDを #webbluetooth で制御してみる。

A post shared by pokio (@pokiiiiio) on

いやー、BLEでなんでもできちゃうんですね・・・。

micro:bit、奥が深いわ・・・。

電池ボックスを改造してmicro:bitの電源をスマートな感じで供給できるようにした

なんかいい感じ!

micro:bit  battery 電池

所謂、電源どうするんだ問題

マイコンを触ってて、いつもぶち当たる問題の一つが電源。

micro:bit  battery 電池

購入したのはスターターキットだったので、電池ボックスが付属していたものの、単4電池2本ということもありバッテリー駆動時間が心配なのと、電源コードがどうもスマートではないような印象でした。

そこで電池ボックス

既存の電池ボックスを改造して、GNDと3V端子に直接電気を流してやればいいのでは?そう思ってぐぐると、すでに先人がやっていました。

qiita.com

僕は単3電池が大好きなので、単3電池3本が入るスイッチ付き電池ボックスを改造して、micro:bitに給電してみたいと思います。

いざ工作

こういう電池ボックスを買ってきまして、

micro:bit  battery 電池

電極を取り外していきます。単3電池1本分のスペースを、micro:bitの端子を接続するために使って、残りの2本分のスペースを電池用にアサインします。

micro:bit  battery 電池

micro:bitの穴と同じように、電池ボックスにも穴を開けていきます。

micro:bit  battery 電池

端子 といっても、ボルトとナットでなんとかしていきます。それぞれ2個づつつかって、3V端子とGND端子を作って、それをmicro:bitに接続します。

micro:bit  battery 電池

micro:bitに表面実装されている素子が電池ボックスと干渉するので、スペーサを噛ませて固定します。これで完成!

うーん!いい感じ!

micro:bit  battery 電池

コンパクトなmicro:bitのよさみをスポイルすることなく、低コストでコンパクトに、スマートに電源供給ができるようになりました!やったね!

以下、ごめんなさい案件です。

  • リセットボタンが押せなくなった
  • 穴を5個も開ける必要はなかった
「Androidのメモとか」は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

このブログは個人的なメモ書きであったり、考えを書く場所であります。執筆者の所属する団体や企業のコメントや意向とは無関係であります。また、このブログは必ずしも正しいことが書かれているとは限らず、誤字脱字や意図せず誤った情報を載せる場合がありえます。それが原因で読者が不利益を被ったとしても、執筆者はいかなる責任も負いません。ありがとうございます。