寿司ネタを選ぶ画面をつくる-2

回転寿司で学ぶHMI開発シリーズ
イントロダクション
(1)寿司ネタを選ぶ画面を作る-1
(2)寿司ネタを選ぶ画面を作る-2
(3)注文履歴画面を作る
(4)画面通知 を作る

前回の記事で画面番号0のトップ画面を作成しました。その記事の中では
・ファンクションキーを使った画面移動
・ビットスイッチの配置
・各部品に使う画像の読み込み
・各部品の画像の変更
・各部品の銘板の付け方
・画面上への文字列の表示
について取り上げました。上記の作業についてはこの記事では割愛しますので操作方法をご存じでない方は
(1)寿司ネタを選ぶ画面を作る-1 をご覧ください。

この記事では画面番号10-13を作っていきます。

「握り」、「軍艦」、「サイドメニュー」、「ドリンク」の各画面に必要な機能は共通しています。
(a)トップに戻る(違うカテゴリのネタの画面に移動するために戻ります)(b)ネタを選ぶ
(c)注文する皿数を入力
(d)注文を出す
(e)お会計ボタン
この(a)-(e)の部品をどのように配置するかイメージしましょう。

各部品の種類と配置を図にしました。
1-4で注文したいネタをタップすると5に選択中のネタが表示されます。
6に皿数を入力して7で注文を出します。
コマンドボタン、ワードランプ、ビットスイッチ、数値入力の部品は
プロジェクトライブラリ>部品 の所にあります。
画面移動については プロジェクトライブラリ>機能部品 にあります。

画面上に部品を配置します。プロジェクトワークスペースの中から画面番号10(10:Frame10)を選び「握り」画面を開きます。

とりあえず部品を一通り配置しました。コマンドボタン、ワードランプ
そして数値入力は初出なので説明します。
・コマンドボタン
 任意の読み込みアドレスに対して値を設定したり、増減させるボタンです。
 このボタンは自分で押すことはもちろん、画面の読み込みなどのイベントが発生したときに
 自動で押させることも出来ます。
 ここでは「マグロ、甘えび、焼きトロサーモン、〆さば」にLW100のアドレスを割り当てました。
 マグロを押すとLW100に1が、甘えびを押すと2が、焼きトロサーモンを押すと3が、
 〆さば を押すと4が書き込まれるように設定します。


・ワードランプ
 ビットランプはOn,Offの2種類の状態しか表現できませんが、このランプは選択した変数(LW,W,D,CIOなど)の1ワード分の数だけの状態を表現できます。
ここではワードランプ(選択中のネタを表示)にLW100を割り当てました。LW100の値が1のときはマグロ、2のときは甘えび、3のときは焼きトロサーモン、4のときは〆さばと表示するように設定します。
初期値は0なので0のときには「お好きなネタをご注文下さい」と表示させます。


・数値入力
  選択した変数(LW,W,D,CIOなど)の アドレスに数値を書き込みます。
 データ形式、入力する桁数、小数点の位置、値の上限、下限を設定します。
 ここではLW200のアドレスを割り当てます。データ形式はBCDです。
同じネタを100皿頼む人はいないでしょうから桁数は2、上限は99、 下限は1とします。

残りの部品の設定を行います。
・トップ 画面0へ移動
・注文履歴 画面14へ移動
各部品の設定が完了したらデザインを整えていきます。部品に使われる画像の読み込み、変更方法は前の記事をご覧ください。

同じ要領で他の画面も作成していきましょう。
画面全体をコピペして作成します。

背景はコピーされないので再度設定する必要があります。

コピペした後に画像と文字を変更します。

以上で寿司ネタを選ぶ画面は完成です。

回転寿司で学ぶHMI開発シリーズ
イントロダクション
(1)寿司ネタを選ぶ画面を作る-1
(2)寿司ネタを選ぶ画面を作る-2
(3)注文履歴画面を作る
(4)画面通知 を作る


コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です