カスタマーディスプレイ（４インチ）を使う

stera terminal（ステラターミナル）にはメインディスプレイとは別に、お客様側へ情報を表示するための４インチのカスタマーディスプレイが搭載されています。

カスタマーディスプレイにはテキスト、画像の表示ができます。

また、ディスプレイはタッチパネルになっており、お客様へタッチ画面を提示することができます。

カスタマーディスプレイの制御はすべてPaymentApi.jar経由で行います。

カスタマーディスプレイには12種類の画面パターンが用意されており、テキストや画像を表示することができます。

アプリケーションごとに画像は最大20枚、合計サイズは300KByte（1画像あたり最大30KByte）まで登録できます。

ソフトウェアバージョンが D40.10.179以降の場合、合計サイズは1MByte（1画像あたり最大100KByte）になります。

画面パターンにより表示できるサイズ(文字数、行数)が異なることに注意してください。

表示する内容はXMLで記述します。

カスタマーディスプレイを使用する際は、12種類の画面レイアウトの中から1種類を使用することができます。

12種類の画面パターンは下記になります。

画面パターンごとに画面フォーマットが決まっており、画面パターンごとの表示指定可能エリア（下表「●」に該当）に表示したいイメージ、またはテキストをユーザ側で指定することができます。

＜注意＞

・画面パターン１で白単色のイメージを指定すると、ライトの代わりとなり、スマートフォンに表示しているQRコードが読み取りやすくなります。

・画像は自動でリサイズされないため、イメージ１エリアのサイズに合わせた画像をご用意ください。画像サイズがイメージ１エリアより大きかった場合、エリアからはみ出た部分は無視されます。

DisplayFormat01

カスタマーディスプレイで指定可能なタグは下記のとおりです。

■カスタマーディスプレイXMLタグ

表の詳細については横スクロールさせて確認することができます。

画面パターン１と２のXMLと実際に表示されるカスタマーディスプレイの画面を以下に記載します。

■画面パターン１

XML

コードは横スクロールさせて確認することができます。

<?xml version="1.0" encoding="UTF-8"?>
<customerDisplayApi id="displayopening">
  <screenPattern>1</screenPattern>
  <imageArea>
    <imageAreaNumber>1</imageAreaNumber>
    <imageNumber>1</imageNumber>
  </imageArea>
</customerDisplayApi>

カスタマーディスプレイ画面

■画面パターン２

XML

コードは横スクロールさせて確認することができます。

<?xml version="1.0" encoding="UTF-8"?>
<customerDisplayApi id="displaycoupon">
  <screenPattern>2</screenPattern>
  <headerArea>
    <headerAreaNumber>1</headerAreaNumber>
    <customerString>Header1</customerString>
  </headerArea>
  <headerArea>
    <headerAreaNumber>2</headerAreaNumber>
    <customerString>Header2</customerString>
  </headerArea>
  <headerArea>
    <headerAreaNumber>3</headerAreaNumber>
    <customerString>Header3</customerString>
  </headerArea>
  <imageArea>
    <imageAreaNumber>1</imageAreaNumber>
    <imageNumber>2</imageNumber>
  </imageArea>
  <messageArea>
    <messageAreaNumber>1</messageAreaNumber>
    <customerString>Message1</customerString>
  </messageArea>
  <buttonTop>
    <buttonNumber>1</buttonNumber>
    <imageNumber>4</imageNumber>
  </buttonTop>
</customerDisplayApi>

カスタマーディスプレイ画面

※画像サイズがイメージエリアのサイズより大きいため、一部が無視されています。

※背景の画像は画面パターン１の例と同じものを使用しています。

カスタマーディスプレイを利用するためには、下図の手続きを実施する必要があります。

実際のコードは下記のとおりです。

コードは横スクロールさせて確認することができます。

// アプリケーションタグ（ユニークなアプリケーション名。事前に申請が必要）
private static final String TAG = "com.panasonic.sample.customerdisplay.application"

// 画像ファイル
private static final String FILE_PATH_DISPLAY_IMAGE = "/sdcard/SampleDisplayImage.png";
private static final String FILE_PATH_BUTTON_YES_IMAGE = "/sdcard/SampleButtonYesImage.png";
private static final String FILE_PATH_BUTTON_CANCEL_IMAGE = "/sdcard/SampleButtonCancelImage.png";

// イベントハンドラ
private ICustomerDisplayListener mCustomerDisplayListener = new ICustomerDisplayListener.Stub() {
    @Override
    public void onOpenComplete(boolean result) {
        // カスタマーディスプレイ接続完了時に呼び出される

    }

    @Override
    public void onDetectButton(int button) {
        // カスタマーディスプレイ内のボタンタッチが検出された時に呼び出される

    }
};

