メモ

Grove Mech Keycap をobnizとつなげるメモ

Posted on by seigo

Grove Mech Keycap をobnizとつなげるメモです。

Grove Mech Keycap

Grove Mech Keycapとはこういうものです。私はスイッチサイエンスで購入しました。

GROVE – キートップ付きメカニカルキー – スイッチサイエンス

image

これらとGroveケーブルが入ってました。

image

台形の傾斜が合うようにつなぎます。ぐっと押し込む感じ。

image

できました。

中身の作り

Grove Mech Keycapはサイトを見てみるとこの様ようになっています。

Grove – Mech Keycap – Seeed Studio

image

こちらはWikiを引用してます。

Grove – Mech Keycap – Seeed Wiki

LED点灯部分はNeoPixelなWS2812で、ボタン部分はシンプルなデジタル入力です。

こちらを obnizにつなぎます

image

Seeed Studio 110990210 Grove 4ピンコネクタ – ジャンパーピン変換ケーブル(5本入り) のケーブルを使ってつなぎます。

image

ピンは、

  • 黒ケーブル
    • grove 0番ピン
  • 赤ケーブル
    • grove 1番ピン
  • 白ケーブル LEDへの指示
    • grove 2番ピン
  • 黄ケーブル ボタン入力判定
    • grove 3番ピン

と、つなぎます。

obnizクラウドでのソースコードはこちらです。OBNIZ_DEVICE_ID は自分のobniz ID入れて使いましょう。

<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>Hello Grove Keycap</h1>
<div id="print"></div>

<script>
  
var obniz = new Obniz("OBNIZ_DEVICE_ID");
  
obniz.onconnect = async function () {
  
  var led = obniz.wired("WS2812", {gnd:0, vcc: 1, din: 2});
  led.rgb(255, 255, 255); // White

  obniz.display.clear();
  obniz.display.print("Hello Keycap");
  
  obniz.io0.output(false);
  obniz.io1.output(true);
  
  obniz.io3.pull("5v");
  obniz.io3.input(function(value){
    console.log("changed to " + value);
    if(value){
      led.rgb(255, 255, 0); // Yellow
    } else {
      led.rgb(0, 0, 255); // Blue
    }
  });
  
}

</script>
</body>
</html>

こちらを動作させ実際に押してみると黄色に変わります。今回はボタン連動していますが、そうじゃなくてもLED部分を独立して変更することも可能です！

image

実際に動く動画です。

うまく操作することができました。

Grove Mech Keycapはキーボードと同じボタン構造なので耐久性も高く押した感覚も楽しく、LEDとの連動もしやすいので、いろいろな現実世界の入り口に使えそうです！

seigo