2018-01-28

micro:bitの加速度センサーの値をWeb Bluetooth APIで読み取ってみる

Web Bluetooth APIがmicro:bitを面白くする。

micro:bit web bluetooth api

よっ、Web Bluetooth API！

前回は、JavaScriptブロックエディタのような、チョッパヤプログラミングでも、Bluetoothがいろいろ使えそうであるということがわかりました。

relativelayout.hatenablog.com

となれば、実際にBluetoothで通信してみようと思います。今回はブラウザ上でWeb Bluetooth APIを動かして、micro:bitにアクセスして、加速度センサーの値を監視してみようと思います。

BBC micro:bit バルク商品正規品

メディア:

まずはmicro:bit側のプログラミング

とはいえ、プログラミングというレベルではないですが・・・。

micro:bit web bluetooth api

こんな感じで、ありとあらゆるサービスをmicro:bit起動時にスタートするだけ。今回は加速度センサーしか使わないので、それだけでもいいかもしれません。

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

30秒くらいでコーディングが終了します。

HTML側のプログラミング

まず、事前情報として、以下のサイトを参考にしました。

Web Bluetooth

Bluetooth Developer Studio - Profile Report

Web Bluetooth APIの仕様書と、micro:bitのBLE関係の資料です。前者はW3Cの公式っぽいんですが、後者は非公式情報っぽいのでお気をつけて。公式のBLEの仕様書って何処かにあるんですかね・・・。

github.com

HTML側のコードはちょっと長いので、githubにアップしておきました。そして、毎度毎度のことですが、HTMLコーディング能力が低すぎるので、あまり参考にならないかもしれません…。

簡単にサマると、こんなことをしています。

近くにあるBluetoothデバイスを表示させて、micro:bitを選ばせる
接続して、加速度データの通知間隔を設定する
加速度データの通知設定をする
加速度データを受信したら、そのデータを表示する
加速度データに応じて、ページの背景色を変える

さっそく動かしてみます。

こんな感じです。micro:bitを動かすと、Webページの背景色が変わっていることがわかると思います。

#microbit の加速度センサーのデータを #webbluetooth で取得する。

A post shared by pokio (@pokiiiiio) on Jan 27, 2018 at 7:26am PST

ちなみに、githubのgithub pages機能により、みなさんも以下のページにアクセスすることで、micro:bitの加速度センサーの値を読み取ることができます。もしよかったら、遊んでみてください。(Web Bluetooth API対応のOS・ブラウザに限り動作しますが、たまに動かないこともあるのでご了承ください…)

pokiiio.github.io

いやぁ、micro:bitって本当にいいもんですねー。

2018-01-28

micro:bitのBluetooth機能をJavaScriptブロックエディタでフルで使えるようにする

使わなきゃもったいない！

micro:bit bluetooth

奥が深いmicro:bit

micro:bitは言うまでもないですが、BLEが使えます。しかしJavaScriptブロックエディタでは、パット見、Bluetooth関係のブロックが見当たらないような・・・。というわけで、JavaScriptブロックエディタでもBluetooth系のプログラミングができるように設定を変えてみます。

BBC micro:bit バルク商品正規品

メディア:

初期設定では非表示となっている

makecode.microbit.org

このエディタ、JavaScriptをラップしたようなブロックを、Scratchのようにつなげるだけでプログラミングできるデキる子。

micro:bit bluetooth

[設定]＞[パッケージを追加する…]を押すと、実は色んな機能が追加できます。

micro:bit bluetooth

ほら、Bluetoothっていう項目がある！（NeoPixelもありますねぇ・・・）

micro:bit bluetooth

このBluetoothパッケージを追加すると、こんな感じでいろんなBluetooth関係のブロックが使えるようになります。（ただし、RadioパッケージはBluetoothパッケージと排他になるため、使えなくなる）

micro:bit bluetooth

また、Bluetoothパッケージを追加すると、プロジェクトの設定の画面で、BLEのセキュリティ設定ができるようになります。これをいじると、パスワード不要でBLEのサービスやキャラクタリスティックへのアクセスができるようになります。

2018-01-24

micro:bitで京急のドレミファインバーターを奏でさせてみた

正確には「ファソラシドレミファソー」

micro:bit 京急 VVVF ドレミファインバーター SIEMENS

