Fabio/aves_panorama
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: Fabio:master
Branches Tags
Fabio:master
Fabio:aves
Fabio:v0.3.2
Fabio:v0.1.2
..
compare: Fabio:v0.1.2
Branches Tags
Fabio:aves
Fabio:master
Fabio:v0.3.2
Fabio:v0.1.2

No commits in common. "master" and "v0.1.2" have entirely different histories.
master ... v0.1.2

11 changed files with 228 additions and 506 deletions
Show stats Expand all files Collapse all files

31
CHANGELOG.md
View file

@ -1,34 +1,3 @@
## [0.4.1] - 03/13/2021
* Fix hotspots no update
* Fix rotation
## [0.4.0] - 03/13/2021
* migrate to null safety
## [0.3.2] - 01/09/2021
* Fixed some bugs
## [0.3.1] - 01/08/2021
* Add cropped area.
* Add onTap & onLongPress event.
## [0.3.0] - 12/30/2020
* Support animated images.
## [0.2.1] - 12/29/2020
* Fixed isFinite exception.
* Speed up texture loading.
## [0.2.0] - 12/29/2020
* Add hotspots.
## [0.1.2] - 02/22/2020
* Fixed some bugs of sensor control.

2
README.md
View file

@ -10,7 +10,7 @@ Add panorama as a dependency in your pubspec.yaml file.
```yaml
dependencies:
panorama: ^0.4.1
panorama: ^0.1.2
```
Import and add the Panorama widget to your project.

BIN
example/assets/panorama2.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 MiB

BIN
example/assets/panorama_cropped.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.8 MiB

142
example/lib/main.dart
View file

