Weiter bearbeiten: Layout, Animation und Teilen

Üben Sie zunächst, neben der Geschwindigkeit ein Symbol hinzuzufügen. Das vollständige Beispiel unten zeigt nur die feste Nummer 78, um Layoutänderungen leicht erkennbar zu machen; die tatsächliche Geschwindigkeit wird noch nicht erfasst.

Die äußere Ebene HStack ordnet die Icons und den Inhalt auf der rechten Seite links und rechts an. Ordnen Sie rechts VStack die Zahlen und Einheiten nach oben und unten an. Sie sehen also zwei Ebenen: Die gesamte Zeile ist links und rechts angeordnet, und der Text ist nach oben und unten angeordnet.

Probieren Sie drei Modifikationen nacheinander aus: Ändern Sie die äußere Ebene spacing={12} in 24, die Symbole und der Text werden weiter auseinander liegen; Ändern Sie die innere Ebene spacing={4} in 12, die Zahlen und Einheiten werden weiter auseinander liegen; Ändern Sie die innere Ebene alignment="leading" in "trailing", und die beiden Textzeilen werden rechtsbündig ausgerichtet.

Beachten Sie die Ausrichtungsachsen: HStack steuert mit alignment die vertikale Ausrichtung, VStack die horizontale. x/y sind visuelle Verschiebungen und keine Abstände; sie verändern die Layoutposition benachbarter Inhalte nicht.

Nachdem das Layout festgelegt wurde, ersetzen Sie im ersten Geschwindigkeitsbeispiel den festen 78 durch den Leseausdruck und wählen Sie die Geschwindigkeit in den Dateneinstellungen aus. Auf diese Weise ändern Sie jedes Mal, wenn Sie üben, nur eine Sache.

function main() {
  return (
    <HStack spacing={12} alignment="center">
      <Symbol name="speedometer" color={$env.accent} />
      <VStack alignment="leading" spacing={4}>
        <Text fontSize={40}>78</Text>
        <Text fontSize={14}>{$env.speedUnit}</Text>
      </VStack>
    </HStack>
  );
}

In diesem Beispiel wird die Geschwindigkeit in einen Bogenwinkel umgewandelt und anschließend ein Übergang für die Winkeländerung hinzugefügt. Wählen Sie zunächst in den Zählereinstellungen die Grundgeschwindigkeit aus und fügen Sie dann den Code ein.

speed / 200 erhält das Verhältnis relativ zu 200, wird auf 0…1 begrenzt und dann mit 360 multipliziert, dem aktuell zu zeichnenden Winkel. Wenn die Geschwindigkeit beispielsweise 50 beträgt, beträgt der Winkel 90°, und wenn die Geschwindigkeit 100 beträgt, beträgt der Winkel 180°. Die 200 hier ist ein Beispielbereich, bei dem der Wert in der aktuellen Geschwindigkeitseinheit verwendet wird, der entsprechend Ihrem eigenen Instrument geändert werden kann.

startAngle={-90} setzt den Startpunkt an die Spitze; sweepAngle bestimmt, wie viele Winkel vom Startpunkt aus geschwenkt werden sollen. Das property: 'sweepAngle' in animations bedeutet, die Änderung dieses Attributs zu animieren: Beim Wechsel von 90° auf 180° dauert der Übergang 0,25 Sekunden.

Versuchen Sie, duration in 1 zu ändern, und beobachten Sie, wie der Bogen dem neuen Ziel langsamer folgt. Durch die Animation wird weder die Abtastfrequenz realer Daten erhöht, noch wird der Bogen automatisch in eine zeitgesteuerte Animation umgewandelt. Es muss ein neuer Zielwinkel vorhanden sein, damit die Änderung erfolgt.

Der folgende Code zeigt eine horizontale Linie an, wenn keine Geschwindigkeit vorliegt, ohne den fehlenden Test als Null zu verschleiern. Bögen werden nur für gültige numerische Messwerte gezeichnet.

function main() {
  const speed = $data.current.speed?.value;
  if (speed == null) {
    return (
      <Text fontSize={32} color={$env.foreground}>
        —
      </Text>
    );
  }
  return (
    <Circle
      width={120}
      height={120}
      background="clear"
      stroke={$env.accent}
      lineWidth={8}
      startAngle={-90}
      sweepAngle={Math.max(0, Math.min(1, speed / 200)) * 360}
      animations={[
        { property: 'sweepAngle', duration: 0.25, curve: 'easeOut' },
      ]}
    />
  );
}

Schließen Sie die Vorschau und speichern Sie das Instrument, bevor Sie es aus dem Menü des gespeicherten Instruments exportieren. .instrument enthält Code, Bildressourcen und Eingabedefinitionen, die über das Systemfreigabefenster gesendet oder in „Dateien“ gespeichert werden können. Standardwerte in der Definition werden exportiert. Lokal geänderte Eingabewerte werden nicht exportiert. OBD Gerätebindungen werden nicht exportiert.

Der Empfänger öffnet es mit CapDrive und muss nach dem Import noch über Dashboard bearbeiten zur Seite hinzugefügt werden. Legen Sie Ihre eigenen Werte, Texte oder Optionen in Eingabezuordnungen fest; Der Eingang OBD wählt die entsprechenden Fahrzeugparameter des Empfängergeräts aus.

