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

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

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タグが付けられた新着投稿

JavaScriptのObject

SN

7/20 17:58



まずObjectとは

JSON形式で書ける変数(みたいなもの)です。←よく分かりません


ソース
var test = {
"aaa" : "bbb",
"ccc" : 0,
"ddd" : {
"eee" : "fff",
"ggg" : "hhh"
}
...

jQueryとJavaScriptの比較

SN

7/20 17:08

既存の古いページに合わせて、素のjavasciriptで頑張っていたら、

「jQuery使いなよ(笑)」って言われました。

ということで、(個人的には基礎を学びたいところもありjavascriptで書いてたんだけど・・・...

Mapを使ってオブジェクトの配列の重複を除外する。【Javascript】

SN

7/20 14:02



背景

バイト中に、mongodbからとってきたオブジェクトの配列から、valueが重複しているものを除きたいという場面がありました。僕がmapとfilterでゴリゴリやっていたのを見たCTOが「(少なくともこのシーンで...

Ext JS のアップグレードやAPI diffに関するページのリンクを並べてみる (Classic)

SN

7/20 13:29

Ext JSフレームワークは複数のメジャーバージョンがリリースされており、サポートが有効な間は最新ブラウザへの対応が継続的に行われます。2018年7月時点では、ver 4, 5, 6 の3つのバージョンに対するサポートが...

JavaScript配列+配列をするとjoin()される

SN

7/20 13:14



JavaScript配列+配列をするとjoin()される

Arrayに+演算子を適用したらどうなるのかという話です。

これにハマった人が嘆いていたので気になって調べました


論よりコード


sample.js
a=[1,2];
b=[3,4];...

for...of を使うなってAirbnbが言ってたから使わないようにしてたら慣れた

SN

7/20 11:31



概要

Airbnb の JavaScript Style Guide を適用する eslint のプラグイン eslint-config-airbnb を入れてコーディングをすると、 for ... of を使うなと怒られる。仕方ないので、map とか forEach とか every ...

(Part 7. Config .eslintrc.json) Startup JavaScript Project with Webpack4, Vue2, Vue-Router, Vuex, Axios, ESLint, Babel, AirBnb

SN

7/20 11:13



.eslintrc.json (DON'T use .eslintrc as file name. See here.)


{
"root": true,
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 2017
},
"env": {
"browser": true,
...

Next.js Tutorial

SN

7/20 10:36



Next.js Tutorial


概要

Next.js を使って以下のことをやりたい場合の Tutorial です。


Server Side Rendering
静的ファイルへの出力



Getting Started

最初にプロジェクト用のファイルを用意します。

...

lodash/rangeを使わずにlodash/rangeみたいなことをする。

SN

7/20 09:22



背景

バイト先でTypescriptのテストを書く必要があって、非同期処理の関数を指定した回数繰り返し行いたい状況が生まれました。なんとなく僕はそういうときlodash/rangeを使って指定した要素数を持つ配列を作...

素数を求める

SN

7/20 07:36



素数のテーブルを作る

javascript で素数を求めるプログラムを書いてみました。特にテクニカルなことはやっていません。小さい数からその倍数を消していくというという総当り方式です。


getsosu.js

// mSos...

Hulu 同時字幕で英語学習

SN

7/20 06:24



Huluで英語字幕と日本語字幕を同時に表示させて英語学習が出来るChrome拡張機能を公開しました。


3秒巻き戻し機能。巻き戻し秒数は設定から変更できます。
再生速度の変更が出来ます。0.2倍速から2.0倍速まで...

ブラウザのタブに時計を表示

SN

7/19 23:59


tab-clock.html
<!DOCTYPE html>
<html>
<head>
<title>tab clock</title>
</head>
<body>
<script>
const element ...

Vue-test-utilsのpropsDataの基本的な使い方

SN

7/19 23:32



Vue-test-utilsのpropsDataの基本的な使い方

最新版はこちらで、Vue.jsのテストの書き方についてのハンドブックを公開させてもらっています。

この記事を読むと


テスト時にコンポーネントをwrapするときの...

JavaScriptに無名関数というものも即時関数というものも構文としては存在しない

SN

7/19 23:23

無名関数とは<おまけで即時関数も>という記事を読んでいると所々引用文になっていた。引用元はどこなのかと探してみたところ、次の記事を見つけた。

JavaScriptで即時関数を使う方法【初心者向け】 | Tech...

配列をシャローコピーに使えるメソッド

SN

7/19 22:36

配列をコピーする方法に

・ディープコピー

・シャローコピー

の2つある。

今回はシャローコピーについて


シャローコピーというのは、コピー元のオブジェクトとコピー先のオブジェクトがメモリ上の同...

GoogleAppsScroptでSlackbotを作る -Slash commandをトリガーに添えて-

SN

7/19 21:12



はじめに

先日、未来大×企業エンジニア 夏の大LT大会というものが函館で開催されまして、その際にGoogleAppsScript(GAS)の便利さを誇示するためにSlackbotを作って紹介したところ、今までのLTで最も好評(個人...

無名関数とは

SN

7/19 20:16



関数とは

同じ処理を定義し何度も使い回しができる形にしたもの。

<script>
function 関数名(){
処理
}
</script>



無名関数とは

関数名なしで関数を定義できるもの。

<script>
...

casperJsを使ってポップアップ画面でファイルアップロードするまで

SN

7/19 20:05



はじめに

casperjsを使ってログイン、ポップアップ画面、ファイルアップロード、までを実施したので、

その時のメモとハマったことをまとめておきます

casperjsインストールからログインまではCasperJSで...

BootStrap4でフロントエンド完結のpassword一致のバリデーションを実現する

SN

7/19 20:01



Bootstrap4公式のページでは、未入力に対するバリデーションはあったけど、パスワード一致のバリデーションはどうしたら実現できるのかの記述がなかったので、自分で作って見ました。
Bootstrap4では、以下のよ...

PWA来てるからカメラアプリ作れるんじゃね?と思ったら失敗した話

SN

7/19 16:18

※2018年7月現在の記事です

PWA使えばフロントエンドの技術だけでスマホアプリが作れるみたいなので、「これでカメラアプリ作ってみよ!」と思って挑戦したけど結局iOS11.4.1の時点ではそれは無理だったみたい...

スマホのブラウザで画像を圧縮してポストする

SN

7/19 16:13



この記事は


スマホのブラウザで画像を圧縮する手順メモです



したかったこと


スマホでブラウザから画像をアップロードさせたかったです
最近の高性能カメラだと画像サイズが大きすぎて非常に重くなってし...

JavaScript:関数を合成する関数

SN

7/19 11:59

前にもやりましたが、今回は違うアプローチで任意の数の関数を合成する関数composeを作ってみます。


二つの関数を合成する

まんまですが:

const compose2 = (f2, f1) => x => f2( f1( x ) );


二個の...

javascriptのepochを使用してsin波をリアルタイムプロットする

SN

7/19 08:44



目的

いろんな関数をリアルタイムプロットする


使ったもの

・epoch (javascriptライブラリ: https://epochjs.github.io/epoch/)

この公式サイトからzipファイルをダウンロードして、その中に含まれるte...

JavaScript のオブジェクトリテラルで重複した要素を全て削除してリストを作る

SN

7/19 02:52



目的

オブジェクトリテラルのあるキーが重複している場合、重複した要素を除外してリストを作りたいと考えました。

それも for loop なしで。




対象のリスト




someKey
value1




1
...


2
...

...

JavaScript のオブジェクトリテラルで重複した要素を一つにまとめてリストを作る

SN

7/19 02:50



目的

オブジェクトリテラルのあるキーが重複している場合、重複した要素を除外してリストを作りたいと考えました。

それも for loop なしで。




対象のリスト




someKey
value1




1
...


2
...

...

LSP4JでLanguage Server Protocol入門

SN

7/18 23:34



Language Server Protocolとは?

Language Server Protocl(LSP)とは、IDEやテキストエディタ―と、プログラミング言語に関連したツール間でやり取りを定めたプロトコルです。これにより、一つの言語サーバーを実...

Node.js でつくる Node.js ミニコンパイラ - 05 : ローカル変数を使う

SN

7/18 23:23



はじめに

「RubyでつくるRuby ゼロから学びなおすプログラミング言語入門」(ラムダノート, Amazon) という本の影響で自分でもミニNode.jsインタープリターを作ってみました。

さらにポッドキャストの Turi...

easingを計算でやってみる

SN

7/18 22:59

CSSアニメーションでも各種JSのライブラリでも、easingはとても簡単にできるようになりましたが、

それらを使わずにJavaScriptで値を計算してやるのも面白いです。

昔ActionAcriptでやっていたことの復習...

Qiita記事解析システムを作ろう その2

SN

7/18 21:26



前回の投稿

Qiita記事解析システムを作ろう その1


概要

 投稿をQiitaの記事をGoogle Cloud Natural Languageに突っ込んでみる。

 サンプル数 1539件

 日時    2018-07-12 17:28:27 ~

 ...

Railsでファイルが選択されたらボタンを有効化する

SN

7/18 20:50



経緯

独学サイトでファイルをアップロードする際にfile_fieldにファイルを選択していない状態でアップロードボタンを押すとエラーになりました。

そもそも、ファイルが選択されてない状態であればボタンを...

PR:bitflyer

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