小6息子くんCPU/GPU使用状況モニタプログラムの作成

内蔵ディスプレイの使い道を模索

息子くんの作ったグラボの強化された一体型PC。

siroitori.hatenablog.com
siroitori.hatenablog.com

一時はすごいね～っとなりましたが、
いまいち使いづらい！

なぜなら、画面がすりガラスパネル越しだから！字も画もかすみます。

というわけで、結局、この自作内蔵ディスプレイとは別に結局外付けでモニターをつないで使うという状況になりました。

じゃあ、この内蔵ディスプレイどういう使い方するの？

一時は、内蔵ディスプレイでYouTubeを流し、外付けディスプレイでプログラミングなどのメイン作業をする使い方をしてましたが、それもどうやら使いにくかったと。
なぜならYouTubeもぼんやりかすんじゃってよく見えなくなるから！

それで今日は、このすりガラス越し内蔵ディスプレイ専用のプログラムを作っていましたよ。

CPU／GPU使用状況モニタプログラム

できあがったものがこちら。

かっこいいですね。

リアルタイムでCPUとGPU使用率を表示してくれます。

字も大きいのでかすんで読めないことはありません。
スタイリッシュなデザインがすこしぼやけて見えていい感じです。

こうやって作った

どうやって作ったのか教えてもらいました。

Visual Basicで作ったらしいです。
Visual Basic、通称VBは息子くんも私も好きな言語です。
画面デザインが簡単に作れます。

↑ Visual Studioという開発環境です。あ、そしてこれは外付けディスプレイで表示されたのをとってます。
ここでウインドウをデザインします。
背景イメージはどこぞからとってきたらしいですが、文字の配置など自分で決めてます。

こんなふうにコード書いてました。
わりと苦労したんだよ！って言ってました。

苦労した点

・GPUの値の取得方法
・文字を透過する方法

だそうな。

こうやって使う

左が外付けしたディスプレイ、右が一体型自作PC。
左の画面でメイン作業ができ、右の画面では常にCPU／GPUを監視した今回作成のプログラムが動いています。

ログインしたら勝手に一体型PCのほうにこのプログラムが起動して画面が表示されるように作ったそうです。

また、このプログラムを単体で起動するとどの画面に表示させるか選ぶ選択画面も作ったそうです。
↓ コレ

接続されているモニターの名前がコンボボックスに表示されて選択できるようになっています。いいですね！

「ログインしたら勝手に一体型PCのほうにこのプログラムが起動して画面が表示されるように作った」と書きましたが、実際には、プログラム起動時の引数としてモニターの名前？かなんかを渡して、それが渡ってきた場合はこの選択画面は表示させずにプログラムを起動するようにしているそうです。

常時起動してて負荷大丈夫？

「でも、常時起動してて負荷かからないの？」
と私からの質問に息子くん「ご安心を」。
このプログラムを起動させることによるCPU使用率はわずかだよ、と見せてくれました。
ちゃんと考えてたのね。さすが！

そして！
修理に出してたノートPC、無事帰ってきました！
修理代14800円はかなりの痛手でした！ガガガーン
でも元気に帰ってきたので良かった。
息子くん、もう壊さないでね、、(´Д｀)

スター・はてブとても嬉しいです！

小6息子くんアスキーアート動画の性能改善

前回予告で「息子くんVRコンテンツを作った」記事を書こうと思ってたんですけど、
開発中の一式を修理中のノートPCに入ったまま出してしまったので、こっちから書きます(;^ω^)

アスキーアート動画変換の続編です。

siroitori.hatenablog.com

動画をアスキーアート動画に変換するというプログラムを作っています。

性能改善をしたい！

性能改善案その１－OpenGLを使ってみる

作った当初から性能改善をしたいと言ってて、前回記事の終わりのほうでも書いてます。

最初にOpenGLを使ったらどうかな！と思ったらしいのですが、諸事情により不可能と判断し断念。
（前回記事「小6息子くんアスキーアート動画コンバーターを作る」を参照してくださいね）

性能改善案その２－GPUは？

前回はノートPCで作ってましたが、現在ノートPCが修理中で無いので自作デスクトップPCで開発してます。
しかしCPUはノートPCの方がCPU性能いいんですよ。（ノートPCはCore-i7、デスクトップはCore-i5）

でもでも、デスクトップPCのほうが勝るものそれはグラフィックボード！

↓ 先日つけたまさにコレコレ☆
siroitori.hatenablog.com

グラフィックボードを使って、つまりGPUで処理させてみたらどうだろう！と思ったらしいです。

がしかし、GPUの性能良くてもメモリが2GBなのでどうかなぁという懸念をもちつつ、
でもやってみよう、と思ったらしいのですが、GPUに画像処理をさせる情報がうまくみつけられなかったらしく「できるはずなんだけど…」と言いながらこれも断念。

ていうかCPUの処理をGPUにさせるなんてことができるんですねえ！？私知りませんでした。

性能改善案その３－マルチプロセッシングで動かす

結果から言いますと、これで大幅な性能改善に成功しました！！

「マルチスレッド」については私VBやなんかで以前よくマルチスレッド処理は書いてましたが、果たして今回の対処が「マルチスレッド」にあたるのか？書き方が正しいのか不明ですが…。→「マルチプロセッシング」と息子くんに訂正されました。
「論理プロセッサ」というものを使うらしいです。

タスクマネージャのCPU画面。

ここで右クリック→グラフの変更→論理プロセッサ
とすると、

画面が４つになりました！
これは、CPUに４つの論理プロセッサが存在するということらしく、４スレッドの処理を走らせることができるということなのだそうです！( ﾟДﾟ)

ちなみに、我が家の家族用のノートPC（Core-i7）では下記のように８スレッド表示されました！

そして、ソースコードには、下記のように修正を入れてました。

pythonでこのように書いたらマルチプロセッシングで書けるんですね。へー。
さらに、上記のように multi.cpu_count() で現在使っているPCの最大論理プロセッサ数がとれるらしいです。

from multiprocessing import Pool

def f(x):
    return x*x

if __name__ == '__main__':
    with Pool(5) as p:
        print(p.map(f, [1, 2, 3]))

multiprocessing --- プロセスベースの並列処理 — Python 3.7.5rc1 ドキュメント

そもそもアスキーアート動画変換実行中に、CPU使用率があまり上がらないことに疑問を持ってたそうです。
なるほど「１スレッドしか使ってなかったからか」と。

日々、マニア度を増していく息子くん。
一生懸命私に説明してくれますが、私の脳みそがなかなかついていけないお年頃。。

こうやってブログを書いて理解しようと頑張っています(;^ω^)

がんばれ息子くん！
そして私！

おまけ

前回嬉しいはてブコメントいただいたのでここでお返事を(*^▽^*)

id:nakarobo さん
自力修理ですね！
８月にいただいたばかりだったのでその選択肢は思いつきもしませんでした。
次回はそれやりたいと思います♪
いつもありがとうございます^^

id:Thoth さん
コメントありがとうございます^^
高専すごいですよー
うち頭が足りないから高専は到底・・・(;^ω^)
キャッチボールも逆にうらやましいですよ。超インドアなので・・・

↓ 友達100人できるかな？

スター・はてブとても嬉しいです！

小6息子くん自作PCのグラボを換装した矢先・・・

最近自作PCの改造をしていた息子くん。

siroitori.hatenablog.com
siroitori.hatenablog.com

そして本当は（たぶん）一番やりたかったグラフィックボードの換装！をやりました。

グラフィックボードの換装

今まで使っていたグラボ

AMD Radeon HD7770

自作パソコンをはじめて作ったときに購入したもので、予算的にカツカツだったのでそのときに一番安く買えるものを購入してました。

↓このときの記事
siroitori.hatenablog.com

お小遣いの関係でビデオカードのみ後で中古で買ってつけた。モニターとキーボードは家のPCと共用のため不満をもっている。