// カスタマーディスプレイの初期化処理
private void initializeSample() {
    try {
        mCustomerDisplay.registerCustomerDisplayListeners(TAG, mCustomerDisplayListener);
        mCustomerDisplay.openCustomerDisplay(TAG);

        // この後、onOpenCompleteが呼び出されるのを待つこと

    } catch (ArgumentException| FatalException e) {
        e.printStackTrace();
    }
}

// カスタマーディスプレイ表示内容のセットアップ
private void setupSample() {
    // 画像の事前登録
    // ID指定した画像はXML上から呼び出す
    try {
        mCustomerDisplay.setCustomerImage(TAG, ICustomerDisplay.IMAGE_KIND_DISPLAY, 25, FILE_PATH_DISPLAY_IMAGE);       // ID=25に画像を指定
        mCustomerDisplay.setCustomerImage(TAG, ICustomerDisplay.IMAGE_KIND_BUTTON, 10, FILE_PATH_BUTTON_YES_IMAGE);     // ID=10にボタンイメージを指定
        mCustomerDisplay.setCustomerImage(TAG, ICustomerDisplay.IMAGE_KIND_BUTTON, 11, FILE_PATH_BUTTON_CANCEL_IMAGE);  // ID=11にボタンイメージを指定
    } catch (ArgumentException| FatalException e) {
        e.printStackTrace();
    }
}

// 
private void displaySample() {
    // カスタマーディスプレイ表示内容XMLの作成
    StringBuilder sb = new StringBuilder();
    sb.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
    sb.append("    <customerDisplayApi id=\"xxxxxxxxx\">");
    sb.append("    <screenPattern>3</screenPattern>");
    sb.append("    <headerArea>");
    sb.append("        <headerAreaNumber>1</headerAreaNumber>");
    sb.append("        <customerString>Revolving</customerString>");
    sb.append("    </headerArea>");
    sb.append("    <headerArea>");
    sb.append("        <headerAreaNumber>2</headerAreaNumber>");
    sb.append("        <customerString>Credit</customerString>");
    sb.append("    </headerArea>");
    sb.append("    <headerArea>");
    sb.append("        <headerAreaNumber>3</headerAreaNumber>");
    sb.append("        <customerString>$123.45</customerString>");
    sb.append("    </headerArea>");
    sb.append("    <imageArea>");
    sb.append("        <imageAreaNumber>1</imageAreaNumber>");
    sb.append("        <imageNumber>25</imageNumber>");         // ID=25の画像を指定
    sb.append("    </imageArea>");
    sb.append("    <messageArea>");
    sb.append("        <messageAreaNumber>1</messageAreaNumber>");
    sb.append("        <customerString>PRESS YES TO ACCEPT</customerString>");
    sb.append("    </messageArea>");
    sb.append("    <buttonTop>");
    sb.append("        <buttonNumber>1</buttonNumber>");
    sb.append("        <imageNumber>10</imageNumber>");         // ID=10のボタンを指定
    sb.append("    </buttonTop>");
    sb.append("    <buttonTop>");
    sb.append("        <buttonNumber>2</buttonNumber>");
    sb.append("        <imageNumber>11</imageNumber>");         // ID=11のボタンを指定
    sb.append("    </buttonTop>");
    sb.append("</customerDisplayApi>");

    // カスタマーディスプレイに表示する
    try {
        mCustomerDisplay.doDisplayScreen(TAG, sb.toString());
    } catch (ArgumentException| FatalException e) {
        e.printStackTrace();
    }
}

// カスタマーディスプレイの終了処理
private void terminateSample() {
    try {
        mCustomerDisplay.stopDetecting(TAG);
        mCustomerDisplay.closeCustomerDisplay(TAG, false);
        mCustomerDisplay.unregisterCustomerDisplayListeners(TAG);
    } catch (ArgumentException| FatalException e) {
        e.printStackTrace();
    }
}

カスタマーディスプレイのタッチを読み取るためには、ICustomerDisplayListenerのonDetectButton(int button)メソッドにタッチ時の処理を記載します。

下記コードではボタン1が押下されたときにアラート表示を行っています。

コードは横スクロールさせて確認することができます。

@Override
public void onDetectButton(int button) {
    // カスタマーディスプレイ内のボタンタッチが検出された時に呼び出される
    // 引数buttonは事前に設定した画像No
    if(button == 1){
        // ボタンNo.1がタップされたら、アラートを表示する
        final AlertDialog.Builder dialog
            = new AlertDialog.Builder(mContext);
        dialog.setMessage(mContext.getString(R.string.errorShutDown))
            .setPositiveButton("OK", null)
            .show();
    }
}