Wie kann ich ein eigenes Messinstrument bauen

Wenn du ein Analoges Anzeigeinstrument wie dieses erstellen willst, lies diese Anleitung.

In dieser Anleitung wollen wir eine Geschwindigkeitsanzeige bauen. Zu Beginn müssen wir das obige Bild in zwei png Grafiken aufteilen. Eines für das Instrument und die Skala und eines für die Nadel. Kopiere die fertigen Bilder auf dein Gerät.

Stelle sicher, dass das Nadelbild vertikal ist und die Spitze der Nadel nach unten zeigt. Das Bild vom Instrument sollte ein 1:1 Seitenverhältnis haben.

Dann öffne die App und suche dir den Anzeigentyp im Editor heraus, den du erstellen willst. In diesem Tutorial möchte ich eine Geschwindigkeitsanzeige bauen.

Füge es deinem Design hinzu und es werden die Anpassungsoptionen dargestellt.

Der erste ist der Skala Start Wert. Der Wert von 0 ist hier bereits in Ordnung, da unsere Skala bei 0 km/h beginnt.

Die zweite ist der Skala End Wert. Wir setzen diesen auf 220, da unsere Skala bei 220 km/h endet.

Nun wähle den Einheitentyp deiner Skala aus. In diesem Beispiel haben wir eine km/h Skala. Dieser Wert ist wichtig und muss mit der Skala des Bildes übereinstimmen!

Wir sind nun bereit unsere Bilder auszuwählen. Klicke auf den Bild für Skala Eintrag und wähle das Bild deiner analogen Anzeige aus.

Dann klicke auf den Bild für Nadel Eintrag und wähle das Bild von deiner Nadel aus der Gallerie.

Stelle sicher, dass das Nadelbild vertikal ist und die Spitze der Nadel nach unten zeigt!

Weiter unten in der Liste der Einstellungen müssen die Werte für den Nadel Start Winkel und den Nadel End Winkel eingestellt werden.
Für ein besseres Verständnis wie diese berechnet werden schau dir das unten stehende Bild an

Ich habe eine Überlagerung für den Winkel hinzugefügt. Wie du sehen kannst ist der Winkel 0°/360° unten. Der Nadel Start Winkel ist bei ungefähr 75°, der Nadel End Winkel ist bei 294°. Gib diese Werte in der App ein. Bei Bedarf kannst du diese später optimieren.

Wenn die Option Debug zeichnen am Ende der Einstellungsliste aktiviert wurde sieht man auch direkt in der App eine Überlagerung mit den eingestellten Parametern.

Die linke grüne Linie zeigt den Start Winkel (der auf 75° eingestellt wurde), sowie den dazugehörigen Wert (0 km/h). Durch die grüne Linie lässt sich der richtige Winkel schnell einstellen, da optisch überprüfbar ist, dass die Nadel auf den richtigen Startwert zeigt.

Die rechte grüne Linie zeigt analog den End Winkel (294°) und den dazugehörigen Wert (220 km/h).

Die Roten Linien zeigen den Mittelpunkt der Grafik und mit dem roten Mittelpunkt lässt sich der Y Pivot Punkt überprüfen, der weiter unten in der Anleitung erklärt wird.

Nun kommen wir zu den letzten beiden Einstellungen. Die erste ist die Relative Nadel Höhe. Dieser sagt aus, wie groß die Nadel im Vergleich zum Instrument ist.

Wie du auf dem obigen Bild sehen kannst, hat die Nadel eine Höhe von 138px, das Instrument ist 371px hoch. Dividiere 138px/371px und du erhälst 0.37, was die Relative Nadel Höhe ist

Zum Schluss müssen wir der App den Punkt auf dem Nadelbild mitteilen um den die Nadel rotiert

Wie du in dem Bild sehen kannst, ist der Punkt an dem die Nadel rotiert, bei 89px. Dividiere diesen Wert durch die Gesamthöhe der Nadel um den Y Pivot Punkt zu erhalten: 89px/138px = 0.64. Gib diesen Wert in der App ein und du bist fertig.

Standardmäßig ist die Nadel in der Mitte des Instrumentenhintergrundbildes positioniert. Wenn du das ändern willst, kannst du die Nadel Y Position am Ende der Einstellungsliste anpassen, was in diesem Beispiel aber nicht notwendig ist.

Vielen Dank dass du dir die Zeit zum Lesen genommen hast. Wenn du ein tolles analoges Anzeigeelement erstellt hast teile es doch mit SIM Dashboard Community!