ちょっと前に買ったmicro:bit

relativelayout.hatenablog.com

とにかくチョッパヤでコーディングできて、意外と高性能なのが良いですね。今回は、micro:bitにスピーカーを接続して、京急のドレミファインバーターを奏でさせてみました。

ドレミファインバーターとは？

京急の1000形車両の一部に搭載されているSIEMENS社製のVVVF インバーターのことで、磁励音が音階になるようにチューンされています。とはいえ、このインバーターが載った車両もだんだん少なくなってきていて、非常に悲しいわけです。

どこでもドレミファインバーター

そこで、micro:bitにドレミファインバーターの音を奏でさせてみます。

micro:bit 京急 VVVF ドレミファインバーター SIEMENS

MicrosoftのBlock Editorで実装していきます。とはいえ、とりあえず「ファーソラシドレミファソー」と音がなるようにするだけ。マトリックスLEDがちょっとさみしいので、KEIKYUと常時表示させるようにしました。

input.onButtonPressed(Button.A, () => {
    music.playTone(349, music.beat(BeatFraction.Whole))
    music.playTone(392, music.beat(BeatFraction.Half))
    music.playTone(440, music.beat(BeatFraction.Quarter))
    music.playTone(494, music.beat(BeatFraction.Quarter))
    music.playTone(523, music.beat(BeatFraction.Quarter))
    music.playTone(587, music.beat(BeatFraction.Quarter))
    music.playTone(659, music.beat(BeatFraction.Quarter))
    music.playTone(698, music.beat(BeatFraction.Half))
    music.playTone(784, music.beat(BeatFraction.Breve))
})
control.inBackground(() => {
    while (true) {
        basic.showString("KEIKYU")
    }
})

0pinとGNDには、スピーカーを繋いでおきます。

出発進行

鳴らしてみます。

#microbit に #京急の #ドレミファインバーターを奏でさせてみた

A post shared by pokio (@pokiiiiio) on Jan 24, 2018 at 6:20am PST

いいよいいよ！

ｷｬｰｼｰﾒﾝｽｻｲｺｰ！

BBC micro:bit バルク商品正規品

メディア:

2018-01-24

Raspberry Pi + Speaker pHat で京急の運行情報を喋らせてみる

OK、京急！

Raspberry Pi Speaker pHat

ノリで買ったSpeaker pHat

ちょっと前にこれを買いました。

Pimoroni Speaker pHAT - スピーカー pHAT キット

メディア: エレクトロニクス

Lチカ、電子ペーパー、と来たら、次は音。とりあえずスピーカーをチョッパヤで鳴らしてみたかったのでこれを購入。Raspberry Piにスピーカーが付けば、音を鳴らせることもできるし、喋れるし、なんでもできそうです。

とりあえず環境構築

github.com

とりあえず、GPIOで接続したSpeaker pHatから音が出るようにしなければなりません。上記の公式レポジトリの情報をもとに、以下のスクリプトを実行。

curl -sS https://get.pimoroni.com/speakerphat | bash

簡単ですね。この状態で、英語を喋らせるだけなら、espeakコマンドを叩けばいいだけで、

espeak shithole

とか、汚い言葉を喋らせることも可能です。ただ、日本語のText-To-Speechには対応していません。そこで、gTTSというPythonパッケージをインストールしてみることに。

sudo pip install gTTS

これで完了。mp3ファイルとしてアウトプットされるので、これをコマンドラインから簡単に再生するために、mpg321もインストールしました。

sudo apt install mpg321

aptもpipも楽チンで最高ですね。

早速実装

gTTSを使う関係上、メインのコードはPythonで書いていきます。

unkou.keikyu.co.jp

上記サイトの運行情報の文字列だけパースして、gTTSでmp3ファイルを生成、それをmpg321で再生するコードを書いてみました。

# coding=utf-8

import urllib2
import os
from gtts import gTTS
from HTMLParser import HTMLParser


class KeikyuUnkoParser(HTMLParser):

    def __init__(self):
        HTMLParser.__init__(self)
        self.flag = False
        self.unko = ""

    def handle_starttag(self, tag, attrs):
        attrs = dict(attrs)
        if tag == "div" and "class" in attrs and attrs["class"] == "unko-panel":
            self.flag = True

    def handle_data(self, data):
        if self.flag:
            self.unko = self.unko + data

    def handle_endtag(self, tag):
        self.flag = False

    def get_unko(self):
        return self.unko.replace("\n", "").replace("\r", "").decode("utf-8")