Geben Sie beim Teilen von Drehzahl- oder Kühlmitteltemperaturanzeigen an, welche Fahrzeuganzeige erforderlich ist und wo diese angebracht ist. Solange die Eingabekennung erhalten bleibt, ist für die erneute Bindung des Geräts keine Änderung des Codes erforderlich. Überprüfen Sie vor dem Teilen verschiedene Größen und Themen und überprüfen Sie den Code, die Assets und den Standardtext auf persönliche Informationen.

Was auf dem Computer bearbeitet wird, ist der gerade auf dem Telefon geöffnete Instrumentenentwurf. Geben Sie zunächst den Editor dieses Instruments auf dem Mobiltelefon ein und stellen Sie dann die Verbindung in der folgenden Reihenfolge her:

1. Verbinden Sie iPhone und Computer mit demselben Wi-Fi-Netzwerk.
2. Öffnen Sie Fernbearbeitung im mobilen Editor und warten Sie, bis die Adresse angezeigt wird.
3. Geben Sie die vollständige Adresse, die auf Ihrem Telefon angezeigt wird, in den Browser Ihres Computers ein. Verwenden Sie nicht die alte Sitzungsadresse und verwechseln Sie nicht den Localhost Ihres Computers mit der Adresse Ihres Telefons.
4. Lassen Sie Ihre mobile Bearbeitungssitzung geöffnet, ändern Sie etwas, das auf Ihrem Computer leicht erkennbar ist, z. B. die Schriftgröße, und zeigen Sie dann eine Vorschau der Änderungen auf Ihrem Mobiltelefon an.
5. Nachdem die Bearbeitung abgeschlossen ist, kehren Sie zum Mobiltelefon zurück, um das Instrument zu speichern und es auf der tatsächlichen Instrumententafel zu bestätigen.

Wenn die Adresse nicht geöffnet werden kann, vergewissern Sie sich zunächst, dass sich die beiden Geräte tatsächlich im selben Netzwerk befinden und die mobile Sitzung noch läuft. Wenn Sie die Remote-Bearbeitung deaktivieren, den Editor verlassen oder die App in den Hintergrund versetzen, wird die Sitzung beendet. Nach dem erneuten Öffnen wird die aktuell auf dem Telefon angezeigte Adresse verwendet.

Diese Verbindung verwendet unverschlüsseltes lokales HTTP ohne separates Anmeldekennwort. Ein Gerät mit Zugriff auf diese LAN-Adresse kann möglicherweise den aktuellen Entwurf und seine Ressourcen lesen oder ändern oder das Bearbeitungsprotokoll anzeigen. Daher ist es nur in einem vertrauenswürdigen Netzwerk aktiviert. Nachdem die Bearbeitung abgeschlossen ist, wird die Fernbearbeitung geschlossen und auf dem Telefon gespeichert.

Stellen Sie zunächst fest, ob es sich um ein Codeproblem oder ein Datenproblem handelt

Wenn die Vorschau direkt einen Fehler meldet, sehen Sie sich zunächst die Zeilennummer im Protokoll an. Überprüfen Sie Klammern, Eigenschaftsnamen und Datentypen. Beispielsweise sind der Aufruf von toFixed für eine Zeichenfolge und die Feststellung, dass kein Signal vorhanden ist, zwei verschiedene Probleme.

Wenn die Vorschau normal ist, das tatsächliche Instrument jedoch keinen Wert hat, überprüfen Sie zuerst die Datenquelle. Überprüfen Sie die Positionierung auf die Grundgeschwindigkeit, überprüfen Sie die Geräteparameterliste auf OBD und überprüfen Sie dann die vom Instrument ausgewählten Daten und Leseausdrücke. Ersetzen Sie den fehlenden Test nicht durch eine feste Nummer und denken Sie, die Verbindung sei fest.

Der Inhalt ist zusammengedrängt oder beschnitten

Verkleinern Sie es zunächst auf „einen Container + eine Textzeile“, überprüfen Sie den verfügbaren Platz und fügen Sie dann nacheinander das Symbol, die zweite Textzeile und die Grafiken wieder ein. Achten Sie auf feste Breite, Höhe, Schriftgröße und Abstände. Verwenden Sie Stack, um Inhalte anzuordnen. Verwenden Sie transform, wenn eine Gesamtverschiebung, Skalierung oder Drehung erforderlich ist.

Animation hat keine Wirkung

Stellen Sie zunächst sicher, dass sich das Zielattribut selbst tatsächlich ändert, und bestätigen Sie dann, dass animations.property auf dieses Attribut verweist. Problem behoben, bei dem sich sweepAngle={180} nicht von selbst drehte, nur weil eine Animation deklariert wurde. Überprüfen Sie zunächst anhand der geänderten Daten in der Vorschau und aktualisieren Sie dann anhand der tatsächlichen Daten.

Führen Sie vor dem Speichern eine vollständige Überprüfung durch

Überprüfen Sie das Erscheinungsbild in verschiedenen Größen sowie in hellen und dunklen Motiven. Überprüfen Sie gültige Nullen, fehlende Messungen und Textablesungen. Schließen Sie die Vorschau und speichern Sie, bevor Sie das Messgerät zur Seite hinzufügen, um die tatsächlichen Daten zu überprüfen. Erst wenn Aussehen, Code und reale Messwerte übereinstimmen, kann das Instrument fertiggestellt werden.