跳轉到主要內容

儀錶

儀錶(Gauge )是一種小部件,能夠繪製指標和弧形,用於指示指定範圍內的給定值。

在模擬器中運行的儀錶

小部件組

儀錶位於TouchGFX Designer中的Miscellaneous小部件組中。

TouchGFX Designer中的儀錶

屬性

TouchGFX Designer中儀錶的屬性。

屬性組屬性說明
Name小部件的名稱Name是TouchGFX Designer和程式碼中使用的唯一識別碼
LocationXY 指定小部件左上角相對于其父的位置。

WH 指定小部件的寬度和高度。

鎖定指定小部件是否應鎖定為其當前的X、Y、W和H。
如果鎖定小部件,還會禁止通過螢幕與小部件進行交互。

可見 指定小部件的可見性。 使小部件不可見還將禁用與小部件之間通過螢幕進行的交互。
Style樣式 指定小部件的預定義設置,用於將所選屬性設為預定義的值。
這些樣式包含可免費使用的圖像
Background背景圖像指定用作背景的圖像。

背景偏移指定所選背景圖像的x軸和y軸偏移量。
Gauge旋轉中心指定小部件中指標和弧線應該繞其旋轉的x軸和y軸點。

起止角指定指針和弧線的起始和結束角度。

值範圍指定指示器的最小和最大整數值。

初始值指定儀錶的初始值。
Animation動畫動作指定是否啟用指針和弧線的動畫效果。

緩動緩動選項指定使用的緩動方程。
Needle指標圖像指定用作背景的圖像。

指標旋轉中心指定指標圖像中指標將繞著旋轉的位置。

移動渲染演算法指定在移動到新值時繪製指標圖像所用的演算法。

固定渲染演算法指定在指標靜止時用於繪製指標圖像的演算法。
Arc使用弧線指定是否使用弧線。

圖像/顏色指定用於填充弧線的顏色或圖像。

設定弧線位置指定是否覆蓋默認的弧線大小和位置。
預設情況下,弧線的位置為(0,0),並且與儀錶本身的大小相同。 當您想使用圖像作為弧線繪製器,但是弧線(圖像)的尺寸小於儀錶的尺寸時,覆蓋默認設置是有用的。 因此,可以將圖像修剪為所需的尺寸並將弧線置於特定的位置,而不是採用一幅大型圖像(尺寸與儀錶相同,帶許多透明的線條)。 弧線將沿用相同的旋轉中心。

線的X軸和Y軸位置指定弧線的X軸和Y軸位置。

弧線寬度和高度指定弧線的尺寸。

半徑指定弧線的半徑。

線條寬度指定弧線的線條寬度。 如果該值為0,則弧線與半徑一樣大。

端點樣式指定弧線的端點樣式。 如果該值為0,則弧線與半徑一樣大。

端點樣式指定弧線的端點樣式。
AppearanceAlpha 指定小部件的透明度。 小部件的Alpha值介於0和255之間。 0為完全透明,255為實心。.
Mixin可拖動 指定在運行時小部件是否可拖動。

ClickListener 指定小部件被點擊時是否會呼叫callback函數。

FadeAnimator 指定小部件是否可繪製其 Alpha 值變化的動畫。

MoveAnimator 指定小部件是否可繪製 XY 值變化的動畫。

預設情況下,弧線的位置為(0,0),並且與儀錶本身的大小相同。 當您想使用圖像作為弧線繪製器,但是弧線(圖像)的尺寸小於儀錶的尺寸時,覆蓋默認設置是有用的。 因此,可以將圖像修剪為所需的尺寸並將弧線置於特定的位置,而不是採用一幅大型圖像(尺寸與儀錶相同,帶許多透明的線條)。 弧線將沿用相同的旋轉中心。

交互

TouchGFX Designer中的儀錶支援的操作和觸發條件。

操作

