8×8ドットマトリクスの実験回路

今後の実験に使うため、8×8ドットマトリクスの実験回路を作りました。
(だいぶ前の制作ですが、進展する気配が無いので、とりあえずUP)
実装基板
回路図・使用部品は次のとおり。特に目新しいものはありません。
実験基板の回路図
シフトレジスタ74HC595をカスケード接続し、3~4本の信号線でマトリクスのアノード・カソード側を操作する仕組みです。LEDのドライブには、おなじみのTD62783(Source),TD62083(Sink)を使用。今回は以下のような信号をシフトレジスタに入力し、パターンを動かしてみました。
LEDDOT_timing
この信号を入力すれば、パターンの動作は下のようになります。
LED_Gif_Animation
※74HC595の端子について、シリアル・イン(Pin14)を”SER”、クロック・インプット(Pin11)を”SCK”、リセット(Pin10)を”SCL”、ラッチ(Pin12)を”RCK”として表しましたが、この名称は互換ICのメーカによって異なるみたいです。ピン番号と機能は変わりません。

さて、「たかがLED部品1個」と高をくくっていましたが、はんだ付けに数日かかってしまいました。次からはちゃんとPCB作ろ・・・

今後やること
・ダイナミック点灯・多階調化のためのソフトを書き、フルカラーLEDに対応。
・PCBを作りモジュール化。連結数や方向をどう認識させよう?
・多段連結させるとして、フリッカをどうしよう?
・LEDマトリクスを自作する(チップLEDを表面実装)

やっぱり、光りものは夢がありますねー
今回はここまで。

FontForgeでTrue Type Font を作るときの注意点

高機能でフリーなフォント作成ツールFontForgeを弄り、True Type Font(TTF)を作ってみました。

オリジナルフォント DSEG7 ファミリ

FontForgeを扱うのは、Serious Samurize用のデジタル時計を作って以来で7年ぶりでした。色々忘れていたのでリファレンスマニュアルを見ながら作業しました。

基本的に、

  1. Illustratorで図形を編集
  2. SVGで出力
  3. FontForgeで読み込んで微調整

というフローで製作していましたが、書体がくずれたり、Windowsでフォントスタイル名(Bold,Italicなど)が認識されない等の不具合にかなり悩まされました。ここでは、その過程で気づいた注意点を列挙しておきます。

実験環境:
Windows7 + Illustrator CS5.5
Ubuntu 14.04LTS + FontForge 20120731

1.FontForgeへのインポートはSVG1.1で行いましょう

Illustratorが吐いたEPSはFontForgeでは殆ど読み込めません。パスが2重になってしまいました。これは、イラレが吐くEPSがAdobe独自の拡張形式だからでしょう(未検証)。SVG1.1もしくは1.0で出力すればOKです。

2.Illustratorで円・楕円を描くとき、アンカーポイントを追加しましょう

IllustratorでR=50pxの円を描き、SVG1.1で出力すると、次のようなコードが生成されます。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<circle cx="25" cy="25" r="25"/>
</svg>

ところが、FontForgeが<circle>タグをうまく解釈できないようで、読み込ませるとつぶれた円になります。楕円でも同様です。同じ制御点数でも、もう少しうまく近似できるはずなんですが・・・
Fontforgeのつぶれた円
これを避けるためには、Illustratorで[オブジェクト]->[パス]->[アンカーポイントの追加]を行えばOKです。出力されたSVGを見れば、下のようにスプライン補完で記述されていることが分かると思います。ちなみに、円・楕円は2次スプラインでは厳密に表現できません(近似になります)。気になるならば、アンカーポイントをさらに追加するのが良いでしょう。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<path d="M50,25c0,6.904-2.798,13.154-7.322,17.678C38.153,47.202,31.903,50,25,50s-13.153-2.798-17.678-7.322
	C2.798,38.154,0,31.904,0,25S2.798,11.846,7.322,7.322C11.847,2.798,18.097,0,25,0s13.153,2.798,17.678,7.322
	C47.202,11.846,50,18.096,50,25z"/>
</svg>

3.制御点の座標は、整数値のみ対応しているので注意しましょう

FontForgeではこの仕様に対応するため、TTF出力の際に座標が丸められます。スプライン曲線の形状が若干変化するので、高さの幅を大きくする等して対応しましょう。なお、OpenTypeFontで出力するのであれば気にしなくても大丈夫ですが、ファイルサイズ削減のためにも、整数値で出力できるように設計しましょう。(固定小数点での出力はFontForgeの独自拡張でした。どのタイプのフォントでも整数に丸める必要があります。)