if __name__ == "__main__":

    url = "http://unkou.keikyu.co.jp/"

    response = urllib2.urlopen(url)

    parser = KeikyuUnkoParser()
    parser.feed(response.read())

    parser.close()
    response.close()

    tts = gTTS(text=parser.get_unko(), lang='ja')
    tts.save("unko.mp3")
    os.system("mpg321 unko.mp3")

unkoとは運行のことです、念のため。

どんな感じで喋るの？

京急運行情報を #speakerphat を使って#raspberrypi に喋らせてみた

A post shared by pokio (@pokiiiiio) on Jan 23, 2018 at 6:50am PST

たまたま、日ノ出町駅で人身事故が起こった後だったので、淡々と運行情報を喋ります。ちょっとぎこちない感じも否めなくはないですが、ちょっと鈍臭くて、逆に可愛いですね。

2018-01-21

micro:bitをMicrosoft Block Editorでちょっぱやコーディングしてみた

ついうっかり購入。

micro:bit

micro:bitとは

Micro:bit Educational Foundation | micro:bit

BBC Micro:bitは1980年代に情報教育のために英国放送協会が開発したBBC Microが各学校で使用されたように11歳と12歳の小学生全員に配布される低消費電力、低コストのシングルボードコンピュータ。（Wikipediaより）

BBC micro:bit バルク商品正規品

メディア:

すごいよなぁ、イギリスって。小さい頃からシングルボードコンピュータをタダであげちゃうんだから。そして、日本のオッサンも楽しめちゃうんだから。ただ、これは子供向けだとおもってナメてると痛い目に遭うのは間違いなくて、かなり奥が深いシングルボードコンピュータです。

CPU

ARM Cortex-M0[1]

プログラミング言語 - Microsoft Block Editor、Microsoft Touch Develop、Python、JavaScript

外部接続 - Bluetooth Low Energy（BLE）、USB

入出力端子 - 3つのI/Oリング、20ピンのエッジコネクター

その他 - 25個の赤色LED、2個のボタン、加速度センサー、磁力センサー

CPUも去ることながら、センサー類、マトリックスLED、BLE、もちろんGPIOも豊富。プログラミング言語は、Python/JavaScript。Scratchみたいなエディタでもプログラミングできます。

micro:bit

本体はこんな感じ。スターターキットを買うと、単4電池2本が入る電池ボックスつき。GPIOもなんかオシャレです。

とりあえず触ってみるしか

まずは手始めにScratchみたいなエディタでプログラミングしてみます。

makecode.microbit.org

流れとしては、Web上のエディタでプログラミングして、バイナリデータをダウンロードして、micro:bitにコピーして完了。すごい簡単で、IDEのインストールが不要。

micro:bit

エディタを開くとこんな感じ。最初だけ（Arduinoのsetup()に相当）とずっと（Arduinoのloop()に相当）に、左のカラムから色んなブロックをドラッグアンドドロップしてプログラミングしていくスタイル。

micro:bit

ためしに、POKIOという文字列をマトリックスLEDに表示させてみます。プログラミング自体はこんな感じで終了。簡単すぎます。

POKIO

A post shared by pokio (@pokiiiiio) on Jan 20, 2018 at 6:33am PST

実際にコンパイルして、micro:bitに流し込むとこんな感じ。POKIOがスクロールしてますね。そして簡単。何度も言いますが簡単すぎます。

ただ、侮ることなかれ

micro:bit

これ、GPIOはもちろん、スピーカーの制御やLEDの制御、センサー類の制御もきめ細かく設定・プログラミングできます・・・。これは奥が深いぞ！深すぎるぞ！

2018-01-18

PaPiRus Hatで日本語を表示するためのスクリプトを作りました

日本語が表示できれば、あとはなんでもできる！

StringToPngForPapirus

前回まで

ノリで買ってしまったRaspberry Pi向けの電子ペーパーHAT、PaPiRusと遊んでいました。

relativelayout.hatenablog.com

