Wie wird die Runde-Fortschrittssteuerung verwendet?

Was ist eine Runde Fortschrittskontrolle?

Mit der zunehmenden Erfahrung des Benutzers in der Mensch-Maschine - Interaktion wird der Anwendungsbereich des seriellen Bildschirms immer breiter und breiter, und die konventionelle rechteckige Fortschrittsleiste ist nicht mehr für einige spezielle Anwendungsfälle anwendbar. Also habe ich eine neue runden Fortschrittsleiste auf der Software eingeführt. Sie können ein cooles Bild als Hintergrund einstellen, um den Anzeigeeffekt zu verbessern, indem Sie den Anfangswinkel und den Endwinkel frei wählen, um das Bild des Parameterwertes anzuzeigen.

Diese Routine beschreibt die Anwendung der runden Fortschrittsleiste-Steuerelemente, um den Temperaturwert

zu ändern, indem sie gleiten. Anwendungsbereich: F-Type, Basic-Type nicht unterstützt

Routine Download-Link:Anwendung der runden Fortschrittsleiste-Steuerelemente(Klick auf zu springen)

15.1 Beschreibung der Eigenschaften der runden Fortschrittsleiste-Steuerung

Das Eigenschaftenfenster für das runde Fortschrittsleiste-Steuerelement zeigt sich wie folgt

Fortschrittsleiste Breite

Die Größe des Fortschritts festlegen.

Füllmethode

Der Stil der Fortschrittsleiste, kann eine Farbe oder ein Bild wählen, wie unten

1. Ausfüllungsmethode
2. [Bild]: Sie können bei der Verwendung von Bildern den Fortschrittsleiste selbst gestalten.

Ausgangspunktwinkel

Die Startposition des Fortschrittslebars (der Wert des runden Fortschrittslebars ist der Winkel, der maximale Winkel ist 359, 360 Grad ist 0 Grad), wie folgt dargestellt:

Endwinkel

Endposition der runden Fortschrittsleiste, wie folgt

Schiebeanpassung

Die runden Fortschrittsleiste Steuerelemente haben 4 Arten von Anpassung, Sie können Deaktivieren, Anfangswinkel, Endwinkel oder zwei Winkel wählen, Wie folgt

1. Verbot: Nicht durch Berührung angepasst
2. [End-Winkel]: Berühren Sie die Fortschrittsleiste Endposition Ziehen Sie die Fortschrittsleiste
3. [Start-Winkel]: Berühren Sie die Fortschrittsleiste Startposition Ziehen Sie die Fortschrittsleiste
4. [Zwei Winkel]: Berührung beider Enden kann die Fortschrittsleiste ziehen

Berührungsposition

Berührungsposition des runden Fortschrittsleisten-Steuerelementes, das optionale Ende oder die Fortschrittsleiste, wie folgt

[Ende]: Sie können den Wert nur durch Klicken oder Ziehen am Ende des kreisförmigen Fortschrittslebars ändern.

[Fortschrittsleiste]: Klicken oder Schieben Sie den Fortschrittsleiste, um den Wert zu ändern

Grenzwinkel

Grenzwinkel des runden Fortschrittsleiste-Steuerelemente zu ändern, optional Ja oder Nein, wie folgt

[Ja]: Der Ziehbereich kann nur zwischen dem Anfangs - und Endwinkel liegen;

[Nein]: Keine Winkelbeschränkung, kann nach Belieben rutschen.

Benachrichtigungsmethoden

Rundschrittsleiste Steuerung Benachrichtigungsmethode Optional, wenn Sie loslassen oder schieben, wie folgt

Wenn Sie loslassen: Wenn Sie die Fortschrittsleiste ziehen, werden Sie nicht ausgegeben, wenn Sie die Befehle loslassen;

Schieben: Befehle während des Ziehen der Fortschrittsleiste ausgegeben.

Schieberegler-Symbol

Sie können Schieberegler-Stil hinzufügen, empfohlenes Bildformat ist das All-Transparent - Format png

15.2 Runde Fortschrittsleiste Steuerelemente

[Rundes Fortschrittsleiste-Steuerung] Bildschirm, zeigt die Anwendung der runden Fortschrittsleiste-Steuerung im seriellen Bildschirm.

Bildschirmkonfiguration

Hinzufügen eines runden Fortschrittsleisten-Steuerelement (SteuerelementID: 1) und eines Textsteuerelementes (SteuerelementID: 1) in den "Hintergrundbilder" - Bildschirm des "Steuerelement-ID: 1"2), wie unten gezeigt

Eigenschaftskonfiguration

Im Eigenschaftenfenster des runden Fortschrittsleisten-Steuerelement, setzen Sie [Fortschrittsleisten Dicke] auf "10", [Füllmethode] auf "Farbe", [Farbe] auf "Gelb", [Startwinkel] auf "180", [Endwinkel] auf "360", [Schiebe-Einstellung] auf "Endwinkel", [Berührungsposition] auf "Ende", [Einschränkung Winkel] auf "Ja", [Benachrichtigungsmethode] auf "Während der Schiebe", [Schiebe-Symbol] auf den Pfad des Symbols, die Eigenschaften Konfiguration wie unten gezeigt,

LUA-Skript

Öffnen Sie den LUA-Editor

VisualTFT hat eine LUA-Entwicklungs - Kompilierungsumgebung integriert, klicken Sie auf das Menü [Tools] und wählen Sie den LUA-Editor, wie unten gezeigt.

API-Funktionsbeschreibung

