Skip to main content

テキストの表示

要素内のテキストを表示するには、テキスト → テキスト財産。

ツールチップとしてテキストを表示することもできます（テキスト → ツールチップ要素プロパティ)。

これらのテキストは静的であり、自動的に管理されます。グローバルテキストリストオブジェクト内のPOUビューに表示され、プログラムからもユーザー入力からも変更できません。ただし、書式指定を使用して静的テキストを1つだけプレースホルダーで拡張することで、この時点で変数の内容を出力できます。テキスト変数実行時にプロパティが表示されます。

ヒント

書式設定の仕様の詳細については、以下を参照してください。書式定義付きプレースホルダー

UTF-8エンコードが有効になっている場合STRINGデータ型では、言語固有の文字を含むテキストが許可されます。発音区別記号や中国語文字などの言語固有の文字を含むテキストは、入力時と出力時の両方で指定できます。UTF-8エンコードを有効にするには、ダイアログ: プロジェクト設定: コンパイルオプション。

動的な設定によって、厳密な視覚テキスト表示をアニメーション化できます。

プロジェクトで多言語機能を設定している場合は、静的テキストをローカライズできます。

変数値を動的に表示する

この要素は、マウスクリックで実行されたSTコードの結果をテキスト形式で出力します。

要件：視覚化されたプロジェクトが開いています。

  1. ビジュアライゼーションを開き、 ボタン エレメント。

    The プロパティ 新しいボタンのビューが開きます。

  2. を構成します 文章 財産： Number of clicks: %i。

    文字列にはプレースホルダーが含まれています %i。

  3. アプリケーションでは、 PLC_PRG POU、型に準拠した変数を宣言します。 iClicks : INT;。

  4. を構成します テキスト変数 ボタンのプロパティとして PLC_PRG.iClicks。

    実行時にプレースホルダーの代わりに変数値が出力されます。

  5. の中に 入力構成 プロパティをクリックし、 構成、設定 のボタン OnMouseClick ライン。

  6. 選択する Execute ST code 可能なアクションのリストから。

  7. のエディターでアクションのコードをプログラムします STコードを実行する：

    PLC_PRG.iClicks := PLC_PRG.iClicks + 1;

  8. クリック わかった ダイアログを終了します。

    ユーザー入力が構成されます。

  9. アプリケーションをコンパイル、ダウンロード、および起動します。

    アプリケーションが実行されます。ビジュアライゼーションが開きます。要素にラベルが付けられ、クリック数が出力されます。ユーザーがボタンをクリックすると、番号が増えます。

    _visu_img_user_input_button.png

テキストリストからテキストを動的に出力する

あなたは動的にテキストを出力することができます テキストフィールド エレメント。ユーザー入力またはプログラムでテキスト出力を実装できます。

要件：視覚化されたプロジェクトが開いています。

  1. ビジュアライゼーションを開き、 テキストフィールド エレメント。

    The プロパティ ビューには、要素の構成が表示されます。

  2. アプリケーションの下に、テキストリストエントリを含むテキストリストを追加します。 Textlist_A。

    _visu_img_textlist_a.png

  3. POUのアプリケーションで PLC_PRG、テキスト変数を宣言します。 strTextID : STRING := '0';

  4. また、そこに変数を宣言します strTooltipID : STRING := '0';

  5. また、そこに変数を宣言します iText : INT;

  6. を構成します ダイナミックテキスト→テキストリスト とのプロパティ 'Textlist_A'。

  7. を構成します 動的テキスト→テキストインデックス とのプロパティ PLC_PRG.strTextID。

  8. を構成します 動的テキスト→ツールチップインデックス とのプロパティ PLC_PRG.strTooltipID。

  9. POUのアプリケーションで PLC_PRG、以下のようにCASE命令をプログラムします。

    の変数 動的テキスト プロパティがプログラムされています。

  10. プロパティを構成する 入力設定→OnMouseclick ために Execute ST code と PLC_PRG.iText := (PLC_PRG.iText + 1) MOD 4;

    ユーザー入力は、 テキストフィールド エレメント。

  11. アプリケーションをコンパイル、ダウンロード、および起動します。

    アプリケーションが実行されます。ビジュアライゼーションが開きます。テキスト None テキストフィールドに出力されます。ユーザーが要素をクリックすると、テキストは次のように変わります。 Dynamic_ File_A。さらに、一致するツールチップが表示されます。 Information A。 CASEの指示に従って、クリックするたびにテキストが変化します。

    _visu_img_output_dynamic_text.png

CASEステートメント

CASE iText OF
    0:  strTextID := '0';
        strToolTipID := '0';

    1:  strTextID := '1';
        strToolTipID := '4';

    2:  strTextID := '2';
        strToolTipID := '5';

    3:  strTextID := '3';
        strToolTipID := '6';
ELSE
    strTextID := '0';
    strToolTipID := '0';
END_CASE;

テキストフィールドの入力を構成する

ユーザーがテキストフィールドにテキストを入力できるように、タイプの入力を構成します 変数を書く テキスト出力変数に。このテキスト出力変数は、ユーザーの入力を保存し、プレースホルダーの代わりに出力テキストを表示します（ %s 以下の例では）。テキスト出力変数をで指定します テキスト変数→テキスト変数 財産。

