obnizに複数のGrove Mech Keycap をつけて光り方やボタン感を検証したメモ
obnizに複数のGrove Mech Keycap をつけて光り方やボタン感を検証したメモです。
Grove Mech Keycap をobnizとつなげるメモをベースに、複数のGrove Mech Keycap をつけて光り方やボタン感検証しました。
手に装着したいのでやってみす
最終的に手に装着したいので、今回はそのあたりもやってみます。
3つのGrove Mech Keycapを準備。
100円ショップで買った手袋と、Seeed Studio 110990210 Grove 4ピンコネクタ - ジャンパーピン変換ケーブルを用意します。
手袋の布の目が粗いので結束バンドが通りそうです。
良い感じ！糸で縫い付ける手間が省けます。
まず、obnizにGrove Mech Keycapをつなぎます。（このあと、配線のつなぎ方は無理のかからないように調整しました）
結束バンドで手袋に縫い付けていきます。
続いて、指先まわり。位置合わせに仮づけします。
各指に、もうひとつ結束させて位置を固定します。結構ぐらつくので、次回はもっといいやり方考えよう。
横から見るとこんな感じ。
うまくいきました。
バッテリー袋も装着
手袋にメッシュ状の袋でバッテリーも付けれるようしましょう。
こちらもメッシュ同士でうまくくっつきますね。2点でくっつけました。
バッテリーをUSBケーブルを気にしながら入れてやります。
装着！
動かしてみる
ソースコードはこのようにしました。
LED部分はWS2812なので素直につなぐと2個しか行けないようです。
General Purpose SPIです。spi0, spi1の２つが利用できます。
実際、3つ目につなげるとこのような制約エラーが出ました。
このあたりは、うまくLED配線をSPIを共有にして数珠つなぎにして対応すればうまくいくかもしれません。今後やってみよう。
ということで、ソースコードはこちらです。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@2.0.3/obniz.js" crossorigin="anonymous"></script>
</head>
<body>
<h1>obniz Hand illumination</h1>
<div id="print"></div>
<script>
var obniz = new Obniz("Obniz_ID");
obniz.onconnect = async () => {
var led1 = obniz.wired("WS2812", {gnd:3, vcc: 2, din: 1});
var led2 = obniz.wired("WS2812", {gnd:7, vcc: 6, din: 5});
obniz.display.clear();
obniz.display.print("obniz Keycap Hand!");
obniz.io3.output(false);
obniz.io2.output(true);
obniz.io7.output(false);
obniz.io6.output(true);
obniz.io11.output(false);
obniz.io10.output(true);
obniz.io0.pull("5v");
obniz.io0.input(function(value){
if(value){
led1.rgb(255, 255, 0); // Yellow
} else {
led1.rgb(255, 0, 255); // Red
}
obniz.display.clear();
obniz.display.print("Finger ID 1");
});
obniz.io4.pull("5v");
obniz.io4.input(function(value){
if(value){
led2.rgb(255, 255, 0); // Yellow
} else {
led2.rgb(255, 0, 255); // Red
}
obniz.display.clear();
obniz.display.print("Finger ID 2");
});
obniz.io8.pull("5v");
obniz.io8.input(function(value){
obniz.display.clear();
obniz.display.print("Finger ID 3");
});
}
</script>
</body>
</html>ボタンは3ボタンぶんちゃんと反応します。
動作させてみます。うまく2キーは点灯しました。
たとえば、ピアノを弾くようにすると、押されたときに色が変わります。
通常は上から指で押しますが、逆パターンで何かに触れるとキーが押されるというインタラクションにすると面白いです。
もちろん、ボタンについては3つとも動くので、押すたびに事前にプログラムで指定したFinger IDが表示されます。
ということで、まだ課題はありますが、手袋への装着の試作を通して使用感が見えてきたり、実際に複数つなげることでの制約や解決ポイントが見えてきたので良かったです。
引き続き作ってまいります。