小部件特有的操作說明
Set value設定儀錶的值。
Update value用持續時間更新儀錶的值。
標準小部件操作說明
Move widget隨時間的推移將小部件移動到新位置。
Fade widget隨時間的推移改變小部件的Alpha值。
Hide widget隱藏小部件(將可見性設置為false)。
Show widget使隱藏的小部件可見(將可見性設置為true)。

觸發條件

觸發條件說明
Gauge value set在更新動畫期間,將為即時更新和中間步驟而觸發。 只有在新值與當前值不同時才觸發。
Gauge value updated將在更新動畫完成時觸發。 如果更新的持續時間為0,更新將立即發生,但仍然會觸發此事件。

性能

儀錶包括圖像、以及紋理映射器

圓和紋理映射器元件是MCU資源密集型元件。 因此,在大部分平臺上,會將儀錶視為要求高的小部件。

關於文字繪製性能的更多資訊,請閱讀通用UI元件性能一節。

範例

生成程式碼

在生成的視圖基類的程式碼中,可以查看Designer是如何創建儀錶的。

MainViewBase.cpp
#include <gui_generated/main_screen/mainViewBase.hpp>
#include "BitmapDatabase.hpp"

mainViewBase::mainViewBase()
{
gauge.setBackground(touchgfx::Bitmap(BITMAP_BLUE_GAUGES_ORIGINAL_GAUGE_BACKGROUND_STYLE_01_ID));
gauge.setPosition(115, 11, 251, 251);
gauge.setCenter(125, 125);
gauge.setStartEndAngle(-85, 85);
gauge.setRange(0, 100);
gauge.setValue(0);
gauge.setEasingEquation(touchgfx::EasingEquations::elasticEaseOut);
gauge.setNeedle(BITMAP_BLUE_NEEDLES_ORIGINAL_GAUGE_NEEDLE_STYLE_01_ID, 11, 55);
gauge.setMovingNeedleRenderingAlgorithm(touchgfx::TextureMapper::BILINEAR_INTERPOLATION);
gauge.setSteadyNeedleRenderingAlgorithm(touchgfx::TextureMapper::BILINEAR_INTERPOLATION);
gauge.setArcVisible();
gaugePainter.setBitmap(touchgfx::Bitmap(BITMAP_BLUE_GAUGES_ORIGINAL_GAUGE_FILL_STYLE_01_ID));
gauge.getArc().setPainter(gaugePainter);
gauge.getArc().setRadius(94);
gauge.getArc().setLineWidth(14);
gauge.getArc().setCapPrecision(180);
gauge.setArcPosition(28, 30, 196, 88);

add(gauge);
}
Tip
您可以在用戶程式碼中使用Gauge類中的這些函數和其他可用函數。 如果更改了小部件的外觀,請必須呼叫 gauge.invalidate() 以強制重繪。

用戶程式碼

如要設置儀錶值,可以使用setValue(int value)updateValue(int value, uint16_t duration)

setValue(int value)將立即移動指標和弧到新值,但沒有動畫。

updateValue(int value, uint16_t duration)指針和弧在定義的持續時間內以動畫方式滴答、滴答地移動到新值。 如果持續時間為0,更新將立即進行。 所用的動畫將是使用setEasingEquation(EasingEquation easingEquation)在儀錶上定義的

MainView.cpp
#include <gui/main_screen/MainView.hpp>

MainView::MainView()
{
tickCounter = 0;
}

void MainView::handleTickEvent()
{
tickCounter++;

// Change value every 120 tick.
if (tickCounter % 120 == 0)
{
// Insert data point
gauge.updateValue(/* new integer value */, 30); // animates needle and arc to new value with a duration of 30 ticks
}
}

TouchGFX Designer範例

如需進一步瞭解儀錶,請嘗試在TouchGFX Designer中使用下列UI範本之一創建新應用:

TouchGFX Designer中的儀錶UI範本

API參考

Further reading