4.Font情報はきちんと入力しましょう

FontForgeの[エレメント]->[フォント情報]で設定できる項目はややこしいですが、マニュアル通りに入力しましょう。例えば、フォント名「Foo Bar」でスタイル名「Bold Italic」にしたい場合は、次のように設定しましょう。スペースやハイフンに注意して下さい。

  • 「PS Names」はTTF出力する際にも入力しましょう。
    • フォント名:FooBar-BoldItalic
    • ファミリー名:Foo Bar
    • 表示用の名前 Foo Bar-Bold Italic
  • 「一般情報」の「イタリックの傾き」を設定しましょう。これを設定しないと、筆者のWindows機では標準書体と混在できませんでした。Windowsが斜体を判定するときにこの値を見ているようで、競合するためだと考えられます。
  • 「TTF名」のスタイル(サブファミリー)を右クリックし、「PostScript名と切り離す」を選択し、「Bold Italic」と入力しましょう。

以上を怠ると、私の環境ではIllustratorのフォント選択タブの文字がバグる、そもそもWindowsにインストールできない、などの問題が発生しました。

これで私の問題は解決しました。
嵌まりそうな問題があれば、見つけ次第追加します。

Firefoxの「Web開発ツール」を使ってWordPressを楽にカスタマイズ

WordPressのカスタマイズは、複雑な構造を把握する必要があるため大変です。ここではFirefox付属のWeb開発ツール”インスペクタ”を使用し、変更すべき箇所をすばやく探す方法を提案します。

はじめてのWordPress

WordPressをインストールしたので、テーマのカスタマイズに挑戦しました。構造を知るために、デフォルトテーマであるTwentyTwelveを改造してみます。

TwentyTwelveテーマ

TwentyTwelveテーマ

シンプルで大変良さそうです。これなら初心者にもさぞ簡単なことでしょう!

FirefoxのWeb開発ツールを使ったカスタマイズ

・・・ところがこのTwentyTwelve、見た目はシンプルなのに構造は大変複雑です。PHPのファイルも多いし、何よりCSSのルールがたくさんあり、中々把握できません。

そこで目をつけたのが、Firefoxの「Web開発」ツールです。特にCtrl+Shift+Cで起動できるインスペクタは、クリックした場所のHTMLソースとCSSルールを表示してくれるため、どこを変更すれば良いのか一目瞭然です。以下、実際に試してみましょう。

1.子テーマを作成

まずこの記事を参考に、子テーマのスタイルシートstyle.cssを作成します。テーマは頻繁にバージョンアップされるらしいので、親テーマを直接編集するのは避け、差分を子テーマとして保存します。

2.インスペクタを利用して変更すべき点を把握

例として、枠線の色を変え角を丸くしてみましょう。
まず、Firefoxのインスペクタを起動します。

Firefoxのインスペクタ

Firefoxのインスペクタ

次に、変更したい箇所(ここでは大枠のブロック)にマウスを近づけ、ハイライトさせた状態でクリックします。

インスペクタ・ツールでハイライトさせた様子

インスペクタ・ツールでハイライトさせた様子

すると、左下にHTML文の行がハイライト表示され、右下にCSSのルールが表示されます。右下に注目すると、style.css(親テーマ)の1641行目に以下の記述があり、ここを変更すれば良いことが分かります。

body .site {
    padding: 0px 2.85714rem;
    margin-top: 3.42857rem;
    margin-bottom: 3.42857rem;
    box-shadow: 0px 2px 6px rgba(100, 100, 100, 0.3);
}

3.子テーマに反映

そこでstyle.css(子テーマ)に、以下の記述を追加します。1px・#555555の実線で枠を囲み、四隅を半径20pxで丸めてみましょう。

body .site{
	border:1px solid #555;
	border-radius:20px;
}

子テーマを適用すると、以下のようにスタイルが変わります。

子テーマ適用後

子テーマ適用後

※ただし、複数箇所に同じセレクタが定義されていることが多いため、むやみにスタイルを変更すると、目的の箇所以外のスタイルが変更されてしまう恐れがあります。その場合は、子孫セレクタ(Descendant selectors)などを活用して、該当する要素を絞り込む必要があります。本稿でもこうしています。

こんな感じで、簡単に変更できちゃいます。初めてFirefoxのWeb開発ツール群を使ってみましたが、痒い所に手が届く感じ。テキストエディタでHTML/CSSを編集していた頃より、便利な世の中になったもんです・・・。

これを足がかりに、次はオリジナルテーマを作ってみたいですね。

参考文献: