M5Stackでおみくじを作ってみた

はじめに

年のはじめの運試しとして毎年神社でおみくじを引いています。

そんなおみくじをM5Stackで実現したので本記事にて紹介します。

完成品

あけましておめでとうございます。
新年の運試しをしたいと思い、おみくじを作りました。本体を振ることで結果が変わります。M5Stack Grayを用いて実現しました。 pic.twitter.com/E434VYYFcH

— クラクス (@kuracux) 2018年12月31日

動画の通り、1回目は吉、2回目は中吉という結果が得られました。好きなだけおみくじが引けて良いですね。

開発環境

• Windows 10

• Arduino IDE

準備物

• M5Stack Gray

M5Stack Gray（9軸IMU搭載）

• microSDカード

旧モデル【Amazon.co.jp限定】Transcend microSDHCカード 16GB Class10 UHS-I対応 Nintendo Switch / 3DS 動作確認済 TS16GUSDU1PE (FFP)

原理

表示する画面分の画像を用意して、ボタン操作に応じて画像を切り替えております。
M5Stackの画面サイズは320×240ですので、ペイントにて画面サイズを指定後、必要となる画像を作成しました。

今回は、以下の7枚の画像を使用しております。
(フォルダ構成およびファイル名は下記のスケッチ例をもとに命名してください)

スケッチ例

初期値をランダムで設定し、振ることでその値が変わり、表示される画像も変わります。
振った際の処理についてはこちらの記事をご覧ください。
kuracux.hatenablog.jp

#include <M5Stack.h>
#include "utility/MPU9250.h"
MPU9250 IMU;

bool leftFlag = false; //左に動いたことを保持するフラグ
bool rightFlag = false; //右に動いたことを保持するフラグ

bool omikujiFlag = false;

int th = 80;
int count;

void setup(){
  Serial.begin(115200);
  M5.begin();
  Wire.begin();
  M5.Lcd.setBrightness(50);
  M5.Lcd.drawJpgFile(SD, "/pictures/home.jpg");
  byte c = IMU.readByte(MPU9250_ADDRESS, WHO_AM_I_MPU9250);
  IMU.calibrateMPU9250(IMU.gyroBias, IMU.accelBias);
  randomSeed(analogRead(0));
}

void loop(){
  if(M5.BtnA.wasPressed()){
    omikujiFlag = true;
    count = random(0,5);
    M5.Lcd.fillScreen(BLACK);
    M5.Lcd.drawJpgFile(SD, "/pictures/omikuji.jpg");
  }else if(M5.BtnB.wasPressed()){
    if(omikujiFlag){
      resultOmikuji();
      omikujiFlag = false;
    }
  }else if(M5.BtnC.wasPressed()){
    omikujiFlag = false;
    M5.Lcd.fillScreen(BLACK);
    M5.Lcd.drawJpgFile(SD, "/pictures/home.jpg");
  }

  if(omikujiFlag){
    shake();  
  }
  M5.update();
}

void resultOmikuji(){
  M5.Lcd.fillScreen(BLACK);
  String s = "/pictures/"+String(count)+".jpg";
  M5.Lcd.drawJpgFile(SD, s.c_str());
}

void shake(){
  if (IMU.readByte(MPU9250_ADDRESS, INT_STATUS) & 0x01){  
    IMU.readGyroData(IMU.gyroCount);  // Read the x/y/z adc values
    IMU.getGres();
    IMU.gz = (float)IMU.gyroCount[2]*IMU.gRes;
  } 
  IMU.delt_t = millis() - IMU.count;
  if (IMU.delt_t > 100){
    int accel = (int)(IMU.gz);
    if(accel < -th){
      if(leftFlag){
        //左に振る→右に振るの後の処理
         count = (count + 1) % 5;
      }else{
        rightFlag = true;
      }
    }else if(accel > th){
      if(rightFlag){
        //右に振る→左に振るの後の処理
        count = (count + 1) % 5;
      }else{
        leftFlag = true;
      }
    }else{
      leftFlag = false;
      rightFlag = false;
    }
    IMU.count = millis();
  } 
}

