UI zones (#36)

* Adjust widgets so it doesn't overflow

* Adjust size of views

* Add zone create button

* Fix image not retrieved

* Fix saving snapshots error

* Formatting

* Added schema endpoint for config

* Use auto sizing gridview

* Start adjusting size

* Have more adjustments for number of columns

* Add progress indicator when loading the detections

Author: NickM-27

swatch/http.py

@@ -57,6 +57,18 @@ def get_config() -> Any:
     return make_response(jsonify(current_app.swatch_config.dict()), 200)
 
 
+@bp.route("/config/schema", methods=["GET"])
+def get_config_schema() -> Any:
+    """Get schema for the swatch config.
+    Which is useful for vscode or other code completion."""
+    return current_app.response_class(
+        current_app.swatch_config.schema_json(), mimetype="application/json"
+    )
+
+
+### Color Testing Routes
+
+
 @bp.route("/colortest/values", methods=["POST"])
 def test_colors() -> Any:
     """Test and get color values inside of test image."""
@@ -390,7 +402,7 @@ def get_detection_snapshot(detection_id: str):
                 "success": False,
                 "message": f"Error loading snapshot for {detection_id}.",
             },
-            404,
+            500,
         )
 
     except DoesNotExist:

swatch/snapshot.py

@@ -98,10 +98,13 @@ def get_detection_snapshot(self, detection: Detection) -> Any:
 
         file = f"{file_dir}/{detection.id}.jpg"
 
-        with open(file, "rb") as image_file:
-            jpg_bytes = image_file.read()
+        try:
+            with open(file, "rb") as image_file:
+                jpg_bytes = image_file.read()
 