Dacai Technology bietet umfangreiche API-Schnittstellenfunktionen für LUA-Skripte, die Sie in der Dokumentation „LUA-Skript API für das Internet der Dinge" finden können. Schnittstellenfunktionen für die in diesem Tutorial-Dokument behandelten Abschnitte

• Funktion set_value(screen, control, value)

Anmerkung: Geben Sie einen Wert für ein Steuerelement in einem Bildschirm an:

Parameter: screen ZielbildschirmID

control ZielsteuerelementID

Wert Zielsteuerelement Wert

• Funktion on_control_notify(screen, control, value)

Anmerkung: Klicken Sie auf Schaltfläche Steuerelemente, ändern Sie Textsteuerelemente, ändern Sie Schieberleiste werden diese Rückruffunktion ausführen

Parameter: screen ZielbildschirmID

control ZielsteuerelementID

value Zielsteuerelement Wert

Skript schreiben

Verwenden Sie das LUA-Skript, um den Wert der runden Fortschrittsleiste mit dem Textsteuerelement zu verknüpfen. Wenn Sie ein rundes Fortschrittsleiste-Steuerelement verschieben, ruft das System die Rückruffunktion on_control_notify auf und übergibt den Wert des runden Fortschrittsleisten-Steuerelements in die Funktion, das Verfahren, den Wert mit dem Wert des Textsteuerelements zu verknüpfen, wie folgt

--用户通过触摸修改控件后，执行此回调函数。
--点击按钮控件，修改文本控件、修改滑动条都会触发此事件。
function on_control_notify(screen,control,value)
  local Temperature = 0
  if screen == 0 and control == 1 
  then
    Temperature = value & 0xFFFF
    Temperature = (Temperature - 180)/5
    set_value (0,2,Temperature)
  end
end

Wenn das LUA-Skript den Wert des runden Fortschrittsleisten festlegt, ruft man die Funktion set_value() auf, wobei der Anfangswinkel 180 und der Endwinkel 270 betragen: set_value (0,1,(180 16) < <|270)

Externe MCU-Steuerung

Wenn Sie die oben genannten Routine-Effekte nicht mit einem LUA-Skript implementieren möchten, können Sie die runden Fortschrittsleisten über einen Benutzer-Sinochip steuern, die im Entwicklungspaket keil-Programm die Funktionsdeklaration der Datei him.dever.h und die Definition in der Datei him.dever.c.

Schieben Sie am Ende der runden Fortschrittsleiste und geben Sie den Befehl auf dem seriellen Bildschirm. MCU analysiert Anweisungen wird NotifyAngleProgress-Funktion aufrufen, und die aufgelisteten runden Fortschrittsleiste-Wert in die Funktion, in der Funktion den Wert der Textsteuerung, das Programm wie folgt

Hinweis: Der Wert der Steuerung ist 4 Byte, von denen die ersten beiden Bytes sind "Start-Winkel", die beiden Bytes sind "End-Winkel", wie die Einstellung der runden Fortschrittsleiste anfänglichen Winkel von 180 Grad, End-Winkel von 270, Anweis wie folgt: EE B1 10 00 00 01 00 B4 01 0E FF FC FF FF

/**********************************************************************
** Function name   :  NotifyAngleProgress
** Descriptions    :  圆形进度条控件通知
** input parameters:  screen_id:  画面ID
**                    control_id:  控件ID
**                    value： 圆形进度条的控件值
** output parameters: 无
** Returned value   : 无
*********************************************************************/
void NotifyAngleProgress(uint16 screen_id, uint16 control_id, uint32 value)

{
    ……
    float TextVlaue = 0;
    if(screen_id == 0 && control_id == 1 ){
        TextVlaue = value & 0xFFFF；
        TextVlaue = （TextVlaue – 180）/5;
        SetTextInt32(0, 2, TextVlaue, 1, 1);
     }
    ……
}

Wenn die MCU die Steuerung der runden Fortschrittsleiste benötigt, ist der Code wie folgt:

/**********************************************************************
** Function name:    void Set_AngleProgress(uint16 screen_id,
**                                          uint16 control_id,
**                                          uint16 start,
**                                          uint16 end)
** Descriptions    : 设置圆形进度条
** input parameters:  screen_id:  画面ID
**                    control_id: 控件ID
**                    start     : 起始角度
**                    end       : 终止角度
** output parameters  : 无
** Returned value     : 无
*********************************************************************/
{
    ……
    Set_AngleProgress(0,1,180,360);//设置画面0、控件1圆形进度条的起始角度为180、终止角度为360
    ……
}

Ausführen der Vorschau

Führen Sie den virtuellen Bildschirm aus, ziehen Sie das Ende der runden Fortschrittsleiste (Steuerelement-ID: 1) im Bildschirm (Schieberegler-Symbol), der Bildschirm wird Befehle geben, während der zugehörige Text-Steuerelement (Steuerelement-ID: 2) Zahl-Wert zeigt synchronisierte Aktualisierung; VisualTFT-Software und virtuellen Bildschirm mit "virtuellen seriellen Port Paare" eine Verbindung herstellen.Öffnen Sie [Befehlshelfer], wählen Sie die linke Navigation [Opische Fortschrittsleiste] und legen Sie die Befehlsparameter des Bereichs "Einstellung des Fortschrittsleisten Winkles". Wie in der Routine, steuern Sie die runde Fortschrittsleiste im Bildschirm (Steuerelement-ID: 1) und das Textsteuerelement (Steuerelement-ID: 2), füllen Sie die entsprechenden Parameter aus, klicken Sie auf "Senden". Der virtuelle Bildschirm zeigt den entsprechenden Zustand an, der Effekt läuft wie folgt: