PSoC 6 Pioneer Kit / E-ink ディスプレイの表示データを作ってみる
PSoC Advent Calendar 2017の7日目の記事です。
PSoC 6 Pioneer Kit の E-ink ディスプレイで遊んでみます。
今回は、PSoC 側のコードは書きません。
※PSoC 6 Pioneer Kit を使うには、PSoC Creator 4.2 が必要になります。
PSoC Creator 4.2 について
2017/12/07 現在、正式リリースはされていません。ベータバージョンとして提供されています。
下記の PSoC 6 のページからリンクが張られており、ダウンロードには、ユーザ登録が必要です。
Cypress PSoC 6
http://www.cypress.com/products/32-bit-arm-cortex-m4-psoc-6
プロジェクトを作成
「Create Project」を押す
「Target kit」「CY8CKIT-062-BLE (PSoC 63)」を選択して、「Next >」を押す
「Code example」を選択して、「Next >」を押す
「CE218133_EINK_CapSense」を選択して、「Next >」を押す
「Next >」を押す
ワークスペース名など、任意に設定して、「Finish」を押す
サンプルプロジェクトの実行
screen.c の 140行目に BreakPoint をしかけて、デバッグ実行(デバッグ実行ボタンを押すか、F5を押す)する
デバッグターゲット選択画面が表示される場合は、
「PSoC 63 CY8C6347BZI-BLD53(CM0p)」を選択して、「OK / Connect」を押す
ビルドされ、書き込みが完了し、実行される。
実行されると、main_cm0p.c の main 関数の頭で、止まるので、F5 を押して進めると....
E-ink ディスプレイにイメージが描画される。
Shift+F5 で、デバッグ実行を止める。
ここで、デバッグ実行を止めずに、そのまますすめると、このサンプルプロジェクトを試すことができます。
Pioneer Kit の右下のタッチセンサー部分をスライドしたり、タッチすることで、画面が書き換わります。
画像データを書き換えてみる
次に、このサンプルプロジェクトの起動画面を書き換えてみます。
screen_contents.c : 509行目から、起動画面のイメージがあります。
ここの最初の1バイトを、0xFF から 0x00 に書き換えて、デバッグ実行します。
さらに、F5を押して、進めると....
E-ink ディスプレイの左上に、小さな線(縦1ピクセル/横8ピクセル)が描かれていることがわかります。
画像イメージは、1ビットが1ピクセルに対応しています。つまり、1バイトで、8ピクセル。
この E-ink ディスプレイは、縦横264x176なので、全画面の画像データは、264×176÷8 = 5808バイトとなります。
そんなデータをひたすら書いていくのはつらいので、BMP から画像データへのコンバータを作ってみました。
画像データコンバータ
やることは単純です。
BMP ファイルを読み込み、1ピクセルずつ色を見て、1バイトに詰めて、16進数表示でテキストにしています。
処理を簡単にするために、BMP の赤のみをみています。
下記のコードは、WPF/C# の一部です。
(Linuxな方!PNG対応したい方!Advent Calendar 書くネタないなぁという方!コンバータ作って、ぜひ投稿してください)
MainWindow.xaml
<Window (snip) Title="MainWindow" Height="350" Width="525"> <Grid> <Button Content="File Select" HorizontalAlignment="Left" Margin="10" VerticalAlignment="Top" Width="80" Height="20" FontSize="12" Click="Button_Click"/> <TextBox Name="tbResult" Margin="10,40,10,10" /> </Grid> </Window>
MainWindow.xaml.cs
using Microsoft.Win32; using System; using System.Windows; using System.Drawing; namespace (Your Namespace) { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void Button_Click(object sender, RoutedEventArgs e) { OpenFileDialog ofd = new OpenFileDialog(); string result = ""; ofd.DefaultExt = ".bmp"; ofd.Filter = "BMP|*.bmp"; if (ofd.ShowDialog() == true) { Bitmap bitmap = new Bitmap(ofd.FileName); for (int y = 0; y < bitmap.Height; y++) { result += " "; for (int x = 0; x < bitmap.Width; x+=8) { int a = 0; for (int i = 0; i < 8; i++) { a = a << 1; Color c = bitmap.GetPixel(x+i, y); if (c.R > 127) a |= 1; } result += string.Format("0x{0:X02}, ", a); } result += string.Format("// {0}", y + 1) + Environment.NewLine; } tbResult.Text = result; } } } }
読ませるBMPファイルは、縦横264x176の物を準備してください。
サイズが間違っていると、画像がずれたり、動作がおかしくなります。
実行後、出力された16進数のデータを、screen_contents.c の 511~686行目と部分に上書きします。
※画像ではわかりにくいですが、176行分上書きしてください。
これを、デバッグ実行すると....
うまく表示されました!