Initial version
This commit is contained in:
@@ -0,0 +1,754 @@
|
||||
import 'dart:math' as math;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../models/scooter_state.dart';
|
||||
import '../settings.dart';
|
||||
import '../theme.dart';
|
||||
|
||||
/// Values shared by every cluster layout, already converted for display.
|
||||
class ClusterData {
|
||||
ClusterData({required this.state, required this.imperial});
|
||||
|
||||
final ScooterState state;
|
||||
final bool imperial;
|
||||
|
||||
static const _kmToMi = 0.621371;
|
||||
|
||||
double? _dist(double? km) => km == null ? null : (imperial ? km * _kmToMi : km);
|
||||
|
||||
double? get speed => _dist(state.speed);
|
||||
double? get trip => _dist(state.tripDistance);
|
||||
double? get odometer => _dist(state.odometer);
|
||||
String get speedUnit => imperial ? 'mph' : 'km/h';
|
||||
String get distUnit => imperial ? 'mi' : 'km';
|
||||
|
||||
/// Gauge full scale: the highest configured mode limit, or 30 as a fallback.
|
||||
double get gaugeMax {
|
||||
final limit = (state.maxSpeedLimit ?? 30).toDouble();
|
||||
final v = imperial ? limit * _kmToMi : limit;
|
||||
return v <= 0 ? 1 : v;
|
||||
}
|
||||
|
||||
double get speedFraction => ((speed ?? 0) / gaugeMax).clamp(0.0, 1.0);
|
||||
|
||||
double get power => state.power ?? 0;
|
||||
double get drivePower => power > 0 ? power : 0;
|
||||
double get regenPower => power < 0 ? -power : 0;
|
||||
|
||||
String get speedText => speed == null ? '--' : speed!.round().toString();
|
||||
static String fmt(num? v, [int decimals = 1]) => v == null ? '--' : v.toStringAsFixed(decimals);
|
||||
}
|
||||
|
||||
/// Callbacks the layouts use for the control toggles.
|
||||
class ClusterActions {
|
||||
const ClusterActions({
|
||||
required this.toggleHeadlight,
|
||||
required this.toggleLock,
|
||||
required this.readOnlyTap,
|
||||
required this.busy,
|
||||
});
|
||||
|
||||
final VoidCallback toggleHeadlight;
|
||||
final VoidCallback toggleLock;
|
||||
final void Function(String name) readOnlyTap;
|
||||
final bool busy;
|
||||
}
|
||||
|
||||
Widget buildCluster(ClusterLayout layout, ClusterData d, ClusterActions a) => switch (layout) {
|
||||
ClusterLayout.arc => ArcCluster(data: d, actions: a),
|
||||
ClusterLayout.digital => DigitalCluster(data: d, actions: a),
|
||||
ClusterLayout.tiles => TilesCluster(data: d, actions: a),
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Arc layout
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
class ArcCluster extends StatelessWidget {
|
||||
const ArcCluster({super.key, required this.data, required this.actions});
|
||||
final ClusterData data;
|
||||
final ClusterActions actions;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final s = data.state;
|
||||
return LayoutBuilder(
|
||||
builder: (context, box) {
|
||||
final gaugeSize = math.min(box.maxWidth - 32, box.maxHeight * 0.5).clamp(220.0, 360.0);
|
||||
return SingleChildScrollView(
|
||||
padding: const EdgeInsets.fromLTRB(16, 8, 16, 24),
|
||||
child: Column(
|
||||
children: [
|
||||
Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: gaugeSize,
|
||||
height: gaugeSize,
|
||||
child: CustomPaint(
|
||||
painter: _GaugePainter(
|
||||
fraction: data.speedFraction,
|
||||
battery: s.batteryLevel,
|
||||
accent: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
ModeBadge(gear: s.gear),
|
||||
const SizedBox(height: 4),
|
||||
BigNumber(text: data.speedText, size: 108),
|
||||
Text(data.speedUnit, style: const TextStyle(color: OsColors.textDim, fontSize: 18)),
|
||||
const SizedBox(height: 14),
|
||||
ValueWithUnit(value: ClusterData.fmt(data.odometer), unit: data.distUnit, size: 26),
|
||||
const CapsLabel('ODOMETER'),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Positioned(top: 8, left: 0, child: Stat(value: ClusterData.fmt(data.regenPower, 0), unit: 'W', label: 'REGEN')),
|
||||
Positioned(top: 8, right: 0, child: Stat(value: ClusterData.fmt(data.drivePower, 0), unit: 'W', label: 'POWER', align: CrossAxisAlignment.end)),
|
||||
Positioned(bottom: 0, left: 0, child: Stat(value: '${s.controllerTemperature ?? '--'}', unit: '°C', label: 'CONTROLLER')),
|
||||
Positioned(bottom: 0, right: 0, child: Stat(value: '${s.motorTemperature ?? '--'}', unit: '°C', label: 'MOTOR', align: CrossAxisAlignment.end)),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
ControlsRow(state: s, actions: actions),
|
||||
const SizedBox(height: 20),
|
||||
BatteryBar(level: s.batteryLevel, voltage: s.voltage),
|
||||
const SizedBox(height: 20),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(child: Stat(value: ClusterData.fmt(data.trip), unit: data.distUnit, label: 'TRIP')),
|
||||
Expanded(child: Stat(value: ClusterData.fmt(s.current), unit: 'A', label: 'CURRENT', align: CrossAxisAlignment.center)),
|
||||
Expanded(child: Stat(value: ClusterData.fmt(s.voltage), unit: 'V', label: 'VOLTAGE', align: CrossAxisAlignment.end)),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
SignalRow(left: s.leftTurnSignal ?? false, right: s.rightTurnSignal ?? false),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _GaugePainter extends CustomPainter {
|
||||
_GaugePainter({required this.fraction, required this.battery, required this.accent});
|
||||
|
||||
final double fraction;
|
||||
final int? battery;
|
||||
final Color accent;
|
||||
|
||||
static const _sweep = 1.5 * math.pi;
|
||||
static const _start = 0.75 * math.pi;
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
final stroke = size.width * 0.07;
|
||||
final rect = Rect.fromLTWH(stroke / 2, stroke / 2, size.width - stroke, size.height - stroke);
|
||||
|
||||
canvas.drawArc(
|
||||
rect, _start, _sweep, false,
|
||||
Paint()
|
||||
..color = OsColors.track
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = stroke
|
||||
..strokeCap = StrokeCap.round,
|
||||
);
|
||||
if (fraction > 0) {
|
||||
canvas.drawArc(
|
||||
rect, _start, _sweep * fraction, false,
|
||||
Paint()
|
||||
..shader = SweepGradient(
|
||||
startAngle: _start,
|
||||
endAngle: _start + _sweep,
|
||||
colors: [accent.withValues(alpha: 0.55), accent],
|
||||
).createShader(rect)
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = stroke
|
||||
..strokeCap = StrokeCap.round,
|
||||
);
|
||||
}
|
||||
|
||||
final b = battery;
|
||||
if (b != null) {
|
||||
const gapStart = _start + _sweep;
|
||||
const gapSweep = 0.5 * math.pi;
|
||||
const margin = 0.09;
|
||||
final inner = rect.deflate(stroke * 0.15);
|
||||
canvas.drawArc(
|
||||
inner, gapStart + margin, gapSweep - 2 * margin, false,
|
||||
Paint()
|
||||
..color = OsColors.track
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = stroke * 0.7
|
||||
..strokeCap = StrokeCap.round,
|
||||
);
|
||||
final frac = (b / 100).clamp(0.0, 1.0);
|
||||
if (frac > 0) {
|
||||
canvas.drawArc(
|
||||
inner, gapStart + margin, (gapSweep - 2 * margin) * frac, false,
|
||||
Paint()
|
||||
..color = OsColors.batteryColor(b)
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = stroke * 0.7
|
||||
..strokeCap = StrokeCap.round,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(_GaugePainter old) =>
|
||||
old.fraction != fraction || old.battery != battery || old.accent != accent;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Digital layout
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
class DigitalCluster extends StatelessWidget {
|
||||
const DigitalCluster({super.key, required this.data, required this.actions});
|
||||
final ClusterData data;
|
||||
final ClusterActions actions;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final s = data.state;
|
||||
final accent = Theme.of(context).colorScheme.primary;
|
||||
return SingleChildScrollView(
|
||||
padding: const EdgeInsets.fromLTRB(20, 8, 20, 24),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
ModeBadge(gear: s.gear),
|
||||
SignalRow(left: s.leftTurnSignal ?? false, right: s.rightTurnSignal ?? false, compact: true),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
BigNumber(text: data.speedText, size: 150),
|
||||
const SizedBox(width: 10),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 22),
|
||||
child: Text(data.speedUnit, style: const TextStyle(color: OsColors.textDim, fontSize: 22)),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: SizedBox(
|
||||
height: 14,
|
||||
child: Stack(
|
||||
children: [
|
||||
Container(color: OsColors.track),
|
||||
FractionallySizedBox(
|
||||
widthFactor: data.speedFraction,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(colors: [accent.withValues(alpha: 0.6), accent]),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
const CapsLabel('0'),
|
||||
CapsLabel('${data.gaugeMax.round()} ${data.speedUnit}'),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(child: Stat(value: ClusterData.fmt(data.drivePower, 0), unit: 'W', label: 'POWER')),
|
||||
Expanded(child: Stat(value: ClusterData.fmt(data.regenPower, 0), unit: 'W', label: 'REGEN', align: CrossAxisAlignment.center)),
|
||||
Expanded(child: Stat(value: ClusterData.fmt(s.current), unit: 'A', label: 'CURRENT', align: CrossAxisAlignment.end)),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
BatteryBar(level: s.batteryLevel, voltage: s.voltage),
|
||||
const SizedBox(height: 24),
|
||||
ControlsRow(state: s, actions: actions),
|
||||
const SizedBox(height: 24),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(child: Stat(value: ClusterData.fmt(data.trip), unit: data.distUnit, label: 'TRIP')),
|
||||
Expanded(child: Stat(value: ClusterData.fmt(data.odometer), unit: data.distUnit, label: 'ODOMETER', align: CrossAxisAlignment.end)),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(child: Stat(value: '${s.motorTemperature ?? '--'}', unit: '°C', label: 'MOTOR')),
|
||||
Expanded(child: Stat(value: '${s.controllerTemperature ?? '--'}', unit: '°C', label: 'CONTROLLER', align: CrossAxisAlignment.end)),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tiles layout
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
class TilesCluster extends StatelessWidget {
|
||||
const TilesCluster({super.key, required this.data, required this.actions});
|
||||
final ClusterData data;
|
||||
final ClusterActions actions;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final s = data.state;
|
||||
final accent = Theme.of(context).colorScheme.primary;
|
||||
return SingleChildScrollView(
|
||||
padding: const EdgeInsets.fromLTRB(16, 8, 16, 24),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Tile(
|
||||
accent: true,
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const CapsLabel('SPEED'),
|
||||
const SizedBox(height: 6),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
BigNumber(text: data.speedText, size: 88),
|
||||
const SizedBox(width: 8),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 12),
|
||||
child: Text(data.speedUnit, style: const TextStyle(color: OsColors.textDim, fontSize: 18)),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
ModeBadge(gear: s.gear),
|
||||
const SizedBox(height: 12),
|
||||
SignalRow(left: s.leftTurnSignal ?? false, right: s.rightTurnSignal ?? false, compact: true),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Tile(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const CapsLabel('BATTERY'),
|
||||
const SizedBox(height: 8),
|
||||
ValueWithUnit(value: '${s.batteryLevel ?? '--'}', unit: '%', size: 40),
|
||||
const SizedBox(height: 10),
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
child: LinearProgressIndicator(
|
||||
minHeight: 8,
|
||||
value: ((s.batteryLevel ?? 0) / 100).clamp(0.0, 1.0),
|
||||
backgroundColor: OsColors.track,
|
||||
color: OsColors.batteryColor(s.batteryLevel),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
ValueWithUnit(value: ClusterData.fmt(s.voltage), unit: 'V', size: 18),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Tile(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const CapsLabel('POWER'),
|
||||
const SizedBox(height: 8),
|
||||
ValueWithUnit(value: ClusterData.fmt(data.drivePower, 0), unit: 'W', size: 40),
|
||||
const SizedBox(height: 10),
|
||||
Row(
|
||||
children: [
|
||||
Icon(Icons.bolt_rounded, size: 16, color: accent),
|
||||
const SizedBox(width: 4),
|
||||
Text('${ClusterData.fmt(s.current)} A', style: const TextStyle(color: OsColors.textDim)),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Row(
|
||||
children: [
|
||||
const Icon(Icons.replay_rounded, size: 16, color: OsColors.good),
|
||||
const SizedBox(width: 4),
|
||||
Text('${ClusterData.fmt(data.regenPower, 0)} W regen', style: const TextStyle(color: OsColors.textDim)),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(child: _SmallTile(label: 'TRIP', value: ClusterData.fmt(data.trip), unit: data.distUnit)),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(child: _SmallTile(label: 'ODOMETER', value: ClusterData.fmt(data.odometer), unit: data.distUnit)),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(child: _SmallTile(label: 'MOTOR', value: '${s.motorTemperature ?? '--'}', unit: '°C')),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(child: _SmallTile(label: 'CONTROLLER', value: '${s.controllerTemperature ?? '--'}', unit: '°C')),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Tile(child: ControlsRow(state: s, actions: actions)),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SmallTile extends StatelessWidget {
|
||||
const _SmallTile({required this.label, required this.value, required this.unit});
|
||||
final String label;
|
||||
final String value;
|
||||
final String unit;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Tile(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
CapsLabel(label),
|
||||
const SizedBox(height: 6),
|
||||
ValueWithUnit(value: value, unit: unit, size: 30),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class Tile extends StatelessWidget {
|
||||
const Tile({super.key, required this.child, this.accent = false});
|
||||
final Widget child;
|
||||
final bool accent;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final primary = Theme.of(context).colorScheme.primary;
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: OsColors.surface,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: Border.all(color: accent ? primary.withValues(alpha: 0.5) : OsColors.surfaceHigh),
|
||||
),
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Shared pieces
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
class BigNumber extends StatelessWidget {
|
||||
const BigNumber({super.key, required this.text, required this.size});
|
||||
final String text;
|
||||
final double size;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Text(
|
||||
text,
|
||||
style: TextStyle(
|
||||
fontSize: size,
|
||||
height: 1.0,
|
||||
fontWeight: FontWeight.w800,
|
||||
letterSpacing: -size * 0.035,
|
||||
fontFeatures: const [FontFeature.tabularFigures()],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class ValueWithUnit extends StatelessWidget {
|
||||
const ValueWithUnit({super.key, required this.value, required this.unit, required this.size});
|
||||
final String value;
|
||||
final String unit;
|
||||
final double size;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Text.rich(
|
||||
TextSpan(
|
||||
text: value,
|
||||
style: TextStyle(
|
||||
fontSize: size,
|
||||
fontWeight: FontWeight.w700,
|
||||
height: 1.0,
|
||||
fontFeatures: const [FontFeature.tabularFigures()],
|
||||
),
|
||||
children: [
|
||||
TextSpan(
|
||||
text: ' $unit',
|
||||
style: TextStyle(fontSize: size * 0.5, fontWeight: FontWeight.w400, color: OsColors.textDim),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class Stat extends StatelessWidget {
|
||||
const Stat({
|
||||
super.key,
|
||||
required this.value,
|
||||
required this.unit,
|
||||
required this.label,
|
||||
this.align = CrossAxisAlignment.start,
|
||||
});
|
||||
|
||||
final String value;
|
||||
final String unit;
|
||||
final String label;
|
||||
final CrossAxisAlignment align;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Column(
|
||||
crossAxisAlignment: align,
|
||||
children: [
|
||||
ValueWithUnit(value: value, unit: unit, size: 30),
|
||||
const SizedBox(height: 2),
|
||||
CapsLabel(label),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
class CapsLabel extends StatelessWidget {
|
||||
const CapsLabel(this.text, {super.key});
|
||||
final String text;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) =>
|
||||
Text(text, style: const TextStyle(color: OsColors.textDim, fontSize: 11, letterSpacing: 1.2));
|
||||
}
|
||||
|
||||
class ModeBadge extends StatelessWidget {
|
||||
const ModeBadge({super.key, required this.gear});
|
||||
final int? gear;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final primary = Theme.of(context).colorScheme.primary;
|
||||
// INFERRED mode names for gears 1..3; falls back to the raw gear number.
|
||||
final (label, color) = switch (gear) {
|
||||
1 => ('Eco', OsColors.good),
|
||||
2 => ('Comfort', primary),
|
||||
3 => ('Sport', OsColors.bad),
|
||||
null => ('--', OsColors.surfaceHigh),
|
||||
final g => ('Gear $g', OsColors.surfaceHigh),
|
||||
};
|
||||
final fg = color.computeLuminance() > 0.5 ? OsColors.background : Colors.white;
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 6),
|
||||
decoration: BoxDecoration(color: color, borderRadius: BorderRadius.circular(12)),
|
||||
child: Text(label, style: TextStyle(fontWeight: FontWeight.w800, fontSize: 17, color: fg)),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ControlsRow extends StatelessWidget {
|
||||
const ControlsRow({super.key, required this.state, required this.actions});
|
||||
final ScooterState state;
|
||||
final ClusterActions actions;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final s = state;
|
||||
final locked = s.locked ?? false;
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
RoundToggle(
|
||||
icon: Icons.highlight_rounded,
|
||||
active: s.headlight ?? false,
|
||||
tooltip: 'Headlight',
|
||||
onTap: actions.busy ? null : actions.toggleHeadlight,
|
||||
),
|
||||
RoundToggle(
|
||||
icon: Icons.light_mode_outlined,
|
||||
active: s.atmosphereLight ?? false,
|
||||
tooltip: 'Atmosphere light',
|
||||
onTap: () => actions.readOnlyTap('Atmosphere light'),
|
||||
),
|
||||
RoundToggle(
|
||||
icon: Icons.speed_rounded,
|
||||
active: s.cruiseControl ?? false,
|
||||
tooltip: 'Cruise control',
|
||||
onTap: () => actions.readOnlyTap('Cruise control'),
|
||||
),
|
||||
RoundToggle(
|
||||
icon: locked ? Icons.lock_rounded : Icons.lock_open_rounded,
|
||||
active: locked,
|
||||
activeColor: OsColors.bad,
|
||||
tooltip: locked ? 'Locked' : 'Unlocked',
|
||||
onTap: actions.busy ? null : actions.toggleLock,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class RoundToggle extends StatelessWidget {
|
||||
const RoundToggle({
|
||||
super.key,
|
||||
required this.icon,
|
||||
required this.active,
|
||||
required this.tooltip,
|
||||
this.onTap,
|
||||
this.activeColor,
|
||||
});
|
||||
|
||||
final IconData icon;
|
||||
final bool active;
|
||||
final String tooltip;
|
||||
final VoidCallback? onTap;
|
||||
final Color? activeColor;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final color = activeColor ?? Theme.of(context).colorScheme.primary;
|
||||
final bg = active ? color : OsColors.surfaceHigh;
|
||||
final fg = active
|
||||
? (color.computeLuminance() > 0.5 ? OsColors.background : Colors.white)
|
||||
: OsColors.textDim;
|
||||
return Tooltip(
|
||||
message: tooltip,
|
||||
child: Material(
|
||||
color: bg,
|
||||
shape: const CircleBorder(),
|
||||
child: InkWell(
|
||||
customBorder: const CircleBorder(),
|
||||
onTap: onTap,
|
||||
child: SizedBox(width: 62, height: 62, child: Icon(icon, color: fg, size: 27)),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Battery bar. Both readings are centred as a group inside the fill.
|
||||
class BatteryBar extends StatelessWidget {
|
||||
const BatteryBar({super.key, required this.level, required this.voltage});
|
||||
final int? level;
|
||||
final double? voltage;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l = level;
|
||||
final frac = l == null ? 0.0 : (l / 100).clamp(0.0, 1.0);
|
||||
final color = OsColors.batteryColor(l);
|
||||
return Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Container(
|
||||
height: 92,
|
||||
decoration: BoxDecoration(
|
||||
color: OsColors.surface,
|
||||
border: Border.all(color: OsColors.surfaceHigh, width: 2),
|
||||
borderRadius: BorderRadius.circular(18),
|
||||
),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: FractionallySizedBox(
|
||||
widthFactor: frac,
|
||||
heightFactor: 1,
|
||||
child: Container(color: color.withValues(alpha: 0.28)),
|
||||
),
|
||||
),
|
||||
Center(
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
ValueWithUnit(value: l?.toString() ?? '--', unit: '%', size: 46),
|
||||
Container(
|
||||
width: 1,
|
||||
height: 40,
|
||||
margin: const EdgeInsets.symmetric(horizontal: 22),
|
||||
color: OsColors.surfaceHigh,
|
||||
),
|
||||
ValueWithUnit(value: ClusterData.fmt(voltage), unit: 'V', size: 38),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 5),
|
||||
Container(
|
||||
width: 8,
|
||||
height: 30,
|
||||
decoration: const BoxDecoration(
|
||||
color: OsColors.surfaceHigh,
|
||||
borderRadius: BorderRadius.horizontal(right: Radius.circular(4)),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class SignalRow extends StatelessWidget {
|
||||
const SignalRow({super.key, required this.left, required this.right, this.compact = false});
|
||||
final bool left;
|
||||
final bool right;
|
||||
final bool compact;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final size = compact ? 22.0 : 28.0;
|
||||
if (!left && !right && !compact) return SizedBox(height: size);
|
||||
return Row(
|
||||
mainAxisSize: compact ? MainAxisSize.min : MainAxisSize.max,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Icon(Icons.arrow_back_rounded, size: size, color: left ? OsColors.good : OsColors.track),
|
||||
if (compact) const SizedBox(width: 8),
|
||||
Icon(Icons.arrow_forward_rounded, size: size, color: right ? OsColors.good : OsColors.track),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user