せっかくなので日本語をもっと表示させたいし、長文の場合は自動で改行してほしいし、やりたいことはいっぱいあるものの、APIではそういったかゆいところに手が届く感じではなかったので、今回は自分でスクリプトを組んでみました。

StringToPngForPapirus

まんまな名前ですが。

github.com

Pythonのスクリプトです。フォントは再配布可能なIPAフォントを使っています。好きなフォントを使い方は良い感じに直して使ってくださいませ。適当に文字がセンタリングされた画像が作れます。もちろん日本語もイケます。

良い電子ペーパーライフを

ちょっとふざけた文字を表示させてるところを嫁にバレてしまい、生きていくのが若干恥ずかしいです。

StringToPngForPapirus

2018-01-16

Raspberry Pi + Node-RED + PaPiRus Hatで作った京急の種別幕をアップデートした

（ちょっと更新しました）

更に改造。

Raspberry Pi PaPiRus 京急

前回は決め打ちの画像を表示させていました

relativelayout.hatenablog.com

これだと、好きな文字が表示できないのでちょっとアレでした。今回はさらに、動的に画像をPythonで作って、それをPaPiRusに貼り付けられるようにしました。

PILで画像をつくる

動的に画像を作りたかったので、PythonとPIL(Pillow)を使って実現しています。

# coding=utf-8

import sys
from PIL import Image, ImageDraw, ImageFont

# 電子ペーパーのサイズ
imWidth = 264
imHeight = 176

# デフォルトの表示
text = u"快特"

# 引数で文字列が指定されたら、それを表示する
if len(sys.argv) >= 2:
    text = sys.argv[1].decode('utf-8')

# 画像データのベースを作成
im = Image.new("RGBA", (imWidth, imHeight), (0,0,0,255))

# フォントとサイズを指定
w = 0
h = 0
fontSize = 80;
font = ImageFont.truetype('./k6ura.ttf', fontSize, encoding='unic')

# 電子ペーパーの横幅からはみ出す場合はフォントサイズを小さくする
while 1:
    w, h = font.getsize(text)
    if w < imWidth:
        break
    fontSize = fontSize - 2
    font = ImageFont.truetype('./k6ura.ttf', fontSize, encoding='unic')

# 文字列を書き込む
d = ImageDraw.Draw(im)
d.text(((imWidth - w)/2, (imHeight - h)/2), text, font=font, fill=(255,255,255,255))

# ファイルとして出力する
im.save("shubetsu.png", "PNG")

フォントはこちらのサイトから拝借しています。

フォント/かなえ食堂

あとはこの画像をpapirus-drawでセットするだけ。

どんな感じで動く？

#raspberrypi と #papirus による #京急 #種別幕、ようやく #エアポート急行に対応。 https://t.co/hhM7MKo87w pic.twitter.com/4T1BSj9aQA
— ポキオ (@pokiiio) 2018年1月16日

最高です。

ゾクゾクするやつ https://t.co/BvVZfIHHgj pic.twitter.com/QiiYmRJ0W4
— ポキオ (@pokiiio) 2018年1月16日

ウホッウホッ！

Androidのメモとか

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

micro:bitの加速度センサーの値をWeb Bluetooth APIで読み取ってみる

よっ、Web Bluetooth API！

まずはmicro:bit側のプログラミング

HTML側のプログラミング

さっそく動かしてみます。

micro:bitのBluetooth機能をJavaScriptブロックエディタでフルで使えるようにする

奥が深いmicro:bit

初期設定では非表示となっている

micro:bitで京急のドレミファインバーターを奏でさせてみた

ちょっと前に買ったmicro:bit

ドレミファインバーターとは？

どこでもドレミファインバーター

出発進行

Raspberry Pi + Speaker pHat で京急の運行情報を喋らせてみる

ノリで買ったSpeaker pHat

とりあえず環境構築

早速実装

どんな感じで喋るの？

micro:bitをMicrosoft Block Editorでちょっぱやコーディングしてみた

micro:bitとは

とりあえず触ってみるしか

ただ、侮ることなかれ

PaPiRus Hatで日本語を表示するためのスクリプトを作りました

前回まで

StringToPngForPapirus

良い電子ペーパーライフを

Raspberry Pi + Node-RED + PaPiRus Hatで作った京急の種別幕をアップデートした

前回は決め打ちの画像を表示させていました

PILで画像をつくる

どんな感じで動く？