要件：視覚化されたプロジェクトが開いています。

  1. POUのアプリケーションで PLC_PRG、文字列変数を宣言します。 strInput : STRING;

  2. ビジュアライゼーションを開き、 テキストフィールド エレメント。

    The プロパティ ビューには、要素の構成が表示されます。

  3. を構成します テキスト→テキスト とのプロパティ Input: %s。

  4. の中に 入力構成 のプロパティ OnMouseClick マウスアクション、クリック 構成、設定 開くには 入力構成 ダイアログ。を選択 変数を書く ダイアログでアクションを実行し、 テキスト出力変数を使用する この目的のためのオプション。クリック わかった ダイアログを閉じます。

  5. 次に、テキスト出力を割り当てます PLC_PRG.strInput の変数 テキスト変数→テキスト変数 財産。

  6. アプリケーションをコンパイル、ダウンロード、および起動します。

    アプリケーションが実行されます。ビジュアライゼーションが開きます。要素はテキストを出力します： Input:。要素をクリックします。次に、文字列を入力できる入力フィールドが表示されます。を押すとテキストが受け入れられます 入力 鍵。

    _visu_img_current_imput.png

テキストフィールドで出力を構成する

あなたは使用することができます テキストフィールド 視覚化にテキストを表示したり、この変数に入力するオプションをユーザーに提供したりするために、要素を視覚化に組み込みます。

さらに、テキスト入力を構成できます。ユーザーが入力すると、入力フィールドがのウィンドウ領域に表示されます。 テキストフィールド エレメント。これには、ユーザー入力を構成する必要があります 入力構成 財産。

ツールチップとしてテキストを表示する

要件：視覚化されたプロジェクトが開いています。

  1. ビジュアライゼーションを開き、 テキストフィールド エレメント。

    The プロパティ ビューには、要素の構成が表示されます。

  2. を構成します テキスト→テキスト とのプロパティ File name: %s。

    テキストにはプレースホルダーが含まれています %s。

  3. を構成します テキスト→ツールチップ とのプロパティ Storage location: %s

  4. POUのアプリケーションで PLC_PRG、型準拠の変数を宣言します strFileName : STRING := 'File_A';

  5. POUのアプリケーションで PLC_PRG、変数を宣言します strFileDir : STRING := 'D:/Data';

  6. を構成します テキスト変数 テキストフィールドのプロパティ PLC_PRG.strFileName。

    実行時に、プレースホルダーの代わりに変数の内容が出力されます。

  7. を構成します ツールチップ テキストフィールドのプロパティ PLC_PRG.strFileDir。

  8. アプリケーションをコンパイル、ダウンロード、および起動します。

    アプリケーションが実行されます。ビジュアライゼーションが開きます。要素はテキストを出力します： File name: File_A マウスポインタがテキストフィールド上を移動すると、ツールチップが表示されます。 Location : D/Data。

    _visu_img_output_text.png

テキスト表示のアニメーション

でテキストの表示のアニメーションを構成できます フォント変数 財産。すべての基本要素には、テーブル、スクロールバー、テキストフィールドと同様に、このプロパティがあります。

手順. 例：フォントサイズをアニメーション化する

要件：視覚化されたプロジェクトが開いています。

  1. ビジュアライゼーションを開き、 矩形 エレメント。

    The プロパティ ビューには、要素の構成が表示されます。

  2. を構成します テキスト→テキスト とのプロパティ Important。

  3. アプリケーションで、型に準拠した変数を宣言します。 PLC_PRG POU。

    iFontHeight : INT;

  4. を構成します フォント変数→サイズ とのプロパティ PLC_PRG.iFontHeight。

  5. フォントのサイズの変更を実装します。

    iFontHeight：= iFontHeight + 1）MOD 20;

  6. アプリケーションをコンパイル、ダウンロード、および起動します。

    アプリケーションが実行されます。ビジュアライゼーションが開きます。長方形にはラベルが付いています Important。フォントサイズが1から20に増加します。

ラベリング

を使用して情報を出力できます ラベル エレメント。

要件：視覚化されたプロジェクトが開いています。

  1. ビジュアライゼーションを開き、 ラベル エレメント。

    The プロパティ ビューがデフォルトのプロパティで開きます。

  2. を構成します テキスト→テキスト とのプロパティ Visualization A。

詳細については、以下を参照してください。 ラベル

要素を非表示にする

あなたは設定することができます 状態変数→非表示 要素を非表示にするプロパティ。

要件：特定のアプリケーション変数がTRUEの場合にのみ表示される、ビジュアライゼーションのテキストフィールドがあります。たとえば、特定の状態の説明や説明のみを表示するため。

  1. を構成します テキスト→テキスト テキストフィールドのプロパティ Error detected: Do the following...。

    を構成します テキストプロパティ→フォントの色 とのプロパティ 暗赤色。

  2. の PLC_PRG、変数を宣言します bIsInvisible : BOOL := TRUE;

    ここでの初期化は例です。それ以外の場合、変数は特定の条件下でアプリケーション プログラムによって TRUE に設定されます。

  3. を設定します。 状態変数 → 不可視化 プロパティ PLC_PRG.bIsInvisible。

  4. アプリケーションをコンパイル、ダウンロード、および起動します。

    アプリケーションが実行されます。ビジュアライゼーションが開き、テキストフィールドが非表示になります。 'bIsInvisible'をTRUEに設定すると、テキストフィールドが表示されます。

要素フレームに間隔をあけてテキストを揃える

を持つ要素 水平方向の配置 また 垂直方向の配置 element プロパティは、テキストを垂直方向または水平方向に配置するだけでなく、スタイルを使用してテキストを配置し、テキストが要素の端から (ピクセル単位で) 間隔を空けて表示されるようにすることもできます。

さらに、スタイルで次のスタイル プロパティを定義します。

図 1. 間隔のあるテキスト配置のスタイル プロパティ
間隔のあるテキスト配置のスタイル プロパティ


は次の要素に影響します。

間隔の値は、配置が中央に配置されていない場合にのみ適用されます。

例 6. 例: 可視化スタイル Test for text field margin
_visu_example_style_margin.png


このセクションの内容: