Skip to content

Commit

Permalink
Switch Gauge Library (#155)
Browse files Browse the repository at this point in the history 
All number bars and sliders now use a different library for the linear
gauge. There is very little visible difference, and all slider widgets
function the same way.
  • Loading branch information
@Gold872
Gold872 authored Dec 27, 2024
1 parent d459019 commit b7e103e
Show file tree
Hide file tree
Showing 18 changed files with 398 additions and 267 deletions.
4 changes: 2 additions & 2 deletions lib/services/nt_widget_builder.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,9 +120,9 @@ class NTWidgetBuilder {
minHeight: _normalSize);

registerWithAlias(
names: {RadialGauge.widgetType, 'Simple Dial'},
names: {RadialGaugeWidget.widgetType, 'Simple Dial'},
model: RadialGaugeModel.new,
widget: RadialGauge.new,
widget: RadialGaugeWidget.new,
fromJson: RadialGaugeModel.fromJson,
minWidth: _normalSize * 1.6,
minHeight: _normalSize * 1.6);
Expand Down
107 changes: 62 additions & 45 deletions lib/widgets/nt_widgets/multi-topic/differential_drive.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import 'dart:math';
import 'package:flutter/material.dart';

import 'package:dot_cast/dot_cast.dart';
import 'package:geekyants_flutter_gauges/geekyants_flutter_gauges.dart';
import 'package:provider/provider.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';

import 'package:elastic_dashboard/services/nt4_client.dart';
import 'package:elastic_dashboard/widgets/nt_widgets/nt_widget.dart';
Expand Down Expand Up @@ -112,26 +112,36 @@ class DifferentialDrive extends NTWidget {
mainAxisSize: MainAxisSize.min,
children: [
// Left speed gauge
SfLinearGauge(
key: UniqueKey(),
maximum: 1.0,
minimum: -1.0,
labelPosition: LinearLabelPosition.inside,
tickPosition: LinearElementPosition.inside,
markerPointers: [
LinearShapePointer(
LinearGauge(
rulers: RulerStyle(
rulerPosition: RulerPosition.right,
showLabel: true,
textStyle: Theme.of(context).textTheme.bodySmall,
primaryRulerColor: Colors.grey,
secondaryRulerColor: Colors.grey,
labelOffset: 5,
),
extendLinearGauge: 1,
linearGaugeBoxDecoration: const LinearGaugeBoxDecoration(
backgroundColor: Color.fromRGBO(87, 87, 87, 1),
thickness: 7.5,
borderRadius: 10,
),
pointers: [
Pointer(
key: UniqueKey(),
enableAnimation: false,
value: model.leftSpeedCurrentValue.value.clamp(-1.0, 1.0),
shape: PointerShape.triangle,
color: Theme.of(context).colorScheme.primary,
height: 12.5,
pointerPosition: PointerPosition.left,
width: 12.5,
animationDuration: 0,
shapeType: LinearShapePointerType.invertedTriangle,
position: LinearElementPosition.outside,
dragBehavior: LinearMarkerDragBehavior.free,
height: 12.5,
isInteractive: true,
onChanged: (value) {
model.leftSpeedCurrentValue.value = value;
},
onChangeEnd: (value) {
onChangeEnd: () {
bool publishTopic = model.leftSpeedTopic == null;

model.leftSpeedTopic ??= model.ntConnection
Expand All @@ -151,17 +161,15 @@ class DifferentialDrive extends NTWidget {
model.leftSpeedPreviousValue =
model.leftSpeedCurrentValue.value;
},
),
)
],
axisTrackStyle: const LinearAxisTrackStyle(
thickness: 7.5,
edgeStyle: LinearEdgeStyle.bothCurve,
),
orientation: LinearGaugeOrientation.vertical,
interval: 0.5,
minorTicksPerInterval: 2,
gaugeOrientation: GaugeOrientation.vertical,
start: -1.0,
end: 1.0,
steps: 0.5,
enableGaugeAnimation: false,
),
const SizedBox(width: 5),
const SizedBox(width: 15),
// Robot
Flexible(
child: LayoutBuilder(
Expand All @@ -184,28 +192,38 @@ class DifferentialDrive extends NTWidget {
},
),
),
const SizedBox(width: 5),
const SizedBox(width: 15),
// Right speed gauge
SfLinearGauge(
key: UniqueKey(),
maximum: 1.0,
minimum: -1.0,
labelPosition: LinearLabelPosition.outside,
tickPosition: LinearElementPosition.outside,
markerPointers: [
LinearShapePointer(
LinearGauge(
rulers: RulerStyle(
rulerPosition: RulerPosition.left,
showLabel: true,
textStyle: Theme.of(context).textTheme.bodySmall,
primaryRulerColor: Colors.grey,
secondaryRulerColor: Colors.grey,
labelOffset: 5,
),
extendLinearGauge: 1,
linearGaugeBoxDecoration: const LinearGaugeBoxDecoration(
backgroundColor: Color.fromRGBO(87, 87, 87, 1),
thickness: 7.5,
borderRadius: 10,
),
pointers: [
Pointer(
key: UniqueKey(),
enableAnimation: false,
value: model.rightSpeedCurrentValue.value.clamp(-1.0, 1.0),
shape: PointerShape.triangle,
color: Theme.of(context).colorScheme.primary,
height: 12.5,
pointerPosition: PointerPosition.right,
width: 12.5,
animationDuration: 0,
shapeType: LinearShapePointerType.triangle,
position: LinearElementPosition.inside,
dragBehavior: LinearMarkerDragBehavior.free,
height: 12.5,
isInteractive: true,
onChanged: (value) {
model.rightSpeedCurrentValue.value = value;
},
onChangeEnd: (value) {
onChangeEnd: () {
bool publishTopic = model.rightSpeedTopic == null;

model.rightSpeedTopic ??= model.ntConnection
Expand All @@ -227,12 +245,11 @@ class DifferentialDrive extends NTWidget {
},
),
],
axisTrackStyle: const LinearAxisTrackStyle(
thickness: 7.5,
edgeStyle: LinearEdgeStyle.bothCurve,
),
orientation: LinearGaugeOrientation.vertical,
interval: 0.5,
gaugeOrientation: GaugeOrientation.vertical,
start: -1.0,
end: 1.0,
steps: 0.5,
enableGaugeAnimation: false,
),
],
);
Expand Down
89 changes: 57 additions & 32 deletions lib/widgets/nt_widgets/multi-topic/gyro.dart
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import 'dart:math';

import 'package:flutter/material.dart';

import 'package:dot_cast/dot_cast.dart';
import 'package:geekyants_flutter_gauges/geekyants_flutter_gauges.dart';
import 'package:provider/provider.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';

import 'package:elastic_dashboard/services/nt4_client.dart';
import 'package:elastic_dashboard/widgets/dialog_widgets/dialog_toggle_switch.dart';
Expand Down Expand Up @@ -107,40 +109,63 @@ class Gyro extends NTWidget {
return Column(
children: [
Flexible(
child: SfRadialGauge(
axes: [
RadialAxis(
pointers: [
NeedlePointer(
value: angle,
needleColor: Colors.red,
needleEndWidth: 5,
needleStartWidth: 1,
needleLength: 0.7,
knobStyle: const KnobStyle(
borderColor: Colors.grey,
borderWidth: 0.025,
child: LayoutBuilder(builder: (context, constraints) {
double squareSide =
min(constraints.maxWidth, constraints.maxHeight);

// Formula taken from radial gauge source code
final maxNeedleHeight = squareSide / (2 * 0.65) - (2 * 7.5);
return Stack(
alignment: Alignment.center,
children: [
RadialGauge(
radiusFactor: 0.65,
track: RadialTrack(
thickness: 7.5,
start: 0,
end: 360,
startAngle: 90,
endAngle: 90 + 360,
steps: 360 ~/ 45,
color: const Color.fromRGBO(97, 97, 97, 1),
trackStyle: TrackStyle(
primaryRulerColor: Colors.grey,
secondaryRulerColor:
const Color.fromRGBO(97, 97, 97, 1),
labelStyle: Theme.of(context).textTheme.bodySmall,
primaryRulersHeight: 7.5,
primaryRulersWidth: 2,
secondaryRulersHeight: 7.5,
rulersOffset: -18,
labelOffset: -57.5,
showLastLabel: false,
secondaryRulerPerInterval: 8,
inverseRulers: true),
trackLabelFormater: (value) => value.toStringAsFixed(0),
),
needlePointer: [
NeedlePointer(
needleWidth: squareSide * 0.03,
needleEndWidth: squareSide * 0.005,
needleHeight: maxNeedleHeight * 0.52 -
(squareSide - 175.875) * 0.075,
tailColor: Colors.grey,
tailRadius: squareSide * 0.1,
value: value,
),
)
],
axisLineStyle: const AxisLineStyle(
thickness: 5,
],
),
axisLabelStyle: const GaugeTextStyle(
fontSize: 14,
Container(
width: squareSide * 0.07,
height: squareSide * 0.07,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.grey[300]!,
),
),
ticksPosition: ElementsPosition.outside,
labelsPosition: ElementsPosition.outside,
showTicks: true,
minorTicksPerInterval: 8,
interval: 45,
minimum: 0,
maximum: 360,
startAngle: 270,
endAngle: 270,
)
],
),
],
);
}),
),
Text(angle.toStringAsFixed(2),
style: Theme.of(context).textTheme.bodyLarge),
Expand Down
33 changes: 22 additions & 11 deletions lib/widgets/nt_widgets/multi-topic/motor_controller.dart
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import 'package:flutter/material.dart';

import 'package:dot_cast/dot_cast.dart';
import 'package:geekyants_flutter_gauges/geekyants_flutter_gauges.dart';
import 'package:provider/provider.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';

import 'package:elastic_dashboard/services/nt4_client.dart';
import 'package:elastic_dashboard/widgets/nt_widgets/nt_widget.dart';
Expand Down Expand Up @@ -63,21 +63,32 @@ class MotorController extends NTWidget {
const Flexible(
child: SizedBox(height: 5),
),
SfLinearGauge(
maximum: 1.0,
minimum: -1.0,
markerPointers: [
LinearShapePointer(
LinearGauge(
rulers: RulerStyle(
rulerPosition: RulerPosition.bottom,
primaryRulerColor: Colors.grey,
secondaryRulerColor: Colors.grey,
textStyle: Theme.of(context).textTheme.bodySmall,
),
extendLinearGauge: 1,
linearGaugeBoxDecoration: const LinearGaugeBoxDecoration(
backgroundColor: Color.fromRGBO(87, 87, 87, 1),
thickness: 5,
),
pointers: [
Pointer(
enableAnimation: false,
value: value.clamp(-1.0, 1.0),
shape: PointerShape.diamond,
color: Theme.of(context).colorScheme.primary,
width: 10.0,
height: 14.0,
enableAnimation: false,
shapeType: LinearShapePointerType.diamond,
position: LinearElementPosition.cross,
),
)
],
interval: 0.5,
enableGaugeAnimation: false,
start: -1.0,
end: 1.0,
steps: 0.5,
),
],
);
Expand Down
2 changes: 1 addition & 1 deletion lib/widgets/nt_widgets/nt_widget.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ class SingleTopicNTWidgetModel extends NTWidgetModel {
NumberBar.widgetType,
NumberSlider.widgetType,
VoltageView.widgetType,
RadialGauge.widgetType,
RadialGaugeWidget.widgetType,
GraphWidget.widgetType,
MatchTimeWidget.widgetType,
];
Expand Down
Loading

0 comments on commit b7e103e

Please sign in to comment.