所感

• おみくじを振ってる感があまりない

理由の1つとしては振った時のジャラジャラ音がないことが考えられます。よりリアリティを求めるのであれば、実際の体験に近づける工夫をしようと思いました。

• 振った際に値が変わる処理はなくても良い

おみくじ開始時にランダムで値が決まり、なおかつユーザがその値を知らないのであれば、振る動作によって値が変わる処理を入れてもあまり意味はありません。
確かに振った際の動作で結果が変わるという処理は「おみくじらしさ」があるかもしれませんが、あくまでそれは開発者側の視点であって、ユーザの視点で考えると不要だと感じました。

おわりに

今回はM5Stackでおみくじを作りました。

個人的には、このおみくじではまだまだM5Stackを活かしきれていないなと感じておりますので、その辺りも考えた上で作り上げていければいいなと思います。

クレーンゲームにハマって3ヶ月が経ったのでその振り返り

はじめに

YouTubeにて様々なクレーンゲームの動画を見て「私もあんな風に取れるようになりたい！」と思い、この3ヶ月で主にフィギュアとぬいぐるみをゲットを目指して頑張っていました。

本記事ではその結果と振り返り、そして今後の方針をまとめたいと思います。

前提

• 私はクレーンゲームにハマる以前は片手で数えられるくらいしか景品を取ったことがありません。挑戦自体は何回もしていましたが、景品を取れたことはほぼなかったため、「どうやっても取れないんだろうな」と思っていました。

• ゲットすること自体を目標にしていたため、基本的にお金に関してはかなりかかっています。もちろん数百円で取れるケースもありましたが、設定ミス等、運が良い場合がほとんどです。

• 本記事は取り方のテクニックに関しては触れず、振り返りをメインにしたいと思います。クレーンゲームのテクニックはYouTubeにて先人たちの動画がたくさんありますので、そちらを参考にしてください。

結果

• フィギュア：20体

ゲットしたフィギュアたちの一部

• ぬいぐるみ：6体

ゲットしたぬいぐるみたちの一部

• クッション：1個

• かかった金額：約5.6万円+α（フィギュアとぬいぐるみで平均約2千円、クッションで約4千円）

振り返り

• 諦めない方針は良かった

元々クレーンゲームにあまり良い思い出がなかったため「どうやっても取れないだろうな」と思っていましたが、「お金をかければ取れる！」と思えるようになったのは大きいと思います。どうしても無理な場合（アームパワーがとても弱い等）を除き、基本的にはお金を気にせず遊んでいました。取れることで自信になり、次も頑張ってみよう！と思えたため、この方針は良かったと思います。

• 最初に決めた取り方を変えないように

「こうやって取るぞ！」と最初に取る方法を決めながらも、途中で「この方法に切り替えよう」と変えてしまい、結果として余分に手数がかかってしまうことが多々ありました。上手な人であれば正しい判断をした上で器用に切り替えることができるのだと思いますが、私は知識や経験が少なく、あまり上手くできなかったため、最初に決めた方法で突き進むほうが良いと思いました。

• もし諦めるならお早めに

アームのパワー等、クレーンゲームの設定によってはどうやっても無理だろうと思うものもあります。そういった場合はどうしても欲しいものを除き、基本的に諦めたほうが良いです。
この出費を抑えることが特に重要だと思っています。かかった金額の+αにあたりますが、基本的には損失です。設定の確認に手間取る、または難しい設定なのに出来ると判断して突き進んでしまうと、諦めたくてもここまで使っちゃったし・・・と思って、なかなか諦められなくなり、結果としてかなりのお金を使うことになってしまいます。諦めることには勇気がいるため、早い段階ですっぱりと諦められるように、なるべく最小手数で、そして正確に判断できるようにしたいです。

• 経験があまり蓄積されていない

