mikkeli/smart-serow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

multiple updates

Browse Source 
- colour theme implemented. ThemeService based global switching for future light detection triggers
- test flipflop service for various fun
- navigator widget class with state switching
This commit is contained in:
Mikkeli Matlock
2026-01-26 00:20:52 +09:00
parent b1e23fdd10
commit c7edc30b79
18 changed files with 489 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pi/ui/.gitignore vendored
View File

@@ -43,3 +43,6 @@ app.*.map.json
/android/app/debug
/android/app/profile
/android/app/release
# Generated theme
lib/theme/app_colors.dart

2
pi/ui/config.json
View File

@@ -1,5 +1,5 @@
{
"assets_path": "/home/pi/smartserow-ui/assets",
"assets_path": "/home/mikkeli/smartserow-ui/assets",
"navigator": "rei",
"overheat": {
"threshold_celsius": 75.0,

24
pi/ui/lib/main.dart
View File

@@ -1,6 +1,8 @@
import 'package:flutter/material.dart';
import 'app_root.dart';
import 'theme/app_colors.dart';
import 'theme/app_theme.dart';
void main() {
runApp(const SmartSerowApp());
@@ -11,18 +13,20 @@ class SmartSerowApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Smart Serow',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.teal,
brightness: Brightness.dark,
return AppThemeProvider(
child: MaterialApp(
title: 'Smart Serow',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: AppColors.darkSubdued,
brightness: Brightness.dark,
),
useMaterial3: true,
fontFamily: 'DIN1451',
),
useMaterial3: true,
fontFamily: 'DIN1451',
home: const AppRoot(),
),
home: const AppRoot(),
);
}
}

47
pi/ui/lib/screens/dashboard_screen.dart
View File

