Skip to content

Commit

Permalink
Migrate radial gauge widgets
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gold872
Gold872 committed Dec 13, 2024
1 parent 6c413cb commit a7fae95
Show file tree
Hide file tree
Showing 8 changed files with 156 additions and 113 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
109 changes: 75 additions & 34 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,79 @@ 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,
),
)
],
axisLineStyle: const AxisLineStyle(
thickness: 5,
),
axisLabelStyle: const GaugeTextStyle(
fontSize: 14,
child: LayoutBuilder(builder: (context, constraints) {
double squareSide =
min(constraints.maxWidth, constraints.maxHeight);
return RadialGauge(
radiusFactor: 0.7,
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.04,
needleHeight: squareSide * 0.4,
tailColor: Colors.grey,
tailRadius: squareSide * 0.11,
value: value,
),
ticksPosition: ElementsPosition.outside,
labelsPosition: ElementsPosition.outside,
showTicks: true,
minorTicksPerInterval: 8,
interval: 45,
minimum: 0,
maximum: 360,
startAngle: 270,
endAngle: 270,
)
],
),
],
);
}),
// 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,
// ),
// )
// ],
// axisLineStyle: const AxisLineStyle(
// thickness: 5,
// ),
// axisLabelStyle: const GaugeTextStyle(
// fontSize: 14,
// ),
// 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
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
121 changes: 66 additions & 55 deletions lib/widgets/nt_widgets/single_topic/radial_gauge.dart
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/services.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/services/text_formatter_builder.dart';
Expand All @@ -13,7 +15,7 @@ import 'package:elastic_dashboard/widgets/nt_widgets/nt_widget.dart';

class RadialGaugeModel extends SingleTopicNTWidgetModel {
@override
String type = RadialGauge.widgetType;
String type = RadialGaugeWidget.widgetType;

double _startAngle = -140.0;
double _endAngle = 140.0;
Expand Down Expand Up @@ -275,10 +277,10 @@ class RadialGaugeModel extends SingleTopicNTWidgetModel {
}
}

