見出し画像

TWSNMP FC:マップにノードとラインを表示できた

twsnmp

今朝も猫は３時前から騒いでいました。かみさんが、いろいろお世話しても騒ぎが治まりません。どうやら私に起きてTWSNMP FCのマップ表示の続きを作れと催促しているようでした。私が３時半に起きると彼は、かみさんの布団に潜って寝てしまいました。時々、スープを食べがてら様子を見に来ています。おかげでマップ表示の開発がだいぶ進みました。
今日の成果は、

画像1

です。画面をみるとショボイですが、沢山ノウハウが詰まっています。
マップにアイコンを表示する部分を復刻版ではloadFontでアイコンのフォントファイルを読み込んでいましたが、そうしなくてもCSSで読み込んだフォントが使えることが、

を読んでわかりました。助かりました。

p5.textFont('Material Design Icons')
p5.textSize(32)
p5.textAlign(p5.CENTER, p5.CENTER)
p5.text(icon, 0, 0)

のようにアイコンのフォントを選んでアイコンの文字列を描画すれば表示できます。アイコンの文字列は、

のアイコンのコードポイントを調べて、

で文字列に変換しています。デスクトップのアイコン（mdi-desktop-mac）は、

icon = String.fromCodePoint(0xF01C4）

のように変換します。この方法は何とか見つけたのですが、この１６進数のコードポイントをソースコードに書くところでかなり苦労しました。その話は面白いので別の記事で書こうと思っています。

今朝の開発作業は、

です。明日に続く。

開発のための諸経費（機材、Appleの開発者、サーバー運用）に利用します。 ソフトウェアのマニュアルをnoteの記事で提供しています。 サポートによりnoteの運営にも貢献できるのでよろしくお願います。