-        return jpg_bytes
+            return jpg_bytes
+        except:
+            return None
 
     def get_latest_camera_snapshot(
         self,

web/lib/components/component_camera.dart

@@ -1,11 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:swatch/api/api.dart';
+import 'package:swatch/components/component_new_zone.dart';
 import 'package:swatch/components/component_zone.dart';
 import 'package:swatch/ext/extension_string.dart';
 import 'package:swatch/models/camera.dart';
 
 class CameraComponent extends StatelessWidget {
-
   final SwatchApi _api = SwatchApi();
   final Camera camera;
 
@@ -48,9 +48,9 @@ class CameraComponent extends StatelessWidget {
             ),
           ),
           Padding(
-            padding: const EdgeInsets.fromLTRB(8.0, 24.0, 8.0, 8.0),
+            padding: const EdgeInsets.fromLTRB(8.0, 4.0, 8.0, 4.0),
             child: Column(
-              mainAxisAlignment: MainAxisAlignment.end,
+              mainAxisAlignment: MainAxisAlignment.start,
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 const Text(
@@ -71,7 +71,16 @@ class CameraComponent extends StatelessWidget {
 
   List<Widget> _getZones(Camera config) {
     final keys = config.zones.keys.toList();
-    return List.generate(config.zones.length,
-        (index) => ZoneComponent(config, config.zones[keys[index]]!));
+    return List.generate(
+      config.zones.length + 1,
+      (index) {
+        if (index < config.zones.length) {
+          return ZoneComponent(config, config.zones[keys[index]]!);
+        } else {
+          return const SizedBox();
+          //return const CreateZoneComponent();
+        }
+      },
+    );
   }
 }

web/lib/components/component_detection.dart

@@ -26,6 +26,13 @@ class DetectionComponent extends StatelessWidget {
                 "${_api.getHost()}/api/detections/${event.id}/snapshot.jpg",
                 height: 100.0,
                 fit: BoxFit.fill,
+                errorBuilder: (context, obj, str) {
+                  return Container(
+                    width: 120.0,
+                    height: 100.0,
+                    color: Colors.black,
+                  );
+                },
               ),
             ),
             Padding(
@@ -63,8 +70,7 @@ class DetectionComponent extends StatelessWidget {
                         size: 18.0,
                       ),
                       Padding(
-                        padding:
-                        const EdgeInsets.symmetric(horizontal: 4.0),
+                        padding: const EdgeInsets.symmetric(horizontal: 4.0),
                         child: Text(
                           event.getCamera(),
                           textAlign: TextAlign.center,
@@ -96,8 +102,7 @@ class DetectionComponent extends StatelessWidget {
                         size: 18.0,
                       ),
                       Padding(
-                        padding:
-                        const EdgeInsets.symmetric(horizontal: 4.0),
+                        padding: const EdgeInsets.symmetric(horizontal: 4.0),
                         child: Text(
                           event.getColorVariant(),
                           textAlign: TextAlign.center,

web/lib/components/component_new_zone.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+import 'package:swatch/theme/theme_helper.dart';
+
+class CreateZoneComponent extends StatelessWidget {
+  const CreateZoneComponent({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      color: Colors.grey[700],
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.all(
+          Radius.circular(8.0),
+        ),
+      ),
+      child: SizedBox(
+        width: 98.0,
+        height: 104.0,
+        child: IconButton(
+          icon: Icon(
+            Icons.add_location_alt_outlined,
+            color: SwatchColors.getPrimaryColor(),
+          ),
+          onPressed: () {},
+        ),
+      ),
+    );
+  }
+}

web/lib/components/component_zone.dart

@@ -5,7 +5,6 @@ import 'package:swatch/models/camera.dart';
 import 'package:swatch/models/zone.dart';
 
 class ZoneComponent extends StatelessWidget {
-
   final SwatchApi _api = SwatchApi();
   final Camera camera;
   final Zone zone;
@@ -26,20 +25,19 @@ class ZoneComponent extends StatelessWidget {
         ),
       ),
       child: Column(
-        mainAxisSize: MainAxisSize.min,
-        mainAxisAlignment: MainAxisAlignment.start,
+        mainAxisSize: MainAxisSize.max,
+        mainAxisAlignment: MainAxisAlignment.end,
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           ClipRRect(
             borderRadius: const BorderRadius.all(Radius.circular(8.0)),
             child: Image.network(
               "${_api.getHost()}/api/${camera.name}/${zone.name}/snapshot.jpg",
-              height: 100,
               fit: BoxFit.fill,
             ),
           ),
           Padding(
-            padding: const EdgeInsets.all(8.0),
+            padding: const EdgeInsets.fromLTRB(8.0, 4.0, 8.0, 4.0),
             child: Text(
               zone.name.replaceAll('_', ' ').title(),
               style: const TextStyle(

web/lib/ext/extension_double.dart

@@ -0,0 +1,14 @@
+extension IntExtension on double {
+
+  int getColumnsForWidth() {
+    if (this < 600) {
+      return 1;
+    } else if (this < 1200) {
+      return 2;
+    } else if (this < 1800) {
+      return 3;
+    } else {
+      return 4;
+    }
+  }
+}

web/lib/routes/route_adjust_zone.dart

@@ -1,8 +1,9 @@
-
 import 'package:flutter/material.dart';
+import 'package:flutter_layout_grid/flutter_layout_grid.dart';
 import 'package:swatch/api/api.dart';
 import 'package:swatch/components/component_camera.dart';
 import 'package:swatch/const.dart';
+import 'package:swatch/ext/extension_double.dart';
 import 'package:swatch/models/config.dart';
 
 import 'package:collapsible_sidebar/collapsible_sidebar.dart';
@@ -18,7 +19,6 @@ class DashboardRoute extends StatefulWidget {
 }
 
 class DashboardRouteState extends State<DashboardRoute> {
-
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -57,18 +57,26 @@ class DashboardRouteState extends State<DashboardRoute> {
   }
 }
 
-class _DashboardView extends StatelessWidget {
+class _DashboardView extends StatefulWidget {
+  @override
+  State<_DashboardView> createState() => _DashboardViewState();
+}
+
+class _DashboardViewState extends State<_DashboardView> {
   final SwatchApi _api = SwatchApi();
 
   @override
   Widget build(BuildContext context) {
+    final columnCount = MediaQuery.of(context).size.width.getColumnsForWidth();
+
     return Scaffold(
       body: FutureBuilder(
         future: _api.getConfig(),
         builder: (context, AsyncSnapshot<Config> config) {
           if (config.hasData) {
-            return GridView.extent(
-              maxCrossAxisExtent: 500,
+            return LayoutGrid(
+              columnSizes: List.generate(columnCount, (index) => 1.fr),
+              rowSizes: List.generate(columnCount, (index) => auto),
               children: _getCameras(config.data!),
             );
           } else {

web/lib/routes/route_dashboard.dart

@@ -81,17 +81,28 @@ class _DetectionsViewState extends State<_DetectionsView> {
             return ListView(
               children: _getDetections(detections.data!),
             );
-          } else {
+          } else if (detections.hasData && detections.data!.isEmpty) {
             return Container(
               alignment: Alignment.center,
-              child: const SizedBox(width: 400.0,
+              child: const SizedBox(
+                width: 400.0,
                 child: Text(
                   "No detections found. Once an object is detected it will appear here.",
                   textAlign: TextAlign.center,
                   style: TextStyle(fontSize: 24.0),
                 ),
               ),
             );
+          } else {
+            return Container(
+              alignment: Alignment.center,
+              child: SizedBox(
+                width: 400.0,
+                child: RefreshProgressIndicator(
+                  color: SwatchColors.getPrimaryColor(),
+                ),
+              ),
+            );
           }
         },
       ),

web/lib/routes/route_detections.dart

@@ -69,6 +69,13 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_layout_grid:
+    dependency: "direct main"
+    description:
+      name: flutter_layout_grid
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.6"
   flutter_lints:
     dependency: "direct dev"
     description:
@@ -149,6 +156,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.8.1"
+  quiver:
+    dependency: transitive
+    description:
+      name: quiver
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.1.0"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -219,4 +233,4 @@ packages:
     version: "1.0.0"
 sdks:
   dart: ">=2.17.0 <3.0.0"
-  flutter: ">=1.17.0"
+  flutter: ">=1.25.0"

web/pubspec.lock

@@ -18,6 +18,7 @@ dependencies:
   # UI
   cupertino_icons: ^1.0.2
   collapsible_sidebar: ^2.0.1+2
+  flutter_layout_grid: ^1.0.3
 
   # IO
   http: ^0.13.4