スマホを最高級電子部品として電子工作に組み込む(加速度編)

スマホを最高級電子部品として電子工作に組み込む(加速度編)

SN

5/26 18:52

前回,スマホを最高級電子部品として電子工作に組み込むで,OpenCVを使ってサーボモータを動かすのを書きました.

好評だったので,今度はスマホの加速度を使ってみたいと思います.


加速度モジュールではなくスマホで加速度を取る利点


キャリブレーションがいらない
無線なので,電子回路から離れた場所の加速度を取ることができる
精度が段違い
サンプリング数も段違い


どうやってスマホの加速度を使うか については,前回と同じくobnizを使って,HTML経由で加速度を取ります.

詳細はこちらの公式サイトを見てください

obniz.io


作ったもの

せっかくなので,上記の利点を最大限活用できるものがいいですよね.

リモートで加速度を使うもの・・・そうだ,ラジコンにしよう! 

というわけで,iPhoneの加速度をインプットにしたラジコンを作りました.

これを作るのに書いたコードがたったの1時間/60行程度で作れちゃいました

(OpenCVよりよっぽど簡単でした)




材料

IMG_0020.JPG


iPhone
obniz

モーター+タイヤ * 2
ダンボールの切れ端
モバイルバッテリー



作り方


ハードウェア

回路は回路図がいらないぐらい,ただただシンプルにモータとobnizをつなげるだけです



本体は簡単にダンボール工作で作りました.

ハサミで切れ目を入れて挟むだけの簡単工作です





タイヤを両面テープでくっつけるとこうなります.

IMG_4911.JPG

obnizがだらんとしているのが嫌だったので,obnizを挟む切れ目も入れて挟んでいます

モバイルバッテリーはお好きなところにおいてください


ソフトウェア

まずいちばん大事な,加速度を取るところですが,たった3行でできます.

カメラのときとは段違いですね