このときの「ビデオカードのみ中古で買った」それ。3000円でした。
ちなみに、モニターは今となっては内蔵されていて（前回記事）、キーボードも私のお古が譲渡された形になりもう息子くん専用になっています。

【プロセッサ】RADEON HD7770
【インターフェース】PCI-Express x16
【出力コネクタ】DVI-Dx1/HDMIx1/DisplayPortx1
【補助電源】6pin
【メモリ規格】GDDR5
【メモリ容量】1GB

今回換装したグラボ

GEFORCE GTX 1050Ti

コア / メモリ
・ブーストクロック / ベースクロック / メモリクロック 1392 MHz / 1290 MHz / 7008 MHz
・メモリタイプ 4GB GDDR5

映像出力端子
・DisplayPort x 1
・HDMI x 1
・DL-DVI-D x 1

特徴
・DirectX 12 Ready
・Gamestream to NVIDIA SHIELD

上記、コピペしただけです。
うーん。
私にはなんのこっちゃな感じであんまわかってませんが・・・
とにかく息子くん今回はこれが買いたかったそうです。

今回は店舗で新品で買いました！
14,800円。。

ひゃーー高い！！高い！！

主婦目線で考えると、しかもわりとケチな私からすると、
「こんな高いの買わんでよくなーい？」
「今の持ってるのカクツクかもしれんけど、動いてるんだから別にそれでよくなーい？」
なんですけどーー。

でもこればっかりは価値観の違いですよね～。
そしてこのお金は息子くんの大事にためたお金からの支払い。私がどうこう言えないですよねー。
と、ぐっとこらえる。

そして買って帰ってすぐ無事に換装されました☆

喜びもつかの間、そして悲劇はおこる

今回換装したのは自作デスクトップPCだったんですけど、それとは別に息子くんはノートPCを持っています。

↓ このときにいただいたありがたい賞品のノートPC
siroitori.hatenablog.com

突如聞こえてきた「わぁーーーーー」という息子くんの悲鳴。

このノートPCに何をやらかしてしまったのか、息子くんのお得意技の「注意欠陥」による過失と思われるヒビが・・・

画面の表示がみるも無残な状態にビリビリなっています。

・・・泣きました。

メーカーに修理に出しました。

いったいいくら請求くるだろう。。。

PCケースやらグラボやらのお金を修理代にあてればよかった・・・

いや、最近使いすぎたから「もう使うなよ」の神様からのメッセージなのかしら・・・
（じつは私はこれ以外にもいろいろ買い物してます。）

ショックから息子くんにちょっときつくあたってしまいましたが、一番悲しいのは息子くんでしょうからね。
これでこれからもっと気を付けられるようになってくれたらいいんですけど。

注意欠陥てそうそう言ってなおるもんでもないしな～と。
言って治るならとっくに治っとる。

はーーーーでもまぁ、なってしまったもんはしょーがないよね、がんばろ！

気分を変えて、次回「息子くんVRコンテンツを作った」記事書こっと。

スター・はてブとても嬉しいです！

小6息子くん自作PCを一体型にした！

前回記事で自作PCの筐体を新しくした話の続きです。おもしろいことになりました。

↓ 前回記事はコチラ。
siroitori.hatenablog.com

ハードオフでディスプレイを購入

息子くんに買いたいものがあるからハードオフに連れて行って！ということなので車で20分ほどのハードオフに行ってきました。

ハードオフってはじめて行ったったんですが、いろんなものが売ってて楽しいですね☆
ハマりそう♪

www.hardoff.co.jp

そしてそこで購入したのが、PC用モニター。お値段、1300円！。

帰ってきて値札もついた状態で写真撮りたかったんですが、息子くんにすぐに改造はじめられちゃっていい画が撮れませんでした。

ディスプレイをバキバキにして開ける

これをあけていきます。

っていってもねじがついていないのにどうやって！？

ググると、ドライバーでつめの部分を上手にこじあけられるそうなので頑張りました。

↓ 隙間からつめが見えますね。

