-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(dpad): allow Dpad buttons in two directions simultaneously (#103)
- Loading branch information
1 parent
542d10e
commit ffc88cb
Showing
10 changed files
with
252 additions
and
70 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| class MultiButtonEvent { | ||
| final int slot; | ||
| final Map<String, int> value; | ||
|
|
||
| MultiButtonEvent(this.slot, this.value); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| import 'package:flutter/material.dart'; | ||
| import 'dart:math' as math; | ||
|
|
||
| import 'package:flutter/services.dart'; | ||
|
|
||
| enum Direction { | ||
| up, | ||
| right, | ||
| down, | ||
| left, | ||
| } | ||
|
|
||
| class DPad extends StatefulWidget { | ||
| final double size; | ||
| final Function onUpdate; | ||
|
|
||
| const DPad({Key key, @required this.size, @required this.onUpdate}) | ||
| : super(key: key); | ||
|
|
||
| @override | ||
| _DPadState createState() => _DPadState(); | ||
| } | ||
|
|
||
| class _DPadState extends State<DPad> { | ||
| Set<Direction> _pressedDirections = {}; | ||
| double get _radius => widget.size / 2; | ||
|
|
||
| final List<Set<Direction>> sectors = [ | ||
| {Direction.up}, | ||
| {Direction.up, Direction.right}, | ||
| {Direction.right}, | ||
| {Direction.right, Direction.down}, | ||
| {Direction.down}, | ||
| {Direction.down, Direction.left}, | ||
| {Direction.left}, | ||
| {Direction.left, Direction.up}, | ||
| ]; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return SizedBox( | ||
| width: widget.size, | ||
| height: widget.size, | ||
| child: Listener( | ||
| onPointerDown: _onPointerUpdate, | ||
| onPointerMove: _onPointerUpdate, | ||
| onPointerUp: _onPointerUp, | ||
| child: Container( | ||
| width: widget.size, | ||
| height: widget.size, | ||
| clipBehavior: Clip.none, | ||
| decoration: BoxDecoration( | ||
| borderRadius: BorderRadius.circular(_radius), | ||
| color: Colors.grey.shade100, | ||
| ), | ||
| child: Stack( | ||
| children: [ | ||
| Positioned( | ||
| top: 10, | ||
| left: _radius - _radius / 4, | ||
| child: Container( | ||
| decoration: BoxDecoration( | ||
| color: _pressedDirections.contains(Direction.up) | ||
| ? Colors.black26 | ||
| : Colors.white, | ||
| borderRadius: BorderRadius.circular(10.0)), | ||
| width: _radius / 2, | ||
| height: _radius - 24.0, | ||
| child: Icon( | ||
| Icons.arrow_upward, | ||
| size: 24.0, | ||
| color: _pressedDirections.contains(Direction.up) | ||
| ? Colors.blue | ||
| : Colors.blueGrey, | ||
| ))), | ||
| Positioned( | ||
| top: _radius - _radius / 4, | ||
| left: 10, | ||
| child: Container( | ||
| decoration: BoxDecoration( | ||
| color: _pressedDirections.contains(Direction.left) | ||
| ? Colors.black26 | ||
| : Colors.white, | ||
| borderRadius: BorderRadius.circular(10.0)), | ||
| width: _radius - 24.0, | ||
| height: _radius / 2, | ||
| child: Icon( | ||
| Icons.arrow_back, | ||
| size: 24.0, | ||
| color: _pressedDirections.contains(Direction.left) | ||
| ? Colors.blue | ||
| : Colors.blueGrey, | ||
| ))), | ||
| Positioned( | ||
| top: _radius - _radius / 4, | ||
| right: 10, | ||
| child: Container( | ||
| decoration: BoxDecoration( | ||
| color: _pressedDirections.contains(Direction.right) | ||
| ? Colors.black26 | ||
| : Colors.white, | ||
| borderRadius: BorderRadius.circular(10.0)), | ||
| width: _radius - 24.0, | ||
| height: _radius / 2, | ||
| child: Icon( | ||
| Icons.arrow_forward, | ||
| size: 24.0, | ||
| color: _pressedDirections.contains(Direction.right) | ||
| ? Colors.blue | ||
| : Colors.blueGrey, | ||
| )), | ||
| ), | ||
| Positioned( | ||
| bottom: 10, | ||
| left: _radius - _radius / 4, | ||
| child: Container( | ||
| decoration: BoxDecoration( | ||
| color: _pressedDirections.contains(Direction.down) | ||
| ? Colors.black26 | ||
| : Colors.white, | ||
| borderRadius: BorderRadius.circular(10.0)), | ||
| width: _radius / 2, | ||
| height: _radius - 24.0, | ||
| child: Icon( | ||
| Icons.arrow_downward, | ||
| size: 24.0, | ||
| color: _pressedDirections.contains(Direction.down) | ||
| ? Colors.blue | ||
| : Colors.blueGrey, | ||
| ))) | ||
| ], | ||
| ), | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
|
|
||
| void _onPointerUp(PointerEvent event) { | ||
| setState(() { | ||
| _pressedDirections.clear(); | ||
| widget.onUpdate(_pressedDirections); | ||
| }); | ||
| } | ||
|
|
||
| void _onPointerUpdate(PointerEvent event) { | ||
| setState(() { | ||
| _updatePressedDirections(event.localPosition); | ||
| }); | ||
| } | ||
|
|
||
| void _updatePressedDirections(Offset position) { | ||
| final double dx = position.dx - _radius; | ||
| final double dy = -position.dy + _radius; | ||
|
|
||
| if (Offset(dx, dy).distance < _radius / 3) { | ||
| // Middle dead zone | ||
| _pressedDirections.clear(); | ||
| widget.onUpdate(_pressedDirections); | ||
| return; | ||
| } | ||
|
|
||
| final double angle = math.atan2(dx, dy) % (2 * math.pi); | ||
| final double degrees = angle * 180 / math.pi; | ||
| final int sector = ((degrees + 22.5) ~/ 45) % 8; | ||
|
|
||
| final newDirections = Set<Direction>.from(sectors[sector]); | ||
|
|
||
| if (_pressedDirections.length != newDirections.length || | ||
| _pressedDirections.difference(newDirections).length > 0) { | ||
| HapticFeedback.mediumImpact(); | ||
| _pressedDirections = newDirections; | ||
| widget.onUpdate(_pressedDirections); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,48 @@ | ||
| import 'dart:isolate'; | ||
|
|
||
| import 'package:flutter/material.dart'; | ||
| import 'package:wiimote_dsu/ui/buttons/dpad_arrow.dart'; | ||
| import 'package:provider/provider.dart'; | ||
| import 'package:wiimote_dsu/models/device_settings.dart'; | ||
| import 'package:wiimote_dsu/server/events/multi_button_event.dart'; | ||
| import 'package:wiimote_dsu/ui/buttons/multi_dpad.dart'; | ||
|
|
||
| class Dpad extends StatelessWidget { | ||
| final double width; | ||
| final double height; | ||
| final double size; | ||
|
|
||
| Dpad({this.size = 120.0}); | ||
|
|
||
| static const DSUButtons = { | ||
| Direction.up: "D_UP", | ||
| Direction.right: "D_RIGHT", | ||
| Direction.down: "D_DOWN", | ||
| Direction.left: "D_LEFT" | ||
| }; | ||
|
|
||
| Dpad({this.width = 1.0 * 180.0, this.height = 1.0 * 180.0}); | ||
| static const offState = { | ||
| "D_UP": 0x00, | ||
| "D_RIGHT": 0x00, | ||
| "D_DOWN": 0x00, | ||
| "D_LEFT": 0x00, | ||
| }; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Container( | ||
| width: width, | ||
| height: height, | ||
| child: Stack(children: <Widget>[ | ||
| Positioned( | ||
| left: width * 0.5 - 0.125 * width, | ||
| top: 0, | ||
| child: DpadArrow( | ||
| Icons.arrow_upward, | ||
| btnType: "D_UP", | ||
| width: 0.25 * width, | ||
| height: 0.4 * height, | ||
| ), | ||
| ), | ||
| Positioned( | ||
| left: 0, | ||
| top: height * 0.5 - 0.125 * height, | ||
| child: DpadArrow( | ||
| Icons.arrow_back, | ||
| btnType: "D_LEFT", | ||
| width: 0.4 * width, | ||
| height: 0.25 * height, | ||
| )), | ||
| Positioned( | ||
| right: 0, | ||
| top: height * 0.5 - 0.125 * height, | ||
| child: DpadArrow( | ||
| Icons.arrow_forward, | ||
| btnType: "D_RIGHT", | ||
| width: 0.4 * width, | ||
| height: 0.25 * height, | ||
| )), | ||
| Positioned( | ||
| bottom: 0, | ||
| left: width * 0.5 - 0.125 * width, | ||
| child: DpadArrow( | ||
| Icons.arrow_downward, | ||
| btnType: "D_DOWN", | ||
| width: 0.25 * width, | ||
| height: 0.4 * height, | ||
| )), | ||
| ])); | ||
| return Consumer<DeviceSettings>( | ||
| builder: (BuildContext context, DeviceSettings settings, Widget child) { | ||
| return DPad( | ||
| size: size, | ||
| onUpdate: (Set<Direction> directionsPressed) { | ||
| final mappedDirections = | ||
| directionsPressed.map((direction) => DSUButtons[direction]); | ||
| context.read<SendPort>().send(MultiButtonEvent(settings.slot, | ||
| offState.map((dArrow, state) { | ||
| if (mappedDirections.contains(dArrow)) { | ||
| return MapEntry(dArrow, 0xFF); | ||
| } else { | ||
| return MapEntry(dArrow, 0x00); | ||
| } | ||
| }))); | ||
| }); | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.