フィギュアであれば橋渡しやリングを引っ掛けるもの、ぬいぐるみであれば３つ爪の確率機等、対象によってある程度のパターンは存在するため、あるケースで使えた方法が別のケースでも使えるといったことは往々にしてあると思います。直感的なものは少しずつ身についているとは思いますが、この時の選択は果たして正解だったのか？別の方法があったのではないか？等を確認し、次の機会に活かすためにも記録として残して振り返るべきだと思いました。

悩み

気づけば多くのフィギュアをゲットしていたため、置き場に困り始めております。本当に欲しいものというよりも、取れそうなものにターゲットを絞っていたこともあり、どんどんと数が増えていきました。メルカリに出品することも考えましたが、送料と手間を考えるとあまりメリットがないように感じております。近くで売れるところを探したほうが良さそうなのですが、あまり詳しくないため、一度調べてみたほうが良さそうかなと思いつつあります。

まとめと今後の方針

この3ヶ月でクレーンゲームに対する心境として「どうせ取れない」から「諦めずに頑張れば取れる」へと変化しました。
しかし、お金をかけまくるというやり方は後々大変なことになってしまうので、「使用金額を減らしつつ、これまで通り取ること」を次の目標として考えています。
そのための今後の方針については以下の2点です。

1. 余分な出費を減らすために、諦める際の判断をこれまでよりも早めにし、無駄な手数をかけないことを意識する
2. クレーンゲームで遊ぶ際には動画を撮り、あとから振り返る

2つ目については、以下のものを購入しましたので、活用していきたいと思います。

【E-COAST】首掛けスマホスタンド スマホホルダー 3-5.5インチ携帯汎用スタンド ペンダント式 ハンズフリー 自撮りツール 携帯便利 アウトドアに最適 (ブラック)

【Rails+devise】サインアップ・パスワード変更画面の入力チェックエラー時のルーティングについて

はじめに

Ruby on Railsにてユーザ認証系の処理を実装する際に使用されるgemとしてdeviseがあります。
github.com

本記事ではサインアップおよびパスワード変更画面にて入力チェックエラーがある際のルーティングについて、発生した問題とその解決方法について記載したいと思います。

問題

サインアップおよびパスワード変更画面にて入力チェックエラーを引き起こすと下記のパスに遷移します。

• サインアップ画面：'/users'
• パスワード変更画面：'/users/password'

遷移後、ブラウザの更新ボタンを押すとエラーが発生します。
原因として、GETメソッドにて上記のパスが定義されていないことがあげられます。

解決方法

route.rbに下記を追加することで、GETメソッド時の遷移先パスを定義します。

devise_scope :user do
  get '/users', to: 'devise/registrations#new'
  get '/users/password', to: 'devise/passwords#new'
end

github.com
github.com

おわりに

ルーティングの設定によるものだったので気をつけようと思いました。
また、下記に使用したバージョンと検証用アプリケーションの構築方法を記載しておきます。
同様のエラーに直面した際の参考になればと思います。

バージョン

• ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-linux]
• Rails 5.2.2
• devise 3.5.3

検証用アプリケーション

こちらの記事を参考に構築しました。「タスク用CRUD画面の作成」の手前までで実施しております。
blog.freedom-man.com

AWS Cloud9でCapybara+Selenium+Chrome設定時のエラーとその対処法について[ Everyday Rails 6章 ]

はじめに

「Rails チュートリアル」にて開発環境としてAWS Cloud9を使っていたことから、「Everyday Rails - RSpecによるRailsテスト入門」を進める際にも継続してAWS Cloud9を利用しています。

railstutorial.jp

leanpub.com

しかし、6章の「JavaScriptを使った操作をテストする」という項目で記載通りにSelenium+Chromeの設定をし、スペックを実行しようとしてもエラーが出てしまい実行することが出来ませんでした。

本記事では、私が直面したエラーメッセージとその対処法を記載したいと思います。

対象

• AWS Cloud9でRuby on RailsおよびRSpecを使用している

• 「Everyday Rails - RSpecによるRailsテスト入門」の6章を進めている途中でエラーによって詰まってしまった人

• 下記、設定は完了している

spec/rails_helper.rbの以下の行のコメントアウトを外している

Dir[Rails.root.join('spec/support/**/*.rb')].each { |f| require f }

spec/support/capybara.rbに以下を記述

Capybara.javascript_driver = :selenium_chrome

Gemfileに'chromedriver-helper'を追加

エラーメッセージとその対処法

その1

Selenium::WebDriver::Error::UnknownError: unknown error: cannot find Chrome binary

Amazon LinuxにChromeが入っていないことが原因だと考えられます。
下記コマンドを実行し、インストールを行ないましょう。

curl https://intoli.com/install-google-chrome.sh | bash

参考
https://www.t4traw.net/blog/2018/03/awsamazon-cloud9環境でheadless-chromeを使う/

その2

Selenium::WebDriver::Error::UnknownError: unknown error: Chrome failed to start: exited abnormally

spec/support/capybara.rbの記述内容を以下のように修正します。

Capybara.javascript_driver = :selenium_chrome_headless

Capybara.javascript_driver = :selenium_chromeでは実際にChromeを開いてテストしますが、AWS Cloud9ではそれが出来ないのだと思われます。
そのため、ヘッドレスモードを使ってテストをするように設定することで解決します。

その3

NameError: uninitialized constant Selenium::WebDriver::Chrome::Options

「::Selenium::WebDriver::Chrome::Options」はselenium-webdriverのバージョン3.4.1にて追加されたため、それ以上のバージョンにしなければなりません。Gemfileのselenium-webdriverのバージョンを3.4.1以上に設定し、bundle installを実行しましょう。

参考
stackoverflow.com

おわりに

今回、AWS Cloud9にてCapybara+Selenium+Chrome設定時に私が直面したエラーとその対処法についてご紹介しました。
同様のエラーに直面した際の参考になればと思います。

NTPサーバから時刻を取得してM5Stackに表示する

はじめに

M5Stackのスケッチ例に「TFT_Clock_Digital」というものがあります。

TFT_Clock_Digital pic.twitter.com/7TpLEJwhfg

— クラクス (@kuracux) 2018年10月7日

デジタル時計のように時刻が画面上に表示され1秒ごとに変化しますが、表示される時刻はコンパイルした時刻が基準となります。
（厳密には違うと思いますが大雑把な認識としてだとお思いください。）

そのため、例えば15:47:00にコンパイルした場合、電源を入れる度に15:47:00がまず表示され、そこから1秒ごとに表示される時刻が変化します。

しかしながら、そのままでは時計としての役割を果たせないため、NTPサーバから時刻を取得して現在の時刻を表示できるものを作成しましたのでご紹介します。

完成品

画面に表示されている文字列の見た目はTFT_Clock_Digitalと同様ですが、こちらは電源ボタンを押して再度起動しても隣の時計とほぼ同じ時刻を表示してくれます。

NTPサーバーから取得した時刻をM5StackのTFT_Clock_Digitalで表示してみました pic.twitter.com/W3zUNAq9F6

— クラクス (@kuracux) 2018年10月3日

開発環境

• Windows 10

• Arduino IDE

準備物

• M5Stack Gray

M5Stack Gray（9軸IMU搭載）

※M5Stackであればどのシリーズ(Basic，FIRE等)でも問題ないと思います。

前提

Arduino IDEによるM5Stackの開発環境の構築が出来ている方を対象としています。

1．下記のスケッチを書き込む

スケッチ例にある「TFT_Clock_Digital」と「SimpleTime」の合わせ技となっております。
以下にそれぞれのスケッチ例がありますので、参考になるかと思います。

• TFT_Clock_Digital

ファイル→スケッチ例→M5Stack→Advanced→Display→TFT_Clock_Digital

• SimpleTime

ファイル→スケッチ例→ ESP32→Time→SimpleTime

#include <M5Stack.h>
#include <WiFi.h>
#include "time.h"

const char* ssid       = "";  
const char* password   = "";

