2020-11-17 01:22:14 +08:00
|
|
|
import 'package:flutter/material.dart';
|
2020-11-18 23:15:59 +08:00
|
|
|
import 'package:provider/provider.dart';
|
2020-11-17 01:22:14 +08:00
|
|
|
import 'package:flutter/services.dart';
|
2020-11-17 11:12:55 +08:00
|
|
|
import 'dart:ui' as ui;
|
2020-11-17 12:08:31 +08:00
|
|
|
import 'package:flutter_easyloading/flutter_easyloading.dart';
|
|
|
|
import 'dart:async';
|
2020-11-19 18:22:06 +08:00
|
|
|
import 'dart:math' as math;
|
2020-11-20 17:20:42 +08:00
|
|
|
import 'package:tuple/tuple.dart';
|
2020-11-23 13:03:51 +08:00
|
|
|
import 'package:wakelock/wakelock.dart';
|
2020-11-19 00:32:46 +08:00
|
|
|
import 'common.dart';
|
|
|
|
import 'model.dart';
|
2020-11-17 01:22:14 +08:00
|
|
|
|
|
|
|
class RemotePage extends StatefulWidget {
|
|
|
|
RemotePage({Key key, this.id}) : super(key: key);
|
|
|
|
|
|
|
|
final String id;
|
|
|
|
|
|
|
|
@override
|
|
|
|
_RemotePageState createState() => _RemotePageState();
|
|
|
|
}
|
|
|
|
|
|
|
|
class _RemotePageState extends State<RemotePage> {
|
2020-11-17 12:08:31 +08:00
|
|
|
Timer _interval;
|
2020-11-20 00:29:59 +08:00
|
|
|
bool _showBar = true;
|
2020-11-20 17:20:42 +08:00
|
|
|
double _bottom = 0;
|
2020-11-23 23:18:42 +08:00
|
|
|
double _xOffset = 0;
|
|
|
|
double _yOffset = 0;
|
|
|
|
double _scale = 1;
|
2020-11-20 17:51:49 +08:00
|
|
|
final FocusNode _focusNode = FocusNode();
|
2020-11-17 12:08:31 +08:00
|
|
|
|
2020-11-17 11:12:55 +08:00
|
|
|
@override
|
|
|
|
void initState() {
|
|
|
|
super.initState();
|
|
|
|
FFI.connect(widget.id);
|
2020-11-17 12:08:31 +08:00
|
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
2020-11-18 18:20:13 +08:00
|
|
|
SystemChrome.setEnabledSystemUIOverlays([]);
|
2020-11-18 00:28:55 +08:00
|
|
|
showLoading('Connecting...');
|
2020-11-17 12:08:31 +08:00
|
|
|
_interval =
|
|
|
|
Timer.periodic(Duration(milliseconds: 30), (timer) => interval());
|
|
|
|
});
|
2020-11-23 12:00:56 +08:00
|
|
|
Wakelock.enable();
|
2020-11-17 12:08:31 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
@override
|
|
|
|
void dispose() {
|
2020-11-20 17:51:49 +08:00
|
|
|
_focusNode.dispose();
|
2020-11-17 12:08:31 +08:00
|
|
|
super.dispose();
|
2020-11-17 12:41:23 +08:00
|
|
|
FFI.close();
|
2020-11-17 12:08:31 +08:00
|
|
|
_interval.cancel();
|
|
|
|
dismissLoading();
|
2020-11-18 18:20:13 +08:00
|
|
|
SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
|
2020-11-23 12:00:56 +08:00
|
|
|
Wakelock.disable();
|
2020-11-17 12:08:31 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
void interval() {
|
2020-11-20 17:20:42 +08:00
|
|
|
var v = MediaQuery.of(context).viewInsets.bottom;
|
|
|
|
if (v != _bottom) {
|
|
|
|
setState(() {
|
|
|
|
_bottom = v;
|
|
|
|
if (v < 80) {
|
|
|
|
SystemChrome.setEnabledSystemUIOverlays([]);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2020-11-19 21:59:49 +08:00
|
|
|
FFI.ffiModel.update(widget.id, context, handleMsgbox);
|
|
|
|
}
|
|
|
|
|
|
|
|
void handleMsgbox(Map<String, dynamic> evt, String id, BuildContext context) {
|
|
|
|
var type = evt['type'];
|
|
|
|
var title = evt['title'];
|
|
|
|
var text = evt['text'];
|
|
|
|
if (type == 're-input-password') {
|
|
|
|
wrongPasswordDialog(id, context);
|
|
|
|
} else if (type == 'input-password') {
|
|
|
|
enterPasswordDialog(id, context);
|
|
|
|
} else {
|
|
|
|
msgbox(type, title, text, context);
|
|
|
|
}
|
2020-11-17 11:12:55 +08:00
|
|
|
}
|
2020-11-17 01:22:14 +08:00
|
|
|
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
2020-11-23 23:52:30 +08:00
|
|
|
print('${MediaQueryData.fromWindow(ui.window).size}');
|
|
|
|
print('${MediaQuery.of(context).size}');
|
2020-11-19 18:41:37 +08:00
|
|
|
EasyLoading.instance.loadingStyle = EasyLoadingStyle.light;
|
2020-11-22 18:29:04 +08:00
|
|
|
return WillPopScope(
|
|
|
|
onWillPop: () async {
|
|
|
|
close();
|
|
|
|
return false;
|
|
|
|
},
|
|
|
|
child: Scaffold(
|
2020-11-23 01:16:17 +08:00
|
|
|
floatingActionButton: _showBar
|
|
|
|
? null
|
|
|
|
: FloatingActionButton(
|
|
|
|
mini: true,
|
|
|
|
child: Icon(Icons.expand_less),
|
|
|
|
backgroundColor: MyTheme.accent50,
|
|
|
|
onPressed: () {
|
|
|
|
setState(() => _showBar = !_showBar);
|
|
|
|
}),
|
|
|
|
bottomNavigationBar: _showBar
|
|
|
|
? BottomAppBar(
|
|
|
|
elevation: 10,
|
|
|
|
color: MyTheme.accent,
|
|
|
|
child: Row(
|
|
|
|
mainAxisSize: MainAxisSize.max,
|
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
|
|
children: <Widget>[
|
|
|
|
Row(children: [
|
|
|
|
IconButton(
|
|
|
|
color: Colors.white,
|
|
|
|
icon: Icon(Icons.clear),
|
|
|
|
onPressed: () {
|
|
|
|
close();
|
|
|
|
},
|
|
|
|
),
|
|
|
|
IconButton(
|
2020-11-22 18:29:04 +08:00
|
|
|
color: Colors.white,
|
2020-11-23 01:16:17 +08:00
|
|
|
icon: Icon(Icons.keyboard),
|
2020-11-22 18:29:04 +08:00
|
|
|
onPressed: () {
|
2020-11-23 01:16:17 +08:00
|
|
|
SystemChrome.setEnabledSystemUIOverlays(
|
|
|
|
SystemUiOverlay.values);
|
|
|
|
_focusNode.requestFocus();
|
|
|
|
SystemChannels.textInput
|
|
|
|
.invokeMethod('TextInput.show');
|
|
|
|
}),
|
|
|
|
Transform.rotate(
|
|
|
|
angle: 15 * math.pi / 180,
|
|
|
|
child: IconButton(
|
2020-11-22 18:29:04 +08:00
|
|
|
color: Colors.white,
|
2020-11-23 01:16:17 +08:00
|
|
|
icon: Icon(Icons.flash_on),
|
2020-11-22 18:29:04 +08:00
|
|
|
onPressed: () {
|
2020-11-23 01:16:17 +08:00
|
|
|
showActions(context);
|
|
|
|
},
|
|
|
|
)),
|
2020-11-22 18:29:04 +08:00
|
|
|
IconButton(
|
2020-11-23 01:16:17 +08:00
|
|
|
color: Colors.white,
|
|
|
|
icon: Icon(Icons.tv),
|
|
|
|
onPressed: () {
|
|
|
|
showOptions(context);
|
|
|
|
},
|
|
|
|
),
|
|
|
|
]),
|
|
|
|
IconButton(
|
|
|
|
color: Colors.white,
|
|
|
|
icon: Icon(Icons.expand_more),
|
|
|
|
onPressed: () {
|
|
|
|
setState(() => _showBar = !_showBar);
|
|
|
|
}),
|
|
|
|
],
|
|
|
|
),
|
|
|
|
)
|
|
|
|
: null,
|
2020-11-23 23:18:42 +08:00
|
|
|
body: GestureDetector(
|
|
|
|
onLongPressStart: (details) {
|
|
|
|
var x = details.globalPosition.dx;
|
|
|
|
var y = details.globalPosition.dy;
|
|
|
|
print('long press');
|
|
|
|
() async {
|
|
|
|
var value = await showMenu(
|
|
|
|
context: context,
|
|
|
|
position:
|
|
|
|
RelativeRect.fromLTRB(x + 20, y + 20, x + 20, y + 20),
|
|
|
|
items: [
|
2020-11-23 23:25:50 +08:00
|
|
|
PopupMenuItem<String>(child: Text('Test'), value: 'mode'),
|
2020-11-23 23:18:42 +08:00
|
|
|
],
|
|
|
|
elevation: 8.0,
|
|
|
|
);
|
2020-11-23 23:25:50 +08:00
|
|
|
if (value == 'mode') {}
|
2020-11-23 23:18:42 +08:00
|
|
|
}();
|
|
|
|
},
|
|
|
|
onTap: () {
|
|
|
|
print('tap');
|
|
|
|
},
|
|
|
|
onScaleStart: (details) {
|
|
|
|
_scale = 1;
|
|
|
|
_xOffset = details.focalPoint.dx;
|
|
|
|
_yOffset = details.focalPoint.dy;
|
|
|
|
FFI.canvasModel.startPan();
|
|
|
|
},
|
|
|
|
onScaleUpdate: (details) {
|
|
|
|
var scale = details.scale;
|
|
|
|
if (scale == 1) {
|
|
|
|
var x = details.focalPoint.dx;
|
|
|
|
var y = details.focalPoint.dy;
|
|
|
|
var dx = x - _xOffset;
|
|
|
|
var dy = y - _yOffset;
|
|
|
|
FFI.canvasModel.updateOffset(dx, dy);
|
|
|
|
_xOffset = x;
|
|
|
|
_yOffset = y;
|
|
|
|
} else {
|
|
|
|
FFI.canvasModel.updateScale(scale / _scale);
|
|
|
|
_scale = scale;
|
|
|
|
}
|
|
|
|
},
|
2020-11-23 01:16:17 +08:00
|
|
|
child: FlutterEasyLoading(
|
|
|
|
child: Container(
|
|
|
|
color: MyTheme.canvasColor,
|
|
|
|
child: Stack(children: [
|
|
|
|
ImagePaint(),
|
|
|
|
CursorPaint(),
|
|
|
|
SizedBox(
|
|
|
|
width: 0,
|
|
|
|
height: 0,
|
|
|
|
child: _bottom < 100
|
|
|
|
? Container()
|
|
|
|
: TextField(
|
|
|
|
textInputAction: TextInputAction.newline,
|
|
|
|
autocorrect: false,
|
|
|
|
enableSuggestions: false,
|
|
|
|
focusNode: _focusNode,
|
|
|
|
maxLines: null,
|
|
|
|
keyboardType: TextInputType.multiline,
|
|
|
|
onChanged: (x) => print('$x'),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
])),
|
|
|
|
)),
|
|
|
|
));
|
2020-11-20 16:37:48 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
void close() {
|
|
|
|
msgbox('', 'Close', 'Are you sure to close the connection?', context);
|
2020-11-17 11:12:55 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-11-18 23:15:59 +08:00
|
|
|
class ImagePaint extends StatelessWidget {
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
final m = Provider.of<ImageModel>(context);
|
2020-11-23 23:18:42 +08:00
|
|
|
final c = Provider.of<CanvasModel>(context);
|
|
|
|
var s = c.scale;
|
2020-11-18 23:15:59 +08:00
|
|
|
return CustomPaint(
|
2020-11-23 23:18:42 +08:00
|
|
|
painter:
|
|
|
|
new ImagePainter(image: m.image, x: c.x / s, y: c.y / s, scale: s),
|
2020-11-19 18:22:06 +08:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
class CursorPaint extends StatelessWidget {
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
final m = Provider.of<CursorModel>(context);
|
2020-11-23 23:18:42 +08:00
|
|
|
final c = Provider.of<CanvasModel>(context);
|
|
|
|
var s = c.scale;
|
2020-11-19 18:22:06 +08:00
|
|
|
return CustomPaint(
|
2020-11-23 23:18:42 +08:00
|
|
|
painter: new ImagePainter(
|
|
|
|
image: m.image,
|
|
|
|
x: m.x * s - m.hotx + c.x,
|
|
|
|
y: m.y * s - m.hoty + c.y,
|
|
|
|
scale: 1),
|
2020-11-18 23:15:59 +08:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
class ImagePainter extends CustomPainter {
|
|
|
|
ImagePainter({
|
2020-11-17 11:12:55 +08:00
|
|
|
this.image,
|
2020-11-19 18:22:06 +08:00
|
|
|
this.x,
|
|
|
|
this.y,
|
2020-11-23 23:18:42 +08:00
|
|
|
this.scale,
|
2020-11-17 11:12:55 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
ui.Image image;
|
2020-11-19 18:22:06 +08:00
|
|
|
double x;
|
|
|
|
double y;
|
2020-11-23 23:18:42 +08:00
|
|
|
double scale;
|
2020-11-17 11:12:55 +08:00
|
|
|
|
|
|
|
@override
|
|
|
|
void paint(Canvas canvas, Size size) {
|
2020-11-17 12:08:31 +08:00
|
|
|
if (image == null) return;
|
2020-11-23 23:18:42 +08:00
|
|
|
canvas.scale(scale, scale);
|
2020-11-19 18:22:06 +08:00
|
|
|
canvas.drawImage(image, new Offset(x, y), new Paint());
|
2020-11-17 11:12:55 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
@override
|
|
|
|
bool shouldRepaint(CustomPainter oldDelegate) {
|
2020-11-17 12:08:31 +08:00
|
|
|
return oldDelegate != this;
|
2020-11-17 01:22:14 +08:00
|
|
|
}
|
|
|
|
}
|
2020-11-19 21:59:49 +08:00
|
|
|
|
|
|
|
void enterPasswordDialog(String id, BuildContext context) {
|
|
|
|
final controller = TextEditingController();
|
2020-11-20 02:12:48 +08:00
|
|
|
var remember = FFI.getByName('remember', id) == 'true';
|
2020-11-19 21:59:49 +08:00
|
|
|
showAlertDialog(
|
|
|
|
context,
|
|
|
|
(setState) => Tuple3(
|
2020-11-20 02:12:48 +08:00
|
|
|
Text('Please enter your password'),
|
|
|
|
Column(mainAxisSize: MainAxisSize.min, children: [
|
2020-11-21 14:40:28 +08:00
|
|
|
PasswordWidget(controller: controller),
|
2020-11-20 13:06:52 +08:00
|
|
|
CheckboxListTile(
|
|
|
|
controlAffinity: ListTileControlAffinity.leading,
|
2020-11-20 02:12:48 +08:00
|
|
|
title: Text(
|
|
|
|
'Remember the password',
|
2020-11-19 21:59:49 +08:00
|
|
|
),
|
2020-11-20 13:06:52 +08:00
|
|
|
value: remember,
|
|
|
|
onChanged: (v) {
|
|
|
|
setState(() => remember = v);
|
|
|
|
},
|
2020-11-20 02:12:48 +08:00
|
|
|
),
|
|
|
|
]),
|
|
|
|
[
|
|
|
|
FlatButton(
|
|
|
|
textColor: MyTheme.accent,
|
|
|
|
onPressed: () {
|
|
|
|
Navigator.pop(context);
|
|
|
|
Navigator.pop(context);
|
|
|
|
},
|
|
|
|
child: Text('Cancel'),
|
|
|
|
),
|
|
|
|
FlatButton(
|
|
|
|
textColor: MyTheme.accent,
|
|
|
|
onPressed: () {
|
|
|
|
var text = controller.text.trim();
|
|
|
|
if (text == '') return;
|
|
|
|
FFI.login(text, remember);
|
|
|
|
showLoading('Logging in...');
|
|
|
|
Navigator.pop(context);
|
|
|
|
},
|
|
|
|
child: Text('OK'),
|
|
|
|
),
|
|
|
|
],
|
|
|
|
));
|
2020-11-19 21:59:49 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
void wrongPasswordDialog(String id, BuildContext context) {
|
|
|
|
showAlertDialog(
|
|
|
|
context,
|
|
|
|
(_) =>
|
|
|
|
Tuple3(Text('Wrong Password'), Text('Do you want to enter again?'), [
|
|
|
|
FlatButton(
|
|
|
|
textColor: MyTheme.accent,
|
|
|
|
onPressed: () {
|
|
|
|
Navigator.pop(context);
|
|
|
|
Navigator.pop(context);
|
|
|
|
},
|
|
|
|
child: Text('Cancel'),
|
|
|
|
),
|
|
|
|
FlatButton(
|
|
|
|
textColor: MyTheme.accent,
|
|
|
|
onPressed: () {
|
|
|
|
enterPasswordDialog(id, context);
|
|
|
|
},
|
|
|
|
child: Text('Retry'),
|
|
|
|
),
|
|
|
|
]));
|
|
|
|
}
|
2020-11-20 02:12:48 +08:00
|
|
|
|
2020-11-20 16:37:48 +08:00
|
|
|
void showOptions(BuildContext context) {
|
2020-11-20 02:12:48 +08:00
|
|
|
var showRemoteCursor =
|
|
|
|
FFI.getByName('toggle_option', 'show-remote-cursor') == 'true';
|
|
|
|
var lockAfterSessionEnd =
|
|
|
|
FFI.getByName('toggle_option', 'lock-after-session-end') == 'true';
|
2020-11-20 13:06:52 +08:00
|
|
|
String quality = FFI.getByName('image_quality');
|
|
|
|
if (quality == '') quality = 'balanced';
|
2020-11-20 02:12:48 +08:00
|
|
|
showAlertDialog(
|
|
|
|
context,
|
|
|
|
(setState) => Tuple3(
|
|
|
|
null,
|
|
|
|
Column(mainAxisSize: MainAxisSize.min, children: [
|
2020-11-20 13:06:52 +08:00
|
|
|
RadioListTile<String>(
|
|
|
|
controlAffinity: ListTileControlAffinity.trailing,
|
|
|
|
title: const Text('Good image quality'),
|
|
|
|
value: 'best',
|
|
|
|
groupValue: quality,
|
|
|
|
onChanged: (String value) {
|
|
|
|
setState(() {
|
|
|
|
quality = value;
|
|
|
|
FFI.setByName('image_quality', value);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
),
|
|
|
|
RadioListTile<String>(
|
|
|
|
controlAffinity: ListTileControlAffinity.trailing,
|
|
|
|
title: const Text('Balanced'),
|
|
|
|
value: 'balanced',
|
|
|
|
groupValue: quality,
|
|
|
|
onChanged: (String value) {
|
|
|
|
setState(() {
|
|
|
|
quality = value;
|
|
|
|
FFI.setByName('image_quality', value);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
),
|
|
|
|
RadioListTile<String>(
|
|
|
|
controlAffinity: ListTileControlAffinity.trailing,
|
|
|
|
title: const Text('Optimize reaction time'),
|
|
|
|
value: 'low',
|
|
|
|
groupValue: quality,
|
|
|
|
onChanged: (String value) {
|
|
|
|
setState(() {
|
|
|
|
quality = value;
|
|
|
|
FFI.setByName('image_quality', value);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
),
|
2020-11-21 02:18:04 +08:00
|
|
|
Divider(color: Colors.black),
|
2020-11-20 02:12:48 +08:00
|
|
|
CheckboxListTile(
|
|
|
|
value: showRemoteCursor,
|
|
|
|
onChanged: (v) {
|
|
|
|
setState(() {
|
|
|
|
showRemoteCursor = v;
|
|
|
|
FFI.setByName('toggle_option', 'show-remote-cursor');
|
|
|
|
});
|
|
|
|
},
|
|
|
|
title: Text('Show remote cursor')),
|
|
|
|
CheckboxListTile(
|
|
|
|
value: lockAfterSessionEnd,
|
|
|
|
onChanged: (v) {
|
|
|
|
setState(() {
|
|
|
|
lockAfterSessionEnd = v;
|
|
|
|
FFI.setByName('toggle_option', 'lock-after-session-end');
|
|
|
|
});
|
|
|
|
},
|
|
|
|
title: Text('Lock after session end'))
|
|
|
|
]),
|
|
|
|
null),
|
|
|
|
() async => true,
|
|
|
|
true,
|
2020-11-20 16:37:48 +08:00
|
|
|
0);
|
|
|
|
}
|
|
|
|
|
|
|
|
void showActions(BuildContext context) {
|
|
|
|
showAlertDialog(
|
|
|
|
context,
|
|
|
|
(setState) => Tuple3(
|
|
|
|
null,
|
|
|
|
Column(mainAxisSize: MainAxisSize.min, children: [
|
|
|
|
ListTile(
|
|
|
|
onTap: () {
|
|
|
|
Navigator.pop(context);
|
|
|
|
FFI.setByName('ctrl_alt_del');
|
|
|
|
},
|
|
|
|
title: Text('Insert Ctrl + Alt + Del'),
|
|
|
|
),
|
|
|
|
ListTile(
|
|
|
|
onTap: () {
|
|
|
|
Navigator.pop(context);
|
|
|
|
FFI.setByName('lock_screen');
|
|
|
|
},
|
|
|
|
title: Text('Insert Lock'),
|
|
|
|
),
|
|
|
|
]),
|
|
|
|
null),
|
|
|
|
() async => true,
|
|
|
|
true,
|
|
|
|
0);
|
2020-11-20 02:12:48 +08:00
|
|
|
}
|