サイト内検索

検索

Shares

Table of Content

86HMI::ImageBar(画像バー)

[視覚化ウィジェット]

オブジェクト関数

ImageBarオブジェクト。Imagebarの画像をデザインできます。

imageBar-1

ImageBarのプロパティ

imageBar-2

Identifier (Identifier (識別子)):

  • ID: オブジェクトを識別する一意の番号
  • Name: オブジェクトのユーザー定義可能な名前。86HMI APIで使用できます。

Content (Content (内容)):

  • Image: バーの背景: ImageBarの背景
  • Image: バーの前景: ImageBarの前景
    (ImageBarのカスタム画像ファイルは背景と前景で構成されているため、オブジェクトを完成させるには2つのイメージが必要です。画像ソースの説明については、画像ファイルリソースを参照ください)
  • Value: オブジェクトの初期値
  • MaxValue: 最大値は正または負の値を取ることができますが、最小値より小さくすることはできません。
  • MinValue: 最小値は正または負の値を取ることができますが、最大値より大きくすることはできません。

Geometry (Geometry (形状)):

  • X: オブジェクトのX座標
  • Y: オブジェクトのY座標
  • Width: オブジェクトの幅。デフォルトでは調整できません。
  • Height: オブジェクトの高さ。デフォルトでは調整できません。

オプション:

  • Type: ImageBarタイプ、水平 、垂直
  • Order: オブジェクトの順序。オブジェクトリストに表示されるオブジェクトの順序を上下に調整できます。

注記:
ImageBarを水平または垂直に表示する場合は、水平バーと垂直バーを別々に作成し、画像に追加する必要があります。ユーザーが水平バーを使用する場合は水平画像を選択し、垂直バーを使用する場合は垂直画像を選択します。Typeのオプションにより、自動的にリダイレクトされることはありません。

追加情報:
前景を水平に編集する場合、その左右の幅をグラフィック編集ソフトウェアのキャンバスの左右に合わせる必要があります。そうしないと、インポート時に左右が空白のままになります。背景は前景より少し長くてもかまいません。インポート時に自動的に合わせられます。垂直の場合は、前景の上下の境界線を掴んで開始位置と終了位置とします。スケールが必要な場合は、編集時にスケール・マーカーを追加する必要があります。

バーの前景画像の表示幅は、値に比例して左端から右端まで切り捨てられます。

imageBar-3

前景画像の切り詰められた配置は、単なる背景である背景画像の長さには影響されません。

imageBar-4

このような非対称のImageBarを作成するには、前景と背景を揃え背景の左右の延長部分の幅も同じにする必要があります。


API Functions

setImageBarValue()

説明

ImageBarの値を設定します。

構文

void setImageBarValue(lv_obj_t* id, double value);
void setImageBarValue(char* name, double value);

媒介変数

  • [in] id
    オブジェクトID
  • [in] name
    オブジェクト名
  • [in] value
    ImageBarの値を設定します。

戻り値

なし

#include "myhmi.h"

void setup() {
  Hmi.begin();
  // ...
  Hmi.setImageBarValue(p1ibar1, 100);
}

void loop() {
  // ...
}

getImageBarValue()

説明

ImageBarの値を取得します。

構文

double getImageBarValue(lv_obj_t* id);
double getImageBarValue(char* name);

媒介変数

  • [in] id
    オブジェクトID
  • [in] name
    オブジェクト名

戻り値

ImageBarの値を返します。

#include "myhmi.h"

void setup() {
  Serial.begin(115200);
  while (!Serial);
  
  Hmi.begin();
  // ...
  Hmi.setImageBarValue(p1ibar1, 100);
  Serial.print("p1ibar1 value: ");
  Serial.println(Hmi.getImageBarValue(p1ibar1));
}

void loop() {
  // ...
}

詳細は 86HMIエディタ ユーザーマニュアル には、86HMI ウィジェットとAPIのさらなる説明がございます。

上部へスクロール