const char* ntpServer =  "ntp.jst.mfeed.ad.jp";
const long  gmtOffset_sec = 9 * 3600;
const int   daylightOffset_sec = 0;


static uint8_t conv2d(const char* p); // Forward declaration needed for IDE 1.6.x

uint8_t hh = conv2d(__TIME__), mm = conv2d(__TIME__ + 3), ss = conv2d(__TIME__ + 6); // Get H, M, S from compile time

byte xcolon = 0, xsecs = 0;

void setup(void) {
  
  Serial.begin(115200);
  M5.begin();
  M5.Lcd.fillScreen(TFT_BLACK);
  M5.Lcd.setTextSize(1);
  M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK);

  //connect to WiFi
  Serial.printf("Connecting to %s ", ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("CONNECTED");

  //init and get the time
  configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);
      struct tm timeinfo;
  if (!getLocalTime(&timeinfo)) {
    Serial.println("Failed to obtain time");
    return;
  }
  //disconnect WiFi as it's no longer needed
  WiFi.disconnect(true);
  WiFi.mode(WIFI_OFF);

}

void loop() {
  
  struct tm timeinfo;
  if (!getLocalTime(&timeinfo)) {
    Serial.println("Failed to obtain time");
    return;
  }
  hh = timeinfo.tm_hour;
  mm = timeinfo.tm_min;
  ss = timeinfo.tm_sec;
  
  // Update digital time
  int xpos = 0;
  int ypos = 85; // Top left corner ot clock text, about half way down
  int ysecs = ypos + 24;

  // Draw hours and minutes
  if (hh < 10) xpos += M5.Lcd.drawChar('0', xpos, ypos, 8); // Add hours leading zero for 24 hr clock
  xpos += M5.Lcd.drawNumber(hh, xpos, ypos, 8);             // Draw hours
  xcolon = xpos; // Save colon coord for later to flash on/off later
  xpos += 29;
  if (mm < 10) xpos += M5.Lcd.drawChar('0', xpos, ypos, 8); // Add minutes leading zero
  xpos += M5.Lcd.drawNumber(mm, xpos, ypos, 8);             // Draw minutes
  xsecs = xpos; // Sae seconds 'x' position for later display updates
    
  if (ss % 2) { // Flash the colons on/off
    M5.Lcd.setTextColor(0x39C4, TFT_BLACK);        // Set colour to grey to dim colon
    M5.Lcd.drawChar(':', xcolon, ypos - 8, 8);     // Hour:minute colon
    xpos += M5.Lcd.drawChar(':', xsecs, ysecs, 6); // Seconds colon
    M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK);    // Set colour back to yellow
  }else{
    M5.Lcd.drawChar(':', xcolon, ypos - 8, 8);     // Hour:minute colon
    xpos += M5.Lcd.drawChar(':', xsecs, ysecs, 6); // Seconds colon
  }
  
  //Draw seconds
  if (ss < 10) xpos += M5.Lcd.drawChar('0', xpos, ysecs, 6); // Add leading zero
  M5.Lcd.drawNumber(ss, xpos, ysecs, 6);                     // Draw seconds
}


// Function to extract numbers from compile time string
static uint8_t conv2d(const char* p) {
  uint8_t v = 0;
  if ('0' <= *p && *p <= '9')
    v = *p - '0';
  return 10 * v + *++p - '0';
}

参考

qiita.com

おわりに

NTPサーバから時刻を取得してM5Stackに表示する方法をご紹介しました。

Wi-Fiに繋がる環境下であればこちらの方が良いと思いますので、ぜひお試しください。

M5Stackとカラーセンサでカラーピッカーとカラーミキサーを作る

はじめに

先日開催されたROHM OPEN HACK CHALLENGE2018の最終審査に関するツイートが私のタイムラインに流れてきました。
open.rohm.com

どの作品も素晴らしいものでしたが、私が特に好きだったものは優秀賞に選ばれた『絵の具カラーピッカー「絵のピック」』でした。