格闘すること１時間あまり。
ついに外れました！！パッカーン

さらにこの中にあった箱の部分も開けてみました。

自作PCにつないで画面にうつしてみる

どこをどうつなぐのかもはや私にはわからなくなってしまいましたが、息子くん、自作PCとこの分解モニターをつないでみてました。
ちゃんとWindowsのログイン画面が表示されました！

自作PCに内蔵する！

それからなんとこのモニターを自作PCの中に入れる、と！！

この新しく購入した筐体、側面がすりガラスのような半透明なんですよね。
ここから見れるように中に入れたい、と。

あっちとこっちとたくさんのところを手でおさえながらはめ込まないと難しく、
一人の手ではうまくはめられなかったので私も手伝いました。（なので作業中の写真がない、、）

出来上がったものがこちら。

おぉ！PCの中にモニターが埋め込まれている！

こんな感じでちゃんと使えます。

でもなにぶんすりガラスのようなパネル越しなのでちょっと見た感じぼんやり・・・
老眼がすすんだような気分です(;^ω^)

YouTubeで炎の動画を見てみました。PC燃えてるみたい～(´∀｀)

youtu.be

スター・はてブとても嬉しいです！

小6息子くん自作PCの筐体をリニューアルする

今日も独自路線まっしぐらの小6息子くんです。

つい先日、頼んでいた自作PCの筐体が届きました！
（ちなみに筐体ってパソコンのケースのことです。）

いきさつ

自分の自作PCにもっと性能の良いグラフィックボードが欲しいと前からずっと言ってました。

息子くんの自作PCについてはこちらをご覧ください。
なんとこのブログ開設していちばん最初の投稿！ ↓
siroitori.hatenablog.com

ここで書いてるビデオカード（グラボ）って中古で買っててしかもそんなに性能いいやつじゃなかったんですよね。金銭面の関係で。

今回たまったお小遣いでグラボを買う！の話をしていたら…なぜか、筐体を買い替える話にいつのまにかすり替わっていました。

な、なぜ、、、？と思いましたが、
どうやら今の筐体ではグラボを新しくできないとのことでした。
息子くんから詳しく説明聞いたけど、よくわからんくて説明が左から右へ抜けていった・・・

そしてせっかく筐体を買い替えるんならかっこいいやつにする！と。

そして見つけてきましたよ。

「Thermaltake Versa H26 White /w casefan ミドルタワー型PCケース [ホワイトモデル] CS7071 CA-1J5-00M6WN-01」

「ボディが白くてカッコイイ、そしてすりガラスのようなサイドパネル。」
息子くん、目が輝いています。

以前の筐体は開けたりけたり外したりするのがとても面倒で、開けるたびに私も手伝わないとちょっと難しくて。
ぎちぎちにはめこんであるから、ねじをはずしてもなかなか力とコツがいるんですよね。
しかも息子くん開ける頻度高いし！

↓ ノートパソコンのHDDをSSDに変えた時、とりはずしたHDDを自作PCに増設したり
siroitori.hatenablog.com

↓ 水冷一体型CPUクーラーを取り付けてみたり
siroitori.hatenablog.com

ブログには書いてないですが、それ以外にも内部にLEDテープを入れて装飾してみたり、いろいろ。

↑ 今まで使っていた筐体。

最終的にめんどくさくなって以前の筐体は両側あけっぱなしのことが多かったです・・・。

それだけでも買い替える利点はあるのかなって思いました。

到着！

なかなかの大荷物です。

前の筐体よりひとまわり大きいみたいです。
拡張性が高そうでいいね！

そして私が出かけている間に完成

夜、私が3時間半くらい外出していて、帰ってきたら・・もう出来上がってました。

↑ 【2019/10/5追記】息子くんに指摘されて気が付きました！なんかちがう画像使ってた！！これ、家にあったかなり古いWindowsマシンを息子くんが分解したときに撮ってた写真でした。。新しい白い筐体のものでも、移し替える前のものでもないです。スミマセン。

