レイアウト設計

<< Click to Display Table of Contents >>

トレーニング > 中級編 > 1.プロジェクトの作成 >

レイアウト設計

レイアウトを設計する

実際に監視画面を実行するPCの解像度を想定して監視画面を作成することで、より綺麗で効果的な監視システムを構築できます。ここでは、レイアウト設計において検討が必要なポイントについて解説します。

 

 

 

実行時の画面サイズの検討

固定・可変の検討

実際に監視画面として表示された際のサイズをいくつにするべきかを検討する上で、まずは以下の2パターンでの検討が必要です。

固定サイズとして表示

単一のPCで動作させる監視画面や、固定解像度のディスプレイで表示する場合などの場合、固定サイズとして設計します。

固定サイズの場合、追加で別PCで監視画面を表示したい場合も同じの解像度で表示します。

 

hint

固定サイズとした場合、実行後に画面のサイズが変わることを考慮せず全ての画面フォームを固定サイズで構築できます。

 

可変サイズとして表示

解像度の異なるディスプレイで一つの監視システムを表示する場合などは、可変サイズとします。また、監視画面表示中に画面サイズを変更したい場合なども可変サイズとして設計します。

 

hint

可変サイズを選択した場合は、実行環境や実行後に画面のサイズを変更することを考慮して構築します。検討箇所は増えますが、様々な環境での表示に柔軟に対応できます。

 

 

解像度の検討

「固定サイズ」で最大表示を行う場合は、実行環境で表示するディスプレイの解像度を採用します。「可変サイズ」の場合は、「想定する最大解像度」「想定する最小解像度」を検討します。
 

実行形式の検討

実行する際に「フルスクリーン」表示するかしないかを検討します。フルスクリーンでは、画面部分をディスプレイ一杯に表示し、監視画面を専用に表示させることができます。また、フルスクリーン時には、「Windows OSのタスクバー」「実行画面のタイトルバー」「実行画面のメニュー」「実行画面のステータスバー」は表示されません。
 

監視画面とは別に表示するエリアを検討

フルスクリーン表示をしない場合、監視画面表示エリアとは別に、以下の部分を表示するか否かで監視画面の表示エリアのサイズが異なってきます。画面サイズを検討する初期段階で以下のエリアの有無を検討します。

Windows OSの

タスクバー

WindowsOSのタスクバーを常時表示するかどうかを検討します。監視画面とは別のアプリケーションを使用するニーズがある場合などは、タスクバーを表示するのも有効です。また、タスクバーの表示位置(画面下部か横部か)についても検討が必要です。

 

実行画面の

タイトルバー

下図のタイトルバー部分です。タイトルバー部分には、最小化ボタン/最大化ボタン/終了ボタンも含まれます(各ボタンとも設定で非表示化が可能)。これらのボタンやタイトル表示を行いたい場合は、タイトルバーを有効とします。

 

実行画面の

メニュー

下図のメニュー部分です。メニューとして、画面切り替え等の独自メニューも作成できます。

 

 

実行画面の

ステータスバー

下図のステータスバー部分です。「Caps lock」「Num lock」「Scroll lock」キーの状態を表示します。

 

 

 

tra_0123
 

 

画面サイズ関連のプロパティ

実行時の画面サイズの検討した結果で、実行したい画面形態に応じて以下のルートプロパティを変更します。

 

設定プロパティ

固定サイズ

 

プロパティ名

設定値

StartupSize

ブラウザが起動したときのブラウザのサイズ。

CUSTOMSIZE

ユーザでサイズを指定する。StartupSizeWidth/StartupSizeHeightの値がフォームのサイズとなる。

 

CUSTOMSIZE2

ユーザでサイズを指定する。StartupSizeWidth/StartupSizeHeightの値がアプリケーションのサイズとなる。

 

StartupSizeWidth

画面の幅を設定。

StartupSizeHeight

画面の高さを設定。

AllowResize

FALSE時、ブラウザ起動後のウインドウサイズを変更できないようにする。FALSEを設定。

StartupCenter

ブラウザの実行時の表示位置を、デスクトップ中央にする。TRUEを設定。

ShowMaxButton

ブラウザ実行中の、タイトルバー右の最大ボタンの表示・非表示。FALSEを設定。

ShowMinButton

ブラウザ実行中の、タイトルバー右の最小ボタンの表示・非表示。FALSEを設定。

ShowTitleBar

ブラウザ実行中の、タイトルバーの表示・非表示。

ShowMenu

ブラウザ実行中の、メニューの表示・非表示。

ShowStatusBar

ブラウザ実行中の、ステータスバーの表示・非表示。

 

可変サイズ

 

プロパティ名

設定値

StartupSize

ブラウザが起動したときのブラウザのサイズ。

FULLSCREEN

フルスクリーン表示。フォームがデスクトップ一杯に表示されます。

 

MAXIMUM

最大表示。
 

CUSTOMSIZE

ユーザでサイズを指定する。StartupSizeWidth/StartupSizeHeightの値がフォームのサイズとなる。

 

CUSTOMSIZE2

ユーザでサイズを指定する。StartupSizeWidth/StartupSizeHeightの値がアプリケーションのサイズとなる。

 

StartupSizeWidth