絵の具カラーピッカー「絵のピック」。実世界の色をコピーして絵の具を作ります。絵を描くのが楽しくなりそうなアイテム… #rohc2018 pic.twitter.com/8tgU39tVi4

— 池澤あやか / いけあや (@ikeay) 2018年9月8日

「絵のピック」について簡単に説明すると、カラーセンサで対象の色を読み取り、読み取った色を実際に絵の具を使用して作ってくれるものです。（詳細は下記参照）
open.rohm.com

この作品を見て、私も似たようなものを作りたいと思いましたが、なかなか実現することが難しいため、簡易的に、かつ似たようなことが出来るものをM5Stackとカラーセンサを用いて作りましたのでご紹介します。

完成品

今回作成した機能は2つです。
1つ目の機能は色の読み取りです（カラーピッカー）。こちらはカラーセンサを用いて実現しています。読み取った色をディスプレイに表示しています。

カラーセンサーが届いたのでM5Stackでカラーピッカーを作りました。ボタンを押すことで色を読み取ります。#M5Stack pic.twitter.com/a6S67sOUuy

— クラクス (@kuracux) 2018年9月12日

2つ目の機能は読み取った2つの色を混ぜることです（カラーミキサー）。1つ目の機能を用いて色を2回読み取り、それらを混ぜ合わせた色をディスプレイに表示しています。

カラーセンサーで検出した2つの色を混ぜた結果をM5Stackにて表示してみました#M5Stack pic.twitter.com/PGdVMADs49

— クラクス (@kuracux) 2018年9月13日

開発環境

• Windows 10

• Arduino IDE

準備物

• M5Stack Gray

M5Stack Gray（9軸IMU搭載）

※M5Stackであればどのシリーズ(Basic，FIRE等)でも問題ないと思います。

• カラーセンサ

WINGONEER カラーセンサ色認識モジュールTCS230 TCS3200

• ジャンパーワイヤ（オス-メス）

前提

Arduino IDEによるM5Stackの開発環境の構築が出来ている方を対象としています。

1．M5Stackとカラーセンサを繋ぐ

カラーセンサの接続に関して、こちらを参考に繋ぎました。
nn-hokuson.hatenablog.com

私は以下のようにカラーセンサとM5Stackを繋ぎましたが、M5Stackのピンの仕様について理解できていないのでこれが正しいかは保証できません。ご了承ください。

カラーセンサ	M5Stack
S0	1
S1	16
S2	17
S3	21
OUT	22
VCC	5V
0E	G
GND	G

2．キャリブレーション用のスケッチ例

1.で参考にした記事より引用

センサから得られる値はお使いの環境で多少変化すると思うので、キャリブレーションする必要があります。
白色の紙をセンシングした時のRGB値と、黒色の紙をセンシングした時のRGB値を調べて、whiteRGB、blackRGBの値に代入して下さい。

よって、まずは下記のスケッチを書き込み、キャリブレーションします。こちらも先程の記事内のスケッチを参考にしております。

#include <M5Stack.h>

#define S0 1
#define S1 16
#define S2 17
#define S3 21
#define sensorOut 22

void setup() {
  M5.begin();
  pinMode(S0, OUTPUT);
  pinMode(S1, OUTPUT);
  pinMode(S2, OUTPUT);
  pinMode(S3, OUTPUT);
  pinMode(sensorOut, INPUT);
  
  digitalWrite(S0,HIGH);
  digitalWrite(S1,LOW);
  
  Serial.begin(9600);
}

void loop(void) {
   
  if (M5.BtnA.wasPressed()){
    digitalWrite(S2,LOW);
    digitalWrite(S3,LOW);
    int r = pulseIn(sensorOut, LOW);
    //r = map(constrain(r,blackR,whiteR), whiteR, blackR,0,255);
    delay(100); 
  
    digitalWrite(S2,HIGH);
    digitalWrite(S3,HIGH);
    int g = pulseIn(sensorOut, LOW);
    //g = map(constrain(g,blackG,whiteG), whiteG, blackG,0,255);
    delay(100); 
    
    digitalWrite(S2,LOW);
    digitalWrite(S3,HIGH);
    int b = pulseIn(sensorOut, LOW);
    //b = map(constrain(b,blackB,whiteB), whiteB, blackB,0,255);
    delay(100); 

    Serial.println(String(r) + "," + String(g) + "," + String(b) );
  }
  M5.update();
}

