eucaly が 2022年04月07日09時04分12秒 に編集
初版
タイトルの変更
リモコン付きゲーミングPCのLED制御を色々実装してみた
タグの変更
LED
Arduino
M5Stack
RaspberryPi
Python
メイン画像の変更
記事種類の変更
製作品
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パネルです。  この写真の「NZXTロゴ」が表示されてるパネル、ね。 次に、「サブ」、PC本体に内蔵しているLEDパネルです。  モザイク模様表示してるやーつ。 最後に、「ステータス」、これはLEDパネル単体ではなく、メインLEDパネルにオーバーラップ表示する、文字でのPCステータスです。  NZXTロゴに、ステータスを組み合わせるとこんな感じ。 # LEDパネル表示部のソフト開発 RaspberryPOSの「bullseye」と、「Pyhon3」の組み合わせで開発することにしました。 直接LEDパネルに表示は、何かとかったるいので、まずWindows上で開発し、ある程度出来たら表示部をLEDに入れ替えてRaspberryPiに持っていく、感じで。 Windows開発時は、pythonに標準で入ってる「tkinker」を使い、GUI画面にLEDイメージを表示させて開発しましたとさ。  こんな感じ、Windows11だと角が丸まっちゃって、端っこまで表示できていないけどまあ、気にしない!。 # メイン画面のバリエーション ## モンスターパレード モンスターが行進します。  素材は、「ヌー(Gnu)@damagedgold」様のドット絵素材を使用してます。 【ドット絵】モンスターキャラチップ素材(色違い版) http://damagedgold.wp.xdomain.jp/2020/09/28/picsqmobchip/ 【ドット絵素材】背景素材5種(差分あり) http://damagedgold.wp.xdomain.jp/2018/04/06/pixelbbg5/ ステータスによる変化要素は・・・ |ステータス|変化要素| |---|---| |CPU温度|モンスターの歩行速度| |CPU使用率|モンスターの数| |GPU温度|背景 ( 昼→夕方→夜) | こんな感じになりました。  ## フィールド画面 RPG的なフィールドを生成し、表示します。  素材は、「ぴぽや」様のウディタ用マップチップドット絵素材を使用しています。 マップチップ 16×16 https://pipoya.net/sozai/assets/map-chip_tileset16/ ステータスによる変化要素は・・・ |ステータス|変化要素| |---|---| |CPU使用率|フィールドオブジェクトの数| |CPU温度|フィールド背景 | こんな感じになりました。  ## タイルモザイク カラフルなタイルを表示します。  ステータスによる変化要素は・・・ |ステータス|変化要素| |---|---| |CPU使用率|RGBタイル生成数| |GPU使用率|YMCタイル生成数 | こんな感じになりました。  ## バー 左右に2本のバーを表示します。 いやあ、なんとなく、ほら、「BeBox」みたいなのを狙ってみたの。  ステータスによる変化要素は・・・ |ステータス|変化要素| |---|---| |CPU #1 のクロック|左側バー長さ| |CPU #2 のクロック|右側バー長さ| *たまに左右が入れ替わります こんな感じになりました。  ## サークル 円形なグラフで、ステータスを可視化。 まあ、使っているケース「NZXT H510i」シリーズは、標準では正面に光る12cmファンを2つ縦に並べるのがセオリーなので。 それに倣ってみたり、とか。  ステータスによる変化要素は・・・ |ステータス|変化要素| |---|---| |CPU使用率|上側サークル| |GPU使用率|下側サークル| こんな感じになりました。  ## ステータスストリーム PCから取得した各種ステータスを、ひたすら流します。  こんな感じになりました。  ## ステータスコード ステータスストリームの、流れる向きを変えて、フォントを「Electroharmonix」という、「カタカナに見える英語フォント」に変えてみたよバージョン。 読めないんだけど、なんというかかっこよさげ!。  こんな感じになりました。  ## ロゴ ま、NZXTのロゴを表示します。 実態は128x64のpngファイルを開いて、回転させてるだーけ。  こんな感じになりました。  # サブ画面のバリエーション ## ステータスストリーム こんなんで。  こうなりました。  ## ステータスコード こんなんで。  こうなりました。  ## タイル こんなんで。  こうなりました。  ## ライフゲーム こいつはサブ画面のオリジナル!。 ライフゲームです。  ステータスによる変化要素は・・・ |ステータス|変化要素| |---|---| |CPU温度|水色のライフゲームの追加シード数| |GPU温度|緑色のライフゲームの追加シード数| こんな感じになりました。  # ステータスのバリエーション 「小さいの」「大きいの」「OFF」を実装しました。 夫々こんな感じです。  LEDに表示すると、こんな感じに。   メイン画面の表示要素と独立しているため、他のメイン画面にも被せられます。  # m5stackなリモコン 画面切り替えを実装したかったのですが。 まあ液晶付きでタッチパネルな、「M5Stack Core2」をリモコンとして使ってみることに。 # さくっと完成 画像は変換サイトで配列に埋め込み、ソースにインクルードしちゃってます。 https://lang-ship.com/tools/image2data/ M5StackのESP32は、プログラム用のROM領域が6MBくらいあるので、結構画像とかソースに突っ込めて、イイ感じ!。 設定はEEPROMへ書き込み、RaspberryPiとの通信はSerialでサクッと行いました。 RaspberryPi側から文字列を流し込んで表示できるようにしてあります。 CPUの使用率とか、送ってみたり。  # できました! 気分によってLED画面かちゃかちゃ出来る、なかなかに楽し気なものが出来ました。 いやあ、ゲーミングPC、楽しいね!。  以上です。