興奮気味にいろいろ説明してくれる、息子くん。
うん、うん、そっか、・・・・意味わからなさ過ぎて再び左から右へ・・

設置完了。
よかったね☆

白いデスクトップPC、なかなかカッコイイ！

スター・はてブとても嬉しいです！

小6息子くんアスキーアート動画コンバーターを作る

皆さん、アスキーアートわかりますか？
　　　∧,,∧
　　 (・ω・｀) /|　
　／くＴ￣￣二=二] 三二─
　￣￣￣＼二＼
一般的なアスキーアート（通称AA）はこんなのなんですが、
「画像のドットをを文字に変換（画数の違いで濃淡を演出）したもの」（←※１）もアスキーアートというらしいです。
息子くんに教えてもらいました。

この用語の定義について調べてみると、アスキーアートとも呼ぶしテキストアートとも呼ぶらしいですね。
もはやアスキーアートはアスキーコードであろうとなかろうと関係ないらしいです。

※１
言葉で書いても意味がよくわからないかもですね。
実際こんなやつです。

一部を拡大すると・・・

「5」とか「A」とか文字で作られているのわかりますか？

ご存知の方いらっしゃるかどうかですが、これ、むかーし流行りましたねえ。
自分自身が画像処理とか勉強してた大学に通ってたということもあるから、一般的には流行ってたかどうか謎ですが。

画像コンバーター

ことのはじまりは画像ファイルをテキストのアスキーアートに変換するpythonのコードをみつけたところから。

dev.to

これを見ておもしろい！と思った息子くんは早速このソースコードを流用して作ってみたそうなんです。
で、変換した画像が、↑※１の画像ですね。

このソースコード。

# replace each pixel with a character from array
chars = ["B","S","#","&","@","$","%","*","!",":","."]

画像のドットの濃淡を見て、上記の文字に差し替えてるんですね。

これを動画に応用

これを応用して、動画のアスキーアートコンバーターを作成していました。

以下のように作成したそうです。
１．動画からフレームレートを指定してffmpegで画像を取り出す。
　　フレームレートというのは、１秒間を何枚の画像にするかの単位ですね。

２．切り出した画像ファイルに対してアスキーアート変換処理（前述のソースコードの内容）を行う。

３．画像をまた動画に戻します。１と逆の処理。

　　ちなみに、この記事↓でGoogle Earth Studioで作成した画像から動画の作成の時は３の処理してます。
siroitori.hatenablog.com

できあがった動画がこちら

youtu.be

元動画は息子くんのとてもお世話になっている福岡のプログラミング教室「ITeens Lab.」（アイティーンズラボ）からお借りしました♪
iteenslab.com

子供の意思・個性を尊重して一般的な「プログラミング教室」という型にはまらず好きなことをのびのびさせてくれる教室です。
うちとかもうアレなんで、自己流で好きな開発を黙々と（？）やってる感じみたいです。
もう通ってわりと長く、小学校は大の苦手な息子くんですがこの教室は大好きなんです。

学校に行けてないので同世代の子と触れ合うことがあまりない環境で（まぁ本人もあまり他人に興味がないというのもあるけど…）子供たちの中で活動する貴重な場なんです。ほんとありがたい・・・！

こちらが変換前のオリジナル動画↓

youtu.be

さらに面白いことがありました

そうそう、作成手順２の変換処理をコマンドプロンプトから行ったとき、おもしろい発見がありました。

コマンドプロンプトに変換した文字をデバッグ出力してたら、あれっ、これ調整したらコマンドプロンプトでも動画見れるんじゃね？ってなったらしいです。

文字の折り返しが無く１行が画面に収まるようにコマンドプロンプトの調整が必要です。

実行したら、こうなりました。

youtu.be

コマンドプロンプトで見ることができる動画！おもしろーい！

ただし息子くんいわく、性能低いPCだとスローモーション動画になるよって言ってました。

追記

現状、この動画コンバーターはとてもコンバート時間がかかると。
改善したいということで、OpenGLを用いたコンバートをしようと実装したそうなんです。