対象物にカラーセンサを当ててM5Stackの左のボタンを押すことでシリアルモニタにRGB値が表示されます。

3．カラーピッカーとカラーミキサーのスケッチ例

下記のスケッチを書き込みます。2.で検出したwhiteRGB、blackRGBにそれぞれ変更してから書き込んでください。

#include <M5Stack.h>

#define S0 1
#define S1 16
#define S2 17
#define S3 21
#define sensorOut 22

int whiteR = 151;
int whiteG = 160;
int whiteB = 120;
int blackR = 14;
int blackG = 14;
int blackB = 11;

boolean flag = false;
int beforeR = 0;
int beforeG = 0;
int beforeB = 0;
int r = 0;
int g = 0;
int b = 0;
int alpha = 128;

uint16_t getColor(uint8_t red, uint8_t green, uint8_t blue){
  return ((red>>3)<<11) | ((green>>2)<<5) | (blue>>3);
}

void setup() {
  M5.begin();
  M5.Lcd.setBrightness(200);
  pinMode(S0, OUTPUT);
  pinMode(S1, OUTPUT);
  pinMode(S2, OUTPUT);
  pinMode(S3, OUTPUT);
  pinMode(sensorOut, INPUT);
  
  digitalWrite(S0,HIGH);
  digitalWrite(S1,LOW);
  
  Serial.begin(9600);
}

void loop(void) {
   
  if (M5.BtnA.wasPressed()){
    beforeR = r;
    beforeG = g;
    beforeB = b;
      
    digitalWrite(S2,LOW);
    digitalWrite(S3,LOW);
    r = pulseIn(sensorOut, LOW);
    r = map(constrain(r,blackR,whiteR), whiteR, blackR,0,255);
  
    digitalWrite(S2,HIGH);
    digitalWrite(S3,HIGH);
    g = pulseIn(sensorOut, LOW);
    g = map(constrain(g,blackG,whiteG), whiteG, blackG,0,255);
    
    digitalWrite(S2,LOW);
    digitalWrite(S3,HIGH);
    b = pulseIn(sensorOut, LOW);
    b = map(constrain(b,blackB,whiteB), whiteB, blackB,0,255);

    Serial.println(String(r) + "," + String(g) + "," + String(b) );
    M5.Lcd.fillScreen(getColor(r,g,b));
  }else if(M5.BtnB.wasPressed()){
    M5.Lcd.fillScreen(getColor(r*((double)alpha/255)+beforeR*(1-(double)alpha/255),g*((double)alpha/255)+beforeG*(1-(double)alpha/255),b*((double)alpha/255)+beforeB*(1-(double)alpha/255)));
  }
  
  M5.update();
}

左のボタンを押すことで色の読み取り、2つの色を読み取った後に真ん中のボタンを押すことで2色を混ぜた後の色がディスプレイに表示されます。

スケッチ作成時に参考にしたもの
qiita.com

oshiete.goo.ne.jp

おわりに

M5Stackとカラーセンサでカラーピッカーとカラーミキサーを作る方法をご紹介しました。

現実世界に存在する色を読み取ってディスプレイに表示できるだけでも楽しいので、良ければ試してみてください。

M5Stack Grayを振ってディスプレイ上の画像を切り替える

はじめに

M5Stack Grayには加速度、ジャイロ、磁気を計測可能な9軸センサ、MPU9250が搭載されています。

本記事ではジャイロセンサを用いて、M5Stack Gray本体を振ることでディスプレイ上の画像を切り替える方法をご紹介します。

完成品

M5Stackを振るとディスプレイに表示されている画像が切り替わるようにしました。 pic.twitter.com/HFKQrfQ64g

— クラクス (@kuracux) 2018年9月25日

開発環境

• Windows 10

• Arduino IDE

準備物

• M5Stack Gray

M5Stack Gray（9軸IMU搭載）

※ M5Stack Basicではジャイロセンサを搭載していないため実現できません。

また、M5Stack FIREについてはMPU6050（三軸加速度センサ・三軸ジャイロセンサ）が搭載されているため、同様のことができるとは思います。

しかしながら、私がM5Stack FIREを所持しておらず動作確認が出来ないため、本記事の対象外とさせていただきます。

• microSDカード

【Amazon.co.jp限定】Transcend microSDHCカード 16GB Class10 UHS-I対応 Nintendo Switch / 3DS 動作確認済 TS16GUSDU1PE (FFP)

前提

Arduino IDEによるM5Stackの開発環境の構築が出来ており、M5Stackのスケッチ例にあるJpegDrawとMPU9250BasicAHRSの動作確認が済んでいる方を対象としています。

以下にスケッチ例がありますので確認してください。

• JpegDraw

ファイル→スケッチ例→M5Stack→Advanced→Display→JpegDraw

• MPU9250BasicAHRS

ファイル→スケッチ例→M5Stack→Modules→MPU9250→MPU9250BasicAHRS

1. 画像ファイルの準備

microSDカードにpicturesフォルダを作成し、その中に画像ファイルを何枚か入れます。また、画像ファイルのファイル名を連番となるようにします。

(本記事では画像枚数を3枚、ファイル名をp0.jpg、p1.jpg、p2.jpgとしています。)

2. スケッチ例

Arduino IDEから下記のスケッチを書き込みます。

ポイントとしては本体を振った際のジャイロセンサの値を閾値によって判定し、移動方向(左右)に対応したフラグを立てています。

今回は完成品でご紹介した左に振る→右に振る→画像が切り替わるのスケッチとなっていますが、右に振る→左に振る→何らかの処理も可能です。

#include <M5Stack.h>
#include "utility/MPU9250.h"

MPU9250 IMU;

bool leftFlag = false; //左に動いたことを保持するフラグ
bool rightFlag = false; //右に動いたことを保持するフラグ

int maxPicSize = 3; //SDカード内に入れた画像の枚数
int th = 80;
int count = 1;

void setup()
{
  M5.begin();
  Wire.begin();
  M5.Lcd.setBrightness(100);
  M5.Lcd.drawJpgFile(SD, "/pictures/p0.jpg");
  byte c = IMU.readByte(MPU9250_ADDRESS, WHO_AM_I_MPU9250);
  IMU.calibrateMPU9250(IMU.gyroBias, IMU.accelBias);
}

void loop()
{
  if (IMU.readByte(MPU9250_ADDRESS, INT_STATUS) & 0x01){  
    IMU.readGyroData(IMU.gyroCount);  // Read the x/y/z adc values
    IMU.getGres();
    IMU.gz = (float)IMU.gyroCount[2]*IMU.gRes;
  } 
  IMU.delt_t = millis() - IMU.count;
  if (IMU.delt_t > 100){
    int accel = (int)(IMU.gz);
    if(accel < -th){
      if(leftFlag){
        //左に振る→右に振るの後の処理
         M5.Lcd.fillScreen(BLACK);
         int num = count++ % maxPicSize;
         String s = "/pictures/p"+String(num)+".jpg";
         M5.Lcd.drawJpgFile(SD, s.c_str());
      }else{
        rightFlag = true;
      }
    }else if(accel > th){
      if(rightFlag){
        //右に振る→左に振るの後の処理
        
      }else{
        leftFlag = true;
      }
    }else{
      leftFlag = false;
      rightFlag = false;
    }
    IMU.count = millis();
  } 
}

3. M5Stack Grayを振る

振りましょう。

おわりに

M5Stack Grayを振ってディスプレイ上の画像を切り替える方法をご紹介しました。

今回は画像の切り替えでしたが、画像の表示部分を別の処理に書き換えることで、振る→何らかの処理をするということも実現できると思います。