M5stackで、パソコンを立ち上げてからの経過時間を教えてくれる、可愛いガジェットを作る

[M5Stack Advent Calendar 2020](https://qiita.com/advent-calendar/2020/m5stack) 23日目の記事です。

2021/02/15追記 記事最後に、[バッテリについての追記](#追記-2021_02_15)をしました。


#はじめに
最近の、大変なご時世の中、2020/12/05(土),06(日)に、Ogaki Mini Maker Farire 2020（略称：OMMF2020)が開催されました。私は、2日目の日曜日に開催されたTwitterで作品発表する形での参加をしてみました。手元にあったM5stackで、以前から欲しかった「パソコンを立ち上げてからの経過時間を教えてくれる、可愛いガジェット」を作ってみたのです。

せっかくなので、その作り方を記載して、M5Stackシリーズのアドベントカレンダー( https://qiita.com/advent-calendar/2020/m5stack  )に参加させていただこうと思います。

#作ったもの

![Eoh5pVwUcAEZ7x6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533411/d15aa01f-f5e1-f980-cea4-eaf7ee66021a.jpeg)

パソコンを立ち上げてからの経過時間を教えてくれる、可愛いガジェットです。
パソコン内のアプリでも出来そうですが、パソコンのディスプレイは全面を広々と使いたいため、別ガジェットが良いのですw

これで、パソコンを立ち上げて、Twitterしかしてないのに寝る時間になってしまう現象が減ると良いな〜と思っていますw PC時間の可視化、身が引き締まりますw 2分経つと「よく頑張っているね。」という、褒めメッセージに変わりますw
https://twitter.com/nod_Y/status/1335451035469369344

OMMF2020にTwitterで作品参加可能と聞いたのが、開催日2日前だったため、大急ぎで作りました。そのため、シンプル機能のみです。今後、多機能にする予定です。



#作り方
構想から2日、あっという間にできました。
###大事なところ
M5stackサンプルプログラムのTFT_Clock_Digitalを少し改変しただけです。
(ちなみにTFT_Clock_Digitalがあるのは、Arduinoのスケッチ例＞M5stack>Advanced>Displayの中です。
開発環境としてVScodeを使うと、ARDUINO EXAMPLE>Examples from Custom Librariesの中のM5stack>Advanced>Displayの中です。)

見栄えを除いた改変箇所は、44行目のコンパイル時間を入力している箇所を、全て0にしただけです。

``` Arduino
uint8_t hh = 0, mm = 0, ss = 0; // 最初に表示される時間は0
```
ちなみに私は、M5StackをPCのUSBポートに常時繋いでるため、PCを立ち上げた時に自動的にM5stackの電源もついて、時間が計れるという仕組みです。何にも難しいことしてないです。
写真を見るとわかる通り、私はM5stack Grayを使っていますが、今回の機能的には、M5stack Basicで問題無いと思いますw

これだけ簡単に作れたのは、M5stack のおかげです。

###見栄えを良くするために
見栄え良く、自分好みに可愛くするため、背景画像の追加、数字の表示位置変更(少し上に)、数字の色、数字の背景色を変更しています。
背景画像は、Keynote(macのプレゼン用ソフト…これを選んだのは、私が使い慣れているからで、画像を作れるならなんでも良いと思う)で適当に作り、画面キャプチャして、GIMP(画像を高機能で扱えるフリーソフト)でM5stadck用にサイズ調整(240*320)しました。数字の背景色は、サンプルプログラムでは灰色になっていたため、Keynoteのカラーピッカーで適当に作った画像のRGBを調べ、
![スクリーンショット 2020-12-06 23.44.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533411/e1d96b98-2dcf-7315-050a-0f6c2923af28.png)


@nnn112358 さんの「M5StackのLCDディスプレイの色をRGBで指定する。」
https://qiita.com/nnn112358/items/ea6b5e81623ba690343c　
記事を参考に、コーディングさせていただきました。感謝！

また表示されている文字 (「パソコンを立ち上げてから」や「今から、何するー？」と、2分たったら表示される「よく頑張ってるね。」)も、Keynoteで作った画像です。
~~日本語フォントを表示させる設定を色々するより、画像を作った方が早いので。~~

ちなみにたこルカさん写真は、自宅のたこルカさんのぬいぐるみを撮影したものです。ちなみに、この作品の流用w 可愛い～。> https://twitter.com/nod_Y/status/1306255906418626561?s=20 
たこルカさんの一言につかったフォントは、私のmacに最初から入っていたYuppy SCです。可愛い～。

また、2分経ったら、たこルカさんの一言を変えるためのコードはこんな感じです。サンプルコードの119行目のすぐ上に入れると、良い感じに動きます(tako_imgはファイルを置いているフォルダ名、img04.pngは適当に作ったファイル名です)。

``` Arduino
 if(mm > 1){
    M5.Lcd.drawPngFile(SD, "/tako_img/img04.png", 20,140 );//たこルカさんの一言を表示する
  }
```

以上が、作り方になります。めちゃくちゃ簡単なので、よかったらこれを参考に、作ってみてください。

#おまけ
12月中旬になり、暖房として工作部屋のエアコンが稼働されてることが増えて、自分が就寝順的に、エアコンの電源を切らねばなのに忘れがちなので、立ち上げ時のメッセージを変更しました。これで、PCの電源が落ちて、M5stack の内部電源に切り替わった際に、たこルカさんがエアコンの心配をしてくれるように。
![EpNJsDLVQAA-5QK.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533411/7c72c66d-a127-605e-7906-248ad5e056de.jpeg)
メッセージ画像を入れ替えただけですが、機能が増えましたw


#まとめ
M5stackは、サンプルも豊富で、あっという間に自分好みの、良い感じのガジェットが作れる、最高の道具だと思います。ありがたいです。これからも、いろいろ作ってみたいと思います。


明日は、@siy1121さんの「M5StickCで振って遊べるMIDIコントローラを作る」とのことです。楽しみです！
(振ってということは、M5StickCの6軸IMUを使われているのでしょうか？ 私は、せっかく9軸IMUを搭載されているM5stackGrayを使っているのに、全く使えていないので、どんな感じの内容なのか、ワクワクです!)


#追記-2021_02_15
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ゔーん。やはり、この使い方はM5stackバッテリーの寿命を、短くしてしまったかな。昨晩から、バッテリーを認識しなくなってしまいました。ほんのちょっと、膨らんでもいるような？ メイン機能は、バッテリー不要なので、Core2みたいに紙でカバー作って、バッテリーは外して使おうかなぁ。 <a href="https://t.co/JNxODo16Fl">https://t.co/JNxODo16Fl</a> <a href="https://t.co/ki1BYZfubk">pic.twitter.com/ki1BYZfubk</a></p>&mdash; nod(YモードP) (@nod_Y) <a href="https://twitter.com/nod_Y/status/1361226145195196419?ref_src=twsrc%5Etfw">February 15, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
この使い方だと、バッテリーの寿命を短くするかもしれません。私の場合、2ヶ月くらいでバッテリーが認識されなくなり、少し膨らんだような気がしています。パソコンを立ち上げてからの経過時間を教えてもらう場合、どうしても付けっぱなしになるかとおもいますので、最初から、バッテリーを外して使った方が安心かもしれません。参考にされる場合は、どうぞ、ご注意ください〜。