編集履歴一覧に戻る
eucalyのアイコン画像

eucaly が 2022年04月07日09時04分12秒 に編集

初版

タイトルの変更

+

リモコン付きゲーミングPCのLED制御を色々実装してみた

タグの変更

+

LED

+

Arduino

+

M5Stack

+

RaspberryPi

+

Python

メイン画像の変更

メイン画像が設定されました

記事種類の変更

+

製作品

Lチカの変更

Lチカが設定されました

ライセンスの変更

+

(MIT) The MIT License

本文の変更

+

# げーみんぐぴーしー まあ、LEDがびっかびか光ればそれはゲーミングPC!。 前に色々やらかして、作りましたけれども。 自作PCにLEDを仕込んでみる(やらかし気味の) https://elchika.com/article/b28d0977-17d9-4c35-8b88-739deb0c2e0f/ 可搬型自作PCの組み立て https://elchika.com/article/10cb5d78-5a52-4816-8be1-d86582025d2e/ こいつ、LEDの数を稼ぐため?に、「マトリックスなLEDパネル2枚装備、しかも128x64の高解像度!」な、割と無茶しているパソコンになっちゃってます。 内部的には、RaspberryPiでLEDを制御しており、いわゆるPC部とはUSB GadgetなEthernetで通信しPC側のステータスを取得している、という仕様。 今回は、このLEDパネル部を色々やってみようかな、と。 リモコン付きでね!。 # 完成品動画 手元の端末で、表示を色々切り替えられます!。 @[youtube](https://youtu.be/oGlR8kgeDtI) # ソースと言語 ちょっとソース類が多くて、elchikaでハンドリングしきれんので。 githubに投げておきました。 このままインストールすれば動く的なものではないですが、ご参考まで、に。 https://github.com/eucalyhome/statuspanel 言語はpython3とArduinoです。 オイラは専門的なソフト知識を学んでいない為、まあ適当です。 # メインとサブとステータス 今回は、LEDの表示要素を、3つに分けてみました。 ひとつは、「メイン」、正面のLEDパネルです。 ![キャプションを入力できます](https://camo.elchika.com/0af4f6c713ad616c8ca4b9487ffc706f22d0d971/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f39316335623532342d646239332d343330382d616565372d303837663539613839376263/) この写真の「NZXTロゴ」が表示されてるパネル、ね。 次に、「サブ」、PC本体に内蔵しているLEDパネルです。 ![キャプションを入力できます](https://camo.elchika.com/762c15c6b756881d9ea7d811a8da26cbac2b3816/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f31336330353032302d366639642d343266362d623239612d646366386261346462353238/) モザイク模様表示してるやーつ。 最後に、「ステータス」、これはLEDパネル単体ではなく、メインLEDパネルにオーバーラップ表示する、文字でのPCステータスです。 ![キャプションを入力できます](https://camo.elchika.com/9aec459bee2be8394718584db766076ecb17c50f/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f37346236366331332d343763362d346630372d613564392d323562313530326335313738/) NZXTロゴに、ステータスを組み合わせるとこんな感じ。 # LEDパネル表示部のソフト開発 RaspberryPOSの「bullseye」と、「Pyhon3」の組み合わせで開発することにしました。 直接LEDパネルに表示は、何かとかったるいので、まずWindows上で開発し、ある程度出来たら表示部をLEDに入れ替えてRaspberryPiに持っていく、感じで。 Windows開発時は、pythonに標準で入ってる「tkinker」を使い、GUI画面にLEDイメージを表示させて開発しましたとさ。 ![キャプションを入力できます](https://camo.elchika.com/1cf28cc79cf6c95c5a7969059b7344e9a29b5950/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f64383232626461362d303263332d343932392d623133342d666164646634383864663631/) こんな感じ、Windows11だと角が丸まっちゃって、端っこまで表示できていないけどまあ、気にしない!。 # メイン画面のバリエーション ## モンスターパレード モンスターが行進します。 ![キャプションを入力できます](https://camo.elchika.com/7e56de97dcd5863f51cf75b4c0542164f013efac/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f65643534396337642d633233342d346463622d626631662d393536656139346661346135/) 素材は、「ヌー(Gnu)@damagedgold」様のドット絵素材を使用してます。 【ドット絵】モンスターキャラチップ素材(色違い版) http://damagedgold.wp.xdomain.jp/2020/09/28/picsqmobchip/ 【ドット絵素材】背景素材5種(差分あり) http://damagedgold.wp.xdomain.jp/2018/04/06/pixelbbg5/ ステータスによる変化要素は・・・ |ステータス|変化要素| |---|---| |CPU温度|モンスターの歩行速度| |CPU使用率|モンスターの数| |GPU温度|背景 ( 昼→夕方→夜) | こんな感じになりました。 ![キャプションを入力できます](https://camo.elchika.com/8acfb995ace7cd01f3202ffcfe203690c5e18484/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f66373732626562312d386430372d343632632d623931362d373233343639643266323464/) ## フィールド画面 RPG的なフィールドを生成し、表示します。 ![キャプションを入力できます](https://camo.elchika.com/1ffb957ebe0866daac617299709673d1de15bb25/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f39646436656530612d343135302d343462362d383736662d623663313362343064356561/) 素材は、「ぴぽや」様のウディタ用マップチップドット絵素材を使用しています。 マップチップ 16×16 https://pipoya.net/sozai/assets/map-chip_tileset16/ ステータスによる変化要素は・・・ |ステータス|変化要素| |---|---| |CPU使用率|フィールドオブジェクトの数| |CPU温度|フィールド背景 | こんな感じになりました。 ![キャプションを入力できます](https://camo.elchika.com/c997aace378326cc5ab4d73f7605beb19cb645c4/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f35616263643466392d383762642d343563372d386631662d663332313230303664323330/) ## タイルモザイク カラフルなタイルを表示します。 ![キャプションを入力できます](https://camo.elchika.com/eeb71128615546a003ed9aaec8c404cf9a4c07d9/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f34313063303331352d336339302d343032642d616337352d393061633537646366333664/) ステータスによる変化要素は・・・ |ステータス|変化要素| |---|---| |CPU使用率|RGBタイル生成数| |GPU使用率|YMCタイル生成数 | こんな感じになりました。 ![キャプションを入力できます](https://camo.elchika.com/89094eb55bed5f29e427cb162c520d207b76c23f/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f33626433323564662d613738302d343263362d616531352d343964613838353361303861/) ## バー 左右に2本のバーを表示します。 いやあ、なんとなく、ほら、「BeBox」みたいなのを狙ってみたの。 ![キャプションを入力できます](https://camo.elchika.com/9c7c0bf289c2a6ac4710b6ee36c8f29eadeb1718/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f35343937663165312d316437362d343739302d383963372d386462363763653735383266/) ステータスによる変化要素は・・・ |ステータス|変化要素| |---|---| |CPU #1 のクロック|左側バー長さ| |CPU #2 のクロック|右側バー長さ| *たまに左右が入れ替わります こんな感じになりました。 ![キャプションを入力できます](https://camo.elchika.com/b9f4031b981873f8295941eacf6d2d7ee7ec0414/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f36666439303830392d363061392d346464642d386664382d646130353130303034393734/) ## サークル 円形なグラフで、ステータスを可視化。 まあ、使っているケース「NZXT H510i」シリーズは、標準では正面に光る12cmファンを2つ縦に並べるのがセオリーなので。 それに倣ってみたり、とか。 ![キャプションを入力できます](https://camo.elchika.com/acd75210de535b2f36ec20f2f6bc1b1e841cd366/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f36393435333866362d383765342d346265322d393662312d336362623234376164326333/) ステータスによる変化要素は・・・ |ステータス|変化要素| |---|---| |CPU使用率|上側サークル| |GPU使用率|下側サークル| こんな感じになりました。 ![キャプションを入力できます](https://camo.elchika.com/8e194fcbc44183f8e11853170e6a67766935a77a/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f39346438393364372d623433652d343465652d623862392d303736613762396433373361/) ## ステータスストリーム PCから取得した各種ステータスを、ひたすら流します。 ![キャプションを入力できます](https://camo.elchika.com/811064073a73b2fe0d061d5e63fe8fd980e64875/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f62363437393035632d663064342d346166372d626137612d333732356132663136306563/) こんな感じになりました。 ![キャプションを入力できます](https://camo.elchika.com/173faff0913c6f139b63375e086f533bb530a003/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f34336562386539322d343962622d346135652d613362342d326336643138636634363638/) ## ステータスコード ステータスストリームの、流れる向きを変えて、フォントを「Electroharmonix」という、「カタカナに見える英語フォント」に変えてみたよバージョン。 読めないんだけど、なんというかかっこよさげ!。 ![キャプションを入力できます](https://camo.elchika.com/eba82981bc4b3ed7bceffd6ce8b6d4fb493e5d8c/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f30333531633534312d393737382d346438642d623830392d653535393961396362393434/) こんな感じになりました。 ![キャプションを入力できます](https://camo.elchika.com/2a0e275ab419a67752a1972d7ea012e0a4916be5/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f34346461653438632d376130612d343966352d386438302d656235363936643039646135/) ## ロゴ ま、NZXTのロゴを表示します。 実態は128x64のpngファイルを開いて、回転させてるだーけ。 ![キャプションを入力できます](https://camo.elchika.com/527e012615de7f69137e8111ca8c6190f6ce71e7/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f34643730336135352d633134612d343961312d623138632d353837336439373166383732/) こんな感じになりました。 ![キャプションを入力できます](https://camo.elchika.com/968d0a865b1ed57d41a9d2e4b8976b0c676507e4/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f36373631623139622d373030622d343866362d396136342d653765396533373030393737/) # サブ画面のバリエーション ## ステータスストリーム こんなんで。 ![キャプションを入力できます](https://camo.elchika.com/32348c098b9ce9e8be48a62530e4c81f20d2e3b2/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f38346433656134342d386635612d346539362d613836332d613462633733623136363932/) こうなりました。 ![キャプションを入力できます](https://camo.elchika.com/9f378b6a6d66c52c1cd213e9a9524e71365e11df/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f63326239623930332d303664352d346438642d386265612d626439353163653666333934/) ## ステータスコード こんなんで。 ![キャプションを入力できます](https://camo.elchika.com/aa9636304929fda2d2b8ae69964d830d2325fcd4/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f39376539376364622d376137622d343563382d383230622d353764356435656631343835/) こうなりました。 ![キャプションを入力できます](https://camo.elchika.com/c5ca6d4083a07fc5fe399831770a4c63e8ca910c/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f63613737616531372d343566332d346532392d613564662d323538616363353635346462/) ## タイル こんなんで。 ![キャプションを入力できます](https://camo.elchika.com/bd494cc91033444e7e5ad6da3f6121714b3946af/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f35323364653466342d323739322d343539322d386334322d386639356230613939373061/) こうなりました。 ![キャプションを入力できます](https://camo.elchika.com/3a09f2dcfa0d4180242d7c2f4e3b5cae01f9706b/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f64336330626239352d393065382d343038382d626164392d623265383238373264363939/) ## ライフゲーム こいつはサブ画面のオリジナル!。 ライフゲームです。 ![キャプションを入力できます](https://camo.elchika.com/70297d69d74751b94258bb1af549e30c144e2e68/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f36316434646637622d643466622d346163362d393137612d646331323037333739613364/) ステータスによる変化要素は・・・ |ステータス|変化要素| |---|---| |CPU温度|水色のライフゲームの追加シード数| |GPU温度|緑色のライフゲームの追加シード数| こんな感じになりました。 ![キャプションを入力できます](https://camo.elchika.com/397378d84e3cdbf07823eeae2dffb54c77f47c04/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f35633164363436302d323134322d343630622d383037622d393730333964343133313935/) # ステータスのバリエーション 「小さいの」「大きいの」「OFF」を実装しました。 夫々こんな感じです。 ![キャプションを入力できます](https://camo.elchika.com/a5294adb68b505471a44eef1e756bdaca4056e60/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f31376564653733352d663263652d343161332d383638372d303037306561316463333639/) LEDに表示すると、こんな感じに。 ![キャプションを入力できます](https://camo.elchika.com/61b135afda9e29cc69fa2f2d56e28c760ad6f759/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f34616162343538322d623230642d346366372d613131362d376538306139363630316165/) ![キャプションを入力できます](https://camo.elchika.com/006ce5d6f00ea2e8ba2a2c50708a335e609ca314/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f33316464393863662d386536622d343732622d393138392d373963393164376666396230/) メイン画面の表示要素と独立しているため、他のメイン画面にも被せられます。 ![キャプションを入力できます](https://camo.elchika.com/b9e8b76c991c392d6d755c2be91b23ac603e1478/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f34316639323135322d353436352d343431302d613163362d613964626666313964653365/) # m5stackなリモコン 画面切り替えを実装したかったのですが。 まあ液晶付きでタッチパネルな、「M5Stack Core2」をリモコンとして使ってみることに。 # さくっと完成 画像は変換サイトで配列に埋め込み、ソースにインクルードしちゃってます。 https://lang-ship.com/tools/image2data/ M5StackのESP32は、プログラム用のROM領域が6MBくらいあるので、結構画像とかソースに突っ込めて、イイ感じ!。 設定はEEPROMへ書き込み、RaspberryPiとの通信はSerialでサクッと行いました。 RaspberryPi側から文字列を流し込んで表示できるようにしてあります。 CPUの使用率とか、送ってみたり。 ![キャプションを入力できます](https://camo.elchika.com/b100c24d2293e5473ac68d16801f06eaf1ff1751/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f38393635383331382d626432632d346661362d383736382d313061666433373932303234/) # できました! 気分によってLED画面かちゃかちゃ出来る、なかなかに楽し気なものが出来ました。 いやあ、ゲーミングPC、楽しいね!。 ![キャプションを入力できます](https://camo.elchika.com/a6e74ea5c9c13db3aaaf351076f62abb67a688e9/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666637633237372d646465642d343333632d393736342d6162303436346433326631302f39373935383031342d346639662d343234642d393763342d616437653830363161656464/) 以上です。