しかし、OpenGLでコンバート処理するとフォントの種類が指定できない？？とかだったそうで、等幅フォントでないフォントが使用されて画像ががたがたになってしまったらしく。
２～３時間かけて作ったコードが使い物にならなかった！と憤慨してました。

OpenGLて、あーた、私が大学の卒業研究で使ってたやつなんですけど。
我が息子ながら感心してしまいます。

スター・はてブとても嬉しいです！

小6息子くんMESHをゲームコントローラーにしてみた

息子くん前回の大会の賞品のひとつとしていただいた、MESH。

これを使って遊んだ記事です。

MESHとは

手軽にIOTできるキットです。

この７ブロックのフルセットをいただきました☆
たぶん自分じゃ買わない（買えない）、結構ないいお値段しますね(￣д￣)

・LEDブロック
・ボタンブロック
・人感ブロック
・動きブロック
・明るさブロック
・温度・湿度ブロック
・GPIOブロック

ブロック同士で連携しても遊べますが、１個だけでも充分おもしろいことができますよ！ばらばらでも売ってます。

こちらの大会でいただきました。本当有難いです。
siroitori.hatenablog.com

どんなことができるのか

各ブロックはBluetoothでスマホ（タブレット）につながります。
そしてスマホに入れたアプリで挙動を設定することができます。

MESHアプリの画面

たとえば、ボタンのブロックを使って上の図のようにボタンタグ（タグという表現をします）と音楽とつなげると、「ボタンブロックのボタンを押すとスマホから音楽が鳴る」という仕組みを作ることができます。

音楽はどの曲を鳴らすかなどの細かい設定が画面から可能で、簡単に感覚的に作れるようになっています。

簡単に作れる！がしかし

息子くんとこれで何をつくるかいろいろ考えてみました。

人感センサーあるから、「トイレ使用中」とかの表示をどこかの画面に出してみるとか？話してたけど、息子くん冷めた感じで「それはいらんね～」と。
確かに我が家のメンバーはトイレ早い人ばかりなので争奪戦になったことや出るのを待つことなどなく、人とタイミングがかぶることは年に１度くらいしかありません。

常に実用的（自分にとって必要）なものを求める息子くん。

うーん。考えれば考えるほど何を作るか思いつきません。

そもそもMESHのアプリでできる範囲内で考えてるから、アイデアの幅が狭まってるんですよね。

MESH SDKとな

で、調べ進めると、MESH SDKなるものの存在が判明。
これを使うとJavaScriptで思いのままにやりたい動作が書けるみたい。

たとえば上のアプリのスクショ画像の、「ボタンを押したとき」のタグの詳細な処理を自分で作ることができます。
あとは、IFTTTやWebhooksと連携させても面白いことできそうですね。

以前、息子くんがIFTTTを使って開発した作品
siroitori.hatenablog.com

IFTTTって単体で使っても、毎日お天気のメールをくれたり設定次第で色々できて便利ですよね。

そして結局息子くんが作っていたもの

動きブロックがゲームのコントローラーになってました！

youtu.be

内部構造

・MESH SDK を使って、動きブロックが動いたらその情報でリクエストを投げるようにJavaScriptで記述
・リクエストを待ち受ける口はVBで作成。受けたリクエスト情報にもとづきキー入力イベントを発生させる
　ここではRobloxのコントローラーにしたので、前に進むを受け取ったら「w」（&H57）キーイベントを発生

ソースはきれいに書けてないから公開してはいけないと言われたので、控えます(;^ω^)

しかしコントローラー用途でわざわざリクエストを投げるなんて、て感じですよね、、
でも、たぶん今わかっている知識の範囲内ではMESHでコントローラーを実現しようと思ったらこれしか方法がないかな～。
それならmicro:bitをつないでやったほうがいいですね。あは。

以前、micro:bitをコントローラーにしたことがあったときの記事
siroitori.hatenablog.com

またなにかおもしろいことができたらご紹介します^^

スター・はてブとても嬉しいです！