雑食エンジニアの気まぐれレシピ

日ごろ身に着けた技術や見知った知識などの備忘録的なまとめ．主にRaspberry Piやマイコンを使った電子工作について綴っていく予定．機械学習についても書けるといいな．

着脱可能なhapStakケースを作る【3Dプリンタ】

hapStakデジタル版にはMDFのケースが付属しているのですが，かなりギチギチなつくりになっており，一度組み込むと取り外すのが非常に大変です．

前回，牽引力錯覚を引き起こすことに成功しました(Link)が，これを試すためには振動アクチェータだけを取り出して指でつまむ必要があります．

通常の振動を楽しむ際にはケースがあったほうが便利なので，3Dプリンタを使って振動アクチェータを取り外し可能なケースを作成しました．

f:id:shikky_lab:20211129082401j:plainf:id:shikky_lab:20211129082353j:plain
作成したhapStakケース

続きを読む

hapStakで牽引力錯覚を引き起こす

触覚インターフェース hapStak M5Stack

前回の導入編(Link)に引き続き，hapStak(Link)についてのエントリです．

今回はこのデバイスを買った目的である「牽引力錯覚」を試してみます．
・・・おそらく聞き慣れない言葉かと思いますが，下のようにデバイスを持つ人に
「特定の方向に引っ張られているかのような錯覚」
を引き起こす効果のことを指します．
www.youtube.com
動画で見ても疑念が晴れないかと思いますが，体験してみると想像以上に強く牽引力を感じるのでびっくりします．

今回hapStakを使えば実現できるのでは？と思い，早速試してみました．


・・・やはり動画では微塵も伝わりませんが，はっきりと牽引力を感じています．本当です！

はたしてこの不思議な現象はどうやって引き起こしているのか，実装方法について書いていこうと思います．

続きを読む

PlatformIOでhapStak開発

M5Stack hapStak 触覚インターフェース

前々からハプティクス系に興味があったのですが，ちょうどよいデバイスを見つけたので購入しました．
触感デバイス開発/体感モジュール“hapStak” | Bit Trade One, LTD
Foster電機さんのFOSTER ACOUSTICHAPTIC®-639897というアクチェータを組み込んだ触覚開発デバイスです．なんとこのアクチェータは，かのPS5のコントローラ"DualSense"に搭載されているアクチェータの姉妹型番なのです！
このデバイスで何ができるのかについてはサンプルデモを実装した下記が分かりやすいかと思います．
ms-my.facebook.com

今年10月に発売したばかりで，まだ情報が出そろっていなさそうなので，色々手探りしながらその過程を残していければと思います．
(故に認識違いも多いかもしれません．お気づきの方はご指摘いただけると幸いです．)

まずは，PlatformIOでサンプルコードを動かすまでの流れを残しておきます．

f:id:shikky_lab:20211123160215j:plain
hapStakとM5stack Atom

続きを読む

【M5StickC Plus】UIFlowのRemote機能で使用しているURIを取得する

M5Stack

タイトルにM5StickC Plusってつけてますが，多分どのM5シリーズでも一緒．

ひょんなことからインターネット越しにM5Stickを連携させたいということになって，少し調べてました． (※今回の要件はセキュリティ度外視)

で，UI-FlowのRemoteという機能を使うと簡単にできそうということが分かったんですが，少し引っ掛かったところがあったのでまとめました．

結論としては．

  • Remote機能を使うとインターネット越しに(=同一ネットワーク外からでも)アクセスできる
  • アクセス用のRESTはapi.m5stack.comに置かれており，完全なURIはパケット解析しないと得られない？
    • ⇒追記：ブラウザの開発モードから通信キャプチャすると簡単に取得できるという情報を頂きました．感謝！

以下，ここに至るまでの顛末です．

続きを読む

【雑メモ】ReactでUI上見えている要素がHTML上では存在しない謎現象

React 雑メモ

状況

React testing library + JESTでユニットテストを書いていたところ，ある項目がgetByTestIdで取得できなかった． よくよくページをインスペクタで見てみると，UI上は表示されているdivが，HTML上では表示されていないという現象が起こっていた．

f:id:shikky_lab:20210509040953p:plain
本来MUIBOX-root-450の内部には3つのdevがある(UI上にも表示されている)が，インスペクタでは表示されない

原因

3つ目のdiv(Box)は以下のようにアロー形式の即時実行関数(IIFE)で条件分岐していたが，記法が間違っていた．

Before

< Box textOverflow="ellipsis" whiteSpace="nowrap" overflow="hidden" data-testid="baseform-posted">
{() => {
    if (props.videoInfo.posted == null) {
         return "";
     }
      return props.videoInfo.posted.toLocaleString();
   }}
</Box>

正しくはこちら

After

< Box textOverflow="ellipsis" whiteSpace="nowrap" overflow="hidden" data-testid="baseform-posted">
{(() => {
    if (props.videoInfo.posted == null) {
         return "";
     }
      return props.videoInfo.posted.toLocaleString();
   })()}
</Box>

アロー形式の即時実行関数全体を()で囲み，その後の()で実行する必要があった． これによりdivの数が見た目通り3つ表示されるようになった．

f:id:shikky_lab:20210509042111p:plain
UIの見た目通り3つのdivが表示されている．

メモ

おそらくBeforeの状態は関数定義しかしていない状態のため，renderの際に何らかの形で(しかもインスペクタがハンドリングするより後に)呼び出されたのではないかと推測している．

なおJSX内部で即時関数を呼ぶのはパフォーマンス的に良くないが，大抵そこまで気にするほどではない，との噂．
(下記リンクの"Nested ternary operator"の章にて)．

5 common practices that you can stop doing in React - LogRocket Blog

Metabase+NatureRemoで部屋環境を可視化する【プロト実装編】

スマートホーム Go言語 Omni Dashboard RaspberryPi

前回，Go言語とRaspberryPiの環境構築の話を書きました．
shikky-lab.hatenablog.com

実はこれが今回の話に繋がるのですが，Go言語+ラズパイで部屋環境(温度，湿度ほか)の可視化にチャレンジしています．
とはいえポイントはそちらではなく，今回タイトルに挙げたMetabaseと，温湿度計を一応内部に備えているNatureRemoになります．

まだまだ未完成なのですが，ひとまずプロト実装が動いたので，その内容について書いていきたいと思います．

f:id:shikky_lab:20210131223648p:plain
部屋の温湿度をMetabaseで可視化した様子

続きを読む

Go言語+RaspberryPiをWindowsのVSCodeで開発する

RaspberryPi スマートホーム Go言語

室内の環境把握用にサーバを立てようと思い立ったんですが，せっかくだから何か新しいコトをやろうということで，Go言語を導入してみることにしました．

その際にやったことを備忘録がてら整理しておこうかと思います．

続きを読む