ラズパイからPCを操作できるリモコンを作る
前回使用したラズパイと一緒に7インチのタッチパネルも買っていたのですが、全然使っていなかったので時計兼リモコンにしてみようと思います。
作ったもの
言葉だけだとどんなものなのか分からないので先に写真を載せておきます。
左側は日付と時間を表示しており、右側がリモコンになっています。
リモコンはPCを操作するだけでなく、PCで再生している楽曲の詳細も表示してくれます。右下の3つのボタンは何の機能を割り当てようか考え中です。
実装
ラズパイだけでなくスマホからもアクセスできるようにしたかったので、Webアプリとして作っていくことにしました。
フロントエンドにはポートフォリオサイトを作るときにも使ったVue.jsを使い、バックエンドにはPythonのマイクロフレームワークであるFlaskを使います。また、CSSフレームワークもポートフォリオサイトで使ったBulmaにしました。
日付
左上に表示する日付はMoment.jsというライブラリを使います。日付を取得するだけならデフォルトで使えるDateオブジェクトでもいいのですが、フォーマットをいじりたかったのでライブラリに頼ることにしました。
時計
時計は主にCSSで動かしています。canvasを作ろうかとも迷ったのですが、あまりCSSを使ったことがなかったので興味本位でCSSを選びました。
現在時刻のセットはCSSだと難しいので、Dateオブジェクトから針の角度を計算しています。
それぞれのパーツごとにコンポーネントにしており、サイズや色などを割と柔軟に変えられるようになっています。
再生中の音楽
PCのミュージックプレイヤーはMusicBeeを使っているのですが、このソフトはC#とVB.NETでプラグインを書くことができます。
まあまあ使い慣れているC#を使って、再生している楽曲が変わったときに、FlaskのAPIに楽曲の情報をPOSTするプラグインを作りました。大したことはやっていないのですが、ドキュメントが少なかったので苦労しました。
リモコン
それぞれのボタンをクリックしたときに、Fetch APIを使って入力したいキーのエンドポイントにアクセスします。FlaskはURLに変数を利用することができるので、ここからキーを判別し、pyautoguiを使ってPCに入力します。
スマホ対応
Bulmaを使っているおかげでレスポンシブ対応のためにやることはほとんどありませんでした。
ただ、タイルの高さをウィンドウサイズに合うようにしていたのですが、スマホだとうまく動かなかったのでChromeの開発者ツールとにらめっこしてCSSを書き換えました。
スマホからいちいちWebページにアクセスするのは嫌なのでPWAにしてみます。PWAにするといっても、自分用なのでAndroidに対応する必要もなく、headタグ内に下の4行を追加するだけです。
アイコンの大きさは180x180がいいようです。
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="apple-mobile-web-app-title" content="Remote"> <link rel="apple-touch-icon" href="../static/img/icon.png">
左側のタイルにis-hidden-mobileクラスを付与することで、スマホからアクセスしたときはリモコンとしての最小限の機能だけが表示されるようにしています。
まとめ
最近どうぶつの森にハマっていてプログラミングをサボり気味だったので、前々から作りたいと思っていたこれを作ってみました。
デザインセンスがないのでいつかレイアウトを見直したいです。
Portal面白いのでやってください。