@ -17,154 +17,48 @@ class MyApp extends StatelessWidget {
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, this.title}) : super(key: key);
MyHomePage({Key key, this.title}) : super(key: key);
final String? title;
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
File _imageFile;
double _lon = 0;
double _lat = 0;
double _tilt = 0;
int _panoId = 0;
List<Image> panoImages = [
Image.asset('assets/panorama.jpg'),
Image.asset('assets/panorama2.webp'),
Image.asset('assets/panorama_cropped.webp'),
];
ImagePicker picker = ImagePicker();
void onViewChanged(longitude, latitude, tilt) {
setState(() {
_lon = longitude;
_lat = latitude;
_tilt = tilt;
});
}
Widget hotspotButton({String? text, IconData? icon, VoidCallback? onPressed}) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
style: ButtonStyle(
shape: MaterialStateProperty.all(CircleBorder()),
backgroundColor: MaterialStateProperty.all(Colors.black38),
foregroundColor: MaterialStateProperty.all(Colors.white),
),
child: Icon(icon),
onPressed: onPressed,
),
text != null
? Container(
padding: EdgeInsets.all(4.0),
decoration: BoxDecoration(color: Colors.black38, borderRadius: BorderRadius.all(Radius.circular(4))),
child: Center(child: Text(text)),
)
: Container(),
],
);
}
@override
Widget build(BuildContext context) {
Widget panorama;
switch (_panoId % panoImages.length) {
case 0:
panorama = Panorama(
animSpeed: 1.0,
sensorControl: SensorControl.Orientation,
onViewChanged: onViewChanged,
onTap: (longitude, latitude, tilt) => print('onTap: $longitude, $latitude, $tilt'),
onLongPressStart: (longitude, latitude, tilt) => print('onLongPressStart: $longitude, $latitude, $tilt'),
onLongPressMoveUpdate: (longitude, latitude, tilt) => print('onLongPressMoveUpdate: $longitude, $latitude, $tilt'),
onLongPressEnd: (longitude, latitude, tilt) => print('onLongPressEnd: $longitude, $latitude, $tilt'),
child: Image.asset('assets/panorama.jpg'),
hotspots: [
Hotspot(
latitude: -15.0,
longitude: -129.0,
width: 90,
height: 75,
widget: hotspotButton(text: "Next scene", icon: Icons.open_in_browser, onPressed: () => setState(() => _panoId++)),
),
Hotspot(
latitude: -42.0,
longitude: -46.0,
width: 60.0,
height: 60.0,
widget: hotspotButton(icon: Icons.search, onPressed: () => setState(() => _panoId = 2)),
),
Hotspot(
latitude: -33.0,
longitude: 123.0,
width: 60.0,
height: 60.0,
widget: hotspotButton(icon: Icons.arrow_upward, onPressed: () {}),
),
],
);
break;
case 2:
panorama = Panorama(
animSpeed: 1.0,
sensorControl: SensorControl.Orientation,
onViewChanged: onViewChanged,
croppedArea: Rect.fromLTWH(2533.0, 1265.0, 5065.0, 2533.0),
croppedFullWidth: 10132.0,
croppedFullHeight: 5066.0,
child: Image.asset('assets/panorama_cropped.jpg'),
hotspots: [
Hotspot(
latitude: 0.0,
longitude: -46.0,
width: 90.0,
height: 75.0,
widget: hotspotButton(text: "Next scene", icon: Icons.double_arrow, onPressed: () => setState(() => _panoId++)),
),
],
);
break;
default:
panorama = Panorama(
animSpeed: 1.0,
sensorControl: SensorControl.Orientation,
onViewChanged: onViewChanged,
child: panoImages[_panoId % panoImages.length],
hotspots: [
Hotspot(
latitude: 0.0,
longitude: 160.0,
width: 90.0,
height: 75.0,
widget: hotspotButton(text: "Next scene", icon: Icons.double_arrow, onPressed: () => setState(() => _panoId++)),
),
],
);
}
return Scaffold(
appBar: AppBar(
title: Text(widget.title!),
title: Text(widget.title),
),
body: Stack(
children: [
panorama,
Panorama(
animSpeed: 1.0,
sensorControl: SensorControl.Orientation,
onViewChanged: (longitude, latitude, tilt) {
setState(() {
_lon = longitude;
_lat = latitude;
_tilt = tilt;
});
},
child: _imageFile != null ? Image.file(_imageFile) : Image.asset('assets/panorama.jpg'),
),
Text('${_lon.toStringAsFixed(3)}, ${_lat.toStringAsFixed(3)}, ${_tilt.toStringAsFixed(3)}'),
],
),
floatingActionButton: FloatingActionButton(
mini: true,
onPressed: () async {
final pickedFile = await picker.getImage(source: ImageSource.gallery);
setState(() {
if (pickedFile != null) {
panoImages.add(Image.file(File(pickedFile.path)));
_panoId = panoImages.length - 1;
}
});
_imageFile = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {});
},
child: Icon(Icons.panorama),
),

124
example/pubspec.lock
View file

@ -1,55 +1,62 @@
# Generated by pub
# See https://dart.dev/tools/pub/glossary#lockfile
packages:
archive:
dependency: transitive
description:
name: archive
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.11"
args:
dependency: transitive
description:
name: args
url: "https://pub.dartlang.org"
source: hosted
version: "1.5.2"
async:
dependency: transitive
description:
name: async
url: "https://pub.dartlang.org"
source: hosted
version: "2.5.0"
version: "2.4.0"
boolean_selector:
dependency: transitive
description:
name: boolean_selector
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0"
characters:
dependency: transitive
description:
name: characters
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
version: "1.0.5"
charcode:
dependency: transitive
description:
name: charcode
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0"
clock:
dependency: transitive
description:
name: clock
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
version: "1.1.2"
collection:
dependency: transitive
description:
name: collection
url: "https://pub.dartlang.org"
source: hosted
version: "1.15.0"
fake_async:
version: "1.14.11"
convert:
dependency: transitive
description:
name: fake_async
name: convert
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0"
version: "2.1.1"
crypto:
dependency: transitive
description:
name: crypto
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.3"
flutter:
dependency: "direct main"
description: flutter
@ -61,96 +68,82 @@ packages:
name: flutter_cube
url: "https://pub.dartlang.org"
source: hosted
version: "0.1.1"
version: "0.0.3"
flutter_plugin_android_lifecycle:
dependency: transitive
description:
name: flutter_plugin_android_lifecycle
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.0"
version: "1.0.6"
flutter_test:
dependency: "direct dev"
description: flutter
source: sdk
version: "0.0.0"
http:
image:
dependency: transitive
description:
name: http
name: image
url: "https://pub.dartlang.org"
source: hosted
version: "0.13.0"
http_parser:
dependency: transitive
description:
name: http_parser
url: "https://pub.dartlang.org"
source: hosted
version: "4.0.0"
version: "2.1.4"
image_picker:
dependency: "direct main"
description:
name: image_picker
url: "https://pub.dartlang.org"
source: hosted
version: "0.7.2+1"
image_picker_platform_interface:
dependency: transitive
description:
name: image_picker_platform_interface
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.1"
version: "0.6.3+4"
matcher:
dependency: transitive
description:
name: matcher
url: "https://pub.dartlang.org"
source: hosted
version: "0.12.10"
version: "0.12.6"
meta:
dependency: transitive
description:
name: meta
url: "https://pub.dartlang.org"
source: hosted
version: "1.3.0"
version: "1.1.8"
motion_sensors:
dependency: transitive
description:
name: motion_sensors
url: "https://pub.dartlang.org"
source: hosted
version: "0.1.0"
version: "0.0.1"
panorama:
dependency: "direct main"
description:
path: ".."
relative: true
source: path
version: "0.4.0"
version: "0.0.2"
path:
dependency: transitive
description:
name: path
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0"
pedantic:
version: "1.6.4"
petitparser:
dependency: transitive
description:
name: pedantic
name: petitparser
url: "https://pub.dartlang.org"
source: hosted
version: "1.11.0"
plugin_platform_interface:
version: "2.4.0"
quiver:
dependency: transitive
description:
name: plugin_platform_interface
name: quiver
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.0"
version: "2.0.5"
sky_engine:
dependency: transitive
description: flutter
@ -162,56 +155,63 @@ packages:
name: source_span
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0"
version: "1.5.5"
stack_trace:
dependency: transitive
description:
name: stack_trace
url: "https://pub.dartlang.org"
source: hosted
version: "1.10.0"
version: "1.9.3"
stream_channel:
dependency: transitive
description:
name: stream_channel
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0"
version: "2.0.0"
string_scanner:
dependency: transitive
description:
name: string_scanner
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
version: "1.0.5"
term_glyph:
dependency: transitive
description:
name: term_glyph
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0"
version: "1.1.0"
test_api:
dependency: transitive
description:
name: test_api
url: "https://pub.dartlang.org"
source: hosted
version: "0.2.19"
version: "0.2.15"
typed_data:
dependency: transitive
description:
name: typed_data
url: "https://pub.dartlang.org"
source: hosted
version: "1.3.0"
version: "1.1.6"
vector_math:
dependency: transitive
description:
name: vector_math
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0"
version: "2.0.8"
xml:
dependency: transitive
description:
name: xml
url: "https://pub.dartlang.org"
source: hosted
version: "3.5.0"
sdks:
dart: ">=2.12.0 <3.0.0"
flutter: ">=1.20.0"
dart: ">=2.4.0 <3.0.0"
flutter: ">=1.12.13 <2.0.0"

8
example/pubspec.yaml
View file

@ -3,14 +3,14 @@ description: A new Flutter project.
version: 1.0.0+1
environment:
sdk: '>=2.12.0 <3.0.0'
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
panorama:
path: ../
image_picker: ^0.7.2+1
image_picker: ^0.6.3+4
dev_dependencies:
flutter_test:
@ -20,6 +20,4 @@ dev_dependencies:
flutter:
uses-material-design: true
assets:
- assets/
publish_to: none
- assets/

314
lib/panorama.dart
View file

@ -20,7 +20,7 @@ enum SensorControl {
class Panorama extends StatefulWidget {
Panorama({
Key? key,
Key key,
this.latitude = 0,
this.longitude = 0,
this.zoom = 1.0,
@ -37,17 +37,8 @@ class Panorama extends StatefulWidget {
this.lonSegments = 64,
this.interactive = true,
this.sensorControl = SensorControl.None,
this.croppedArea = const Rect.fromLTWH(0.0, 0.0, 1.0, 1.0),
this.croppedFullWidth = 1.0,
this.croppedFullHeight = 1.0,
this.onViewChanged,
this.onTap,
this.onLongPressStart,
this.onLongPressMoveUpdate,
this.onLongPressEnd,
this.onImageLoad,
this.child,
this.hotspots,
}) : super(key: key);
/// The initial latitude, in degrees, between -90 and 90. default to 0 (the vertical center of the image).
@ -98,84 +89,33 @@ class Panorama extends StatefulWidget {
/// Control the panorama with motion sensors.
final SensorControl sensorControl;
/// Area of the image was cropped from the full sized photo sphere.
final Rect croppedArea;
/// Original full width from which the image was cropped.
final double croppedFullWidth;
/// Original full height from which the image was cropped.
final double croppedFullHeight;
/// This event will be called when the view direction has changed, it contains latitude and longitude about the current view.
final Function(double longitude, double latitude, double tilt)? onViewChanged;
/// This event will be called when the user has tapped, it contains latitude and longitude about where the user tapped.
final Function(double longitude, double latitude, double tilt)? onTap;
/// This event will be called when the user has started a long press, it contains latitude and longitude about where the user pressed.
final Function(double longitude, double latitude, double tilt)? onLongPressStart;
/// This event will be called when the user has drag-moved after a long press, it contains latitude and longitude about where the user pressed.
final Function(double longitude, double latitude, double tilt)? onLongPressMoveUpdate;
/// This event will be called when the user has stopped a long presses, it contains latitude and longitude about where the user pressed.
final Function(double longitude, double latitude, double tilt)? onLongPressEnd;
/// This event will be called when provided image is loaded on texture.
final Function()? onImageLoad;
/// It is called when the view direction has changed, sending the new longitude and latitude values back.
final Function(double longitude, double latitude, double tilt) onViewChanged;
/// Specify an Image(equirectangular image) widget to the panorama.
final Image? child;
/// Place widgets in the panorama.
final List<Hotspot>? hotspots;
final Image child;
@override
_PanoramaState createState() => _PanoramaState();
}
class _PanoramaState extends State<Panorama> with SingleTickerProviderStateMixin {
Scene? scene;
Object? surface;
late double latitude;
late double longitude;
Scene scene;
double latitude;
double longitude;
double latitudeDelta = 0;
double longitudeDelta = 0;
double zoomDelta = 0;
late Offset _lastFocalPoint;
double? _lastZoom;
Offset _lastFocalPoint;
double _lastZoom;
double _radius = 500;
double _dampingFactor = 0.05;
double _animateDirection = 1.0;
late AnimationController _controller;
AnimationController _controller;
double screenOrientation = 0.0;
Vector3 orientation = Vector3(0, radians(90), 0);
StreamSubscription? _orientationSubscription;
StreamSubscription? _screenOrientSubscription;
late StreamController<Null> _streamController;
Stream<Null>? _stream;
ImageStream? _imageStream;
void _handleTapUp(TapUpDetails details) {
final Vector3 o = positionToLatLon(details.localPosition.dx, details.localPosition.dy);
widget.onTap!(degrees(o.x), degrees(-o.y), degrees(o.z));
}
void _handleLongPressStart(LongPressStartDetails details) {
final Vector3 o = positionToLatLon(details.localPosition.dx, details.localPosition.dy);
widget.onLongPressStart!(degrees(o.x), degrees(-o.y), degrees(o.z));
}
void _handleLongPressMoveUpdate(LongPressMoveUpdateDetails details) {
final Vector3 o = positionToLatLon(details.localPosition.dx, details.localPosition.dy);
widget.onLongPressMoveUpdate!(degrees(o.x), degrees(-o.y), degrees(o.z));
}
void _handleLongPressEnd(LongPressEndDetails details) {
final Vector3 o = positionToLatLon(details.localPosition.dx, details.localPosition.dy);
widget.onLongPressEnd!(degrees(o.x), degrees(-o.y), degrees(o.z));
}
StreamSubscription _orientationSubscription;
StreamSubscription _screenOrientSubscription;
void _handleScaleStart(ScaleStartDetails details) {
_lastFocalPoint = details.localFocalPoint;
@ -185,12 +125,12 @@ class _PanoramaState extends State<Panorama> with SingleTickerProviderStateMixin
void _handleScaleUpdate(ScaleUpdateDetails details) {
final offset = details.localFocalPoint - _lastFocalPoint;
_lastFocalPoint = details.localFocalPoint;
latitudeDelta += widget.sensitivity * 0.5 * math.pi * offset.dy / scene!.camera.viewportHeight;
longitudeDelta -= widget.sensitivity * _animateDirection * 0.5 * math.pi * offset.dx / scene!.camera.viewportHeight;
latitudeDelta += widget.sensitivity * 0.5 * math.pi * offset.dy / scene.camera.viewportHeight;
longitudeDelta -= widget.sensitivity * _animateDirection * 0.5 * math.pi * offset.dx / scene.camera.viewportHeight;
if (_lastZoom == null) {
_lastZoom = scene!.camera.zoom;
_lastZoom = scene.camera.zoom;
}
zoomDelta += _lastZoom! * details.scale - (scene!.camera.zoom + zoomDelta);
zoomDelta += _lastZoom * details.scale - (scene.camera.zoom + zoomDelta);
if (widget.sensorControl == SensorControl.None && !_controller.isAnimating) {
_controller.reset();
if (widget.animSpeed != 0) {
@ -211,16 +151,12 @@ class _PanoramaState extends State<Panorama> with SingleTickerProviderStateMixin
longitude += _animateDirection * longitudeDelta * _dampingFactor * widget.sensitivity;
longitudeDelta *= 1 - _dampingFactor * widget.sensitivity;
// animate zomming
final double zoom = scene!.camera.zoom + zoomDelta * _dampingFactor;
final double zoom = scene.camera.zoom + zoomDelta * _dampingFactor;
zoomDelta *= 1 - _dampingFactor;
scene!.camera.zoom = zoom.clamp(widget.minZoom, widget.maxZoom);
scene.camera.zoom = zoom.clamp(widget.minZoom, widget.maxZoom);
// stop animation if not needed
if (latitudeDelta.abs() < 0.001 &&
longitudeDelta.abs() < 0.001 &&
zoomDelta.abs() < 0.001) {
if (widget.sensorControl == SensorControl.None &&
widget.animSpeed == 0 &&
_controller.isAnimating) _controller.stop();
if (latitudeDelta.abs() < 0.001 && longitudeDelta.abs() < 0.001 && zoomDelta.abs() < 0.001) {
if (widget.animSpeed == 0 && _controller.isAnimating) _controller.stop();
}
// rotate for screen orientation
@ -266,10 +202,9 @@ class _PanoramaState extends State<Panorama> with SingleTickerProviderStateMixin
o = quaternionToOrientation(q * Quaternion.axisAngle(Vector3(0, 1, 0), math.pi * 0.5));
widget.onViewChanged?.call(degrees(o.x), degrees(-o.y), degrees(o.z));
q.rotate(scene!.camera.target..setFrom(Vector3(0, 0, -_radius)));
q.rotate(scene!.camera.up..setFrom(Vector3(0, 1, 0)));
scene!.update();
_streamController.add(null);
q.rotate(scene.camera.target..setFrom(Vector3(0, 0, -_radius)));
q.rotate(scene.camera.up..setFrom(Vector3(0, 1, 0)));
scene.update();
}
void _updateSensorControl() {
@ -278,13 +213,15 @@ class _PanoramaState extends State<Panorama> with SingleTickerProviderStateMixin
case SensorControl.Orientation:
motionSensors.orientationUpdateInterval = Duration.microsecondsPerSecond ~/ 60;
_orientationSubscription = motionSensors.orientation.listen((OrientationEvent event) {
orientation.setValues(event.yaw, event.pitch, event.roll);
orientation.setFrom(Vector3(event.yaw, event.pitch, event.roll));
_updateView();
});
break;
case SensorControl.AbsoluteOrientation:
motionSensors.absoluteOrientationUpdateInterval = Duration.microsecondsPerSecond ~/ 60;
_orientationSubscription = motionSensors.absoluteOrientation.listen((AbsoluteOrientationEvent event) {
orientation.setValues(event.yaw, event.pitch, event.roll);
orientation.setFrom(Vector3(event.yaw, event.pitch, event.roll));
_updateView();
});
break;
default:
@ -293,136 +230,62 @@ class _PanoramaState extends State<Panorama> with SingleTickerProviderStateMixin
_screenOrientSubscription?.cancel();
if (widget.sensorControl != SensorControl.None) {
_screenOrientSubscription = motionSensors.screenOrientation.listen((ScreenOrientationEvent event) {
screenOrientation = radians(event.angle!);
screenOrientation = radians(event.angle);
});
}
}
void _updateTexture(ImageInfo imageInfo, bool synchronousCall) {
surface?.mesh.texture = imageInfo.image;
surface?.mesh.textureRect = Rect.fromLTWH(0, 0, imageInfo.image.width.toDouble(), imageInfo.image.height.toDouble());
scene!.texture = imageInfo.image;
scene!.update();
widget.onImageLoad?.call();
}
void _loadTexture(ImageProvider? provider) {
if (provider == null) return;
_imageStream?.removeListener(ImageStreamListener(_updateTexture));
_imageStream = provider.resolve(ImageConfiguration());
ImageStreamListener listener = ImageStreamListener(_updateTexture);
_imageStream!.addListener(listener);
}
void _onSceneCreated(Scene scene) {
this.scene = scene;
scene.camera.near = 1.0;
scene.camera.far = _radius + 1.0;
scene.camera.fov = 75;
scene.camera.zoom = widget.zoom;
scene.camera.position.setFrom(Vector3(0, 0, 0.1));
if (widget.child != null) {
final Mesh mesh = generateSphereMesh(radius: _radius, latSegments: widget.latSegments, lonSegments: widget.lonSegments, croppedArea: widget.croppedArea, croppedFullWidth: widget.croppedFullWidth, croppedFullHeight: widget.croppedFullHeight);
surface = Object(name: 'surface', mesh: mesh, backfaceCulling: false);
_loadTexture(widget.child!.image);
scene.world.add(surface!);
_updateView();
loadImageFromProvider(widget.child.image).then((ui.Image image) {
final Mesh mesh = generateSphereMesh(radius: _radius, latSegments: widget.latSegments, lonSegments: widget.lonSegments, texture: image);
scene.world.add(Object(name: 'surface', mesh: mesh, backfaceCulling: false));
scene.updateTexture();
scene.camera.near = 1.0;
scene.camera.far = _radius + 1.0;
scene.camera.fov = 75;
scene.camera.zoom = widget.zoom;
scene.camera.position.setFrom(Vector3(0, 0, 0.1));
_updateView();
});
}
}
Matrix4 matrixFromLatLon(double lat, double lon) {
return Matrix4.rotationY(radians(90.0 - lon))..rotateX(radians(lat));
}
Vector3 positionToLatLon(double x, double y) {
// transform viewport coordinate to NDC, values between -1 and 1
final Vector4 v = Vector4(2.0 * x / scene!.camera.viewportWidth - 1.0, 1.0 - 2.0 * y / scene!.camera.viewportHeight, 1.0, 1.0);
// create projection matrix
final Matrix4 m = scene!.camera.projectionMatrix * scene!.camera.lookAtMatrix;
// apply inversed projection matrix
m.invert();
v.applyMatrix4(m);
// apply perspective division
v.scale(1 / v.w);
// get rotation from two vectors
final Quaternion q = Quaternion.fromTwoVectors(v.xyz, Vector3(0.0, 0.0, -_radius));
// get euler angles from rotation
return quaternionToOrientation(q * Quaternion.axisAngle(Vector3(0, 1, 0), math.pi * 0.5));
}
Vector3 positionFromLatLon(double lat, double lon) {
// create projection matrix
final Matrix4 m = scene!.camera.projectionMatrix * scene!.camera.lookAtMatrix * matrixFromLatLon(lat, lon);
// apply projection matrix
final Vector4 v = Vector4(0.0, 0.0, -_radius, 1.0)..applyMatrix4(m);
// apply perspective division and transform NDC to the viewport coordinate
return Vector3(
(1.0 + v.x / v.w) * scene!.camera.viewportWidth / 2,
(1.0 - v.y / v.w) * scene!.camera.viewportHeight / 2,
v.z,
);
}
Widget buildHotspotWidgets(List<Hotspot>? hotspots) {
final List<Widget> widgets = <Widget>[];
if (hotspots != null && scene != null) {
for (Hotspot hotspot in hotspots) {
final Vector3 pos = positionFromLatLon(hotspot.latitude, hotspot.longitude);
final Offset orgin = Offset(hotspot.width * hotspot.orgin.dx, hotspot.height * hotspot.orgin.dy);
final Matrix4 transform = scene!.camera.lookAtMatrix * matrixFromLatLon(hotspot.latitude, hotspot.longitude);
final Widget child = Positioned(
left: pos.x - orgin.dx,
top: pos.y - orgin.dy,
width: hotspot.width,
height: hotspot.height,
child: Transform(
origin: orgin,
transform: transform..invert(),
child: Offstage(
offstage: pos.z < 0,
child: hotspot.widget,
),
),
);
widgets.add(child);
}
}
return Stack(children: widgets);
}
@override
void initState() {
super.initState();
latitude = degrees(widget.latitude);
longitude = degrees(widget.longitude);
_streamController = StreamController<Null>.broadcast();
_stream = _streamController.stream;
_updateSensorControl();
_controller = AnimationController(duration: Duration(milliseconds: 60000), vsync: this)..addListener(_updateView);
if (widget.sensorControl != SensorControl.None || widget.animSpeed != 0) _controller.repeat();
if (widget.sensorControl == SensorControl.None && widget.animSpeed != 0) _controller.repeat();
}
@override
void dispose() {
_imageStream?.removeListener(ImageStreamListener(_updateTexture));
_orientationSubscription?.cancel();
_screenOrientSubscription?.cancel();
_controller.dispose();
_streamController.close();
super.dispose();
}
@override
void didUpdateWidget(Panorama oldWidget) {
super.didUpdateWidget(oldWidget);
final Object surface = scene.world.find(RegExp('surface'));
if (surface == null) return;
if (widget.latSegments != oldWidget.latSegments || widget.lonSegments != oldWidget.lonSegments || widget.croppedArea != oldWidget.croppedArea || widget.croppedFullWidth != oldWidget.croppedFullWidth || widget.croppedFullHeight != oldWidget.croppedFullHeight) {
surface!.mesh = generateSphereMesh(radius: _radius, latSegments: widget.latSegments, lonSegments: widget.lonSegments, croppedArea: widget.croppedArea, croppedFullWidth: widget.croppedFullWidth, croppedFullHeight: widget.croppedFullHeight);
if (widget.latSegments != oldWidget.latSegments || widget.lonSegments != oldWidget.lonSegments) {
surface.mesh = generateSphereMesh(radius: _radius, latSegments: widget.latSegments, lonSegments: widget.lonSegments, texture: surface.mesh.texture);
}
if (widget.child?.image != oldWidget.child?.image) {
_loadTexture(widget.child?.image);
loadImageFromProvider(widget.child.image).then((ui.Image image) {
surface.mesh.texture = image;
surface.mesh.textureRect = Rect.fromLTWH(0, 0, image.width.toDouble(), image.height.toDouble());
scene.updateTexture();
});
}
if (widget.sensorControl != oldWidget.sensorControl) {
_updateSensorControl();
@ -431,81 +294,31 @@ class _PanoramaState extends State<Panorama> with SingleTickerProviderStateMixin
@override
Widget build(BuildContext context) {
Widget pano = Stack(
children: [
Cube(interactive: false, onSceneCreated: _onSceneCreated),
StreamBuilder(
stream: _stream,
builder: (BuildContext context, AsyncSnapshot snapshot) {
return buildHotspotWidgets(widget.hotspots);
},
),
],
);
return widget.interactive
? GestureDetector(
onScaleStart: _handleScaleStart,
onScaleUpdate: _handleScaleUpdate,
onTapUp: widget.onTap == null ? null : _handleTapUp,
onLongPressStart: widget.onLongPressStart == null ? null : _handleLongPressStart,
onLongPressMoveUpdate: widget.onLongPressMoveUpdate == null ? null : _handleLongPressMoveUpdate,
onLongPressEnd: widget.onLongPressEnd == null ? null : _handleLongPressEnd,
child: pano,
child: Cube(interactive: false, onSceneCreated: _onSceneCreated),
)
: pano;
: Cube(interactive: false, onSceneCreated: _onSceneCreated);
}
}
class Hotspot {
Hotspot({
this.name,
this.latitude = 0.0,
this.longitude = 0.0,
this.orgin = const Offset(0.5, 0.5),
this.width = 32.0,
this.height = 32.0,
this.widget,
});
/// The name of this hotspot.
String? name;
/// The initial latitude, in degrees, between -90 and 90.
final double latitude;
/// The initial longitude, in degrees, between -180 and 180.
final double longitude;
/// The local orgin of this hotspot. Default is Offset(0.5, 0.5).
final Offset orgin;
// The width of widget. Default is 32.0
double width;
// The height of widget. Default is 32.0
double height;
Widget? widget;
}
Mesh generateSphereMesh({num radius = 1.0, int latSegments = 16, int lonSegments = 16, ui.Image? texture, Rect croppedArea = const Rect.fromLTWH(0.0, 0.0, 1.0, 1.0), double croppedFullWidth = 1.0, double croppedFullHeight = 1.0}) {
Mesh generateSphereMesh({num radius = 1.0, int latSegments = 16, int lonSegments = 16, ui.Image texture}) {
int count = (latSegments + 1) * (lonSegments + 1);
List<Vector3> vertices = List<Vector3>.filled(count, Vector3.zero());
List<Offset> texcoords = List<Offset>.filled(count, Offset.zero);
List<Polygon> indices = List<Polygon>.filled(latSegments * lonSegments * 2, Polygon(0, 0, 0));
List<Vector3> vertices = List<Vector3>(count);
List<Offset> texcoords = List<Offset>(count);
List<Polygon> indices = List<Polygon>(latSegments * lonSegments * 2);
int i = 0;
for (int y = 0; y <= latSegments; ++y) {
final double tv = y / latSegments;
final double v = (croppedArea.top + croppedArea.height * tv) / croppedFullHeight;
final double v = y / latSegments;
final double sv = math.sin(v * math.pi);
final double cv = math.cos(v * math.pi);
for (int x = 0; x <= lonSegments; ++x) {
final double tu = x / lonSegments;
final double u = (croppedArea.left + croppedArea.width * tu) / croppedFullWidth;
final double u = x / lonSegments;
vertices[i] = Vector3(radius * math.cos(u * math.pi * 2.0) * sv, radius * cv, radius * math.sin(u * math.pi * 2.0) * sv);
texcoords[i] = Offset(tu, 1.0 - tv);
texcoords[i] = Offset(u, 1.0 - v);
i++;
}
}
@ -524,6 +337,19 @@ Mesh generateSphereMesh({num radius = 1.0, int latSegments = 16, int lonSegments
return mesh;
}
/// Get ui.Image from ImageProvider
Future<ui.Image> loadImageFromProvider(ImageProvider provider) async {
final Completer<ui.Image> completer = Completer<ui.Image>();
final ImageStream imageStream = provider.resolve(ImageConfiguration());
ImageStreamListener listener;
listener = ImageStreamListener((ImageInfo imageInfo, bool synchronousCall) {
completer.complete(imageInfo.image);
imageStream.removeListener(listener);
});
imageStream.addListener(listener);
return completer.future;
}
Vector3 quaternionToOrientation(Quaternion q) {
// final Matrix4 m = Matrix4.compose(Vector3.zero(), q, Vector3.all(1.0));
// final Vector v = motionSensors.getOrientation(m);

105
pubspec.lock
View file

@ -1,55 +1,62 @@
# Generated by pub
# See https://dart.dev/tools/pub/glossary#lockfile
packages:
archive:
dependency: transitive
description:
name: archive
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.11"
args:
dependency: transitive
description:
name: args
url: "https://pub.dartlang.org"
source: hosted
version: "1.5.2"
async:
dependency: transitive
description:
name: async
url: "https://pub.dartlang.org"
source: hosted
version: "2.5.0"
version: "2.4.0"
boolean_selector:
dependency: transitive
description:
name: boolean_selector
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0"
characters:
dependency: transitive
description:
name: characters
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
version: "1.0.5"
charcode:
dependency: transitive
description:
name: charcode
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0"
clock:
dependency: transitive
description:
name: clock
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
version: "1.1.2"
collection:
dependency: transitive
description:
name: collection
url: "https://pub.dartlang.org"
source: hosted
version: "1.15.0"
fake_async:
version: "1.14.11"
convert:
dependency: transitive
description:
name: fake_async
name: convert
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0"
version: "2.1.1"
crypto:
dependency: transitive
description:
name: crypto
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.3"
flutter:
dependency: "direct main"
description: flutter
@ -61,40 +68,61 @@ packages:
name: flutter_cube
url: "https://pub.dartlang.org"
source: hosted
version: "0.1.1"
version: "0.0.3"
flutter_test:
dependency: "direct dev"
description: flutter
source: sdk
version: "0.0.0"
image:
dependency: transitive
description:
name: image
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.4"
matcher:
dependency: transitive
description:
name: matcher
url: "https://pub.dartlang.org"
source: hosted
version: "0.12.10"
version: "0.12.6"
meta:
dependency: transitive
description:
name: meta
url: "https://pub.dartlang.org"
source: hosted
version: "1.3.0"
version: "1.1.8"
motion_sensors:
dependency: "direct main"
description:
name: motion_sensors
url: "https://pub.dartlang.org"
source: hosted
version: "0.1.0"
version: "0.0.1"
path:
dependency: transitive
description:
name: path
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0"
version: "1.6.4"
petitparser:
dependency: transitive
description:
name: petitparser
url: "https://pub.dartlang.org"
source: hosted
version: "2.4.0"
quiver:
dependency: transitive
description:
name: quiver
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.5"
sky_engine:
dependency: transitive
description: flutter
@ -106,56 +134,63 @@ packages:
name: source_span
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0"
version: "1.5.5"
stack_trace:
dependency: transitive
description:
name: stack_trace
url: "https://pub.dartlang.org"
source: hosted
version: "1.10.0"
version: "1.9.3"
stream_channel:
dependency: transitive
description:
name: stream_channel
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0"
version: "2.0.0"
string_scanner:
dependency: transitive
description:
name: string_scanner
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
version: "1.0.5"
term_glyph:
dependency: transitive
description:
name: term_glyph
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0"
version: "1.1.0"
test_api:
dependency: transitive
description:
name: test_api
url: "https://pub.dartlang.org"
source: hosted
version: "0.2.19"
version: "0.2.15"
typed_data:
dependency: transitive
description:
name: typed_data
url: "https://pub.dartlang.org"
source: hosted
version: "1.3.0"
version: "1.1.6"
vector_math:
dependency: transitive
description:
name: vector_math
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.0"
version: "2.0.8"
xml:
dependency: transitive
description:
name: xml
url: "https://pub.dartlang.org"
source: hosted
version: "3.5.0"
sdks:
dart: ">=2.12.0 <3.0.0"
dart: ">=2.4.0 <3.0.0"
flutter: ">=1.10.0"

8
pubspec.yaml
View file

@ -1,16 +1,16 @@
name: panorama
description: Panorama -- A 360-degree panorama viewer.
version: 0.4.1
version: 0.1.2
homepage: https://github.com/zesage/panorama
environment:
sdk: '>=2.12.0 <3.0.0'
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
flutter_cube: ^0.1.1
motion_sensors: ^0.1.0
flutter_cube: ^0.0.6
motion_sensors: ^0.0.4
dev_dependencies:
flutter_test:

BIN
resource/screenshot.gif
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 MiB

After

Width:  |  Height:  |  Size: 20 MiB