カスタマーディスプレイ(4インチ)を使う

カスタマーディスプレイとは

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

カスタマーディスプレイ

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

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

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

カスタマーディスプレイでできること

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

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

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

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

12パターンの表示レイアウトについて

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

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

 

12種類の画面パターン

※【2画面フルタッチ決済端末機】CustomerDisplayJavaAPI仕様書_V1.2.pdf スクリーンショット

 

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

 

<注意>

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

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

 

画面パターンごとの表示指定可能エリア

※【2画面フルタッチ決済端末機】CustomerDisplayJavaAPI仕様書_V1.2.pdf スクリーンショット

 

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

 

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

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

タグ名称

内容

customerDisplayApi Element

カスタマーディスプレイ表示の開始と終了を示すタグ

下記属性を必ず設定してください。

・id属性

 呼び出し元アプリケーションのパッケージ名を指定します。

許可されたアプリケーションのみカスタマーディスプレイを使用できます。

 

customerDisplayApi以下には必ず下記要素を1つ以上指定してください。

・screenPattern要素

・headerArea要素

・imageArea要素

・messageArea要素

・buttonTop要素

screenPattern Element

画面パターンの指定をするタグ

customerDisplayApiの要素として指定します。

表DisplayFormat01に書かれている表示パターンのいずれかを指定します。

headerArea Element

ヘッダエリアの表示内容を示すタグ

customerDisplayApiの要素として指定します。

表DisplayFormat01でヘッダに●がついている表示パターンで使用します。

headerArea以下にheaderAreaNumber要素、customerString要素を必ず指定してください。

headerAreaNumber Element

ヘッダエリア番号を指定するタグ

headerAreaの要素として指定します。

選択した表示パターンのヘッダエリア1~3を指定します。

同headerArea内にcustomerString要素を指定してください。

customerString Element

表示文字列を指定するタグ

headerArea/messageAreaの要素として指定します。

記載できる最大文字数は下記のとおりです。(すべて全角文字数)

・ヘッダエリア1:11文字

・ヘッダエリア2:12文字

・ヘッダエリア3:11文字

・メッセージエリア:20文字

imageArea Element

イメージエリアの表示内容(画像)を示すタグ

customerDisplayApiの要素として指定します。

表DisplayFormat01でイメージエリアに●がついている表示パターンで使用できます。

imageArea以下にimageAreaNumber要素、imageNumber要素を必ず指定してください。

imageAreaNumber Element

ヘッダエリア番号を指定するタグ

imageAreaの要素として指定します。

imageAreaNumberは“1”固定で指定します。

同imageArea内にimageNumberを指定してください。

imageNumber Element

表示する画像の登録番号を指定するタグ

imageArea/buttonTopの要素として指定します。

事前にregisterCustomerImageメソッドで画像の登録をしてください。

指定できる画像は下記のとおりです。

・imageArea内:表示用

・buttonTop内:ボタン用

messageArea Element

メッセージエリアの表示内容(メッセージ)を示すタグ

customerDisplayApiの要素として指定します。

表DisplayFormat01でメッセージエリアに●がついている表示パターンで使用できます。

messageArea以下にmessageAreaNumber要素、customerString要素を必ず指定してください。

messageAreaNumber Element

メッセージエリア番号を指定するタグ

messageAreaの要素として指定します。

選択した表示パターンのメッセージエリア1~5を指定します。

同messageArea内にcustomerString要素を指定してください。

buttonTop Element

ボタントップの表示内容を示すタグ

customerDisplayApiの要素として指定します。

表DisplayFormat01でボタンエリアに●がついている表示パターンで使用できます。

buttonTop以下にbuttonNumber要素、imageNumber要素を必ず指定してください。

buttonNumber Element

ボタントップ番号を指定するタグ

buttonTopの要素として指定します。

選択した表示パターンのボタントップ番号1~4を指定します。

同buttonTop内にimageNumber要素を指定してください。

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

 

■画面パターン1

XML

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

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

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

 

カスタマーディスプレイ画面の表示イメージ1

■画面パターン2

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>

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

 

カスタマーディスプレイ画面の表示イメージ2

 

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

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

実際に表示してみる

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

 

カスタマーディスプレイの表示手続き

 

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

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

// アプリケーションタグ(ユニークなアプリケーション名。事前に申請が必要)
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();
    }
}