@@ -1,12 +1,15 @@
import 'dart:async';
import 'dart:io';
import 'dart:math';
import 'package:flutter/material.dart';
import '../services/config_service.dart';
import '../services/pi_io.dart';
import '../theme/app_theme.dart';
import '../widgets/navigator_widget.dart';
import '../widgets/stat_box.dart';
// test service for triggers
import '../services/test_flipflop_service.dart';
/// Main dashboard - displays Pi vitals and placeholder stats
class DashboardScreen extends StatefulWidget {
const DashboardScreen({super.key});
@@ -17,6 +20,7 @@ class DashboardScreen extends StatefulWidget {
class _DashboardScreenState extends State<DashboardScreen> {
final _random = Random();
final _navigatorKey = GlobalKey<NavigatorWidgetState>();
Timer? _timer;
double? _piTemp;
@@ -40,33 +44,24 @@ class _DashboardScreenState extends State<DashboardScreen> {
_temp = 20 + _random.nextInt(60);
});
});
// DEBUG: flip-flop theme + navigator every 2s
TestFlipFlopService.instance.start(navigatorKey: _navigatorKey);
}
@override
void dispose() {
_timer?.cancel();
TestFlipFlopService.instance.stop();
super.dispose();
}
/// Build navigator image from filesystem
Widget _buildNavigatorImage() {
final config = ConfigService.instance;
final imagePath = '${config.assetsPath}/navigator/${config.navigator}/default.png';
return Image.file(
File(imagePath),
fit: BoxFit.contain,
errorBuilder: (context, error, stackTrace) {
// Graceful fallback - empty box if image missing
return const SizedBox.shrink();
},
);
}
@override
Widget build(BuildContext context) {
final theme = AppTheme.of(context);
return Scaffold(
backgroundColor: Colors.black,
backgroundColor: theme.background,
body: Padding(
padding: const EdgeInsets.all(32),
child: Row(
@@ -84,20 +79,20 @@ class _DashboardScreenState extends State<DashboardScreen> {
Text(
'SMART SEROW',
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: Colors.teal,
color: theme.subdued,
letterSpacing: 2,
),
),
Text(
'${_voltage.toStringAsFixed(1)}V',
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: _voltage < 12.0 ? Colors.red : Colors.green,
color: _voltage < 12.0 ? theme.highlight : theme.foreground,
),
),
],
),
const SizedBox(height: 48),
const SizedBox(height: 20),
// Main Pi temperature display
Expanded(
@@ -107,17 +102,17 @@ class _DashboardScreenState extends State<DashboardScreen> {
children: [
Text(
_piTemp != null ? _piTemp!.toStringAsFixed(1) : '—',
style: const TextStyle(
fontSize: 180,
style: TextStyle(
fontSize: 250,
fontWeight: FontWeight.w200,
color: Colors.white,
color: theme.foreground,
height: 1,
),
),
Text(
'Pi Temp',
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
color: Colors.grey,
color: theme.subdued,
),
),
],
@@ -144,7 +139,7 @@ class _DashboardScreenState extends State<DashboardScreen> {
Expanded(
flex: 1,
child: Center(
child: _buildNavigatorImage(),
child: NavigatorWidget(key: _navigatorKey),
),
),
],

24
pi/ui/lib/screens/overheat_screen.dart
View File

@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
import '../services/config_service.dart';
import '../services/pi_io.dart';
import '../theme/app_theme.dart';
/// Overheat warning screen with shutdown countdown
///
@@ -81,30 +82,31 @@ class _OverheatScreenState extends State<OverheatScreen> {
@override
Widget build(BuildContext context) {
final theme = AppTheme.of(context);
final threshold = ConfigService.instance.overheatThreshold;
return Scaffold(
backgroundColor: Colors.black,
backgroundColor: theme.background,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Warning icon
const Icon(
Icon(
Icons.warning_amber_rounded,
size: 100,
color: Colors.red,
color: theme.highlight,
),
const SizedBox(height: 16),
// OVERHEATING text
const Text(
Text(
'OVERHEATING',
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.bold,
color: Colors.red,
color: theme.highlight,
letterSpacing: 4,
),
),
@@ -114,10 +116,10 @@ class _OverheatScreenState extends State<OverheatScreen> {
// Current temperature
Text(
_currentTemp != null ? '${_currentTemp!.toStringAsFixed(1)}°C' : '—',
style: const TextStyle(
style: TextStyle(
fontSize: 120,
fontWeight: FontWeight.w200,
color: Colors.white,
color: theme.foreground,
height: 1,
),
),
@@ -127,9 +129,9 @@ class _OverheatScreenState extends State<OverheatScreen> {
// Threshold info
Text(
'Threshold: ${threshold.toStringAsFixed(0)}°C',
style: const TextStyle(
style: TextStyle(
fontSize: 24,
color: Colors.grey,
color: theme.subdued,
),
),
@@ -138,9 +140,9 @@ class _OverheatScreenState extends State<OverheatScreen> {
// Countdown
Text(
'Shutdown in $_secondsRemaining s',
style: const TextStyle(
style: TextStyle(
fontSize: 32,
color: Colors.orange,
color: theme.highlight,
fontWeight: FontWeight.w500,
),
),

12
pi/ui/lib/screens/splash_screen.dart
View File

@@ -1,5 +1,7 @@
import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
/// Splash screen - shown during initialization
class SplashScreen extends StatelessWidget {
final String status;
@@ -8,8 +10,10 @@ class SplashScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = AppTheme.of(context);
return Scaffold(
backgroundColor: Colors.black,
backgroundColor: theme.background,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
@@ -17,13 +21,13 @@ class SplashScreen extends StatelessWidget {
Icon(
Icons.terrain,
size: 120,
color: Theme.of(context).colorScheme.primary,
color: theme.subdued,
),
const SizedBox(height: 24),
Text(
'Smart Serow',
style: Theme.of(context).textTheme.headlineLarge?.copyWith(
color: Colors.white,
color: theme.foreground,
fontWeight: FontWeight.bold,
),
),
@@ -31,7 +35,7 @@ class SplashScreen extends StatelessWidget {
Text(
status,
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: Colors.grey,
color: theme.subdued,
),
),
],

50
pi/ui/lib/services/test_flipflop_service.dart Normal file
View File

@@ -0,0 +1,50 @@
import 'dart:async';
import 'package:flutter/widgets.dart';
import '../widgets/navigator_widget.dart';
import 'theme_service.dart';
/// Debug service that flip-flops theme and navigator emotion every 2 seconds.
///
/// Usage:
/// ```dart
/// TestFlipFlopService.instance.start(navigatorKey: _navigatorKey);
/// // Later:
/// TestFlipFlopService.instance.stop();
/// ```
class TestFlipFlopService {
TestFlipFlopService._();
static final instance = TestFlipFlopService._();
Timer? _timer;
bool _running = false;
bool get isRunning => _running;
/// Start the flip-flop cycle.
/// Pass the navigator's GlobalKey to trigger emotion changes.
void start({required GlobalKey<NavigatorWidgetState> navigatorKey}) {
stop();
_running = true;
_timer = Timer.periodic(const Duration(seconds: 2), (_) {
// Toggle theme
ThemeService.instance.toggle();
// Surprise the navigator
if (navigatorKey.currentState?.emotion == 'surprise') {
navigatorKey.currentState?.reset();
} else {
navigatorKey.currentState?.setEmotion('surprise');
}
});
}
/// Stop the flip-flop cycle.
void stop() {
_timer?.cancel();
_timer = null;
_running = false;
}
}

40
pi/ui/lib/services/theme_service.dart Normal file
View File

@@ -0,0 +1,40 @@
/// Theme switching service - singleton pattern matching OverheatMonitor
///
/// Manages dark/bright mode state and notifies listeners on change.
/// Default is dark mode. Call setDarkMode() from sensor readings.
class ThemeService {
ThemeService._();
static final instance = ThemeService._();
bool _isDarkMode = true;
final List<void Function()> _listeners = [];
/// Current theme mode
bool get isDarkMode => _isDarkMode;
/// Set theme mode. Notifies listeners if changed.
void setDarkMode(bool dark) {
if (_isDarkMode == dark) return;
_isDarkMode = dark;
_notifyListeners();
}
/// Toggle between dark and bright
void toggle() => setDarkMode(!_isDarkMode);
/// Add a listener for theme changes
void addListener(void Function() listener) {
_listeners.add(listener);
}
/// Remove a listener
void removeListener(void Function() listener) {
_listeners.remove(listener);
}
void _notifyListeners() {
for (final listener in _listeners) {
listener();
}
}
}

75
pi/ui/lib/theme/app_theme.dart Normal file
View File

@@ -0,0 +1,75 @@
import 'package:flutter/material.dart';
import '../services/theme_service.dart';
import 'app_colors.dart';
/// InheritedWidget providing runtime theme colors
///
/// Wraps the app and provides semantic color getters that resolve
/// to dark or bright variants based on ThemeService state.
///
/// Usage: AppTheme.of(context).background
class AppTheme extends InheritedWidget {
final bool isDarkMode;
const AppTheme({
super.key,
required this.isDarkMode,
required super.child,
});
/// Get the nearest AppTheme from context
static AppTheme of(BuildContext context) {
final theme = context.dependOnInheritedWidgetOfExactType<AppTheme>();
assert(theme != null, 'No AppTheme found in context');
return theme!;
}
// Semantic color getters - pick dark or bright based on mode
Color get background => isDarkMode ? AppColors.darkBackground : AppColors.brightBackground;
Color get foreground => isDarkMode ? AppColors.darkForeground : AppColors.brightForeground;
Color get highlight => isDarkMode ? AppColors.darkHighlight : AppColors.brightHighlight;
Color get subdued => isDarkMode ? AppColors.darkSubdued : AppColors.brightSubdued;
@override
bool updateShouldNotify(AppTheme oldWidget) => isDarkMode != oldWidget.isDarkMode;
}
/// Wrapper widget that manages AppTheme state
///
/// Listens to ThemeService and rebuilds when theme changes.
/// Place this at the root of your widget tree.
class AppThemeProvider extends StatefulWidget {
final Widget child;
const AppThemeProvider({super.key, required this.child});
@override
State<AppThemeProvider> createState() => _AppThemeProviderState();
}
class _AppThemeProviderState extends State<AppThemeProvider> {
@override
void initState() {
super.initState();
ThemeService.instance.addListener(_onThemeChanged);
}
@override
void dispose() {
ThemeService.instance.removeListener(_onThemeChanged);
super.dispose();
}
void _onThemeChanged() {
setState(() {});
}
@override
Widget build(BuildContext context) {
return AppTheme(
isDarkMode: ThemeService.instance.isDarkMode,
child: widget.child,
);
}
}

59
pi/ui/lib/widgets/navigator_widget.dart Normal file
View File

@@ -0,0 +1,59 @@
import 'dart:io';
import 'package:flutter/material.dart';
import '../services/config_service.dart';
/// Displays the navigator character with emotion support.
///
/// Use a GlobalKey to control emotions from parent:
/// ```dart
/// final _navigatorKey = GlobalKey<NavigatorWidgetState>();
/// NavigatorWidget(key: _navigatorKey)
/// // Later:
/// _navigatorKey.currentState?.setEmotion('happy');
/// ```
class NavigatorWidget extends StatefulWidget {
const NavigatorWidget({super.key});
@override
State<NavigatorWidget> createState() => NavigatorWidgetState();
}
class NavigatorWidgetState extends State<NavigatorWidget> {
String _emotion = 'default';
/// Change the displayed emotion.
/// Image file must exist at: {assetsPath}/navigator/{navigator}/{emotion}.png
void setEmotion(String emotion) {
if (emotion != _emotion) {
setState(() => _emotion = emotion);
}
}
/// Reset to default emotion
void reset() => setEmotion('default');
/// Current emotion
String get emotion => _emotion;
@override
Widget build(BuildContext context) {
final config = ConfigService.instance;
final basePath = '${config.assetsPath}/navigator/${config.navigator}';
return Image.file(
File('$basePath/$_emotion.png'),
fit: BoxFit.contain,
errorBuilder: (context, error, stackTrace) {
// Fallback: try default.png if specific emotion missing
if (_emotion != 'default') {
return Image.file(
File('$basePath/default.png'),
fit: BoxFit.contain,
errorBuilder: (_, __, ___) => const SizedBox.shrink(),
);
}
return const SizedBox.shrink();
},
);
}
}

10
pi/ui/lib/widgets/stat_box.dart
View File

@@ -1,5 +1,7 @@
import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
/// A labeled stat display box for the dashboard
class StatBox extends StatelessWidget {
final String label;
@@ -9,18 +11,22 @@ class StatBox extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = AppTheme.of(context);
return Column(
children: [
Text(
value,
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
color: Colors.white,
fontSize: 100,
color: theme.foreground,
),
),
Text(
label,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Colors.grey,
fontSize: 80,
color: theme.subdued,
letterSpacing: 1,
),
),

26
pi/ui/pubspec.lock
View File

@@ -45,10 +45,10 @@ packages:
dependency: transitive
description:
name: fake_async
sha256: "5368f224a74523e8d2e7399ea1638b37aecfca824a3cc4dfdf77bf1fa905ac44"
sha256: "6a95e56b2449df2273fd8c45a662d6947ce1ebb7aafe80e550a3f68297f3cacc"
url: "https://pub.dev"
source: hosted
version: "1.3.3"
version: "1.3.2"
flutter:
dependency: "direct main"
description: flutter
@@ -71,26 +71,26 @@ packages:
dependency: transitive
description:
name: leak_tracker
sha256: "33e2e26bdd85a0112ec15400c8cbffea70d0f9c3407491f672a2fad47915e2de"
sha256: c35baad643ba394b40aac41080300150a4f08fd0fd6a10378f8f7c6bc161acec
url: "https://pub.dev"
source: hosted
version: "11.0.2"
version: "10.0.8"
leak_tracker_flutter_testing:
dependency: transitive
description:
name: leak_tracker_flutter_testing
sha256: "1dbc140bb5a23c75ea9c4811222756104fbcd1a27173f0c34ca01e16bea473c1"
sha256: f8b613e7e6a13ec79cfdc0e97638fddb3ab848452eff057653abd3edba760573
url: "https://pub.dev"
source: hosted
version: "3.0.10"
version: "3.0.9"
leak_tracker_testing:
dependency: transitive
description:
name: leak_tracker_testing
sha256: "8d5a2d49f4a66b49744b23b018848400d23e54caf9463f4eb20df3eb8acb2eb1"
sha256: "6ba465d5d76e67ddf503e1161d1f4a6bc42306f9d66ca1e8f079a47290fb06d3"
url: "https://pub.dev"
source: hosted
version: "3.0.2"
version: "3.0.1"
lints:
dependency: transitive
description:
@@ -180,18 +180,18 @@ packages:
dependency: transitive
description:
name: test_api
sha256: "522f00f556e73044315fa4585ec3270f1808a4b186c936e612cab0b565ff1e00"
sha256: fb31f383e2ee25fbbfe06b40fe21e1e458d14080e3c67e7ba0acfde4df4e0bbd
url: "https://pub.dev"
source: hosted
version: "0.7.6"
version: "0.7.4"
vector_math:
dependency: transitive
description:
name: vector_math
sha256: d530bd74fea330e6e364cda7a85019c434070188383e1cd8d9777ee586914c5b
sha256: "80b3257d1492ce4d091729e3a67a60407d227c27241d6927be0130c98e741803"
url: "https://pub.dev"
source: hosted
version: "2.2.0"
version: "2.1.4"
vm_service:
dependency: transitive
description:
@@ -201,5 +201,5 @@ packages:
source: hosted
version: "14.3.1"
sdks:
dart: ">=3.8.0-0 <4.0.0"
dart: ">=3.7.0-0 <4.0.0"
flutter: ">=3.18.0-18.0.pre.54"