画面の幅を設定。StartupSizeがCUSTOMSIZE/CUSTOMSIZE2の場合のみ。

StartupSizeHeight

画面の高さを設定。StartupSizeがCUSTOMSIZE/CUSTOMSIZE2の場合のみ。

AllowResize

FALSE時、ブラウザ起動後のウインドウサイズを変更できないようにする。TRUEを設定。

StartupCenter

ブラウザの実行時の表示位置を、デスクトップ中央にする。TRUEを設定。

WindowsMinWidth

ブラウザのサイズを小さくした時の最小の制限サイズ(幅)。想定最小解像度幅を設定。

WindowsMinHeight

ブラウザのサイズを小さくした時の最小の制限サイズ(高さ)。想定最小解像度高さを設定。

ShowTitleBar

ブラウザ実行中の、タイトルバーの表示・非表示。

ShowMenu

ブラウザ実行中の、メニューの表示・非表示。

ShowStatusBar

ブラウザ実行中の、ステータスバーの表示・非表示。

 

フルスクリーンとして実行

 

プロパティ名

設定値

StartupSize

ブラウザが起動したときのブラウザのサイズ。

FULLSCREEN

フルスクリーン表示。フォームがデスクトップ一杯に表示されます。

 

AllowResize

FALSE時、ブラウザ起動後のウインドウサイズを変更できないようにする。

WindowsMinWidth

ブラウザのサイズを小さくした時の最小の制限サイズ(幅)。想定最小解像度幅を設定。

WindowsMinHeight

ブラウザのサイズを小さくした時の最小の制限サイズ(高さ)。想定最小解像度高さを設定。

 

 

 

画面の分割を検討

監視画面の画面のエリア分割を検討します。ユーザーのニーズに応じて、常に画面上に表示させておきたいエリアや、画面切り替えのボタンを表示させたいエリア、そしてグラフィック画面や機能画面を表示させるメインエリアなどの分割とサイズを検討します。

 

例えば、画面上に画面遷移ボタンが並ぶ「画面遷移ボタンエリア」、アラームサマリを常時表示する「アラームサマリエリア」、グラフィック画面を表示いする「メインエリア」を考えた場合、以下の様な分割エリア割と画面全体におけるそのエリアのサイズを決定します。このエリア分けの中で、常に表示する部分にはコントロールをそのまま配置し、切り替わりがあるエリアについてはビューコントロールを配置して必要時にビューコントロールに表示するフォームを切り替える様にします。
tra_0128

 

 

フォームの拡大縮小を検討

可変サイズやフルスクリーン表示の際には、メインエリアのビューコントロールに表示するフォームの拡大縮小を検討する必要があります。フォームの拡大縮小を設定するフォームプロパティは「Stretch」プロパティになります。

 

Stretchプロパティは、以下の値を設定することができます。

STRETCH_FULL

サイズに合わせて引き伸ばし表示する。

STRETCH_KEEPRATE

サイズに合わせて引き伸ばし表示する(縦横比保持)。

RESIZE_FULL

サイズに合わせてフォームサイズを調整する。

RESIZE_KEEPRATE

サイズに合わせてフォームサイズを調整する(縦横比保持)。

 

上表の「RESIZE_FULL」及び「RESIZE_KEEPRATE」の場合は、フォーム上の各コントロールの「AutoResizeX」「AutoResizeY」の設定値に応じてコントロール位置とサイズが調整されます。

AutoResizeX

リサイズ時にどこのX軸を基準とするか。

LEFT - 左基準

RIGHT - 右基準

LEFTRIGHT - 左右基準

CENTER - 中心基準

AutoResizeY

リサイズ時にどこのY軸を基準とするか。

TOP - 上基準

BOTTOM - 下基準

TOPBOTTOM - 左右基準

CENTER - 中心基準

 

また、「STRETCH_KEEPRATE」及び「RESIZE_KEEPRATE」の場合縦横比を保持する為、余白が発生する場合があります。その場合はフォームの「ViewFillColor」プロパティにフォームの「FillColor」の値をそのまま設定します。そうすることで、余白部分も背景色と同じ色になり、余白が目立たなくなります。

 

これらの「Stretch」プロパティのサンプルは、以下からご利用頂けます。

 

 

レイアウト設定

本トレーニングでは、「可変サイズ」として以下のレイアウト設定でプロジェクトを設定してみます。

 

コントロール

プロパティ名

設定値

ルート

StartupSize

MAXIMUM


AllowResize

TRUE


WindowsMinWidth

800


WindowsMinHeight

600


ShowStatusBar

FALSE

Forms.frmMain

Stretch

RESIZE_FULL

btnScreen1

AutoResizeX

LEFT

 

AutoResizeY

TOP

btnScreen2

AutoResizeX

LEFT

 

AutoResizeY

TOP

viewMain

AutoResizeX

LEFTRIGHT

 

AutoResizeY

TOPBOTTOM

Screens.Screen01

Stretch

RESIZE_KEEPRATE

 

ViewFillColor

@FormColor

Screens.Screen02

Stretch

RESIZE_KEEPRATE

 

ViewFillColor

@FormColor

 

また、画面の分割は以下のイメージでレイアウトします。
tra_0129