window.addEventListener("devicemotion", function (event1) {
let x = event1.accelerationIncludingGravity.x;
}


これで加速度が変化したときに,関数が呼ばれて加速度の値を取得できます.

それに応じてモーターを動かすのがこちら

motorL = obniz.wired("DCMotor", {forward: 0, back: 1});
motorL.power(100)
motorL.move(true);


obnizのどのピンにモーターがつながっているか設定して,あとはpowerとmove関数で,速度と方向を指定したら動きます.

あとは,X軸Y軸の加速度に応じてパワーと方向を変えるだけです.

今回はiPhoneを前後に傾けると前進・後退,左右に傾けたら回転をするようにしました.

HTML全体はこうなります

<html>
<head>
<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@1.3.0/obniz.js" crossorigin="anonymous"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>obniz robot controller </h1>
<div id="print"></div>

<script>

let obniz = new Obniz("2580-0064");
let motorL, motorR;
let threshold = 1, maxAccel = 5;

obniz.onconnect = function () {
motorL = obniz.wired("DCMotor", {forward: 0, back: 1});
motorR = obniz.wired("DCMotor", {forward: 10, back: 11});
};

window.addEventListener("devicemotion", function (event1) {
let x = event1.accelerationIncludingGravity.x;
let y = event1.accelerationIncludingGravity.y;

if (!motorR || !motorL) {
return;
}
if (Math.abs(y) > threshold) {
let power = Math.min(100 * (Math.abs(y) - threshold) / (maxAccel - threshold), 100);
motorL.power(power);
motorR.power(power);

let direction = y > 0;
motorL.move(direction);
motorR.move(direction);


} else if (Math.abs(x) > threshold) {
let power = Math.min(100 * (Math.abs(x) - threshold) / (maxAccel - threshold), 100);
if (x > 0) {
motorR.power(power);
motorR.move(true);
motorL.stop();
} else {
motorL.power(power);
motorL.move(true);
motorR.stop();
}
} else {
motorL.stop();
motorR.stop();

}

}, true);

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



完成!

OpenCVよりもだいぶ簡単に作ることができました



前回の顔検出と合わせたら,人を追っかけるロボットなんてのも簡単に作れそうです.

音声認識もjsでできるので,「いけ!」って声をかけたら前進とかも作れそうですね!

Qiita - JavaScriptタグが付けられた新着投稿

axiosを利用する本当に最低限のメモ

SN

9/23 10:58

コンソールに結果を出せればいいだけ。


axiosのインストール

本家サイトに書いてあるのでそのとおりにやればいい。

cd
mkdir axios_test
cd axios_test
npm install axios



WebだとCDNも利用できるみたい。...

ずぼらによるずぼらのための React Suspense

SN

9/23 10:17



この記事について

もうすぐ登場しそうな次期 React 17 の新機能 Time Slicing と Suspense を心待ちにしてる人、挙手して!

僕もその1人ですが、ネットサーフィン(死語?)してたら Building a Polyfill...

React 360のHello WorldをMac環境で動かしてみた

SN

9/23 05:49

ReactもVR向けのライブラリを提供しているとのことで、早速さわってみました。

参照:https://facebook.github.io/react-360/docs/setup.html

環境:Mac


インストールとセットアップ

npm install -g r...

UdemyでPWA入門をした

SN

9/23 01:29

クリエイティブ寄りなWeb制作会社でも、Progressive Web Apps(以下、PWA)の対応を行う案件が増えてきたようです。

弊社では、Nuxt.jsで開発する案件が多く、PWA導入の際は「pwa-module」を使用しているようで...

JavaScript正規表現について

SN

9/22 23:06



はじめに

この記事は自分用のメモです。

もし、のぞいてくださる人がいらしたら、みづらい部分があれば、どんどん指摘してください!


正規表現について

◼︎正規表現を利用するケースは主に3ケース

...

jQueryのattr()で属性をセットしたら、一括でvalue値が設定される。

SN

9/22 22:40

自分用のメモ。

やりたかった処理は、jQueryでDOM要素を取得したら、一つの要素ごとにhref属性のvalue値を入れ替えたかった。

jQueryのattr()を使用した結果、取得したDOM要素全てのvalue値が入れ替わってしま...

HTML + CSS + JSでエモいタイマー作り

SN

9/22 22:23

ブラウザ上で動くタイマーを作る機会があったのでここで紹介します。


つけた機能


EnterキーでStart/Stop
LキーでLapを表示
Rキーでリセット(すべて0に戻す)



使ったやつ


HTML5
CSS3
JavaScript


あとBoo...

現在使っているNuxt.jsのバージョンの調べ方メモ

SN

9/22 21:44

package.jsonでlatest記載しているとnuxt.jsのカレントバージョンが分からんなぁと思ったのでメモ


package.json
"dependencies": {
"nuxt": "latest"
},



色々な記事見てるとlatest表記推奨ってのもあ...

React + styled-components で CSS の transition を使う

SN

9/22 19:25

React + styled-components を触っている中で、スライドするボックスをどう作るかを考える機会がありました。

そこで、CSS の transition プロパティを、React + styled-components でどう使うかを調べてみたの...

Blender から GLTF を出し、 Three.js で使うまでの覚書 (アニメーション編1、ずん子さん編)

SN

9/22 19:01

Blenderは、GLTF(2.0)を出せます。

Three.jsは、GTLF(2.0)を、読めます。

以上。めでたしめでたし。

ということで、モデルメッシュ編の続きとして、アニメーション編・・の、その1です。

というかコレを...

ReduxでAPIの通信の状態を共通で扱うTips(feat. typescript-fsa)

SN

9/22 15:29

APIコールが発生する処理を行った時にローディング中かどうかを示す loading なり fetching なりのフラグを用意すること、結構あると思います。これを様々なActionごとに逐一準備するのだるいのでまとめて用意す...

javascriptの日本語入力ハンドリングについてのメモ

SN

9/22 15:27



日本語入力中であることを知る

日本語入力中はkeypressイベントが発火しないので、keypressイベントが発火していなかったときのkeyupイベントを日本語入力中とみなすことができる。

(keyupイベントはkeypr...

JavaScriptでクリーンアーキテクチャはどうすればいいのか(Repository編)

SN

9/22 13:16



Repositoryとは?


永続されるべきデータを取得するためのインタフェース

依存関係逆転の話はよくわかってない(後回し)
ひとまず、以下のLaborRepositoryから。


window.addEventListener("DOMContentLoaded"...

知らないとバグになる、JavaScriptがクセ者だと思う10の仕様

SN

9/22 07:26

JavaScriptって、動きが想定外な時ってありませんか?

思い込みで動かしていて、なんかバグが出ていると思うと実はJavaScriptの仕様だったということがいくつかあります。

「JavaScritpめ!」と言ってしまい...

本当にSSRする必要があるのか考えてみた話

SN

9/22 03:18



まえがき

今回タイトルにしたSSRというのは、Server Side Renderingのイニシャルで、広義にはテンプレートエンジンを用いてサーバーサイドでHTMLを生成する手法も含まれるとは思いますが、以下説明しているSSR...

FizzBuzzするものをKnockout.jsで作ってみた

SN

9/22 00:02



はじめに

フロントエンジニアとして働き始めて約半年経って、復習&自力でどこまで書けるのか掴むために、作ってみました。


書いたコード

HTMLのmain部分とJavascript部分だけ。


HTML
<main>
...

HTMLからAPIGatewayを呼出し、レスポンスを表示

SN

9/21 19:38

エヌシーアイ総合システムのmizu-ponです。

今回はHTMLからSDKを用いてAPIGatewayを呼出すまでの話です。


今回使用するAPIGawewayの仕様


APIGatewayのメニューからSDKをダウンロードできます。



適当なフ...

riotでjQueryを使わない複数行の三点リーダの実装

SN

9/21 19:21



背景

長い文字列は末尾を三点リーダに変換したい

例えばECサイトとかで商品が一覧で並んでいるときに、

長ーい商品名のアイテムだけ高さがずれたらダサい。

僕.「cssだけでできる?」

G .「IEは対...

Promiseでネストが深くなるのを防ぐための方法(やや黒魔術)(の提案)

SN

9/21 18:08



概要


Promiseは便利だが、うまくモデリングしないと(時にうまくモデリングされていても)、深いネストとアロー関数の海におぼれてしまうことがある
コンストラクタのresolveとrejectへの参照を保管しておく...

JavaScriptでクリーンアーキテクチャはどうすればいいのか(initializer編)

SN

9/21 15:23



initializerとは


クリーンアーキテクチャにおけるアプリの初期化部分


以下、持続可能な開発を目指す ~ ドメイン・ユースケース駆動(クリーンアーキテクチャ) + 単方向に制限した処理 + FRP より引用




...

Rails5/webpacker/ECMAScriptメモ

SN

9/21 12:22

rails5でwebpackerを使ったりviewに直接jsを書いたりしてます。どこでどの仕様までのjsを使っていいのかいつも迷うので纏めておくもの


ECMAScript


実装であるjavascriptに対し、言語仕様を指してECMAScriptと...

JavaScriptでクリーンアーキテクチャはどうすればいいのか(Presenter編)

SN

9/21 11:09



Presenterは?


View=Webページ(html)一歩手前の「Interface Adapter」


Viewを動的に書き換える 役割

つまり、引数の入力値を最終的にDOMへ


Viewへの操作は基本、idに紐付いたNodeListオブジェクト


idさ...

自分用: tscのtarget optionで排出されるClass形式纏め

SN

9/21 10:45



はじめに

npmパッケージで提供されたes6形式のclassをextendsした際にハマったのでこの辺を整理してみようと思う


ソースファイル

class Base {
}

class SubClass extends Base {
}



target es6 &&am...

始めよう React(基礎編)! Part 1 - React とは

SN

9/21 09:36

これからReactについて、書いていく予定です。

毎週1〜2回投稿する予定になります!

興味がある方是非ご覧下さい!

本章はReactの基礎を紹介して行きます。

よろしくお願いします。


Reactとは

...

Storyblokのdocs翻訳チャレンジその14!!!

SN

9/21 00:30



コンテンツデリバリAPI

コンテンツデリバリAPIはStoryblokのコンテンツにアクセスする最も簡単な方法です。

以下の言語について、コードのスニペットを容易しました。これを見ればどれほどシンプルかが分かる...

適当に継承

SN

9/21 00:29

適当に書いたAnimalクラスを継承して適当に移植したサンプル。


HSP
#runtime "hsp3cl"
#cmpopt varinit 1

#module Animal _name,virtualBark,isGrow
#define super(%1) \
_name=%1 :\
vir...

Storyblokのdocs翻訳チャレンジその13!!!

SN

9/20 23:56



データソースエントリ


複数のデータソースエントリを取得する


エンドポイント

GET /v1/cdn/datasource_entries



パラメータ




名前
説明




token(必須)
publishedだけ欲しければpublicトークン
d...

JAMstack - クライアントサイドJavaScript、再利用可能なAPI、予めビルドされたマークアップによるモダンなWeb開発アーキテクチャ

SN

9/20 23:35

JAMstackの概要を意訳しました。

誤りやより良い表現などがあればご指摘頂けると助かります。

原文: https://jamstack.org/



「スタック」について言及する際、OS、特定のWebサーバ、バックエンドのプロ...

JavaScript Tips: 数値・文字列を固定長にフォーマット

SN

9/20 22:20

固定長にフォーマットしたいことがある。例えばこんな感じ:

" hello"
" world!"


C言語では sprintf, python では string.format が使えるんだけど、JavaScript の場合は多分なくて、外部ライブラリを使...

1週間でNext.js とReact.jsでSPAを作って公開するまで

SN

9/20 22:12



作ったもの

日本人起業家のおすすめされている本は日本語で検索するとよく出てきますが、海外の方がおすすめされている本って日本語で検索してもあまりヒットしませんよね ....

そこで私が海外のサイトで...

PR:bitflyer

bitFlyer ビットコインを始めるなら安心・安全な取引所で