class RadialGauge extends NTWidget {
class RadialGaugeWidget extends NTWidget {
static const String widgetType = 'Radial Gauge';

const RadialGauge({super.key});
const RadialGaugeWidget({super.key});

static double _getWrappedValue(double value, double min, double max) {
if (value >= min && value <= max) {
Expand Down Expand Up @@ -310,64 +312,73 @@ class RadialGauge extends NTWidget {
value = _getWrappedValue(value, model.minValue, model.maxValue);
}

value = value.clamp(model.minValue, model.maxValue);

int fractionDigits = (model.dataType == NT4TypeStr.kInt) ? 0 : 2;

return SfRadialGauge(
axes: [
RadialAxis(
startAngle: model.startAngle - 90.0,
endAngle: model.endAngle - 90.0,
minimum: model.minValue,
maximum: model.maxValue,
showTicks: model.showTicks,
showLabels: model.numberOfLabels != 0,
interval: (model.numberOfLabels != 0)
? (model.maxValue - model.minValue) / model.numberOfLabels
: null,
showLastLabel: _getWrappedValue(
model.endAngle - model.startAngle, -180.0, 180.0) !=
0.0,
canScaleToFit: true,
annotations: [
GaugeAnnotation(
horizontalAlignment: GaugeAlignment.center,
verticalAlignment: GaugeAlignment.center,
angle: 90.0,
positionFactor: (model.showPointer) ? 0.35 : 0.05,
widget: Text(
value.toStringAsFixed(fractionDigits),
style: TextStyle(
fontSize: (model.showPointer) ? 18.0 : 28.0,
return LayoutBuilder(
builder: (context, constraints) {
double squareSide =
min(constraints.maxWidth, constraints.maxHeight);

return Stack(
alignment: Alignment.center,
children: [
RadialGauge(
track: RadialTrack(
start: model.minValue,
end: model.maxValue,
startAngle: model.startAngle + 90,
endAngle: model.endAngle + 90,
steps: model.numberOfLabels,
color: const Color.fromRGBO(97, 97, 97, 1),
trackStyle: TrackStyle(
primaryRulerColor: Colors.grey,
secondaryRulerColor: Colors.grey,
showPrimaryRulers: model.showTicks,
showSecondaryRulers: model.showTicks,
labelStyle: Theme.of(context).textTheme.bodySmall,
primaryRulersHeight: model.showTicks ? 10 : 0,
secondaryRulersHeight: model.showTicks ? 8 : 0,
rulersOffset: -5,
labelOffset: -10,
showLastLabel: _getWrappedValue(
model.endAngle - model.startAngle,
-180.0,
180.0) !=
0.0,
),
textAlign: TextAlign.center,
trackLabelFormater: (value) =>
num.parse(value.toStringAsFixed(2)).toString(),
),
),
],
pointers: [
RangePointer(
enableAnimation: false,
enableDragging: false,
color: Theme.of(context).colorScheme.primaryContainer,
value: value,
),
if (model.showPointer)
NeedlePointer(
enableAnimation: false,
enableDragging: false,
needleColor: Colors.red,
needleEndWidth: 3.5,
needleStartWidth: 0.5,
needleLength: 0.5,
knobStyle: const KnobStyle(
borderColor: Colors.grey,
borderWidth: 0.025,
knobRadius: 0.05,
needlePointer: [
if (model.showPointer)
NeedlePointer(
needleWidth: squareSide * 0.02,
needleHeight: squareSide * 0.25,
tailColor: Colors.grey,
tailRadius: squareSide * 0.055,
value: value,
),
],
valueBar: [
RadialValueBar(
color: Theme.of(context).colorScheme.primaryContainer,
value: value,
startPosition: (model.minValue < 0.0) ? 0.0 : null,
),
value: value,
],
),
Positioned(
bottom: squareSide * 0.3,
child: Text(
value.toStringAsFixed(fractionDigits),
style: Theme.of(context).textTheme.bodyLarge,
),
),
],
),
],
);
},
);
},
);
Expand Down
12 changes: 2 additions & 10 deletions pubspec.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -460,8 +460,8 @@ packages:
dependency: "direct main"
description:
path: "."
ref: drag-improvements
resolved-ref: f8cf625d24784c6f56b6fee1da43ebad405ca15c
ref: elastic-version
resolved-ref: f03016e68144420d5388e673d19861b95550ed5b
url: "https://github.com/Gold872/GaugesFlutter.git"
source: git
version: "1.0.4"
Expand Down Expand Up @@ -1022,14 +1022,6 @@ packages:
url: "https://pub.dev"
source: hosted
version: "23.2.7"
syncfusion_flutter_gauges:
dependency: "direct main"
description:
name: syncfusion_flutter_gauges
sha256: a559712b476b05ad2506925b5031dbba3c9e7ce83f482191a8185a3de054e7e6
url: "https://pub.dev"
source: hosted
version: "23.2.7"
term_glyph:
dependency: transitive
description:
Expand Down
3 changes: 1 addition & 2 deletions pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ dependencies:
geekyants_flutter_gauges:
git:
url: https://github.com/Gold872/GaugesFlutter.git
ref: drag-improvements
ref: elastic-version
github: ^9.17.0
http: ^1.2.0
import_sorter: ^4.6.0
Expand All @@ -44,7 +44,6 @@ dependencies:
searchable_listview: ^2.7.0
shared_preferences: ^2.1.2
syncfusion_flutter_charts: ^23.1.44
syncfusion_flutter_gauges: ^23.1.44
titlebar_buttons: ^1.0.0
transitioned_indexed_stack: ^1.0.2
url_launcher: ^6.3.0
Expand Down
4 changes: 2 additions & 2 deletions test/widgets/nt_widgets/multi-topic/gyro_test.dart
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import 'package:flutter/material.dart';

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

import 'package:elastic_dashboard/services/nt4_client.dart';
import 'package:elastic_dashboard/services/nt_connection.dart';
Expand Down Expand Up @@ -96,6 +96,6 @@ void main() {
await widgetTester.pumpAndSettle();

expect(find.text('176.50'), findsOneWidget);
expect(find.byType(SfRadialGauge), findsOneWidget);
expect(find.byType(RadialGauge), findsOneWidget);
});
}
Loading

0 comments on commit a7fae95

Please sign in to comment.