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-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();
|
|
|
|
}
|
|
|
|
|
2020-11-17 12:08:31 +08:00
|
|
|
// https://github.com/hanxu317317/flutter_plan_demo/blob/master/lib/src/enter.dart
|
2020-11-17 01:22:14 +08:00
|
|
|
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-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
|
|
|
// https://stackoverflow.com/questions/46640116/make-flutter-application-fullscreen
|
|
|
|
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());
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
@override
|
|
|
|
void dispose() {
|
|
|
|
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-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-17 12:08:31 +08:00
|
|
|
// Size size = MediaQueryData.fromWindow(ui.window).size;
|
2020-11-17 12:41:23 +08:00
|
|
|
// MediaQuery.of(context).size.height;
|
2020-11-19 18:41:37 +08:00
|
|
|
EasyLoading.instance.loadingStyle = EasyLoadingStyle.light;
|
2020-11-20 16:37:48 +08:00
|
|
|
return WillPopScope(
|
|
|
|
onWillPop: () async {
|
|
|
|
close();
|
|
|
|
return false;
|
|
|
|
},
|
|
|
|
child: Scaffold(
|
|
|
|
floatingActionButton: _showBar
|
|
|
|
? null
|
|
|
|
: FloatingActionButton(
|
|
|
|
mini: true,
|
|
|
|
child: Icon(Icons.expand_less),
|
|
|
|
backgroundColor: MyTheme.accent50,
|
|
|
|
onPressed: () {
|
|
|
|
setState(() => _showBar = !_showBar);
|
|
|
|
}),
|
|
|
|
bottomNavigationBar: _showBar
|
|
|
|
? BottomAppBar(
|
|
|
|
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-19 18:22:06 +08:00
|
|
|
color: Colors.white,
|
2020-11-20 16:37:48 +08:00
|
|
|
icon: Icon(Icons.keyboard),
|
2020-11-20 17:20:42 +08:00
|
|
|
onPressed: () => SystemChannels.textInput
|
|
|
|
.invokeMethod('TextInput.show'),
|
2020-11-20 16:37:48 +08:00
|
|
|
),
|
|
|
|
Transform.rotate(
|
|
|
|
angle: 15 * math.pi / 180,
|
|
|
|
child: IconButton(
|
|
|
|
color: Colors.white,
|
|
|
|
icon: Icon(Icons.flash_on),
|
|
|
|
onPressed: () {
|
|
|
|
showActions(context);
|
|
|
|
},
|
|
|
|
)),
|
|
|
|
IconButton(
|
|
|
|
color: Colors.white,
|
|
|
|
icon: Icon(Icons.tv),
|
|
|
|
onPressed: () {
|
|
|
|
showOptions(context);
|
|
|
|
},
|
|
|
|
),
|
|
|
|
IconButton(
|
|
|
|
color: Colors.white,
|
|
|
|
icon: Icon(Icons.settings),
|
|
|
|
onPressed: () {},
|
|
|
|
)
|
|
|
|
]),
|
|
|
|
IconButton(
|
|
|
|
color: Colors.white,
|
|
|
|
icon: Icon(Icons.expand_more),
|
|
|
|
onPressed: () {
|
|
|
|
setState(() => _showBar = !_showBar);
|
|
|
|
}),
|
|
|
|
],
|
|
|
|
),
|
|
|
|
)
|
|
|
|
: null,
|
|
|
|
body: FlutterEasyLoading(
|
|
|
|
child: Container(
|
|
|
|
color: MyTheme.canvasColor,
|
|
|
|
child: InteractiveViewer(
|
|
|
|
constrained: false,
|
|
|
|
panEnabled: true,
|
|
|
|
onInteractionUpdate: (details) {
|
|
|
|
print('$details');
|
|
|
|
},
|
|
|
|
child: Stack(children: [
|
|
|
|
ImagePaint(),
|
|
|
|
CursorPaint(),
|
|
|
|
]),
|
|
|
|
),
|
|
|
|
))));
|
|
|
|
}
|
|
|
|
|
|
|
|
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);
|
|
|
|
return CustomPaint(
|
2020-11-19 18:22:06 +08:00
|
|
|
painter: new ImagePainter(image: m.image, x: 0, y: 0),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
class CursorPaint extends StatelessWidget {
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
final m = Provider.of<CursorModel>(context);
|
|
|
|
return CustomPaint(
|
|
|
|
painter: new ImagePainter(image: m.image, x: m.x, y: m.y),
|
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-17 11:12:55 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
ui.Image image;
|
2020-11-19 18:22:06 +08:00
|
|
|
double x;
|
|
|
|
double y;
|
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-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: [
|
|
|
|
TextField(
|
|
|
|
autofocus: true,
|
|
|
|
obscureText: true,
|
|
|
|
controller: controller,
|
|
|
|
decoration: const InputDecoration(
|
|
|
|
labelText: 'Password',
|
2020-11-19 21:59:49 +08:00
|
|
|
),
|
2020-11-20 02:12:48 +08:00
|
|
|
),
|
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: () {
|
|
|
|
Navigator.pop(context);
|
|
|
|
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);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
),
|
|
|
|
Divider(color: MyTheme.border),
|
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
|
|
|
}
|