202 lines
8.4 KiB
Dart
202 lines
8.4 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
import '../dmc_colors.dart';
|
|
|
|
/// Schmaler Batteriebalken ueber der Fusszeile im Fly-Modus (Doku:
|
|
/// "Balken ueber die gesamte Breite, feste Farbzonen von links: 20% rot
|
|
/// (sofort landen), 30% orange (landen), Rest gruen"). Nur sichtbar,
|
|
/// solange Telemetrie vorliegt - siehe Aufrufstelle in MissionFooterBar,
|
|
/// die dafuer sorgt, dass die Anzeige im Plan-Modus (kein [percent])
|
|
/// entfaellt.
|
|
///
|
|
/// Die Farbzonen sind an FESTEN Positionen im Balken verankert, gemessen
|
|
/// vom LINKEN Rand (0-20% rot, 20-30% orange, 30-100% gruen) - "30%
|
|
/// orange" bedeutet also, dass die orangene Zone bis zur 30%-Marke reicht
|
|
/// (nur 10 Prozentpunkte weiter als rot), nicht dass sie selbst 30 Punkte
|
|
/// breit ist. Die gefuellte Laenge (= [percent] der Gesamtbreite) schrumpft
|
|
/// mit sinkendem Ladestand von rechts nach links, bis irgendwann nur noch
|
|
/// der orangene bzw. rote Bereich links uebrig bleibt. Berechnet die je
|
|
/// Zone tatsaechlich sichtbare Breite direkt in Dart (statt ueber Align.
|
|
/// widthFactor + ClipRect zu clippen) - robuster gegenueber Layout-
|
|
/// Eigenheiten und leichter nachvollziehbar. Farben rot/gruen bewusst
|
|
/// identisch zur Kopfleiste (DmcColors.warnRed/flyModeColor), Orange aus
|
|
/// der sonst im Rest der App bereits verwendeten Amber-Farbe
|
|
/// (DmcColors.pafAmber) - der Screenshot in design/ diente nur als
|
|
/// Layout-Vorlage, nicht als Farbvorgabe.
|
|
class BatteryIndicatorBar extends StatelessWidget {
|
|
const BatteryIndicatorBar({super.key, required this.percent});
|
|
|
|
/// 0-100, ungeklemmter Rohwert aus TelemetryFrame.batteryPercent - null,
|
|
/// solange noch kein Telemetrie-Frame vorliegt (Verbindungsaufbau laeuft
|
|
/// noch). Rendert dann einen neutralen "keine Daten"-Zustand statt eines
|
|
/// Balkens bei 0%, das faelschlich als kritischer Ladestand gelesen werden
|
|
/// koennte (siehe MissionFooterBar.showBattery).
|
|
final int? percent;
|
|
|
|
/// Absolute Positionen (vom linken Rand aus), an denen rot in orange und
|
|
/// orange in gruen uebergeht - siehe Klassendoku.
|
|
static const _redZoneEndFraction = 0.20;
|
|
static const _amberZoneEndFraction = 0.30;
|
|
|
|
static const _barHeight = 6.0;
|
|
static const _pillHeight = 22.0;
|
|
static const _pillMinWidth = 46.0;
|
|
|
|
/// Weiss statt schwarz (Doku: "fuer den Indikator-Hintergrund weiss
|
|
/// benutzen, damit die Farben mehr zur Geltung kommen und leuchten") -
|
|
/// ein heller Hintergrund laesst die gesaettigten Rot/Orange/Gruen-Toene
|
|
/// der gefuellten Zonen im Kontrast kraeftiger wirken als der zuvor
|
|
/// dunkle, in dem sie eher verschwommen. Weiterhin transparenter als der
|
|
/// Fusszeilen-Hintergrund (0.72 in MissionFooterBar).
|
|
static const _trackAlpha = 0.35;
|
|
static const _fillAlpha = 0.55;
|
|
static const _pillNeutralAlpha = 0.55;
|
|
static const _pillWarningAlpha = 0.8;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final rawPercent = percent;
|
|
if (rawPercent == null) {
|
|
return SizedBox(
|
|
height: _pillHeight,
|
|
width: double.infinity,
|
|
child: Stack(
|
|
clipBehavior: Clip.none,
|
|
children: [
|
|
Positioned(
|
|
left: 0,
|
|
right: 0,
|
|
top: (_pillHeight - _barHeight) / 2,
|
|
height: _barHeight,
|
|
child: ColoredBox(color: Colors.white.withValues(alpha: _trackAlpha)),
|
|
),
|
|
Center(
|
|
child: Container(
|
|
height: _pillHeight,
|
|
constraints: const BoxConstraints(minWidth: _pillMinWidth),
|
|
padding: const EdgeInsets.symmetric(horizontal: 6),
|
|
alignment: Alignment.center,
|
|
decoration: BoxDecoration(
|
|
color: Colors.black.withValues(alpha: _pillNeutralAlpha),
|
|
borderRadius: BorderRadius.circular(_pillHeight / 2),
|
|
),
|
|
child: const Text(
|
|
'--%',
|
|
style: TextStyle(
|
|
color: Colors.white70,
|
|
fontSize: 11,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
final clampedPercent = rawPercent.clamp(0, 100);
|
|
|
|
return SizedBox(
|
|
height: _pillHeight,
|
|
width: double.infinity,
|
|
child: LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
final totalWidth = constraints.maxWidth;
|
|
final fillWidth = totalWidth * clampedPercent / 100;
|
|
|
|
final redZoneEnd = totalWidth * _redZoneEndFraction;
|
|
final amberZoneEnd = totalWidth * _amberZoneEndFraction;
|
|
final redZoneWidth = redZoneEnd;
|
|
final amberZoneWidth = amberZoneEnd - redZoneEnd;
|
|
final greenZoneWidth = totalWidth - amberZoneEnd;
|
|
|
|
// Je Zone nur so viel sichtbar wie vom aktuellen Fuellstand noch
|
|
// "uebrig" ist, sobald die vorherigen Zonen bereits voll
|
|
// abgedeckt sind - siehe Klassendoku.
|
|
final redVisible = fillWidth.clamp(0.0, redZoneWidth);
|
|
final amberVisible = (fillWidth - redZoneWidth).clamp(0.0, amberZoneWidth);
|
|
final greenVisible =
|
|
(fillWidth - redZoneWidth - amberZoneWidth).clamp(0.0, greenZoneWidth);
|
|
|
|
final pillLeft = (fillWidth - _pillMinWidth / 2).clamp(
|
|
0.0,
|
|
(totalWidth - _pillMinWidth) < 0 ? 0.0 : totalWidth - _pillMinWidth,
|
|
);
|
|
|
|
// Faerbt die Prozent-Pille passend zur Zone, in der der aktuelle
|
|
// Ladestand liegt (Doku: "sobald die Pille den farbigen [Warn-]
|
|
// Bereich erreicht, auch die Pille entsprechend faerben") - im
|
|
// gruenen (normalen) Bereich bleibt sie neutral dunkel, um nicht
|
|
// staendig unnoetig Aufmerksamkeit zu ziehen.
|
|
final Color pillColor;
|
|
if (clampedPercent <= _redZoneEndFraction * 100) {
|
|
pillColor = DmcColors.warnRed.withValues(alpha: _pillWarningAlpha);
|
|
} else if (clampedPercent <= _amberZoneEndFraction * 100) {
|
|
pillColor = DmcColors.pafAmber.withValues(alpha: _pillWarningAlpha);
|
|
} else {
|
|
pillColor = Colors.black.withValues(alpha: _pillNeutralAlpha);
|
|
}
|
|
|
|
return Stack(
|
|
clipBehavior: Clip.none,
|
|
children: [
|
|
// Weisser, transparenter Hintergrund fuer den ungefuellten
|
|
// Rest (Doku: "weiss benutzen, damit die Farben mehr zur
|
|
// Geltung kommen und leuchten").
|
|
Positioned(
|
|
left: 0,
|
|
right: 0,
|
|
top: (_pillHeight - _barHeight) / 2,
|
|
height: _barHeight,
|
|
child: ColoredBox(color: Colors.white.withValues(alpha: _trackAlpha)),
|
|
),
|
|
Positioned(
|
|
left: 0,
|
|
top: (_pillHeight - _barHeight) / 2,
|
|
height: _barHeight,
|
|
child: Row(
|
|
children: [
|
|
ColoredBox(
|
|
color: DmcColors.warnRed.withValues(alpha: _fillAlpha),
|
|
child: SizedBox(width: redVisible, height: _barHeight),
|
|
),
|
|
ColoredBox(
|
|
color: DmcColors.pafAmber.withValues(alpha: _fillAlpha),
|
|
child: SizedBox(width: amberVisible, height: _barHeight),
|
|
),
|
|
ColoredBox(
|
|
color: DmcColors.flyModeColor.withValues(alpha: _fillAlpha),
|
|
child: SizedBox(width: greenVisible, height: _barHeight),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Positioned(
|
|
left: pillLeft,
|
|
child: Container(
|
|
height: _pillHeight,
|
|
constraints: const BoxConstraints(minWidth: _pillMinWidth),
|
|
padding: const EdgeInsets.symmetric(horizontal: 6),
|
|
alignment: Alignment.center,
|
|
decoration: BoxDecoration(
|
|
color: pillColor,
|
|
borderRadius: BorderRadius.circular(_pillHeight / 2),
|
|
),
|
|
child: Text(
|
|
'$clampedPercent%',
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 11,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|