でばいすの山小屋

デバイスとかクラウドを実験中。IoTのふもとあたりをうろうろ。

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


プロジェクトを作成

PSoC Creator 4.2 を起動します

f:id:blgkns:20171207030242p:plain:w480
「Create Project」を押す

f:id:blgkns:20171207030243p:plain:w480
「Target kit」「CY8CKIT-062-BLE (PSoC 63)」を選択して、「Next >」を押す

f:id:blgkns:20171207030244p:plain:w480
「Code example」を選択して、「Next >」を押す

f:id:blgkns:20171207030245p:plain:w480
「CE218133_EINK_CapSense」を選択して、「Next >」を押す

f:id:blgkns:20171207030246p:plain:w480
「Next >」を押す

f:id:blgkns:20171207030247p:plain:w480
ワークスペース名など、任意に設定して、「Finish」を押す


サンプルプロジェクトの実行

f:id:blgkns:20171207030248p:plain:w480
screen.c の 140行目に BreakPoint をしかけて、デバッグ実行(デバッグ実行ボタンを押すか、F5を押す)する

f:id:blgkns:20171207030249p:plain:w480
デバッグターゲット選択画面が表示される場合は、
PSoC 63 CY8C6347BZI-BLD53(CM0p)」を選択して、「OK / Connect」を押す

ビルドされ、書き込みが完了し、実行される。
実行されると、main_cm0p.c の main 関数の頭で、止まるので、F5 を押して進めると.... f:id:blgkns:20171208011113p:plain:w480
E-ink ディスプレイにイメージが描画される。

Shift+F5 で、デバッグ実行を止める。

ここで、デバッグ実行を止めずに、そのまますすめると、このサンプルプロジェクトを試すことができます。
Pioneer Kit の右下のタッチセンサー部分をスライドしたり、タッチすることで、画面が書き換わります。


画像データを書き換えてみる

次に、このサンプルプロジェクトの起動画面を書き換えてみます。

f:id:blgkns:20171207030251p:plain:w480
screen_contents.c : 509行目から、起動画面のイメージがあります。
ここの最初の1バイトを、0xFF から 0x00 に書き換えて、デバッグ実行します。
さらに、F5を押して、進めると....

f:id:blgkns:20171207030252p:plain:w480
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の物を準備してください。
サイズが間違っていると、画像がずれたり、動作がおかしくなります。


f:id:blgkns:20171207030253p:plain:w480
実行後、出力された16進数のデータを、screen_contents.c の 511~686行目と部分に上書きします。
※画像ではわかりにくいですが、176行分上書きしてください。


これを、デバッグ実行すると....

f:id:blgkns:20171207030254p:plain:w480
うまく表示されました!