Added orientation and inversion to number bar

Gold872 · Sep 11, 2023 · 0cc5154 · 0cc5154
1 parent d1b9719
commit 0cc5154
Showing 1 changed file with 124 additions and 53 deletions.
diff --git a/lib/widgets/nt4_widgets/single_topic/number_bar.dart b/lib/widgets/nt4_widgets/single_topic/number_bar.dart
@@ -1,6 +1,8 @@
 import 'package:elastic_dashboard/services/globals.dart';
 import 'package:elastic_dashboard/services/nt4_connection.dart';
+import 'package:elastic_dashboard/widgets/dialog_widgets/dialog_dropdown_chooser.dart';
 import 'package:elastic_dashboard/widgets/dialog_widgets/dialog_text_input.dart';
+import 'package:elastic_dashboard/widgets/dialog_widgets/dialog_toggle_switch.dart';
 import 'package:elastic_dashboard/widgets/nt4_widgets/nt4_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -11,30 +13,38 @@ class NumberBar extends StatelessWidget with NT4Widget {
   @override
   String type = 'Number Bar';
 
-  double minValue;
-  double maxValue;
-  int? divisions;
-
-  NumberBar(
-      {super.key,
-      required topic,
-      this.minValue = -1.0,
-      this.maxValue = 1.0,
-      this.divisions = 5,
-      period = Globals.defaultPeriod}) {
+  late double minValue;
+  late double maxValue;
+  late int? divisions;
+  late bool inverted;
+  late String orientation;
+
+  NumberBar({
+    super.key,
+    required topic,
+    this.minValue = -1.0,
+    this.maxValue = 1.0,
+    this.divisions = 5,
+    this.inverted = false,
+    this.orientation = 'horizontal',
+    period = Globals.defaultPeriod,
+  }) {
     super.topic = topic;
     super.period = period;
 
     init();
   }
 
-  NumberBar.fromJson({super.key, required Map<String, dynamic> jsonData})
-      : minValue = jsonData['min_value'] ?? -1.0,
-        maxValue = jsonData['max_value'] ?? 1.0,
-        divisions = jsonData['divisions'] {
+  NumberBar.fromJson({super.key, required Map<String, dynamic> jsonData}) {
     topic = jsonData['topic'] ?? '';
     period = jsonData['period'] ?? Globals.defaultPeriod;
 
+    minValue = jsonData['min_value'] ?? -1.0;
+    maxValue = jsonData['max_value'] ?? 1.0;
+    divisions = jsonData['divisions'];
+    inverted = jsonData['inverted'] ?? false;
+    orientation = jsonData['orientation'] ?? 'horizontal';
+
     init();
   }
 
@@ -46,12 +56,34 @@ class NumberBar extends StatelessWidget with NT4Widget {
       'min_value': minValue,
       'max_value': maxValue,
       'divisions': divisions,
+      'inverted': inverted,
+      'orientation': orientation,
     };
   }
 
   @override
   List<Widget> getEditProperties(BuildContext context) {
     return [
+      // Orientation
+      Column(
+        children: [
+          const Text('Orientation'),
+          DialogDropdownChooser<String>(
+            initialValue:
+                '${orientation[0].toUpperCase()}${orientation.substring(1)}',
+            choices: const ['Horizontal', 'Vertical'],
+            onSelectionChanged: (value) {
+              if (value == null) {
+                return;
+              }
+
+              orientation = value.toLowerCase();
+              refresh();
+            },
+          ),
+        ],
+      ),
+      const SizedBox(height: 5),
       // Min and max values
       Row(
         mainAxisAlignment: MainAxisAlignment.spaceAround,
@@ -91,20 +123,41 @@ class NumberBar extends StatelessWidget with NT4Widget {
         ],
       ),
       const SizedBox(height: 5),
-      // Number of divisions
-      DialogTextInput(
-        onSubmit: (value) {
-          int? newDivisions = int.tryParse(value);
-          if (newDivisions != null && newDivisions < 2) {
-            return;
-          }
-          divisions = newDivisions;
-          refresh();
-        },
-        formatter: FilteringTextInputFormatter.digitsOnly,
-        label: 'Divisions',
-        initialText: (divisions != null) ? divisions.toString() : '',
-        allowEmptySubmission: true,
+      // Number of divisions and orientation
+      Row(
+        mainAxisAlignment: MainAxisAlignment.spaceAround,
+        mainAxisSize: MainAxisSize.max,
+        children: [
+          Expanded(
+            child: DialogTextInput(
+              onSubmit: (value) {
+                int? newDivisions = int.tryParse(value);
+                if (newDivisions != null && newDivisions < 2) {
+                  return;
+                }
+                divisions = newDivisions;
+                refresh();
+              },
+              formatter: FilteringTextInputFormatter.digitsOnly,
+              label: 'Divisions',
+              initialText: (divisions != null) ? divisions.toString() : '',
+              allowEmptySubmission: true,
+            ),
+          ),
+          const SizedBox(width: 5),
+          Expanded(
+            child: Center(
+              child: DialogToggleSwitch(
+                initialValue: inverted,
+                label: 'Inverted',
+                onToggle: (value) {
+                  inverted = value;
+                  refresh();
+                },
+              ),
+            ),
+          ),
+        ],
       ),
     ];
   }
@@ -125,34 +178,52 @@ class NumberBar extends StatelessWidget with NT4Widget {
             ? (maxValue - minValue) / (divisions! - 1)
             : null;
 
-        return Column(
-          children: [
-            Text(
-              value.toStringAsFixed(2),
-              style: Theme.of(context).textTheme.bodyLarge,
-              overflow: TextOverflow.ellipsis,
-            ),
-            const Spacer(),
-            SfLinearGauge(
-              key: UniqueKey(),
-              maximum: maxValue,
-              minimum: minValue,
-              barPointers: [
-                LinearBarPointer(
-                  value: clampedValue,
-                  animationDuration: 0,
-                  thickness: 7.5,
-                  edgeStyle: LinearEdgeStyle.bothCurve,
-                ),
-              ],
-              axisTrackStyle: const LinearAxisTrackStyle(
+        LinearGaugeOrientation gaugeOrientation = (orientation == 'vertical')
+            ? LinearGaugeOrientation.vertical
+            : LinearGaugeOrientation.horizontal;
+
+        List<Widget> children = [
+          Text(
+            value.toStringAsFixed(2),
+            style: Theme.of(context).textTheme.bodyLarge,
+            overflow: TextOverflow.ellipsis,
+          ),
+          const Flexible(
+            child: SizedBox(width: 5.0, height: 5.0),
+          ),
+          SfLinearGauge(
+            key: UniqueKey(),
+            maximum: maxValue,
+            minimum: minValue,
+            barPointers: [
+              LinearBarPointer(
+                value: clampedValue,
+                animationDuration: 0,
                 thickness: 7.5,
                 edgeStyle: LinearEdgeStyle.bothCurve,
               ),
-              interval: divisionInterval,
+            ],
+            axisTrackStyle: const LinearAxisTrackStyle(
+              thickness: 7.5,
+              edgeStyle: LinearEdgeStyle.bothCurve,
             ),
-          ],
-        );
+            orientation: gaugeOrientation,
+            isAxisInversed: inverted,
+            interval: divisionInterval,
+          ),
+        ];
+
+        if (gaugeOrientation == LinearGaugeOrientation.vertical) {
+          return Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: children,
+          );
+        } else {
+          return Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: children,
+          );
+        }
       },
     );
   }